cpk-ui 0.1.3 → 0.1.4

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.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/components/uis/Button/Button.js +5 -3
  3. package/components/uis/Button/Button.stories.tsx +61 -1
  4. package/components/uis/Button/Button.tsx +7 -7
  5. package/components/uis/Typography/Typography.stories.tsx +58 -0
  6. package/package.json +3 -3
  7. package/utils/colors.js +95 -118
  8. package/utils/colors.ts +138 -114
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # CPK-UI
1
+ # cpk-ui
2
2
 
3
3
  React Native UI components for [Expo](https://expo.dev).
4
4
 
package/components/uis/Button/Button.js CHANGED
@@ -114,9 +114,11 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
114
114
  hovered,
115
115
  styles,
116
116
  });
117
- const LoadingView = loadingElement ?? (_jsx(LoadingIndicator, { color: loadingColor || type === 'solid'
118
- ? theme.text.contrast
119
- : theme.text.basic, size: "small" }));
117
+ const LoadingView = loadingElement ?? (_jsx(LoadingIndicator, { color: loadingColor
118
+ ? loadingColor
119
+ : type === 'solid'
120
+ ? theme.text.contrast
121
+ : theme.text.basic, size: "small" }));
120
122
  const renderContainer = useCallback(({ children, loadingView, }) => (_jsxs(ButtonContainer, { disabled: innerDisabled, size: size, style: [
121
123
  hovered && !innerDisabled && compositeStyles.hovered,
122
124
  compositeStyles.container,
package/components/uis/Button/Button.stories.tsx CHANGED
@@ -5,6 +5,7 @@ import {withThemeProvider} from '../../../../.storybook/decorators';
5
5
 
6
6
  import type {ButtonColorType, ButtonSizeType, ButtonType} from './Button';
7
7
  import {Button} from './Button';
8
+ import {ThemeParam} from '../../../utils/theme';
8
9
 
9
10
  const buttonTypes: ButtonType[] = ['outlined', 'solid', 'text'];
10
11
  const buttonSizes: ButtonSizeType[] = ['large', 'medium', 'small'];
@@ -43,7 +44,15 @@ const meta = {
43
44
  options: buttonSizes,
44
45
  },
45
46
  },
46
- decorators: [withThemeProvider],
47
+ decorators: [
48
+ (Story, context) =>
49
+ withThemeProvider(
50
+ Story,
51
+ context,
52
+ // @ts-ignore
53
+ context.args.theme,
54
+ ),
55
+ ],
47
56
  } satisfies Meta<typeof Button>;
48
57
 
49
58
  export default meta;
@@ -79,3 +88,54 @@ export const Danger: Story = {
79
88
  onPress: action('onPress'),
80
89
  },
81
90
  };
91
+
92
+ const disableAllExcept = (allowedField: string) => {
93
+ const argTypes = {
94
+ text: {table: {disable: true}},
95
+ type: {table: {disable: true}},
96
+ color: {table: {disable: true}},
97
+ size: {table: {disable: true}},
98
+ onPress: {table: {disable: true}},
99
+ testID: {table: {disable: true}},
100
+ disabled: {table: {disable: true}},
101
+ loadingElement: {table: {disable: true}},
102
+ borderRadius: {table: {disable: true}},
103
+ startElement: {table: {disable: true}},
104
+ endElement: {table: {disable: true}},
105
+ activeOpacity: {table: {disable: true}},
106
+ touchableHighlightProps: {table: {disable: true}},
107
+ hitSlop: {table: {disable: true}},
108
+ theme: {control: 'object'},
109
+ };
110
+
111
+ if (argTypes[allowedField]) {
112
+ argTypes[allowedField] = {table: {disable: false}};
113
+ }
114
+
115
+ return argTypes;
116
+ };
117
+
118
+ export const CustomColor: Story = {
119
+ args: {
120
+ // @ts-ignore
121
+ theme: {
122
+ light: {
123
+ button: {
124
+ primary: {
125
+ bg: 'red',
126
+ text: 'white',
127
+ },
128
+ },
129
+ },
130
+ dark: {
131
+ button: {
132
+ primary: {
133
+ bg: 'pink',
134
+ text: 'red',
135
+ },
136
+ },
137
+ },
138
+ } as ThemeParam,
139
+ },
140
+ argTypes: disableAllExcept('theme'),
141
+ };
package/components/uis/Button/Button.tsx CHANGED
@@ -236,9 +236,11 @@ export function Button({
236
236
  const LoadingView = loadingElement ?? (
237
237
  <LoadingIndicator
238
238
  color={
239
- loadingColor || type === 'solid'
240
- ? theme.text.contrast
241
- : theme.text.basic
239
+ loadingColor
240
+ ? loadingColor
241
+ : type === 'solid'
242
+ ? theme.text.contrast
243
+ : theme.text.basic
242
244
  }
243
245
  size="small"
244
246
  />
@@ -285,13 +287,11 @@ export function Button({
285
287
  ],
286
288
  );
287
289
 
288
- function resolveStyle<T>(
289
- style: StyleProp<T>
290
- ): T | undefined {
290
+ function resolveStyle<T>(style: StyleProp<T>): T | undefined {
291
291
  if (Array.isArray(style)) {
292
292
  return style.find((s): s is T => !!s);
293
293
  }
294
- return style as T || undefined;
294
+ return (style as T) || undefined;
295
295
  }
296
296
 
297
297
  const viewStyle = resolveStyle<ViewStyle>(compositeStyles.container);
package/components/uis/Typography/Typography.stories.tsx ADDED
@@ -0,0 +1,58 @@
1
+ import type {Meta, StoryObj} from '@storybook/react';
2
+ import {Typography} from './Typography';
3
+ import {withThemeProvider} from '../../../../.storybook/decorators';
4
+ import {ScrollView, View} from 'react-native';
5
+ import {ThemeParam} from '../../../utils/theme';
6
+
7
+ const meta = {
8
+ title: 'Typography',
9
+ component: Typography.Title,
10
+ decorators: [
11
+ (Story, context) =>
12
+ withThemeProvider(
13
+ Story,
14
+ context,
15
+ (context.args.theme as any) || undefined,
16
+ ),
17
+ ],
18
+ } satisfies Meta<typeof Typography.Title>;
19
+
20
+ export default meta;
21
+
22
+ type Story = StoryObj<typeof meta>;
23
+
24
+ export const AllTypography: Story = {
25
+ render: (args) => (
26
+ <ScrollView contentContainerStyle={{padding: 16}}>
27
+ {Object.entries(Typography).map(([key, Component]) => (
28
+ <View key={key} style={{marginBottom: 16}}>
29
+ <Component {...args}>
30
+ {key} {args.children}
31
+ </Component>
32
+ </View>
33
+ ))}
34
+ </ScrollView>
35
+ ),
36
+ args: {
37
+ children: 'Hello world',
38
+ },
39
+ };
40
+
41
+ export const CustomTitle: Story = {
42
+ args: {
43
+ children: 'Custom Color',
44
+ // @ts-ignore
45
+ theme: {
46
+ light: {
47
+ text: {
48
+ basic: 'blue',
49
+ },
50
+ },
51
+ dark: {
52
+ text: {
53
+ basic: 'skyblue',
54
+ },
55
+ },
56
+ } as ThemeParam,
57
+ },
58
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cpk-ui",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "main": "index",
5
5
  "react-native": "index",
6
6
  "module": "index",
@@ -13,9 +13,9 @@
13
13
  "publish:next": "npm publish <package>.tgz --tag next"
14
14
  },
15
15
  "bugs": {
16
- "url": "https://github.com/crossplatformkorea/CPK-UI/issues"
16
+ "url": "https://github.com/crossplatformkorea/cpk-ui/issues"
17
17
  },
18
- "homepage": "https://github.com/crossplatformkorea/CPK-UI#readme",
18
+ "homepage": "https://github.com/crossplatformkorea/cpk-ui#readme",
19
19
  "peerDependencies": {
20
20
  "@emotion/native": ">=11.0.0",
21
21
  "@emotion/react": ">=11.0.0",
package/utils/colors.js CHANGED
@@ -1,124 +1,101 @@
1
- export const light = {
2
- bg: {
3
- basic: "#FFFFFF",
4
- paper: "#EDEDED",
5
- disabled: "#BEBEBE",
6
- },
7
- role: {
8
- primary: "#1B1B1B",
9
- secondary: "#3D8BFF",
10
- accent: "#6BF3C5",
11
- info: "#307EF1",
12
- link: "#A351F4",
13
- success: "#1CD66C",
14
- warning: "#E2B101",
15
- danger: "#F84444",
16
- border: "#CCCCCC",
17
- underlay: "rgba(0, 0, 0, 0.16)",
18
- underlayContrast: "rgba(0, 0, 0, 0.8)",
19
- },
20
- text: {
21
- basic: "#000000",
22
- label: "#4D4D4D",
23
- placeholder: "#787878",
24
- disabled: "#BEBEBE",
25
- validation: "#DA0000",
26
- contrast: "#FFFFFF",
27
- },
28
- button: {
29
- primary: {
30
- bg: "#1B1B1B",
31
- text: "#FFFFFF",
32
- },
33
- secondary: {
34
- bg: "#3D8BFF",
35
- text: "#FFFFFF",
36
- },
37
- success: {
38
- bg: "#1CD66C",
39
- text: "#FFFFFF",
40
- },
41
- danger: {
42
- bg: "#F84444",
43
- text: "#FFFFFF",
44
- },
45
- warning: {
46
- bg: "#E2B101",
47
- text: "#FFFFFF",
48
- },
49
- info: {
50
- bg: "#307EF1",
51
- text: "#FFFFFF",
52
- },
53
- light: {
54
- bg: "#E8E8E8",
55
- text: "#232323",
56
- },
57
- disabled: {
58
- bg: "#EDEDED",
59
- text: "#BEBEBE",
60
- },
61
- },
1
+ const baseColors = {
2
+ success: '#1CD66C',
3
+ warning: '#E2B101',
4
+ danger: '#F84444',
5
+ info: '#307EF1',
6
+ accent: '#6BF3C5',
7
+ link: '#A351F4',
62
8
  };
63
- export const dark = {
64
- bg: {
65
- basic: "#242424",
66
- paper: "#1E1D1D",
67
- disabled: "#474747",
9
+ const buttonColors = {
10
+ light: {
11
+ primary: { bg: '#1B1B1B', text: '#FFFFFF' },
12
+ secondary: { bg: '#3D8BFF', text: '#FFFFFF' },
13
+ success: { bg: '#1CD66C', text: '#FFFFFF' },
14
+ danger: { bg: '#F84444', text: '#FFFFFF' },
15
+ warning: { bg: '#E2B101', text: '#FFFFFF' },
16
+ info: { bg: '#307EF1', text: '#FFFFFF' },
17
+ light: { bg: '#E8E8E8', text: '#232323' },
18
+ disabled: { bg: '#EDEDED', text: '#BEBEBE' },
68
19
  },
69
- role: {
70
- primary: "#FFFFFF",
71
- secondary: "#3D8BFF",
72
- accent: "#6BF3C5",
73
- info: "#2998FF",
74
- link: "#A351F4",
75
- success: "#2FFA86",
76
- warning: "#F4CC3E",
77
- danger: "#FF3C3C",
78
- border: "#363636",
79
- underlay: "rgba(255, 255, 255, 0.16)",
80
- underlayContrast: "rgba(255, 255, 255, 0.8)",
20
+ dark: {
21
+ primary: { bg: '#FFFFFF', text: '#000000' },
22
+ secondary: { bg: '#3D8BFF', text: '#000000' },
23
+ success: { bg: '#2FFA86', text: '#000000' },
24
+ danger: { bg: '#FF3C3C', text: '#000000' },
25
+ warning: { bg: '#F4CC3E', text: '#000000' },
26
+ info: { bg: '#2998FF', text: '#000000' },
27
+ light: { bg: '#313131', text: '#FFFFFF' },
28
+ disabled: { bg: '#292929', text: '#474747' },
81
29
  },
82
- text: {
83
- basic: "#FFFFFF",
84
- label: "#BEBEBE",
85
- placeholder: "#909090",
86
- disabled: "#4D4D4D",
87
- validation: "#FF2C2C",
88
- contrast: "#000000",
30
+ };
31
+ const colors = {
32
+ light: {
33
+ bg: {
34
+ basic: '#FFFFFF',
35
+ paper: '#EDEDED',
36
+ disabled: '#BEBEBE',
37
+ },
38
+ role: {
39
+ primary: '#1B1B1B',
40
+ secondary: '#3D8BFF',
41
+ success: baseColors.success,
42
+ warning: baseColors.warning,
43
+ danger: baseColors.danger,
44
+ info: baseColors.info,
45
+ accent: baseColors.accent,
46
+ link: baseColors.link,
47
+ border: '#CCCCCC',
48
+ underlay: 'rgba(0, 0, 0, 0.16)',
49
+ underlayContrast: 'rgba(0, 0, 0, 0.8)',
50
+ },
51
+ text: {
52
+ basic: '#000000',
53
+ label: '#4D4D4D',
54
+ placeholder: '#787878',
55
+ disabled: '#BEBEBE',
56
+ validation: '#DA0000',
57
+ contrast: '#FFFFFF',
58
+ },
59
+ button: buttonColors.light,
89
60
  },
90
- button: {
91
- primary: {
92
- bg: "#FFFFFF",
93
- text: "#000000",
94
- },
95
- secondary: {
96
- bg: "#3D8BFF",
97
- text: "#000000",
98
- },
99
- success: {
100
- bg: "#2FFA86",
101
- text: "#000000",
102
- },
103
- danger: {
104
- bg: "#FF3C3C",
105
- text: "#000000",
106
- },
107
- warning: {
108
- bg: "#F4CC3E",
109
- text: "#000000",
110
- },
111
- info: {
112
- bg: "#2998FF",
113
- text: "#000000",
114
- },
115
- light: {
116
- bg: "#313131",
117
- text: "#EBEBEB",
118
- },
119
- disabled: {
120
- bg: "#292929",
121
- text: "#474747",
122
- },
61
+ dark: {
62
+ bg: {
63
+ basic: '#242424',
64
+ paper: '#1E1D1D',
65
+ disabled: '#474747',
66
+ },
67
+ role: {
68
+ primary: '#FFFFFF',
69
+ secondary: '#3D8BFF',
70
+ success: '#2FFA86',
71
+ warning: '#F4CC3E',
72
+ danger: '#FF3C3C',
73
+ info: '#2998FF',
74
+ accent: '#4AE3AD',
75
+ link: baseColors.link,
76
+ border: '#363636',
77
+ underlay: 'rgba(255, 255, 255, 0.16)',
78
+ underlayContrast: 'rgba(255, 255, 255, 0.8)',
79
+ },
80
+ text: {
81
+ basic: '#FFFFFF',
82
+ label: '#BEBEBE',
83
+ placeholder: '#909090',
84
+ disabled: '#6D6D6D',
85
+ validation: '#FF2C2C',
86
+ contrast: '#000000',
87
+ },
88
+ button: buttonColors.dark,
123
89
  },
124
90
  };
91
+ const createTheme = (mode) => {
92
+ const themeColors = colors[mode];
93
+ return {
94
+ bg: themeColors.bg,
95
+ role: themeColors.role,
96
+ text: themeColors.text,
97
+ button: themeColors.button,
98
+ };
99
+ };
100
+ export const light = createTheme('light');
101
+ export const dark = createTheme('dark');
package/utils/colors.ts CHANGED
@@ -1,127 +1,151 @@
1
- export const light = {
2
- bg: {
3
- basic: "#FFFFFF",
4
- paper: "#EDEDED",
5
- disabled: "#BEBEBE",
1
+ const baseColors = {
2
+ success: '#1CD66C',
3
+ warning: '#E2B101',
4
+ danger: '#F84444',
5
+ info: '#307EF1',
6
+ accent: '#6BF3C5',
7
+ link: '#A351F4',
8
+ };
9
+
10
+ const buttonColors = {
11
+ light: {
12
+ primary: {bg: '#1B1B1B', text: '#FFFFFF'},
13
+ secondary: {bg: '#3D8BFF', text: '#FFFFFF'},
14
+ success: {bg: '#1CD66C', text: '#FFFFFF'},
15
+ danger: {bg: '#F84444', text: '#FFFFFF'},
16
+ warning: {bg: '#E2B101', text: '#FFFFFF'},
17
+ info: {bg: '#307EF1', text: '#FFFFFF'},
18
+ light: {bg: '#E8E8E8', text: '#232323'},
19
+ disabled: {bg: '#EDEDED', text: '#BEBEBE'},
6
20
  },
7
- role: {
8
- primary: "#1B1B1B",
9
- secondary: "#3D8BFF",
10
- accent: "#6BF3C5",
11
- info: "#307EF1",
12
- link: "#A351F4",
13
- success: "#1CD66C",
14
- warning: "#E2B101",
15
- danger: "#F84444",
16
- border: "#CCCCCC",
17
- underlay: "rgba(0, 0, 0, 0.16)",
18
- underlayContrast: "rgba(0, 0, 0, 0.8)",
21
+ dark: {
22
+ primary: {bg: '#FFFFFF', text: '#000000'},
23
+ secondary: {bg: '#3D8BFF', text: '#000000'},
24
+ success: {bg: '#2FFA86', text: '#000000'},
25
+ danger: {bg: '#FF3C3C', text: '#000000'},
26
+ warning: {bg: '#F4CC3E', text: '#000000'},
27
+ info: {bg: '#2998FF', text: '#000000'},
28
+ light: {bg: '#313131', text: '#FFFFFF'},
29
+ disabled: {bg: '#292929', text: '#474747'},
19
30
  },
20
- text: {
21
- basic: "#000000",
22
- label: "#4D4D4D",
23
- placeholder: "#787878",
24
- disabled: "#BEBEBE",
25
- validation: "#DA0000",
26
- contrast: "#FFFFFF",
31
+ };
32
+
33
+ const colors: {
34
+ light: Partial<ThemeColors>;
35
+ dark: Partial<ThemeColors>;
36
+ } = {
37
+ light: {
38
+ bg: {
39
+ basic: '#FFFFFF',
40
+ paper: '#EDEDED',
41
+ disabled: '#BEBEBE',
42
+ },
43
+ role: {
44
+ primary: '#1B1B1B',
45
+ secondary: '#3D8BFF',
46
+ success: baseColors.success,
47
+ warning: baseColors.warning,
48
+ danger: baseColors.danger,
49
+ info: baseColors.info,
50
+ accent: baseColors.accent,
51
+ link: baseColors.link,
52
+ border: '#CCCCCC',
53
+ underlay: 'rgba(0, 0, 0, 0.16)',
54
+ underlayContrast: 'rgba(0, 0, 0, 0.8)',
55
+ },
56
+ text: {
57
+ basic: '#000000',
58
+ label: '#4D4D4D',
59
+ placeholder: '#787878',
60
+ disabled: '#BEBEBE',
61
+ validation: '#DA0000',
62
+ contrast: '#FFFFFF',
63
+ },
64
+ button: buttonColors.light,
27
65
  },
28
- button: {
29
- primary: {
30
- bg: "#1B1B1B",
31
- text: "#FFFFFF",
32
- },
33
- secondary: {
34
- bg: "#3D8BFF",
35
- text: "#FFFFFF",
36
- },
37
- success: {
38
- bg: "#1CD66C",
39
- text: "#FFFFFF",
40
- },
41
- danger: {
42
- bg: "#F84444",
43
- text: "#FFFFFF",
44
- },
45
- warning: {
46
- bg: "#E2B101",
47
- text: "#FFFFFF",
48
- },
49
- info: {
50
- bg: "#307EF1",
51
- text: "#FFFFFF",
52
- },
53
- light: {
54
- bg: "#E8E8E8",
55
- text: "#232323",
56
- },
57
- disabled: {
58
- bg: "#EDEDED",
59
- text: "#BEBEBE",
60
- },
66
+
67
+ dark: {
68
+ bg: {
69
+ basic: '#242424',
70
+ paper: '#1E1D1D',
71
+ disabled: '#474747',
72
+ },
73
+ role: {
74
+ primary: '#FFFFFF',
75
+ secondary: '#3D8BFF',
76
+ success: '#2FFA86',
77
+ warning: '#F4CC3E',
78
+ danger: '#FF3C3C',
79
+ info: '#2998FF',
80
+ accent: '#4AE3AD',
81
+ link: baseColors.link,
82
+ border: '#363636',
83
+ underlay: 'rgba(255, 255, 255, 0.16)',
84
+ underlayContrast: 'rgba(255, 255, 255, 0.8)',
85
+ },
86
+ text: {
87
+ basic: '#FFFFFF',
88
+ label: '#BEBEBE',
89
+ placeholder: '#909090',
90
+ disabled: '#6D6D6D',
91
+ validation: '#FF2C2C',
92
+ contrast: '#000000',
93
+ },
94
+ button: buttonColors.dark,
61
95
  },
62
96
  };
63
97
 
64
- export const dark: typeof light = {
98
+ type ThemeColors = {
65
99
  bg: {
66
- basic: "#242424",
67
- paper: "#1E1D1D",
68
- disabled: "#474747",
69
- },
100
+ basic: string;
101
+ paper: string;
102
+ disabled: string;
103
+ };
70
104
  role: {
71
- primary: "#FFFFFF",
72
- secondary: "#3D8BFF",
73
- accent: "#6BF3C5",
74
- info: "#2998FF",
75
- link: "#A351F4",
76
- success: "#2FFA86",
77
- warning: "#F4CC3E",
78
- danger: "#FF3C3C",
79
- border: "#363636",
80
- underlay: "rgba(255, 255, 255, 0.16)",
81
- underlayContrast: "rgba(255, 255, 255, 0.8)",
82
- },
105
+ primary: string;
106
+ secondary: string;
107
+ success: string;
108
+ warning: string;
109
+ danger: string;
110
+ info: string;
111
+ accent: string;
112
+ link: string;
113
+ border: string;
114
+ underlay: string;
115
+ underlayContrast: string;
116
+ };
83
117
  text: {
84
- basic: "#FFFFFF",
85
- label: "#BEBEBE",
86
- placeholder: "#909090",
87
- disabled: "#4D4D4D",
88
- validation: "#FF2C2C",
89
- contrast: "#000000",
90
- },
118
+ basic: string;
119
+ label: string;
120
+ placeholder: string;
121
+ disabled: string;
122
+ validation: string;
123
+ contrast: string;
124
+ };
91
125
  button: {
92
- primary: {
93
- bg: "#FFFFFF",
94
- text: "#000000",
95
- },
96
- secondary: {
97
- bg: "#3D8BFF",
98
- text: "#000000",
99
- },
100
- success: {
101
- bg: "#2FFA86",
102
- text: "#000000",
103
- },
104
- danger: {
105
- bg: "#FF3C3C",
106
- text: "#000000",
107
- },
108
- warning: {
109
- bg: "#F4CC3E",
110
- text: "#000000",
111
- },
112
- info: {
113
- bg: "#2998FF",
114
- text: "#000000",
115
- },
116
- light: {
117
- bg: "#313131",
118
- text: "#EBEBEB",
119
- },
120
- disabled: {
121
- bg: "#292929",
122
- text: "#474747",
123
- },
124
- },
126
+ primary: {bg: string; text: string};
127
+ secondary: {bg: string; text: string};
128
+ success: {bg: string; text: string};
129
+ danger: {bg: string; text: string};
130
+ warning: {bg: string; text: string};
131
+ info: {bg: string; text: string};
132
+ light: {bg: string; text: string};
133
+ disabled: {bg: string; text: string};
134
+ };
125
135
  };
126
136
 
137
+ const createTheme = (mode: 'light' | 'dark'): ThemeColors => {
138
+ const themeColors = colors[mode];
139
+
140
+ return {
141
+ bg: themeColors.bg as ThemeColors['bg'],
142
+ role: themeColors.role as ThemeColors['role'],
143
+ text: themeColors.text as ThemeColors['text'],
144
+ button: themeColors.button as ThemeColors['button'],
145
+ };
146
+ };
147
+
148
+ export const light = createTheme('light');
149
+ export const dark = createTheme('dark');
150
+
127
151
  export type Colors = typeof light;