Fixed for Alert and I don't know why

department-of-veterans-affairs · May 21, 2024 · 72c4473 · 72c4473
1 parent 11bedb9
commit 72c4473
Show file tree

Hide file tree

Showing 7 changed files with 586 additions and 230 deletions.
diff --git a/packages/components/.storybook/native/storybook.requires.ts b/packages/components/.storybook/native/storybook.requires.ts
@@ -1,6 +1,10 @@
 /* do not change this file, it is auto generated by storybook. */
 
-import { start } from "@storybook/react-native";
+import {
+  start,
+  prepareStories,
+  getProjectAnnotations,
+} from "@storybook/react-native";
 
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-actions/register";
@@ -34,14 +38,37 @@ const normalizedStories = [
   },
 ];
 
-// @ts-ignore
+declare global {
+  var view: ReturnType<typeof start>;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+  require("./preview"),
+  require("@storybook/react-native/dist/preview"),
+  require("@storybook/addon-actions/preview"),
+];
+
 global.STORIES = normalizedStories;
 
-export const view = start({
-  annotations: [
-    require("./preview"),
-    require("@storybook/react-native/dist/preview"),
-    require("@storybook/addon-actions/preview"),
-  ],
-  storyEntries: normalizedStories,
-});
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+  });
+} else {
+  const { importMap } = prepareStories({ storyEntries: normalizedStories });
+
+  global.view._preview.onStoriesChanged({
+    importFn: async (importPath: string) => importMap[importPath],
+  });
+
+  global.view._preview.onGetProjectAnnotationsChanged({
+    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+  });
+}
+
+export const view = global.view;
diff --git a/packages/components/.storybook/web/main.ts b/packages/components/.storybook/web/main.ts
@@ -3,6 +3,7 @@ const CopyPlugin = require('copy-webpack-plugin')
 
 module.exports = {
   stories: [
+    '../../src/**/*.mdx',
     '../../src/components/**/*.stories.mdx',
     '../../src/components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
@@ -11,6 +12,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-react-native-web',
     '@storybook/addon-designs',
+    '@storybook/addon-docs',
     'storybook-dark-mode',
   ],
   docs: {

diff --git a/packages/components/.storybook/web/preview.tsx b/packages/components/.storybook/web/preview.tsx
@@ -15,6 +15,9 @@ export const parameters = {
     stylePreview: true,
   },
   docs: {
+    // canvas: {
+    //   sourceState: ''
+    // },
     container: (props) => {
       const isDark = useDarkMode()
       const currentProps = { ...props }

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -62,19 +62,19 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "7.7.0",
     "@react-native-community/slider": "4.5.2",
-    "@storybook/addon-actions": "^7.6.15",
-    "@storybook/addon-controls": "^7.6.15",
+    "@storybook/addon-actions": "7.6.19",
+    "@storybook/addon-controls": "7.6.19",
     "@storybook/addon-designs": "^7.0.9",
-    "@storybook/addon-docs": "^7.6.15",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-links": "^7.6.15",
-    "@storybook/addon-ondevice-actions": "^7.6.15",
-    "@storybook/addon-ondevice-controls": "^7.6.15",
+    "@storybook/addon-docs": "7.6.19",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/addon-ondevice-actions": "^7.6.18",
+    "@storybook/addon-ondevice-controls": "^7.6.18",
     "@storybook/addon-react-native-web": "^0.0.23",
-    "@storybook/builder-webpack5": "^7.6.15",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-native": "^7.6.15",
-    "@storybook/react-webpack5": "^7.6.15",
+    "@storybook/builder-webpack5": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-native": "^7.6.18",
+    "@storybook/react-webpack5": "7.6.19",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/react-native": "^12.4.5",
     "@types/jest": "^29.5.12",
@@ -107,7 +107,7 @@
     "react-native-svg-transformer": "^1.3.0",
     "react-native-web": "~0.19.10",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^7.6.15",
+    "storybook": "7.6.19",
     "storybook-dark-mode": "^3.0.3",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -5,10 +5,21 @@ import { Spacer } from '../Spacer/Spacer'
 import { View } from 'react-native'
 import React from 'react'
 
-const meta: Meta<AlertProps> = {
+import { generateDocs } from '../../utils/storybook'
+
+export default {
   title: 'Alert',
   component: Alert,
+  parameters: {
+    docs: generateDocs({
+      name: 'Alert',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Button',
+      // code: (<Alert variant='info' />)
+    }),
+  },
   decorators: [
+    // @ts-ignore
     (Story) => (
       <View
         style={{
@@ -22,7 +33,7 @@ const meta: Meta<AlertProps> = {
   ],
 }
 
-export default meta
+// export default meta
 
 type Story = StoryObj<AlertProps>
 
@@ -39,7 +50,14 @@ const children = (
   </>
 )
 
+// export const Info = () => {
+//   return(
+//       <Alert variant='info' header='Header' description='Desc' />
+//   )
+// }
+
 export const Info: Story = {
+  // render: () => <Alert variant='info' />,
   args: {
     variant: 'info',
     header: 'Header',

diff --git a/packages/components/src/utils/storybook.tsx b/packages/components/src/utils/storybook.tsx
@@ -1,7 +1,9 @@
 import {
   ArgsTable,
+  // Canvas,
   Description,
   Primary,
+  Source,
   Stories,
   Subtitle,
   Title,
@@ -12,6 +14,7 @@ import React, { useSyncExternalStore } from 'react'
 type DocProps = {
   name: string
   docUrl: string
+  // code?: any
 }
 
 /**