@tactics/toddle-styleguide 0.0.1

package/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

package/.github/workflows/run-tests.yml

@@ -0,0 +1,16 @@
+name: Run Tests
+
+on: pull_request
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3.5.1
+      with:
+        node-version: 18
+        cache: 'yarn'
+    - run: yarn install
+    - run: yarn test

package/.prettierrc.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = {
+  bracketSpacing: false,
+  singleQuote: true,
+  bracketSameLine: false,
+  trailingComma: 'es5',
+  printWidth: 80,
+};

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/App.tsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import {ScrollView, Button as ReactBtn} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+// Components
+import {ThemeCtx} from './src/context/theme.context';
+
+import {StaffMemberTheme} from './src/theme/provider';
+import {LoadFonts} from './src/theme/font';
+
+import {AvatarPreview} from './src/components/atoms/avatar/avatar.preview';
+import {ButtonPreview} from './src/components/atoms/button/button.preview';
+import {PillPreview} from './src/components/atoms/pill/pill.preview';
+import {SnackbarPreview} from './src/components/atoms/snackbar/snackbar.preview';
+import {TextBubblePreview} from './src/components/atoms/text-bubble/text-bubble.preview';
+import {ImageBubblePreview} from './src/components/atoms/image-bubble/image-bubble.preview';
+import {TimeTrackerPreview} from './src/components/atoms/time-tracker/time-tracker.preview';
+import {CancelLinkPreview} from './src/components/atoms/cancel-link/cancel-link.preview';
+import {InfoPreview} from './src/components/atoms/info/info.preview';
+import {IconSolidPreview} from './src/icons/solid/solid.preview';
+import {IconOutlineWhitePreview} from './src/icons/outline/outline-white.preview';
+import {IconOutlineDefaultPreview} from './src/icons/outline/outline-default.preview';
+import {IconOutlineGreyPreview} from './src/icons/outline/outline-grey.preview';
+import {TagPreview} from './src/components/atoms/tag/tag.preview';
+import {PopoverHeadingPreview} from './src/components/atoms/popover-heading/popover-heading.preview';
+import {FilterTabPreview} from './src/components/atoms/filter-tab/filter-tab.preview';
+import {ContactItemPreview} from './src/components/atoms/contact-item/contact-item.preview';
+import {SelectListItemPreview} from './src/components/atoms/select-list-item/select-list-item-preview';
+import {CheckboxPreview} from './src/components/atoms/checkbox/checkbox.preview';
+import {CheckPreview} from './src/components/atoms/check-switch/check-switch.preview';
+import {WideButtonPreview} from './src/components/atoms/wide-button/wide-button.preview';
+import {PressableIconPreview} from './src/components/atoms/pressable-icon/pressable-icon.preview';
+import {FormActionPreview} from './src/components/atoms/form-actions/form-action.preview';
+import {QuickFilterPreview} from './src/components/atoms/quick-filter/quick-filter.prevriew';
+import {TextInputPreview} from './src/components/atoms/text-input/text-input.preview';
+import {ChildListItemPreview} from "./src/components/atoms/child-list-item/child-list-item.preview";
+
+const Stack = createNativeStackNavigator();
+
+const HomeScreen = ({navigation}: {navigation: any}) => {
+  return (
+    <ScrollView
+      style={{
+        flex: 1,
+      }}
+      contentContainerStyle={{
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    ><ReactBtn title="Avatar" onPress={() => navigation.push('avatar')} />
+      <ReactBtn title="Button" onPress={() => navigation.push('button')} />
+      <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
+      <ReactBtn title="Snackbar" onPress={() => navigation.push('snackbar')} />
+      <ReactBtn
+        title="textInputs"
+        onPress={() => navigation.push('textInputs')}
+      />
+      <ReactBtn
+        title="textBubble"
+        onPress={() => navigation.push('textBubble')}
+      />
+      <ReactBtn
+        title="ImageBubble"
+        onPress={() => navigation.push('image-bubble')}
+      />
+      <ReactBtn
+        title="Pressable Icon"
+        onPress={() => navigation.push('pressable-icon')}
+      />
+      <ReactBtn
+        title="Select-list-item"
+        onPress={() => navigation.push('select-list-item')}
+      />
+      <ReactBtn
+        title="Cancel link"
+        onPress={() => navigation.push('cancel-link')}
+      />
+      <ReactBtn
+        title="ContactItem"
+        onPress={() => navigation.push('contact-item')}
+      />
+      <ReactBtn
+        title="Check switch"
+        onPress={() => navigation.push('check-switch')}
+      />
+      <ReactBtn
+        title="Info component"
+        onPress={() => navigation.push('info')}
+      />
+      <ReactBtn
+          title="child-list-item"
+          onPress={() => navigation.push('childList')}
+      />
+      <ReactBtn
+        title="Wide Button"
+        onPress={() => navigation.push('wide-button')}
+      />
+      <ReactBtn
+        title="Icons Default"
+        onPress={() => navigation.push('icons default')}
+      />
+      <ReactBtn
+        title="Icons grey"
+        onPress={() => navigation.push('icons grey')}
+      />
+      <ReactBtn
+        title="Icons White"
+        onPress={() => navigation.push('icons white')}
+      />
+      <ReactBtn
+        title="Icons Solid"
+        onPress={() => navigation.push('icons solid')}
+      />
+      <ReactBtn title="Checkbox" onPress={() => navigation.push('checkbox')} />
+      <ReactBtn
+        title="TimeTracker"
+        onPress={() => navigation.push('time-tracker')}
+      />
+      <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
+      <ReactBtn
+        title="formAction"
+        onPress={() => navigation.push('form-action')}
+      />
+    <ReactBtn
+        title="quickFilter"
+        onPress={() => navigation.push('quick-filter')}
+      />
+    </ScrollView>
+  );
+};
+
+function App() {
+  const [fontsLoaded] = LoadFonts();
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  return (
+    <ThemeCtx.Provider value={StaffMemberTheme}>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="home">
+            {(props) => <HomeScreen {...props} />}
+          </Stack.Screen>
+          <Stack.Screen name="avatar">{() => <AvatarPreview />}</Stack.Screen>
+          <Stack.Screen name="button">{() => <ButtonPreview />}</Stack.Screen>
+          <Stack.Screen name="pill">{() => <PillPreview />}</Stack.Screen>
+          <Stack.Screen name="snackbar">
+            {() => <SnackbarPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="textInputs">
+            {() => <TextInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="textBubble">
+            {() => <TextBubblePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="image-bubble">
+            {() => <ImageBubblePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="pressable-icon">
+            {() => <PressableIconPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="cancel-link">
+            {() => <CancelLinkPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="contact-item">
+            {() => <ContactItemPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="wide-button">
+            {() => <WideButtonPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="info">{() => <InfoPreview />}</Stack.Screen>
+          <Stack.Screen name="check-switch">
+            {() => <CheckPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons default">
+            {() => <IconOutlineDefaultPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons grey">
+            {() => <IconOutlineGreyPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons white">
+            {() => <IconOutlineWhitePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons solid">
+            {() => <IconSolidPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="select-list-item">
+            {() => <SelectListItemPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="popover-heading">
+            {() => <PopoverHeadingPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="filter tab">
+            {() => <FilterTabPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="checkbox">
+            {() => <CheckboxPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="time-tracker">
+            {() => <TimeTrackerPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
+          <Stack.Screen name="form-action">
+            {() => <FormActionPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="quick-filter">
+            {() => <QuickFilterPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="childList">
+            {() => <ChildListItemPreview />}
+          </Stack.Screen>
+        </Stack.Navigator>
+      </NavigationContainer>
+    </ThemeCtx.Provider>
+  );
+}
+
+export default App;

package/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "Styleguide",
+    "slug": "Styleguide",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/jest.config.js

@@ -0,0 +1,22 @@
+module.exports = async () => {
+    return {
+        verbose: true,
+        extensionsToTreatAsEsm: ['.ts', '.tsx'],
+        preset: "jest-expo",
+        transformIgnorePatterns: [
+            "node_modules/(?!((jest-)?react-native" +
+            "|@react-native(-community)?)" +
+            "|expo(nent)?" +
+            "|@expo(nent)?/.*" +
+            "|@expo-google-fonts/.*" +
+            "|react-navigation" +
+            "|@react-navigation/.*" +
+            "|@unimodules/.*" +
+            "|unimodules" +
+            "|sentry-expo" +
+            "|native-base" +
+            "|react-native-svg" +
+            "|@tactics/kinderopvang-branding)"
+        ]
+    };
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@tactics/toddle-styleguide",
+  "version": "0.0.1",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "expo": "node_modules/.bin/expo",
+    "start": "node_modules/.bin/tsc && node_modules/.bin/expo start",
+    "android": "node_modules/.bin/tsc && node_modules/.bin/expo start --android",
+    "ios": "node_modules/.bin/tsc && node_modules/.bin/expo start --ios",
+    "web": "node_modules/.bin/tsc && node_modules/.bin/expo start --web",
+    "test": "node_modules/.bin/jest",
+    "format": "yarn prettier --write src/."
+  },
+  "dependencies": {
+    "@callstack/react-theme-provider": "^3.0.8",
+    "@expo/webpack-config": "^0.17.0",
+    "@react-navigation/bottom-tabs": "^6.4.0",
+    "@react-navigation/drawer": "^6.5.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.1",
+    "@react-navigation/stack": "^6.3.3",
+    "@tactics/kinderopvang-branding": "^1.0.1",
+    "expo": "~46.0.16",
+    "expo-font": "^10.2.1",
+    "expo-linear-gradient": "~11.4.0",
+    "expo-status-bar": "~1.4.0",
+    "formik": "^2.2.9",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
+    "react-native-svg": "12.3.0",
+    "react-native-web": "~0.18.7",
+    "react-test-renderer": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/jest": "^29.2.1",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@types/react-native": "^0.70.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "jest": "^29.2.2",
+    "jest-expo": "^46.0.1",
+    "prettier": "2.7.1",
+    "ts-jest": "^29.0.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.4"
+  }
+}

package/src/components/atoms/avatar/__snapshots__/avatar.test.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test avatar given the isBlocked is true, and provide image source is empty return a red colored avatar  1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "backgroundColor": "#647ACB",
+        "justifyContent": "center",
+        "overflow": "hidden",
+      },
+      {
+        "borderRadius": 20,
+        "height": 40,
+        "width": 40,
+      },
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#FFFFFF",
+          "textTransform": "uppercase",
+        },
+        {
+          "fontFamily": "SourceSansProBold",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        },
+        false,
+        false,
+      ]
+    }
+  >
+    JD
+  </Text>
+</View>
+`;
+
+exports[`test avatar renders correctly when provided image source is empty 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "backgroundColor": "#647ACB",
+        "justifyContent": "center",
+        "overflow": "hidden",
+      },
+      {
+        "borderRadius": 20,
+        "height": 40,
+        "width": 40,
+      },
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#FFFFFF",
+          "textTransform": "uppercase",
+        },
+        {
+          "fontFamily": "SourceSansProBold",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        },
+        false,
+        false,
+      ]
+    }
+  >
+    JD
+  </Text>
+</View>
+`;

package/src/components/atoms/avatar/avatar.component.tsx

@@ -0,0 +1,35 @@
+import React, {useContext} from 'react';
+import {Image, ImageSourcePropType, View, Text, ImageStyle} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './avatar.styles';
+import {Size} from '../../../types/size.enum';
+import {Initials} from '../../../models/initials.model';
+import {MainGradient} from '../../../gradients/main/main.gradient';
+
+type AvatarProps = {
+  source: ImageSourcePropType | Initials;
+  size: Size;
+  isBlocked?: boolean;
+};
+
+const Avatar: React.FC<AvatarProps> = ({source, size, isBlocked}) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context, size, isBlocked);
+
+  return (
+    <>
+      {source instanceof Initials ? (
+        <View style={styles.container}>
+          <Text style={styles.text}>{source.toString()}</Text>
+        </View>
+      ) : (
+        <View style={styles.container}>
+          <MainGradient />
+          <Image source={source} style={styles.image as ImageStyle} />
+        </View>
+      )}
+    </>
+  );
+};
+
+export {Avatar as Avatar};

package/src/components/atoms/avatar/avatar.preview.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const {Avatar} = require('./avatar.component');
+const {Size} = require('../../../types/size.enum');
+const {Initials} = require('../../../models/initials.model');
+const {View} = require('react-native');
+
+export const AvatarPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Avatar
+        size={Size.LARGE}
+        source={require('./../../../../assets/components/avatar/baby.png')}
+      />
+      <Avatar
+        size={Size.MEDIUM}
+        source={require('./../../../../assets/components/avatar/baby.png')}
+      />
+      <Avatar
+        size={Size.SMALL}
+        source={require('./../../../../assets/components/avatar/baby.png')}
+      />
+      <Avatar size={Size.LARGE} source={Initials.for('John', 'Doe')} />
+      <Avatar
+        size={Size.MEDIUM}
+        source={Initials.for('John', 'Doe')}
+        isBlocked={true}
+      />
+      <Avatar size={Size.SMALL} source={Initials.for('John', 'Doe')} />
+    </View>
+  );
+};

package/src/components/atoms/avatar/avatar.styles.js

@@ -0,0 +1,55 @@
+import {StyleSheet} from 'react-native';
+import {Size} from '../../../types/size.enum';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (Context, size, isBlocked) =>
+  StyleSheet.create({
+    container: [
+      {
+        overflow: 'hidden',
+        backgroundColor: isBlocked
+          ? Context.colors.ui.error.default
+          : Context.colors.main['5'],
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      size === Size.SMALL && {
+        width: 40,
+        height: 40,
+        borderRadius: 40 / 2,
+      },
+      size === Size.MEDIUM && {
+        width: 72,
+        height: 72,
+        borderRadius: 72 / 2,
+      },
+      size === Size.LARGE && {
+        width: 120,
+        height: 120,
+        borderRadius: 120 / 2,
+      },
+    ],
+    image: [
+      {
+        position: 'absolute',
+        width: '90%',
+        height: '90%',
+        borderRadius: 50,
+      },
+    ],
+    text: [
+      {
+        color: Context.colors.ui.white,
+        textTransform: 'uppercase',
+      },
+      size === Size.SMALL && {
+        ...Font.mediumBold,
+      },
+      size === Size.MEDIUM && {
+        ...Font.bigBold,
+      },
+      size === Size.LARGE && {
+        ...Font.hugeBold,
+      },
+    ],
+  });

package/src/components/atoms/avatar/avatar.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Avatar} from './avatar.component';
+import {Initials} from '../../../models/initials.model';
+import {Size} from '../../../types/size.enum';
+
+describe('test avatar', () => {
+  it('renders correctly when provided image source is empty', () => {
+    const tree = renderer
+      .create(<Avatar source={Initials.for('John', 'Doe')} size={Size.SMALL} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the isBlocked is true, and provide image source is empty return a red colored avatar ', () => {
+    const tree = renderer
+      .create(<Avatar source={Initials.for('John', 'Doe')} size={Size.SMALL} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});