@tactics/toddle-styleguide 0.0.2 → 0.0.4

package/.github/workflows/publish_styleguide.yaml

@@ -0,0 +1,30 @@
+name: Create Release
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  build:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: Release ${{ github.ref }}
+          draft: false
+          prerelease: false
+
+      - name: Publish to npm
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: 'public'

package/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {ScrollView, Button as ReactBtn} from 'react-native';
+import {Button as ReactBtn, ScrollView} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -23,7 +23,6 @@ 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/atoms/tag/tag.preview';
-import {PopoverHeadingPreview} from './src/components/atoms/popover-heading/popover-heading.preview';
 import {FilterTabPreview} from './src/components/atoms/filter-tab/filter-tab.preview';
 import {ContactItemPreview} from './src/components/atoms/contact-item/contact-item.preview';
 import {SelectListItemPreview} from './src/components/atoms/select-list-item/select-list-item-preview';
@@ -32,9 +31,14 @@ import {CheckPreview} from './src/components/atoms/check-switch/check-switch.pre
 import {WideButtonPreview} from './src/components/atoms/wide-button/wide-button.preview';
 import {PressableIconPreview} from './src/components/atoms/pressable-icon/pressable-icon.preview';
 import {FormActionPreview} from './src/components/atoms/form-actions/form-action.preview';
+import {CalendarPreview} from './src/components/atoms/calendar/calendar.preview';
 import {QuickFilterPreview} from './src/components/atoms/quick-filter/quick-filter.prevriew';
 import {TextInputPreview} from './src/components/atoms/text-input/text-input.preview';
-import {ChildListItemPreview} from "./src/components/atoms/child-list-item/child-list-item.preview";
+import {ChildListItemPreview} from './src/components/atoms/child-list-item/child-list-item.preview';
+import {TimeLinePreview} from './src/components/atoms/timeline/timeline.preview';
+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';
 
 const Stack = createNativeStackNavigator();
 
@@ -48,7 +52,8 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         alignItems: 'center',
         justifyContent: 'center',
       }}
-    ><ReactBtn title="Avatar" onPress={() => navigation.push('avatar')} />
+    >
+      <ReactBtn title="Avatar" onPress={() => navigation.push('avatar')} />
       <ReactBtn title="Button" onPress={() => navigation.push('button')} />
       <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
       <ReactBtn title="Snackbar" onPress={() => navigation.push('snackbar')} />
@@ -89,8 +94,8 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         onPress={() => navigation.push('info')}
       />
       <ReactBtn
-          title="child-list-item"
-          onPress={() => navigation.push('childList')}
+        title="child-list-item"
+        onPress={() => navigation.push('childList')}
       />
       <ReactBtn
         title="Wide Button"
@@ -122,10 +127,17 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="formAction"
         onPress={() => navigation.push('form-action')}
       />
-    <ReactBtn
+      <ReactBtn title="Calendar" onPress={() => navigation.push('calendar')} />
+      <ReactBtn
         title="quickFilter"
         onPress={() => navigation.push('quick-filter')}
       />
+      <ReactBtn
+        title="Increment input"
+        onPress={() => navigation.push('increment-input')}
+      />
+      <ReactBtn title="swiper" onPress={() => navigation.push('swiper')} />
+      <ReactBtn title="logo" onPress={() => navigation.push('logo')} />
     </ScrollView>
   );
 };
@@ -190,9 +202,6 @@ function App() {
           <Stack.Screen name="select-list-item">
             {() => <SelectListItemPreview />}
           </Stack.Screen>
-          <Stack.Screen name="popover-heading">
-            {() => <PopoverHeadingPreview />}
-          </Stack.Screen>
           <Stack.Screen name="filter tab">
             {() => <FilterTabPreview />}
           </Stack.Screen>
@@ -206,12 +215,23 @@ function App() {
           <Stack.Screen name="form-action">
             {() => <FormActionPreview />}
           </Stack.Screen>
+          <Stack.Screen name="calendar">
+            {() => <CalendarPreview />}
+          </Stack.Screen>
           <Stack.Screen name="quick-filter">
             {() => <QuickFilterPreview />}
           </Stack.Screen>
           <Stack.Screen name="childList">
             {() => <ChildListItemPreview />}
           </Stack.Screen>
+          <Stack.Screen name="timeline">
+            {() => <TimeLinePreview />}
+          </Stack.Screen>
+          <Stack.Screen name="increment-input">
+            {() => <IncrementInputPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
+          <Stack.Screen name="logo">{() => <LogoPreview />}</Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.tsx

@@ -1,3 +1,10 @@
+// Needed to run Expo
+import registerRootComponent from 'expo/build/launch/registerRootComponent';
+
+import App from './App';
+registerRootComponent(App);
+
+// Exports of components
 import {Avatar} from './src/components/atoms/avatar/avatar.component';
 import {Button} from './src/components/atoms/button/button.component';
 import {CancelLink} from './src/components/atoms/cancel-link/cancel-link.component';
@@ -20,28 +27,38 @@ import {TextBubble} from './src/components/atoms/text-bubble/text-bubble.compone
 import {TextInput} from './src/components/atoms/text-input/text-input.component';
 import {TimeTracker} from './src/components/atoms/time-tracker/time-tracker.component';
 import {WideButton} from './src/components/atoms/wide-button/wide-button.component';
+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/atoms/swipe/swipe.component';
+import {Logo} from './src/components/atoms/logo/logo.component';
 
 export {
-    Avatar,
-    Button,
-    CancelLink,
-    Check,
-    Checkbox,
-    ChildListItem,
-    ContactItem,
-    FilterTab,
-    FormAction,
-    ImageBubble,
-    Info,
-    Pill,
-    Popover,
-    PressableIcon,
-    QuickFilter,
-    SelectListItem,
-    Snackbar,
-    Tag,
-    TextBubble,
-    TextInput,
-    TimeTracker,
-    WideButton
+  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,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "index.tsx",
   "types": "types/index.d.ts",
   "scripts": {
@@ -22,6 +22,7 @@
     "@react-navigation/native-stack": "^6.9.1",
     "@react-navigation/stack": "^6.3.3",
     "@tactics/kinderopvang-branding": "^1.0.1",
+    "@types/xdate": "^0.8.32",
     "expo": "~46.0.16",
     "expo-font": "^10.2.1",
     "expo-linear-gradient": "~11.4.0",
@@ -30,9 +31,11 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.6",
+    "react-native-calendars": "^1.1292.0",
     "react-native-safe-area-context": "4.3.1",
     "react-native-screens": "~3.15.0",
     "react-native-svg": "12.3.0",
+    "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.18.7",
     "react-test-renderer": "^18.2.0"
   },
@@ -41,7 +44,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@types/jest": "^29.2.1",
     "@types/node": "^18.11.7",
-    "@types/react": "^18.0.24",
+    "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "@types/react-native": "^0.70.7",
     "@types/react-test-renderer": "^18.0.0",

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Image, ImageSourcePropType, View, Text, ImageStyle} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';