docs: custom theme object for example app

example/package.json

@@ -16,26 +16,28 @@
   },
   "dependencies": {
     "@react-native-community/segmented-control": "^2.1.2",
-    "expo": "^38.0.0",
-    "expo-font": "~8.2.1",
-    "expo-splash-screen": "^0.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
-    "react-native": "0.62.2",
-    "react-native-unimodules": "~0.10.1",
-    "react-native-web": "0.13"
+    "expo-status-bar": "^1.0.2",
+    "react-native-modal": "^11.5.6",
+    "expo": "^39.0.0",
+    "expo-font": "~8.3.0",
+    "expo-splash-screen": "~0.6.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "0.63.3",
+    "react-native-unimodules": "~0.11.0",
+    "react-native-web": "~0.13.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/runtime": "^7.9.6",
-    "@expo/webpack-config": "^0.12.27",
+    "@expo/webpack-config": "^0.12.16",
     "@storybook/addon-actions": "^6.0.21",
     "@storybook/addon-essentials": "^6.0.21",
     "@storybook/addon-links": "^6.0.21",
     "@storybook/react": "^6.0.21",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "^8.2.3",
+    "babel-preset-expo": "^8.3.0",
     "expo-cli": "^3.21.12",
     "react-is": "^16.13.1"
   }

example/src/App.tsx

@@ -1,10 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
-import Card from './components/Card';
-import Search from './components/Search';
-import { Column, ThemeProvider, useTheme } from './designSystem/theme';
+import NoteHeader from './components/NoteHeader/NoteHeader';
+import {
+  Box,
+  Column,
+  TextBlock,
+  ThemeProvider,
+  Touchable,
+  useTheme,
+} from './designSystem/theme';
+import { useFonts } from 'expo-font';
+import { StatusBar } from 'expo-status-bar';
+import NoteCard from './components/NoteCard/NoteCard';
+import CreateNote from './components/CreateNote/CreateNote';
 
 export default function App() {
+  const [loaded] = useFonts({
+    poppinsMedium: require('./assets/fonts/Poppins-Medium.ttf'),
+    poppinsRegular: require('./assets/fonts/Poppins-Regular.ttf'),
+  });
+
+  if (!loaded) return null;
+
   return (
     <ThemeProvider>
       <Home />
@@ -14,29 +31,64 @@ export default function App() {
 
 function Home() {
   const theme = useTheme();
+  const [openModal, setOpenModal] = useState(false);
+
   return (
     <SafeAreaView
-      style={[styles.container, { backgroundColor: theme.colors.green200 }]}
+      style={[
+        styles.container,
+        { backgroundColor: theme.colors.backgroundColor },
+      ]}
     >
-      <ScrollView>
-        <Column
-          backgroundColor="green200"
-          paddingVertical="2xl"
-          paddingHorizontal="2xl"
-          spacing="5xl"
-        >
-          <Search />
-          <Column spacing="2xl">
-            <Card backgroundColor="brand300" />
-            <Card backgroundColor="brand400" />
-            <Card backgroundColor="brand500" />
-            <Card backgroundColor="brand600" />
-            <Card backgroundColor="brand700" />
-            <Card backgroundColor="brand800" />
-            <Card backgroundColor="brand900" />
+      <StatusBar
+        style="auto"
+        translucent={false}
+        backgroundColor={theme.colors.backgroundColor}
+      />
+      {/* TODO: spacing property for the column doesn't work if we use inside scroll view */}
+      <Column flex={1} paddingHorizontal="xl" paddingTop="xl">
+        <NoteHeader text={'Todo'} />
+        <ScrollView>
+          <Column spacing="xl" paddingTop="xl">
+            <NoteCard
+              note="This is task description that will wrap automatically into a new line"
+              date={'Mar 3, 2020'}
+              priority="low"
+              categories={['Mobile', 'Web']}
+              pictureUrl={
+                'https://images.unsplash.com/photo-1604274608427-486b399380ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80'
+              }
+            />
+
+            <NoteCard
+              note="Define more tags in components"
+              date={'Mar 3, 2020'}
+              priority="low"
+              categories={['Web', 'Web']}
+              pictureUrl={
+                'https://images.unsplash.com/photo-1604274608427-486b399380ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80'
+              }
+            />
           </Column>
-        </Column>
-      </ScrollView>
+        </ScrollView>
+      </Column>
+      <Touchable nativeProps={{ onPress: () => setOpenModal(true) }}>
+        <Box
+          alignSelf="flex-end"
+          width={60}
+          height={60}
+          borderRadius="circle"
+          backgroundColor="addIconBackground"
+          position="absolute"
+          bottom={20}
+          right={20}
+        >
+          <TextBlock fontSize="addIcon" color="addIconText" textAlign="center">
+            +
+          </TextBlock>
+        </Box>
+      </Touchable>
+      <CreateNote isVisible={openModal} onClose={setOpenModal} />
     </SafeAreaView>
   );
 }

example/src/components/Category/Category.tsx

@@ -0,0 +1,26 @@
+import { Box, TextBlock } from '../../designSystem/theme';
+import React from 'react';
+
+export interface CategoryProps {
+  text: string;
+}
+
+const Category = ({ text }: CategoryProps) => {
+  return (
+    <Box
+      borderRadius="categoryPill"
+      backgroundColor="categoryBackground01"
+      paddingVertical="sm"
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal="md"
+      alignSelf="flex-start"
+    >
+      <TextBlock color="categoryText" fontSize="pill" fontWeight="normal">
+        {text}
+      </TextBlock>
+    </Box>
+  );
+};
+
+export default Category;

example/src/components/CreateNote/CreateNote.tsx

@@ -0,0 +1,31 @@
+import { TextBlock } from '../../designSystem/theme';
+import React from 'react';
+import { View } from 'react-native';
+import Modal from 'react-native-modal';
+
+export interface CreateNoteProps {
+  isVisible: boolean;
+  onClose: (arg0: boolean) => void;
+}
+
+const CreateNote = ({ isVisible, onClose }: CreateNoteProps) => {
+  return (
+    <View>
+      <Modal
+        isVisible={isVisible}
+        onSwipeComplete={() => onClose(false)}
+        swipeDirection="down"
+        onBackdropPress={() => onClose(false)}
+        coverScreen={true}
+      >
+        <View>
+          <TextBlock backgroundColor="noteCardBackground">
+            I am the modal content!
+          </TextBlock>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default CreateNote;

example/src/components/NoteCard/NoteCard.tsx

@@ -0,0 +1,52 @@
+import { Column, Row, TextBlock } from '../../designSystem/theme';
+import React from 'react';
+import Priority, { PriorityProps } from '../Priority/Priority';
+import Category from '../Category/Category';
+import TimeStamp from '../TimeStamp/TimeStamp';
+import ProfilePic from '../ProfilePic/ProfilePic';
+
+export interface NoteCardProps {
+  note: string;
+  date: string;
+  priority: PriorityProps['priority'];
+  categories: string[];
+  pictureUrl: string;
+}
+
+const NoteCard = ({
+  note,
+  date,
+  priority,
+  categories,
+  pictureUrl,
+}: NoteCardProps) => {
+  return (
+    <Column
+      backgroundColor="noteCardBackground"
+      borderRadius="noteCard"
+      padding="lg"
+      borderColor="noteCardBorder"
+      borderWidth={1}
+      spacing="lg"
+    >
+      <Priority priority={priority} />
+      <TextBlock
+        fontSize="note"
+        fontWeight="medium"
+        lineHeight="note"
+        color="noteText"
+      >
+        {note}
+      </TextBlock>
+      <Row spacing="sm">
+        {categories.map((category: string) => (
+          <Category text={category} key={category} />
+        ))}
+      </Row>
+      <TimeStamp date={date} />
+      <ProfilePic url={pictureUrl} />
+    </Column>
+  );
+};
+
+export default NoteCard;

example/src/components/NoteHeader/NoteHeader.tsx

@@ -0,0 +1,21 @@
+import { TextBlock } from '../../designSystem/theme';
+import React from 'react';
+
+export interface NoteHeaderProps {
+  text: string;
+}
+
+const NoteHeader = ({ text }: NoteHeaderProps) => {
+  return (
+    <TextBlock
+      color="headerText"
+      fontSize="header"
+      fontWeight="medium"
+      fontFamily="primaryMedium"
+    >
+      {text}
+    </TextBlock>
+  );
+};
+
+export default NoteHeader;

example/src/components/Priority/Priority.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, ColorProp, TextBlock } from '../../designSystem/theme';
+
+export interface PriorityProps {
+  priority: 'low' | 'medium' | 'high';
+}
+
+const Priority = ({ priority }: PriorityProps) => {
+  let fontColor: ColorProp;
+  let backgroundColor: ColorProp;
+  let text: string;
+
+  switch (priority) {
+    case 'low':
+      fontColor = 'lowPriorityText';
+      backgroundColor = 'lowPriorityBackground';
+      text = 'Low';
+      break;
+    case 'medium':
+      fontColor = 'mediumPriorityText';
+      backgroundColor = 'mediumPriorityBackground';
+      text = 'Medium';
+      break;
+    case 'high':
+    default:
+      fontColor = 'highPriorityText';
+      backgroundColor = 'highPriorityBackground';
+      text = 'High';
+  }
+
+  return (
+    <Box
+      borderRadius="priorityPill"
+      backgroundColor={backgroundColor}
+      paddingVertical="sm"
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal="md"
+      alignSelf="flex-start"
+    >
+      <TextBlock color={fontColor} fontSize="pill" fontWeight="normal">
+        {text}
+      </TextBlock>
+    </Box>
+  );
+};
+
+export default Priority;

example/src/components/ProfilePic/ProfilePic.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box } from '../../designSystem/theme';
+import { Image } from 'react-native';
+
+export interface ProfilePicProps {
+  url: string;
+}
+
+const ProfilePic = ({ url }: ProfilePicProps) => {
+  const customImageStyle = {
+    flex: 1,
+  };
+
+  return (
+    <Box
+      borderWidth={1}
+      borderColor="profilePicBorder"
+      borderRadius="circle"
+      alignSelf="flex-end"
+      overflow="hidden"
+      width={32}
+      height={32}
+    >
+      <Image
+        source={{
+          uri: url,
+        }}
+        style={customImageStyle}
+      />
+    </Box>
+  );
+};
+
+export default ProfilePic;