@tactics/toddle-styleguide 0.1.3 → 0.1.4

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';
@@ -48,6 +46,11 @@ 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';
 
 const Stack = createNativeStackNavigator();
 
@@ -102,10 +105,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')}
@@ -141,6 +140,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         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 +171,23 @@ 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')}
+      />
     </ScrollView>
   );
 };
@@ -261,12 +281,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 +295,19 @@ 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.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -27,10 +27,19 @@ 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 { 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, FormAction, 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 };

package/index.tsx

@@ -4,6 +4,7 @@ import 'intl';
 import 'intl/locale-data/jsonp/en';
 
 import App from './App';
+
 registerRootComponent(App);
 
 // Exports of components
@@ -35,52 +36,70 @@ 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";
 
 // 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,
-  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,
-  DaySelect
+      Initials,
+      BubbleAlignment,
+      KeyBoardTypes,
+      Size,
+    Scale,
+    VisualState,
+      ThemeCtx,
+      Avatar,
+      Button,
+      CancelLink,
+      Check,
+      Checkbox,
+      ChildListItem,
+      ContactItem,
+      FilterTab,
+      FormAction,
+      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
 };

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.4",
   "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/avatar/avatar.component.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Size } from '../../../types/size.enum';
-import { Initials } from '../../../models/initials.model';
+import {ImageSourcePropType} from 'react-native';
+import {Size} from '../../../types/size.enum';
+import {Initials} from '../../../models/initials.model';
 declare type AvatarProps = {
-    source: ImageSourcePropType | Initials;
-    size: Size;
-    isBlocked?: boolean;
+  source: ImageSourcePropType | Initials;
+  size: Size;
+  isBlocked?: boolean;
 };
 declare const Avatar: React.FC<AvatarProps>;
-export { Avatar as Avatar };
+export {Avatar as Avatar};

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,7 @@
+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();
+  });
+});

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

@@ -1,8 +1,13 @@
 declare type ButtonProps = {
-    label: string;
-    icon?: any;
-    disabled?: boolean;
-    onPress?: () => void;
+  label: string;
+  icon?: any;
+  disabled?: boolean;
+  onPress?: () => void;
 };
-declare const Button: ({ label, icon, disabled, onPress }: ButtonProps) => JSX.Element;
-export { Button as Button };
+declare const Button: ({
+  label,
+  icon,
+  disabled,
+  onPress,
+}: ButtonProps) => JSX.Element;
+export {Button as Button};