1.1 (#1)

* add example

* v1.1

.gitignore

@@ -79,4 +79,6 @@ _coverage/*
 .metro-health-check*
 
 # testing
-/coverage
+/coverage
+
+.history

README.md

@@ -0,0 +1,5 @@
+# Atlas Design System
+
+
+# Running exmple app 
+

example/.gitignore

@@ -0,0 +1,22 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# VsCode
+.history
+
+# macOS
+.DS_Store
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

example/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

example/app.json

@@ -0,0 +1,37 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.juancastillom.ads"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

example/app/_layout.tsx

@@ -0,0 +1,32 @@
+import { Stack } from "expo-router";
+
+import { ThemeContext, ATLAS_LIGHT, TitleBar } from "atlas-design-system";
+
+export default function RootLayout() {
+  return (
+    <ThemeContext.Provider value={ATLAS_LIGHT}>
+      <Stack
+        screenOptions={{
+          header: ({ options, navigation }) => (
+            <TitleBar
+              title={options.title}
+              canGoBack={navigation.canGoBack()}
+              onBackPressed={() => {
+                navigation.goBack();
+              }}
+            />
+          ),
+        }}
+      >
+        <Stack.Screen name="index" options={{ title: "Components" }} />
+        <Stack.Screen name="dateTimeInputGallery" options={{ title: "Date Time Input" }} />
+        <Stack.Screen name="textInputGallery" options={{ title: "Text Input" }} />
+        <Stack.Screen name="switchToggleInputGallery" options={{ title: "Switch Toggle" }} />
+        <Stack.Screen name="textGallery" options={{ title: "Text" }} />
+        <Stack.Screen name="buttonGallery" options={{ title: "Button" }} />
+        <Stack.Screen name="sheetGallery" options={{ title: "Sheet" }} />
+        <Stack.Screen name="selectInputGallery" options={{ title: "Select Input" }} />
+      </Stack>
+    </ThemeContext.Provider>
+  );
+}

example/app/buttonGallery.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useCallback } from "react";
+import { ScrollView, View, StyleSheet, Alert } from "react-native";
+
+import { Button, useThemedStyle, TextInput } from "atlas-design-system";
+
+export default function ButtonGallery() {
+  const styles = useStyles().styles;
+
+  const [sampleText, setSetsampleText] = useState("The quick brown fox");
+
+  const onPress = () => {
+    Alert.alert('Alert', 'button pressed')
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <TextInput
+        label="Enter button text here"
+        value={sampleText}
+        onChangeText={setSetsampleText}
+      />
+      <View style={styles.section}>
+        <Button onPress={onPress} text={sampleText}></Button>
+        <Button appearance='secondary' onPress={onPress} text={sampleText}></Button>
+        <Button loading onPress={onPress} text={sampleText}></Button>
+        <Button onPress={onPress} appearance='destructive' text={sampleText}></Button>
+        <Button disabled text={sampleText}></Button>
+      </View>
+    </ScrollView>
+  );
+}
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      (t) =>
+        StyleSheet.create({
+          section: {
+            rowGap: t.size.baseSize * 2,
+          },
+          container: {
+            rowGap: t.size.baseSize * 4,
+            paddingVertical: t.size.baseSize * 4,
+            paddingHorizontal: t.size.baseSize * 4,
+          },
+        }),
+      []
+    )
+  );

example/app/dateTimeInputGallery.tsx

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+
+import { DateTimeInput, useThemedStyle } from "atlas-design-system";
+
+export default function DateTimeInputGallery() {
+  const styles = useStyles().styles;
+  const [date, setDate] = useState(new Date());
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <DateTimeInput value={date} onChange={setDate} label="Date Time Input"/>
+    </ScrollView>
+  );
+}
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      (t) =>
+        StyleSheet.create({
+          container: {
+            paddingTop: t.size.baseSize *4,
+            paddingHorizontal: t.size.baseSize * 4,
+          },
+        }),
+      []
+    )
+  );

example/app/index.tsx

@@ -0,0 +1,58 @@
+import { ScrollView } from "react-native";
+import { router } from "expo-router";
+
+import { NavigationListRow } from "atlas-design-system";
+
+export default function Index() {
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        flex: 1,
+        alignItems: "center",
+      }}
+    >
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/dateTimeInputGallery");
+        }}
+        label="Date Time Input"
+      ></NavigationListRow>
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/textInputGallery");
+        }}
+        label="Text Input"
+      />
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/selectInputGallery");
+        }}
+        label="Select Input"
+      />
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/switchToggleInputGallery");
+        }}
+        label="Switch Toggle"
+      ></NavigationListRow>
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/textGallery");
+        }}
+        label="Text"
+      ></NavigationListRow>
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/buttonGallery");
+        }}
+        label="Button"
+      ></NavigationListRow>
+      <NavigationListRow
+        onPress={() => {
+          router.navigate("/sheetGallery");
+        }}
+        label="Sheet"
+      ></NavigationListRow>
+    </ScrollView>
+  );
+}

example/app/selectInputGallery.tsx

@@ -0,0 +1,45 @@
+import { useState, useCallback } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+
+import { useThemedStyle, SelectInput, Option } from "atlas-design-system";
+
+export default function selectInputGallery() {
+  const styles = useStyles().styles;
+
+  const [selectedOption, setSelectedOption] = useState<Option>();
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <SelectInput
+        options={[
+          {
+            value: "almond",
+            label: "Almond",
+            selected: selectedOption?.value === "almond",
+          },
+          {
+            value: "honey",
+            label: "Honey",
+            selected: selectedOption?.value === "honey",
+          },
+        ]}
+        onChange={setSelectedOption}
+        label="Select One"
+      />
+    </ScrollView>
+  );
+}
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      (t) =>
+        StyleSheet.create({
+          container: {
+            paddingTop: t.size.baseSize * 4,
+            paddingHorizontal: t.size.baseSize * 4,
+          },
+        }),
+      []
+    )
+  );