@lessly/ui 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.
- package/README.md +80 -0
- package/dist/index.d.ts +791 -0
- package/dist/index.js +3189 -0
- package/dist/styles.css +507 -0
- package/dist/tailwind-preset.d.ts +394 -0
- package/dist/tailwind-preset.js +430 -0
- package/package.json +116 -0
package/README.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# @lessly/ui
|
|
2
|
+
|
|
3
|
+
The **live** Lessly design system — shared UI primitives, design tokens, theme,
|
|
4
|
+
and Tailwind preset. This package is the shared singleton the Lessly workspace
|
|
5
|
+
Module Federation host provides to federation extension remotes at runtime, and
|
|
6
|
+
it is published to the public npm registry (npmjs.com).
|
|
7
|
+
|
|
8
|
+
> **Contract:** the package name (`@lessly/ui`), its exports (`.`,
|
|
9
|
+
> `./tailwind-preset`, `./styles.css`), and its React 19 peer dependencies are a
|
|
10
|
+
> cross-project contract. Do not change them without coordinating the workspace
|
|
11
|
+
> host and every federation remote.
|
|
12
|
+
|
|
13
|
+
## What's inside
|
|
14
|
+
|
|
15
|
+
- **Components:** Button, Card, Dialog, DropdownMenu, Input, Label, SectionIntro,
|
|
16
|
+
Select, Switch.
|
|
17
|
+
- **Theme:** `useTheme` hook + `ThemeToggle` (toggles the `light` class on
|
|
18
|
+
`<html>`; `:root` is dark, `.light` is light).
|
|
19
|
+
- **Tokens:** `tailwind-preset` (spacing, colors, typography, radii, …) and
|
|
20
|
+
`styles.css` (CSS variables, fonts, `.light` overrides). Token values are
|
|
21
|
+
generated upstream in `lessly-hub/design-system` and vendored here — do not
|
|
22
|
+
hand-edit them.
|
|
23
|
+
|
|
24
|
+
## Install
|
|
25
|
+
|
|
26
|
+
Published to the public npm registry — no scope or registry configuration
|
|
27
|
+
needed:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install @lessly/ui
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import { Button, useTheme } from '@lessly/ui';
|
|
37
|
+
import '@lessly/ui/styles.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Your app's Tailwind config must use the preset so token utilities resolve:
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
import { lesslyPreset } from '@lessly/ui/tailwind-preset';
|
|
44
|
+
export default { presets: [lesslyPreset], content: ['./src/**/*.{ts,tsx}'] };
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Storybook
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
pnpm storybook # dev server on http://localhost:6006
|
|
51
|
+
pnpm build-storybook # static build → storybook-static/
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
The Storybook toolbar has a global Dark/Light toggle driven by the package's own
|
|
55
|
+
`useTheme` hook.
|
|
56
|
+
|
|
57
|
+
## Deployment (ui.lessly.com)
|
|
58
|
+
|
|
59
|
+
The Storybook is deployed via the Lessly static-service pipeline, which runs
|
|
60
|
+
`pnpm build-storybook` and serves the resulting `storybook-static/`. The npm
|
|
61
|
+
package build is `pnpm build` (tsup → `dist/`), which the release flow uses; the
|
|
62
|
+
npm package published to npmjs always contains the package, never the Storybook site.
|
|
63
|
+
|
|
64
|
+
## Scripts
|
|
65
|
+
|
|
66
|
+
| Script | Description |
|
|
67
|
+
| --- | --- |
|
|
68
|
+
| `pnpm build` | tsup package build → `dist/` (+ copies `styles.css`) — the npm package published to npmjs |
|
|
69
|
+
| `pnpm build-storybook` | Storybook static site → `storybook-static/` — what the static-service pipeline deploys to `ui.lessly.com` |
|
|
70
|
+
| `pnpm storybook` | Storybook dev server on `http://localhost:6006` |
|
|
71
|
+
| `pnpm test` | Vitest |
|
|
72
|
+
| `pnpm type-check` | `tsc --noEmit` |
|
|
73
|
+
| `pnpm lint` | ESLint |
|
|
74
|
+
| `pnpm changeset` / `pnpm release:version` | Versioning (describe change → apply bump). To release, push a `v<version>` git tag — see [`RELEASING.md`](./RELEASING.md); do **not** use `changeset tag`, whose `name@version` tags do not match the workflow's `v*` trigger. |
|
|
75
|
+
|
|
76
|
+
## Releasing
|
|
77
|
+
|
|
78
|
+
Versioning is via Changesets; publishing to the public npm registry is
|
|
79
|
+
automated by a tag-triggered GitHub Actions workflow
|
|
80
|
+
(`.github/workflows/release.yml`). See [`RELEASING.md`](./RELEASING.md).
|