@tactics/toddle-styleguide 0.0.2 → 0.0.3

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,13 @@ 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 {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';
 
 const Stack = createNativeStackNavigator();
 
@@ -122,10 +125,16 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="formAction"
         onPress={() => navigation.push('form-action')}
       />
+      <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')} />
     </ScrollView>
   );
 };
@@ -190,9 +199,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 +212,22 @@ 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.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,6 +27,10 @@ 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';
 
 export {
     Avatar,
@@ -43,5 +54,9 @@ export {
     TextBubble,
     TextInput,
     TimeTracker,
-    WideButton
+    WideButton,
+    Icon,
+    Calendar,
+    IncrementInput,
+    Swipe
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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",