Add storybook to all categories

Include storybook previews for all components.

base/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@types/node": "^18.14.1",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",

categories/web/action/react/src/components/ActionButton/ActionButton.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { ActionButton, ActionButtonProps } from '.';
+import { ActionButton as Component, ActionButtonProps as Props } from '.';
 import { Button } from '@tesseract-design/web-base';
 
-const meta: Meta<typeof ActionButton> = {
-	component: ActionButton,
+const meta: Meta<typeof Component> = {
+	component: Component,
 	argTypes: {
 		type: {
 			control: { type: 'select' },
@@ -25,15 +25,15 @@ const meta: Meta<typeof ActionButton> = {
 			action: 'clicked',
 		},
 	},
-	args: ActionButton.defaultProps ?? {},
+	args: Component.defaultProps ?? {},
 };
 
-export const Story = (args: Omit<ActionButtonProps, 'ref'>) => (
-	<ActionButton
+export const ActionButton = (args: Omit<Props, 'ref'>) => (
+	<Component
 		{...args}
 	>
 		Button
-	</ActionButton>
+	</Component>
 );
 
 export default meta;

categories/web/blob/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/blob/react/src/components/FileSelectBox/FileSelectBox.stories.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { FileSelectBox as Component, FileSelectBoxProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		previewComponent: {
+			table: {
+				disable: true,
+			}
+		},
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: Component.defaultProps ?? {},
+};
+
+export const FileSelectBox = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/choice/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/choice/react/src/components/ComboBox/ComboBox.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ComboBox as Component, ComboBoxProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+		label: 'ComboBox',
+	},
+};
+
+export const ComboBox = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/choice/react/src/components/DropdownSelect/DropdownSelect.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { DropdownSelect as Component, DropdownSelectProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const DropdownSelect = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/choice/react/src/components/MenuSelect/MenuSelect.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { MenuSelect as Component, MenuSelectProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const MenuSelect = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/choice/react/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { RadioButton as Component, RadioButtonProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const RadioButton = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/choice/react/src/components/RadioTickBox/RadioTickBox.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { RadioTickBox as Component, RadioTickBoxProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const RadioTickBox = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/color/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/color/react/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ColorPicker as Component, ColorPickerProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const ColorPicker = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/color/react/src/components/Swatch/Swatch.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Swatch as Component, SwatchProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const Swatch = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/formatted/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/formatted/react/src/components/EmailInput/EmailInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { EmailInput as Component, EmailInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const EmailInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/formatted/react/src/components/PatternTextInput/PatternTextInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { PatternTextInput as Component, PatternTextInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const PatternTextInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/formatted/react/src/components/PhoneNumberInput/PhoneNumberInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { PhoneNumberInput as Component, PhoneNumberInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const PhoneNumberInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/formatted/react/src/components/UrlInput/UrlInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { UrlInput as Component, UrlInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const UrlInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/freeform/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/freeform/react/src/components/MaskedTextInput/MaskedTextInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { MaskedTextInput as Component, MaskedTextInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const MaskedTextInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/freeform/react/src/components/MultilineTextInput/MultilineTextInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { MultilineTextInput as Component, MultilineTextInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const MultilineTextInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/freeform/react/src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { TextInput as Component, TextInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const TextInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/information/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/information/react/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Badge as Component, BadgeProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const Badge = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/information/react/src/components/KeyValueTable/KeyValueTable.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { KeyValueTable as Component, KeyValueTableProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const KeyValueTable = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/multichoice/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { MenuMultiSelect as Component, MenuMultiSelectProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const MenuMultiSelect = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/multichoice/react/src/components/TagInput/TagInput.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { TagInput as Component, TagInputProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const TagInput = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/multichoice/react/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ToggleButton as Component, ToggleButtonProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const ToggleButton = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ToggleSwitch as Component, ToggleSwitchProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const ToggleSwitch = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/multichoice/react/src/components/ToggleTickBox/ToggleTickBox.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ToggleTickBox as Component, ToggleTickBoxProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const ToggleTickBox = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/navigation/react/package.json

@@ -13,7 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
-    "@storybook/react": "^7.3.2",
+    "@storybook/react": "^7.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/navigation/react/src/components/LinkButton/LinkButton.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { LinkButton, LinkButtonProps } from '.';
+import { LinkButton as Component, LinkButtonProps } from '.';
 import { Button } from '@tesseract-design/web-base';
 
-const meta: Meta<typeof LinkButton> = {
-	component: LinkButton,
+const meta: Meta<typeof Component> = {
+	component: Component,
 	argTypes: {
 		type: {
 			control: { type: 'select' },
@@ -25,15 +25,15 @@ const meta: Meta<typeof LinkButton> = {
 			action: 'clicked',
 		},
 	},
-	args: LinkButton.defaultProps ?? {},
+	args: Component.defaultProps ?? {},
 };
 
-export const Story = (args: Omit<LinkButtonProps, 'ref'>) => (
-	<LinkButton
+export const LinkButton = (args: Omit<LinkButtonProps, 'ref'>) => (
+	<Component
 		{...args}
 	>
 		Button
-	</LinkButton>
+	</Component>
 );
 
 export default meta;

categories/web/number/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/number/react/src/components/NumberSpinner/NumberSpinner.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { NumberSpinner as Component, NumberSpinnerProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const NumberSpinner = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/number/react/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Slider as Component, SliderProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const Slider = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/temporal/react/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

categories/web/temporal/react/src/components/DateDropdown/DateDropdown.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { DateDropdown as Component, DateDropdownProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const DateDropdown = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

categories/web/temporal/react/src/components/TimeSpinner/TimeSpinner.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { TimeSpinner as Component, TimeSpinnerProps as Props } from '.';
+
+const meta: Meta<typeof Component> = {
+	component: Component,
+	argTypes: {
+		onChange: {
+			table: {
+				disable: true,
+			},
+			action: 'changed',
+		},
+	},
+	args: {
+		...(Component.defaultProps ?? {}),
+	},
+};
+
+export const TimeSpinner = (args: Omit<Props, 'ref'>) => (
+	<Component
+		{...args}
+	/>
+);
+
+export default meta;

packages/amanuensis/package.json

@@ -16,6 +16,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@types/node": "^18.14.1",
     "@types/yargs": "^17.0.24",
     "eslint": "^8.35.0",

packages/audio-utils/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@types/node": "^18.14.1",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",

packages/blob-utils/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@types/mime-types": "^2.1.1",
     "@types/node": "^18.14.1",
     "eslint": "^8.35.0",

packages/image-utils/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@types/get-image-colors": "^4.0.2",
     "@types/node": "^18.14.1",
     "eslint": "^8.35.0",

packages/react-binary-data-canvas/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",

packages/react-blob-previews/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",

packages/react-refractor/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",

packages/react-utils/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",

packages/react-wavesurfer/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",

packages/text-utils/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@types/node": "^18.14.1",
     "@types/prismjs": "^1.26.0",
     "eslint": "^8.35.0",

packages/video-utils/package.json

@@ -13,6 +13,7 @@
     "pridepack"
   ],
   "devDependencies": {
+    "@storybook/react": "^7.3.2",
     "@types/node": "^18.14.1",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",

storybook/react/.storybook/main.ts

@@ -1,7 +1,12 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-	stories: ["../../../categories/web/*/react/src/**/*.stories.tsx"],
+	stories: [
+		{
+			directory: "../../../categories/web",
+			files: "*/react/src/**/*.stories.tsx",
+		}
+	],
 	addons: [
 		"@storybook/addon-links",
 		"@storybook/addon-essentials",

storybook/react/.storybook/preview-head.html

@@ -0,0 +1,25 @@
+<style>
+  :root {
+    --color-shade: 0 0 0;
+    --color-negative: 34 34 34;
+    --color-positive: 238 238 238;
+    --color-primary: 199 138 179;
+    --color-secondary: 215 95 75;
+    --color-tertiary: 255 153 0;
+    --color-code-number: 116 249 94;
+    --color-code-keyword: 255 67 137;
+    --color-code-type: 80 151 210;
+    --color-code-instance-attribute: 118 167 210;
+    --color-code-function: 103 194 82;
+    --color-code-parameter: 145 94 194;
+    --color-code-property: 255 161 201;
+    --color-code-string: 238 211 113;
+    --color-code-variable: 139 194 117;
+    --color-code-regexp: 116 167 43;
+    --color-code-url: 0 153 204;
+    --color-code-global: 194 128 80;
+    --font-sans: Encode Sans, sans-serif;
+    --font-headings: Glory, var(--font-sans), sans-serif;
+    --font-mono: MonoLisa, mononoki, monospace;
+  }
+</style>

storybook/react/index.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind utilities;
 @tailwind components;
-
-:root {
---color-shade: 0 0 0;
---color-negative: 34 34 34;
---color-positive: 238 238 238;
---color-primary: 199 138 179;
---color-secondary: 215 95 75;
---color-tertiary: 255 153 0;
---color-code-number: 116 249 94;
---color-code-keyword: 255 67 137;
---color-code-type: 80 151 210;
---color-code-instance-attribute: 118 167 210;
---color-code-function: 103 194 82;
---color-code-parameter: 145 94 194;
---color-code-property: 255 161 201;
---color-code-string: 238 211 113;
---color-code-variable: 139 194 117;
---color-code-regexp: 116 167 43;
---color-code-url: 0 153 204;
---color-code-global: 194 128 80;
---font-sans: Encode Sans, sans-serif;
---font-headings: Glory, var(--font-sans), sans-serif;
---font-mono: MonoLisa, mononoki, monospace;
-}

storybook/react/tailwind.config.ts

@@ -1,10 +1,18 @@
 import {Config} from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
 const config: Config = {
 	content: [
-		'../../categories/web/*/react/src/**/*.tsx',
+		'../../categories/web/*/react/dist/**/*.js',
+		'./.storybook/**/*.html',
 	],
 	theme: {
+		fontFamily: {
+			sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
+			headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
+			mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
+			inherit: ['inherit'],
+		},
 		colors: {
 			'sidebar': 'rgb(var(--color-sidebar)',
 			'topbar': 'rgb(var(--color-topbar)',