@tactics/toddle-styleguide 0.0.7 → 0.1.0

package/App.d.ts

@@ -1,2 +1,4 @@
+import 'intl';
+import 'intl/locale-data/jsonp/en';
 declare function App(): JSX.Element;
 export default App;

package/App.tsx

@@ -3,6 +3,10 @@ import {Button as ReactBtn, ScrollView} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
+// To make luxon work for Android
+import 'intl';
+import 'intl/locale-data/jsonp/en';
+
 // Components
 import {ThemeCtx} from './src/context/theme.context';
 
@@ -23,6 +27,7 @@ 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 {PopoverPreview} from './src/components/atoms/popover/popover.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';
@@ -33,9 +38,13 @@ import {PressableIconPreview} from './src/components/atoms/pressable-icon/pressa
 import {FormActionPreview} from './src/components/atoms/form-actions/form-action.preview';
 import {CalendarPreview} from './src/components/atoms/calendar/calendar.preview';
 import {QuickFilterPreview} from './src/components/atoms/quick-filter/quick-filter.prevriew';
+import {DateInputPreview} from './src/components/atoms/date-input/date-input.preview';
 import {TextInputPreview} from './src/components/atoms/text-input/text-input.preview';
 import {ChildListItemPreview} from './src/components/atoms/child-list-item/child-list-item.preview';
 import {TimeLinePreview} from './src/components/atoms/timeline/timeline.preview';
+import {SelectPickerPreview} from './src/components/atoms/select-picker/select-picker.preview';
+import {FilterRangePreview} from './src/components/atoms/filter-range/filter-range.preview';
+import {DaySelectPreview} from './src/components/atoms/day-select/day-select.preview';
 import {IncrementInputPreview} from './src/components/atoms/increment-input/increment-input.preview';
 import {SwipePreview} from './src/components/atoms/swipe/swipe.preview';
 import {LogoPreview} from './src/components/atoms/logo/logo.preview';
@@ -127,6 +136,19 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="formAction"
         onPress={() => navigation.push('form-action')}
       />
+      <ReactBtn
+        title="Select Picker"
+        onPress={() => navigation.push('select-picker')}
+      />
+      <ReactBtn title="Popover" onPress={() => navigation.push('popover')} />
+      <ReactBtn
+        title="Child list item"
+        onPress={() => navigation.push('child-list-item')}
+      />
+      <ReactBtn
+        title="Filter range"
+        onPress={() => navigation.push('filter-range')}
+      />
       <ReactBtn title="Calendar" onPress={() => navigation.push('calendar')} />
       <ReactBtn
         title="quickFilter"
@@ -138,6 +160,14 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
       />
       <ReactBtn title="swiper" onPress={() => navigation.push('swiper')} />
       <ReactBtn title="logo" onPress={() => navigation.push('logo')} />
+      <ReactBtn
+        title="Date input"
+        onPress={() => navigation.push('date-input')}
+      />
+      <ReactBtn
+        title="daySelect"
+        onPress={() => navigation.push('day-select')}
+      />
     </ScrollView>
   );
 };
@@ -202,6 +232,7 @@ function App() {
           <Stack.Screen name="select-list-item">
             {() => <SelectListItemPreview />}
           </Stack.Screen>
+          <Stack.Screen name="popover">{() => <PopoverPreview />}</Stack.Screen>
           <Stack.Screen name="filter tab">
             {() => <FilterTabPreview />}
           </Stack.Screen>
@@ -215,18 +246,30 @@ function App() {
           <Stack.Screen name="form-action">
             {() => <FormActionPreview />}
           </Stack.Screen>
+          <Stack.Screen name="select-picker">
+            {() => <SelectPickerPreview />}
+          </Stack.Screen>
           <Stack.Screen name="calendar">
             {() => <CalendarPreview />}
           </Stack.Screen>
           <Stack.Screen name="quick-filter">
             {() => <QuickFilterPreview />}
           </Stack.Screen>
-          <Stack.Screen name="childList">
+          <Stack.Screen name="date-input">
+            {() => <DateInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="child-list-item">
             {() => <ChildListItemPreview />}
           </Stack.Screen>
+          <Stack.Screen name="filter-range">
+            {() => <FilterRangePreview />}
+          </Stack.Screen>
           <Stack.Screen name="timeline">
             {() => <TimeLinePreview />}
           </Stack.Screen>
+          <Stack.Screen name="day-select">
+            {() => <DaySelectPreview />}
+          </Stack.Screen>
           <Stack.Screen name="increment-input">
             {() => <IncrementInputPreview />}
           </Stack.Screen>

package/babel.config.js

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

package/index.d.ts

@@ -1,3 +1,5 @@
+import 'intl';
+import 'intl/locale-data/jsonp/en';
 import { Avatar } from './src/components/atoms/avatar/avatar.component';
 import { Button } from './src/components/atoms/button/button.component';
 import { CancelLink } from './src/components/atoms/cancel-link/cancel-link.component';

package/index.tsx

@@ -1,5 +1,7 @@
 // Needed to run Expo
 import registerRootComponent from 'expo/build/launch/registerRootComponent';
+import 'intl';
+import 'intl/locale-data/jsonp/en';
 
 import App from './App';
 registerRootComponent(App);

package/jest.config.js

@@ -1,22 +1,23 @@
 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)"
-        ]
-    };
-};
+  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' +
+        '|@miblanchard/react-native-slider' +
+        '|react-native-svg' +
+        '|@tactics/kinderopvang-branding)',
+    ],
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -18,25 +18,34 @@
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
     "@expo/webpack-config": "^0.17.0",
+    "@miblanchard/react-native-slider": "^2.1.0",
+    "@react-native-picker/picker": "2.4.2",
     "@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.3",
+    "@types/luxon": "^3.1.0",
     "@types/xdate": "^0.8.32",
     "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",
+    "intl": "^1.2.5",
+    "jsc-android": "^250230.2.1",
+    "luxon": "^3.1.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.6",
     "react-native-calendars": "^1.1292.0",
+    "react-native-gesture-handler": "^2.8.0",
+    "react-native-picker-select": "^8.0.4",
     "react-native-safe-area-context": "4.3.1",
     "react-native-screens": "~3.15.0",
     "react-native-svg": "12.3.0",
+    "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.18.7",
     "react-test-renderer": "^18.2.0"
@@ -45,6 +54,7 @@
     "@babel/core": "^7.12.9",
     "@babel/preset-typescript": "^7.18.6",
     "@types/jest": "^29.2.1",
+    "@types/luxon": "^3.1.0",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",

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

@@ -716,7 +716,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 2 December 2022 selected You have no entries for this day "
+            accessibilityLabel=" Vrijdag 2 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -736,8 +736,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "backgroundColor": "#7B93DB",
-                "borderRadius": 21,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -757,9 +755,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#FFFFFF",
-                  },
                 ]
               }
             >
@@ -2131,7 +2126,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 22 December 2022 "
+            accessibilityLabel=" Donderdag 22 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2151,10 +2146,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2174,9 +2165,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2424,7 +2412,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 26 December 2022 "
+            accessibilityLabel="today Maandag 26 December 2022 selected You have no entries for this day "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2444,6 +2432,8 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "backgroundColor": "#7B93DB",
+                "borderRadius": 21,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2463,6 +2453,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#FFFFFF",
+                  },
                 ]
               }
             >
@@ -3622,7 +3615,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 2 December 2022 selected You have no entries for this day "
+            accessibilityLabel=" Vrijdag 2 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -3642,8 +3635,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "backgroundColor": "#7B93DB",
-                "borderRadius": 21,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -3663,9 +3654,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#FFFFFF",
-                  },
                 ]
               }
             >
@@ -5037,7 +5025,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 22 December 2022 "
+            accessibilityLabel=" Donderdag 22 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -5057,10 +5045,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5080,9 +5064,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -5330,7 +5311,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 26 December 2022 "
+            accessibilityLabel="today Maandag 26 December 2022 selected You have no entries for this day "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -5350,6 +5331,8 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "backgroundColor": "#7B93DB",
+                "borderRadius": 21,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5369,6 +5352,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#FFFFFF",
+                  },
                 ]
               }
             >

package/src/components/atoms/calendar/calendar.component.d.ts

@@ -1,6 +1,7 @@
+import { DateTime } from 'luxon';
 declare type CalendarProps = {
-    onDayPress: (day: string) => void;
-    selected: string;
+    onDayPress: (day: DateTime) => void;
+    selected: DateTime;
     minDate?: string;
     maxDate?: string;
 };

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

@@ -3,6 +3,11 @@ import {Calendar as RNCalendar, LocaleConfig} from 'react-native-calendars/src';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './calendar.styles';
 import {Icon} from '../../../icons';
+import {DateTime} from 'luxon';
+import {
+  dateTimeToStringHandler,
+  stringToDateTimeHandler,
+} from '../../../util/date';
 
 LocaleConfig.locales['nl'] = {
   monthNames: [
@@ -48,8 +53,8 @@ LocaleConfig.locales['nl'] = {
 LocaleConfig.defaultLocale = 'nl';
 
 type CalendarProps = {
-  onDayPress: (day: string) => void;
-  selected: string;
+  onDayPress: (day: DateTime) => void;
+  selected: DateTime;
   minDate?: string;
   maxDate?: string;
 };
@@ -62,14 +67,17 @@ export const Calendar = ({
 }: CalendarProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
-  const initDate = new Date().toISOString().slice(0, 10);
+  const initDate = DateTime.now().toISO().slice(0, 10);
+
+  const today = dateTimeToStringHandler(selected);
+
   const marked = useMemo(
     () => ({
-      [selected]: {
+      [today]: {
         selected: true,
       },
     }),
-    [selected]
+    [today]
   );
 
   return (
@@ -79,7 +87,7 @@ export const Calendar = ({
       minDate={minDate}
       maxDate={maxDate}
       onDayPress={(day) => {
-        onDayPress(day.dateString);
+        onDayPress(stringToDateTimeHandler(day.dateString));
       }}
       markedDates={marked}
       theme={styles.custom}

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

@@ -1,21 +1,20 @@
 import React from 'react';
 import {Calendar} from './calendar.component';
 import {useWindowDimensions} from 'react-native';
+import {DateTime} from 'luxon';
 const {View} = require('react-native');
 
 export const CalendarPreview = ({}: {}) => {
   const full = useWindowDimensions();
   const width = full.width;
 
-  const [selectedDay, setSelectedDay] = React.useState(
-    new Date().toISOString().slice(0, 10)
-  );
+  const [selectedDay, setSelectedDay] = React.useState(DateTime.now());
+
+  console.log(selectedDay);
 
   const calendarStartDate = '2022-09-01';
   const calendarEndDate = '2023-07-31';
 
-  console.log(selectedDay);
-
   return (
     <View
       style={{

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import render from 'react-test-renderer';
 import {Calendar} from './calendar.component';
+import {DateTime} from 'luxon';
 
 describe('Test for the calendar component', () => {
   it('renders a calendar where you can select a day', function () {
     const tree = render
       .create(
         <Calendar
-          selected={'2022-12-02'}
+          selected={new DateTime('2022-12-02')}
           onDayPress={() => console.log('pressed day')}
         />
       )
@@ -18,7 +19,7 @@ describe('Test for the calendar component', () => {
     const tree = render
       .create(
         <Calendar
-          selected={'2022-12-02'}
+          selected={new DateTime('2022-12-02')}
           onDayPress={() => console.log('pressed day')}
           minDate={'2022-01-01'}
           maxDate={'2022-12-31'}

package/src/components/atoms/date-input/__snapshots__/date-input.test.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test date input component renders a date input component 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 44,
+      "justifyContent": "space-between",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#9AA5B1",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "lineHeight": 22.4,
+      }
+    }
+  >
+    2022-12-26
+  </Text>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="28"
+    bbWidth="28"
+    fill="none"
+    focusable={false}
+    height="28"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": 28,
+          "width": 28,
+        },
+      ]
+    }
+    vbHeight={27}
+    vbWidth={27}
+    width="28"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M9.16667 7.875V3.375M17.8333 7.875V3.375M8.08333 12.375H18.9167M5.91667 23.625H21.0833C22.28 23.625 23.25 22.6176 23.25 21.375V7.875C23.25 6.63236 22.28 5.625 21.0833 5.625H5.91667C4.72005 5.625 3.75 6.63236 3.75 7.875V21.375C3.75 22.6176 4.72005 23.625 5.91667 23.625Z"
+        propList={
+          [
+            "stroke",
+            "strokeWidth",
+            "strokeLinecap",
+            "strokeLinejoin",
+          ]
+        }
+        stroke={4280232243}
+        strokeLinecap={1}
+        strokeLinejoin={1}
+        strokeWidth="2"
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;

package/src/components/atoms/date-input/date-input.component.d.ts

@@ -0,0 +1,7 @@
+import { DateTime } from 'luxon';
+declare type DateInputProps = {
+    onPress: () => void;
+    value: DateTime;
+};
+export declare const DateInput: ({ onPress, value }: DateInputProps) => JSX.Element;
+export {};

package/src/components/atoms/date-input/date-input.component.tsx

@@ -0,0 +1,24 @@
+import React, {useContext, useState} from 'react';
+import {Pressable, Text, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './date-input.styles';
+import {Icon} from '../../../icons';
+import {DateTime} from 'luxon';
+import {dateTimeToStringHandler} from '../../../util/date';
+
+type DateInputProps = {
+  onPress: () => void;
+  value: DateTime;
+};
+
+export const DateInput = ({onPress, value}: DateInputProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <Pressable onPress={onPress} style={styles.dateInputContainer}>
+      <Text style={styles.text}>{dateTimeToStringHandler(value)}</Text>
+      <Icon.Outline.Calendar color={context.colors.ui.black} />
+    </Pressable>
+  );
+};

package/src/components/atoms/date-input/date-input.preview.d.ts

@@ -0,0 +1 @@
+export declare const DateInputPreview: ({}: {}) => JSX.Element;