@noahbaumgartner/svelte-ui 0.0.1 → 0.0.4

package/README.md

@@ -1,65 +1,96 @@
-# Svelte library
+# svelte-ui
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+A minimal, monochrome component library for Svelte 5, built with runes, TypeScript and plain CSS custom properties.
 
 ```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+npm install @noahbaumgartner/svelte-ui
 ```
 
-To recreate this project with the same configuration:
+## Usage
 
-```sh
-# recreate this project
-npx sv@0.17.1 create --template library --types ts --add storybook vitest="usages:unit,component" eslint prettier --install npm svelte-ui
-```
+Import the design tokens once, at the root of your app (e.g. `src/routes/+layout.svelte`):
 
-## Developing
+```svelte
+<script lang="ts">
+	import '@noahbaumgartner/svelte-ui/tokens.css';
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+	let { children } = $props();
+</script>
 
-```sh
-npm run dev
+{@render children()}
+```
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+Then use the components:
+
+```svelte
+<script lang="ts">
+	import { Button, Card, CardHeader, CardTitle, CardContent } from '@noahbaumgartner/svelte-ui';
+	import { Plus } from '@noahbaumgartner/svelte-ui/icons';
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle>Projects</CardTitle>
+	</CardHeader>
+	<CardContent>
+		<Button icon={Plus} variant="primary">New project</Button>
+	</CardContent>
+</Card>
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+### Icons
 
-## Building
+[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.
 
-To build your library:
+### Theming
 
-```sh
-npm pack
+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>`:
+
+```html
+<html data-theme="dark"></html>
 ```
 
-To create a production version of your showcase app:
+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:
 
-```sh
-npm run build
+```css
+:root {
+	--accent: #2563eb;
+}
 ```
 
-You can preview the production build with `npm run preview`.
+See [`src/lib/styles/tokens.css`](src/lib/styles/tokens.css) for every token.
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+## Components
 
-## Publishing
+| Category   | Components                                                                                     |
+| ---------- | ---------------------------------------------------------------------------------------------- |
+| Actions    | `Button`, `ButtonGroup`, `Toggle`, `Link`                                                      |
+| Forms      | `Input`, `InputGroup`, `Textarea`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `Field` family |
+| Pickers    | `Calendar`, `TimePicker`, `ColorPicker`                                                        |
+| Overlays   | `Dialog`, `AlertDialog`, `Popover`, `Tooltip`, `ContextMenu`, `Toaster` + `toast()`            |
+| Navigation | `Navbar`, `NavigationMenu`, `Sidebar` family, `Breadcrumb`                                     |
+| Display    | `Card` family, `Table`, `Avatar`, `Badge`, `Kbd`, `Separator`, `Skeleton`, `Spinner`           |
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+Every component is documented in Storybook, with one story per prop.
 
-To publish your library to [npm](https://www.npmjs.com):
+## Development
 
 ```sh
-npm publish
+npm install
+npm run storybook   # component workbench on http://localhost:6006
 ```
+
+| Script              | Description                                      |
+| ------------------- | ------------------------------------------------ |
+| `npm run storybook` | Start Storybook                                  |
+| `npm run check`     | Type-check with `svelte-check`                   |
+| `npm run test`      | Run unit and Storybook tests with Vitest         |
+| `npm run lint`      | Check formatting (Prettier) and lint (ESLint)    |
+| `npm run format`    | Format all files                                 |
+| `npm run build`     | Build the package into `dist/` and run `publint` |
+
+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).
+
+## Releasing
+
+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).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@noahbaumgartner/svelte-ui",
-	"version": "0.0.1",
+	"version": "0.0.4",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/noahbaumgartner/svelte-ui.git"
@@ -85,4 +85,4 @@
 	"dependencies": {
 		"@lucide/svelte": "^1.47.0"
 	}
-}
+}