@tactics/toddle-styleguide 0.0.1 → 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

@@ -0,0 +1,62 @@
+// 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';
+import {Check} from './src/components/atoms/check-switch/check-switch.component';
+import {Checkbox} from './src/components/atoms/checkbox/checkbox.component';
+import {ChildListItem} from './src/components/atoms/child-list-item/child-list-item.component';
+import {ContactItem} from './src/components/atoms/contact-item/contact-item.component';
+import {FilterTab} from './src/components/atoms/filter-tab/filter-tab.component';
+import {FormAction} from './src/components/atoms/form-actions/form-action.component';
+import {ImageBubble} from './src/components/atoms/image-bubble/image-bubble.component';
+import {Info} from './src/components/atoms/info/info.component';
+import {Pill} from './src/components/atoms/pill/pill.component';
+import {Popover} from './src/components/atoms/popover/popover.component';
+import {PressableIcon} from './src/components/atoms/pressable-icon/pressable-icon.component';
+import {QuickFilter} from './src/components/atoms/quick-filter/quick-filter.component';
+import {SelectListItem} from './src/components/atoms/select-list-item/select-list-item.component';
+import {Snackbar} from './src/components/atoms/snackbar/snackbar.component';
+import {Tag} from './src/components/atoms/tag/tag.component';
+import {TextBubble} from './src/components/atoms/text-bubble/text-bubble.component';
+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,
+    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
+};

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.0.1",
-  "main": "node_modules/expo/AppEntry.js",
+  "version": "0.0.3",
+  "main": "index.tsx",
+  "types": "types/index.d.ts",
   "scripts": {
     "expo": "node_modules/.bin/expo",
     "start": "node_modules/.bin/tsc && node_modules/.bin/expo start",
@@ -9,7 +10,8 @@
     "ios": "node_modules/.bin/tsc && node_modules/.bin/expo start --ios",
     "web": "node_modules/.bin/tsc && node_modules/.bin/expo start --web",
     "test": "node_modules/.bin/jest",
-    "format": "yarn prettier --write src/."
+    "format": "yarn prettier --write src/.",
+    "types": "node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --jsx react-native --outDir types --skipLibCheck"
   },
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
@@ -20,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",
@@ -28,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"
   },
@@ -39,9 +44,9 @@
     "@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.6",
+    "@types/react-native": "^0.70.7",
     "@types/react-test-renderer": "^18.0.0",
     "jest": "^29.2.2",
     "jest-expo": "^46.0.1",

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

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

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

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