chore(storybook): bump to v8 release candidate

.storybook/docsPageConfig.jsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  ArgsTable,
-  Description,
-  Primary,
-  PRIMARY_STORY,
-  Stories,
-  Subtitle,
-  Title,
-} from '@storybook/addon-docs';
+import { Controls, Description, Primary, Stories, Subtitle, Title } from '@storybook/addon-docs';
 
 import { GuidelineLink } from '@config/GuidelineLink';
 
@@ -19,7 +11,7 @@ export const configureDocsPage = (componentName) => {
       <Description />
       {componentName && <GuidelineLink path={componentName} />}
       <Primary />
-      <ArgsTable story={PRIMARY_STORY} />
+      <Controls />
       <Stories />
     </>
   );

.storybook/main.ts

@@ -3,15 +3,7 @@ import path from 'path';
 
 const config = {
   stories: [],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-styling',
-    '@storybook/addon-essentials',
-    '@storybook/addon-links',
-  ],
-  features: {
-    storyStoreV7: true,
-  },
+  addons: ['@storybook/addon-a11y', '@storybook/addon-essentials', '@storybook/addon-links'],
   docs: {
     autodocs: true,
   },

.storybook/wc/main.ts

@@ -13,6 +13,10 @@ const fullConfig: StorybookConfig = {
       directory: '../../packages/pharos',
       files: '**/*.@(wc|docs|pages).stories.@(js|jsx|mdx|ts)',
     },
+    {
+      directory: '../../packages/pharos',
+      files: '**/*.docs.mdx',
+    },
   ],
 };
 

README.md

@@ -23,10 +23,14 @@
 
 ## Build statuses
 
-| System     | Status                                                                                                                                                                    |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Site       | [![Site status](https://api.netlify.com/api/v1/badges/6e5ee441-5739-46e4-9a85-ea5c5a333ebb/deploy-status)](https://app.netlify.com/sites/pharos/deploys)                  |
-| Storybooks | [![Storybooks status](https://api.netlify.com/api/v1/badges/0afa82e2-f12d-4a75-933c-efedee05fe99/deploy-status)](https://app.netlify.com/sites/pharos-storybooks/deploys) |
+| System         | Status                                                                                                                                                                    |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Site           | [![Site status](https://api.netlify.com/api/v1/badges/6e5ee441-5739-46e4-9a85-ea5c5a333ebb/deploy-status)](https://app.netlify.com/sites/pharos/deploys)                  |
+| Storybooks     | [![Storybooks status](https://api.netlify.com/api/v1/badges/0afa82e2-f12d-4a75-933c-efedee05fe99/deploy-status)](https://app.netlify.com/sites/pharos-storybooks/deploys) |
+| GitHub Actions | [![Release status]](https://github.com/ithaka/pharos/actions/workflows/release.yml/badge.svg?branch=main)                                                                 |
+| GitHub Actions | [![Release status]](https://github.com/ithaka/pharos/actions/workflows/verify.yml/badge.svg)                                                                              |
+| GitHub Actions | [![Release status]](https://github.com/ithaka/pharos/actions/workflows/chromatic.yml/badge.svg)                                                                           |
+| GitHub Actions | [![Release status]](https://github.com/ithaka/pharos/actions/workflows/size-limit.yml/badge.svg)                                                                          |
 
 ## Getting Started
 

package.json

@@ -66,16 +66,15 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@emotion/babel-plugin": "^11.9.2",
     "@size-limit/preset-small-lib": "^7.0.4",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-styling": "^1.3.5",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
-    "@storybook/web-components": "^7.6.17",
-    "@storybook/web-components-vite": "^7.6.17",
+    "@storybook/addon-a11y": "^8.0.0-rc.3",
+    "@storybook/addon-essentials": "^8.0.0-rc.3",
+    "@storybook/addon-links": "^8.0.0-rc.3",
+    "@storybook/blocks": "^8.0.0-rc.3",
+    "@storybook/manager-api": "^8.0.0-rc.3",
+    "@storybook/react-vite": "^8.0.0-rc.3",
+    "@storybook/theming": "^8.0.0-rc.3",
+    "@storybook/web-components": "^8.0.0-rc.3",
+    "@storybook/web-components-vite": "^8.0.0-rc.3",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
@@ -108,7 +107,7 @@
     "react-dom": "^17.0.0",
     "sass": "^1.63.6",
     "size-limit": "^7.0.4",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.0-rc.3",
     "stylelint": "^15.10.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard-scss": "^10.0.0",

packages/pharos/docs/1.intro.docs.stories.mdx → packages/pharos/docs/1.intro.docs.mdx

@@ -3,7 +3,7 @@ import { Markdown, Meta } from '@storybook/blocks';
 import Intro from '../README.md?raw';
 import PHAROS_TITLE from '@config/pharosTitle';
 
-<Meta title="Pharos/Intro" />
+<Meta title="Intro" />
 
 export const Title = () => PHAROS_TITLE;
 

packages/pharos/docs/2.changelog.docs.stories.mdx → packages/pharos/docs/2.changelog.docs.mdx

@@ -2,6 +2,6 @@ import { Markdown, Meta } from '@storybook/blocks';
 
 import Changelog from '../CHANGELOG.md?raw';
 
-<Meta title="Pharos/Changelog" />
+<Meta title="Changelog" />
 
 <Markdown>{Changelog}</Markdown>

packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.wc.stories.jsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useEffect } from '@storybook/client-api';
+import { useEffect } from '@storybook/preview-api';
 import { html } from 'lit';
 
 import { configureDocsPage } from '@config/docsPageConfig';

packages/pharos/src/components/toast/pharos-toast.wc.stories.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from '@storybook/client-api';
+import { useEffect } from '@storybook/preview-api';
 import { html } from 'lit';
 
 import { configureDocsPage } from '@config/docsPageConfig';

packages/pharos/src/components/toast/pharos-toaster.ts

@@ -119,7 +119,7 @@ export class PharosToaster extends ScopedRegistryMixin(PharosElement) {
 
     this._toasts = [
       {
-        content,
+        content: content,
         status: status || DEFAULT_STATUS,
         id: toastId,
         indefinite: indefinite || DEFAULT_INDEFINITE,

packages/pharos/src/components/tooltip/PharosTooltip.react.stories.jsx

@@ -4,7 +4,7 @@ import {
   PharosTooltip,
   PharosButton,
 } from '../../react-components';
-import { useEffect } from '@storybook/client-api';
+import { useEffect } from '@storybook/preview-api';
 import { configureDocsPage } from '@config/docsPageConfig';
 import { defaultArgs, argTypes } from './storyArgs';
 import { PharosContext } from '../../utils/PharosContext';

packages/pharos/src/components/tooltip/pharos-tooltip.wc.stories.jsx

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { useEffect } from '@storybook/client-api';
+import { useEffect } from '@storybook/preview-api';
 
 import { defaultArgs, argTypes } from './storyArgs';
 import { configureDocsPage } from '@config/docsPageConfig';