Merge pull request #280 from CivicDataLab/d4d

D4d

Author: PixeledCode

packages/opub-ui/.storybook/main.ts

@@ -1,17 +1,18 @@
-import { dirname, join } from "path";
-import { StorybookConfig } from '@storybook/react-vite';
+import { dirname, join } from 'path';
+
 const turbosnap = require('vite-plugin-turbosnap');
 const { mergeConfig } = require('vite');
 
 const config = {
-  stories: ['../src'],
+  stories: ['../src', '../docs'],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath("@storybook/addon-mdx-gfm")
   ],
   framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
   docs: {
@@ -33,5 +34,5 @@ const config = {
 export default config;
 
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')));
 }

packages/opub-ui/.storybook/preview.tsx

@@ -7,9 +7,19 @@ import { Tooltip } from '../src/components/Tooltip';
 import React from 'react';
 
 export const parameters = {
-  parameters: {
-    docs: {
-      theme: themes.light,
+  docs: {
+    theme: themes.light,
+  },
+  options: {
+    storySort: {
+      order: [
+        'Guides',
+        ['Introduction'],
+        'Foundations',
+        'Styles',
+        'Patterns',
+        'components',
+      ],
     },
   },
 };

packages/opub-ui/docs/Foundations/Accessibility.mdx

@@ -89,16 +89,17 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.1",
     "@rollup/plugin-typescript": "8.3.3",
-    "@storybook/addon-actions": "^7.4.6",
+    "@storybook/addon-actions": "^7.6.4",
     "@storybook/addon-console": "^2.0.0",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-interactions": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/addons": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-vite": "7.4.6",
+    "@storybook/addon-essentials": "7.6.4",
+    "@storybook/addon-interactions": "7.6.4",
+    "@storybook/addon-links": "7.6.4",
+    "@storybook/addon-mdx-gfm": "^7.6.4",
+    "@storybook/addons": "7.6.4",
+    "@storybook/react": "7.6.4",
+    "@storybook/react-vite": "7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.4.6",
+    "@storybook/theming": "^7.6.4",
     "@svgr/rollup": "^7.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -125,7 +126,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.9.0",
-    "storybook": "7.4.6",
+    "storybook": "7.6.4",
     "storybook-addon-pseudo-states": "^2.1.2",
     "tsconfig": "*",
     "typescript": "^5.0.4",

packages/opub-ui/docs/Foundations/Design Tokens.mdx

@@ -9,7 +9,7 @@ import { IconCheck, IconFileExport, IconFileImport } from '@tabler/icons-react';
  * Reference: https://polaris.shopify.com/components/lists/action-list
  */
 const meta = {
-  title: 'Verified/ActionList',
+  title: 'Components/ActionList',
   component: ActionList,
 } satisfies Meta<typeof ActionList>;
 

packages/opub-ui/docs/Foundations/Layout.mdx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/alert-dialog
  */
 const meta = {
-  title: 'Verified/AlertDialog',
+  title: 'Components/AlertDialog',
   component: AlertDialog.Content,
 } satisfies Meta<typeof AlertDialog.Content>;
 

packages/opub-ui/docs/Guides/Design.mdx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://polaris.shopify.com/components/images-and-icons/avatar
  */
 const meta = {
-  title: 'Verified/Avatar',
+  title: 'Components/Avatar',
   component: Avatar,
 } satisfies Meta<typeof Avatar>;
 

packages/opub-ui/docs/Guides/Develop.mdx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  */
 
 const meta = {
-  title: 'Verified/Badge',
+  title: 'Components/Badge',
   component: Badge,
 } satisfies Meta<typeof Badge>;
 

packages/opub-ui/docs/Guides/Introduction.mdx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  */
 
 const meta = {
-  title: 'Verified/Breadcrumbs',
+  title: 'Components/Breadcrumbs',
   component: Breadcrumbs,
 } satisfies Meta<typeof Breadcrumbs>;
 

packages/opub-ui/docs/Patterns/Data Visualization.mdx

@@ -10,7 +10,7 @@ import { IconSelector } from '@tabler/icons-react';
  * Reference: https://polaris.shopify.com/components/actions/button
  */
 const meta = {
-  title: 'Verified/Button',
+  title: 'Components/Button',
   component: Button,
 } satisfies Meta<typeof Button>;
 

packages/opub-ui/docs/Patterns/Empty State.mdx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://polaris.shopify.com/components/actions/button-group
  */
 const meta = {
-  title: 'Verified/ButtonGroup',
+  title: 'Components/ButtonGroup',
   component: ButtonGroup,
 } satisfies Meta<typeof ButtonGroup>;
 

packages/opub-ui/docs/Patterns/Feature Onboarding.mdx

@@ -10,7 +10,7 @@ import { useLocale } from 'react-aria';
  * Reference: https://react-spectrum.adobe.com/react-aria/useCalendar.html
  */
 const meta = {
-  title: 'Verified/Calendar',
+  title: 'Components/Calendar',
   component: Calendar,
 } satisfies Meta<typeof Calendar>;
 

packages/opub-ui/docs/Patterns/Filtering.mdx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/checkbox
  */
 const meta = {
-  title: 'Verified/Checkbox',
+  title: 'Components/Checkbox',
   component: Checkbox,
 } satisfies Meta<typeof Checkbox>;
 

packages/opub-ui/docs/Patterns/Loading.mdx

@@ -7,7 +7,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * A Checkbox Group lets you create a list of grouped checkboxes.
  */
 const meta = {
-  title: 'Verified/CheckboxGroup',
+  title: 'Components/CheckboxGroup',
   component: CheckboxGroup,
 } satisfies Meta<typeof CheckboxGroup>;
 

packages/opub-ui/docs/Styles/Color.mdx

@@ -7,7 +7,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://ariakit.org/examples/combobox-multiple
  */
 const meta = {
-  title: 'Verified/Combobox',
+  title: 'Components/Combobox',
   component: Combobox,
 } satisfies Meta<typeof Combobox>;
 

packages/opub-ui/docs/Styles/Icons.mdx

@@ -17,7 +17,7 @@ import React from 'react';
  * Reference: https://ui.shadcn.com/docs/components/command
  */
 const meta = {
-  title: 'Verified/Command',
+  title: 'Components/Command',
   component: Command,
 } satisfies Meta<typeof Command>;
 

packages/opub-ui/docs/Styles/Shape.mdx

@@ -10,7 +10,7 @@ import { IconCopy, IconPencil, IconTrash } from '@tabler/icons-react';
  * Reference: https://tanstack.com/table/v8/docs/guide/introduction
  */
 const meta = {
-  title: 'Verified/DataTable',
+  title: 'Components/DataTable',
   component: DataTable,
 } satisfies Meta<typeof DataTable>;
 

packages/opub-ui/docs/Styles/Size.mdx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://react-spectrum.adobe.com/react-aria/useDateField.html
  */
 const meta = {
-  title: 'Verified/DateField',
+  title: 'Components/DateField',
   component: DateField,
 } satisfies Meta<typeof DateField>;
 

packages/opub-ui/docs/Styles/Typography.mdx

@@ -9,7 +9,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://react-spectrum.adobe.com/react-aria/useDatePicker.html
  */
 const meta = {
-  title: 'Verified/DatePicker',
+  title: 'Components/DatePicker',
   component: DatePicker,
 } satisfies Meta<typeof DatePicker>;
 

packages/opub-ui/package.json

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/dialog
  */
 const meta = {
-  title: 'Verified/Dialog',
+  title: 'Components/Dialog',
   component: Dialog.Content,
 } satisfies Meta<typeof Dialog.Content>;
 

packages/opub-ui/src/components/ActionList/ActionList.stories.tsx

@@ -5,7 +5,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Use to separate or group content
  */
 const meta = {
-  title: 'Verified/Divider',
+  title: 'Components/Divider',
   component: Divider,
 } satisfies Meta<typeof Divider>;
 

packages/opub-ui/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -13,7 +13,7 @@ import { useCallback, useState } from 'react';
  * Reference: https://polaris.shopify.com/components/selection-and-input/drop-zone
  */
 const meta = {
-  title: 'Verified/DropZone',
+  title: 'Components/DropZone',
   component: DropZone,
 } satisfies Meta<typeof DropZone>;
 

packages/opub-ui/src/components/Avatar/Avatar.stories.tsx

@@ -9,7 +9,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://polaris.shopify.com/components/layout-and-structure/form-layout
  */
 const meta = {
-  title: 'Verified/FormLayout',
+  title: 'Components/FormLayout',
   component: FormLayout,
 } satisfies Meta<typeof FormLayout>;
 

packages/opub-ui/src/components/Badge/Badge.stories.tsx

@@ -12,7 +12,7 @@ import {
  * Reference: https://polaris.shopify.com/components/images-and-icons/icon
  */
 const meta = {
-  title: 'Verified/Icon',
+  title: 'Components/Icon',
   component: Icon,
 } satisfies Meta<typeof Icon>;
 

packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -8,7 +8,7 @@ import { IconMinus, IconPlus, IconSettings } from '@tabler/icons-react';
  * Icon Button component
  */
 const meta = {
-  title: 'Verified/IconButton',
+  title: 'Components/IconButton',
   component: IconButton,
 
   argTypes: {

packages/opub-ui/src/components/Button/Button.stories.tsx

@@ -6,7 +6,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * An inline message lets users know when important information is available
  */
 const meta = {
-  title: 'Verified/InlineMessage',
+  title: 'Components/InlineMessage',
   component: InlineMessage,
 } satisfies Meta<typeof InlineMessage>;
 

packages/opub-ui/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -7,7 +7,7 @@ import { Meta } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/label
  */
 export default {
-  title: 'Verified/Label',
+  title: 'Components/Label',
   component: Label,
 
   argTypes: {

packages/opub-ui/src/components/Calendar/Calendar.stories.tsx

@@ -13,7 +13,7 @@ import {
  * A wrapper around Popover and ActionList Components
  */
 const meta = {
-  title: 'Verified/Menu',
+  title: 'Components/Menu',
   component: Menu,
 } satisfies Meta<typeof Menu>;
 

packages/opub-ui/src/components/Checkbox/Checkbox.stories.tsx

@@ -6,7 +6,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Pill is a component that displays a short string of text, which can removed.
  */
 const meta = {
-  title: 'Verified/Pill',
+  title: 'Components/Pill',
   component: Pill,
 } satisfies Meta<typeof Pill>;
 

packages/opub-ui/src/components/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -11,7 +11,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/popover
  */
 const meta = {
-  title: 'Verified/Popover',
+  title: 'Components/Popover',
   component: Popover.Content,
   argTypes: {
     children: {

packages/opub-ui/src/components/Combobox/Combobox.stories.tsx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/progress
  */
 const meta = {
-  title: 'Verified/ProgressBar',
+  title: 'Components/ProgressBar',
   component: ProgressBar,
 } satisfies Meta<typeof ProgressBar>;
 

packages/opub-ui/src/components/Command/Command.stories.tsx

@@ -7,7 +7,7 @@ import { Meta } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/radio-group
  */
 const meta = {
-  title: 'Verified/RadioGroup',
+  title: 'Components/RadioGroup',
   component: RadioGroup,
 } satisfies Meta<typeof RadioGroup>;
 

packages/opub-ui/src/components/DataTable/DataTable.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/slider
  */
 const meta = {
-  title: 'Verified/RangeSlider',
+  title: 'Components/RangeSlider',
   component: RangeSlider,
 } satisfies Meta<typeof RangeSlider>;
 

packages/opub-ui/src/components/DateField/DateField.stories.tsx

@@ -9,7 +9,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * Reference: https://www.radix-ui.com/docs/primitives/components/scroll-area
  */
 const meta = {
-  title: 'Verified/ScrollArea',
+  title: 'Components/ScrollArea',
   component: ScrollArea,
 } satisfies Meta<typeof ScrollArea>;