@tactics/toddle-styleguide 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.yarnrc.yml CHANGED
@@ -1 +1 @@
1
- nodeLinker: node-modules
1
+ nodeLinker: node-modules
File without changes
package/index.tsx CHANGED
@@ -33,7 +33,24 @@ import {IncrementInput} from './src/components/atoms/increment-input/increment-i
33
33
  import {Swipe} from './src/components/atoms/swipe/swipe.component';
34
34
  import {Logo} from './src/components/atoms/logo/logo.component';
35
35
 
36
+ // Exports of enums
37
+ import {BubbleAlignment} from "./src/types/bubble-alignment.enum";
38
+ import {KeyBoardTypes} from "./src/types/keyboard-types.enum";
39
+ import {Size} from "./src/types/size.enum";
40
+ import {VisualState} from "./src/types/visual-state.enum";
41
+
42
+ // Exports of models
43
+ import {Initials} from "./src/models/initials.model";
44
+
45
+ // Exports of context
46
+ import {ThemeCtx} from "./src/context/theme.context";
47
+
36
48
  export {
49
+ Initials,
50
+ BubbleAlignment,
51
+ KeyBoardTypes,
52
+ Size,
53
+ VisualState,
37
54
  Avatar,
38
55
  Button,
39
56
  CancelLink,
package/package.json CHANGED
@@ -1,17 +1,19 @@
1
1
  {
2
2
  "name": "@tactics/toddle-styleguide",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "main": "index.tsx",
5
- "types": "types/index.d.ts",
5
+ "types": "index.d.ts",
6
+ "prepublish": "tsc",
6
7
  "scripts": {
7
- "expo": "node_modules/.bin/expo",
8
- "start": "node_modules/.bin/tsc && node_modules/.bin/expo start",
9
- "android": "node_modules/.bin/tsc && node_modules/.bin/expo start --android",
10
- "ios": "node_modules/.bin/tsc && node_modules/.bin/expo start --ios",
11
- "web": "node_modules/.bin/tsc && node_modules/.bin/expo start --web",
12
- "test": "node_modules/.bin/jest",
13
- "format": "yarn prettier --write src/.",
14
- "types": "node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --jsx react-native --outDir types --skipLibCheck"
8
+ "expo": "./node_modules/.bin/tsc && ./node_modules/.bin/expo",
9
+ "start": "./node_modules/.bin/tsc && node_modules/.bin/expo start",
10
+ "test": "./node_modules/.bin/jest",
11
+ "format": "./node_modules/.bin/prettier --write src/.",
12
+ "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck"
13
+ },
14
+ "engines": {
15
+ "npm": "please-use-yarn",
16
+ "yarn": ">= 3.2.4"
15
17
  },
16
18
  "dependencies": {
17
19
  "@callstack/react-theme-provider": "^3.0.8",
@@ -21,7 +23,7 @@
21
23
  "@react-navigation/native": "^6.0.13",
22
24
  "@react-navigation/native-stack": "^6.9.1",
23
25
  "@react-navigation/stack": "^6.3.3",
24
- "@tactics/kinderopvang-branding": "^1.0.1",
26
+ "@tactics/kinderopvang-branding": "1.0.3",
25
27
  "@types/xdate": "^0.8.32",
26
28
  "expo": "~46.0.16",
27
29
  "expo-font": "^10.2.1",
@@ -1,44 +1,44 @@
1
- import {colors} from '@tactics/kinderopvang-branding/src/colors';
1
+ import {Colors} from '@tactics/kinderopvang-branding';
2
2
 
3
3
  export const ParentTheme = {
4
4
  colors: {
5
- gradient: [colors.secondary[2], colors.tertiary[9], colors.secondary[5]],
5
+ gradient: [Colors.secondary[2], Colors.tertiary[9], Colors.secondary[5]],
6
6
  main: {
7
- 9: colors.primary[9],
8
- 8: colors.primary[8],
9
- 7: colors.primary[7],
10
- 6: colors.primary[6],
11
- 5: colors.primary[5],
12
- 4: colors.primary[4],
13
- 3: colors.primary[3],
14
- 2: colors.primary[2],
15
- 1: colors.primary[1],
16
- 0: colors.primary[0],
7
+ 9: Colors.primary[9],
8
+ 8: Colors.primary[8],
9
+ 7: Colors.primary[7],
10
+ 6: Colors.primary[6],
11
+ 5: Colors.primary[5],
12
+ 4: Colors.primary[4],
13
+ 3: Colors.primary[3],
14
+ 2: Colors.primary[2],
15
+ 1: Colors.primary[1],
16
+ 0: Colors.primary[0],
17
17
  },
18
18
  ui: {
19
- black: colors.ui.black,
20
- white: colors.ui.white,
21
- xlightgrey: colors.ui.xlightgrey,
22
- lightgrey: colors.ui.lightgrey,
23
- grey: colors.ui.grey,
24
- darkgrey: colors.ui.darkgrey,
19
+ black: Colors.ui.black,
20
+ white: Colors.ui.white,
21
+ xlightgrey: Colors.ui.xlightgrey,
22
+ lightgrey: Colors.ui.lightgrey,
23
+ grey: Colors.ui.grey,
24
+ darkgrey: Colors.ui.darkgrey,
25
25
  success: {
26
- xlight: colors.ui.success.xlight,
27
- light: colors.ui.success.light,
28
- default: colors.ui.success.default,
29
- dark: colors.ui.success.dark,
26
+ xlight: Colors.ui.success.xlight,
27
+ light: Colors.ui.success.light,
28
+ default: Colors.ui.success.default,
29
+ dark: Colors.ui.success.dark,
30
30
  },
31
31
  warning: {
32
- xlight: colors.ui.warning.xlight,
33
- light: colors.ui.warning.light,
34
- default: colors.ui.warning.default,
35
- dark: colors.ui.warning.dark,
32
+ xlight: Colors.ui.warning.xlight,
33
+ light: Colors.ui.warning.light,
34
+ default: Colors.ui.warning.default,
35
+ dark: Colors.ui.warning.dark,
36
36
  },
37
37
  error: {
38
- xlight: colors.ui.error.xlight,
39
- light: colors.ui.error.light,
40
- default: colors.ui.error.default,
41
- dark: colors.ui.error.dark,
38
+ xlight: Colors.ui.error.xlight,
39
+ light: Colors.ui.error.light,
40
+ default: Colors.ui.error.default,
41
+ dark: Colors.ui.error.dark,
42
42
  },
43
43
  },
44
44
  },
@@ -1,44 +1,44 @@
1
- import {colors} from '@tactics/kinderopvang-branding/src/colors';
1
+ import {Colors} from '@tactics/kinderopvang-branding';
2
2
 
3
3
  export const StaffMemberTheme = {
4
4
  colors: {
5
- gradient: [colors.secondary[2], colors.secondary[5], colors.tertiary[4]],
5
+ gradient: [Colors.secondary[2], Colors.secondary[5], Colors.tertiary[4]],
6
6
  main: {
7
- 9: colors.secondary[9],
8
- 8: colors.secondary[8],
9
- 7: colors.secondary[7],
10
- 6: colors.secondary[6],
11
- 5: colors.secondary[5],
12
- 4: colors.secondary[4],
13
- 3: colors.secondary[3],
14
- 2: colors.secondary[2],
15
- 1: colors.secondary[1],
16
- 0: colors.secondary[0],
7
+ 9: Colors.secondary[9],
8
+ 8: Colors.secondary[8],
9
+ 7: Colors.secondary[7],
10
+ 6: Colors.secondary[6],
11
+ 5: Colors.secondary[5],
12
+ 4: Colors.secondary[4],
13
+ 3: Colors.secondary[3],
14
+ 2: Colors.secondary[2],
15
+ 1: Colors.secondary[1],
16
+ 0: Colors.secondary[0],
17
17
  },
18
18
  ui: {
19
- black: colors.ui.black,
20
- white: colors.ui.white,
21
- xlightgrey: colors.ui.xlightgrey,
22
- lightgrey: colors.ui.lightgrey,
23
- grey: colors.ui.grey,
24
- darkgrey: colors.ui.darkgrey,
19
+ black: Colors.ui.black,
20
+ white: Colors.ui.white,
21
+ xlightgrey: Colors.ui.xlightgrey,
22
+ lightgrey: Colors.ui.lightgrey,
23
+ grey: Colors.ui.grey,
24
+ darkgrey: Colors.ui.darkgrey,
25
25
  success: {
26
- xlight: colors.ui.success.xlight,
27
- light: colors.ui.success.light,
28
- default: colors.ui.success.default,
29
- dark: colors.ui.success.dark,
26
+ xlight: Colors.ui.success.xlight,
27
+ light: Colors.ui.success.light,
28
+ default: Colors.ui.success.default,
29
+ dark: Colors.ui.success.dark,
30
30
  },
31
31
  warning: {
32
- xlight: colors.ui.warning.xlight,
33
- light: colors.ui.warning.light,
34
- default: colors.ui.warning.default,
35
- dark: colors.ui.warning.dark,
32
+ xlight: Colors.ui.warning.xlight,
33
+ light: Colors.ui.warning.light,
34
+ default: Colors.ui.warning.default,
35
+ dark: Colors.ui.warning.dark,
36
36
  },
37
37
  error: {
38
- xlight: colors.ui.error.xlight,
39
- light: colors.ui.error.light,
40
- default: colors.ui.error.default,
41
- dark: colors.ui.error.dark,
38
+ xlight: Colors.ui.error.xlight,
39
+ light: Colors.ui.error.light,
40
+ default: Colors.ui.error.default,
41
+ dark: Colors.ui.error.dark,
42
42
  },
43
43
  },
44
44
  },
@@ -1,4 +0,0 @@
1
- {
2
- "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3
- "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4
- }
@@ -1,30 +0,0 @@
1
- name: Create Release
2
-
3
- on:
4
- push:
5
- tags:
6
- - '*'
7
-
8
- jobs:
9
- build:
10
- name: Create Release
11
- runs-on: ubuntu-latest
12
- steps:
13
- - name: Checkout code
14
- uses: actions/checkout@v2
15
- - name: Create Release
16
- id: create_release
17
- uses: actions/create-release@v1
18
- env:
19
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
20
- with:
21
- tag_name: ${{ github.ref }}
22
- release_name: Release ${{ github.ref }}
23
- draft: false
24
- prerelease: false
25
-
26
- - name: Publish to npm
27
- uses: JS-DevTools/npm-publish@v1
28
- with:
29
- token: ${{ secrets.NPM_TOKEN }}
30
- access: 'public'
@@ -1,16 +0,0 @@
1
- name: Run Tests
2
-
3
- on: pull_request
4
-
5
- jobs:
6
- test:
7
- runs-on: ubuntu-latest
8
-
9
- steps:
10
- - uses: actions/checkout@v3
11
- - uses: actions/setup-node@v3.5.1
12
- with:
13
- node-version: 18
14
- cache: 'yarn'
15
- - run: yarn install
16
- - run: yarn test
package/App.tsx DELETED
@@ -1,241 +0,0 @@
1
- import React from 'react';
2
- import {Button as ReactBtn, ScrollView} from 'react-native';
3
- import {NavigationContainer} from '@react-navigation/native';
4
- import {createNativeStackNavigator} from '@react-navigation/native-stack';
5
-
6
- // Components
7
- import {ThemeCtx} from './src/context/theme.context';
8
-
9
- import {StaffMemberTheme} from './src/theme/provider';
10
- import {LoadFonts} from './src/theme/font';
11
-
12
- import {AvatarPreview} from './src/components/atoms/avatar/avatar.preview';
13
- import {ButtonPreview} from './src/components/atoms/button/button.preview';
14
- import {PillPreview} from './src/components/atoms/pill/pill.preview';
15
- import {SnackbarPreview} from './src/components/atoms/snackbar/snackbar.preview';
16
- import {TextBubblePreview} from './src/components/atoms/text-bubble/text-bubble.preview';
17
- import {ImageBubblePreview} from './src/components/atoms/image-bubble/image-bubble.preview';
18
- import {TimeTrackerPreview} from './src/components/atoms/time-tracker/time-tracker.preview';
19
- import {CancelLinkPreview} from './src/components/atoms/cancel-link/cancel-link.preview';
20
- import {InfoPreview} from './src/components/atoms/info/info.preview';
21
- import {IconSolidPreview} from './src/icons/solid/solid.preview';
22
- import {IconOutlineWhitePreview} from './src/icons/outline/outline-white.preview';
23
- import {IconOutlineDefaultPreview} from './src/icons/outline/outline-default.preview';
24
- import {IconOutlineGreyPreview} from './src/icons/outline/outline-grey.preview';
25
- import {TagPreview} from './src/components/atoms/tag/tag.preview';
26
- import {FilterTabPreview} from './src/components/atoms/filter-tab/filter-tab.preview';
27
- import {ContactItemPreview} from './src/components/atoms/contact-item/contact-item.preview';
28
- import {SelectListItemPreview} from './src/components/atoms/select-list-item/select-list-item-preview';
29
- import {CheckboxPreview} from './src/components/atoms/checkbox/checkbox.preview';
30
- import {CheckPreview} from './src/components/atoms/check-switch/check-switch.preview';
31
- import {WideButtonPreview} from './src/components/atoms/wide-button/wide-button.preview';
32
- import {PressableIconPreview} from './src/components/atoms/pressable-icon/pressable-icon.preview';
33
- import {FormActionPreview} from './src/components/atoms/form-actions/form-action.preview';
34
- import {CalendarPreview} from './src/components/atoms/calendar/calendar.preview';
35
- import {QuickFilterPreview} from './src/components/atoms/quick-filter/quick-filter.prevriew';
36
- import {TextInputPreview} from './src/components/atoms/text-input/text-input.preview';
37
- import {ChildListItemPreview} from './src/components/atoms/child-list-item/child-list-item.preview';
38
- import {TimeLinePreview} from './src/components/atoms/timeline/timeline.preview';
39
- import {IncrementInputPreview} from './src/components/atoms/increment-input/increment-input.preview';
40
- import {SwipePreview} from './src/components/atoms/swipe/swipe.preview';
41
- import {LogoPreview} from './src/components/atoms/logo/logo.preview';
42
-
43
- const Stack = createNativeStackNavigator();
44
-
45
- const HomeScreen = ({navigation}: {navigation: any}) => {
46
- return (
47
- <ScrollView
48
- style={{
49
- flex: 1,
50
- }}
51
- contentContainerStyle={{
52
- alignItems: 'center',
53
- justifyContent: 'center',
54
- }}
55
- >
56
- <ReactBtn title="Avatar" onPress={() => navigation.push('avatar')} />
57
- <ReactBtn title="Button" onPress={() => navigation.push('button')} />
58
- <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
59
- <ReactBtn title="Snackbar" onPress={() => navigation.push('snackbar')} />
60
- <ReactBtn
61
- title="textInputs"
62
- onPress={() => navigation.push('textInputs')}
63
- />
64
- <ReactBtn
65
- title="textBubble"
66
- onPress={() => navigation.push('textBubble')}
67
- />
68
- <ReactBtn
69
- title="ImageBubble"
70
- onPress={() => navigation.push('image-bubble')}
71
- />
72
- <ReactBtn
73
- title="Pressable Icon"
74
- onPress={() => navigation.push('pressable-icon')}
75
- />
76
- <ReactBtn
77
- title="Select-list-item"
78
- onPress={() => navigation.push('select-list-item')}
79
- />
80
- <ReactBtn
81
- title="Cancel link"
82
- onPress={() => navigation.push('cancel-link')}
83
- />
84
- <ReactBtn
85
- title="ContactItem"
86
- onPress={() => navigation.push('contact-item')}
87
- />
88
- <ReactBtn
89
- title="Check switch"
90
- onPress={() => navigation.push('check-switch')}
91
- />
92
- <ReactBtn
93
- title="Info component"
94
- onPress={() => navigation.push('info')}
95
- />
96
- <ReactBtn
97
- title="child-list-item"
98
- onPress={() => navigation.push('childList')}
99
- />
100
- <ReactBtn
101
- title="Wide Button"
102
- onPress={() => navigation.push('wide-button')}
103
- />
104
- <ReactBtn
105
- title="Icons Default"
106
- onPress={() => navigation.push('icons default')}
107
- />
108
- <ReactBtn
109
- title="Icons grey"
110
- onPress={() => navigation.push('icons grey')}
111
- />
112
- <ReactBtn
113
- title="Icons White"
114
- onPress={() => navigation.push('icons white')}
115
- />
116
- <ReactBtn
117
- title="Icons Solid"
118
- onPress={() => navigation.push('icons solid')}
119
- />
120
- <ReactBtn title="Checkbox" onPress={() => navigation.push('checkbox')} />
121
- <ReactBtn
122
- title="TimeTracker"
123
- onPress={() => navigation.push('time-tracker')}
124
- />
125
- <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
126
- <ReactBtn
127
- title="formAction"
128
- onPress={() => navigation.push('form-action')}
129
- />
130
- <ReactBtn title="Calendar" onPress={() => navigation.push('calendar')} />
131
- <ReactBtn
132
- title="quickFilter"
133
- onPress={() => navigation.push('quick-filter')}
134
- />
135
- <ReactBtn
136
- title="Increment input"
137
- onPress={() => navigation.push('increment-input')}
138
- />
139
- <ReactBtn title="swiper" onPress={() => navigation.push('swiper')} />
140
- <ReactBtn title="logo" onPress={() => navigation.push('logo')} />
141
- </ScrollView>
142
- );
143
- };
144
-
145
- function App() {
146
- const [fontsLoaded] = LoadFonts();
147
-
148
- if (!fontsLoaded) {
149
- return null;
150
- }
151
-
152
- return (
153
- <ThemeCtx.Provider value={StaffMemberTheme}>
154
- <NavigationContainer>
155
- <Stack.Navigator>
156
- <Stack.Screen name="home">
157
- {(props) => <HomeScreen {...props} />}
158
- </Stack.Screen>
159
- <Stack.Screen name="avatar">{() => <AvatarPreview />}</Stack.Screen>
160
- <Stack.Screen name="button">{() => <ButtonPreview />}</Stack.Screen>
161
- <Stack.Screen name="pill">{() => <PillPreview />}</Stack.Screen>
162
- <Stack.Screen name="snackbar">
163
- {() => <SnackbarPreview />}
164
- </Stack.Screen>
165
- <Stack.Screen name="textInputs">
166
- {() => <TextInputPreview />}
167
- </Stack.Screen>
168
- <Stack.Screen name="textBubble">
169
- {() => <TextBubblePreview />}
170
- </Stack.Screen>
171
- <Stack.Screen name="image-bubble">
172
- {() => <ImageBubblePreview />}
173
- </Stack.Screen>
174
- <Stack.Screen name="pressable-icon">
175
- {() => <PressableIconPreview />}
176
- </Stack.Screen>
177
- <Stack.Screen name="cancel-link">
178
- {() => <CancelLinkPreview />}
179
- </Stack.Screen>
180
- <Stack.Screen name="contact-item">
181
- {() => <ContactItemPreview />}
182
- </Stack.Screen>
183
- <Stack.Screen name="wide-button">
184
- {() => <WideButtonPreview />}
185
- </Stack.Screen>
186
- <Stack.Screen name="info">{() => <InfoPreview />}</Stack.Screen>
187
- <Stack.Screen name="check-switch">
188
- {() => <CheckPreview />}
189
- </Stack.Screen>
190
- <Stack.Screen name="icons default">
191
- {() => <IconOutlineDefaultPreview />}
192
- </Stack.Screen>
193
- <Stack.Screen name="icons grey">
194
- {() => <IconOutlineGreyPreview />}
195
- </Stack.Screen>
196
- <Stack.Screen name="icons white">
197
- {() => <IconOutlineWhitePreview />}
198
- </Stack.Screen>
199
- <Stack.Screen name="icons solid">
200
- {() => <IconSolidPreview />}
201
- </Stack.Screen>
202
- <Stack.Screen name="select-list-item">
203
- {() => <SelectListItemPreview />}
204
- </Stack.Screen>
205
- <Stack.Screen name="filter tab">
206
- {() => <FilterTabPreview />}
207
- </Stack.Screen>
208
- <Stack.Screen name="checkbox">
209
- {() => <CheckboxPreview />}
210
- </Stack.Screen>
211
- <Stack.Screen name="time-tracker">
212
- {() => <TimeTrackerPreview />}
213
- </Stack.Screen>
214
- <Stack.Screen name="tag">{() => <TagPreview />}</Stack.Screen>
215
- <Stack.Screen name="form-action">
216
- {() => <FormActionPreview />}
217
- </Stack.Screen>
218
- <Stack.Screen name="calendar">
219
- {() => <CalendarPreview />}
220
- </Stack.Screen>
221
- <Stack.Screen name="quick-filter">
222
- {() => <QuickFilterPreview />}
223
- </Stack.Screen>
224
- <Stack.Screen name="childList">
225
- {() => <ChildListItemPreview />}
226
- </Stack.Screen>
227
- <Stack.Screen name="timeline">
228
- {() => <TimeLinePreview />}
229
- </Stack.Screen>
230
- <Stack.Screen name="increment-input">
231
- {() => <IncrementInputPreview />}
232
- </Stack.Screen>
233
- <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
234
- <Stack.Screen name="logo">{() => <LogoPreview />}</Stack.Screen>
235
- </Stack.Navigator>
236
- </NavigationContainer>
237
- </ThemeCtx.Provider>
238
- );
239
- }
240
-
241
- export default App;
package/app.json DELETED
@@ -1,33 +0,0 @@
1
- {
2
- "expo": {
3
- "name": "Styleguide",
4
- "slug": "Styleguide",
5
- "version": "1.0.0",
6
- "orientation": "portrait",
7
- "icon": "./assets/icon.png",
8
- "userInterfaceStyle": "light",
9
- "splash": {
10
- "image": "./assets/splash.png",
11
- "resizeMode": "contain",
12
- "backgroundColor": "#ffffff"
13
- },
14
- "updates": {
15
- "fallbackToCacheTimeout": 0
16
- },
17
- "assetBundlePatterns": [
18
- "**/*"
19
- ],
20
- "ios": {
21
- "supportsTablet": true
22
- },
23
- "android": {
24
- "adaptiveIcon": {
25
- "foregroundImage": "./assets/adaptive-icon.png",
26
- "backgroundColor": "#FFFFFF"
27
- }
28
- },
29
- "web": {
30
- "favicon": "./assets/favicon.png"
31
- }
32
- }
33
- }