@scalepad/ui 0.1.1 → 0.2.1
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/README.md +264 -28
- package/package.json +150 -36
- package/scripts/verify-consumption.mjs +275 -0
- package/src/ThemeProvider.tsx +52 -4
- package/src/components/Anchor/Anchor.css.ts +1 -1
- package/src/components/ColorInput/ColorInput.figma.tsx +32 -0
- package/src/components/ColorInput/ColorInput.tsx +94 -0
- package/src/components/ColorInput/index.ts +6 -0
- package/src/components/IconButton/IconButton.tsx +51 -0
- package/src/components/Select/Select.css.ts +8 -3
- package/src/components/Select/Select.tsx +11 -1
- package/src/components/SubNavigation/SubNavigation.css.ts +20 -0
- package/src/index.ts +8 -0
- package/src/mantine.ts +2 -0
- package/src/theme/themeContract.css.ts +27 -3
- package/src/tokens/color-types.ts +28 -5
- package/src/tokens/colors.ts +52 -10
- package/src/tokens/index.ts +6 -2
- package/src/tokens/semantic-colors.ts +177 -73
- package/src/tokens/semantic-tokens-css.ts +34 -12
- package/src/tokens/shadows.ts +30 -6
- package/src/tokens/text-styles.ts +31 -2
- package/src/vite.d.ts +37 -0
- package/src/vite.js +120 -0
package/README.md
CHANGED
|
@@ -4,51 +4,219 @@ ScalePad's LM Design System for React. A Mantine 9 + vanilla-extract component l
|
|
|
4
4
|
|
|
5
5
|
> **Private package.** This package is published under the `@scalepad` org with `access=restricted`. To install it, your npm user must be a member of the `@scalepad` npm org (or you must use an automation token scoped to the `@scalepad` scope in your CI).
|
|
6
6
|
|
|
7
|
+
## TL;DR for Vite users
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# 1. Install @scalepad/ui plus the small set of peers it shares with your app.
|
|
11
|
+
# Mantine ships inside @scalepad/ui — do NOT install it yourself.
|
|
12
|
+
pnpm add @scalepad/ui @scalepad/ui-utils \
|
|
13
|
+
@tanstack/react-query@^5.0.0 @tanstack/react-table@^8.21.3 \
|
|
14
|
+
@vanilla-extract/css@^1.16.2 dayjs@^1.11.19 \
|
|
15
|
+
lucide-react@^0.469.0 react@^19.0.0 react-dom@^19.0.0
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
// 2. vite.config.ts — one plugin, zero further config.
|
|
20
|
+
import react from '@vitejs/plugin-react';
|
|
21
|
+
import { defineConfig } from 'vite';
|
|
22
|
+
import { scalepadUi } from '@scalepad/ui/vite';
|
|
23
|
+
|
|
24
|
+
export default defineConfig({
|
|
25
|
+
plugins: [react(), scalepadUi()],
|
|
26
|
+
});
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// 3. main.tsx
|
|
31
|
+
import '@mantine/core/styles.css'; // brought in transitively via @scalepad/ui
|
|
32
|
+
import { ThemeProvider } from '@scalepad/ui';
|
|
33
|
+
|
|
34
|
+
export function Root() {
|
|
35
|
+
return (
|
|
36
|
+
<ThemeProvider>
|
|
37
|
+
<App />
|
|
38
|
+
</ThemeProvider>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
That's it. No Mantine install. No Vite `optimizeDeps` config. No version-pin chess.
|
|
44
|
+
|
|
45
|
+
## What's in the box
|
|
46
|
+
|
|
47
|
+
| Package | Where it lives | Notes |
|
|
48
|
+
|---|---|---|
|
|
49
|
+
| `@mantine/core`, `dates`, `hooks`, `notifications`, `schedule`, `tiptap`, `vanilla-extract` | Bundled into `@scalepad/ui` as runtime dependencies. | You don't install these. They come in transitively. |
|
|
50
|
+
| `recharts` | Same. | Loaded only when you import from `@scalepad/ui/charts`. |
|
|
51
|
+
| `clsx`, `react-intersection-observer` | Same. | Internal. |
|
|
52
|
+
| `@vanilla-extract/vite-plugin` | Same. | The `scalepadUi()` Vite preset uses it; you don't install it. |
|
|
53
|
+
|
|
7
54
|
## Install
|
|
8
55
|
|
|
9
56
|
```bash
|
|
10
|
-
npm install @scalepad/ui @scalepad/ui-utils
|
|
11
|
-
# or
|
|
12
57
|
pnpm add @scalepad/ui @scalepad/ui-utils
|
|
13
58
|
# or
|
|
59
|
+
npm install @scalepad/ui @scalepad/ui-utils
|
|
60
|
+
# or
|
|
14
61
|
yarn add @scalepad/ui @scalepad/ui-utils
|
|
15
62
|
```
|
|
16
63
|
|
|
17
|
-
|
|
64
|
+
### Required peers
|
|
65
|
+
|
|
66
|
+
These are packages your application code uses directly, so they MUST be the same instance shared with `@scalepad/ui`. Install them all in one go with the TL;DR command above.
|
|
67
|
+
|
|
68
|
+
| Package | Pin | Why it stays a peer |
|
|
69
|
+
|---|---|---|
|
|
70
|
+
| `react` / `react-dom` | `^19.0.0` | React reconciler is a singleton. React 18 is not supported. |
|
|
71
|
+
| `@tanstack/react-query` | `^5.0.0` | The `QueryClient` you create and provide must be the same instance `@scalepad/ui` uses. |
|
|
72
|
+
| `@tanstack/react-table` | `^8.21.3` | You define column / row types using its exports. |
|
|
73
|
+
| `@vanilla-extract/css` | `^1.16.2` | Your own `.css.ts` files import `style` / `globalStyle` directly. |
|
|
74
|
+
| `dayjs` | `^1.11.19` | Date helpers from `@scalepad/ui-utils` extend dayjs plugins on the shared instance. |
|
|
75
|
+
| `lucide-react` | `^0.469.0` | You import icons (`<Plus />`, `<Search />`, etc.) directly in your features. |
|
|
76
|
+
|
|
77
|
+
### Optional features (rich-text editor)
|
|
78
|
+
|
|
79
|
+
The rich-text editor (`RichTextEditor`, `RichTextView`, `RichTextInline`, `EditableRichText`, `SlashRichTextEditor`) leans on Tiptap. Tiptap is kept as **optional peers** (not bundled into `@scalepad/ui`) so external adopters can pin their own Tiptap version if they need to. Notifications (`Notifications`, `showSuccessToast`, `showErrorToast`) ship in `@mantine/notifications`, which is bundled into `@scalepad/ui` — you don't install it separately.
|
|
80
|
+
|
|
81
|
+
If you use any of the rich-text components, install the full Tiptap set:
|
|
18
82
|
|
|
19
83
|
```bash
|
|
20
|
-
pnpm add @
|
|
21
|
-
@
|
|
22
|
-
@
|
|
23
|
-
@
|
|
24
|
-
@tiptap/extension-
|
|
25
|
-
@tiptap/extension-
|
|
26
|
-
@tiptap/extension-
|
|
27
|
-
@tiptap/
|
|
28
|
-
@
|
|
29
|
-
|
|
30
|
-
|
|
84
|
+
pnpm add @tiptap/core@^3.22.3 @tiptap/extensions@^3.22.3 \
|
|
85
|
+
@tiptap/pm@^3.22.3 @tiptap/react@^3.22.3 \
|
|
86
|
+
@tiptap/starter-kit@^3.22.3 @tiptap/suggestion@^3.22.3 \
|
|
87
|
+
@tiptap/extension-bubble-menu@^3.22.3 @tiptap/extension-image@^3.22.3 \
|
|
88
|
+
@tiptap/extension-link@^3.22.3 @tiptap/extension-placeholder@^3.22.3 \
|
|
89
|
+
@tiptap/extension-underline@^3.22.3 \
|
|
90
|
+
@tiptap/extension-blockquote@^3.22.3 @tiptap/extension-bold@^3.22.3 \
|
|
91
|
+
@tiptap/extension-bullet-list@^3.22.3 @tiptap/extension-code@^3.22.3 \
|
|
92
|
+
@tiptap/extension-code-block@^3.22.3 @tiptap/extension-document@^3.22.3 \
|
|
93
|
+
@tiptap/extension-dropcursor@^3.22.3 @tiptap/extension-gapcursor@^3.22.3 \
|
|
94
|
+
@tiptap/extension-hard-break@^3.22.3 @tiptap/extension-heading@^3.22.3 \
|
|
95
|
+
@tiptap/extension-horizontal-rule@^3.22.3 @tiptap/extension-italic@^3.22.3 \
|
|
96
|
+
@tiptap/extension-list@^3.22.3 @tiptap/extension-list-item@^3.22.3 \
|
|
97
|
+
@tiptap/extension-list-keymap@^3.22.3 @tiptap/extension-ordered-list@^3.22.3 \
|
|
98
|
+
@tiptap/extension-paragraph@^3.22.3 @tiptap/extension-strike@^3.22.3 \
|
|
99
|
+
@tiptap/extension-text@^3.22.3
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Tiptap v3 split `starter-kit` into many separately-published packages. Partial installs error in production with cryptic `Cannot find module '@tiptap/extension-…'` messages, so install the whole set together.
|
|
103
|
+
|
|
104
|
+
> **Pin all Tiptap packages to the same range.** Tiptap publishes the whole family in lockstep and uses exact-version internal peer deps (e.g. `@tiptap/extension-floating-menu@3.23.6` peers on `@tiptap/core@3.23.6` exactly). Using a caret `^3.22.3` range here lets your package manager resolve every Tiptap package to the same latest 3.x patch (currently 3.23.6) in one go. Pinning individual Tiptap packages to different exact versions will produce `npm warn ERESOLVE` warnings about mismatched optional-peer versions.
|
|
105
|
+
|
|
106
|
+
> **Note on TypeScript:** because `@scalepad/ui` ships source and re-exports a few Tiptap types (`JSONContent` from `@tiptap/react`) from its main barrel, `tsc` may need those types resolvable even if you don't use the rich-text editor at runtime. If you see `Cannot find module '@tiptap/react'` from `tsc` in a project that doesn't use the editor, install the Tiptap peers above. A future split of the barrel will remove this requirement.
|
|
107
|
+
|
|
108
|
+
## Bundler setup
|
|
109
|
+
|
|
110
|
+
### Vite (recommended — use the preset)
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
import react from '@vitejs/plugin-react';
|
|
114
|
+
import { defineConfig } from 'vite';
|
|
115
|
+
import { scalepadUi } from '@scalepad/ui/vite';
|
|
116
|
+
|
|
117
|
+
export default defineConfig({
|
|
118
|
+
plugins: [react(), scalepadUi()],
|
|
119
|
+
});
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
The preset wires up three things consumers commonly miss:
|
|
123
|
+
|
|
124
|
+
1. The vanilla-extract Vite plugin (`@vanilla-extract/vite-plugin`), so every `.css.ts` file inside `node_modules/@scalepad/ui` is compiled at build time.
|
|
125
|
+
2. `optimizeDeps.exclude: ['@scalepad/ui']` + `optimizeDeps.include: ['@mantine/dates', '@mantine/schedule', '@tiptap/react', 'dayjs', 'fast-deep-equal', 'prop-types']`, which together let Vite's esbuild pre-bundling step succeed (it can't ingest `.css.ts` files on its own) and ensure the transitive CommonJS deps reached through the excluded package still get pre-bundled.
|
|
126
|
+
3. A narrowly-scoped Rollup `onLog` filter that drops the noisy `"default" is not exported by …/rrule/dist/esm/index.js` warning (also seen as `[IMPORT_IS_UNDEFINED] Import 'default' will always be undefined …` on older Rollup versions) emitted from `@mantine/schedule`'s `rrule` import. The warning is a static-analysis false positive — Mantine's source explicitly handles both module shapes (`"default" in rruleAll ? rruleAll.default.RRule : rruleAll.RRule`), so the dead branch is tree-shaken away at runtime. The filter is scoped to (importer is `@mantine/schedule` + message mentions `rrule`); other missing-export warnings still surface.
|
|
127
|
+
|
|
128
|
+
You can extend the include list or pass options through to the vanilla-extract plugin:
|
|
129
|
+
|
|
130
|
+
```ts
|
|
131
|
+
import { scalepadUi } from '@scalepad/ui/vite';
|
|
132
|
+
|
|
133
|
+
scalepadUi({
|
|
134
|
+
optimizeDepsInclude: ['some-other-cjs-package'],
|
|
135
|
+
vanillaExtract: { /* @vanilla-extract/vite-plugin options */ },
|
|
136
|
+
});
|
|
31
137
|
```
|
|
32
138
|
|
|
33
|
-
|
|
139
|
+
### Vite (manual setup, if you don't want the preset)
|
|
34
140
|
|
|
35
|
-
|
|
141
|
+
If you'd rather wire everything yourself — for example, because you already use the vanilla-extract plugin from another source — install the plugin and replicate the config the preset would have set:
|
|
36
142
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
143
|
+
```bash
|
|
144
|
+
pnpm add -D @vanilla-extract/vite-plugin
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
```ts
|
|
148
|
+
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
|
|
149
|
+
import react from '@vitejs/plugin-react';
|
|
150
|
+
import { defineConfig } from 'vite';
|
|
151
|
+
|
|
152
|
+
export default defineConfig({
|
|
153
|
+
plugins: [
|
|
154
|
+
react(),
|
|
155
|
+
vanillaExtractPlugin(),
|
|
156
|
+
{
|
|
157
|
+
// See README troubleshooting → "IMPORT_IS_UNDEFINED warning from rrule".
|
|
158
|
+
// Mantine's import is defensive; the flagged branch is dead code under
|
|
159
|
+
// rrule's ESM build, so the warning is safe to drop. Match on importer
|
|
160
|
+
// + message (not on `log.code`) because Rollup emits this under both
|
|
161
|
+
// `MISSING_EXPORT` and `IMPORT_IS_UNDEFINED` in different versions.
|
|
162
|
+
name: 'suppress-mantine-schedule-rrule-warning',
|
|
163
|
+
onLog(level, log) {
|
|
164
|
+
if (
|
|
165
|
+
level === 'warn' &&
|
|
166
|
+
(log.id ?? '').includes('@mantine/schedule') &&
|
|
167
|
+
/\brrule\b/.test(log.message ?? '')
|
|
168
|
+
) {
|
|
169
|
+
return false;
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
},
|
|
173
|
+
],
|
|
174
|
+
optimizeDeps: {
|
|
175
|
+
exclude: ['@scalepad/ui'],
|
|
176
|
+
include: [
|
|
177
|
+
'@mantine/dates',
|
|
178
|
+
'@mantine/schedule',
|
|
179
|
+
'@tiptap/react',
|
|
180
|
+
'dayjs',
|
|
181
|
+
'fast-deep-equal',
|
|
182
|
+
'prop-types',
|
|
183
|
+
],
|
|
184
|
+
},
|
|
185
|
+
});
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Webpack / Rspack
|
|
189
|
+
|
|
190
|
+
```bash
|
|
191
|
+
pnpm add -D @vanilla-extract/webpack-plugin mini-css-extract-plugin
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
Add the plugin per the [vanilla-extract webpack docs](https://vanilla-extract.style/documentation/integrations/webpack/). The default include pattern picks up `.css.ts` files inside `node_modules/@scalepad/ui` automatically.
|
|
195
|
+
|
|
196
|
+
### Next.js
|
|
197
|
+
|
|
198
|
+
```bash
|
|
199
|
+
pnpm add -D @vanilla-extract/next-plugin
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
```js
|
|
203
|
+
// next.config.js
|
|
204
|
+
const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
|
|
205
|
+
const withVanillaExtract = createVanillaExtractPlugin();
|
|
206
|
+
|
|
207
|
+
module.exports = withVanillaExtract({
|
|
208
|
+
transpilePackages: ['@scalepad/ui', '@scalepad/ui-utils'],
|
|
209
|
+
});
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
Next.js skips transpiling `node_modules` by default; without `transpilePackages`, the TypeScript source in this package fails to parse.
|
|
45
213
|
|
|
46
214
|
## Quick start
|
|
47
215
|
|
|
48
216
|
```tsx
|
|
49
217
|
// src/main.tsx
|
|
50
|
-
import { ThemeProvider } from '@scalepad/ui';
|
|
51
218
|
import '@mantine/core/styles.css';
|
|
219
|
+
import { ThemeProvider } from '@scalepad/ui';
|
|
52
220
|
|
|
53
221
|
import { App } from './App';
|
|
54
222
|
|
|
@@ -63,7 +231,7 @@ export function Root() {
|
|
|
63
231
|
|
|
64
232
|
```tsx
|
|
65
233
|
// src/components/CreateClient.tsx
|
|
66
|
-
import { Button,
|
|
234
|
+
import { Button, Text } from '@scalepad/ui';
|
|
67
235
|
import { Plus } from 'lucide-react';
|
|
68
236
|
|
|
69
237
|
export function CreateClient() {
|
|
@@ -77,13 +245,81 @@ export function CreateClient() {
|
|
|
77
245
|
|
|
78
246
|
## Entrypoints
|
|
79
247
|
|
|
80
|
-
The package exposes three import paths:
|
|
81
|
-
|
|
82
248
|
| Import | Use for |
|
|
83
249
|
|---|---|
|
|
84
250
|
| `@scalepad/ui` | Main UI surface — components, hooks, `ThemeProvider`, design tokens, type augmentations |
|
|
85
251
|
| `@scalepad/ui/charts` | Recharts-based chart components and selected raw recharts exports. Lives behind a subpath so the main bundle doesn't pull in recharts unless you import charts. |
|
|
86
252
|
| `@scalepad/ui/mantine` | Raw Mantine pass-throughs for components without a design-system wrapper yet. Prefer the main entry — use this only when the design-system equivalent is missing. |
|
|
253
|
+
| `@scalepad/ui/vite` | Vite preset — `scalepadUi()` returns the vanilla-extract plugin + the right `optimizeDeps` config. Import-only from a `vite.config.ts`. |
|
|
254
|
+
|
|
255
|
+
## Migration from 0.1.x
|
|
256
|
+
|
|
257
|
+
If you were on `@scalepad/ui@0.1.x`, Mantine, recharts, clsx, and `react-intersection-observer` used to be peer dependencies you installed yourself. They are now bundled into `@scalepad/ui` as regular dependencies, so:
|
|
258
|
+
|
|
259
|
+
1. **Remove these from your `package.json`** if they're not used directly by your application code (they almost certainly aren't):
|
|
260
|
+
|
|
261
|
+
```diff
|
|
262
|
+
- "@mantine/core": "...",
|
|
263
|
+
- "@mantine/dates": "...",
|
|
264
|
+
- "@mantine/hooks": "...",
|
|
265
|
+
- "@mantine/notifications": "...",
|
|
266
|
+
- "@mantine/schedule": "...",
|
|
267
|
+
- "@mantine/tiptap": "...",
|
|
268
|
+
- "@mantine/vanilla-extract": "...",
|
|
269
|
+
- "recharts": "...",
|
|
270
|
+
- "clsx": "...",
|
|
271
|
+
- "react-intersection-observer": "...",
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
Leaving Mantine in your own dependencies is harmful — it creates **two copies** of `@mantine/core` in your bundle (yours + the one shipped with `@scalepad/ui`), which breaks Mantine's React context (modals don't open, theme doesn't apply, focus traps don't trap). Remove them.
|
|
275
|
+
|
|
276
|
+
2. **Re-run `pnpm install`** (or `npm install` / `yarn install`).
|
|
277
|
+
3. **Keep importing Mantine through `@scalepad/ui`**, never directly: `import { Button } from '@scalepad/ui'`, not `import { Button } from '@mantine/core'`.
|
|
278
|
+
|
|
279
|
+
## Troubleshooting
|
|
280
|
+
|
|
281
|
+
### `Cannot find module '@tiptap/core'` / `@tiptap/extensions` / similar
|
|
282
|
+
|
|
283
|
+
You're using a component from the rich-text editor (`RichTextEditor`, `EditableRichText`, `SlashRichTextEditor`, `RichTextView`, `RichTextInline`) without installing the optional Tiptap peer set. Install them with the block under "Optional features → Rich-text editor" above.
|
|
284
|
+
|
|
285
|
+
### Modals don't open, theme doesn't apply, or `useMantineTheme()` returns undefined
|
|
286
|
+
|
|
287
|
+
You have two copies of `@mantine/core` in your bundle. Most commonly because `@mantine/core` is still listed in your own `package.json` after upgrading to `@scalepad/ui@0.2.x+`. Remove it (see "Migration from 0.1.x") and reinstall.
|
|
288
|
+
|
|
289
|
+
### Vite throws on a `.css.ts` file inside `node_modules/@scalepad/ui`
|
|
290
|
+
|
|
291
|
+
The vanilla-extract Vite plugin isn't wired up, or the package is being pre-bundled by esbuild before the plugin sees it. Either:
|
|
292
|
+
|
|
293
|
+
- Use the preset: `import { scalepadUi } from '@scalepad/ui/vite'`, OR
|
|
294
|
+
- If wiring manually, make sure your `vite.config.ts` has BOTH `vanillaExtractPlugin()` in `plugins` AND `optimizeDeps.exclude: ['@scalepad/ui']`. Missing either one will fail.
|
|
295
|
+
|
|
296
|
+
### `[IMPORT_IS_UNDEFINED] Import 'default' will always be undefined because there is no matching export in 'node_modules/rrule/dist/esm/index.js'`
|
|
297
|
+
|
|
298
|
+
`@mantine/schedule` reads `rruleAll.default.RRule`, but `rrule@2.x` only has a `default` export on its CJS build (`dist/es5/rrule.js`), not its ESM build (`dist/esm/index.js`). Vite resolves `rrule` via its `module` field, so the static-analysis warning fires on every build — even when the scheduler is never imported.
|
|
299
|
+
|
|
300
|
+
The warning is a false positive. Mantine's source is explicitly defensive about both module shapes:
|
|
301
|
+
|
|
302
|
+
```js
|
|
303
|
+
const RRule = "default" in rruleAll ? rruleAll.default.RRule : rruleAll.RRule;
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
Under the ESM build, `"default" in rruleAll` is `false`, the `.default.RRule` branch is dead code, Rollup tree-shakes it away, and only `rruleAll.RRule` runs at runtime — which resolves correctly. Nothing breaks; the message is just noise.
|
|
307
|
+
|
|
308
|
+
Either:
|
|
309
|
+
|
|
310
|
+
- Use the preset (it adds a narrowly-scoped Rollup `onLog` filter for exactly this warning), OR
|
|
311
|
+
- If wiring manually, add the same filter — see the small `suppress-mantine-schedule-rrule-warning` plugin in the manual-setup snippet above.
|
|
312
|
+
|
|
313
|
+
### `The requested module '…@mantine/dates' does not provide an export named '…'` (or similar from `@tiptap/react`, `dayjs`, `prop-types`)
|
|
314
|
+
|
|
315
|
+
These are CommonJS-or-mixed-module deps that Vite's dep scanner can't walk through once `@scalepad/ui` is excluded from pre-bundling. Either:
|
|
316
|
+
|
|
317
|
+
- Use the preset (it already lists them), OR
|
|
318
|
+
- Add them to `optimizeDeps.include` in your `vite.config.ts`. The current set the preset uses is `['@mantine/dates', '@mantine/schedule', '@tiptap/react', 'dayjs', 'fast-deep-equal', 'prop-types']`.
|
|
319
|
+
|
|
320
|
+
### TypeScript errors referencing `@tiptap/react` in a project that doesn't use the rich-text editor
|
|
321
|
+
|
|
322
|
+
Because `@scalepad/ui` ships source, its main barrel re-exports a couple of Tiptap types. Install the rich-text peer set or stop importing from the main barrel. See the "Note on TypeScript" callout under "Optional features" above.
|
|
87
323
|
|
|
88
324
|
## Figma Code Connect
|
|
89
325
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scalepad/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"description": "ScalePad LM Design System — React + Mantine 9 + vanilla-extract component library",
|
|
@@ -10,11 +10,16 @@
|
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./src/index.ts",
|
|
12
12
|
"./charts": "./src/charts.ts",
|
|
13
|
-
"./mantine": "./src/mantine.ts"
|
|
13
|
+
"./mantine": "./src/mantine.ts",
|
|
14
|
+
"./vite": {
|
|
15
|
+
"types": "./src/vite.d.ts",
|
|
16
|
+
"default": "./src/vite.js"
|
|
17
|
+
}
|
|
14
18
|
},
|
|
15
19
|
"files": [
|
|
16
20
|
"src/**/*.ts",
|
|
17
21
|
"src/**/*.tsx",
|
|
22
|
+
"src/**/*.js",
|
|
18
23
|
"!src/**/*.test.ts",
|
|
19
24
|
"!src/**/*.test.tsx",
|
|
20
25
|
"!src/**/*.story.ts",
|
|
@@ -28,7 +33,8 @@
|
|
|
28
33
|
"AGENTS.md",
|
|
29
34
|
".ai/**/*.md",
|
|
30
35
|
"figma.config.json",
|
|
31
|
-
"scripts/install-ai-rules.mjs"
|
|
36
|
+
"scripts/install-ai-rules.mjs",
|
|
37
|
+
"scripts/verify-consumption.mjs"
|
|
32
38
|
],
|
|
33
39
|
"bin": {
|
|
34
40
|
"scalepad-ui-install-ai-rules": "./scripts/install-ai-rules.mjs"
|
|
@@ -36,47 +42,158 @@
|
|
|
36
42
|
"publishConfig": {
|
|
37
43
|
"access": "restricted"
|
|
38
44
|
},
|
|
45
|
+
"dependencies": {
|
|
46
|
+
"@mantine/core": "9.2.1",
|
|
47
|
+
"@mantine/dates": "9.2.1",
|
|
48
|
+
"@mantine/hooks": "9.2.1",
|
|
49
|
+
"@mantine/notifications": "9.2.1",
|
|
50
|
+
"@mantine/schedule": "9.2.1",
|
|
51
|
+
"@mantine/tiptap": "9.2.1",
|
|
52
|
+
"@mantine/vanilla-extract": "9.2.1",
|
|
53
|
+
"@vanilla-extract/vite-plugin": "^5.0.0",
|
|
54
|
+
"clsx": "^2.1.1",
|
|
55
|
+
"react-intersection-observer": "^10.0.0",
|
|
56
|
+
"recharts": "^3.6.0",
|
|
57
|
+
"@scalepad/ui-utils": "0.1.0"
|
|
58
|
+
},
|
|
39
59
|
"peerDependencies": {
|
|
40
|
-
"@mantine/core": "9.0.1",
|
|
41
|
-
"@mantine/dates": "9.0.1",
|
|
42
|
-
"@mantine/hooks": "9.0.1",
|
|
43
|
-
"@mantine/notifications": "^9.0.1",
|
|
44
|
-
"@mantine/schedule": "9.0.1",
|
|
45
|
-
"@mantine/tiptap": "^9.0.1",
|
|
46
|
-
"@mantine/vanilla-extract": "^9.0.1",
|
|
47
60
|
"@tanstack/react-query": "^5.0.0",
|
|
48
61
|
"@tanstack/react-table": "^8.21.3",
|
|
49
|
-
"@tiptap/
|
|
50
|
-
"@tiptap/extension-
|
|
51
|
-
"@tiptap/extension-
|
|
52
|
-
"@tiptap/extension-
|
|
53
|
-
"@tiptap/extension-
|
|
54
|
-
"@tiptap/
|
|
55
|
-
"@tiptap/
|
|
56
|
-
"@tiptap/
|
|
57
|
-
"@tiptap/
|
|
62
|
+
"@tiptap/core": "^3.22.3",
|
|
63
|
+
"@tiptap/extension-blockquote": "^3.22.3",
|
|
64
|
+
"@tiptap/extension-bold": "^3.22.3",
|
|
65
|
+
"@tiptap/extension-bubble-menu": "^3.22.3",
|
|
66
|
+
"@tiptap/extension-bullet-list": "^3.22.3",
|
|
67
|
+
"@tiptap/extension-code": "^3.22.3",
|
|
68
|
+
"@tiptap/extension-code-block": "^3.22.3",
|
|
69
|
+
"@tiptap/extension-document": "^3.22.3",
|
|
70
|
+
"@tiptap/extension-dropcursor": "^3.22.3",
|
|
71
|
+
"@tiptap/extension-gapcursor": "^3.22.3",
|
|
72
|
+
"@tiptap/extension-hard-break": "^3.22.3",
|
|
73
|
+
"@tiptap/extension-heading": "^3.22.3",
|
|
74
|
+
"@tiptap/extension-horizontal-rule": "^3.22.3",
|
|
75
|
+
"@tiptap/extension-image": "^3.22.3",
|
|
76
|
+
"@tiptap/extension-italic": "^3.22.3",
|
|
77
|
+
"@tiptap/extension-link": "^3.22.3",
|
|
78
|
+
"@tiptap/extension-list": "^3.22.3",
|
|
79
|
+
"@tiptap/extension-list-item": "^3.22.3",
|
|
80
|
+
"@tiptap/extension-list-keymap": "^3.22.3",
|
|
81
|
+
"@tiptap/extension-ordered-list": "^3.22.3",
|
|
82
|
+
"@tiptap/extension-paragraph": "^3.22.3",
|
|
83
|
+
"@tiptap/extension-placeholder": "^3.22.3",
|
|
84
|
+
"@tiptap/extension-strike": "^3.22.3",
|
|
85
|
+
"@tiptap/extension-text": "^3.22.3",
|
|
86
|
+
"@tiptap/extension-underline": "^3.22.3",
|
|
87
|
+
"@tiptap/extensions": "^3.22.3",
|
|
88
|
+
"@tiptap/pm": "^3.22.3",
|
|
89
|
+
"@tiptap/react": "^3.22.3",
|
|
90
|
+
"@tiptap/starter-kit": "^3.22.3",
|
|
91
|
+
"@tiptap/suggestion": "^3.22.3",
|
|
58
92
|
"@vanilla-extract/css": "^1.16.2",
|
|
59
|
-
"clsx": "^2.1.1",
|
|
60
93
|
"dayjs": "^1.11.19",
|
|
61
94
|
"lucide-react": "^0.469.0",
|
|
62
95
|
"react": "^19.0.0",
|
|
63
96
|
"react-dom": "^19.0.0",
|
|
64
|
-
"
|
|
65
|
-
"recharts": "^3.6.0"
|
|
97
|
+
"vite": "^7.0.0"
|
|
66
98
|
},
|
|
67
|
-
"
|
|
68
|
-
"@
|
|
99
|
+
"peerDependenciesMeta": {
|
|
100
|
+
"@tiptap/core": {
|
|
101
|
+
"optional": true
|
|
102
|
+
},
|
|
103
|
+
"@tiptap/extension-blockquote": {
|
|
104
|
+
"optional": true
|
|
105
|
+
},
|
|
106
|
+
"@tiptap/extension-bold": {
|
|
107
|
+
"optional": true
|
|
108
|
+
},
|
|
109
|
+
"@tiptap/extension-bubble-menu": {
|
|
110
|
+
"optional": true
|
|
111
|
+
},
|
|
112
|
+
"@tiptap/extension-bullet-list": {
|
|
113
|
+
"optional": true
|
|
114
|
+
},
|
|
115
|
+
"@tiptap/extension-code": {
|
|
116
|
+
"optional": true
|
|
117
|
+
},
|
|
118
|
+
"@tiptap/extension-code-block": {
|
|
119
|
+
"optional": true
|
|
120
|
+
},
|
|
121
|
+
"@tiptap/extension-document": {
|
|
122
|
+
"optional": true
|
|
123
|
+
},
|
|
124
|
+
"@tiptap/extension-dropcursor": {
|
|
125
|
+
"optional": true
|
|
126
|
+
},
|
|
127
|
+
"@tiptap/extension-gapcursor": {
|
|
128
|
+
"optional": true
|
|
129
|
+
},
|
|
130
|
+
"@tiptap/extension-hard-break": {
|
|
131
|
+
"optional": true
|
|
132
|
+
},
|
|
133
|
+
"@tiptap/extension-heading": {
|
|
134
|
+
"optional": true
|
|
135
|
+
},
|
|
136
|
+
"@tiptap/extension-horizontal-rule": {
|
|
137
|
+
"optional": true
|
|
138
|
+
},
|
|
139
|
+
"@tiptap/extension-image": {
|
|
140
|
+
"optional": true
|
|
141
|
+
},
|
|
142
|
+
"@tiptap/extension-italic": {
|
|
143
|
+
"optional": true
|
|
144
|
+
},
|
|
145
|
+
"@tiptap/extension-link": {
|
|
146
|
+
"optional": true
|
|
147
|
+
},
|
|
148
|
+
"@tiptap/extension-list": {
|
|
149
|
+
"optional": true
|
|
150
|
+
},
|
|
151
|
+
"@tiptap/extension-list-item": {
|
|
152
|
+
"optional": true
|
|
153
|
+
},
|
|
154
|
+
"@tiptap/extension-list-keymap": {
|
|
155
|
+
"optional": true
|
|
156
|
+
},
|
|
157
|
+
"@tiptap/extension-ordered-list": {
|
|
158
|
+
"optional": true
|
|
159
|
+
},
|
|
160
|
+
"@tiptap/extension-paragraph": {
|
|
161
|
+
"optional": true
|
|
162
|
+
},
|
|
163
|
+
"@tiptap/extension-placeholder": {
|
|
164
|
+
"optional": true
|
|
165
|
+
},
|
|
166
|
+
"@tiptap/extension-strike": {
|
|
167
|
+
"optional": true
|
|
168
|
+
},
|
|
169
|
+
"@tiptap/extension-text": {
|
|
170
|
+
"optional": true
|
|
171
|
+
},
|
|
172
|
+
"@tiptap/extension-underline": {
|
|
173
|
+
"optional": true
|
|
174
|
+
},
|
|
175
|
+
"@tiptap/extensions": {
|
|
176
|
+
"optional": true
|
|
177
|
+
},
|
|
178
|
+
"@tiptap/pm": {
|
|
179
|
+
"optional": true
|
|
180
|
+
},
|
|
181
|
+
"@tiptap/react": {
|
|
182
|
+
"optional": true
|
|
183
|
+
},
|
|
184
|
+
"@tiptap/starter-kit": {
|
|
185
|
+
"optional": true
|
|
186
|
+
},
|
|
187
|
+
"@tiptap/suggestion": {
|
|
188
|
+
"optional": true
|
|
189
|
+
},
|
|
190
|
+
"vite": {
|
|
191
|
+
"optional": true
|
|
192
|
+
}
|
|
69
193
|
},
|
|
70
194
|
"devDependencies": {
|
|
71
195
|
"@chromatic-com/storybook": "^5.0.0",
|
|
72
196
|
"@figma/code-connect": "^1.3.13",
|
|
73
|
-
"@mantine/core": "9.0.1",
|
|
74
|
-
"@mantine/dates": "9.0.1",
|
|
75
|
-
"@mantine/hooks": "9.0.1",
|
|
76
|
-
"@mantine/notifications": "^9.0.1",
|
|
77
|
-
"@mantine/schedule": "9.0.1",
|
|
78
|
-
"@mantine/tiptap": "^9.0.1",
|
|
79
|
-
"@mantine/vanilla-extract": "^9.0.1",
|
|
80
197
|
"@storybook/addon-themes": "^10.0.0",
|
|
81
198
|
"@storybook/addon-vitest": "^10.1.11",
|
|
82
199
|
"@storybook/react": "^10.0.0",
|
|
@@ -95,19 +212,15 @@
|
|
|
95
212
|
"@types/react": "^19.2.2",
|
|
96
213
|
"@types/react-dom": "^19.2.1",
|
|
97
214
|
"@vanilla-extract/css": "^1.16.2",
|
|
98
|
-
"@vanilla-extract/vite-plugin": "^4.0.0",
|
|
99
215
|
"@vitejs/plugin-react": "^5.0.4",
|
|
100
216
|
"@vitest/browser-playwright": "^4.0.17",
|
|
101
217
|
"@vitest/coverage-v8": "^4.0.17",
|
|
102
|
-
"clsx": "^2.1.1",
|
|
103
218
|
"dayjs": "^1.11.19",
|
|
104
219
|
"lucide-react": "^0.469.0",
|
|
105
220
|
"playwright": "^1.57.0",
|
|
106
221
|
"prop-types": "^15.8.1",
|
|
107
222
|
"react": "^19.0.0",
|
|
108
223
|
"react-dom": "^19.0.0",
|
|
109
|
-
"react-intersection-observer": "^10.0.0",
|
|
110
|
-
"recharts": "^3.6.0",
|
|
111
224
|
"storybook": "^10.0.0",
|
|
112
225
|
"typescript": "^6.0.3",
|
|
113
226
|
"typescript-plugin-css-modules": "^5.2.0",
|
|
@@ -120,6 +233,7 @@
|
|
|
120
233
|
"test": "exit 0",
|
|
121
234
|
"storybook": "storybook dev -p 6006",
|
|
122
235
|
"storybook:build": "storybook build",
|
|
123
|
-
"sync:ai-rules": "node ./scripts/sync-ai-rules.mjs"
|
|
236
|
+
"sync:ai-rules": "node ./scripts/sync-ai-rules.mjs",
|
|
237
|
+
"verify:consumption": "node ./scripts/verify-consumption.mjs"
|
|
124
238
|
}
|
|
125
239
|
}
|