@tactics/toddle-styleguide 1.2.1 → 1.2.3

package/App.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import 'intl';
 import 'intl/locale-data/jsonp/en';
 declare function App(): JSX.Element;

package/App.tsx

@@ -67,6 +67,7 @@ import {WaveBackgroundPreview} from './src/components/molecules/wave-background/
 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';
 
 const Stack = createNativeStackNavigator();
 
@@ -260,6 +261,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Contact info card"
         onPress={() => navigation.push('person-info-card')}
       />
+      <ReactBtn
+        title="Time picker"
+        onPress={() => navigation.push('time-picker')}
+      />
     </ScrollView>
   );
 };
@@ -324,7 +329,9 @@ function App() {
           <Stack.Screen name="select-list-item">
             {() => <SelectListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="popover">{() => <PopoverPreview />}</Stack.Screen>
+          <Stack.Screen name="popover" options={{headerShown: false}}>
+            {() => <PopoverPreview />}
+          </Stack.Screen>
           <Stack.Screen name="filter tab">
             {() => <FilterTabPreview />}
           </Stack.Screen>
@@ -408,16 +415,14 @@ function App() {
           <Stack.Screen name="language-button">
             {() => <LanguageButtonPreview />}
           </Stack.Screen>
-          <Stack.Screen name="modal" options={{headerShown: false}}>
-            {() => <ModalPreview />}
-          </Stack.Screen>
-          <Stack.Screen name="wave" options={{headerShown: false}}>
+          <Stack.Screen name="modal">{() => <ModalPreview />}</Stack.Screen>
+          <Stack.Screen name="wave">
             {() => <WaveBackgroundPreview />}
           </Stack.Screen>
-          <Stack.Screen name="loading-indicator" options={{headerShown: false}}>
+          <Stack.Screen name="loading-indicator">
             {() => <LoadingIndicatorPreview />}
           </Stack.Screen>
-          <Stack.Screen name="toddle-datetime" options={{headerShown: false}}>
+          <Stack.Screen name="toddle-datetime">
             {() => <ToddleDateTimePreview />}
           </Stack.Screen>
           <Stack.Screen name="background-gradient">
@@ -426,6 +431,9 @@ function App() {
           <Stack.Screen name="person-info-card">
             {() => <PersonInfoCardPreview />}
           </Stack.Screen>
+          <Stack.Screen name="time-picker">
+            {() => <TimePickerPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -32,7 +32,7 @@ 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';
 import { ContactRole } from './src/components/molecules/contact-role/contact-role.component';
-import { Timeline } from './src/components/molecules/timeline/timeline.component';
+import { TimeLine } from './src/components/molecules/timeline/timeline.component';
 import { SelectPicker } from './src/components/molecules/select-picker/select-picker.component';
 import { CalendarSelect } from './src/components/molecules/calendar-select/calendar-select.component';
 import { DateInput } from './src/components/molecules/date-input/date-input.component';
@@ -52,6 +52,7 @@ import { LoadingIndicator } from './src/components/organisms/loading-indicator/l
 import { WaveBackground } from './src/components/molecules/wave-background/wave.component';
 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 { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -61,4 +62,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 { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, CreateResponsiveStyle, VisualState, ThemeCtx, ToddleDateTime, 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, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, BackgroundGradient, PersonInfoCard, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, CreateResponsiveStyle, VisualState, ThemeCtx, ToddleDateTime, 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, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, WaveBackground, BackgroundGradient, PersonInfoCard, TimePicker, };

package/index.tsx

@@ -40,7 +40,7 @@ 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';
 import {ContactRole} from './src/components/molecules/contact-role/contact-role.component';
-import {Timeline} from './src/components/molecules/timeline/timeline.component';
+import {TimeLine} from './src/components/molecules/timeline/timeline.component';
 import {SelectPicker} from './src/components/molecules/select-picker/select-picker.component';
 import {CalendarSelect} from './src/components/molecules/calendar-select/calendar-select.component';
 import {DateInput} from './src/components/molecules/date-input/date-input.component';
@@ -70,6 +70,7 @@ import {LoadingIndicator} from './src/components/organisms/loading-indicator/loa
 import {WaveBackground} from './src/components/molecules/wave-background/wave.component';
 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';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -134,7 +135,7 @@ export {
   BlockedMessage,
   DepartmentLogo,
   ContactRole,
-  Timeline,
+  TimeLine,
   SelectPicker,
   CalendarSelect,
   DateInput,
@@ -160,4 +161,5 @@ export {
   WaveBackground,
   BackgroundGradient,
   PersonInfoCard,
+  TimePicker,
 };

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
   "scripts": {
+    "expo": "./node_modules/.bin/tsc && ./node_modules/.bin/expo",
+    "start": "./node_modules/.bin/tsc && ./node_modules/.bin/expo start",
     "test": "./node_modules/.bin/jest",
     "format": "./node_modules/.bin/prettier --write src/.",
     "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck --target es5"
@@ -17,33 +19,34 @@
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
-    "@expo/config-plugins": "~6.0.0",
-    "@expo/webpack-config": "^18.0.1",
-    "@miblanchard/react-native-slider": "^2.1.0",
+    "@expo/config-plugins": "~6.0.2",
+    "@expo/webpack-config": "^18.1.0",
+    "@miblanchard/react-native-slider": "^2.3.1",
     "@react-native-picker/picker": "2.4.8",
-    "@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",
+    "@react-navigation/bottom-tabs": "^6.5.8",
+    "@react-navigation/drawer": "^6.6.3",
+    "@react-navigation/native": "^6.1.7",
+    "@react-navigation/native-stack": "^6.9.13",
+    "@react-navigation/stack": "^6.3.17",
     "@tactics/kinderopvang-branding": "1.0.3",
-    "@testing-library/react-native": "^11.5.3",
-    "@types/luxon": "^3.2.0",
+    "@testing-library/react-native": "^12.1.2",
+    "@types/luxon": "^3.3.0",
     "@types/xdate": "^0.8.32",
-    "expo": "^48.0.0",
+    "expo": "^48.0.19",
     "expo-font": "~11.1.1",
+    "expo-haptics": "~12.2.1",
     "expo-linear-gradient": "~12.1.2",
     "expo-status-bar": "~1.4.4",
     "intl": "^1.2.5",
-    "jsc-android": "^250230.2.1",
-    "lottie-ios": "3.4.1",
+    "jsc-android": "^250231.0.0",
+    "lottie-ios": "4.2.0",
     "lottie-react-native": "5.1.4",
     "luxon": "^3.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.6",
+    "react-native": "0.71.8",
     "react-native-calendar-strip": "^2.2.6",
-    "react-native-calendars": "^1.1293.0",
+    "react-native-calendars": "^1.1299.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-picker-select": "^8.0.4",
     "react-native-reanimated": "~2.14.4",
@@ -52,22 +55,23 @@
     "react-native-svg": "13.4.0",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
-    "react-native-web": "~0.18.7",
+    "react-native-web": "~0.18.10",
+    "react-native-wheel-picker-expo": "^0.5.4",
     "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-typescript": "^7.18.6",
-    "@types/jest": "^29.2.1",
-    "@types/luxon": "^3.2.0",
-    "@types/node": "^18.11.7",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@types/jest": "^29.5.2",
+    "@types/luxon": "^3.3.0",
+    "@types/node": "^20.3.1",
     "@types/react": "~18.0.27",
     "@types/react-dom": "~18.0.10",
     "@types/react-test-renderer": "^18.0.0",
-    "jest": "^29.2.2",
-    "jest-expo": "^46.0.1",
-    "prettier": "2.7.1",
-    "ts-jest": "^29.0.3",
+    "jest": "^29.5.0",
+    "jest-expo": "^48.0.2",
+    "prettier": "2.8.8",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   }

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const AnimatedWave: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type PopoverBackdropProps = {
     isVisible: boolean;
 };

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const BackgroundGradient: () => JSX.Element;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const BackgroundGradientPreview: ({}: {}) => JSX.Element;