@tactics/toddle-styleguide 1.0.2 → 1.1.0

package/assets/lottie/wave-for-parents.json

@@ -0,0 +1 @@
+{"nm":"circle_blue","mn":"","layers":[{"ty":0,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":true,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[89,89,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[500.00000000000006,500.00000000000006,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"masksProperties":[{"nm":"Mask 1","mn":"","inv":false,"mode":"a","x":{"a":0,"k":0,"ix":4},"o":{"a":0,"k":100,"ix":3},"pt":{"a":0,"k":{"c":true,"i":[[49.153,0],[0,-49.153],[-49.153,0],[0,49.153]],"o":[[-49.153,0],[0,49.153],[49.153,0],[0,-49.153]],"v":[[89,0],[0,89],[89,178],[178,89]]},"ix":1}}],"w":178,"h":178,"refId":"comp_0","ind":1},{"ty":4,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":1,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[494.8314606741573,233.8876404494382,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":2,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[178,178],"ix":2}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0.92,47.368],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 2","e":{"a":0,"k":[0,45],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.0784313725490196,0.5686274509803921,0.6078431372549019,0.5,0.0784313725490196,0.5686274509803921,0.6078431372549019,1,0.0784313725490196,0.5686274509803921,0.6078431372549019],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[0,360],"ix":5},"r":1,"o":{"a":0,"k":89,"ix":10}},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 1","e":{"a":0,"k":[75,0],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.0784313725490196,0.5686274509803921,0.6078431372549019,0.5,0.0784313725490196,0.5686274509803921,0.6078431372549019,1,0.0784313725490196,0.5686274509803921,0.6078431372549019],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[-54,0],"ix":5},"r":1,"o":{"a":0,"k":100,"ix":10}}],"ind":2}],"ddd":0,"h":1000,"w":1000,"meta":{"a":"","k":"","d":"","g":"LottieFiles AE 0.1.21","tc":"#000000"},"v":"5.5.7","fr":8,"op":60.0000024438501,"ip":0,"assets":[{"nm":"","mn":"","layers":[{"ty":4,"nm":"wave_2 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,89,0],"t":0,"ti":[-29.667,0,0],"to":[29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,89,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[45.859,9.977],[13.272,-0.001]],"o":[[0,0],[-0.03,0.007],[0,0],[-45.859,-9.977],[0,0],[0,0],[0,0],[0,0],[-0.031,0.007],[0,0],[-15.288,-3.326],[-26.538,0]],"v":[[0,-22.84],[0,-22.852],[-0.052,-22.84],[-88.423,-22.84],[-178,-22.84],[-178,32.816],[0,32.816],[178,32.816],[178,-22.852],[177.948,-22.84],[89.576,-22.84],[45.971,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.0784,0.5686,0.6078],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":1},{"ty":4,"nm":"wave_1 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,91,0],"t":0,"ti":[29.667,0,0],"to":[-29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,91,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":50,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[15.288,-3.326],[0,0],[0.031,0.007],[0,0],[45.858,-9.977],[0,0],[0.031,0.007],[0,0],[0,0],[0,0],[0,0],[26.539,0]],"o":[[-45.857,9.977],[0,0],[0,0],[0,0],[-45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-13.272,-0.001]],"v":[[88.423,-22.84],[0.051,-22.84],[0,-22.852],[0,-22.84],[-89.576,-22.84],[-177.948,-22.84],[-178,-22.852],[-178,32.816],[0,32.816],[178,32.816],[178,-22.84],[132.029,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.0784,0.5686,0.6078],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":2}],"id":"comp_0"}]}

package/index.d.ts

@@ -49,6 +49,7 @@ import { MoreInfoButton } from './src/components/molecules/more-info-button/more
 import { LanguageButton } from './src/components/molecules/language-button/language-button.component';
 import { Modal } from './src/components/templates/modal/modal.component';
 import { LoadingIndicator } from './src/components/organisms/loading-indicator/loading-indicator.component';
+import { WaveBackground } from './src/components/molecules/wave-background/wave.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -57,4 +58,4 @@ import { Initials } from './src/models/initials.model';
 import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.class';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, 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, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, 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, };

package/index.tsx

@@ -67,6 +67,7 @@ import {MoreInfoButton} from './src/components/molecules/more-info-button/more-i
 import {LanguageButton} from './src/components/molecules/language-button/language-button.component';
 import {Modal} from './src/components/templates/modal/modal.component';
 import {LoadingIndicator} from './src/components/organisms/loading-indicator/loading-indicator.component';
+import {WaveBackground} from './src/components/molecules/wave-background/wave.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -150,4 +151,5 @@ export {
   LanguageButton,
   Modal,
   LoadingIndicator,
+  WaveBackground,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -19,9 +19,10 @@
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
-    "@expo/webpack-config": "^0.17.0",
+    "@expo/config-plugins": "~6.0.0",
+    "@expo/webpack-config": "^18.0.1",
     "@miblanchard/react-native-slider": "^2.1.0",
-    "@react-native-picker/picker": "2.4.2",
+    "@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",
@@ -30,43 +31,44 @@
     "@tactics/kinderopvang-branding": "1.0.3",
     "@types/luxon": "^3.1.0",
     "@types/xdate": "^0.8.32",
-    "expo": "~46.0.16",
-    "expo-font": "^10.2.1",
-    "expo-linear-gradient": "~11.4.0",
-    "expo-status-bar": "~1.4.0",
+    "expo": "^48.0.0",
+    "expo-font": "~11.1.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",
+    "lottie-react-native": "5.1.4",
     "luxon": "^3.2.0",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.3",
     "react-native-calendar-strip": "^2.2.6",
     "react-native-calendars": "^1.1293.0",
-    "react-native-gesture-handler": "~2.5.0",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-picker-select": "^8.0.4",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-screens": "~3.15.0",
-    "react-native-svg": "12.3.0",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
+    "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-test-renderer": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.20.0",
     "@babel/preset-typescript": "^7.18.6",
     "@types/jest": "^29.2.1",
     "@types/luxon": "^3.1.0",
     "@types/node": "^18.11.7",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@types/react-native": "^0.70.7",
+    "@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",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   }
 }

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

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

package/src/components/atoms/animated-wave/animated-wave.component.tsx

@@ -0,0 +1,28 @@
+import React, {useContext} from 'react';
+import {Dimensions, View} from 'react-native';
+import {Stylesheet} from './animated-wave.styles';
+import {ThemeCtx} from '../../../context/theme.context';
+
+const LottieView = require('lottie-react-native');
+
+export const AnimatedWave = () => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.animationContainer}>
+        <LottieView
+          source={Context.wave.path}
+          style={{
+            width: Dimensions.get('window').width + 64,
+            backgroundColor: Context.colors.main['5'],
+          }}
+          autoPlay
+          loop
+        />
+      </View>
+      <View style={styles.overlay} />
+    </View>
+  );
+};

package/src/components/atoms/animated-wave/animated-wave.preview.tsx

@@ -0,0 +1,20 @@
+import React, {useContext} from 'react';
+import {AnimatedWave} from './animated-wave.component';
+import {View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+
+export const AnimatedWavePreview = ({}: {}) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: context.colors.main['5'],
+      }}
+    >
+      <AnimatedWave />
+    </View>
+  );
+};

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

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

package/src/components/atoms/animated-wave/animated-wave.styles.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+    },
+    animationContainer: {
+      width: '100%',
+      alignItems: 'center',
+      position: 'absolute',
+      top: '-1%',
+      zIndex: -1,
+    },
+    overlay: {
+      width: '100%',
+      height: '30%',
+      position: 'absolute',
+      top: '38%',
+      backgroundColor: Context.colors.main['3'],
+    },
+  });

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

@@ -1,4 +1,4 @@
-declare type PopoverBackdropProps = {
+type PopoverBackdropProps = {
     isVisible: boolean;
 };
 declare const Backdrop: ({ isVisible }: PopoverBackdropProps) => JSX.Element;