@transferwise/neptune-css 0.0.0-experimental-be20fcc → 0.0.0-experimental-48c38c1
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/dist/index.d.ts +2123 -0
- package/dist/index.js +2147 -0
- package/package.json +6 -1
- package/scripts/generate-index.ts.mjs +46 -0
- package/scripts/neptune-css-metadata.mjs +245 -0
- package/src/index.ts +2124 -0
package/package.json
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/neptune-css",
|
|
3
3
|
"description": "Neptune CSS library",
|
|
4
|
-
"version": "0.0.0-experimental-
|
|
4
|
+
"version": "0.0.0-experimental-48c38c1",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
5
7
|
"license": "MIT",
|
|
6
8
|
"repository": {
|
|
7
9
|
"type": "git",
|
|
@@ -28,6 +30,8 @@
|
|
|
28
30
|
"devDependencies": {
|
|
29
31
|
"modern-normalize": "^2.0.0",
|
|
30
32
|
"yargs": "^17.1.1",
|
|
33
|
+
"extract-from-css": "^0.4.4",
|
|
34
|
+
"camelcase": "^7.0.1",
|
|
31
35
|
"@transferwise/less-config": "3.0.6"
|
|
32
36
|
},
|
|
33
37
|
"publishConfig": {
|
|
@@ -40,6 +44,7 @@
|
|
|
40
44
|
"build:compile-less": "gulp compileLess --src='src/less'",
|
|
41
45
|
"build:copy-props": "gulp copyPropsAndVars --src='src/props' --dest='dist/props'",
|
|
42
46
|
"build:copy-vars": "gulp copyPropsAndVars --src='src/variables' --dest='dist/less'",
|
|
47
|
+
"build:types": "node ./scripts/generate-index.ts.mjs && prettier --find-config-path --write src/index.ts && tsc",
|
|
43
48
|
"dev": "npm-run-all --parallel dev:*",
|
|
44
49
|
"dev:less": "gulp watchLess --src='src/less/**'",
|
|
45
50
|
"dev:props": "gulp watchPropsAndVars --src='src/props'",
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* eslint-disable unicorn/no-unused-properties */
|
|
2
|
+
import fs from 'fs';
|
|
3
|
+
|
|
4
|
+
import camelCase from 'camelcase';
|
|
5
|
+
import lib from 'extract-from-css';
|
|
6
|
+
|
|
7
|
+
import { comments, excluded } from './neptune-css-metadata.mjs';
|
|
8
|
+
|
|
9
|
+
const neptuneCssCode = fs.readFileSync('dist/css/neptune.css', 'utf-8');
|
|
10
|
+
|
|
11
|
+
const classes = lib.extractClasses(neptuneCssCode);
|
|
12
|
+
|
|
13
|
+
const cssClassCleanUp = [...new Set(classes.filter((cssClass) => !excluded.includes(cssClass)))];
|
|
14
|
+
|
|
15
|
+
const indexTs = generateTs(cssClassCleanUp);
|
|
16
|
+
fs.writeFileSync(`./src/index.ts`, indexTs);
|
|
17
|
+
|
|
18
|
+
function generateTs(cssClasses) {
|
|
19
|
+
const exportCssClasses = cssClasses
|
|
20
|
+
.map((cssClass) => {
|
|
21
|
+
// eslint-disable-next-line unicorn/prevent-abbreviations
|
|
22
|
+
const jsDoc = comments[cssClass] ? `${comments[cssClass]}\n` : '';
|
|
23
|
+
return `${jsDoc}export const ${camelCase(cssClass)} = '${cssClass}';`;
|
|
24
|
+
})
|
|
25
|
+
.join('\n')
|
|
26
|
+
.concat('\n');
|
|
27
|
+
|
|
28
|
+
const defaultExport = cssClasses.map((cssClass) => {
|
|
29
|
+
const cssClassCamelCase = camelCase(cssClass);
|
|
30
|
+
// eslint-disable-next-line unicorn/prevent-abbreviations
|
|
31
|
+
const jsDoc = comments[cssClass] ? `${comments[cssClass]}\n` : '';
|
|
32
|
+
|
|
33
|
+
return `\n${jsDoc}${
|
|
34
|
+
cssClass.includes('-') || cssClass.includes('_')
|
|
35
|
+
? `[${cssClassCamelCase}]: ${cssClassCamelCase}`
|
|
36
|
+
: `${cssClassCamelCase}`
|
|
37
|
+
}`;
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
return `/* eslint-disable unicorn/prevent-abbreviations */
|
|
41
|
+
${exportCssClasses}
|
|
42
|
+
|
|
43
|
+
export default {
|
|
44
|
+
${defaultExport}
|
|
45
|
+
};`;
|
|
46
|
+
}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
export const comments = {
|
|
2
|
+
'form-control': '/** @deprecated use `<Input />` component instead */',
|
|
3
|
+
'form-control-placeholder': '/** @deprecated use `<Input />` component instead */',
|
|
4
|
+
'title-1':
|
|
5
|
+
'/** @deprecated use `<Title type={Typography.TITLE_SCREEN}>...</Title>` or `.np-text-title-screen` */',
|
|
6
|
+
'title-2':
|
|
7
|
+
'/** @deprecated use `<Title type={Typography.TITLE_SECTION}>...</Title>` or `.np-text-title-section` */',
|
|
8
|
+
'title-3':
|
|
9
|
+
'/** @deprecated use `<Title type={Typography.TITLE_SUBSECTION}>...</Title>` or `.np-text-title-subsection` */',
|
|
10
|
+
'title-4':
|
|
11
|
+
'/** @deprecated use `<Title type={Typography.TITLE_BODY}>...</Title>` or `.np-text-title-body` */',
|
|
12
|
+
'title-5': '/** @deprecated use `<Title>...</Title>` or `.np-text-title-group` */',
|
|
13
|
+
h1: '/** @deprecated use `<Title type={Typography.TITLE_SCREEN}>...</Title>` or `.np-text-title-screen` */',
|
|
14
|
+
h2: '/** @deprecated use `<Title type={Typography.TITLE_SECTION}>...</Title>` or `.np-text-title-section` */',
|
|
15
|
+
h3: '/** @deprecated use `<Title type={Typography.TITLE_SUBSECTION}>...</Title>` or `.np-text-title-subsection` */',
|
|
16
|
+
h4: '/** @deprecated use `<Title type={Typography.TITLE_BODY}>...</Title>` or `.np-text-title-body` */',
|
|
17
|
+
h5: '/** @deprecated use `<Title>...</Title>` or `.np-text-title-group` */',
|
|
18
|
+
h6: '/** @deprecated use `<Title>...</Title>` or `.np-text-title-group` */',
|
|
19
|
+
'display-1':
|
|
20
|
+
'/** @deprecated use `<Display type={Typography.DISPLAY_EXTRA_LARGE}>..</Display>` or `.np-text-display-extra-large` instead */',
|
|
21
|
+
'display-2':
|
|
22
|
+
'/** @deprecated use `<Display type={Typography.DISPLAY_LARGE}>..</Display>` or `.np-text-display-large` instead */',
|
|
23
|
+
'display-3':
|
|
24
|
+
'/** @deprecated use `<Display type={Typography.DISPLAY_MEDIUM}>..</Display>` or `.np-text-display-medium` instead */',
|
|
25
|
+
'display-4':
|
|
26
|
+
'/** @deprecated use `<Display type={Typography.DISPLAY_SMALL}>..</Display>` or `.np-text-display-small` instead */',
|
|
27
|
+
'display-5':
|
|
28
|
+
'/** @deprecated use `<Display type={Typography.DISPLAY_SMALL}>..</Display>` or `.np-text-display-small` instead */',
|
|
29
|
+
'body-1':
|
|
30
|
+
'/** @deprecated use `<Body type={Typography.BODY_LARGE}>...</Body>` or `.np-text-body-large` */',
|
|
31
|
+
'body-2': '/** @deprecated use `<Body>...</Body>` or `.np-text-body-default` */',
|
|
32
|
+
'body-3': '/** @deprecated use `<Body>...</Body>` or `.np-text-body-default` */',
|
|
33
|
+
label: '/** @deprecated this CSS class is redundant use `<Label />` */',
|
|
34
|
+
'control-label': '/** @deprecated use `<Label />` instead */',
|
|
35
|
+
value: '/** @deprecated this CSS class is redundant */',
|
|
36
|
+
small: '/** @deprecated use `<Body>...</Body>` or `.np-text-body-default` instead */',
|
|
37
|
+
lead: '/** @deprecated use `<Title type={Typography.TITLE_BODY}>...</Title>` or `.np-text-title-body` */',
|
|
38
|
+
'control-1': '/** @deprecated use `.np-text-body-large-bold` + `.text-info` */',
|
|
39
|
+
'control-2': '/** @deprecated use `.np-text-body-default-bold` + `.text-info` */',
|
|
40
|
+
circle: '/** @deprecated Use `<Avatar />` instead */',
|
|
41
|
+
'circle-sm': '/** @deprecated Use `<Avatar />` instead */',
|
|
42
|
+
'circle-xs': '/** @deprecated Use `<Avatar />` instead */',
|
|
43
|
+
'circle-md': '/** @deprecated Use `<Avatar />` instead */',
|
|
44
|
+
'circle-lg': '/** @deprecated Use `<Avatar />` instead */',
|
|
45
|
+
'circle-inverse': '/** @deprecated Use `<Avatar />` instead */',
|
|
46
|
+
'circle-responsive': '/** @deprecated Use `<Avatar />` instead */',
|
|
47
|
+
btn: '/** @deprecated use `<Button />` component instead */',
|
|
48
|
+
'np-btn': '/** @deprecated use `<Button />` component instead */',
|
|
49
|
+
'np-theme-navy':
|
|
50
|
+
'/** @deprecated navy theme is part of old brand use `.np-theme-personal` instead */',
|
|
51
|
+
'np-theme-light': '/** @deprecated this is part of old brand use `.np-theme-personal` instead */',
|
|
52
|
+
'bg-primary': `/** @deprecated \`.bg-primary\` use \`.bg-elevated\` or \`<ThemeProvider theme="forest-green">\` instead */`,
|
|
53
|
+
section: '/** @deprecated use `<Section />` component instead */',
|
|
54
|
+
'colored-dot': '/** @deprecated no longer use dot in titles */',
|
|
55
|
+
fade: '/** @deprecated use `<Dimmer />` instead */',
|
|
56
|
+
alert: '/** @deprecated use `<Alert />` instead */',
|
|
57
|
+
alert__message: '/** @deprecated use `<Alert />` instead */',
|
|
58
|
+
alert__icon: '/** @deprecated use `<Alert />` instead */',
|
|
59
|
+
'alert-danger': '/** @deprecated use `<Alert />` instead */',
|
|
60
|
+
'alert-focus': '/** @deprecated use `<Alert />` instead */',
|
|
61
|
+
'alert-info': '/** @deprecated use `<Alert />` instead */',
|
|
62
|
+
'alert-success': '/** @deprecated use `<Alert />` instead */',
|
|
63
|
+
'alert-warning': '/** @deprecated use `<Alert />` instead */',
|
|
64
|
+
'alert-positive': '/** @deprecated use `<Alert />` instead */',
|
|
65
|
+
'alert-link': '/** @deprecated use `<Alert />` instead */',
|
|
66
|
+
'alert-neutral': '/** @deprecated use `<Alert />` instead */',
|
|
67
|
+
'alert-negative': '/** @deprecated use `<Alert />` instead */',
|
|
68
|
+
'tw-select': '/** @deprecated this CSS class is for angular `tw-select` component */',
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Classes that we exclude from types:
|
|
73
|
+
* - actually never meant to be part of neptune-css (usually classes for components e.g `.typeahead__input-container`, `.np-radio__avatar`)
|
|
74
|
+
* - noise / trash
|
|
75
|
+
*/
|
|
76
|
+
export const excluded = [
|
|
77
|
+
'rotate-90',
|
|
78
|
+
'default',
|
|
79
|
+
'in',
|
|
80
|
+
'ios-click',
|
|
81
|
+
'np-link',
|
|
82
|
+
'navbar-background--inverse',
|
|
83
|
+
'font-italic',
|
|
84
|
+
'top',
|
|
85
|
+
'left',
|
|
86
|
+
'right',
|
|
87
|
+
'bottom',
|
|
88
|
+
'tw-chevron',
|
|
89
|
+
'chevron-color',
|
|
90
|
+
'chevron',
|
|
91
|
+
'accordion-item',
|
|
92
|
+
'decision',
|
|
93
|
+
'close',
|
|
94
|
+
'desktop',
|
|
95
|
+
'mobile',
|
|
96
|
+
'bg',
|
|
97
|
+
'nav',
|
|
98
|
+
'nav-divider',
|
|
99
|
+
'nav-inverse',
|
|
100
|
+
'nav-tabs',
|
|
101
|
+
'nav-justified',
|
|
102
|
+
'nav-tabs-justified',
|
|
103
|
+
'navbar-collapse',
|
|
104
|
+
'navbar-static-top',
|
|
105
|
+
'navbar-fixed-top',
|
|
106
|
+
'navbar-text',
|
|
107
|
+
'navbar-title',
|
|
108
|
+
'navbar-brand',
|
|
109
|
+
'navbar-toggle',
|
|
110
|
+
'icon-bar',
|
|
111
|
+
'navbar-form',
|
|
112
|
+
'navbar-right',
|
|
113
|
+
'navbar-btn',
|
|
114
|
+
'navbar-default',
|
|
115
|
+
'navbar-link',
|
|
116
|
+
'navbar-inverse',
|
|
117
|
+
'tab-content',
|
|
118
|
+
'tab-pane',
|
|
119
|
+
'nav-pills',
|
|
120
|
+
'nav-stacked',
|
|
121
|
+
'navbar-nav',
|
|
122
|
+
'navbar-fixed-bottom',
|
|
123
|
+
'active',
|
|
124
|
+
'np-dropdown-toggle',
|
|
125
|
+
'critical-comms--cta',
|
|
126
|
+
'typeahead__input-container',
|
|
127
|
+
'input-group-addon--search',
|
|
128
|
+
'np-option',
|
|
129
|
+
'decision__title',
|
|
130
|
+
'decision__content',
|
|
131
|
+
'decision-complex',
|
|
132
|
+
'np-upload-input',
|
|
133
|
+
'collapse',
|
|
134
|
+
'collapsing',
|
|
135
|
+
'colored-dot--green',
|
|
136
|
+
'checkbox',
|
|
137
|
+
'radio',
|
|
138
|
+
'icon',
|
|
139
|
+
'focus',
|
|
140
|
+
'btn-image',
|
|
141
|
+
'btn-input-inverse',
|
|
142
|
+
'dropup',
|
|
143
|
+
'label-default',
|
|
144
|
+
'open',
|
|
145
|
+
'bg--dark',
|
|
146
|
+
'bg--light',
|
|
147
|
+
'modal',
|
|
148
|
+
'anchor',
|
|
149
|
+
'np-theme-dark',
|
|
150
|
+
'np-personal--forest-green',
|
|
151
|
+
'np-personal--bright-green',
|
|
152
|
+
'error-required',
|
|
153
|
+
'error-pattern',
|
|
154
|
+
'error-minlength',
|
|
155
|
+
'error-maxlength',
|
|
156
|
+
'error-min',
|
|
157
|
+
'error-max',
|
|
158
|
+
'error-async',
|
|
159
|
+
'error-number',
|
|
160
|
+
'error-date',
|
|
161
|
+
'error-time',
|
|
162
|
+
'error-datetime',
|
|
163
|
+
'error-email',
|
|
164
|
+
'error-url',
|
|
165
|
+
'error-week',
|
|
166
|
+
'error-month',
|
|
167
|
+
'error-datetimelocal',
|
|
168
|
+
'error-messages',
|
|
169
|
+
'ng-invalid-required',
|
|
170
|
+
'ng-invalid-pattern',
|
|
171
|
+
'ng-invalid-minlength',
|
|
172
|
+
'ng-invalid-maxlength',
|
|
173
|
+
'ng-invalid-min',
|
|
174
|
+
'ng-invalid-max',
|
|
175
|
+
'ng-invalid-async',
|
|
176
|
+
'ng-invalid-number',
|
|
177
|
+
'ng-invalid-date',
|
|
178
|
+
'ng-invalid-time',
|
|
179
|
+
'ng-invalid-datetime',
|
|
180
|
+
'ng-invalid-email',
|
|
181
|
+
'ng-invalid-url',
|
|
182
|
+
'ng-invalid-week',
|
|
183
|
+
'ng-invalid-month',
|
|
184
|
+
'ng-invalid-datetimelocal',
|
|
185
|
+
'tw-checkbox-button',
|
|
186
|
+
'tw-radio-button',
|
|
187
|
+
'tw-checkbox-check',
|
|
188
|
+
'checked',
|
|
189
|
+
'tw-radio-check',
|
|
190
|
+
'np-checkbox',
|
|
191
|
+
'np-radio',
|
|
192
|
+
'np-checkbox-button',
|
|
193
|
+
'np-radio-button',
|
|
194
|
+
'np-checkbox__text',
|
|
195
|
+
'np-radio__text',
|
|
196
|
+
'np-radio__avatar',
|
|
197
|
+
'checkbox-lg',
|
|
198
|
+
'radio-lg',
|
|
199
|
+
'tw-icon-plus',
|
|
200
|
+
'fast-flag',
|
|
201
|
+
'flag',
|
|
202
|
+
'logo-text',
|
|
203
|
+
'cover',
|
|
204
|
+
'profile-name',
|
|
205
|
+
'jumbotron-image-adjacent-to-navbar',
|
|
206
|
+
'jumbotron',
|
|
207
|
+
'jumbotron-image-inverse',
|
|
208
|
+
'jumbotron-image',
|
|
209
|
+
'navbar-subtitle',
|
|
210
|
+
'navbar-logo',
|
|
211
|
+
'nav-toolbar',
|
|
212
|
+
'simple-nav',
|
|
213
|
+
'navbar-header',
|
|
214
|
+
'tw-public-navigation-item-content__icon',
|
|
215
|
+
'tw-public-navigation-item-content__text',
|
|
216
|
+
'pager',
|
|
217
|
+
'tw-dropdown-item--clickable',
|
|
218
|
+
'tw-dropdown-item--divider',
|
|
219
|
+
'tw-dropdown-item--focused',
|
|
220
|
+
'tw-dropdown-item',
|
|
221
|
+
'modal-open',
|
|
222
|
+
'modal-dialog',
|
|
223
|
+
'modal-content',
|
|
224
|
+
'modal-backdrop',
|
|
225
|
+
'modal-header',
|
|
226
|
+
'modal-title',
|
|
227
|
+
'modal-body',
|
|
228
|
+
'modal-footer',
|
|
229
|
+
'modal-scrollbar-measure',
|
|
230
|
+
'nav-justified-2-p-x',
|
|
231
|
+
'nav-justified-3-p-x',
|
|
232
|
+
'nav-justified-4-p-x',
|
|
233
|
+
'nav-justified-5-p-x',
|
|
234
|
+
'nav-justified-6-p-x',
|
|
235
|
+
'nav-justified-7-p-x',
|
|
236
|
+
'nav-justified-8-p-x',
|
|
237
|
+
'navbar-title-link',
|
|
238
|
+
'navbar-collapse-flatten',
|
|
239
|
+
'navbar-left',
|
|
240
|
+
'navbar-collapse-with-panel',
|
|
241
|
+
'navbar-collapse-panel',
|
|
242
|
+
'nav-toolbar--compact',
|
|
243
|
+
'subnav',
|
|
244
|
+
'subnav-menu',
|
|
245
|
+
];
|