paris 0.2.1 → 0.2.2
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/CHANGELOG.md +6 -0
- package/package.json +6 -1
- package/.changeset/README.md +0 -8
- package/.changeset/config.json +0 -11
- package/.eslintrc.json +0 -22
- package/.github/workflows/publish.yml +0 -54
- package/.husky/pre-commit +0 -2
- package/.idea/inspectionProfiles/Project_Default.xml +0 -7
- package/.idea/jsLibraryMappings.xml +0 -6
- package/.idea/jsLinters/eslint.xml +0 -6
- package/.idea/modules.xml +0 -8
- package/.idea/paris.iml +0 -13
- package/.idea/vcs.xml +0 -6
- package/.idea/watcherTasks.xml +0 -4
- package/.storybook/main.ts +0 -43
- package/.storybook/manager-head.html +0 -16
- package/.storybook/manager.ts +0 -6
- package/.storybook/preview.ts +0 -74
- package/.storybook/themes.ts +0 -30
- package/cat +0 -2
- package/global.d.ts +0 -2
- package/next.config.js +0 -6
- package/public/favicon.ico +0 -0
- package/public/fira/fira_code.css +0 -48
- package/public/fira/woff/FiraCode-Bold.woff +0 -0
- package/public/fira/woff/FiraCode-Light.woff +0 -0
- package/public/fira/woff/FiraCode-Medium.woff +0 -0
- package/public/fira/woff/FiraCode-Regular.woff +0 -0
- package/public/fira/woff/FiraCode-SemiBold.woff +0 -0
- package/public/fira/woff/FiraCode-VF.woff +0 -0
- package/public/fira/woff2/FiraCode-Bold.woff2 +0 -0
- package/public/fira/woff2/FiraCode-Light.woff2 +0 -0
- package/public/fira/woff2/FiraCode-Medium.woff2 +0 -0
- package/public/fira/woff2/FiraCode-Regular.woff2 +0 -0
- package/public/fira/woff2/FiraCode-SemiBold.woff2 +0 -0
- package/public/fira/woff2/FiraCode-VF.woff2 +0 -0
- package/public/graphik/GraphikSS-Black.woff +0 -0
- package/public/graphik/GraphikSS-Black.woff2 +0 -0
- package/public/graphik/GraphikSS-BlackItalic.woff +0 -0
- package/public/graphik/GraphikSS-BlackItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Bold.woff +0 -0
- package/public/graphik/GraphikSS-Bold.woff2 +0 -0
- package/public/graphik/GraphikSS-BoldItalic.woff +0 -0
- package/public/graphik/GraphikSS-BoldItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Extralight.woff +0 -0
- package/public/graphik/GraphikSS-Extralight.woff2 +0 -0
- package/public/graphik/GraphikSS-ExtralightItalic.woff +0 -0
- package/public/graphik/GraphikSS-ExtralightItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Light.woff +0 -0
- package/public/graphik/GraphikSS-Light.woff2 +0 -0
- package/public/graphik/GraphikSS-LightItalic.woff +0 -0
- package/public/graphik/GraphikSS-LightItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Medium.woff +0 -0
- package/public/graphik/GraphikSS-Medium.woff2 +0 -0
- package/public/graphik/GraphikSS-MediumItalic.woff +0 -0
- package/public/graphik/GraphikSS-MediumItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Regular.woff +0 -0
- package/public/graphik/GraphikSS-Regular.woff2 +0 -0
- package/public/graphik/GraphikSS-RegularItalic.woff +0 -0
- package/public/graphik/GraphikSS-RegularItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Semibold.woff +0 -0
- package/public/graphik/GraphikSS-Semibold.woff2 +0 -0
- package/public/graphik/GraphikSS-SemiboldItalic.woff +0 -0
- package/public/graphik/GraphikSS-SemiboldItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Super.woff +0 -0
- package/public/graphik/GraphikSS-Super.woff2 +0 -0
- package/public/graphik/GraphikSS-SuperItalic.woff +0 -0
- package/public/graphik/GraphikSS-SuperItalic.woff2 +0 -0
- package/public/graphik/GraphikSS-Thin.woff +0 -0
- package/public/graphik/GraphikSS-Thin.woff2 +0 -0
- package/public/graphik/GraphikSS-ThinItalic.woff +0 -0
- package/public/graphik/GraphikSS-ThinItalic.woff2 +0 -0
- package/public/graphik/graphik.css +0 -174
- package/public/next.svg +0 -1
- package/public/pte.css +0 -219
- package/public/thirteen.svg +0 -1
- package/public/vercel.svg +0 -1
- package/scripts/createComponent.js +0 -100
- package/scripts/generateEntry.js +0 -35
- package/scripts/text.ts +0 -118
- package/tsconfig.json +0 -27
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
This font software is the property of Commercial Type.
|
|
3
|
-
|
|
4
|
-
You may not modify the font software, use it on another website, or install it on a computer.
|
|
5
|
-
|
|
6
|
-
License information is available at http://commercialtype.com/eula
|
|
7
|
-
For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com
|
|
8
|
-
|
|
9
|
-
Copyright (C) 2022 Schwartzco Inc.
|
|
10
|
-
License: 2203-CJKSFW
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
@font-face {
|
|
15
|
-
font-family: 'Graphik Web';
|
|
16
|
-
src: url('GraphikSS-BlackItalic.woff2') format('woff2'),
|
|
17
|
-
url('GraphikSS-BlackItalic.woff') format('woff');
|
|
18
|
-
font-weight: 900;
|
|
19
|
-
font-style: italic;
|
|
20
|
-
font-stretch: normal;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@font-face {
|
|
24
|
-
font-family: 'Graphik Web';
|
|
25
|
-
src: url('GraphikSS-Black.woff2') format('woff2'),
|
|
26
|
-
url('GraphikSS-Black.woff') format('woff');
|
|
27
|
-
font-weight: 900;
|
|
28
|
-
font-style: normal;
|
|
29
|
-
font-stretch: normal;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@font-face {
|
|
33
|
-
font-family: 'Graphik Web';
|
|
34
|
-
src: url('GraphikSS-BoldItalic.woff2') format('woff2'),
|
|
35
|
-
url('GraphikSS-BoldItalic.woff') format('woff');
|
|
36
|
-
font-weight: 800;
|
|
37
|
-
font-style: italic;
|
|
38
|
-
font-stretch: normal;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@font-face {
|
|
42
|
-
font-family: 'Graphik Web';
|
|
43
|
-
src: url('GraphikSS-Bold.woff2') format('woff2'),
|
|
44
|
-
url('GraphikSS-Bold.woff') format('woff');
|
|
45
|
-
font-weight: 800;
|
|
46
|
-
font-style: normal;
|
|
47
|
-
font-stretch: normal;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@font-face {
|
|
51
|
-
font-family: 'Graphik Web';
|
|
52
|
-
src: url('GraphikSS-SemiboldItalic.woff2') format('woff2'),
|
|
53
|
-
url('GraphikSS-SemiboldItalic.woff') format('woff');
|
|
54
|
-
font-weight: 700;
|
|
55
|
-
font-style: italic;
|
|
56
|
-
font-stretch: normal;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
@font-face {
|
|
60
|
-
font-family: 'Graphik Web';
|
|
61
|
-
src: url('GraphikSS-Semibold.woff2') format('woff2'),
|
|
62
|
-
url('GraphikSS-Semibold.woff') format('woff');
|
|
63
|
-
font-weight: 700;
|
|
64
|
-
font-style: normal;
|
|
65
|
-
font-stretch: normal;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@font-face {
|
|
69
|
-
font-family: 'Graphik Web';
|
|
70
|
-
src: url('GraphikSS-SemiboldItalic.woff2') format('woff2'),
|
|
71
|
-
url('GraphikSS-SemiboldItalic.woff') format('woff');
|
|
72
|
-
font-weight: 600;
|
|
73
|
-
font-style: italic;
|
|
74
|
-
font-stretch: normal;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@font-face {
|
|
78
|
-
font-family: 'Graphik Web';
|
|
79
|
-
src: url('GraphikSS-Semibold.woff2') format('woff2'),
|
|
80
|
-
url('GraphikSS-Semibold.woff') format('woff');
|
|
81
|
-
font-weight: 600;
|
|
82
|
-
font-style: normal;
|
|
83
|
-
font-stretch: normal;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
@font-face {
|
|
87
|
-
font-family: 'Graphik Web';
|
|
88
|
-
src: url('GraphikSS-MediumItalic.woff2') format('woff2'),
|
|
89
|
-
url('GraphikSS-MediumItalic.woff') format('woff');
|
|
90
|
-
font-weight: 500;
|
|
91
|
-
font-style: italic;
|
|
92
|
-
font-stretch: normal;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
@font-face {
|
|
96
|
-
font-family: 'Graphik Web';
|
|
97
|
-
src: url('GraphikSS-Medium.woff2') format('woff2'),
|
|
98
|
-
url('GraphikSS-Medium.woff') format('woff');
|
|
99
|
-
font-weight: 500;
|
|
100
|
-
font-style: normal;
|
|
101
|
-
font-stretch: normal;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
@font-face {
|
|
105
|
-
font-family: 'Graphik Web';
|
|
106
|
-
src: url('GraphikSS-RegularItalic.woff2') format('woff2'),
|
|
107
|
-
url('GraphikSS-RegularItalic.woff') format('woff');
|
|
108
|
-
font-weight: 400;
|
|
109
|
-
font-style: italic;
|
|
110
|
-
font-stretch: normal;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
@font-face {
|
|
114
|
-
font-family: 'Graphik Web';
|
|
115
|
-
src: url('GraphikSS-Regular.woff2') format('woff2'),
|
|
116
|
-
url('GraphikSS-Regular.woff') format('woff');
|
|
117
|
-
font-weight: 400;
|
|
118
|
-
font-style: normal;
|
|
119
|
-
font-stretch: normal;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
@font-face {
|
|
123
|
-
font-family: 'Graphik Web';
|
|
124
|
-
src: url('GraphikSS-LightItalic.woff2') format('woff2'),
|
|
125
|
-
url('GraphikSS-LightItalic.woff') format('woff');
|
|
126
|
-
font-weight: 300;
|
|
127
|
-
font-style: italic;
|
|
128
|
-
font-stretch: normal;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
@font-face {
|
|
132
|
-
font-family: 'Graphik Web';
|
|
133
|
-
src: url('GraphikSS-Light.woff2') format('woff2'),
|
|
134
|
-
url('GraphikSS-Light.woff') format('woff');
|
|
135
|
-
font-weight: 300;
|
|
136
|
-
font-style: normal;
|
|
137
|
-
font-stretch: normal;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
@font-face {
|
|
141
|
-
font-family: 'Graphik Web';
|
|
142
|
-
src: url('GraphikSS-ExtralightItalic.woff2') format('woff2'),
|
|
143
|
-
url('GraphikSS-ExtralightItalic.woff') format('woff');
|
|
144
|
-
font-weight: 200;
|
|
145
|
-
font-style: italic;
|
|
146
|
-
font-stretch: normal;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
@font-face {
|
|
150
|
-
font-family: 'Graphik Web';
|
|
151
|
-
src: url('GraphikSS-Extralight.woff2') format('woff2'),
|
|
152
|
-
url('GraphikSS-Extralight.woff') format('woff');
|
|
153
|
-
font-weight: 200;
|
|
154
|
-
font-style: normal;
|
|
155
|
-
font-stretch: normal;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
@font-face {
|
|
159
|
-
font-family: 'Graphik Web';
|
|
160
|
-
src: url('GraphikSS-ThinItalic.woff2') format('woff2'),
|
|
161
|
-
url('GraphikSS-ThinItalic.woff') format('woff');
|
|
162
|
-
font-weight: 100;
|
|
163
|
-
font-style: italic;
|
|
164
|
-
font-stretch: normal;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
@font-face {
|
|
168
|
-
font-family: 'Graphik Web';
|
|
169
|
-
src: url('GraphikSS-Thin.woff2') format('woff2'),
|
|
170
|
-
url('GraphikSS-Thin.woff') format('woff');
|
|
171
|
-
font-weight: 100;
|
|
172
|
-
font-style: normal;
|
|
173
|
-
font-stretch: normal;
|
|
174
|
-
}
|
package/public/next.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
package/public/pte.css
DELETED
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
/* Theme variables, generated by `pte` */
|
|
2
|
-
/* This is automatically generated. Do not edit directly. */
|
|
3
|
-
|
|
4
|
-
:root {
|
|
5
|
-
--pte-tokens-colors-black: #060606;
|
|
6
|
-
--pte-tokens-colors-white: #ffffff;
|
|
7
|
-
--pte-tokens-colors-teal: #1deecd;
|
|
8
|
-
--pte-tokens-colors-orange: #ff9426;
|
|
9
|
-
--pte-tokens-colors-pink: #fb46be;
|
|
10
|
-
--pte-tokens-colors-red: #fd4d2e;
|
|
11
|
-
--pte-tokens-colors-yellow: #ffc043;
|
|
12
|
-
--pte-tokens-colors-green: #08c94e;
|
|
13
|
-
--pte-tokens-colors-grey1050: #121212;
|
|
14
|
-
--pte-tokens-colors-grey1000: #171717;
|
|
15
|
-
--pte-tokens-colors-grey950: #1f1f1f;
|
|
16
|
-
--pte-tokens-colors-grey900: #252525;
|
|
17
|
-
--pte-tokens-colors-grey800: #2e2e2e;
|
|
18
|
-
--pte-tokens-colors-grey750: #3c3c3c;
|
|
19
|
-
--pte-tokens-colors-grey700: #4a4a4a;
|
|
20
|
-
--pte-tokens-colors-grey600: #545454;
|
|
21
|
-
--pte-tokens-colors-grey500: #757575;
|
|
22
|
-
--pte-tokens-colors-grey400: #afafaf;
|
|
23
|
-
--pte-tokens-colors-grey300: #c9c9c9;
|
|
24
|
-
--pte-tokens-colors-grey200: #e2e2e2;
|
|
25
|
-
--pte-tokens-colors-grey100: #eeeeee;
|
|
26
|
-
--pte-tokens-colors-grey50: #f6f6f6;
|
|
27
|
-
--pte-tokens-colors-teal600: #18b199;
|
|
28
|
-
--pte-tokens-colors-teal500: #1ad4b6;
|
|
29
|
-
--pte-tokens-colors-teal400: #1deecd;
|
|
30
|
-
--pte-tokens-colors-teal300: #8ef7e6;
|
|
31
|
-
--pte-tokens-colors-teal200: #d9fcf7;
|
|
32
|
-
--pte-tokens-colors-teal100: #ecfefb;
|
|
33
|
-
--pte-tokens-colors-red700: #331611;
|
|
34
|
-
--pte-tokens-colors-red600: #541a0f;
|
|
35
|
-
--pte-tokens-colors-red500: #a9331f;
|
|
36
|
-
--pte-tokens-colors-red400: #fd4d2e;
|
|
37
|
-
--pte-tokens-colors-red300: #fea697;
|
|
38
|
-
--pte-tokens-colors-red200: #ffe1dc;
|
|
39
|
-
--pte-tokens-colors-red100: #fff0ee;
|
|
40
|
-
--pte-tokens-colors-yellow600: #554016;
|
|
41
|
-
--pte-tokens-colors-yellow500: #aa802d;
|
|
42
|
-
--pte-tokens-colors-yellow450: #eba417;
|
|
43
|
-
--pte-tokens-colors-yellow400: #ffc043;
|
|
44
|
-
--pte-tokens-colors-yellow300: #ffe0a1;
|
|
45
|
-
--pte-tokens-colors-yellow200: #fff5e0;
|
|
46
|
-
--pte-tokens-colors-yellow100: #fff8e8;
|
|
47
|
-
--pte-tokens-colors-green700: #063717;
|
|
48
|
-
--pte-tokens-colors-green600: #0a4820;
|
|
49
|
-
--pte-tokens-colors-green500: #148f41;
|
|
50
|
-
--pte-tokens-colors-green400: #08c94e;
|
|
51
|
-
--pte-tokens-colors-green300: #8febb0;
|
|
52
|
-
--pte-tokens-colors-green200: #daf8e5;
|
|
53
|
-
--pte-tokens-colors-green100: #edfcf2;
|
|
54
|
-
--pte-tokens-colors-gradientTeal: linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%);
|
|
55
|
-
--pte-tokens-colors-gradientOrange: linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%);
|
|
56
|
-
--pte-tokens-colors-gradientPink: linear-gradient(90deg, #FF4BED 0%, #F7418D 100%);
|
|
57
|
-
--pte-colors-black: #060606;
|
|
58
|
-
--pte-colors-white: #ffffff;
|
|
59
|
-
--pte-colors-accent: #1deecd;
|
|
60
|
-
--pte-colors-negative: #fd4d2e;
|
|
61
|
-
--pte-colors-warning: #ffc043;
|
|
62
|
-
--pte-colors-positive: #08c94e;
|
|
63
|
-
--pte-colors-contentPrimary: #121212;
|
|
64
|
-
--pte-colors-contentSecondary: #545454;
|
|
65
|
-
--pte-colors-contentTertiary: #757575;
|
|
66
|
-
--pte-colors-contentDisabled: #afafaf;
|
|
67
|
-
--pte-colors-contentAccent: #1deecd;
|
|
68
|
-
--pte-colors-contentNegative: #fd4d2e;
|
|
69
|
-
--pte-colors-contentWarning: #ffc043;
|
|
70
|
-
--pte-colors-contentPositive: #08c94e;
|
|
71
|
-
--pte-colors-contentInversePrimary: #ffffff;
|
|
72
|
-
--pte-colors-contentInverseSecondary: #e2e2e2;
|
|
73
|
-
--pte-colors-contentInverseTertiary: #afafaf;
|
|
74
|
-
--pte-colors-contentInverseDisabled: #757575;
|
|
75
|
-
--pte-colors-backgroundSidebar: #060606;
|
|
76
|
-
--pte-colors-backgroundPrimary: #ffffff;
|
|
77
|
-
--pte-colors-backgroundSecondary: #f6f6f6;
|
|
78
|
-
--pte-colors-backgroundTertiary: #eeeeee;
|
|
79
|
-
--pte-colors-backgroundAccent: #ecfefb;
|
|
80
|
-
--pte-colors-backgroundNegative: #fff0ee;
|
|
81
|
-
--pte-colors-backgroundWarning: #fff8e8;
|
|
82
|
-
--pte-colors-backgroundPositive: #edfcf2;
|
|
83
|
-
--pte-colors-backgroundInverseSidebar: #121212;
|
|
84
|
-
--pte-colors-backgroundInversePrimary: #060606;
|
|
85
|
-
--pte-colors-backgroundInverseSecondary: #252525;
|
|
86
|
-
--pte-colors-backgroundInverseTertiary: #2e2e2e;
|
|
87
|
-
--pte-colors-backgroundInverseNegative: #331611;
|
|
88
|
-
--pte-colors-backgroundInversePositive: #063717;
|
|
89
|
-
--pte-colors-backgroundOverlayLight: rgba(255, 255, 255, 0.07);
|
|
90
|
-
--pte-colors-backgroundOverlayXLight: rgba(255, 255, 255, 0.1);
|
|
91
|
-
--pte-colors-backgroundOverlayGrey: rgba(175, 175, 175, 0.8);
|
|
92
|
-
--pte-colors-backgroundOverlayTeal: rgba(29, 238, 205, 0.1);
|
|
93
|
-
--pte-colors-borderOpaque: #e2e2e2;
|
|
94
|
-
--pte-colors-borderSelected: #757575;
|
|
95
|
-
--pte-colors-borderAccent: #1deecd;
|
|
96
|
-
--pte-colors-borderNegative: #fd4d2e;
|
|
97
|
-
--pte-colors-borderWarning: #ffc043;
|
|
98
|
-
--pte-colors-borderPositive: #08c94e;
|
|
99
|
-
--pte-colors-borderInverseOpaque: #3c3c3c;
|
|
100
|
-
--pte-colors-borderInverseSelected: #e2e2e2;
|
|
101
|
-
--pte-typography-fontFamily: "Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
|
|
102
|
-
--pte-typography-boldFontWeight: 500;
|
|
103
|
-
--pte-typography-italicLetterSpacing: -0.01em;
|
|
104
|
-
--pte-typography-styles-displayLarge-fontStyle: normal;
|
|
105
|
-
--pte-typography-styles-displayLarge-letterSpacing: -0.01em;
|
|
106
|
-
--pte-typography-styles-displayLarge-fontWeight: 600;
|
|
107
|
-
--pte-typography-styles-displayLarge-textTransform: none;
|
|
108
|
-
--pte-typography-styles-displayLarge-fontSize: 72px;
|
|
109
|
-
--pte-typography-styles-displayLarge-lineHeight: 86px;
|
|
110
|
-
--pte-typography-styles-displayMedium-fontStyle: normal;
|
|
111
|
-
--pte-typography-styles-displayMedium-letterSpacing: -0.01em;
|
|
112
|
-
--pte-typography-styles-displayMedium-fontWeight: 600;
|
|
113
|
-
--pte-typography-styles-displayMedium-textTransform: none;
|
|
114
|
-
--pte-typography-styles-displayMedium-fontSize: 52px;
|
|
115
|
-
--pte-typography-styles-displayMedium-lineHeight: 62px;
|
|
116
|
-
--pte-typography-styles-displaySmall-fontStyle: normal;
|
|
117
|
-
--pte-typography-styles-displaySmall-letterSpacing: -0.01em;
|
|
118
|
-
--pte-typography-styles-displaySmall-fontWeight: 600;
|
|
119
|
-
--pte-typography-styles-displaySmall-textTransform: none;
|
|
120
|
-
--pte-typography-styles-displaySmall-fontSize: 34px;
|
|
121
|
-
--pte-typography-styles-displaySmall-lineHeight: 41px;
|
|
122
|
-
--pte-typography-styles-headingLarge-fontStyle: normal;
|
|
123
|
-
--pte-typography-styles-headingLarge-letterSpacing: normal;
|
|
124
|
-
--pte-typography-styles-headingLarge-fontWeight: 600;
|
|
125
|
-
--pte-typography-styles-headingLarge-textTransform: none;
|
|
126
|
-
--pte-typography-styles-headingLarge-fontSize: 32px;
|
|
127
|
-
--pte-typography-styles-headingLarge-lineHeight: 38px;
|
|
128
|
-
--pte-typography-styles-headingMedium-fontStyle: normal;
|
|
129
|
-
--pte-typography-styles-headingMedium-letterSpacing: normal;
|
|
130
|
-
--pte-typography-styles-headingMedium-fontWeight: 600;
|
|
131
|
-
--pte-typography-styles-headingMedium-textTransform: none;
|
|
132
|
-
--pte-typography-styles-headingMedium-fontSize: 28px;
|
|
133
|
-
--pte-typography-styles-headingMedium-lineHeight: 34px;
|
|
134
|
-
--pte-typography-styles-headingSmall-fontStyle: normal;
|
|
135
|
-
--pte-typography-styles-headingSmall-letterSpacing: normal;
|
|
136
|
-
--pte-typography-styles-headingSmall-fontWeight: 600;
|
|
137
|
-
--pte-typography-styles-headingSmall-textTransform: none;
|
|
138
|
-
--pte-typography-styles-headingSmall-fontSize: 24px;
|
|
139
|
-
--pte-typography-styles-headingSmall-lineHeight: 29px;
|
|
140
|
-
--pte-typography-styles-headingXSmall-fontStyle: normal;
|
|
141
|
-
--pte-typography-styles-headingXSmall-letterSpacing: normal;
|
|
142
|
-
--pte-typography-styles-headingXSmall-fontWeight: 600;
|
|
143
|
-
--pte-typography-styles-headingXSmall-textTransform: none;
|
|
144
|
-
--pte-typography-styles-headingXSmall-fontSize: 20px;
|
|
145
|
-
--pte-typography-styles-headingXSmall-lineHeight: 24px;
|
|
146
|
-
--pte-typography-styles-headingXXSmall-fontStyle: normal;
|
|
147
|
-
--pte-typography-styles-headingXXSmall-letterSpacing: normal;
|
|
148
|
-
--pte-typography-styles-headingXXSmall-fontWeight: 600;
|
|
149
|
-
--pte-typography-styles-headingXXSmall-textTransform: none;
|
|
150
|
-
--pte-typography-styles-headingXXSmall-fontSize: 18px;
|
|
151
|
-
--pte-typography-styles-headingXXSmall-lineHeight: 22px;
|
|
152
|
-
--pte-typography-styles-labelXLarge-fontStyle: normal;
|
|
153
|
-
--pte-typography-styles-labelXLarge-letterSpacing: 0.1em;
|
|
154
|
-
--pte-typography-styles-labelXLarge-fontWeight: 600;
|
|
155
|
-
--pte-typography-styles-labelXLarge-textTransform: uppercase;
|
|
156
|
-
--pte-typography-styles-labelXLarge-fontSize: 18px;
|
|
157
|
-
--pte-typography-styles-labelXLarge-lineHeight: 22px;
|
|
158
|
-
--pte-typography-styles-labelLarge-fontStyle: normal;
|
|
159
|
-
--pte-typography-styles-labelLarge-letterSpacing: 0.1em;
|
|
160
|
-
--pte-typography-styles-labelLarge-fontWeight: 600;
|
|
161
|
-
--pte-typography-styles-labelLarge-textTransform: uppercase;
|
|
162
|
-
--pte-typography-styles-labelLarge-fontSize: 16px;
|
|
163
|
-
--pte-typography-styles-labelLarge-lineHeight: 19px;
|
|
164
|
-
--pte-typography-styles-labelMedium-fontStyle: normal;
|
|
165
|
-
--pte-typography-styles-labelMedium-letterSpacing: 0.1em;
|
|
166
|
-
--pte-typography-styles-labelMedium-fontWeight: 600;
|
|
167
|
-
--pte-typography-styles-labelMedium-textTransform: uppercase;
|
|
168
|
-
--pte-typography-styles-labelMedium-fontSize: 14px;
|
|
169
|
-
--pte-typography-styles-labelMedium-lineHeight: 17px;
|
|
170
|
-
--pte-typography-styles-labelSmall-fontStyle: normal;
|
|
171
|
-
--pte-typography-styles-labelSmall-letterSpacing: 0.1em;
|
|
172
|
-
--pte-typography-styles-labelSmall-fontWeight: 600;
|
|
173
|
-
--pte-typography-styles-labelSmall-textTransform: uppercase;
|
|
174
|
-
--pte-typography-styles-labelSmall-fontSize: 12px;
|
|
175
|
-
--pte-typography-styles-labelSmall-lineHeight: 14px;
|
|
176
|
-
--pte-typography-styles-labelXSmall-fontStyle: normal;
|
|
177
|
-
--pte-typography-styles-labelXSmall-letterSpacing: 0.1em;
|
|
178
|
-
--pte-typography-styles-labelXSmall-fontWeight: 600;
|
|
179
|
-
--pte-typography-styles-labelXSmall-textTransform: uppercase;
|
|
180
|
-
--pte-typography-styles-labelXSmall-fontSize: 10px;
|
|
181
|
-
--pte-typography-styles-labelXSmall-lineHeight: 12px;
|
|
182
|
-
--pte-typography-styles-paragraphLarge-fontStyle: normal;
|
|
183
|
-
--pte-typography-styles-paragraphLarge-letterSpacing: normal;
|
|
184
|
-
--pte-typography-styles-paragraphLarge-fontWeight: 400;
|
|
185
|
-
--pte-typography-styles-paragraphLarge-textTransform: none;
|
|
186
|
-
--pte-typography-styles-paragraphLarge-fontSize: 18px;
|
|
187
|
-
--pte-typography-styles-paragraphLarge-lineHeight: 150%;
|
|
188
|
-
--pte-typography-styles-paragraphMedium-fontStyle: normal;
|
|
189
|
-
--pte-typography-styles-paragraphMedium-letterSpacing: normal;
|
|
190
|
-
--pte-typography-styles-paragraphMedium-fontWeight: 400;
|
|
191
|
-
--pte-typography-styles-paragraphMedium-textTransform: none;
|
|
192
|
-
--pte-typography-styles-paragraphMedium-fontSize: 16px;
|
|
193
|
-
--pte-typography-styles-paragraphMedium-lineHeight: 150%;
|
|
194
|
-
--pte-typography-styles-paragraphSmall-fontStyle: normal;
|
|
195
|
-
--pte-typography-styles-paragraphSmall-letterSpacing: normal;
|
|
196
|
-
--pte-typography-styles-paragraphSmall-fontWeight: 400;
|
|
197
|
-
--pte-typography-styles-paragraphSmall-textTransform: none;
|
|
198
|
-
--pte-typography-styles-paragraphSmall-fontSize: 14px;
|
|
199
|
-
--pte-typography-styles-paragraphSmall-lineHeight: 150%;
|
|
200
|
-
--pte-typography-styles-paragraphXSmall-fontStyle: normal;
|
|
201
|
-
--pte-typography-styles-paragraphXSmall-letterSpacing: normal;
|
|
202
|
-
--pte-typography-styles-paragraphXSmall-fontWeight: 400;
|
|
203
|
-
--pte-typography-styles-paragraphXSmall-textTransform: none;
|
|
204
|
-
--pte-typography-styles-paragraphXSmall-fontSize: 12px;
|
|
205
|
-
--pte-typography-styles-paragraphXSmall-lineHeight: 150%;
|
|
206
|
-
--pte-typography-styles-paragraphXXSmall-fontStyle: normal;
|
|
207
|
-
--pte-typography-styles-paragraphXXSmall-letterSpacing: normal;
|
|
208
|
-
--pte-typography-styles-paragraphXXSmall-fontWeight: 400;
|
|
209
|
-
--pte-typography-styles-paragraphXXSmall-textTransform: none;
|
|
210
|
-
--pte-typography-styles-paragraphXXSmall-fontSize: 10px;
|
|
211
|
-
--pte-typography-styles-paragraphXXSmall-lineHeight: 150%;
|
|
212
|
-
--pte-borders-radius-pill: 1000px;
|
|
213
|
-
--pte-borders-radius-circle: 100%;
|
|
214
|
-
--pte-borders-radius-rectangle: 0px;
|
|
215
|
-
--pte-borders-radius-rounded: 8px;
|
|
216
|
-
--pte-borders-radius-roundedSmall: 4px;
|
|
217
|
-
--pte-borders-radius-roundedLarge: 12px;
|
|
218
|
-
--pte-animations-interaction: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
|
|
219
|
-
}
|
package/public/thirteen.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>
|
package/public/vercel.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
-
const fs = require('fs');
|
|
3
|
-
const path = require('path');
|
|
4
|
-
|
|
5
|
-
if (!process.argv[2]) {
|
|
6
|
-
console.error('❌ Please provide a component name, e.g. pnpm create:component Button');
|
|
7
|
-
process.exit(1);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const componentNameInput = process.argv[2];
|
|
11
|
-
|
|
12
|
-
if (!/[A-Za-z]+/.test(componentNameInput)) {
|
|
13
|
-
console.error('❌ Please provide a alphabet only component name in CamelCase, e.g. pnpm create:component Button');
|
|
14
|
-
process.exit(1);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Capitalize the first letter of the component name
|
|
18
|
-
const componentName = componentNameInput.charAt(0).toUpperCase() + componentNameInput.slice(1);
|
|
19
|
-
|
|
20
|
-
const baseDir = path.resolve(process.cwd());
|
|
21
|
-
const componentDirectory = `${baseDir}/src/stories/${componentName.toLocaleLowerCase()}`;
|
|
22
|
-
|
|
23
|
-
const componentFile = `${componentDirectory}/${componentName}.tsx`;
|
|
24
|
-
const cssModuleFile = `${componentDirectory}/${componentName}.module.scss`;
|
|
25
|
-
const storyFile = `${componentDirectory}/${componentName}.stories.ts`;
|
|
26
|
-
const indexFile = `${componentDirectory}/index.ts`;
|
|
27
|
-
|
|
28
|
-
const componentCode = `import type { FC } from 'react';
|
|
29
|
-
import styles from './${componentName}.module.scss';
|
|
30
|
-
|
|
31
|
-
export type ${componentName}Props = {
|
|
32
|
-
/** The contents of the ${componentName}. */
|
|
33
|
-
children?: string;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export const ${componentName}: FC<${componentName}Props> = ({ children }) => (
|
|
37
|
-
<div className={styles.content}>
|
|
38
|
-
<p>{children || 'Replace this area with your component.'}</p>
|
|
39
|
-
</div>
|
|
40
|
-
);
|
|
41
|
-
`;
|
|
42
|
-
|
|
43
|
-
const indexCode = `export * from './${componentName}';
|
|
44
|
-
`;
|
|
45
|
-
|
|
46
|
-
const cssModuleCode = `.content {
|
|
47
|
-
background-color: pink;
|
|
48
|
-
color: white;
|
|
49
|
-
height: 2rem;
|
|
50
|
-
}
|
|
51
|
-
`;
|
|
52
|
-
|
|
53
|
-
const storyCode = `import type { Meta, StoryObj } from '@storybook/react';
|
|
54
|
-
import { ${componentName} } from './${componentName}';
|
|
55
|
-
|
|
56
|
-
const meta: Meta<typeof ${componentName}> = {
|
|
57
|
-
title: 'Uncategorized/${componentName}',
|
|
58
|
-
component: ${componentName},
|
|
59
|
-
tags: ['autodocs'],
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export default meta;
|
|
63
|
-
type Story = StoryObj<typeof ${componentName}>;
|
|
64
|
-
|
|
65
|
-
export const Default: Story = {
|
|
66
|
-
args: {
|
|
67
|
-
children: 'Hello world! This is a new ${componentName} component.',
|
|
68
|
-
},
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
export const Secondary: Story = {
|
|
72
|
-
args: {
|
|
73
|
-
children: 'Hello world! This is a secondary component.',
|
|
74
|
-
},
|
|
75
|
-
};
|
|
76
|
-
`;
|
|
77
|
-
|
|
78
|
-
const run = async () => {
|
|
79
|
-
const componentExists = await fs.promises
|
|
80
|
-
.access(indexFile)
|
|
81
|
-
.then(() => true)
|
|
82
|
-
.catch(() => false);
|
|
83
|
-
|
|
84
|
-
if (componentExists) {
|
|
85
|
-
throw new Error(`❌ Component ${componentName} already exists.`);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
const success = await fs.promises.mkdir(componentDirectory)
|
|
89
|
-
.then(() => Promise.all([
|
|
90
|
-
fs.promises.writeFile(componentFile, componentCode, { encoding: 'utf8' }),
|
|
91
|
-
fs.promises.writeFile(cssModuleFile, cssModuleCode, { encoding: 'utf8' }),
|
|
92
|
-
fs.promises.writeFile(storyFile, storyCode, { encoding: 'utf8' }),
|
|
93
|
-
fs.promises.writeFile(indexFile, indexCode, { encoding: 'utf8' }),
|
|
94
|
-
]))
|
|
95
|
-
.then(() => `✅ Component ${componentName} created!`);
|
|
96
|
-
|
|
97
|
-
return success;
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
run().then(console.log).catch(console.error);
|
package/scripts/generateEntry.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
2
|
-
const path = require('path');
|
|
3
|
-
const fs = require('fs');
|
|
4
|
-
|
|
5
|
-
const baseDir = path.resolve(process.cwd());
|
|
6
|
-
|
|
7
|
-
const componentDirectory = `${baseDir}/src/stories`;
|
|
8
|
-
|
|
9
|
-
// Directories to intentionally ignore
|
|
10
|
-
const ignoreDirectories = [
|
|
11
|
-
'assets',
|
|
12
|
-
];
|
|
13
|
-
|
|
14
|
-
const run = async () => {
|
|
15
|
-
// Iterate through the directory and get a list of subdirectories
|
|
16
|
-
const subDirectories = fs
|
|
17
|
-
.readdirSync(componentDirectory, { withFileTypes: true })
|
|
18
|
-
.filter((dirent) => dirent.isDirectory())
|
|
19
|
-
.map((dirent) => dirent.name)
|
|
20
|
-
.filter((directory) => !ignoreDirectories.includes(directory));
|
|
21
|
-
|
|
22
|
-
// Generate entry point file
|
|
23
|
-
const entryPointFile = `${baseDir}/index.ts`;
|
|
24
|
-
const entryPointCode = subDirectories
|
|
25
|
-
.map((subDirectory) => `export * from './src/stories/${subDirectory}';`)
|
|
26
|
-
.join('\n')
|
|
27
|
-
.concat('\n');
|
|
28
|
-
|
|
29
|
-
// Write the entry point file
|
|
30
|
-
await fs.promises.writeFile(entryPointFile, entryPointCode, { encoding: 'utf8' });
|
|
31
|
-
|
|
32
|
-
return '✅ Entry point file generated.';
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
run().then(console.log).catch(console.error);
|
package/scripts/text.ts
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env ts-node --esm
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @file Generates CSS modules and Storybook stories for typography classes.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import fs from 'fs/promises';
|
|
8
|
-
import * as cp from 'child_process';
|
|
9
|
-
import jss from 'jss';
|
|
10
|
-
import preset from 'jss-preset-default';
|
|
11
|
-
import type { StoryObj } from '@storybook/react';
|
|
12
|
-
import { pascalCase } from 'change-case';
|
|
13
|
-
import type { FontDefinition, Theme } from '../src/stories/theme';
|
|
14
|
-
import { theme, pvar, LightTheme } from '../src/stories/theme';
|
|
15
|
-
import type { Text } from '../src/stories/text';
|
|
16
|
-
|
|
17
|
-
jss.setup({
|
|
18
|
-
...preset(),
|
|
19
|
-
createGenerateId: () => (rule) => rule.key,
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Generates a CSS module with all the typography classes.
|
|
24
|
-
*/
|
|
25
|
-
export const text = async () => {
|
|
26
|
-
const styles = Object.fromEntries(
|
|
27
|
-
(Object.entries(theme.typography.styles) as Array<[keyof Theme['typography']['styles'], FontDefinition]>)
|
|
28
|
-
.map(([fontClass, value]) => [
|
|
29
|
-
fontClass,
|
|
30
|
-
Object.fromEntries(
|
|
31
|
-
(Object.keys(value) as Array<keyof FontDefinition>).map((attr) => [
|
|
32
|
-
attr,
|
|
33
|
-
pvar(`typography.styles.${fontClass}.${attr}`),
|
|
34
|
-
]),
|
|
35
|
-
),
|
|
36
|
-
]),
|
|
37
|
-
);
|
|
38
|
-
// const { styles } = theme.typography;
|
|
39
|
-
const css = `/* Auto-generated with \`pnpm generate:text\` on ${new Date().toString()} */\n/* Do not edit manually; instead, edit the \`generateTextClasses\` function in \`scripts/text.ts\` and run \`pnpm generate:text -c\`. */\n\n${jss.createStyleSheet(styles).toString()}`;
|
|
40
|
-
await fs.writeFile('src/stories/text/Typography.module.css', css
|
|
41
|
-
// Add a newline after each class
|
|
42
|
-
.replaceAll('}', '}\n'));
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Generates Storybook stories for each typography class.
|
|
47
|
-
*/
|
|
48
|
-
export const generateTextStories = async () => {
|
|
49
|
-
const stories: Array<[string, StoryObj<typeof Text>]> = Object.keys(LightTheme.typography.styles)
|
|
50
|
-
.map((style) => ([
|
|
51
|
-
style,
|
|
52
|
-
{
|
|
53
|
-
args: {
|
|
54
|
-
children: 'In an alleyway, drinking champagne',
|
|
55
|
-
kind: style,
|
|
56
|
-
},
|
|
57
|
-
} as StoryObj<typeof Text>,
|
|
58
|
-
]));
|
|
59
|
-
|
|
60
|
-
// Retrieve current stories
|
|
61
|
-
const currentStories = await fs.readFile('src/stories/text/Text.stories.ts', 'utf-8');
|
|
62
|
-
|
|
63
|
-
// Look for `// @auto-generated-start` and `// @auto-generated-end`
|
|
64
|
-
const start = currentStories.indexOf('// @auto-generated-start');
|
|
65
|
-
const end = currentStories.indexOf('// @auto-generated-end');
|
|
66
|
-
|
|
67
|
-
// Generate the new stories
|
|
68
|
-
const out = stories.map((story) => `export const ${pascalCase(story[0] as string).replace('Xx', 'XX')}: Story = ${JSON.stringify(story[1], null, 4)};`).join('\n\n');
|
|
69
|
-
|
|
70
|
-
// If the start and end tags are found, replace the content between them
|
|
71
|
-
if (start !== -1 && end !== -1) {
|
|
72
|
-
const newStories = `${currentStories.slice(0, start + '// @auto-generated-start\n\n'.length)}${
|
|
73
|
-
out
|
|
74
|
-
}\n\n${
|
|
75
|
-
currentStories.slice(end)}`;
|
|
76
|
-
await fs.writeFile('src/stories/text/Text.stories.ts', newStories);
|
|
77
|
-
} else {
|
|
78
|
-
// Otherwise, append the new stories to the end of the file and add the start and end tags
|
|
79
|
-
const newStories = `${currentStories
|
|
80
|
-
}\n\n// @auto-generated-start\n\n${
|
|
81
|
-
out
|
|
82
|
-
}\n\n// @auto-generated-end`;
|
|
83
|
-
await fs.writeFile('src/stories/text/Text.stories.ts', newStories);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// const storyFile = stories.map((story) => `export const ${pascalCase(story.storyName as string)}: Story = ${JSON.stringify(story, null, 4)};`).join('\n\n');
|
|
87
|
-
// await fs.writeFile('src/stories/text/Text.generated-stories.ts', storyFile);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
(async function main() {
|
|
91
|
-
let argReceived = false;
|
|
92
|
-
if (process.argv.includes('--stories') || process.argv.includes('-s')) {
|
|
93
|
-
const startS = Date.now();
|
|
94
|
-
argReceived = true;
|
|
95
|
-
await generateTextStories();
|
|
96
|
-
try {
|
|
97
|
-
cp.execSync('eslint --fix src/stories/text/Text.stories.ts');
|
|
98
|
-
} catch (e: any) {
|
|
99
|
-
console.error('❌ Failed to lint generated stories.');
|
|
100
|
-
if (e?.stdout) {
|
|
101
|
-
console.error(e?.stdout?.toString());
|
|
102
|
-
}
|
|
103
|
-
process.exit(1);
|
|
104
|
-
}
|
|
105
|
-
console.info(`✅ Successfully generated stories in ${Date.now() - startS}ms`);
|
|
106
|
-
}
|
|
107
|
-
if (process.argv.includes('--classes') || process.argv.includes('-c')) {
|
|
108
|
-
const startC = Date.now();
|
|
109
|
-
argReceived = true;
|
|
110
|
-
await text();
|
|
111
|
-
console.info(`✅ Successfully generated classes in ${Date.now() - startC}ms`);
|
|
112
|
-
}
|
|
113
|
-
if (!argReceived) {
|
|
114
|
-
console.error('❌ No arguments received. Please specify either --stories, --classes, or both.');
|
|
115
|
-
process.exit(1);
|
|
116
|
-
}
|
|
117
|
-
process.exit(0);
|
|
118
|
-
}());
|