@charcuterie/ui 3.4.0 → 3.4.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 +8 -0
- package/package.json +1 -1
- package/src/Accordion/Accordion.stories.tsx +1 -1
- package/src/AdaptiveGrid/AdaptiveGrid.stories.tsx +1 -1
- package/src/Alert/Alert.stories.tsx +1 -1
- package/src/Badge/Badge.stories.tsx +1 -1
- package/src/Board/Board.stories.tsx +1 -1
- package/src/Button/Button.stories.tsx +1 -1
- package/src/ButtonLink/ButtonLink.stories.tsx +1 -1
- package/src/Card/Card.stories.tsx +1 -1
- package/src/Checkbox/Checkbox.stories.tsx +1 -1
- package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.stories.tsx +1 -1
- package/src/ColorSchemeToggle/ColorSchemeToggle.stories.tsx +1 -1
- package/src/Combobox/Combobox.stories.tsx +1 -1
- package/src/DataTable/DataTable.stories.tsx +1 -1
- package/src/DatePicker/DatePicker.stories.tsx +1 -1
- package/src/Dialog/Dialog.stories.tsx +1 -1
- package/src/EmptyState/EmptyState.stories.tsx +1 -1
- package/src/Field/Field.stories.tsx +1 -1
- package/src/FileDropZone/FileDropZone.stories.tsx +1 -1
- package/src/Header/Header.stories.tsx +1 -1
- package/src/IconButton/IconButton.stories.tsx +1 -1
- package/src/Lightbox/Lightbox.stories.tsx +1 -1
- package/src/Listbox/Listbox.stories.tsx +1 -1
- package/src/LiveStatusIndicator/LiveStatusIndicator.stories.tsx +1 -1
- package/src/LogViewer/LogViewer.stories.tsx +1 -1
- package/src/Main/Main.stories.tsx +1 -1
- package/src/MarkdownEditor/MarkdownEditor.stories.tsx +1 -1
- package/src/MediaTile/MediaTile.stories.tsx +1 -1
- package/src/Menu/Menu.stories.tsx +1 -1
- package/src/Modal/Modal.stories.tsx +1 -1
- package/src/Picker/Picker.stories.tsx +1 -1
- package/src/Popover/Popover.stories.tsx +1 -1
- package/src/ProgressBar/ProgressBar.stories.tsx +1 -1
- package/src/QueryBuilder/QueryBuilder.stories.tsx +1 -1
- package/src/RadioGroup/RadioGroup.stories.tsx +1 -1
- package/src/Rail/Rail.stories.tsx +1 -1
- package/src/SegmentedControl/SegmentedControl.stories.tsx +1 -1
- package/src/Select/Select.stories.tsx +17 -6
- package/src/Shell/Shell.stories.tsx +1 -1
- package/src/Skeleton/Skeleton.stories.tsx +1 -1
- package/src/SortableTableHeader/SortableTableHeader.stories.tsx +1 -1
- package/src/Spinner/Spinner.stories.tsx +1 -1
- package/src/Swatch/Swatch.stories.tsx +1 -1
- package/src/Switch/Switch.stories.tsx +1 -1
- package/src/Tabs/Tabs.stories.tsx +1 -1
- package/src/TextLink/TextLink.stories.tsx +1 -1
- package/src/Toast/Toast.stories.tsx +1 -1
- package/src/Toolbar/Toolbar.stories.tsx +1 -1
- package/src/Tooltip/Tooltip.stories.tsx +1 -1
- package/src/VisuallyHidden/VisuallyHidden.stories.tsx +1 -1
- package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.stories.tsx +1 -1
package/README.md
CHANGED
|
@@ -176,6 +176,14 @@ rename breaks only the rendered page).
|
|
|
176
176
|
|
|
177
177
|
1. `src/<Name>/<Name>.tsx`, `.stories.tsx`, `.mdx`, `.test.tsx` — siblings, matching
|
|
178
178
|
mux-magic. The story shows it; the test drives it. Neither does the other's job.
|
|
179
|
+
**The story's `title` is `Components/<Group>/<Name>`**, and the group is one of
|
|
180
|
+
`Actions` (it does something), `Controls` (it takes a value), `Overlays` (it renders
|
|
181
|
+
over the page), `Layout` (it arranges other things), `Data` (it shows a set) or
|
|
182
|
+
`Feedback` (it reports state). Nothing composable goes at the top level; a helper that
|
|
183
|
+
is not a component — `VisuallyHidden`, `Scrollbar` — is `Utilities/<Name>`. Group order
|
|
184
|
+
in the sidebar comes from `packages/docs/.storybook/preview.tsx`, and an unlisted group
|
|
185
|
+
sorts last instead of silently displacing `Actions`
|
|
186
|
+
([decision](../../docs/decisions/2026-08-21-a-deprecation-is-a-badge-in-place-and-the-sidebar-has-groups.md)).
|
|
179
187
|
2. Colours from `intentStyles.ts`, sizes from `controlStyles.ts`. No hex, no `*-slate-*`
|
|
180
188
|
(a test checks).
|
|
181
189
|
3. The five stories: `Default`, `AllVariants`, `AllStates`, `Responsive` (three container
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@ import { ProgressBar } from "../ProgressBar/ProgressBar.tsx"
|
|
|
15
15
|
import { Card, ELEVATION_CLASS } from "./Card.tsx"
|
|
16
16
|
|
|
17
17
|
const meta = {
|
|
18
|
-
title: "Components/Card",
|
|
18
|
+
title: "Components/Layout/Card",
|
|
19
19
|
component: Card,
|
|
20
20
|
parameters: { layout: "padded" },
|
|
21
21
|
argTypes: {
|
|
@@ -85,7 +85,7 @@ const ScopedSwitcherDemo = () => {
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
const meta = {
|
|
88
|
-
title: "
|
|
88
|
+
title: "Utilities/ColorSchemeSwitcher",
|
|
89
89
|
component: ColorSchemeSwitcher,
|
|
90
90
|
parameters: { layout: "padded" },
|
|
91
91
|
// The three injected seams are functions/objects, not values a
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
import { EmptyState } from "./EmptyState.tsx"
|
|
17
17
|
|
|
18
18
|
const meta = {
|
|
19
|
-
title: "Components/EmptyState",
|
|
19
|
+
title: "Components/Feedback/EmptyState",
|
|
20
20
|
component: EmptyState,
|
|
21
21
|
parameters: { layout: "padded" },
|
|
22
22
|
args: { headingLevel: 2, size: "md" },
|
|
@@ -13,7 +13,7 @@ const TEXT_INPUT_CLASS =
|
|
|
13
13
|
"w-full rounded-md border border-border-default bg-surface-raised px-3 py-2 text-content-primary text-sm focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-focus-ring"
|
|
14
14
|
|
|
15
15
|
const meta = {
|
|
16
|
-
title: "Components/Field",
|
|
16
|
+
title: "Components/Controls/Field",
|
|
17
17
|
component: Field,
|
|
18
18
|
parameters: { layout: "padded" },
|
|
19
19
|
args: {
|
|
@@ -10,7 +10,7 @@ import { FileDropZone } from "./FileDropZone.tsx"
|
|
|
10
10
|
const noop = () => undefined
|
|
11
11
|
|
|
12
12
|
const meta = {
|
|
13
|
-
title: "Components/FileDropZone",
|
|
13
|
+
title: "Components/Controls/FileDropZone",
|
|
14
14
|
component: FileDropZone,
|
|
15
15
|
parameters: { layout: "padded" },
|
|
16
16
|
args: {
|
|
@@ -27,7 +27,7 @@ import { IconButton } from "./IconButton.tsx"
|
|
|
27
27
|
const UNDO_ICON = <UndoIcon />
|
|
28
28
|
|
|
29
29
|
const meta = {
|
|
30
|
-
title: "Components/IconButton",
|
|
30
|
+
title: "Components/Actions/IconButton",
|
|
31
31
|
component: IconButton,
|
|
32
32
|
parameters: { layout: "padded" },
|
|
33
33
|
argTypes: { size: controlSizeArgType },
|
|
@@ -24,7 +24,7 @@ const CONNECTION_STATUSES = [
|
|
|
24
24
|
] as const
|
|
25
25
|
|
|
26
26
|
const meta = {
|
|
27
|
-
title: "Components/LiveStatusIndicator",
|
|
27
|
+
title: "Components/Feedback/LiveStatusIndicator",
|
|
28
28
|
component: LiveStatusIndicator,
|
|
29
29
|
parameters: { layout: "padded" },
|
|
30
30
|
argTypes: { status: connectionStatusArgType },
|
|
@@ -25,7 +25,7 @@ const toPosterSrc = (label: string) =>
|
|
|
25
25
|
const MISSING_SRC = "/charcuterie-missing-poster.png"
|
|
26
26
|
|
|
27
27
|
const meta = {
|
|
28
|
-
title: "Components/MediaTile",
|
|
28
|
+
title: "Components/Data/MediaTile",
|
|
29
29
|
component: MediaTile,
|
|
30
30
|
parameters: { layout: "padded" },
|
|
31
31
|
args: { aspectRatio: "poster" },
|
|
@@ -24,7 +24,7 @@ const COLUMN_ITEMS: SegmentedItem[] = [
|
|
|
24
24
|
]
|
|
25
25
|
|
|
26
26
|
const meta = {
|
|
27
|
-
title: "Components/SegmentedControl",
|
|
27
|
+
title: "Components/Controls/SegmentedControl",
|
|
28
28
|
component: SegmentedControl,
|
|
29
29
|
parameters: { layout: "padded" },
|
|
30
30
|
argTypes: { size: controlSizeArgType },
|
|
@@ -41,13 +41,24 @@ const GROUPED: SelectItem[] = [
|
|
|
41
41
|
]
|
|
42
42
|
|
|
43
43
|
const meta = {
|
|
44
|
-
|
|
45
|
-
// moving it: the sidebar is the first place an agent looks for a
|
|
46
|
-
// picker, and a `Select` sitting between `Rail` and `Shell` reads
|
|
47
|
-
// as a component in good standing. Nothing new gets one — `Picker`
|
|
48
|
-
// is the drop-in. See the 2026-08-20 deprecation record.
|
|
49
|
-
title: "Deprecated/Select",
|
|
44
|
+
title: "Components/Controls/Select",
|
|
50
45
|
component: Select,
|
|
46
|
+
/**
|
|
47
|
+
* Deprecated — `Picker` is the drop-in. This is a **label, not a
|
|
48
|
+
* relocation**: the component still lives beside the other
|
|
49
|
+
* controls, where somebody looking for a picker will actually
|
|
50
|
+
* find it, and the sidebar paints a badge on it there. A
|
|
51
|
+
* `Deprecated/` section instead of a label hides the warning from
|
|
52
|
+
* everyone who does not already know to look for it, which is
|
|
53
|
+
* exactly backwards.
|
|
54
|
+
*
|
|
55
|
+
* Manager entries take the **intersection** of their children's
|
|
56
|
+
* tags, so tagging the meta puts the badge on the `Select` node
|
|
57
|
+
* itself, not just on each story underneath it.
|
|
58
|
+
* `sidebar.renderLabel` in `@charcuterie/storybook-config/manager`
|
|
59
|
+
* is what draws it.
|
|
60
|
+
*/
|
|
61
|
+
tags: ["deprecated"],
|
|
51
62
|
parameters: { layout: "padded" },
|
|
52
63
|
argTypes: { size: controlSizeArgType },
|
|
53
64
|
args: {
|
|
@@ -10,7 +10,7 @@ import { Card } from "../Card/Card.tsx"
|
|
|
10
10
|
import { Skeleton } from "./Skeleton.tsx"
|
|
11
11
|
|
|
12
12
|
const meta = {
|
|
13
|
-
title: "Components/Skeleton",
|
|
13
|
+
title: "Components/Feedback/Skeleton",
|
|
14
14
|
component: Skeleton,
|
|
15
15
|
parameters: { layout: "padded" },
|
|
16
16
|
args: { lineCount: 1, shape: "block" },
|
|
@@ -30,7 +30,7 @@ const CELL_CLASS =
|
|
|
30
30
|
* every table gets wrong the same way.
|
|
31
31
|
*/
|
|
32
32
|
const meta = {
|
|
33
|
-
title: "Components/SortableTableHeader",
|
|
33
|
+
title: "Components/Data/SortableTableHeader",
|
|
34
34
|
component: SortableTableHeader,
|
|
35
35
|
parameters: { layout: "padded" },
|
|
36
36
|
args: { onSort: noop },
|
|
@@ -20,7 +20,7 @@ const noop = () => undefined
|
|
|
20
20
|
* is the documented way to hold one for an action anyway.
|
|
21
21
|
*/
|
|
22
22
|
const meta = {
|
|
23
|
-
title: "Components/Toast",
|
|
23
|
+
title: "Components/Overlays/Toast",
|
|
24
24
|
component: Toast,
|
|
25
25
|
parameters: { layout: "padded" },
|
|
26
26
|
argTypes: { intent: intentArgType },
|
|
@@ -11,7 +11,7 @@ import { SettingsIcon } from "../icons.storyHelpers.tsx"
|
|
|
11
11
|
import { Tooltip } from "./Tooltip.tsx"
|
|
12
12
|
|
|
13
13
|
const meta = {
|
|
14
|
-
title: "Components/Tooltip",
|
|
14
|
+
title: "Components/Overlays/Tooltip",
|
|
15
15
|
component: Tooltip,
|
|
16
16
|
parameters: { layout: "centered" },
|
|
17
17
|
argTypes: { placement: placementArgType },
|
|
@@ -19,7 +19,7 @@ import { VisuallyHidden } from "./VisuallyHidden.tsx"
|
|
|
19
19
|
* loses translation.
|
|
20
20
|
*/
|
|
21
21
|
const meta = {
|
|
22
|
-
title: "
|
|
22
|
+
title: "Utilities/VisuallyHidden",
|
|
23
23
|
component: VisuallyHidden,
|
|
24
24
|
parameters: { layout: "padded" },
|
|
25
25
|
} satisfies Meta<typeof VisuallyHidden>
|
|
@@ -48,7 +48,7 @@ Replacement rails ordered from https://example.invalid/product?id=1234
|
|
|
48
48
|
`
|
|
49
49
|
|
|
50
50
|
const meta = {
|
|
51
|
-
title: "Components/MarkdownEditorCodeMirror",
|
|
51
|
+
title: "Components/Controls/MarkdownEditorCodeMirror",
|
|
52
52
|
component: MarkdownEditorCodeMirror,
|
|
53
53
|
parameters: { layout: "padded" },
|
|
54
54
|
args: {
|