From 9d7be21b29f7a33c3330d7f5482006a35187d698 Mon Sep 17 00:00:00 2001
From: Juan Castillo <juancstl@protonmail.com>
Date: Wed, 31 Jul 2024 00:08:47 -0700
Subject: [PATCH] Initial Commit

---
 .gitignore                                    |  82 +++++++
 components/Button/Button.tsx                  |  44 ++++
 components/Button/index.ts                    |   2 +
 components/Button/styles/ButtonStyle.ts       |  44 ++++
 components/DateTimeInput/index.tsx            | 172 ++++++++++++++
 .../MenuItemDescription.tsx                   |  36 +++
 components/MenuItemDescription/index.ts       |   2 +
 components/Sheet/index.tsx                    | 163 +++++++++++++
 components/SwitchToggle/SwitchToggle.tsx      |  31 +++
 components/Text/index.tsx                     |  74 ++++++
 components/TextInput/TextInput.tsx            | 214 ++++++++++++++++++
 components/TextInput/index.tsx                |   2 +
 components/index.ts                           |   5 +
 context/index.ts                              |   5 +
 hooks/index.ts                                |   2 +
 hooks/useTheme.ts                             |   7 +
 hooks/useThemedStyle.ts                       |  18 ++
 index.ts                                      |   3 +
 package.json                                  |  15 ++
 shared/styles/index.ts                        |  33 +++
 themes/AtlasLightTheme.ts                     |  90 ++++++++
 types/index.ts                                |   2 +
 types/theme.ts                                |  45 ++++
 types/typography.ts                           |  14 ++
 24 files changed, 1105 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 components/Button/Button.tsx
 create mode 100644 components/Button/index.ts
 create mode 100644 components/Button/styles/ButtonStyle.ts
 create mode 100644 components/DateTimeInput/index.tsx
 create mode 100644 components/MenuItemDescription/MenuItemDescription.tsx
 create mode 100644 components/MenuItemDescription/index.ts
 create mode 100644 components/Sheet/index.tsx
 create mode 100644 components/SwitchToggle/SwitchToggle.tsx
 create mode 100644 components/Text/index.tsx
 create mode 100644 components/TextInput/TextInput.tsx
 create mode 100644 components/TextInput/index.tsx
 create mode 100644 components/index.ts
 create mode 100644 context/index.ts
 create mode 100644 hooks/index.ts
 create mode 100644 hooks/useTheme.ts
 create mode 100644 hooks/useThemedStyle.ts
 create mode 100644 index.ts
 create mode 100644 package.json
 create mode 100644 shared/styles/index.ts
 create mode 100644 themes/AtlasLightTheme.ts
 create mode 100644 types/index.ts
 create mode 100644 types/theme.ts
 create mode 100644 types/typography.ts

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..99a30c8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,82 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+.history
+.vscode
+.git
+.run
+
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/
+ios-dev.bundle.map
+ios-dev.bundle
+ios-release.bundle
+ios-release.bundle.map
+ios-release.bundle
+ios-release.bundle.map
+
+# Coverage Directory
+_coverage/*
+!_coverage/lcov.info
+
+ 
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+ 
+# testing
+/coverage
\ No newline at end of file
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
new file mode 100644
index 0000000..ee76989
--- /dev/null
+++ b/components/Button/Button.tsx
@@ -0,0 +1,44 @@
+import { ActivityIndicator, StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
+import React from 'react';
+
+import { useButtonStyles } from './styles/ButtonStyle';
+import Text from '../Text';
+
+export enum ButtonType {
+  Primary,
+  Destructive,
+}
+
+export interface ButtonProps {
+  disabled?: boolean;
+  type?: ButtonType;
+  onPress?: () => void;
+  text: string;
+  loading?: boolean;
+  testID?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const Button = ({ testID, disabled = false, onPress, text, loading, type = ButtonType.Primary, containerStyle = {} }: ButtonProps) => {
+  const { styles, theme } = useButtonStyles();
+  const buttonStyle = type === ButtonType.Primary ? styles.default : styles.destructiveContainer;
+
+  return (
+    <TouchableOpacity
+      testID={testID}
+      style={[buttonStyle, disabled && styles.disabled, containerStyle]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={theme.colors.foregroundOnPrimary} />
+      ) : (
+        <Text category="h3" style={[styles.defaultText, disabled && styles.disabledText]}>
+          {text}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default Button;
diff --git a/components/Button/index.ts b/components/Button/index.ts
new file mode 100644
index 0000000..d5d5668
--- /dev/null
+++ b/components/Button/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Button';
+export * from './Button';
diff --git a/components/Button/styles/ButtonStyle.ts b/components/Button/styles/ButtonStyle.ts
new file mode 100644
index 0000000..da877cf
--- /dev/null
+++ b/components/Button/styles/ButtonStyle.ts
@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import { useCallback } from 'react';
+
+import { useThemedStyle } from '../../../hooks';
+
+export const useButtonStyles = () =>
+  useThemedStyle(
+    useCallback(
+      theme =>
+        StyleSheet.create({
+          default: {
+            borderRadius: theme.borderRadius,
+            justifyContent: 'center',
+            backgroundColor: theme.colors.primary,
+            paddingHorizontal: theme.size.baseSize * 4,
+            paddingVertical: theme.size.baseSize * 2,
+            textAlign: 'center',
+          },
+          destructiveContainer: {
+            borderRadius: theme.borderRadius,
+            justifyContent: 'center',
+            paddingHorizontal: theme.size.baseSize * 4,
+            paddingVertical: theme.size.baseSize * 2,
+            textAlign: 'center',
+            backgroundColor: theme.colors.secondaryNegative,
+          },
+          destructiveText: {
+            textAlign: 'center',
+            color: theme.colors.backgroundPrimary,
+          },
+          defaultText: {
+            textAlign: 'center',
+            color: theme.colors.foregroundOnPrimary,
+          },
+          disabled: {
+            backgroundColor: theme.colors.primaryLowContrast,
+          },
+          disabledText: {
+            color: theme.colors.foregroundOnPrimary,
+          },
+        }),
+      []
+    )
+  );
diff --git a/components/DateTimeInput/index.tsx b/components/DateTimeInput/index.tsx
new file mode 100644
index 0000000..da870e4
--- /dev/null
+++ b/components/DateTimeInput/index.tsx
@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import DateTimePicker, { IOSNativeProps, AndroidNativeProps } from '@react-native-community/datetimepicker';
+import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import Animated, { interpolate, interpolateColor, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import IonIcons from 'react-native-vector-icons/Ionicons';
+import moment from 'moment';
+
+import Sheet from '../Sheet';
+import Text from '../Text';
+import MenuItemDescription from '../MenuItemDescription';
+import { useThemedStyle } from '../../hooks';
+import Button from '../Button';
+
+type Props = {
+  label: string;
+  caption?: string;
+  value: Date;
+  onChange?: (date: Date) => void;
+  onSave?: (date: Date) => void;
+  disabled?: boolean;
+  testID?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  mode?: IOSNativeProps['mode'] | AndroidNativeProps['mode'];
+};
+
+const getFormat = (mode?: Props['mode']) => {
+  switch (mode) {
+    case 'date': {
+      return 'MMM D, YYYY';
+    }
+    case 'time': {
+      return 'h:mm A';
+    }
+    case 'datetime':
+    default: {
+      return 'MMM D, YYYY  h:mm A';
+    }
+  }
+};
+
+const DateTimeInput = ({
+  value,
+  onChange,
+  testID,
+  containerStyle,
+  label,
+  caption,
+  mode = 'date',
+  disabled = false,
+  onSave,
+}: Props) => {
+  const { styles, theme } = useStyles(disabled);
+  const [dateSheetOpen, setDateSheetOpen] = useState(false);
+  const [date, setDate] = useState(value);
+
+  useEffect(() => {
+    if (dateSheetOpen) {
+      return;
+    }
+
+    setDate(value);
+  }, [dateSheetOpen, value]);
+
+  const animatedValue = useSharedValue(value ? 1 : 0);
+
+  const animatedLabelStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: interpolate(animatedValue.value, [0, 1], [1, -8]) }],
+      fontSize: interpolate(animatedValue.value, [0, 1], [14, 10]),
+    };
+  }, []);
+
+  const animatedContainerStyles = useAnimatedStyle(() => {
+    return {
+      borderColor: interpolateColor(animatedValue.value, [0, 1], ['#ffffff00', theme.colors.border]),
+    };
+  });
+
+  const animatedValueStyle = useAnimatedStyle(() => {
+    return {
+      flex: 1,
+      transform: [{ translateY: animatedValue.value * 6 }],
+    };
+  });
+
+  return (
+    <>
+      <View testID={testID} style={[styles.container, containerStyle]}>
+        <TouchableOpacity onPress={() => setDateSheetOpen(true)} disabled={disabled}>
+          <Animated.View style={[styles.itemContainer, animatedContainerStyles]}>
+            <View pointerEvents="none" style={styles.labelContainer}>
+              <Animated.Text style={[styles.label, animatedLabelStyles]}>{label}</Animated.Text>
+            </View>
+            <Animated.View style={animatedValueStyle}>
+              <Text contrast="low" style={styles.value}>
+                {moment(value).format(getFormat(mode)).toString()}
+              </Text>
+            </Animated.View>
+            <IonIcons
+              style={styles.iconRight}
+              color={!disabled ? theme.colors.foreground : theme.colors.foregroundLowContrast}
+              name={mode === 'time' ? 'time-outline' : 'calendar-outline'}
+              size={20}
+            />
+          </Animated.View>
+        </TouchableOpacity>
+        {!!caption && <MenuItemDescription description={caption} />}
+      </View>
+      <Sheet header={label} open={dateSheetOpen} setOpen={setDateSheetOpen}>
+        <DateTimePicker
+          value={date}
+          mode={mode}
+          themeVariant={theme.isDarkTheme ? 'dark' : 'light'}
+          display="spinner"
+          onChange={(_, newDate) => {
+            if (!newDate) {
+              return;
+            }
+            setDate(newDate);
+            onChange?.(newDate);
+          }}
+        />
+        <Button
+          disabled={value.getTime() === date.getTime()}
+          text="Save"
+          onPress={() => {
+            onSave?.(date);
+          }}
+        />
+      </Sheet>
+    </>
+  );
+};
+
+export default DateTimeInput;
+
+const useStyles = (disabled: boolean) =>
+  useThemedStyle(
+    useCallback(
+      t =>
+        StyleSheet.create({
+          container: {
+            marginBottom: t.size.baseSize * 3,
+          },
+          itemContainer: {
+            backgroundColor: t.colors.backgroundOnPrimary,
+            borderRadius: t.borderRadius,
+            paddingHorizontal: t.size.baseSize * 2,
+            minHeight: t.size.baseSize * 8,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          },
+          itemLabel: {
+            color: t.textPrimary,
+          },
+          labelContainer: {
+            left: t.size.baseSize * 2,
+            position: 'absolute',
+          },
+          label: {
+            color: !disabled ? t.colors.foreground : t.colors.foregroundLowContrast,
+            ...t.typography.p1,
+          },
+          iconRight: {},
+          value: {
+            paddingHorizontal: t.size.baseSize * 0,
+          },
+        }),
+      [disabled]
+    )
+  );
diff --git a/components/MenuItemDescription/MenuItemDescription.tsx b/components/MenuItemDescription/MenuItemDescription.tsx
new file mode 100644
index 0000000..353698b
--- /dev/null
+++ b/components/MenuItemDescription/MenuItemDescription.tsx
@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Text from '../Text';
+import { useThemedStyle } from '../../hooks';
+
+type MenuItemDescriptionProps = {
+  description: string;
+};
+
+const MenuItemDescription: React.FC<MenuItemDescriptionProps> = ({ description }) => {
+  const { styles } = useStyles();
+  return (
+    <View style={styles.descriptionContainer}>
+      <Text category="p2" contrast="low">
+        {description}
+      </Text>
+    </View>
+  );
+};
+
+export default React.memo(MenuItemDescription);
+
+const useStyles = () =>
+  useThemedStyle(
+    useCallback(
+      theme =>
+        StyleSheet.create({
+          descriptionContainer: {
+            marginHorizontal: theme.size.baseSize * 2,
+            marginTop: theme.size.baseSize,
+          },
+        }),
+      []
+    )
+  );
diff --git a/components/MenuItemDescription/index.ts b/components/MenuItemDescription/index.ts
new file mode 100644
index 0000000..a5432cc
--- /dev/null
+++ b/components/MenuItemDescription/index.ts
@@ -0,0 +1,2 @@
+export { default } from './MenuItemDescription';
+export * from './MenuItemDescription';
diff --git a/components/Sheet/index.tsx b/components/Sheet/index.tsx
new file mode 100644
index 0000000..e584b1f
--- /dev/null
+++ b/components/Sheet/index.tsx
@@ -0,0 +1,163 @@
+import React, { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react';
+import { Modal, Pressable, ScrollView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  SlideInDown,
+  SlideOutDown,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useThemedStyle } from '../../hooks/useThemedStyle';
+import Text from '../Text';
+
+type Props = {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  children?: React.ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  defaultMargins?: boolean;
+  header?: string;
+  transparent?: boolean;
+};
+
+const BACKGROUND_OPACITY = 0.6;
+
+export const Sheet = ({
+  open,
+  setOpen,
+  children,
+  containerStyle,
+  defaultMargins = true,
+  header,
+  transparent = false,
+}: Props) => {
+  const styles = useStyles(defaultMargins).styles;
+  const [visible, setVisible] = useState(open);
+
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (!open) {
+      setVisible(false);
+      return;
+    }
+
+    setVisible(true);
+  }, [open]);
+
+  useEffect(() => {
+    if (!visible) {
+      opacity.value = withTiming(
+        0,
+        {
+          duration: 200,
+          easing: Easing.bezier(0.5, 0, 0, 0.75),
+        },
+        () => {
+          runOnJS(setOpen)(false);
+        }
+      );
+      return;
+    }
+    opacity.value = withTiming(BACKGROUND_OPACITY, {
+      duration: 250,
+      easing: Easing.bezier(0.5, 0, 0, 0.75),
+    });
+  }, [visible]);
+
+  const animatedModalBackgroundStyles = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const content = (
+    <>
+      {!transparent && (
+        <Pressable
+          style={styles.modalPressable}
+          onPress={() => {
+            setVisible(false);
+          }}
+        >
+          <Animated.View style={[styles.modalBackground, animatedModalBackgroundStyles]} />
+        </Pressable>
+      )}
+      {visible && (
+        <Animated.View entering={SlideInDown} exiting={SlideOutDown} style={[styles.sheet, containerStyle]}>
+          {!!header && (
+            <View style={styles.headerContainer}>
+              <Text>{header}</Text>
+            </View>
+          )}
+          <ScrollView contentContainerStyle={styles.contentContainer}>{children}</ScrollView>
+        </Animated.View>
+      )}
+    </>
+  );
+
+  // // Don't render anything if it's not visible
+  if (!visible && !open) {
+    return null;
+  }
+
+  return (
+    <Modal transparent visible>
+      <View style={styles.wrapper}>{content}</View>
+    </Modal>
+  );
+};
+
+export default Sheet;
+
+const useStyles = (defaultMargins: boolean) => {
+  const { bottom: bottomInset } = useSafeAreaInsets();
+  return useThemedStyle(
+    useCallback(
+      theme =>
+        StyleSheet.create({
+          wrapper: {
+            flex: 1,
+            justifyContent: 'flex-end',
+          },
+          headerContainer: {
+            paddingVertical: theme.size.baseSize * 3,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderBottomWidth: theme.borderWidth / 2,
+            borderColor: theme.colors.border,
+          },
+          modalPressable: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 0,
+          },
+          modalBackground: {
+            backgroundColor: '#000000',
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 0,
+          },
+          sheet: {
+            alignSelf: 'center',
+            display: 'flex',
+            width: '100%',
+            maxWidth: 600,
+            maxHeight: '80%',
+            backgroundColor: theme.colors.backgroundPrimary,
+          },
+          contentContainer: {
+            padding: defaultMargins ? theme.size.baseSize * 4 : 0,
+            paddingBottom: defaultMargins ? theme.size.baseSize * 4 + bottomInset : bottomInset,
+          },
+        }),
+      [bottomInset]
+    )
+  );
+};
diff --git a/components/SwitchToggle/SwitchToggle.tsx b/components/SwitchToggle/SwitchToggle.tsx
new file mode 100644
index 0000000..c5afa01
--- /dev/null
+++ b/components/SwitchToggle/SwitchToggle.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleProp, Switch, TouchableOpacity, View, ViewStyle } from 'react-native';
+
+
+import Text from '../Text';
+import MenuItemDescription from '../MenuItemDescription';
+import { useMenuItemStyles } from '../../shared/styles/index';
+
+export type SwitchToggleProps = {
+  label: string;
+  value?: boolean;
+  caption?: string;
+  testId?: string;
+  onChange?: (value: boolean) => void;
+  touchableStyle?: StyleProp<ViewStyle>;
+};
+
+const SwitchToggle = ({ testId, onChange, value, caption, label, touchableStyle }: SwitchToggleProps) => {
+  const styles = useMenuItemStyles().styles;
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity testID={testId} style={[styles.itemContainer, touchableStyle]}>
+        <Text numberOfLines={1}>{label}</Text>
+        <Switch testID={`${testId}_toggle`} onValueChange={onChange} value={value} />
+      </TouchableOpacity>
+      {!!caption && <MenuItemDescription description={caption} />}
+    </View>
+  );
+};
+
+export default SwitchToggle;
diff --git a/components/Text/index.tsx b/components/Text/index.tsx
new file mode 100644
index 0000000..26ddb75
--- /dev/null
+++ b/components/Text/index.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+import { StyleProp, StyleSheet, Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native';
+
+import { TypographyStyles, TypographyVariants } from '../../types/typography';
+import { useThemedStyle } from '../../hooks';
+
+type TextContrast = 'high' | 'medium' | 'low';
+type TextStatus = 'error' | 'informative' | 'warning' | 'success';
+
+export interface TextProps extends RNTextProps {
+  status?: TextStatus;
+  category?: TypographyVariants;
+  contrast?: TextContrast;
+  style?: StyleProp<TextStyle>;
+}
+
+const getFontStyle = ({ fontFamily, fontSize, fontWeight, lineHeight }: TypographyStyles): TextStyle => {
+  return {
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+  };
+};
+
+export const Text = ({ category = 'p1', contrast, style, status, ...rest }: TextProps) => {
+  const { styles } = useStyles(category, contrast, status);
+  return <RNText style={[styles.fontStyle, styles.colorStyle, style]} {...rest} />;
+};
+
+export default Text;
+
+const useStyles = (category: TypographyVariants, contrast: TextContrast = 'high', status?: TextStatus) =>
+  useThemedStyle(
+    useCallback(
+      theme => {
+        let color = theme.colors.foregroundHighContrast;
+        if (contrast) {
+          if (contrast === 'medium') {
+            color = theme.colors.foreground;
+          } else if (contrast === 'low') {
+            color = theme.colors.foregroundLowContrast;
+          }
+        }
+        if (status) {
+          if (status) {
+            switch (status) {
+              case 'error':
+                color = theme.colors.secondaryNegative;
+                break;
+              case 'informative':
+                color = theme.colors.primary;
+                break;
+              case 'warning':
+                color = theme.colors.secondaryWarning;
+                break;
+              case 'success':
+                color = theme.colors.secondaryPositive;
+                break;
+              default:
+                break;
+            }
+          }
+        }
+        return StyleSheet.create({
+          colorStyle: {
+            color,
+          },
+          fontStyle: getFontStyle(theme.typography[category]),
+        });
+      },
+      [category, contrast, status]
+    )
+  );
diff --git a/components/TextInput/TextInput.tsx b/components/TextInput/TextInput.tsx
new file mode 100644
index 0000000..76877a2
--- /dev/null
+++ b/components/TextInput/TextInput.tsx
@@ -0,0 +1,214 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import {
+  KeyboardTypeOptions,
+  StyleSheet,
+  View,
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+  Pressable,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import Animated, {
+  Easing,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import Text from '../Text';
+import MenuItemDescription from '../MenuItemDescription';
+import { useThemedStyle } from '../../hooks';
+
+export type TextInputProps = {
+  disabled?: boolean;
+  testId?: string;
+  caption?: string;
+  keyboardType?: KeyboardTypeOptions;
+  onBlur?: (text: string) => void;
+  value: string;
+  label: string;
+  containerStyle?: StyleProp<ViewStyle>;
+} & Omit<RNTextInputProps, 'onBlur'>;
+
+const TextInput = forwardRef(
+  (
+    {
+      caption,
+      keyboardType,
+      onChangeText,
+      testId,
+      value,
+      label,
+      onBlur,
+      containerStyle,
+      disabled = false,
+      ...rest
+    }: TextInputProps,
+    ref
+  ) => {
+    const { styles, theme } = useStyles(disabled);
+
+    const inputRef = useRef<RNTextInput>(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        inputRef?.current?.focus();
+      },
+      blur: () => {
+        inputRef?.current?.blur();
+      },
+    }));
+
+    const animatedValue = useSharedValue(value ? 1 : 0);
+    const focusedValue = useSharedValue(0);
+
+    const animatedLabelStyles = useAnimatedStyle(() => {
+      return {
+        transform: [{ translateY: interpolate(animatedValue.value, [0, 1], [1, -8]) }],
+        fontSize: interpolate(animatedValue.value, [0, 1], [14, 10]),
+      };
+    }, []);
+
+    const animatedInputStyles = useAnimatedStyle(() => {
+      return {
+        flex: 1,
+        transform: [{ translateY: animatedValue.value * 4 }],
+      };
+    });
+
+    const animatedContainerStyles = useAnimatedStyle(() => {
+      return {
+        borderColor: interpolateColor(focusedValue.value, [0, 1], ['#ffffff00', theme.colors.border]),
+      };
+    });
+
+    const handleOnChangeText = (text: string) => {
+      if (text.length === 0) {
+        animatedValue.value = withTiming(0, {
+          duration: 200,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+        });
+      }
+      onChangeText?.(text);
+      if (value || animatedValue.value === 1) {
+        return;
+      }
+      animatedValue.value = withTiming(1, {
+        duration: 200,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+      });
+    };
+
+    const handleOnBlur: RNTextInputProps['onBlur'] = ({ nativeEvent }) => {
+      onBlur?.(nativeEvent.text);
+      focusedValue.value = withTiming(0, {
+        duration: 200,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+      });
+      if (!value) {
+        animatedValue.value = withTiming(0, {
+          duration: 200,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+        });
+      }
+    };
+
+    const onFocus = () => {
+      focusedValue.value = withTiming(1, {
+        duration: 200,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+      });
+    };
+
+    return (
+      <View style={{width: '100%', flexShrink: 0.5 }}>
+        <Pressable
+          onPress={() => {
+            inputRef?.current?.focus();
+          }}
+          style={styles.pressable}
+          disabled={disabled}
+        >
+          <Animated.View style={[styles.itemContainer, animatedContainerStyles, containerStyle]}>
+            <View pointerEvents="none" style={styles.labelContainer}>
+              <Animated.Text style={[styles.label, animatedLabelStyles]}>{label}</Animated.Text>
+            </View>
+            <Animated.View style={animatedInputStyles}>
+              {disabled ? (
+                <Text style={styles.text}>{value}</Text>
+              ) : (
+                <RNTextInput
+                  ref={inputRef}
+                  testID={testId}
+                  value={value}
+                  style={styles.textInput}
+                  numberOfLines={1}
+                  keyboardType={keyboardType}
+                  placeholderTextColor={theme.placeholderTextColor}
+                  onChangeText={handleOnChangeText}
+                  maxLength={40}
+                  returnKeyType="done"
+                  onBlur={handleOnBlur}
+                  onFocus={onFocus}
+                  keyboardAppearance={theme.keyboardAppearance}
+                  {...rest}
+                />
+              )}
+            </Animated.View>
+          </Animated.View>
+        </Pressable>
+        {!!caption && <MenuItemDescription description={caption} />}
+      </View>
+    );
+  }
+);
+
+export default TextInput;
+
+const useStyles = (disabled: boolean) =>
+  useThemedStyle(
+    useCallback(
+      theme =>
+        StyleSheet.create({
+          pressable: {
+            flexGrow: 2,
+            flexShrink: 1,
+          },
+          textInput: {
+            paddingHorizontal: theme.size.baseSize * 2,
+            ...theme.typography.p1,
+            color: theme.colors.foregroundLowContrast,
+          },
+          text: {
+            marginTop: theme.size.baseSize,
+            paddingHorizontal: theme.size.baseSize * 2,
+            color: theme.colors.foregroundLowContrast,
+          },
+          itemContainer: {
+            borderWidth: theme.borderWidth,
+            borderColor: theme.colors.borderSecondary,
+            backgroundColor: theme.colors.backgroundOnPrimary,
+            borderRadius: theme.borderRadius,
+            minHeight: theme.size.baseSize * 8,
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+          labelContainer: {
+            left: theme.size.baseSize * 2,
+            position: 'absolute',
+          },
+          label: {
+            color: !disabled ? theme.colors.foreground : theme.colors.foregroundLowContrast,
+            ...theme.typography.p1,
+          },
+          descriptionContainer: {
+            marginHorizontal: theme.size.baseSize * 4,
+            marginBottom: theme.size.baseSize * 2,
+          },
+        }),
+      [disabled]
+    )
+  );
diff --git a/components/TextInput/index.tsx b/components/TextInput/index.tsx
new file mode 100644
index 0000000..4f10088
--- /dev/null
+++ b/components/TextInput/index.tsx
@@ -0,0 +1,2 @@
+export { default } from './TextInput';
+export * from './TextInput';
diff --git a/components/index.ts b/components/index.ts
new file mode 100644
index 0000000..ade4f28
--- /dev/null
+++ b/components/index.ts
@@ -0,0 +1,5 @@
+import Button from './Button'
+import Text from './Text'
+import TextInput from './TextInput'
+
+export { Button, Text, TextInput }
\ No newline at end of file
diff --git a/context/index.ts b/context/index.ts
new file mode 100644
index 0000000..f0e4d92
--- /dev/null
+++ b/context/index.ts
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+import { AtlasTheme } from "../types";
+import { ATLAS_LIGHT } from "../themes/AtlasLightTheme";
+
+export const ThemeContext = createContext<AtlasTheme>(ATLAS_LIGHT);
\ No newline at end of file
diff --git a/hooks/index.ts b/hooks/index.ts
new file mode 100644
index 0000000..e8e906d
--- /dev/null
+++ b/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useTheme'
+export * from './useThemedStyle'
\ No newline at end of file
diff --git a/hooks/useTheme.ts b/hooks/useTheme.ts
new file mode 100644
index 0000000..8a3e69f
--- /dev/null
+++ b/hooks/useTheme.ts
@@ -0,0 +1,7 @@
+
+import { useContext } from 'react';
+import { ThemeContext } from '../context';
+
+export const useTheme = () => useContext(ThemeContext)
+
+export default useTheme;
diff --git a/hooks/useThemedStyle.ts b/hooks/useThemedStyle.ts
new file mode 100644
index 0000000..247d19c
--- /dev/null
+++ b/hooks/useThemedStyle.ts
@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { useMemo } from 'react';
+
+import useTheme from '../hooks/useTheme';
+import { AtlasTheme } from '../types/theme';
+
+export declare type ThemedStyleCreator<T extends StyleSheet.NamedStyles<unknown>> = (theme: AtlasTheme) => T;
+
+export const useThemedStyle = <T extends StyleSheet.NamedStyles<unknown>>(creator: ThemedStyleCreator<T>) => {
+  const theme = useTheme();
+
+  const styles = useMemo(() => creator(theme), [theme, creator]);
+
+  return {
+    theme,
+    styles,
+  };
+};
diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..a60d998
--- /dev/null
+++ b/index.ts
@@ -0,0 +1,3 @@
+export * from './types/index'
+export * from './components'
+export * from './hooks/index'
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7913fa6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "atlasdesignsystem",
+  "version": "1.0.0",
+  "description": "A react native design system for the Atlas workout app",
+  "main": "index.ts",
+  "scripts": {
+    "test": "test"
+  },
+  "keywords": [
+    "react",
+    "native"
+  ],
+  "author": "Juan Castillo",
+  "license": "ISC"
+}
diff --git a/shared/styles/index.ts b/shared/styles/index.ts
new file mode 100644
index 0000000..7f06a03
--- /dev/null
+++ b/shared/styles/index.ts
@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+import { StyleSheet } from "react-native";
+import { useThemedStyle } from "../../hooks";
+
+export const MENU_ITEM_HEIGHT = 40;
+
+export const useMenuItemStyles = () =>
+    useThemedStyle(
+      useCallback(
+        theme =>
+          StyleSheet.create({
+            textInput: {
+              ...theme.typography.h3,
+            },
+            container: {
+              marginBottom: theme.size.baseSize * 3,
+            },
+            itemContainer: {
+              backgroundColor: theme.menuItemContainerBackground,
+              borderRadius: theme.borderRadius,
+              paddingHorizontal: theme.size.baseSize * 2,
+              minHeight: MENU_ITEM_HEIGHT,
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            },
+            itemLabel: {
+              color: theme.textPrimary,
+            },
+          }),
+        []
+      )
+    );
\ No newline at end of file
diff --git a/themes/AtlasLightTheme.ts b/themes/AtlasLightTheme.ts
new file mode 100644
index 0000000..9cd7b17
--- /dev/null
+++ b/themes/AtlasLightTheme.ts
@@ -0,0 +1,90 @@
+import { AtlasTheme, FontWeights, Typography } from '../../../libs/atlasDesignSystem';
+
+const fontFamily = 'Gilroy-Bold';
+const fontWeight: FontWeights = '700';
+
+const typography: Typography = {
+  h1xl: {
+    fontSize: 32,
+    lineHeight: 36,
+    fontFamily,
+    fontWeight: '900',
+  },
+  h1: {
+    fontSize: 24,
+    lineHeight: 28,
+    fontFamily,
+    fontWeight,
+  },
+  h2: {
+    fontSize: 20,
+    lineHeight: 24,
+    fontFamily,
+    fontWeight,
+  },
+  h3: {
+    fontSize: 17,
+    lineHeight: 22,
+    fontFamily,
+    fontWeight,
+  },
+  p1: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontFamily,
+    fontWeight,
+  },
+  p2: {
+    fontSize: 12,
+    lineHeight: 18,
+    fontFamily,
+    fontWeight: '200',
+  },
+  p3: {
+    fontSize: 10,
+    lineHeight: 16,
+    fontFamily,
+    fontWeight: '200',
+  },
+};
+
+export const ATLAS_LIGHT: AtlasTheme = {
+  size: {
+    baseSize: 5,
+  },
+  borderWidth: 2,
+  borderRadius: 10,
+  keyboardAppearance: 'light',
+  colors: {
+    primary: '#21b473',
+    primaryLowContrast: '#90d9b9',
+    secondaryPositive: '#02AD5D',
+    secondaryNegative: '#f55555',
+    secondaryWarning: '#FFC107',
+    foreground: '#2D2D2D',
+    foregroundHighContrast: '#0B0B0B',
+    foregroundLowContrast: '#8A8A8A',
+    foregroundPrimary: '#21b473',
+    foregroundNegative: '#f55555',
+    foregroundOnPrimary: '#fff',
+    border: '#898989',
+    borderSecondary: '#00000000',
+    backgroundPrimary: '#f1f1f1',
+    backgroundOnPrimary: '#e4e4e4',
+  },
+  typography,
+  isDarkTheme: false,
+  modalBackground: '#f6f6f6',
+  primary: '#21b473',
+  text: '#000000',
+  textPrimary: '#000',
+  textSecondary: '#fff',
+  menuItemContainerBackground: '#e4e4e4',
+  background: '#ffffff',
+  LIGHT_BAR_STYLE: 'light-content',
+  DARK_BAR_STYLE: 'dark-content',
+  card: 'rgb(255, 255, 255)',
+  chevronForward: '#afb0b3',
+  workoutStatisticsBarItemBackground: '#EDEDED',
+  placeholderTextColor: '#8A8A8A',
+};
diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..aa106e5
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1,2 @@
+export * from './typography'
+export * from './theme'
\ No newline at end of file
diff --git a/types/theme.ts b/types/theme.ts
new file mode 100644
index 0000000..131688a
--- /dev/null
+++ b/types/theme.ts
@@ -0,0 +1,45 @@
+import { StatusBarStyle, TextInputProps } from 'react-native';
+
+import { Typography } from './typography';
+
+export type AtlasTheme = {
+    size: {
+      baseSize: number;
+    };
+    borderRadius: number;
+    borderWidth: number;
+    keyboardAppearance: TextInputProps['keyboardAppearance'];
+    colors: {
+      primary: string; // The main color for the theme
+      primaryLowContrast: string; // A low contrast version of the primary color. Used for disabled buttons
+      secondaryPositive: string; // Color for positive actions
+      secondaryNegative: string; // Color for negative actions
+      secondaryWarning: string; // Color for conveying a warning
+      foreground: string;
+      foregroundHighContrast: string;
+      foregroundLowContrast: string;
+      foregroundPrimary: string; // Color for positiveContent that will sit on the backgroundPrimary color
+      foregroundNegative: string; // Color for negative content that will sit on the backgroundPrimary color
+      foregroundOnPrimary: string;
+      border: string; // Primary border color
+      borderSecondary: string; // Color of the border when element is inactive
+      backgroundPrimary: string; // The main background color
+      backgroundOnPrimary: string; // Background color for items that will be on top of the background
+    };
+    // Deprecated use backgroundPrimary
+    background: string;
+    primary: string;
+    text: string;
+    modalBackground: string;
+    textPrimary: string;
+    textSecondary: string;
+    menuItemContainerBackground: string; // Deprecated use backgroundOnPrimary
+    LIGHT_BAR_STYLE: string;
+    DARK_BAR_STYLE: StatusBarStyle;
+    isDarkTheme: boolean;
+    card: string;
+    chevronForward: string;
+    workoutStatisticsBarItemBackground: string;
+    placeholderTextColor: string;
+    typography: Typography;
+  };
\ No newline at end of file
diff --git a/types/typography.ts b/types/typography.ts
new file mode 100644
index 0000000..5bee0a1
--- /dev/null
+++ b/types/typography.ts
@@ -0,0 +1,14 @@
+export type TypographyVariants = 'h1xl' | 'h1' | 'h2' | 'h3' | 'p1' | 'p2' | 'p3';
+
+export type FontWeights = '200' | '300' | '400' | '500' | '700' | '800' | '900';
+
+export interface TypographyStyles {
+  fontSize: number;
+  lineHeight: number;
+  fontWeight: FontWeights;
+  fontFamily: string;
+}
+
+export type Typography = {
+  [variant in TypographyVariants]: TypographyStyles;
+};