@tactics/toddle-styleguide 5.0.2 → 5.0.5

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,2 @@
+yarnPath: .yarn/releases/yarn-3.3.1.cjs
+nodeLinker: node-modules

package/App.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import 'intl';
+import 'intl/locale-data/jsonp/en';
+declare function App(): React.JSX.Element;
+export default App;

package/App.tsx

@@ -0,0 +1,655 @@
+import React from 'react';
+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';
+import {StaffMemberTheme} from './src/theme/provider';
+import {LoadFonts} from './src/theme/font';
+import {AvatarPreview} from './src/components/molecules/avatar/avatar.preview';
+import {ButtonPreview} from './src/components/molecules/button/button.preview';
+import {PillPreview} from './src/components/molecules/pill/pill.preview';
+import {SnackbarPreview} from './src/components/molecules/snackbar/snackbar.preview';
+import {TextBubblePreview} from './src/components/organisms/text-bubble/text-bubble.preview';
+import {ImageBubblePreview} from './src/components/atoms/image-bubble/image-bubble.preview';
+import {TimeTrackerPreview} from './src/components/molecules/time-tracker/time-tracker.preview';
+import {CancelLinkPreview} from './src/components/molecules/cancel-link/cancel-link.preview';
+import {InfoPreview} from './src/components/molecules/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/molecules/tag/tag.preview';
+import {PopoverPreview} from './src/components/templates/popover/popover.preview';
+import {FilterTabPreview} from './src/components/molecules/filter-tab/filter-tab.preview';
+import {ContactItemPreview} from './src/components/organisms/contact-item/contact-item.preview';
+import {SelectListItemPreview} from './src/components/molecules/select-list-item/select-list-item-preview';
+import {CheckboxPreview} from './src/components/molecules/checkbox/checkbox.preview';
+import {CheckPreview} from './src/components/atoms/check-switch/check-switch.preview';
+import {WideButtonPreview} from './src/components/molecules/wide-button/wide-button.preview';
+import {PressableIconPreview} from './src/components/molecules/pressable-icon/pressable-icon.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/molecules/quick-filter/quick-filter.preview';
+import {DateInputPreview} from './src/components/molecules/date-input/date-input.preview';
+import {TextInputPreview} from './src/components/atoms/text-input/text-input.preview';
+import {ChildListItemPreview} from './src/components/organisms/child-list-item/child-list-item.preview';
+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 {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';
+import {ContactRolePreview} from './src/components/molecules/contact-role/contact-role.preview';
+import {SearchPreview} from './src/components/molecules/search-input/search.preview';
+import {BlockedMessagePreview} from './src/components/molecules/blocked-message/blocked-message.preview';
+import {DepartmentLogoPreview} from './src/components/molecules/department_logo/department-logo.preview';
+import {CalendarSelectPreview} from './src/components/molecules/calendar-select/calendar-select.preview';
+import {FooterPreview} from './src/components/atoms/footer/footer.preview';
+import {DefaultSelectPreview} from './src/components/molecules/default-select/default-select.preview';
+import {PasswordInputPreview} from './src/components/molecules/password-input/password-input.preview';
+import {MessageInputPreview} from './src/components/molecules/message-input/message-input.preview';
+import {HeadingsPreview} from './src/components/atoms/heading-components/headings.preview';
+import {ParagraphComponentsPreview} from './src/components/atoms/paragraph-components/paragraph-components.preview';
+import {MyChildListItemPreview} from './src/components/organisms/my-child-list-item/my-child-list-item.preview';
+import {SelectLinkPreview} from './src/components/molecules/select-link/select-link.preview';
+import {MoreInfoButtonPreview} from './src/components/molecules/more-info-button/more-info-button.preview';
+import {LanguageButtonPreview} from './src/components/molecules/language-button/language-button.preview';
+import {ModalPreview} from './src/components/templates/modal/modal.preview';
+import {LoadingIndicatorPreview} from './src/components/organisms/loading-indicator/loading-indicator.preview';
+import {WaveBackgroundPreview} from './src/components/molecules/wave-background/wave.preview';
+import {ToddleDateTimePreview} from './src/utilities/toddle-datetime/toddle-datetime.preview';
+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 {QuickMessagePreview} from './src/components/atoms/quick-message/quick-message.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';
+import { CountPreview } from './src/components/atoms/count/count.preview';
+import { AmountPreview } from './src/components/molecules/amount/amount.preview';
+import { BareTimePickerPreview } from './src/components/molecules/bare-time-picker/bare-time-picker.preview';
+import { TimetableEditorPreview } from './src/components/organisms/timetable-editor/timetable-editor.preview';
+import { InlineErrorPreview } from './src/components/molecules/inline-error/inline-error.preview';
+import { SelectableListItemPreview } from './src/components/molecules/selectable-list-item/selectable-list-item-preview';
+
+import {
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
+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="Amount" onPress={() => navigation.push('amount')} />
+      <ReactBtn
+        title="Blocked message"
+        onPress={() => navigation.push('blocked-message')}
+      />
+      <ReactBtn title="Button" onPress={() => navigation.push('button')} />
+      <ReactBtn title="Calendar" onPress={() => navigation.push('calendar')} />
+      <ReactBtn
+        title="Calendar Select"
+        onPress={() => navigation.push('calendar-select')}
+      />
+      <ReactBtn
+        title="Cancel Link"
+        onPress={() => navigation.push('cancel-link')}
+      />
+      <ReactBtn title="Checkbox" onPress={() => navigation.push('checkbox')} />
+      <ReactBtn
+        title="Check Switch"
+        onPress={() => navigation.push('check-switch')}
+      />
+      <ReactBtn
+        title="Child List Item"
+        onPress={() => navigation.push('child-list-item')}
+      />
+      <ReactBtn
+        title="Contact Info Card"
+        onPress={() => navigation.push('person-info-card')}
+      />
+      <ReactBtn
+        title="Contact Item"
+        onPress={() => navigation.push('contact-item')}
+      />
+      <ReactBtn
+        title="Contact Role"
+        onPress={() => navigation.push('contact-role')}
+      />
+      <ReactBtn
+        title="Context Label"
+        onPress={() => navigation.push('context-label')}
+      />
+      <ReactBtn
+        title="Count"
+        onPress={() => navigation.push('count')}
+      />
+      <ReactBtn
+        title="Date Input"
+        onPress={() => navigation.push('date-input')}
+      />
+      <ReactBtn
+        title="Day Select"
+        onPress={() => navigation.push('day-select')}
+      />
+      <ReactBtn
+        title="Default Select"
+        onPress={() => navigation.push('default-select')}
+      />
+      <ReactBtn
+        title="Department Logo"
+        onPress={() => navigation.push('department-logo')}
+      />
+      <ReactBtn
+        title="Filter Range"
+        onPress={() => navigation.push('filter-range')}
+      />
+      <ReactBtn
+        title="Filter Tab"
+        onPress={() => navigation.push('filter-tab')}
+      />
+      <ReactBtn title="Footer" onPress={() => navigation.push('footer')} />
+      <ReactBtn
+        title="Gradient Background"
+        onPress={() => navigation.push('background-gradient')}
+      />
+      <ReactBtn title="Headings" onPress={() => navigation.push('headings')} />
+      <ReactBtn
+        title="Icons Default"
+        onPress={() => navigation.push('icons default')}
+      />
+      <ReactBtn
+        title="Icons Grey"
+        onPress={() => navigation.push('icons grey')}
+      />
+      <ReactBtn
+        title="Icons Solid"
+        onPress={() => navigation.push('icons solid')}
+      />
+      <ReactBtn
+        title="Icons White"
+        onPress={() => navigation.push('icons white')}
+      />
+      <ReactBtn
+        title="Image Bubble"
+        onPress={() => navigation.push('image-bubble')}
+      />
+      <ReactBtn
+        title="Increment input"
+        onPress={() => navigation.push('increment-input')}
+      />
+      <ReactBtn
+        title="Info Component"
+        onPress={() => navigation.push('info')}
+      />
+      <ReactBtn
+        title="Inline Error"
+        onPress={() => navigation.push('inline-error')}
+      />
+      <ReactBtn
+        title="Journal Entry"
+        onPress={() => navigation.push('journal-entry')}
+      />
+      <ReactBtn
+        title="Language Button"
+        onPress={() => navigation.push('language-button')}
+      />
+      <ReactBtn title="Line" onPress={() => navigation.push('line')} />
+      <ReactBtn
+        title="Loading Indicator"
+        onPress={() => navigation.push('loading-indicator')}
+      />
+      <ReactBtn title="Logo" onPress={() => navigation.push('logo')} />
+      <ReactBtn
+        title="Message Input"
+        onPress={() => navigation.push('message-input')}
+      />
+      <ReactBtn title="Modal" onPress={() => navigation.push('modal')} />
+      <ReactBtn
+        title="More Info Button"
+        onPress={() => navigation.push('more-info-button')}
+      />
+      <ReactBtn
+        title="My Child List Item"
+        onPress={() => navigation.push('my-child-list-item')}
+      />
+      <ReactBtn
+        title="Paragraphs"
+        onPress={() => navigation.push('paragraphs')}
+      />
+      <ReactBtn
+        title="Password Input"
+        onPress={() => navigation.push('password-input')}
+      />
+      <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
+      <ReactBtn title="Popover" onPress={() => navigation.push('popover')} />
+      <ReactBtn
+        title="Popover Action"
+        onPress={() => navigation.push('popover-action')}
+      />
+      <ReactBtn
+        title="Pressable Icon"
+        onPress={() => navigation.push('pressable-icon')}
+      />
+      <ReactBtn
+        title="Quick Filter"
+        onPress={() => navigation.push('quick-filter')}
+      />
+      <ReactBtn
+        title="Quick Message"
+        onPress={() => navigation.push('quick-message')}
+      />
+      <ReactBtn
+        title="Search Input"
+        onPress={() => navigation.push('search')}
+      />
+      <ReactBtn
+        title="Select Link"
+        onPress={() => navigation.push('select-link')}
+      />
+      <ReactBtn
+        title="Select List Item"
+        onPress={() => navigation.push('select-list-item')}
+      />
+      <ReactBtn
+        title="Selectable List Item"
+        onPress={() => navigation.push('selectable-list-item')}
+      />
+      <ReactBtn
+        title="Select Picker"
+        onPress={() => navigation.push('select-picker')}
+      />
+      <ReactBtn title="Snackbar" onPress={() => navigation.push('snackbar')} />
+      <ReactBtn
+        title="Split Container"
+        onPress={() => navigation.push('split-container')}
+      />
+      <ReactBtn title="Swiper" onPress={() => navigation.push('swiper')} />
+      <ReactBtn title="Tab View" onPress={() => navigation.push('tab-view')} />
+      <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
+      <ReactBtn
+        title="Text Bubble"
+        onPress={() => navigation.push('textBubble')}
+      />
+      <ReactBtn
+        title="Text Inputs"
+        onPress={() => navigation.push('textInputs')}
+      />
+      <ReactBtn
+        title="Time Picker"
+        onPress={() => navigation.push('time-picker')}
+      />
+      <ReactBtn
+        title="Bare Time Picker"
+        onPress={() => navigation.push('bare-time-picker')}
+      />
+      <ReactBtn
+        title="Time Tracker"
+        onPress={() => navigation.push('time-tracker')}
+      />
+      <ReactBtn
+        title="Timetable Editor"
+        onPress={() => navigation.push('timetable-editor')}
+      />
+      <ReactBtn title="Timeline" onPress={() => navigation.push('timeline')} />
+      <ReactBtn
+        title="Toddle DateTime"
+        onPress={() => navigation.push('toddle-datetime')}
+      />
+      <ReactBtn
+        title="Wave Background"
+        onPress={() => navigation.push('wave')}
+      />
+      <ReactBtn
+        title="Wide Button"
+        onPress={() => navigation.push('wide-button')}
+      />
+    </ScrollView>
+  );
+};
+
+function App() {
+  const [fontsLoaded] = LoadFonts();
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  return (
+    <SafeAreaProvider>
+    <ThemeCtx.Provider value={StaffMemberTheme}>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="home" options={{
+    freezeOnBlur: false,
+  }}>
+            {(props) => <HomeScreen {...props} />}
+          </Stack.Screen>
+          <Stack.Screen name="avatar"options={{
+    freezeOnBlur: false,
+  }}>{() => <AvatarPreview />}</Stack.Screen>
+          <Stack.Screen name="amount"options={{
+    freezeOnBlur: false,
+  }}>{() => <AmountPreview />}</Stack.Screen>
+          <Stack.Screen name="background-gradient" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <BackgroundGradientPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="blocked-message" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <BlockedMessagePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="button" options={{
+    freezeOnBlur: false,
+  }}>{() => <ButtonPreview />}</Stack.Screen>
+          <Stack.Screen name="calendar" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <CalendarPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="calendar-select" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <CalendarSelectPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="cancel-link" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <CancelLinkPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="checkbox" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <CheckboxPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="check-switch" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <CheckPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="child-list-item" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <ChildListItemPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="contact-item" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <ContactItemPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="contact-role" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <ContactRolePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="context-label" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <ContextLabelPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="count" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <CountPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="date-input" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <DateInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="default-select" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <DefaultSelectPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="department-logo" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <DepartmentLogoPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="filter-tab" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <FilterTabPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="filter-range" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <FilterRangePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="footer" options={{
+    freezeOnBlur: false,
+  }}>{() => <FooterPreview />}</Stack.Screen>
+          <Stack.Screen name="headings" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <HeadingsPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons default" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <IconOutlineDefaultPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons grey" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <IconOutlineGreyPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons solid" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <IconSolidPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="icons white" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <IconOutlineWhitePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="image-bubble" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <ImageBubblePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="increment-input" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <IncrementInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="info" options={{
+    freezeOnBlur: false,
+  }}>{() => <InfoPreview />}</Stack.Screen>
+          <Stack.Screen name="journal-entry" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <JournalEntryPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="language-button" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <LanguageButtonPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="line" options={{
+    freezeOnBlur: false,
+  }}>{() => <LinePreview />}</Stack.Screen>
+          <Stack.Screen name="loading-indicator" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <LoadingIndicatorPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="logo" options={{
+    freezeOnBlur: false,
+  }}>{() => <LogoPreview />}</Stack.Screen>
+          <Stack.Screen name="message-input" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <MessageInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="modal" options={{headerShown: false, freezeOnBlur: false}}>
+            {() => <ModalPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="more-info-button" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <MoreInfoButtonPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="my-child-list-item" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <MyChildListItemPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="paragraphs" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <ParagraphComponentsPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="password-input" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <PasswordInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="person-info-card" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <PersonInfoCardPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="pill" options={{
+    freezeOnBlur: false,
+  }}>{() => <PillPreview />}</Stack.Screen>
+          <Stack.Screen name="popover" options={{headerShown: false, freezeOnBlur:false}}>
+            {() => <PopoverPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="pressable-icon" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <PressableIconPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="quick-filter" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <QuickFilterPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="quick-message" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <QuickMessagePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="search" options={{
+    freezeOnBlur: false,
+  }}>{() => <SearchPreview />}</Stack.Screen>
+          <Stack.Screen name="select-link" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <SelectLinkPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="select-list-item" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <SelectListItemPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="select-picker" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <SelectPickerPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="snackbar" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <SnackbarPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="split-container" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <SplitContainerPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="swiper" options={{
+    freezeOnBlur: false,
+  }}>{() => <SwipePreview />}</Stack.Screen>
+          <Stack.Screen name="tag" options={{
+    freezeOnBlur: false,
+  }}>{() => <TagPreview />}</Stack.Screen>
+          <Stack.Screen name="textBubble" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <TextBubblePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="textInputs" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <TextInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="time-picker" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <TimePickerPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="bare-time-picker" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <BareTimePickerPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="time-tracker" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <TimeTrackerPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="timetable-editor" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <TimetableEditorPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="timeline" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <TimeLinePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="toddle-datetime" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <ToddleDateTimePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="wave" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <WaveBackgroundPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="wide-button" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <WideButtonPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="inline-error" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <InlineErrorPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="selectable-list-item" options={{
+    freezeOnBlur: false,
+  }}>
+            {() => <SelectableListItemPreview />}
+          </Stack.Screen>
+        </Stack.Navigator>
+      </NavigationContainer>
+    </ThemeCtx.Provider>
+    </SafeAreaProvider>
+  );
+}
+
+export default App;