Update Storybook to v7 (#8113)

* Basic refactor

* Start storybook with host from env

* Speelling.

packages/ui/.storybook/main.ts

@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import { loadConfigFromFile, mergeConfig } from 'vite'
 
 export default {
+  // managerEntries: [require('path').resolve(__dirname, './addons/RegisterAddons')],
   headers: {
     'Access-Control-Allow-Origin': '*',
     'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
@@ -38,26 +39,15 @@ export default {
       path: '../../.env.local'
     }).parsed
   }),
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['./**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    // "@storybook/addon-links",
+    '@storybook/addon-toolbars',
+    '@storybook/manager-api',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
     '@storybook/addon-jest',
     'storybook-addon-react-router-v6'
-    // 'storybook-addon-designs',
-    // {
-    //   name: '@storybook/addon-postcss',
-    //   options: {
-    //     cssLoaderOptions: {
-    //       importLoaders: 1
-    //     },
-    //     postcssLoaderOptions: {
-    //       implementation: require('postcss')
-    //     }
-    //   }
-    // }
   ],
   core: {
     builder: '@storybook/builder-vite'
@@ -70,9 +60,6 @@ export default {
     storyStoreV7: true
   },
   async viteFinal(config) {
-    // const c = await loadConfigFromFile(
-    //   require('path').resolve(__dirname, '../../client/vite.config.ts')
-    // );
     const userConfig = config
     return mergeConfig(config, {
       ...userConfig,
@@ -115,6 +102,13 @@ export default {
             secure: false,
             // replace port 6006 with 3000
             pathRewrite: { '^6006': '3000' }
+          },
+          '/fonts': {
+            target: 'https://travis.shetland-turtle.ts.net:3000',
+            changeOrigin: true,
+            secure: false,
+            // replace port 6006 with 3000
+            pathRewrite: { '^6006': '3000' }
           }
         }
       },

packages/ui/.storybook/preview.tsx

@@ -24,25 +24,15 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { ArgsTable, Description, Primary, PRIMARY_STORY, Stories, Subtitle, Title } from '@storybook/addon-docs'
+import { Preview } from '@storybook/react'
 import React from 'react'
-import { Suspense } from 'react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 import Engine_tw from '@etherealengine/client/src/engine_tw'
-// import { withTests } from '@storybook/addon-jest'
-// import results from '../tests/jest-test-results.json'
 import { ThemeContextProvider } from '@etherealengine/client/src/themes/themeContext'
-import LoadingCircle from '@etherealengine/ui/src/primitives/tailwind/LoadingCircle'
-
-// import { withThemes } from '@react-theming/storybook-addon'
-
-// import sStyle from '@etherealengine/client-core/src/util/GlobalStyle'
-
-// import { theme as defaultTheme, useTheme } from '@etherealengine/client-core/src/theme'
 
 export const decorators = [
   withRouter,
-  // withTests({ results }),
   (Story) => {
     return (
       <ThemeContextProvider>
@@ -52,9 +42,19 @@ export const decorators = [
       </ThemeContextProvider>
     )
   }
-  // withThemes(null, [defaultTheme], { providerFn })
 ]
 
+const preview: Preview = {
+  globalTypes: {
+    eeEnabled: {
+      description: 'Ethereal Engine',
+      defaultValue: false
+    }
+  }
+}
+
+export default preview
+
 export const parameters = {
   controls: {
     matchers: {
@@ -64,7 +64,7 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: ['Expermiental']
+      order: ['Pages', 'Admin', 'Components', 'Primitives', 'Addons', 'Expermiental']
     }
   },
   docs: {

packages/ui/package.json

@@ -33,7 +33,7 @@
     "build:storybook": "storybook build -c .storybook -o build/",
     "predeploy": "npm run build:storybook",
     "deploy": "gh-pages -d build/",
-    "storybook": "storybook dev -p 6006 -h localhost --disable-telemetry --https --ssl-key ../../certs/key.pem --ssl-cert ../../certs/cert.pem"
+    "storybook": "./scripts/start-storybook.sh"
   },
   "dependencies": {
     "@etherealengine/common": "^1.3.0",
@@ -96,7 +96,7 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "sass": "1.59.3",
-    "storybook": "^7.1.0-alpha.19",
+    "storybook": "^7.1.0-alpha.37",
     "storybook-addon-react-router-v6": "^1.0.0",
     "stream-browserify": "^3.0.0",
     "ts-jest": "^29.0.5"

packages/ui/scripts/start-storybook.sh

@@ -0,0 +1,5 @@
+# !/bin/
+
+source ../../.env.local
+
+storybook dev -p 6006 -h $APP_HOST --disable-telemetry --https --ssl-key ../../certs/key.pem --ssl-cert ../../certs/cert.pem

packages/ui/src/components/tailwind/Drawer/Drawer.test.tsx

@@ -28,7 +28,7 @@ import { shallow } from 'enzyme'
 import React from 'react'
 
 import Drawer from './index'
-import { Primary as story } from './index.stories'
+import { Default as story } from './index.stories'
 
 describe('Drawer', () => {
   it('- should render', () => {

packages/ui/src/components/tailwind/Drawer/index.stories.tsx

@@ -41,4 +41,4 @@ export default {
   argTypes
 }
 
-export const Primary = { args: Component.defaultProps }
+export const Default = { args: Component.defaultProps }

packages/ui/src/components/tailwind/FullscreenContainer/FullscreenContainer.test.tsx

@@ -28,7 +28,7 @@ import { shallow } from 'enzyme'
 import React, { createRef } from 'react'
 
 import FullscreenContainer from './index'
-import { Primary as story } from './index.stories'
+import { Default as story } from './index.stories'
 
 describe('FullscreenContainer', () => {
   it('- should render', () => {

packages/ui/src/components/tailwind/FullscreenContainer/index.stories.tsx

@@ -41,4 +41,4 @@ export default {
   argTypes
 }
 
-export const Primary = { args: Component.defaultProps }
+export const Default = { args: Component.defaultProps }

packages/ui/src/components/tailwind/Header/Header.test.tsx

@@ -28,7 +28,7 @@ import { shallow } from 'enzyme'
 import React from 'react'
 
 import Checkbox from './index'
-import { Primary as story } from './index.stories'
+import { Default as story } from './index.stories'
 
 describe('Checkbox', () => {
   it('- should render', () => {

packages/ui/src/components/tailwind/Header/index.stories.tsx

@@ -41,4 +41,4 @@ export default {
   argTypes
 }
 
-export const Primary = { args: Component.defaultProps }
+export const Default = { args: Component.defaultProps }

packages/ui/src/components/tailwind/RecordingList/RecordingList.test.tsx

@@ -28,7 +28,7 @@ import { shallow } from 'enzyme'
 import React from 'react'
 
 import RecordingList from './index'
-import { Primary as story } from './index.stories'
+import { Default as story } from './index.stories'
 
 describe('RecordingList', () => {
   it('- should render', () => {

packages/ui/src/components/tailwind/RecordingList/index.stories.tsx

@@ -40,4 +40,4 @@ export default {
   },
   argTypes
 }
-export const Primary = { args: Component.defaultProps }
+export const Default = { args: Component.defaultProps }

packages/ui/src/components/tailwind/ThemeSwitcher/ThemeSwitcher.test.tsx

@@ -28,7 +28,7 @@ import { shallow } from 'enzyme'
 import React from 'react'
 
 import ThemeSwitcher from './index'
-import { Primary as story } from './index.stories'
+import { Default as story } from './index.stories'
 
 describe('ThemeSwitcher', () => {
   it('- should render', () => {

packages/ui/src/components/tailwind/ThemeSwitcher/index.stories.tsx

@@ -41,4 +41,4 @@ export default {
   argTypes
 }
 
-export const Primary = { args: Component.defaultProps }
+export const Default = { args: Component.defaultProps }

packages/ui/src/components/tailwind/Toolbar/Toolbar.test.tsx

@@ -28,7 +28,7 @@ import { shallow } from 'enzyme'
 import React from 'react'
 
 import Drawer from './index'
-import { Primary as story } from './index.stories'
+import { Default as story } from './index.stories'
 
 describe('Drawer', () => {
   it('- should render', () => {

packages/ui/src/components/tailwind/Toolbar/index.stories.tsx

@@ -28,7 +28,7 @@ import Component from './index'
 const argTypes = {}
 
 export default {
-  title: 'Primitives/Tailwind/Toolbar',
+  title: 'Capture/Toolbar',
   component: Component,
   parameters: {
     componentSubtitle: 'Toolbar',
@@ -40,4 +40,98 @@ export default {
   },
   argTypes
 }
-export const Primary = { args: Component.defaultProps }
+export const Default = { args: Component.defaultProps }
+
+export const ShowLabels = {
+  args: {
+    ...Component.defaultProps,
+    showLabels: true
+  }
+}
+
+export const ButtonsSM = {
+  args: {
+    ...Component.defaultProps,
+    buttonSize: 'sm'
+  }
+}
+
+export const ButtonsMD = {
+  args: {
+    ...Component.defaultProps
+  }
+}
+
+export const ButtonsLG = {
+  args: {
+    ...Component.defaultProps,
+    buttonSize: 'lg'
+  }
+}
+
+export const CameraLoading = {
+  args: {
+    ...Component.defaultProps,
+    videoStatus: 'loading'
+  }
+}
+export const CameraReady = {
+  args: {
+    ...Component.defaultProps,
+    videoStatus: 'ready'
+  }
+}
+
+export const CameraOn = {
+  args: {
+    ...Component.defaultProps,
+    videoStatus: 'active'
+  }
+}
+
+export const PoseLoading = {
+  args: {
+    ...CameraOn.args,
+    detectingStatus: 'loading'
+  }
+}
+
+export const PoseReady = {
+  args: {
+    ...CameraOn.args,
+    detectingStatus: 'inactive'
+  }
+}
+
+export const PoseDetecting = {
+  args: {
+    ...CameraOn.args,
+    detectingStatus: 'active',
+    recordingStatus: 'ready'
+  }
+}
+
+export const RecordingLoading = {
+  args: {
+    ...PoseDetecting.args,
+    recordingStatus: 'inactive',
+    detectingStatus: 'inactive',
+    isRecording: false
+  }
+}
+
+export const RecordingReady = {
+  args: {
+    ...PoseDetecting.args,
+    recordingStatus: 'ready',
+    isRecording: false
+  }
+}
+
+export const RecordingActive = {
+  args: {
+    ...PoseDetecting.args,
+    recordingStatus: 'active',
+    isRecording: true
+  }
+}

packages/ui/src/pages/Capture/Capture.test.tsx

@@ -28,7 +28,7 @@ import { shallow } from 'enzyme'
 import React from 'react'
 
 import Capture from './index'
-import { Primary as story } from './index.stories'
+import { Default as story } from './index.stories'
 
 describe('Capture', () => {
   it('- should render', () => {