Fix exports

README.md

@@ -15,13 +15,13 @@ Things to think about
 - deployment
 - other developer nice to haves
 
-## Device Support
-_coming soon_
+## Device support
 
-### List of devices
-_coming soon_
+- IOS (versions _coming soon_ and above)
+- Android (versions _coming soon_ and above)
+- mobile-web and desktop _coming soon_
 
-### Mobile/Web mobile Viewport sizes
+### Mobile/web mobile viewport sizes
 
 - Designed for mobile displays from 320×568 through 430×1004
 - Primary test devices
@@ -46,17 +46,88 @@ _coming soon_
     - iPhone 15 Pro Max
     - 430 x 932
 
-### Tablet Viewport sizes
+### Tablet viewport sizes
+
 _coming soon_
 
-### Desktop Viewport sizes
+### Desktop viewport sizes
+
 _coming soon_
 
 ## Themes
+
 _coming soon_
 
 ## Installation
-_coming soon_
+
+### How this app was setup
+
+1. Create a new NX app with expo
+
+   ```bash
+   npx create-nx-workspace@latest --preset=expo --appName=rufferal
+
+   ✔ Where would you like to create your workspace? · rufferal-frontend
+   ✔ Test runner to use for end to end (E2E) tests · cypress
+   ✔ Which CI provider would you like to use? · github
+   ```
+
+2. Create libraries
+
+   ```bash
+   # UI LIBRARY
+   npx nx generate @nx/expo:lib ui
+     # I added my personal UI setup that follows "Atomic Design" methodologies
+
+   # ASSETS
+   npx nx generate @nx/expo:lib assets
+
+   # STORE (currently MobX)
+   npx nx generate @nx/expo:lib store
+
+   # UTILS
+   npx nx generate @nx/expo:lib utils
+
+   # STYLES CONFIGURATION (currently Tailwind)
+   npx nx generate @nx/expo:lib tailwind
+     # Chose to use explicit naming instead of generic naming because most of the work in this library will be unique to Tailwind configuration
+     # For custom tailwind configurations and branding/theme alignment
+   ```
+
+3. Name libraries accordingly
+
+   In `tsconfig.base.json`:
+
+   ```json
+   {
+     ...
+     "paths": {
+         "@rufferal/assets/*": ["assets/*"],
+         "@rufferal/store": ["store/src/index.ts"],
+         "@rufferal/tailwind": ["tailwind/src/index.ts"],
+         "@rufferal/ui": ["ui/src/index.ts"],
+         "@rufferal/utils": ["utils/src/index.ts"]
+       }
+   }
+   ```
+
+4. Generate components
+
+```bash
+nx g @nx/expo:component bottomsheet --directory ui/src/components/atoms/bottomsheet --nameAndDirectoryFormat=as-provided --export=false
+
+# Updates
+#   - Convert component to arrow component without a default export
+#   - Export component from directory
+#   - 
+#   - 
+```
+
+Personally, I ended up not using the component generator as it currently is
+
+- I would like to setup a component generator that applies my system/library expectations
+  - Creates functional (arrow) components instead of default exported normal function componets
+  - exports to local component folder (if in atoms, export is in ./atoms/index.ts, etc)
 
 ## (PROTOTYPE) Themes
 

ui/src/components/atoms/button/button.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   View,
 } from 'react-native';
-import { ButtonType, FieldSize, FieldState } from '../types/field-types';
+import { ButtonType, FieldSize, FieldState } from '..';
 
 interface Props extends PressableProps {
   loading?: boolean;

ui/src/components/atoms/field-input-area/field-input-area.tsx

@@ -6,7 +6,7 @@ import {
 } from '@rufferal/utils';
 import { Image } from 'expo-image';
 import { Platform, TextInput, TextInputProps, View } from 'react-native';
-import { FieldSize, FieldState } from '../types/field-types';
+import { FieldSize, FieldState } from '..';
 
 export interface FieldInputAreaProps extends Omit<TextInputProps, 'onChange'> {
   onSubmit?: () => void;

ui/src/components/atoms/field-input/field-input.tsx

@@ -6,7 +6,7 @@ import {
 } from '@rufferal/utils';
 import { Image } from 'expo-image';
 import { Platform, TextInput, TextInputProps, View } from 'react-native';
-import { FieldSize, FieldState } from '../types/field-types';
+import { FieldSize, FieldState } from '..';
 
 export interface FieldInputProps extends TextInputProps {
   onSubmit?: () => void;

ui/src/components/atoms/field-select/field-select.tsx

@@ -10,8 +10,8 @@ import { Image } from 'expo-image';
 import { useState } from 'react';
 import { Platform, Text, View } from 'react-native';
 import { Dropdown } from 'react-native-element-dropdown';
-import { OtherOption } from '../../molecules/select/select';
-import { FieldOption, FieldSize, FieldState } from '../types/field-types';
+import { OtherOption } from '../../molecules';
+import { FieldOption, FieldSize, FieldState } from '../';
 
 export interface FieldSelectProps<Option> {
   data: Option[];

ui/src/components/index.ts

@@ -2,7 +2,7 @@
 export * from './atoms';
 
 // Molecules are the building blocks that start to define functionality
-// export * from './molecules';
+export * from './molecules';
 
 // Organisms define the structure and layout of a page
 export * from './organisms';

ui/src/components/molecules/index.ts

@@ -10,8 +10,10 @@
  *
  */
 
-export { Input } from './input/input';
+export type { OtherOption } from './select/select';
+
 export { InputArea } from './input-area/input-area';
+export { Input } from './input/input';
 export { Photo } from './photo/photo';
 export { RadioGroup } from './radio-group/radio-group';
 export { Select } from './select/select';

ui/src/components/pages/pets/create/cats/cat-personality/cat-personality.tsx

@@ -17,7 +17,7 @@ import {
   Tag,
   Toggle,
 } from '../../../../../atoms';
-import { ScrollFeatureTemplate } from '../../../../../templates/scroll-feature-template/scroll-feature-template';
+import { ScrollFeatureTemplate } from '../../../../../templates';
 
 /* eslint-disable-next-line */
 export interface CatPersonalityProps extends PageNavigationProps {}

ui/src/components/pages/pets/create/dogs/dog-personality/dog-personality.tsx

@@ -17,7 +17,7 @@ import {
   Tag,
   Toggle,
 } from '../../../../../atoms';
-import { ScrollFeatureTemplate } from '../../../../../templates/scroll-feature-template/scroll-feature-template';
+import { ScrollFeatureTemplate } from '../../../../../templates';
 
 /* eslint-disable-next-line */
 export interface DogPersonalityProps extends PageNavigationProps {}

ui/src/components/pages/pets/create/pet-careplan-options.tsx

@@ -1,6 +1,6 @@
 import { ruffwind } from '@rufferal/tailwind';
 import { Text } from 'react-native';
-import { OtherOption } from '../../../molecules/select/select';
+import { OtherOption } from '../../../molecules';
 
 /****************** SHARED ******************/
 export const OTHER_OPTION: OtherOption = {

ui/src/components/pages/pets/manage-pets/manage-pets.tsx

@@ -17,7 +17,7 @@ import {
   VerticalDivider,
 } from '../../../atoms';
 import { FeatureTemplate } from '../../../templates';
-import { PageNavigationProps } from '../../types/page-props';
+import { PageNavigationProps } from '../..';
 
 // interface ManagePetsProps extends PageNavigationProps {}
 

ui/src/components/pages/profiles/create/pet-splash/pet-splash.tsx

@@ -5,7 +5,7 @@ import { ruffwind } from '@rufferal/tailwind';
 import { verticalScale, verticalScaleTW } from '@rufferal/utils';
 import { Bottomsheet, Button, H2 } from '../../../../atoms';
 import { SplashTemplate } from '../../../../templates';
-import { PageNavigationProps } from '../../../types/page-props';
+import { PageNavigationProps } from '../../..';
 
 // interface PetSplashProps extends PageNavigationProps {}