@tactics/toddle-styleguide 2.0.3 → 3.0.0

package/App.tsx

@@ -42,7 +42,6 @@ import {ChildListItemPreview} from './src/components/organisms/child-list-item/c
 import {TimeLinePreview} from './src/components/molecules/timeline/timeline.preview';
 import {SelectPickerPreview} from './src/components/molecules/select-picker/select-picker.preview';
 import {FilterRangePreview} from './src/components/molecules/filter-range/filter-range.preview';
-import {DaySelectPreview} from './src/components/organisms/day-select/day-select.preview';
 import {IncrementInputPreview} from './src/components/atoms/increment-input/increment-input.preview';
 import {SwipePreview} from './src/components/molecules/swipe/swipe.preview';
 import {LogoPreview} from './src/components/atoms/logo/logo.preview';
@@ -68,9 +67,7 @@ import {ToddleDateTimePreview} from './src/utilities/toddle-datetime/toddle-date
 import {BackgroundGradientPreview} from './src/components/atoms/background-gradient/background-gradient.preview';
 import {PersonInfoCardPreview} from './src/components/organisms/person-info-card/person-info-card.preview';
 import {TimePickerPreview} from './src/components/molecules/time-picker/time-picker.preview';
-import {PopOverActionPreview} from './src/components/templates/popover-action/popover-action.preview';
 import {QuickMessagePreview} from './src/components/atoms/quick-message/quick-message.preview';
-import {TabViewPreview} from './src/components/organisms/tab-view/tab-view.preview';
 import {LinePreview} from './src/components/atoms/line/line.preview';
 import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
 import { ContextLabelPreview } from './src/components/molecules/context-label/context-label.preview';
@@ -384,9 +381,6 @@ function App() {
           <Stack.Screen name="date-input">
             {() => <DateInputPreview />}
           </Stack.Screen>
-          <Stack.Screen name="day-select">
-            {() => <DaySelectPreview />}
-          </Stack.Screen>
           <Stack.Screen name="default-select">
             {() => <DefaultSelectPreview />}
           </Stack.Screen>
@@ -458,9 +452,6 @@ function App() {
           <Stack.Screen name="popover" options={{headerShown: false}}>
             {() => <PopoverPreview />}
           </Stack.Screen>
-          <Stack.Screen name="popover-action" options={{headerShown: false}}>
-            {() => <PopOverActionPreview />}
-          </Stack.Screen>
           <Stack.Screen name="pressable-icon">
             {() => <PressableIconPreview />}
           </Stack.Screen>
@@ -487,9 +478,6 @@ function App() {
             {() => <SplitContainerPreview />}
           </Stack.Screen>
           <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
-          <Stack.Screen name="tab-view">
-            {() => <TabViewPreview />}
-          </Stack.Screen>
           <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
           <Stack.Screen name="textBubble">
             {() => <TextBubblePreview />}

package/app.json

@@ -27,6 +27,7 @@
       }
     },
     "web": {
+      "bundler": "metro",
       "favicon": "./assets/favicon.png"
     }
   }

package/babel.config.js

@@ -1,7 +1,20 @@
 module.exports = function (api) {
   api.cache(true);
+  const disableImportExportTransform = true;
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      [
+        'babel-preset-expo',
+        {
+          native: {
+            disableImportExportTransform,
+          },
+          web: {
+            disableImportExportTransform,
+          },
+        },
+      ],
+    ],
     plugins: ['react-native-reanimated/plugin'],
   };
 };

package/index.d.ts

@@ -25,9 +25,7 @@ import { WideButton } from './src/components/molecules/wide-button/wide-button.c
 import { Icon } from './src/icons';
 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/molecules/swipe/swipe.component';
 import { Logo } from './src/components/atoms/logo/logo.component';
-import { DaySelect } from './src/components/organisms/day-select/day-select.component';
 import { Search } from './src/components/molecules/search-input/search.component';
 import { BlockedMessage } from './src/components/molecules/blocked-message/blocked-message.component';
 import { DepartmentLogo } from './src/components/molecules/department_logo/department-logo.component';
@@ -53,9 +51,7 @@ import { WaveBackground } from './src/components/molecules/wave-background/wave.
 import { BackgroundGradient } from './src/components/atoms/background-gradient/background-gradient.component';
 import { PersonInfoCard } from './src/components/organisms/person-info-card/person-info-card.component';
 import { TimePicker } from './src/components/molecules/time-picker/time-picker.component';
-import { PopOverAction } from './src/components/templates/popover-action/popover-action.component';
 import { QuickMessage } from './src/components/atoms/quick-message/quick-message.component';
-import { TabView } from './src/components/organisms/tab-view/tab-view.component';
 import { Line } from './src/components/atoms/line/line.component';
 import { JournalEntry } from './src/components/organisms/journal-entry/journal-entry.component';
 import { TimetableEdit } from './src/components/organisms/timetable-edit/timetable-edit.component';
@@ -63,6 +59,7 @@ import { ContextLabel } from './src/components/molecules/context-label/context-l
 import { Count } from './src/components/atoms/count/count.component';
 import { Amount } from './src/components/molecules/amount/amount.component';
 import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
+import { TimetableEditorStaff } from './src/components/organisms/timetable-editor/timetable-editor-staff.component';
 import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
 import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
 import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
@@ -77,4 +74,4 @@ import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimeSlotRecord, TimeSlotSequence, InlineError, InlineNotice, SelectableListItem };
+export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimetableEditorStaff, TimeSlotRecord, TimeSlotSequence, InlineError, InlineNotice, SelectableListItem };

package/index.tsx

@@ -33,9 +33,7 @@ import {WideButton} from './src/components/molecules/wide-button/wide-button.com
 import {Icon} from './src/icons';
 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/molecules/swipe/swipe.component';
 import {Logo} from './src/components/atoms/logo/logo.component';
-import {DaySelect} from './src/components/organisms/day-select/day-select.component';
 import {Search} from './src/components/molecules/search-input/search.component';
 import {BlockedMessage} from './src/components/molecules/blocked-message/blocked-message.component';
 import {DepartmentLogo} from './src/components/molecules/department_logo/department-logo.component';
@@ -71,9 +69,7 @@ import {WaveBackground} from './src/components/molecules/wave-background/wave.co
 import {BackgroundGradient} from './src/components/atoms/background-gradient/background-gradient.component';
 import {PersonInfoCard} from './src/components/organisms/person-info-card/person-info-card.component';
 import {TimePicker} from './src/components/molecules/time-picker/time-picker.component';
-import {PopOverAction} from './src/components/templates/popover-action/popover-action.component';
 import {QuickMessage} from './src/components/atoms/quick-message/quick-message.component';
-import {TabView} from './src/components/organisms/tab-view/tab-view.component';
 import {Line} from './src/components/atoms/line/line.component';
 import {JournalEntry} from './src/components/organisms/journal-entry/journal-entry.component';
 import {TimetableEdit} from './src/components/organisms/timetable-edit/timetable-edit.component';
@@ -124,7 +120,6 @@ export {
   ContactItem,
   ContactRole,
   DateInput,
-  DaySelect,
   DefaultSelect,
   DepartmentLogo,
   FilterRange,
@@ -152,7 +147,6 @@ export {
   PersonInfoCard,
   Pill,
   Popover,
-  PopOverAction,
   PressableIcon,
   QuickFilter,
   QuickMessage,
@@ -163,8 +157,6 @@ export {
   SmallText,
   Snackbar,
   SplitContainer,
-  Swipe,
-  TabView,
   Tag,
   TextBubble,
   TextInput,

package/metro.config.js

@@ -0,0 +1,11 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+config.transformer.getTransformOptions = async () => ({
+    transform: {
+      experimentalImportSupport: true,
+    },
+  });
+
+module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/animated-wave/animated-wave.styles.d.ts

@@ -1,21 +1,21 @@
 export function Stylesheet(Context: any): {
-    container: {
-        flex: number;
-        alignItems: "center";
-        justifyContent: "flex-start";
-    };
-    animationContainer: {
-        width: "100%";
-        alignItems: "center";
-        position: "absolute";
-        top: "-1%";
-        zIndex: number;
-    };
-    overlay: {
-        width: "100%";
-        height: "30%";
-        position: "absolute";
-        top: "38%";
-        backgroundColor: any;
-    };
+  container: {
+    flex: number;
+    alignItems: 'center';
+    justifyContent: 'flex-start';
+  };
+  animationContainer: {
+    width: '100%';
+    alignItems: 'center';
+    position: 'absolute';
+    top: '-1%';
+    zIndex: number;
+  };
+  overlay: {
+    width: '100%';
+    height: '30%';
+    position: 'absolute';
+    top: '38%';
+    backgroundColor: any;
+  };
 };

package/src/components/atoms/backdrop/backdrop.styles.d.ts

@@ -1,11 +1,11 @@
 export function Stylesheet(Context: any): {
-    element: {
-        width: "100%";
-        height: "100%";
-        backgroundColor: any;
-        zIndex: number;
-        position: "absolute";
-        top: number;
-        left: number;
-    };
+  element: {
+    width: '100%';
+    height: '100%';
+    backgroundColor: any;
+    zIndex: number;
+    position: 'absolute';
+    top: number;
+    left: number;
+  };
 };

package/src/components/atoms/background-gradient/background-gradient.styles.d.ts

@@ -1,8 +1,8 @@
 export function Stylesheet(): {
-    rootContainer: {
-        width: "100%";
-        height: "100%";
-        position: "absolute";
-        zIndex: number;
-    };
+  rootContainer: {
+    width: '100%';
+    height: '100%';
+    position: 'absolute';
+    zIndex: number;
+  };
 };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 interface CountProps {
     count: number;
     disabled?: boolean;

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

@@ -1,22 +1,21 @@
-import React from "react";
-import { View } from "react-native";
+import React from 'react';
+import {View} from 'react-native';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
-import { Stylesheet } from "./count.styles";
-import { Paragraph } from "../paragraph-components";
+import {Stylesheet} from './count.styles';
+import {Paragraph} from '../paragraph-components';
 
 interface CountProps {
   count: number;
-  disabled?: boolean
+  disabled?: boolean;
 }
 
-export const Count = ({
-  count,
-  disabled
-}: CountProps) => {
+export const Count = ({count, disabled}: CountProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, disabled);
-  return <View style={styles.container}>
-    <Paragraph addStyle={styles.text}>{count}</Paragraph>
-  </View>;
-};
+  return (
+    <View style={styles.container}>
+      <Paragraph addStyle={styles.text}>{count}</Paragraph>
+    </View>
+  );
+};

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

@@ -2,15 +2,15 @@ import {View} from 'react-native';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import React from 'react';
-import { Count } from './count.component';
+import {Count} from './count.component';
 
 export const CountPreview = () => {
   const context = useContext(ThemeCtx);
   return (
     <View style={{alignItems: 'center', gap: 8}}>
-        <Count count={2} />
-        <Count count={99} />
-        <Count count={999999} />
+      <Count count={2} />
+      <Count count={99} />
+      <Count count={999999} />
     </View>
   );
-}
+};

package/src/components/atoms/count/count.styles.d.ts

@@ -1,21 +1,24 @@
-export function Stylesheet(context: any, disabled: any): {
-    container: {
-        borderWidth: number;
-        borderColor: any;
-        borderRadius: number;
-        paddingVertical: number;
-        paddingHorizontal: number;
-        minWidth: number;
-        color: any;
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        flex: number;
-        backgroundColor: any;
-    };
-    text: {
-        width: "auto";
-        fontSize: number;
-        color: any;
-    };
+export function Stylesheet(
+  context: any,
+  disabled: any
+): {
+  container: {
+    borderWidth: number;
+    borderColor: any;
+    borderRadius: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    minWidth: number;
+    color: any;
+    display: 'flex';
+    alignItems: 'center';
+    justifyContent: 'center';
+    flex: number;
+    backgroundColor: any;
+  };
+  text: {
+    width: 'auto';
+    fontSize: number;
+    color: any;
+  };
 };

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

@@ -1,25 +1,33 @@
 import {StyleSheet} from 'react-native';
-import { Scale } from '../../../theme/scale';
+import {Scale} from '../../../theme/scale';
 
 export const Stylesheet = (context, disabled) =>
   StyleSheet.create({
     container: {
-        borderWidth: 1,
-        borderColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.main['1'],
-        borderRadius: 20,
-        paddingVertical: Scale.xs,
-        paddingHorizontal: Scale.m,
-        minWidth: Scale.xxxl,
-        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 0,
-        backgroundColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.ui.white
+      borderWidth: 1,
+      borderColor:
+        disabled === true
+          ? context.colors.ui.xlightgrey
+          : context.colors.main['1'],
+      borderRadius: 20,
+      paddingVertical: Scale.xs,
+      paddingHorizontal: Scale.m,
+      minWidth: Scale.xxxl,
+      color:
+        disabled === true ? context.colors.ui.grey : context.colors.main['2'],
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 0,
+      backgroundColor:
+        disabled === true
+          ? context.colors.ui.xlightgrey
+          : context.colors.ui.white,
     },
     text: {
-        width: 'auto',
-        fontSize: Scale.m,
-        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
-    }
+      width: 'auto',
+      fontSize: Scale.m,
+      color:
+        disabled === true ? context.colors.ui.grey : context.colors.main['2'],
+    },
   });

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

@@ -1,9 +1,6 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
-import { AnimateStyle } from 'react-native-reanimated';
 type FooterProps = {
     children: React.ReactNode;
-    animatedStyle?: AnimateStyle<ViewStyle>;
 };
-declare const Footer: ({ children, animatedStyle }: FooterProps) => React.JSX.Element;
+declare const Footer: ({ children }: FooterProps) => React.JSX.Element;
 export { Footer as Footer };

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

@@ -1,31 +1,27 @@
 import React from 'react';
 import {useContext} from 'react';
-import {ViewStyle} from 'react-native';
+import {View} from 'react-native';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './footer.styles';
-import Animated, {AnimateStyle} from 'react-native-reanimated';
-import {
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 type FooterProps = {
   children: React.ReactNode;
-  animatedStyle?: AnimateStyle<ViewStyle>;
 };
 
-const Footer = ({children, animatedStyle}: FooterProps) => {
+const Footer = ({children}: FooterProps) => {
   const context = useContext(ThemeCtx);
   const insets = useSafeAreaInsets();
   const styles = Stylesheet(context, insets);
 
   return (
-      <Animated.View
-        style={[styles.container, animatedStyle]}
-        testID="footer-container"
-      >
-        {children}
-      </Animated.View>
+    <View
+      style={styles.container}
+      testID="footer-container"
+    >
+      {children}
+    </View>
   );
 };
 

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

@@ -1,8 +1,5 @@
 import React from 'react';
 import {Footer} from './footer.component';
-import {SplitContainer} from '../split-container/split-container.component';
-import {SelectLink} from '../../molecules/select-link/select-link.component';
-import {Button} from '../../molecules/button/button.component';
 import {Icon} from '../../../icons/index';
 import {Pressable, View} from 'react-native';
 
@@ -10,20 +7,6 @@ export const FooterPreview = ({}: {}) => {
   return (
     <View style={{flex: 1, justifyContent: 'flex-end'}}>
       <Footer>
-        {/*<SplitContainer*/}
-        {/*  element1={*/}
-        {/*    <SelectLink*/}
-        {/*      label={'Selecteer alle'}*/}
-        {/*      onPress={() => console.log('selecteer alle')}*/}
-        {/*    />*/}
-        {/*  }*/}
-        {/*  element2={*/}
-        {/*    <Button*/}
-        {/*      label="Kies actie"*/}
-        {/*      onPress={() => console.log('element 2 pressed')}*/}
-        {/*    />*/}
-        {/*  }*/}
-        {/*/>*/}
         <Pressable
           style={{
             width: 42,

package/src/components/atoms/footer/footer.styles.d.ts

@@ -1,14 +1,17 @@
-export function Stylesheet(context: any, insets: any): {
-    container: {
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "center";
-        backgroundColor: any;
-        borderTopColor: any;
-        borderStyle: "solid";
-        borderTopWidth: number;
-        minHeight: any;
-        paddingBottom: any;
-        width: "100%";
-    };
+export function Stylesheet(
+  context: any,
+  insets: any
+): {
+  container: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'center';
+    backgroundColor: any;
+    borderTopColor: any;
+    borderStyle: 'solid';
+    borderTopWidth: number;
+    minHeight: any;
+    paddingBottom: any;
+    width: '100%';
+  };
 };

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

@@ -11,7 +11,7 @@ export const Stylesheet = (context, insets) =>
       borderTopColor: context.colors.ui.lightgrey,
       borderStyle: 'solid',
       borderTopWidth: 1,
-      minHeight: (Scale.xxxl + insets.bottom),
+      minHeight: Scale.xxxl + insets.bottom,
       paddingBottom: insets.bottom,
       width: '100%',
     },

package/src/components/atoms/increment-input/increment-input.styles.d.ts

@@ -1,35 +1,35 @@
 export function Stylesheet(Context: any): {
-    container: {
-        width: "100%";
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    buttonContainer: {
-        width: number;
-        height: number;
-        backgroundColor: any;
-        alignItems: "center";
-        justifyContent: "center";
-        borderRadius: number;
-    };
-    numberContainer: {
-        width: number;
-        height: number;
-        display: "flex";
-        justifyContent: "center";
-        alignItems: "center";
-        marginRight: number;
-        marginLeft: number;
-        backgroundColor: any;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderColor: any;
-        borderRadius: number;
-    };
-    number: {
-        textAlignVertical: "center";
-        justifyContent: "center";
-        alignItems: "center";
-        display: "flex";
-    };
+  container: {
+    width: '100%';
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  buttonContainer: {
+    width: number;
+    height: number;
+    backgroundColor: any;
+    alignItems: 'center';
+    justifyContent: 'center';
+    borderRadius: number;
+  };
+  numberContainer: {
+    width: number;
+    height: number;
+    display: 'flex';
+    justifyContent: 'center';
+    alignItems: 'center';
+    marginRight: number;
+    marginLeft: number;
+    backgroundColor: any;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderColor: any;
+    borderRadius: number;
+  };
+  number: {
+    textAlignVertical: 'center';
+    justifyContent: 'center';
+    alignItems: 'center';
+    display: 'flex';
+  };
 };