@noahbaumgartner/svelte-ui 0.0.3 → 0.0.4
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 +69 -38
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,65 +1,96 @@
|
|
|
1
|
-
#
|
|
1
|
+
# svelte-ui
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
|
|
6
|
-
|
|
7
|
-
## Creating a project
|
|
8
|
-
|
|
9
|
-
If you're seeing this, you've probably already done this step. Congrats!
|
|
3
|
+
A minimal, monochrome component library for Svelte 5, built with runes, TypeScript and plain CSS custom properties.
|
|
10
4
|
|
|
11
5
|
```sh
|
|
12
|
-
|
|
13
|
-
npx sv create
|
|
14
|
-
|
|
15
|
-
# create a new project in my-app
|
|
16
|
-
npx sv create my-app
|
|
6
|
+
npm install @noahbaumgartner/svelte-ui
|
|
17
7
|
```
|
|
18
8
|
|
|
19
|
-
|
|
9
|
+
## Usage
|
|
20
10
|
|
|
21
|
-
|
|
22
|
-
# recreate this project
|
|
23
|
-
npx sv@0.17.1 create --template library --types ts --add storybook vitest="usages:unit,component" eslint prettier --install npm svelte-ui
|
|
24
|
-
```
|
|
11
|
+
Import the design tokens once, at the root of your app (e.g. `src/routes/+layout.svelte`):
|
|
25
12
|
|
|
26
|
-
|
|
13
|
+
```svelte
|
|
14
|
+
<script lang="ts">
|
|
15
|
+
import '@noahbaumgartner/svelte-ui/tokens.css';
|
|
27
16
|
|
|
28
|
-
|
|
17
|
+
let { children } = $props();
|
|
18
|
+
</script>
|
|
29
19
|
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
{@render children()}
|
|
21
|
+
```
|
|
32
22
|
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
Then use the components:
|
|
24
|
+
|
|
25
|
+
```svelte
|
|
26
|
+
<script lang="ts">
|
|
27
|
+
import { Button, Card, CardHeader, CardTitle, CardContent } from '@noahbaumgartner/svelte-ui';
|
|
28
|
+
import { Plus } from '@noahbaumgartner/svelte-ui/icons';
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<Card>
|
|
32
|
+
<CardHeader>
|
|
33
|
+
<CardTitle>Projects</CardTitle>
|
|
34
|
+
</CardHeader>
|
|
35
|
+
<CardContent>
|
|
36
|
+
<Button icon={Plus} variant="primary">New project</Button>
|
|
37
|
+
</CardContent>
|
|
38
|
+
</Card>
|
|
35
39
|
```
|
|
36
40
|
|
|
37
|
-
|
|
41
|
+
### Icons
|
|
38
42
|
|
|
39
|
-
|
|
43
|
+
[Lucide](https://lucide.dev) icons are re-exported from `@noahbaumgartner/svelte-ui/icons`, so you don't need a separate `@lucide/svelte` install. They live on their own entry point because some icon names (`Link`, `Image`, …) collide with component names.
|
|
40
44
|
|
|
41
|
-
|
|
45
|
+
### Theming
|
|
42
46
|
|
|
43
|
-
|
|
44
|
-
|
|
47
|
+
All colours are derived from two variables, `--base` and `--ink`, mixed into a grey scale. Light and dark mode follow `prefers-color-scheme` by default; force one with a `data-theme` attribute on `<html>`:
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<html data-theme="dark"></html>
|
|
45
51
|
```
|
|
46
52
|
|
|
47
|
-
|
|
53
|
+
Set `--accent` to colour checked controls, primary buttons and focus rings. It defaults to `--ink`, and the foreground colour on top of it is picked automatically for contrast:
|
|
48
54
|
|
|
49
|
-
```
|
|
50
|
-
|
|
55
|
+
```css
|
|
56
|
+
:root {
|
|
57
|
+
--accent: #2563eb;
|
|
58
|
+
}
|
|
51
59
|
```
|
|
52
60
|
|
|
53
|
-
|
|
61
|
+
See [`src/lib/styles/tokens.css`](src/lib/styles/tokens.css) for every token.
|
|
54
62
|
|
|
55
|
-
|
|
63
|
+
## Components
|
|
56
64
|
|
|
57
|
-
|
|
65
|
+
| Category | Components |
|
|
66
|
+
| ---------- | ---------------------------------------------------------------------------------------------- |
|
|
67
|
+
| Actions | `Button`, `ButtonGroup`, `Toggle`, `Link` |
|
|
68
|
+
| Forms | `Input`, `InputGroup`, `Textarea`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `Field` family |
|
|
69
|
+
| Pickers | `Calendar`, `TimePicker`, `ColorPicker` |
|
|
70
|
+
| Overlays | `Dialog`, `AlertDialog`, `Popover`, `Tooltip`, `ContextMenu`, `Toaster` + `toast()` |
|
|
71
|
+
| Navigation | `Navbar`, `NavigationMenu`, `Sidebar` family, `Breadcrumb` |
|
|
72
|
+
| Display | `Card` family, `Table`, `Avatar`, `Badge`, `Kbd`, `Separator`, `Skeleton`, `Spinner` |
|
|
58
73
|
|
|
59
|
-
|
|
74
|
+
Every component is documented in Storybook, with one story per prop.
|
|
60
75
|
|
|
61
|
-
|
|
76
|
+
## Development
|
|
62
77
|
|
|
63
78
|
```sh
|
|
64
|
-
npm
|
|
79
|
+
npm install
|
|
80
|
+
npm run storybook # component workbench on http://localhost:6006
|
|
65
81
|
```
|
|
82
|
+
|
|
83
|
+
| Script | Description |
|
|
84
|
+
| ------------------- | ------------------------------------------------ |
|
|
85
|
+
| `npm run storybook` | Start Storybook |
|
|
86
|
+
| `npm run check` | Type-check with `svelte-check` |
|
|
87
|
+
| `npm run test` | Run unit and Storybook tests with Vitest |
|
|
88
|
+
| `npm run lint` | Check formatting (Prettier) and lint (ESLint) |
|
|
89
|
+
| `npm run format` | Format all files |
|
|
90
|
+
| `npm run build` | Build the package into `dist/` and run `publint` |
|
|
91
|
+
|
|
92
|
+
Components live in `src/lib/components/<name>/`, each next to its `.stories.svelte` file, and are exported from [`src/lib/index.ts`](src/lib/index.ts).
|
|
93
|
+
|
|
94
|
+
## Releasing
|
|
95
|
+
|
|
96
|
+
Publishing a GitHub release triggers [`.github/workflows/publish.yml`](.github/workflows/publish.yml), which sets the package version from the release tag (e.g. `v0.2.0` → `0.2.0`), type-checks, and stages the publish on npm with provenance. The staged version then has to be approved with 2FA (`npm stage approve <stage-id>` or on npmjs.com).
|