chore(react): add storybook (#768)

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

packages/react/.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+}
+export default config

packages/react/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    layout: 'centered',
+  },
+}
+
+export default preview

packages/react/package.json

@@ -37,7 +37,9 @@
     "prepack": "clean-package",
     "postpack": "clean-package restore",
     "typedocs": "ts-node ../../scripts/generate-type-docs.ts",
-    "storydocs": "ts-node ../../scripts/generate-stories.ts"
+    "storydocs": "ts-node ../../scripts/generate-stories.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@polymorphic-factory/react": "0.4.1",
@@ -96,7 +98,16 @@
     "typescript": "5.0.4",
     "vite": "4.3.3",
     "vite-plugin-dts": "2.3.0",
-    "vitest": "0.30.1"
+    "vitest": "0.30.1",
+    "storybook": "^7.0.5",
+    "@storybook/react": "^7.0.5",
+    "@storybook/react-vite": "^7.0.5",
+    "@storybook/addon-links": "^7.0.5",
+    "@storybook/addon-essentials": "^7.0.5",
+    "@storybook/blocks": "^7.0.5",
+    "@storybook/addon-interactions": "^7.0.5",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

packages/react/src/accordion/accordion.stories.tsx

@@ -1,6 +1,16 @@
+import type { Meta } from '@storybook/react'
 import { useState } from 'react'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '.'
 
+type AccordionType = typeof Accordion
+
+const meta: Meta<AccordionType> = {
+  title: 'Accordion',
+  component: Accordion,
+}
+
+export default meta
+
 export const Basic = () => {
   const items = ['panel-1', 'panel-2', 'panel-3']
   return (

packages/react/src/carousel/carousel.story.tsx → packages/react/src/carousel/carousel.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from '@storybook/react'
 import {
   Carousel,
   CarouselNextSlideTrigger,
@@ -8,6 +9,15 @@ import {
 } from './'
 import './carousel.css'
 
+type CarouselType = typeof Carousel
+
+const meta: Meta<CarouselType> = {
+  title: 'Carousel',
+  component: Carousel,
+}
+
+export default meta
+
 export const images = [
   'https://tinyurl.com/5b6ka8jd',
   'https://tinyurl.com/7rmccdn5',

packages/react/src/carousel/docs/carousel.stories.json

@@ -0,0 +1,3 @@
+{
+  "Basic": "const Basic = () => (\n  <Carousel>\n    <CarouselPrevSlideTrigger>\n      <button>Prev</button>\n    </CarouselPrevSlideTrigger>\n    <CarouselNextSlideTrigger>\n      <button>Next</button>\n    </CarouselNextSlideTrigger>\n    <CarouselViewport>\n      <CarouselSlideGroup>\n        {images.map((image, index) => (\n          <CarouselSlide key={index} index={index}>\n            <img\n              src={image}\n              alt=\"\"\n              style={{ height: '300px', width: '100%', objectFit: 'cover' }}\n            />\n          </CarouselSlide>\n        ))}\n      </CarouselSlideGroup>\n    </CarouselViewport>\n  </Carousel>\n)"
+}

packages/react/src/checkbox/checkbox.css

@@ -1,11 +1,11 @@
-[data-part='root'] {
+[data-scope='checkbox'][data-part='root'] {
   display: flex;
   flex-direction: row;
   cursor: pointer;
   gap: 8px;
 }
 
-[data-part='control'] {
+[data-scope='checkbox'][data-part='control'] {
   border: 2px solid;
   border-radius: 9999px;
   display: flex;
@@ -15,7 +15,7 @@
   height: 16px;
 }
 
-[data-part='control'][data-checked] {
+[data-scope='checkbox'][data-part='control'][data-checked] {
   background: black;
   color: white;
 }

packages/react/src/checkbox/checkbox.stories.tsx

@@ -1,7 +1,17 @@
+import type { Meta } from '@storybook/react'
 import { useState } from 'react'
 import { Checkbox, CheckboxControl, CheckboxInput, CheckboxLabel } from '.'
 import './checkbox.css'
 
+type CheckboxType = typeof Checkbox
+
+const meta: Meta<CheckboxType> = {
+  title: 'Checkbox',
+  component: Checkbox,
+}
+
+export default meta
+
 export const Basic = () => (
   <Checkbox>
     <CheckboxLabel>Checkbox</CheckboxLabel>

packages/react/src/combobox/combobox.css

@@ -1,8 +1,8 @@
-[data-part='option'][data-highlighted] {
+[data-scope='combobox'][data-part='option'][data-highlighted] {
   background-color: greenyellow;
 }
 
-[data-part='content'] {
+[data-scope='combobox'][data-part='content'] {
   list-style-type: none;
   max-width: 240px;
   padding: 0;

packages/react/src/combobox/combobox.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from '@storybook/react'
 import { useState } from 'react'
 import { Portal } from '..'
 import {
@@ -14,6 +15,15 @@ import {
 } from './'
 import './combobox.css'
 
+type ComboboxType = typeof Combobox
+
+const meta: Meta<ComboboxType> = {
+  title: 'Combobox',
+  component: Combobox,
+}
+
+export default meta
+
 const comboboxData: Pick<ComboboxOptionProps, 'label' | 'value' | 'disabled'>[] = [
   { label: 'ReactJS', value: 'react' },
   { label: 'SolidJS', value: 'solid' },

packages/react/src/dialog/dialog.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from '@storybook/react'
 import { Portal } from '@zag-js/react'
 import { useState } from 'react'
 import {
@@ -11,6 +12,15 @@ import {
   DialogTrigger,
 } from './'
 
+type DialogType = typeof Dialog
+
+const meta: Meta<DialogType> = {
+  title: 'Dialog',
+  component: Dialog,
+}
+
+export default meta
+
 export const Basic = () => {
   return (
     <Dialog>

packages/react/src/editable/editable.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from '@storybook/react'
 import {
   Editable,
   EditableArea,
@@ -10,6 +11,15 @@ import {
   EditableSubmitTrigger,
 } from './'
 
+type EditableType = typeof Editable
+
+const meta: Meta<EditableType> = {
+  title: 'Editable',
+  component: Editable,
+}
+
+export default meta
+
 export const Basic = () => (
   <Editable placeholder="Placeholder" activationMode="dblclick">
     <EditableLabel>Label</EditableLabel>

packages/react/src/environment/environment.stories.tsx

@@ -1,8 +1,18 @@
+import type { Meta } from '@storybook/react'
 import { useEffect } from 'react'
 import Frame from 'react-frame-component'
 import { Environment } from './environment'
 import { useEnvironmentContext } from './environment-context'
 
+type EnvironmentType = typeof Environment
+
+const meta: Meta<EnvironmentType> = {
+  title: 'Environment',
+  component: Environment,
+}
+
+export default meta
+
 const PrintEnvironment = () => {
   const getRootNode = useEnvironmentContext()
   useEffect(() => {

packages/react/src/hover-card/hover-card.css

@@ -1,15 +1,15 @@
-[data-part='trigger'] {
+[data-scope='hover-card'][data-part='trigger'] {
   text-decoration: none;
 }
 
-[data-part='content'] {
+[data-scope='hover-card'][data-part='content'] {
   padding: 0.5rem;
   border: 1px solid lightgray;
   background: white;
   filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15));
 }
 
-[data-part='arrow'] {
+[data-scope='hover-card'][data-part='arrow'] {
   --arrow-background: white;
   --arrow-size: 8px;
 }

packages/react/src/hover-card/hover-card.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from '@storybook/react'
 import { Portal } from '@zag-js/react'
 import { useState } from 'react'
 import {
@@ -10,6 +11,15 @@ import {
 } from '.'
 import './hover-card.css'
 
+type HoverCardType = typeof HoverCard
+
+const meta: Meta<HoverCardType> = {
+  title: 'HoverCard',
+  component: HoverCard,
+}
+
+export default meta
+
 export const Basic = () => (
   <HoverCard>
     <HoverCardTrigger>

packages/react/src/menu/menu.css

@@ -1,4 +1,4 @@
-[data-part='content'] {
+[data-scope='menu'][data-part='content'] {
   margin: 0;
   width: 160px;
   background-color: white;
@@ -8,7 +8,7 @@
   list-style-type: none;
 }
 
-[data-part*='item'] {
+[data-scope='menu'][data-part*='item'] {
   all: unset;
   cursor: pointer;
   font-size: 1rem;
@@ -23,23 +23,23 @@
   padding: 0 0.25rem 0 1rem;
 }
 
-[data-part*='item'][data-focus] {
+[data-scope='menu'][data-part*='item'][data-focus] {
   outline: none;
   background-color: rebeccapurple;
   color: white;
 }
 
-[data-part*='item'][data-disabled] {
+[data-scope='menu'][data-part*='item'][data-disabled] {
   opacity: 0.4;
 }
 
-[data-part='separator'] {
+[data-scope='menu'][data-part='separator'] {
   width: 100%;
   border: 0;
   border-top: 1px solid rgb(189, 189, 189);
 }
 
-[data-part='label'] {
+[data-scope='menu'][data-part='label'] {
   display: block;
   padding-inline: 1rem;
   padding-block: 0.5rem;

packages/react/src/menu/menu.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from '@storybook/react'
 import { Portal } from '@zag-js/react'
 import { useState } from 'react'
 import {
@@ -14,6 +15,15 @@ import {
 } from '.'
 import './menu.css'
 
+type MenuType = typeof Menu
+
+const meta: Meta<MenuType> = {
+  title: 'Menu',
+  component: Menu,
+}
+
+export default meta
+
 export const Basic = () => (
   <Menu>
     <MenuTrigger>

packages/react/src/number-input/number-input.css

@@ -1,4 +1,4 @@
-[data-part='scrubber'] {
+[data-scope='number-input'][data-part='scrubber'] {
   width: 16px;
   height: 16px;
   background-color: red;

packages/react/src/number-input/number-input.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta } from '@storybook/react'
 import {
   NumberInput,
   NumberInputControl,
@@ -9,6 +10,15 @@ import {
 } from './'
 import './number-input.css'
 
+type NumberInputType = typeof NumberInput
+
+const meta: Meta<NumberInputType> = {
+  title: 'NumberInput',
+  component: NumberInput,
+}
+
+export default meta
+
 export const Basic = () => (
   <NumberInput min={-50} max={50} clampValueOnBlur>
     <NumberInputScrubber />

packages/react/src/pagination/pagination.css

@@ -1,9 +1,9 @@
-[data-part='item'][data-selected] {
+[data-scope='pagination'][data-part='item'][data-selected] {
   background-color: aqua;
 }
 
-[data-part='prev-item'][data-disabled],
-[data-part='next-item'][data-disabled] {
+[data-scope='pagination'][data-part='prev-item'][data-disabled],
+[data-scope='pagination'][data-part='next-item'][data-disabled] {
   cursor: not-allowed;
   opacity: 0.4;
 }