@tactics/toddle-styleguide 0.1.3 → 0.1.5

package/App.tsx

@@ -9,10 +9,8 @@ import 'intl/locale-data/jsonp/en';
 
 // 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';
@@ -35,7 +33,7 @@ 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 {SplitContainerPreview} from './src/components/atoms/split-container/split-container.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';
@@ -48,6 +46,13 @@ import {DaySelectPreview} from './src/components/atoms/day-select/day-select.pre
 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';
+import {ContactRolePreview} from './src/components/atoms/contact-role/contact-role.preview';
+import {SearchPreview} from './src/components/atoms/search/search.preview';
+import {BlockedMessagePreview} from './src/components/atoms/blocked-message/blocked-message.preview';
+import {DepartmentLogoPreview} from './src/components/atoms/department_logo/department-logo.preview';
+import {CalendarSelectPreview} from './src/components/atoms/calendar-select/calendar-select.preview';
+import {FooterPreview} from './src/components/atoms/footer/footer.preview';
+import {DefaulSelectPreview} from './src/components/atoms/default-select/default-select.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -102,10 +107,6 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         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')}
@@ -133,14 +134,18 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
       />
       <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
       <ReactBtn
-        title="formAction"
-        onPress={() => navigation.push('form-action')}
+        title="split-container"
+        onPress={() => navigation.push('split-container')}
       />
       <ReactBtn
         title="Select Picker"
         onPress={() => navigation.push('select-picker')}
       />
       <ReactBtn title="Popover" onPress={() => navigation.push('popover')} />
+      <ReactBtn
+        title="Filter Tab"
+        onPress={() => navigation.push('filter tab')}
+      />
       <ReactBtn
         title="Child list item"
         onPress={() => navigation.push('child-list-item')}
@@ -168,6 +173,28 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="daySelect"
         onPress={() => navigation.push('day-select')}
       />
+      <ReactBtn title="search" onPress={() => navigation.push('search')} />
+      <ReactBtn
+        title="Blocked message"
+        onPress={() => navigation.push('blocked-message')}
+      />
+      <ReactBtn
+        title="departmentLogo"
+        onPress={() => navigation.push('departmentLogo')}
+      />
+      <ReactBtn
+        title="Contact role"
+        onPress={() => navigation.push('contact-role')}
+      />
+      <ReactBtn
+        title="calendarSelect"
+        onPress={() => navigation.push('calendar-select')}
+      />
+      <ReactBtn title="footer" onPress={() => navigation.push('footer')} />
+      <ReactBtn
+        title="Default select"
+        onPress={() => navigation.push('default-select')}
+      />
     </ScrollView>
   );
 };
@@ -243,8 +270,8 @@ function App() {
             {() => <TimeTrackerPreview />}
           </Stack.Screen>
           <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
-          <Stack.Screen name="form-action">
-            {() => <FormActionPreview />}
+          <Stack.Screen name="split-container">
+            {() => <SplitContainerPreview />}
           </Stack.Screen>
           <Stack.Screen name="select-picker">
             {() => <SelectPickerPreview />}
@@ -261,12 +288,12 @@ function App() {
           <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="filter-range">
+            {() => <FilterRangePreview />}
+          </Stack.Screen>
           <Stack.Screen name="day-select">
             {() => <DaySelectPreview />}
           </Stack.Screen>
@@ -275,6 +302,23 @@ function App() {
           </Stack.Screen>
           <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
           <Stack.Screen name="logo">{() => <LogoPreview />}</Stack.Screen>
+          <Stack.Screen name="contact-role">
+            {() => <ContactRolePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="search">{() => <SearchPreview />}</Stack.Screen>
+          <Stack.Screen name="blocked-message">
+            {() => <BlockedMessagePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="departmentLogo">
+            {() => <DepartmentLogoPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="calendar-select">
+            {() => <CalendarSelectPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="footer">{() => <FooterPreview />}</Stack.Screen>
+          <Stack.Screen name="default-select">
+            {() => <DefaulSelectPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -8,7 +8,7 @@ import { Checkbox } from './src/components/atoms/checkbox/checkbox.component';
 import { ChildListItem } from './src/components/atoms/child-list-item/child-list-item.component';
 import { ContactItem } from './src/components/atoms/contact-item/contact-item.component';
 import { FilterTab } from './src/components/atoms/filter-tab/filter-tab.component';
-import { FormAction } from './src/components/atoms/form-actions/form-action.component';
+import { SplitContainer } from './src/components/atoms/split-container/split-container.component';
 import { ImageBubble } from './src/components/atoms/image-bubble/image-bubble.component';
 import { Info } from './src/components/atoms/info/info.component';
 import { Pill } from './src/components/atoms/pill/pill.component';
@@ -27,10 +27,23 @@ import { Calendar } from './src/components/atoms/calendar/calendar.component';
 import { IncrementInput } from './src/components/atoms/increment-input/increment-input.component';
 import { Swipe } from './src/components/atoms/swipe/swipe.component';
 import { Logo } from './src/components/atoms/logo/logo.component';
-import { BubbleAlignment } from "./src/types/bubble-alignment.enum";
-import { KeyBoardTypes } from "./src/types/keyboard-types.enum";
-import { Size } from "./src/types/size.enum";
-import { VisualState } from "./src/types/visual-state.enum";
-import { Initials } from "./src/models/initials.model";
-import { ThemeCtx } from "./src/context/theme.context";
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, VisualState, ThemeCtx, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, FormAction, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, };
+import { DaySelect } from './src/components/atoms/day-select/day-select.component';
+import { Search } from './src/components/atoms/search/search.component';
+import { BlockedMessage } from './src/components/atoms/blocked-message/blocked-message.component';
+import { DepartmentLogo } from './src/components/atoms/department_logo/department-logo.component';
+import { ContactRole } from './src/components/atoms/contact-role/contact-role.component';
+import { Timeline } from './src/components/atoms/timeline/timeline.component';
+import { SelectPicker } from './src/components/atoms/select-picker/select-picker.component';
+import { CalendarSelect } from './src/components/atoms/calendar-select/calendar-select.component';
+import { DateInput } from './src/components/atoms/date-input/date-input.component';
+import { FilterRange } from './src/components/atoms/filter-range/filter-range.component';
+import { Footer } from './src/components/atoms/footer/footer.component';
+import { DefaultSelect } from './src/components/atoms/default-select/default-select.component';
+import { BubbleAlignment } from './src/types/bubble-alignment.enum';
+import { KeyBoardTypes } from './src/types/keyboard-types.enum';
+import { Size } from './src/types/size.enum';
+import { VisualState } from './src/types/visual-state.enum';
+import { Initials } from './src/models/initials.model';
+import { ThemeCtx } from './src/context/theme.context';
+import { Scale } from './src/theme/scale/index';
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, };

package/index.tsx

@@ -4,6 +4,7 @@ import 'intl';
 import 'intl/locale-data/jsonp/en';
 
 import App from './App';
+
 registerRootComponent(App);
 
 // Exports of components
@@ -15,7 +16,7 @@ import {Checkbox} from './src/components/atoms/checkbox/checkbox.component';
 import {ChildListItem} from './src/components/atoms/child-list-item/child-list-item.component';
 import {ContactItem} from './src/components/atoms/contact-item/contact-item.component';
 import {FilterTab} from './src/components/atoms/filter-tab/filter-tab.component';
-import {FormAction} from './src/components/atoms/form-actions/form-action.component';
+import {SplitContainer} from './src/components/atoms/split-container/split-container.component';
 import {ImageBubble} from './src/components/atoms/image-bubble/image-bubble.component';
 import {Info} from './src/components/atoms/info/info.component';
 import {Pill} from './src/components/atoms/pill/pill.component';
@@ -35,24 +36,39 @@ import {IncrementInput} from './src/components/atoms/increment-input/increment-i
 import {Swipe} from './src/components/atoms/swipe/swipe.component';
 import {Logo} from './src/components/atoms/logo/logo.component';
 import {DaySelect} from './src/components/atoms/day-select/day-select.component';
+import {Search} from './src/components/atoms/search/search.component';
+import {BlockedMessage} from './src/components/atoms/blocked-message/blocked-message.component';
+import {DepartmentLogo} from './src/components/atoms/department_logo/department-logo.component';
+import {ContactRole} from './src/components/atoms/contact-role/contact-role.component';
+import {Timeline} from './src/components/atoms/timeline/timeline.component';
+import {SelectPicker} from './src/components/atoms/select-picker/select-picker.component';
+import {CalendarSelect} from './src/components/atoms/calendar-select/calendar-select.component';
+import {DateInput} from './src/components/atoms/date-input/date-input.component';
+import {FilterRange} from './src/components/atoms/filter-range/filter-range.component';
+import {Footer} from './src/components/atoms/footer/footer.component';
+import {DefaultSelect} from './src/components/atoms/default-select/default-select.component';
 
 // Exports of enums
-import {BubbleAlignment} from "./src/types/bubble-alignment.enum";
-import {KeyBoardTypes} from "./src/types/keyboard-types.enum";
-import {Size} from "./src/types/size.enum";
-import {VisualState} from "./src/types/visual-state.enum";
+import {BubbleAlignment} from './src/types/bubble-alignment.enum';
+import {KeyBoardTypes} from './src/types/keyboard-types.enum';
+import {Size} from './src/types/size.enum';
+import {VisualState} from './src/types/visual-state.enum';
 
 // Exports of models
-import {Initials} from "./src/models/initials.model";
+import {Initials} from './src/models/initials.model';
 
 // Exports of context
-import {ThemeCtx} from "./src/context/theme.context";
+import {ThemeCtx} from './src/context/theme.context';
+
+//Export of Theme
+import {Scale} from './src/theme/scale/index';
 
 export {
   Initials,
   BubbleAlignment,
   KeyBoardTypes,
   Size,
+  Scale,
   VisualState,
   ThemeCtx,
   Avatar,
@@ -63,13 +79,14 @@ export {
   ChildListItem,
   ContactItem,
   FilterTab,
-  FormAction,
+  SplitContainer,
   ImageBubble,
   Info,
   Pill,
   Popover,
   PressableIcon,
   QuickFilter,
+  Search,
   SelectListItem,
   Snackbar,
   Tag,
@@ -82,5 +99,15 @@ export {
   IncrementInput,
   Swipe,
   Logo,
-  DaySelect
+  DaySelect,
+  BlockedMessage,
+  DepartmentLogo,
+  ContactRole,
+  Timeline,
+  SelectPicker,
+  CalendarSelect,
+  DateInput,
+  FilterRange,
+  Footer,
+  DefaultSelect,
 };

package/jest.config.js

@@ -1,3 +1,5 @@
+process.env.TZ = 'UTC';
+
 module.exports = async () => {
   return {
     verbose: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -16,7 +16,6 @@
     "npm": "please-use-yarn",
     "yarn": "3.3.1"
   },
-  "private": false,
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
@@ -37,11 +36,12 @@
     "expo-status-bar": "~1.4.0",
     "intl": "^1.2.5",
     "jsc-android": "^250230.2.1",
-    "luxon": "^3.1.1",
+    "luxon": "^3.2.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.6",
-    "react-native-calendars": "^1.1292.0",
+    "react-native-calendar-strip": "^2.2.6",
+    "react-native-calendars": "^1.1293.0",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-picker-select": "^8.0.4",
     "react-native-safe-area-context": "4.3.1",

package/src/components/atoms/blocked-message/__snapshots__/blocked-message.test.js.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blocked message visual test renders a cancel link with label "cancel" that is pressable 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#FBD9D9",
+      "borderRadius": 8,
+      "display": "flex",
+      "flexDirection": "row",
+      "paddingBottom": 24,
+      "paddingLeft": 24,
+      "paddingRight": 24,
+      "paddingTop": 24,
+    }
+  }
+>
+  <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={26}
+    width="28"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M13 9V13.5M13 18H13.0108M22.75 13.5C22.75 19.0919 18.3848 23.625 13 23.625C7.61522 23.625 3.25 19.0919 3.25 13.5C3.25 7.90812 7.61522 3.375 13 3.375C18.3848 3.375 22.75 7.90812 22.75 13.5Z"
+        propList={
+          [
+            "stroke",
+            "strokeWidth",
+            "strokeLinecap",
+            "strokeLinejoin",
+          ]
+        }
+        stroke={4291976798}
+        strokeLinecap={1}
+        strokeLinejoin={1}
+        strokeWidth="2"
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+  <Text
+    style={
+      {
+        "color": "#D25E5E",
+        "flex": 1,
+        "fontFamily": "Montserrat",
+        "fontSize": 14,
+        "lineHeight": 22.4,
+        "marginLeft": 16,
+        "textAlign": "center",
+      }
+    }
+  >
+    You shall not pass!!!!
+  </Text>
+</View>
+`;

package/src/components/atoms/blocked-message/blocked-message.component.d.ts

@@ -0,0 +1,5 @@
+declare type BlockedMessageProps = {
+    message: string;
+};
+export declare const BlockedMessage: ({ message }: BlockedMessageProps) => JSX.Element;
+export {};

package/src/components/atoms/blocked-message/blocked-message.component.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {Text, View} from 'react-native';
+import {Icon} from '../../../icons/index';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './blocked-message.styles';
+
+type BlockedMessageProps = {
+  message: string;
+};
+
+export const BlockedMessage = ({message}: BlockedMessageProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <Icon.Outline.ExclamationCircle color={context.colors.ui.error.dark} />
+      <Text style={styles.message}>{message}</Text>
+    </View>
+  );
+};

package/src/components/atoms/blocked-message/blocked-message.preview.d.ts

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

package/src/components/atoms/blocked-message/blocked-message.preview.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {BlockedMessage} from './blocked-message.component';
+const {View} = require('react-native');
+
+export const BlockedMessagePreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View style={{width: '90%'}}>
+        <BlockedMessage
+          message={
+            'Ex-partner, wegens echtscheiding geen contact meer toegestaan!'
+          }
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/blocked-message/blocked-message.styles.d.ts

@@ -0,0 +1,22 @@
+export function Stylesheet(context: any): {
+  container: {
+    display: 'flex';
+    flexDirection: 'row';
+    alignItems: 'center';
+    backgroundColor: any;
+    borderRadius: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+  };
+  message: {
+    textAlign: 'center';
+    color: any;
+    marginLeft: number;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    flex: number;
+  };
+};

package/src/components/atoms/blocked-message/blocked-message.styles.js

@@ -0,0 +1,25 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: context.colors.ui.error.xlight,
+      borderRadius: Scale.xs,
+      paddingLeft: Scale.l,
+      paddingTop: Scale.l,
+      paddingRight: Scale.l,
+      paddingBottom: Scale.l,
+    },
+    message: {
+      flex: 1,
+      ...Font.regular,
+      textAlign: 'center',
+      color: context.colors.ui.error.dark,
+      marginLeft: Scale.m,
+    },
+  });

package/src/components/atoms/blocked-message/blocked-message.test.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import render from 'react-test-renderer';
+import {BlockedMessage} from './blocked-message.component';
+
+describe('Blocked message visual test', () => {
+  it('renders a cancel link with label "cancel" that is pressable', function () {
+    const tree = render
+      .create(<BlockedMessage message={'You shall not pass!!!!'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});