@domicile-desktop/component-library 0.0.0-alpha-2bbfd97dde33 → 0.0.0-alpha-dfe919592a6b

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.
Files changed (2) hide show
  1. package/README.md +47 -60
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,76 +1,63 @@
1
1
  # @domicile-desktop/component-library
2
2
 
3
- The shared React UI primitives every Domicile app builds on. Components wrap
4
- [`@base-ui/react`](https://base-ui.com) where a primitive exists — so focus
5
- management, keyboard navigation, portals, and validation come from base-ui —
6
- and add the project's styling and ergonomic API on top. This package also
7
- owns the design system: the Panda CSS preset (tokens, the shared `control`
8
- recipe) that every other package extends.
3
+ Shared React UI components for every Domicile app, plus the Panda CSS preset
4
+ the other packages extend.
9
5
 
10
- Apps MUST build on these primitives rather than rolling their own buttons,
11
- inputs, or dialogs from raw HTML. If a primitive is missing, add it here and
12
- consume it — don't fork. See [/docs/guidelines/STYLING.md](../../docs/guidelines/STYLING.md).
6
+ - Components wrap [`@base-ui/react`](https://base-ui.com) where it has a
7
+ primitive. base-ui handles focus, keyboard navigation, portals and
8
+ validation. This package adds styling and a simpler API.
9
+ - Apps use these components instead of raw HTML buttons, inputs or dialogs.
10
+ If one is missing, add it here. See
11
+ [/docs/guidelines/STYLING.md](../../docs/guidelines/STYLING.md).
13
12
 
14
13
  ## Exports
15
14
 
16
- | Export | What it is |
17
- |---|---|
18
- | `@domicile-desktop/component-library/Button` | Polymorphic button (`<button>` / `<a>`), variants + sizes. |
19
- | `@domicile-desktop/component-library/Input` | Text input with prefix-icon / clearable / invalid states. |
20
- | `@domicile-desktop/component-library/Textarea` | Auto-sizing textarea with a resize handle. |
21
- | `@domicile-desktop/component-library/Field` | Label + control + validation-message wrapper (base-ui Field). |
22
- | `@domicile-desktop/component-library/Select` | Select / listbox (base-ui Select). |
23
- | `@domicile-desktop/component-library/Autocomplete` | Text field with a caller-supplied list of suggestions under it (base-ui Autocomplete). The caller does the matching, so the list can rank and can offer a line that matches nothing typed. |
24
- | `@domicile-desktop/component-library/Tabs` | Tabbed container (base-ui Tabs): config-driven `tabs` array, a sliding active underline, `size` variants, inset focus ring. |
25
- | `@domicile-desktop/component-library/TabRail` | Vertical rail of tabs with a brand slot, footer, and collapse. |
26
- | `@domicile-desktop/component-library/Card` | Elevated surface with optional title / footer. |
27
- | `@domicile-desktop/component-library/ModalDialog` | Modal dialog with flattened `title` / `footer` / `trigger` API. |
28
- | `@domicile-desktop/component-library/SlideOver` | Edge-anchored drawer (base-ui Dialog). |
29
- | `@domicile-desktop/component-library/Toaster` | Toasts as a deck in a box's top trailing corner — fans out on hover, swipes away, a countdown along each (base-ui Toast). The caller draws each card. |
30
- | `@domicile-desktop/component-library/Popover` | Non-modal panel anchored to the control that opened it (base-ui Popover), for detail a control has no room for. |
31
- | `@domicile-desktop/component-library/Avatar` | Avatar with initials / gradient fallback. |
32
- | `@domicile-desktop/component-library/Kbd` | Keyboard-shortcut key cap. |
33
- | `@domicile-desktop/component-library/Screen` | Lays its children over one of the desktop's displays, once per display it selects. |
34
- | `@domicile-desktop/component-library/DisplayProvider` | The desktop the host described, for the `<Screen>`s below it. |
35
- | `@domicile-desktop/component-library/display-source` | The `Display` / `DisplaySource` types a `DisplayProvider` is fed. |
36
- | `@domicile-desktop/component-library/Provider` | base-ui `DirectionProvider` wrapper every app roots its tree in. |
37
- | `@domicile-desktop/component-library/ThemeProvider` | Theme state (`light` / `dark` / `system`) and the `<html data-theme>` side effect. |
38
- | `@domicile-desktop/component-library/ThemeSwitch` | The toggle that cycles the theme preference. |
39
- | `@domicile-desktop/component-library/control-sizes` | The `Size` union / `SIZES` array the sized controls share. |
40
- | `@domicile-desktop/component-library/spacing` | The rem value of one step on the spacing scale, for runtime math. |
41
- | `@domicile-desktop/component-library/pandacss-preset` | The `domicilePreset` every package's `panda.config.ts` extends. |
42
- | `@domicile-desktop/component-library/vite-shell` | `shellBuild({ entry })` — the vite build a shell has to have for Domicile to serve it: a module entry rather than an HTML one, a fixed `shell.js` name, the entry's exports kept (`Shell` is what Domicile calls), and the stylesheet folded into the JavaScript. Each of the four fails quietly if you get it wrong. |
43
-
44
- Styling goes through the theme defined in the preset
45
- (`pandacss-preset.ts`) — `color`, `spacing`, `borderRadius`, etc. — with
46
- both dark (default) and light (`data-theme="light"`) values. Component
47
- variants are exposed as explicit props, never a `className` passthrough;
48
- `data-*` attributes communicate variant/state to CSS.
49
-
50
- ## Conventions
15
+ Each export is `@domicile-desktop/component-library/<name>`.
51
16
 
52
- - Every component has a Storybook story (`*.stories.tsx`) with `argTypes` for
53
- every prop.
54
- - Every component has tests (`*.test.tsx`) using `bun:test` +
55
- `@testing-library/react`.
56
- - Icons come from `@phosphor-icons/react/dist/ssr/<IconName>` (the
57
- `*Icon`-suffixed name), never the barrel — see
58
- [/docs/guidelines/ICONS.md](../../docs/guidelines/ICONS.md).
59
-
60
- The rules for adding or changing a component (directory layout, base-ui
61
- wrapping, props typing, the `control` recipe, storybook categories, testing)
62
- live in [`docs/AGENTS.md`](./docs/AGENTS.md) and the topic docs it indexes.
17
+ | Name | What it is |
18
+ |---|---|
19
+ | `Accordion` | Stack of sections that open and close. |
20
+ | `Autocomplete` | Text field with a suggestion list the caller supplies and ranks. |
21
+ | `Avatar` | Avatar with an initials or gradient fallback. |
22
+ | `Button` | Button or link, with variants and sizes. |
23
+ | `Card` | Raised surface with optional title and footer. |
24
+ | `Drilldown` | View that slides a second panel in from the side, with a back button. |
25
+ | `Field` | Label, control and validation message. |
26
+ | `Input` | Text input with prefix icon, clear button and invalid state. |
27
+ | `Kbd` | Keyboard key cap. |
28
+ | `ModalDialog` | Modal dialog with `title`, `footer` and `trigger` props. |
29
+ | `Popover` | Non-modal panel anchored to the control that opened it. |
30
+ | `Provider` | base-ui `DirectionProvider` wrapper. Every app roots its tree in it. |
31
+ | `Screen` | Renders its children once per selected display. |
32
+ | `DisplayProvider` | Supplies the host's displays to `Screen`. |
33
+ | `display-source` | `Display` and `DisplaySource` types for `DisplayProvider`. |
34
+ | `Select` | Select / listbox. |
35
+ | `SlideOver` | Drawer anchored to a screen edge. |
36
+ | `Slider` | Single-value range slider drawn in `currentcolor`. |
37
+ | `Tabs` | Tab set built from a `tabs` array, with sizes. |
38
+ | `TabRail` | Vertical tab rail with brand slot, footer and collapse. |
39
+ | `Textarea` | Auto-sizing textarea with a resize handle. |
40
+ | `Toaster` | Stack of toasts in a corner. The caller renders each card. |
41
+ | `ThemeProvider` | Light/dark theme state. Sets `data-theme` on `<html>`. |
42
+ | `ThemeSwitch` | Button that flips the theme. |
43
+ | `theme-core`, `theme-source`, `standalone-theme-source` | Theme types and sources. Use the standalone source where there is no compositor, such as Storybook. |
44
+ | `control-sizes` | `Size` type and `SIZES` array for sized controls. |
45
+ | `spacing` | rem value of one spacing step, for runtime math. |
46
+ | `pandacss-preset` | `domicilePreset`, extended by every package's `panda.config.ts`. |
47
+ | `vite-shell` | `shellBuild({ entry })`: the Vite config a shell needs so Domicile can load it. See the comments in `src/vite-shell.ts`. |
63
48
 
64
49
  ## Scripts
65
50
 
66
51
  ```sh
67
- bun run start:dev # Storybook dev server on port 4000
68
- bun run build:storybook # build static Storybook into storybook-static/
52
+ bun run start:dev # Storybook on port 4000
53
+ bun run build:storybook # build Storybook into storybook-static/
69
54
  bun run start:prod # serve that build on port 4000
70
- bun run prepare # panda codegen (generates styled-system/)
55
+ bun run prepare # Panda codegen into styled-system/
71
56
  bun run test:unit # bun:test + happy-dom
72
57
  bun run test:types # tsc --noEmit
73
58
  ```
74
59
 
75
- From the repo root, `bun run turbo test --filter @domicile-desktop/component-library`
76
- runs the type check and the unit tests together.
60
+ ## More
61
+
62
+ - [docs/AGENTS.md](./docs/AGENTS.md): rules for adding or changing a
63
+ component.
package/package.json CHANGED
@@ -88,5 +88,5 @@
88
88
  "test:unit": "bun test"
89
89
  },
90
90
  "type": "module",
91
- "version": "0.0.0-alpha-2bbfd97dde33"
91
+ "version": "0.0.0-alpha-dfe919592a6b"
92
92
  }