@shoplflow/base 0.1.0 → 0.2.0

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 (10) hide show
  1. package/LICENSE +201 -0
  2. package/dist/emotion.d.d.cts +2 -2
  3. package/dist/emotion.d.d.ts +2 -2
  4. package/dist/index.cjs +6745 -83
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +190 -207
  7. package/dist/index.d.ts +190 -207
  8. package/dist/index.js +6738 -80
  9. package/dist/index.js.map +1 -1
  10. package/package.json +31 -7
package/dist/index.d.ts CHANGED
@@ -1,13 +1,15 @@
1
1
  import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
2
- import React from 'react';
3
-
4
- declare const Button: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
2
+ import * as React from 'react';
3
+ import React__default, { ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, CSSProperties } from 'react';
4
+ import { CustomDomComponent } from 'framer-motion';
5
+ import * as _emotion_styled from '@emotion/styled';
6
+ import * as _emotion_react from '@emotion/react';
5
7
 
6
8
  type DomainType = 'SHOPL' | 'HADA';
7
9
 
8
10
  interface ShoplflowProviderProps {
9
11
  domain?: DomainType;
10
- children: React.ReactNode;
12
+ children: React__default.ReactNode;
11
13
  }
12
14
  declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
13
15
 
@@ -16,210 +18,191 @@ type UseDarkModeProps = {
16
18
  };
17
19
  declare function useDomain({ domain }: UseDarkModeProps): null;
18
20
 
19
- declare const fontWeightRegular = "var(--font-weight-regular)";
20
- declare const fontWeightMedium = "var(--font-weight-medium)";
21
- declare const fontWeightBold = "var(--font-weight-bold)";
22
- declare const borderRadius04 = "var(--border-radius04)";
23
- declare const borderRadius06 = "var(--border-radius06)";
24
- declare const borderRadius08 = "var(--border-radius08)";
25
- declare const borderRadius12 = "var(--border-radius12)";
26
- declare const borderRadius16 = "var(--border-radius16)";
27
- declare const coolgray300 = "var(--coolgray300)";
28
- declare const coolgray200 = "var(--coolgray200)";
29
- declare const coolgray100 = "var(--coolgray100)";
30
- declare const coolgray50 = "var(--coolgray50)";
31
- declare const navy400 = "var(--navy400)";
32
- declare const navy300 = "var(--navy300)";
33
- declare const neutral0 = "var(--neutral0)";
34
- declare const neutral100 = "var(--neutral100)";
35
- declare const neutral150 = "var(--neutral150)";
36
- declare const neutral200 = "var(--neutral200)";
37
- declare const neutral300 = "var(--neutral300)";
38
- declare const neutral350 = "var(--neutral350)";
39
- declare const neutral400 = "var(--neutral400)";
40
- declare const neutral500 = "var(--neutral500)";
41
- declare const neutral600 = "var(--neutral600)";
42
- declare const neutral700 = "var(--neutral700)";
43
- declare const neutral400_5 = "var(--neutral400_5)";
44
- declare const red300 = "var(--red300)";
45
- declare const red200 = "var(--red200)";
46
- declare const red100 = "var(--red100)";
47
- declare const ocean300 = "var(--ocean300)";
48
- declare const ocean200 = "var(--ocean200)";
49
- declare const ocean100 = "var(--ocean100)";
50
- declare const purple400 = "var(--purple400)";
51
- declare const purple300 = "var(--purple300)";
52
- declare const purple100 = "var(--purple100)";
53
- declare const yellow300 = "var(--yellow300)";
54
- declare const yellow200 = "var(--yellow200)";
55
- declare const yellow100 = "var(--yellow100)";
56
- declare const green300 = "var(--green300)";
57
- declare const green200 = "var(--green200)";
58
- declare const green100 = "var(--green100)";
59
- declare const shopl400 = "var(--shopl400)";
60
- declare const shopl300 = "var(--shopl300)";
61
- declare const shopl200 = "var(--shopl200)";
62
- declare const shopl150 = "var(--shopl150)";
63
- declare const shopl100 = "var(--shopl100)";
64
- declare const hada400 = "var(--hada400)";
65
- declare const hada300 = "var(--hada300)";
66
- declare const hada200 = "var(--hada200)";
67
- declare const hada150 = "var(--hada150)";
68
- declare const hada100 = "var(--hada100)";
69
- declare const background = "var(--background)";
70
- declare const primary100 = "var(--primary100)";
71
- declare const primary150 = "var(--primary150)";
72
- declare const primary200 = "var(--primary200)";
73
- declare const primary300 = "var(--primary300)";
74
- declare const primary400 = "var(--primary400)";
75
- declare const spacing04 = "var(--spacing04)";
76
- declare const spacing06 = "var(--spacing06)";
77
- declare const spacing08 = "var(--spacing08)";
78
- declare const spacing12 = "var(--spacing12)";
79
- declare const spacing16 = "var(--spacing16)";
80
- declare const spacing20 = "var(--spacing20)";
81
- declare const spacing24 = "var(--spacing24)";
82
- declare const spacing30 = "var(--spacing30)";
83
- declare const spacing32 = "var(--spacing32)";
84
- declare const spacing40 = "var(--spacing40)";
21
+ declare const fontWeightTokens: {
22
+ fontWeightRegular: string;
23
+ fontWeightMedium: string;
24
+ fontWeightBold: string;
25
+ };
26
+ declare const borderRadiusTokens: {
27
+ borderRadius04: string;
28
+ borderRadius06: string;
29
+ borderRadius08: string;
30
+ borderRadius12: string;
31
+ borderRadius16: string;
32
+ };
33
+ declare const colorTokens: {
34
+ coolgray300: string;
35
+ coolgray200: string;
36
+ coolgray100: string;
37
+ coolgray50: string;
38
+ navy400: string;
39
+ navy300: string;
40
+ neutral0: string;
41
+ neutral100: string;
42
+ neutral150: string;
43
+ neutral200: string;
44
+ neutral300: string;
45
+ neutral350: string;
46
+ neutral400: string;
47
+ neutral500: string;
48
+ neutral600: string;
49
+ neutral700: string;
50
+ neutral400_5: string;
51
+ red300: string;
52
+ red200: string;
53
+ red100: string;
54
+ ocean300: string;
55
+ ocean200: string;
56
+ ocean100: string;
57
+ purple400: string;
58
+ purple300: string;
59
+ purple100: string;
60
+ yellow300: string;
61
+ yellow200: string;
62
+ yellow100: string;
63
+ green300: string;
64
+ green200: string;
65
+ green100: string;
66
+ shopl400: string;
67
+ shopl300: string;
68
+ shopl200: string;
69
+ shopl150: string;
70
+ shopl100: string;
71
+ hada400: string;
72
+ hada300: string;
73
+ hada200: string;
74
+ hada150: string;
75
+ hada100: string;
76
+ background: string;
77
+ primary100: string;
78
+ primary150: string;
79
+ primary200: string;
80
+ primary300: string;
81
+ primary400: string;
82
+ };
83
+ declare const spacingTokens: {
84
+ spacing04: string;
85
+ spacing06: string;
86
+ spacing08: string;
87
+ spacing12: string;
88
+ spacing16: string;
89
+ spacing20: string;
90
+ spacing24: string;
91
+ spacing30: string;
92
+ spacing32: string;
93
+ spacing40: string;
94
+ };
95
+ declare const typographyTokens: {
96
+ heading1_700: string;
97
+ heading1_400: string;
98
+ heading2_700: string;
99
+ heading2_400: string;
100
+ heading3_700: string;
101
+ heading3_400: string;
102
+ title1_700: string;
103
+ title1_400: string;
104
+ title2_700: string;
105
+ title2_500: string;
106
+ title2_400: string;
107
+ body1_700: string;
108
+ body1_500: string;
109
+ body1_400: string;
110
+ body2_700: string;
111
+ body2_500: string;
112
+ body2_400: string;
113
+ body3_400: string;
114
+ body3_500: string;
115
+ caption_400: string;
116
+ };
117
+
118
+ type ColorTokens = keyof typeof colorTokens;
119
+ type SpacingTokens = keyof typeof spacingTokens;
120
+ type BorderRadiusTokens = keyof typeof borderRadiusTokens;
121
+ type FontWeightTokens = keyof typeof fontWeightTokens;
122
+ type TypographyTokens = keyof typeof typographyTokens;
85
123
 
86
- declare const tokens_background: typeof background;
87
- declare const tokens_borderRadius04: typeof borderRadius04;
88
- declare const tokens_borderRadius06: typeof borderRadius06;
89
- declare const tokens_borderRadius08: typeof borderRadius08;
90
- declare const tokens_borderRadius12: typeof borderRadius12;
91
- declare const tokens_borderRadius16: typeof borderRadius16;
92
- declare const tokens_coolgray100: typeof coolgray100;
93
- declare const tokens_coolgray200: typeof coolgray200;
94
- declare const tokens_coolgray300: typeof coolgray300;
95
- declare const tokens_coolgray50: typeof coolgray50;
96
- declare const tokens_fontWeightBold: typeof fontWeightBold;
97
- declare const tokens_fontWeightMedium: typeof fontWeightMedium;
98
- declare const tokens_fontWeightRegular: typeof fontWeightRegular;
99
- declare const tokens_green100: typeof green100;
100
- declare const tokens_green200: typeof green200;
101
- declare const tokens_green300: typeof green300;
102
- declare const tokens_hada100: typeof hada100;
103
- declare const tokens_hada150: typeof hada150;
104
- declare const tokens_hada200: typeof hada200;
105
- declare const tokens_hada300: typeof hada300;
106
- declare const tokens_hada400: typeof hada400;
107
- declare const tokens_navy300: typeof navy300;
108
- declare const tokens_navy400: typeof navy400;
109
- declare const tokens_neutral0: typeof neutral0;
110
- declare const tokens_neutral100: typeof neutral100;
111
- declare const tokens_neutral150: typeof neutral150;
112
- declare const tokens_neutral200: typeof neutral200;
113
- declare const tokens_neutral300: typeof neutral300;
114
- declare const tokens_neutral350: typeof neutral350;
115
- declare const tokens_neutral400: typeof neutral400;
116
- declare const tokens_neutral400_5: typeof neutral400_5;
117
- declare const tokens_neutral500: typeof neutral500;
118
- declare const tokens_neutral600: typeof neutral600;
119
- declare const tokens_neutral700: typeof neutral700;
120
- declare const tokens_ocean100: typeof ocean100;
121
- declare const tokens_ocean200: typeof ocean200;
122
- declare const tokens_ocean300: typeof ocean300;
123
- declare const tokens_primary100: typeof primary100;
124
- declare const tokens_primary150: typeof primary150;
125
- declare const tokens_primary200: typeof primary200;
126
- declare const tokens_primary300: typeof primary300;
127
- declare const tokens_primary400: typeof primary400;
128
- declare const tokens_purple100: typeof purple100;
129
- declare const tokens_purple300: typeof purple300;
130
- declare const tokens_purple400: typeof purple400;
131
- declare const tokens_red100: typeof red100;
132
- declare const tokens_red200: typeof red200;
133
- declare const tokens_red300: typeof red300;
134
- declare const tokens_shopl100: typeof shopl100;
135
- declare const tokens_shopl150: typeof shopl150;
136
- declare const tokens_shopl200: typeof shopl200;
137
- declare const tokens_shopl300: typeof shopl300;
138
- declare const tokens_shopl400: typeof shopl400;
139
- declare const tokens_spacing04: typeof spacing04;
140
- declare const tokens_spacing06: typeof spacing06;
141
- declare const tokens_spacing08: typeof spacing08;
142
- declare const tokens_spacing12: typeof spacing12;
143
- declare const tokens_spacing16: typeof spacing16;
144
- declare const tokens_spacing20: typeof spacing20;
145
- declare const tokens_spacing24: typeof spacing24;
146
- declare const tokens_spacing30: typeof spacing30;
147
- declare const tokens_spacing32: typeof spacing32;
148
- declare const tokens_spacing40: typeof spacing40;
149
- declare const tokens_yellow100: typeof yellow100;
150
- declare const tokens_yellow200: typeof yellow200;
151
- declare const tokens_yellow300: typeof yellow300;
152
- declare namespace tokens {
153
- export {
154
- tokens_background as background,
155
- tokens_borderRadius04 as borderRadius04,
156
- tokens_borderRadius06 as borderRadius06,
157
- tokens_borderRadius08 as borderRadius08,
158
- tokens_borderRadius12 as borderRadius12,
159
- tokens_borderRadius16 as borderRadius16,
160
- tokens_coolgray100 as coolgray100,
161
- tokens_coolgray200 as coolgray200,
162
- tokens_coolgray300 as coolgray300,
163
- tokens_coolgray50 as coolgray50,
164
- tokens_fontWeightBold as fontWeightBold,
165
- tokens_fontWeightMedium as fontWeightMedium,
166
- tokens_fontWeightRegular as fontWeightRegular,
167
- tokens_green100 as green100,
168
- tokens_green200 as green200,
169
- tokens_green300 as green300,
170
- tokens_hada100 as hada100,
171
- tokens_hada150 as hada150,
172
- tokens_hada200 as hada200,
173
- tokens_hada300 as hada300,
174
- tokens_hada400 as hada400,
175
- tokens_navy300 as navy300,
176
- tokens_navy400 as navy400,
177
- tokens_neutral0 as neutral0,
178
- tokens_neutral100 as neutral100,
179
- tokens_neutral150 as neutral150,
180
- tokens_neutral200 as neutral200,
181
- tokens_neutral300 as neutral300,
182
- tokens_neutral350 as neutral350,
183
- tokens_neutral400 as neutral400,
184
- tokens_neutral400_5 as neutral400_5,
185
- tokens_neutral500 as neutral500,
186
- tokens_neutral600 as neutral600,
187
- tokens_neutral700 as neutral700,
188
- tokens_ocean100 as ocean100,
189
- tokens_ocean200 as ocean200,
190
- tokens_ocean300 as ocean300,
191
- tokens_primary100 as primary100,
192
- tokens_primary150 as primary150,
193
- tokens_primary200 as primary200,
194
- tokens_primary300 as primary300,
195
- tokens_primary400 as primary400,
196
- tokens_purple100 as purple100,
197
- tokens_purple300 as purple300,
198
- tokens_purple400 as purple400,
199
- tokens_red100 as red100,
200
- tokens_red200 as red200,
201
- tokens_red300 as red300,
202
- tokens_shopl100 as shopl100,
203
- tokens_shopl150 as shopl150,
204
- tokens_shopl200 as shopl200,
205
- tokens_shopl300 as shopl300,
206
- tokens_shopl400 as shopl400,
207
- tokens_spacing04 as spacing04,
208
- tokens_spacing06 as spacing06,
209
- tokens_spacing08 as spacing08,
210
- tokens_spacing12 as spacing12,
211
- tokens_spacing16 as spacing16,
212
- tokens_spacing20 as spacing20,
213
- tokens_spacing24 as spacing24,
214
- tokens_spacing30 as spacing30,
215
- tokens_spacing32 as spacing32,
216
- tokens_spacing40 as spacing40,
217
- tokens_yellow100 as yellow100,
218
- tokens_yellow200 as yellow200,
219
- tokens_yellow300 as yellow300,
220
- };
124
+ type StringElementType = ElementType & string;
125
+ type HTMLPropsWithOutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
126
+ type RenderConfigProps = {
127
+ /**
128
+ * 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
129
+ *
130
+ * 예를 들어 a tag로 변환한다면 as='a'로 작성해주세요.
131
+ *
132
+ * @see https://emotion.sh/docs/styled#as-prop
133
+ */
134
+ as?: StringElementType;
135
+ };
136
+ interface ChildrenProps<Children = React__default.ReactNode> {
137
+ /**
138
+ * 컴포넌트 내부에 들어갈 children을 설정합니다.
139
+ */
140
+ children?: Children;
141
+ }
142
+
143
+ type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithOutRef<T>;
144
+ type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
145
+ type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithOutRef<T> & StackProps>;
146
+ interface StackProps extends StackOptionProps, ChildrenProps {
147
+ }
148
+ interface StackOptionProps {
149
+ /**
150
+ * 요소들의 align-items 값
151
+ */
152
+ align?: CSSProperties['alignItems'];
153
+ /**
154
+ * 요소들의 justify-content 값
155
+ */
156
+ justify?: CSSProperties['justifyContent'];
157
+ /**
158
+ * 요소들의 flex-direction 값
159
+ * (값: row, column)
160
+ */
161
+ direction?: CSSProperties['flexDirection'];
162
+ /**
163
+ * 요소들 사이의 간격
164
+ */
165
+ spacing?: SpacingTokens;
166
+ /**
167
+ * flex-wrap 설정
168
+ */
169
+ flexWrap?: CSSProperties['flexWrap'];
170
+ /**
171
+ * width 설정
172
+ */
173
+ width?: CSSProperties['width'];
174
+ /**
175
+ * height 설정
176
+ */
177
+ height?: CSSProperties['height'];
178
+ /**
179
+ * flex 설정
180
+ */
181
+ flex?: CSSProperties['flex'];
182
+ /**
183
+ * background 설정
184
+ */
185
+ background?: ColorTokens;
186
+ /**
187
+ * border-radius 설정
188
+ */
189
+ radius?: BorderRadiusTokens;
190
+ }
191
+
192
+ interface StackType extends StackComponentType {
193
+ Vertical: StackComponentType;
194
+ Horizontal: StackComponentType;
195
+ }
196
+ declare const Stack: StackType;
197
+ interface MotionStackType extends MotionStackComponentType {
198
+ Vertical: MotionStackComponentType;
199
+ Horizontal: MotionStackComponentType;
221
200
  }
201
+ declare const MotionStack: MotionStackType;
222
202
 
223
- type ShoplflowTokens = keyof typeof tokens;
203
+ declare const StyledStack: _emotion_styled.StyledComponent<{
204
+ theme?: _emotion_react.Theme | undefined;
205
+ as?: React.ElementType<any> | undefined;
206
+ } & StackOptionProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
224
207
 
225
- export { Button, ShoplflowProvider, ShoplflowProviderProps, ShoplflowTokens, tokens, useDomain };
208
+ export { BorderRadiusTokens, ColorTokens, FontWeightTokens, MotionStack, MotionStackComponentType, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledStack, TypographyTokens, borderRadiusTokens, colorTokens, fontWeightTokens, spacingTokens, typographyTokens, useDomain };