@impulse-ui-native/storybook 3.0.0 → 5.0.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 +4 -2
- package/dist/components/story-documentation-page.js +3 -2
- package/dist/components/story-documentation-page.js.map +1 -1
- package/dist/components/story-example.js +1 -1
- package/dist/components/story-example.js.map +1 -1
- package/dist/constants/index.d.mts +1 -1
- package/dist/constants/storybook.constants.d.mts +7 -2
- package/dist/constants/storybook.constants.js +22 -4
- package/dist/constants/storybook.constants.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/package.json +24 -20
package/README.md
CHANGED
|
@@ -15,7 +15,9 @@ This is an authoring-support package rather than a UI component package.
|
|
|
15
15
|
- `createStoryDescription(notes)` produces the notes metadata for an individual story.
|
|
16
16
|
- `createComponentDescription(notes)` produces component-level notes metadata.
|
|
17
17
|
- `ComponentSizeOptions` contains `small`, `medium`, and `large`.
|
|
18
|
-
- `
|
|
18
|
+
- `ActionVariantOptions`, `DisplayVariantOptions`, `FieldVariantOptions`, and
|
|
19
|
+
`SelectionVariantOptions` expose the variants supported by each component
|
|
20
|
+
family.
|
|
19
21
|
|
|
20
22
|
## Usage
|
|
21
23
|
|
|
@@ -34,4 +36,4 @@ export default {
|
|
|
34
36
|
};
|
|
35
37
|
```
|
|
36
38
|
|
|
37
|
-
The package source also contains the toolkit's stories and documentation screens for primitives, inputs, selection, date and time, feedback, navigation, overlays, portals, icons, and charts. Those files are discovered directly by the
|
|
39
|
+
The package source also contains the toolkit's stories and documentation screens for primitives, inputs, selection, date and time, feedback, navigation, overlays, portals, icons, and charts. Those files are discovered directly by the Storybook host and are not part of the public root export.
|
|
@@ -2,17 +2,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo } from "react";
|
|
3
3
|
import { ScrollView } from "react-native";
|
|
4
4
|
import { Typography, View } from "@impulse-ui-native/primitives";
|
|
5
|
-
import { useSpace } from "@impulse-ui-native/theme";
|
|
5
|
+
import { useColors, useSpace } from "@impulse-ui-native/theme";
|
|
6
6
|
const StoryDocumentationPage = memo(function StoryDocumentationPage2({
|
|
7
7
|
title,
|
|
8
8
|
description,
|
|
9
9
|
children
|
|
10
10
|
}) {
|
|
11
|
+
const colors = useColors();
|
|
11
12
|
const space = useSpace();
|
|
12
13
|
return /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsxs(View, { gap: space.md, padding: space.sm, children: [
|
|
13
14
|
/* @__PURE__ */ jsxs(View, { gap: space.xs, children: [
|
|
14
15
|
/* @__PURE__ */ jsx(Typography.Title2, { children: title }),
|
|
15
|
-
description ? /* @__PURE__ */ jsx(Typography.Master, { children: description }) : null
|
|
16
|
+
description ? /* @__PURE__ */ jsx(Typography.Master, { color: colors.text.secondary, children: description }) : null
|
|
16
17
|
] }),
|
|
17
18
|
/* @__PURE__ */ jsx(View, { gap: space.md, children })
|
|
18
19
|
] }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/story-documentation-page.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo } from \"react\";\nimport { ScrollView } from \"react-native\";\n\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useSpace } from \"@impulse-ui-native/theme\";\n\ninterface StoryDocumentationPageProps extends PropsWithChildren {\n title: string;\n description?: string;\n}\n\nexport const StoryDocumentationPage = memo(function StoryDocumentationPage({\n title,\n description,\n children,\n}: StoryDocumentationPageProps) {\n const space = useSpace();\n\n return (\n <ScrollView>\n <View gap={space.md} padding={space.sm}>\n <View gap={space.xs}>\n <Typography.Title2>{title}</Typography.Title2>\n\n {description ? (\n <Typography.Master
|
|
1
|
+
{"version":3,"sources":["../../src/components/story-documentation-page.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo } from \"react\";\nimport { ScrollView } from \"react-native\";\n\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useColors, useSpace } from \"@impulse-ui-native/theme\";\n\ninterface StoryDocumentationPageProps extends PropsWithChildren {\n title: string;\n description?: string;\n}\n\nexport const StoryDocumentationPage = memo(function StoryDocumentationPage({\n title,\n description,\n children,\n}: StoryDocumentationPageProps) {\n const colors = useColors();\n const space = useSpace();\n\n return (\n <ScrollView>\n <View gap={space.md} padding={space.sm}>\n <View gap={space.xs}>\n <Typography.Title2>{title}</Typography.Title2>\n\n {description ? (\n <Typography.Master color={colors.text.secondary}>\n {description}\n </Typography.Master>\n ) : null}\n </View>\n\n <View gap={space.md}>{children}</View>\n </View>\n </ScrollView>\n );\n});\n"],"mappings":"AAuBQ,SACE,KADF;AAtBR,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAE3B,SAAS,YAAY,YAAY;AACjC,SAAS,WAAW,gBAAgB;AAO7B,MAAM,yBAAyB,KAAK,SAASA,wBAAuB;AAAA,EACzE;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,SAAS,UAAU;AACzB,QAAM,QAAQ,SAAS;AAEvB,SACE,oBAAC,cACC,+BAAC,QAAK,KAAK,MAAM,IAAI,SAAS,MAAM,IAClC;AAAA,yBAAC,QAAK,KAAK,MAAM,IACf;AAAA,0BAAC,WAAW,QAAX,EAAmB,iBAAM;AAAA,MAEzB,cACC,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,KAAK,WACnC,uBACH,IACE;AAAA,OACN;AAAA,IAEA,oBAAC,QAAK,KAAK,MAAM,IAAK,UAAS;AAAA,KACjC,GACF;AAEJ,CAAC;","names":["StoryDocumentationPage"]}
|
|
@@ -23,7 +23,7 @@ const StoryExample = memo(function StoryExample2({
|
|
|
23
23
|
children: [
|
|
24
24
|
/* @__PURE__ */ jsxs(View, { gap: space.xs, children: [
|
|
25
25
|
/* @__PURE__ */ jsx(Typography.Title4, { children: title }),
|
|
26
|
-
/* @__PURE__ */ jsx(Typography.Master, { children: description })
|
|
26
|
+
/* @__PURE__ */ jsx(Typography.Master, { color: colors.text.secondary, children: description })
|
|
27
27
|
] }),
|
|
28
28
|
props?.length ? /* @__PURE__ */ jsxs(View, { gap: space.sm, children: [
|
|
29
29
|
/* @__PURE__ */ jsx(Typography.Overline, { children: "Props" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/story-example.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo } from \"react\";\n\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useColors, useRadii, useSpace } from \"@impulse-ui-native/theme\";\n\nexport interface StoryExamplePropDefinition {\n name: string;\n value: string;\n description?: string;\n}\n\ninterface StoryExampleProps extends PropsWithChildren {\n title: string;\n description: string;\n props?: StoryExamplePropDefinition[];\n elevated?: boolean;\n}\n\nexport const StoryExample = memo(function StoryExample({\n title,\n description,\n props,\n children,\n elevated,\n}: StoryExampleProps) {\n const colors = useColors();\n const radii = useRadii();\n const space = useSpace();\n\n return (\n <View\n gap={space.md}\n padding={space.sm}\n borderRadius={elevated ? radii.sm : undefined}\n backgroundColor={elevated ? colors.surface.elevated.value : undefined}\n shadow={elevated ? \"sm\" : undefined}\n >\n <View gap={space.xs}>\n <Typography.Title4>{title}</Typography.Title4>\n <Typography.Master
|
|
1
|
+
{"version":3,"sources":["../../src/components/story-example.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo } from \"react\";\n\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useColors, useRadii, useSpace } from \"@impulse-ui-native/theme\";\n\nexport interface StoryExamplePropDefinition {\n name: string;\n value: string;\n description?: string;\n}\n\ninterface StoryExampleProps extends PropsWithChildren {\n title: string;\n description: string;\n props?: StoryExamplePropDefinition[];\n elevated?: boolean;\n}\n\nexport const StoryExample = memo(function StoryExample({\n title,\n description,\n props,\n children,\n elevated,\n}: StoryExampleProps) {\n const colors = useColors();\n const radii = useRadii();\n const space = useSpace();\n\n return (\n <View\n gap={space.md}\n padding={space.sm}\n borderRadius={elevated ? radii.sm : undefined}\n backgroundColor={elevated ? colors.surface.elevated.value : undefined}\n shadow={elevated ? \"sm\" : undefined}\n >\n <View gap={space.xs}>\n <Typography.Title4>{title}</Typography.Title4>\n <Typography.Master color={colors.text.secondary}>\n {description}\n </Typography.Master>\n </View>\n\n {props?.length ? (\n <View gap={space.sm}>\n <Typography.Overline>Props</Typography.Overline>\n\n <View gap={space.xs}>\n {props.map((prop) => (\n <View\n key={prop.name}\n gap={space.xs}\n padding={space.xs}\n borderRadius={radii.md}\n backgroundColor={colors.surface.secondary.value}\n >\n <View\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n gap={space.sm}\n >\n <Typography.Label>{prop.name}</Typography.Label>\n\n <View\n paddingHorizontal={space.xs}\n paddingVertical={space.xxs}\n borderRadius={radii.sm}\n backgroundColor={colors.surface.primary.value}\n >\n <Typography.Code>{prop.value}</Typography.Code>\n </View>\n </View>\n\n {prop.description ? (\n <Typography.Helper>{prop.description}</Typography.Helper>\n ) : null}\n </View>\n ))}\n </View>\n </View>\n ) : null}\n\n <View gap={space.xs}>\n <Typography.Caption>Preview</Typography.Caption>\n {children}\n </View>\n </View>\n );\n});\n"],"mappings":"AAsCM,SACE,KADF;AArCN,SAAS,YAAY;AAErB,SAAS,YAAY,YAAY;AACjC,SAAS,WAAW,UAAU,gBAAgB;AAevC,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,SAAS,UAAU;AACzB,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACX,SAAS,MAAM;AAAA,MACf,cAAc,WAAW,MAAM,KAAK;AAAA,MACpC,iBAAiB,WAAW,OAAO,QAAQ,SAAS,QAAQ;AAAA,MAC5D,QAAQ,WAAW,OAAO;AAAA,MAE1B;AAAA,6BAAC,QAAK,KAAK,MAAM,IACf;AAAA,8BAAC,WAAW,QAAX,EAAmB,iBAAM;AAAA,UAC1B,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,KAAK,WACnC,uBACH;AAAA,WACF;AAAA,QAEC,OAAO,SACN,qBAAC,QAAK,KAAK,MAAM,IACf;AAAA,8BAAC,WAAW,UAAX,EAAoB,mBAAK;AAAA,UAE1B,oBAAC,QAAK,KAAK,MAAM,IACd,gBAAM,IAAI,CAAC,SACV;AAAA,YAAC;AAAA;AAAA,cAEC,KAAK,MAAM;AAAA,cACX,SAAS,MAAM;AAAA,cACf,cAAc,MAAM;AAAA,cACpB,iBAAiB,OAAO,QAAQ,UAAU;AAAA,cAE1C;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,YAAW;AAAA,oBACX,gBAAe;AAAA,oBACf,KAAK,MAAM;AAAA,oBAEX;AAAA,0CAAC,WAAW,OAAX,EAAkB,eAAK,MAAK;AAAA,sBAE7B;AAAA,wBAAC;AAAA;AAAA,0BACC,mBAAmB,MAAM;AAAA,0BACzB,iBAAiB,MAAM;AAAA,0BACvB,cAAc,MAAM;AAAA,0BACpB,iBAAiB,OAAO,QAAQ,QAAQ;AAAA,0BAExC,8BAAC,WAAW,MAAX,EAAiB,eAAK,OAAM;AAAA;AAAA,sBAC/B;AAAA;AAAA;AAAA,gBACF;AAAA,gBAEC,KAAK,cACJ,oBAAC,WAAW,QAAX,EAAmB,eAAK,aAAY,IACnC;AAAA;AAAA;AAAA,YA1BC,KAAK;AAAA,UA2BZ,CACD,GACH;AAAA,WACF,IACE;AAAA,QAEJ,qBAAC,QAAK,KAAK,MAAM,IACf;AAAA,8BAAC,WAAW,SAAX,EAAmB,qBAAO;AAAA,UAC1B;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["StoryExample"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { ComponentSizeOptions, ComponentVariantOptions } from './storybook.constants.mjs';
|
|
1
|
+
export { ActionVariantOptions, ComponentSizeOptions, ComponentVariantOptions, DisplayVariantOptions, FieldVariantOptions, SelectionVariantOptions } from './storybook.constants.mjs';
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
declare const ComponentSizeOptions: ("small" | "medium" | "large")[];
|
|
2
|
-
declare const
|
|
2
|
+
declare const ActionVariantOptions: ("filled" | "outlined" | "soft" | "ghost")[];
|
|
3
|
+
declare const DisplayVariantOptions: ("filled" | "outlined" | "soft")[];
|
|
4
|
+
declare const FieldVariantOptions: ("filled" | "outlined")[];
|
|
5
|
+
declare const SelectionVariantOptions: ("filled" | "outlined" | "soft")[];
|
|
6
|
+
/** @deprecated Use the options for the relevant component family. */
|
|
7
|
+
declare const ComponentVariantOptions: ("filled" | "outlined" | "soft" | "ghost")[];
|
|
3
8
|
|
|
4
|
-
export { ComponentSizeOptions, ComponentVariantOptions };
|
|
9
|
+
export { ActionVariantOptions, ComponentSizeOptions, ComponentVariantOptions, DisplayVariantOptions, FieldVariantOptions, SelectionVariantOptions };
|
|
@@ -3,15 +3,33 @@ const ComponentSizeOptions = [
|
|
|
3
3
|
"medium",
|
|
4
4
|
"large"
|
|
5
5
|
];
|
|
6
|
-
const
|
|
6
|
+
const ActionVariantOptions = [
|
|
7
7
|
"filled",
|
|
8
8
|
"outlined",
|
|
9
9
|
"soft",
|
|
10
|
-
"ghost"
|
|
11
|
-
"plain"
|
|
10
|
+
"ghost"
|
|
12
11
|
];
|
|
12
|
+
const DisplayVariantOptions = [
|
|
13
|
+
"filled",
|
|
14
|
+
"outlined",
|
|
15
|
+
"soft"
|
|
16
|
+
];
|
|
17
|
+
const FieldVariantOptions = [
|
|
18
|
+
"filled",
|
|
19
|
+
"outlined"
|
|
20
|
+
];
|
|
21
|
+
const SelectionVariantOptions = [
|
|
22
|
+
"filled",
|
|
23
|
+
"outlined",
|
|
24
|
+
"soft"
|
|
25
|
+
];
|
|
26
|
+
const ComponentVariantOptions = ActionVariantOptions;
|
|
13
27
|
export {
|
|
28
|
+
ActionVariantOptions,
|
|
14
29
|
ComponentSizeOptions,
|
|
15
|
-
ComponentVariantOptions
|
|
30
|
+
ComponentVariantOptions,
|
|
31
|
+
DisplayVariantOptions,
|
|
32
|
+
FieldVariantOptions,
|
|
33
|
+
SelectionVariantOptions
|
|
16
34
|
};
|
|
17
35
|
//# sourceMappingURL=storybook.constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/storybook.constants.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"sources":["../../src/constants/storybook.constants.ts"],"sourcesContent":["import type {\n ActionVariant,\n ComponentSize,\n DisplayVariant,\n FieldVariant,\n SelectionVariant,\n} from \"@impulse-ui-native/theme\";\n\nexport const ComponentSizeOptions = [\n \"small\",\n \"medium\",\n \"large\",\n] satisfies ComponentSize[];\n\nexport const ActionVariantOptions = [\n \"filled\",\n \"outlined\",\n \"soft\",\n \"ghost\",\n] satisfies ActionVariant[];\n\nexport const DisplayVariantOptions = [\n \"filled\",\n \"outlined\",\n \"soft\",\n] satisfies DisplayVariant[];\n\nexport const FieldVariantOptions = [\n \"filled\",\n \"outlined\",\n] satisfies FieldVariant[];\n\nexport const SelectionVariantOptions = [\n \"filled\",\n \"outlined\",\n \"soft\",\n] satisfies SelectionVariant[];\n\n/** @deprecated Use the options for the relevant component family. */\nexport const ComponentVariantOptions = ActionVariantOptions;\n"],"mappings":"AAQO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,sBAAsB;AAAA,EACjC;AAAA,EACA;AACF;AAEO,MAAM,0BAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,0BAA0B;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { createComponentDescription, createStoryDescription } from './utils/storybook.utils.mjs';
|
|
2
|
-
export { ComponentSizeOptions, ComponentVariantOptions } from './constants/storybook.constants.mjs';
|
|
2
|
+
export { ActionVariantOptions, ComponentSizeOptions, ComponentVariantOptions, DisplayVariantOptions, FieldVariantOptions, SelectionVariantOptions } from './constants/storybook.constants.mjs';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/storybook",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "Shared Storybook stories and configuration for ImpulseUI Native components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/icon": "5.0.0",
|
|
32
|
+
"@impulse-ui-native/theme": "5.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "5.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@shopify/react-native-skia": "2.6.2",
|
|
@@ -41,25 +41,29 @@
|
|
|
41
41
|
"react": "19.2.3",
|
|
42
42
|
"react-native": "0.86.2",
|
|
43
43
|
"typescript": "~6.0.3",
|
|
44
|
-
"@impulse-ui-native/accordion": "
|
|
45
|
-
"@impulse-ui-native/
|
|
46
|
-
"@impulse-ui-native/
|
|
44
|
+
"@impulse-ui-native/accordion": "5.0.0",
|
|
45
|
+
"@impulse-ui-native/core": "5.0.0",
|
|
46
|
+
"@impulse-ui-native/charts": "5.0.0",
|
|
47
|
+
"@impulse-ui-native/checkbox": "5.0.0",
|
|
48
|
+
"@impulse-ui-native/data-state": "5.0.0",
|
|
49
|
+
"@impulse-ui-native/datetime": "5.0.0",
|
|
47
50
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
48
|
-
"@impulse-ui-native/flyout": "
|
|
49
|
-
"@impulse-ui-native/
|
|
50
|
-
"@impulse-ui-native/
|
|
51
|
-
"@impulse-ui-native/
|
|
52
|
-
"@impulse-ui-native/
|
|
53
|
-
"@impulse-ui-native/overlay": "
|
|
54
|
-
"@impulse-ui-native/portal": "3.0.0",
|
|
51
|
+
"@impulse-ui-native/flyout": "5.0.0",
|
|
52
|
+
"@impulse-ui-native/form-field": "5.0.0",
|
|
53
|
+
"@impulse-ui-native/input": "5.0.0",
|
|
54
|
+
"@impulse-ui-native/pagination": "5.0.0",
|
|
55
|
+
"@impulse-ui-native/portal": "5.0.0",
|
|
56
|
+
"@impulse-ui-native/overlay": "5.0.0",
|
|
55
57
|
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
56
|
-
"@impulse-ui-native/radio": "
|
|
57
|
-
"@impulse-ui-native/
|
|
58
|
-
"@impulse-ui-native/select": "
|
|
59
|
-
"@impulse-ui-native/
|
|
60
|
-
"@impulse-ui-native/
|
|
58
|
+
"@impulse-ui-native/radio": "5.0.0",
|
|
59
|
+
"@impulse-ui-native/segmented-control": "5.0.0",
|
|
60
|
+
"@impulse-ui-native/select": "5.0.0",
|
|
61
|
+
"@impulse-ui-native/stepper": "5.0.0",
|
|
62
|
+
"@impulse-ui-native/skeleton": "5.0.0",
|
|
63
|
+
"@impulse-ui-native/slider": "5.0.0",
|
|
64
|
+
"@impulse-ui-native/switch": "5.0.0",
|
|
61
65
|
"@impulse-ui-native/tsconfig": "1.0.0",
|
|
62
|
-
"@impulse-ui-native/
|
|
66
|
+
"@impulse-ui-native/carousel": "5.0.0"
|
|
63
67
|
},
|
|
64
68
|
"peerDependencies": {
|
|
65
69
|
"react": ">=18",
|