fix storybook

packages/ui/.storybook/main.ts

@@ -23,16 +23,12 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import type { StorybookConfig } from '@storybook/react-vite'
 import { 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',
-    'Access-Control-Allow-Headers': '*',
-    'Access-Control-Allow-Credentials': 'true'
-  },
+const host = process.env['VITE_APP_HOST']
+
+const config: StorybookConfig = {
   env: (config) => ({
     ...config,
     ...require('dotenv').config({
@@ -41,6 +37,7 @@ export default {
   }),
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
+    '@storybook/addon-links',
     '@storybook/addon-toolbars',
     '@storybook/manager-api',
     '@storybook/addon-essentials',
@@ -59,7 +56,7 @@ export default {
   features: {
     storyStoreV7: true
   },
-  async viteFinal(config) {
+  async viteFinal(config, options) {
     const userConfig = config
     return mergeConfig(config, {
       ...userConfig,
@@ -83,28 +80,27 @@ export default {
         proxy: {
           ...userConfig?.server?.proxy,
           cors: false,
-          // proxy https://travis.shetland-turtle.ts.net:3000 to https://travis.shetland-turtle.ts.net:3030
           '^3030': {
-            target: 'https://travis.shetland-turtle.ts.net:3030',
+            target: `https://${host}:3030`,
             changeOrigin: true,
             secure: false,
             ws: true
           },
           '^3031': {
-            target: 'https://travis.shetland-turtle.ts.net:3031',
+            target: `https://${host}:3031`,
             changeOrigin: true,
             secure: false,
             ws: true
           },
           '/sfx': {
-            target: 'https://travis.shetland-turtle.ts.net:3000',
+            target: `https://${host}:3000`,
             changeOrigin: true,
             secure: false,
             // replace port 6006 with 3000
             pathRewrite: { '^6006': '3000' }
           },
           '/fonts': {
-            target: 'https://travis.shetland-turtle.ts.net:3000',
+            target: `https://${host}:3000`,
             changeOrigin: true,
             secure: false,
             // replace port 6006 with 3000
@@ -119,3 +115,5 @@ export default {
     autodocs: false
   }
 }
+
+export default config

packages/ui/babel.config.js

@@ -27,7 +27,7 @@ Ethereal Engine. All Rights Reserved.
 
 module.exports = {
   presets: [
-    ["@babel/preset-react",
-    'enzyme-adapter-react-16', '@babel/preset-env', {targets: {node: 'current'}}]
+    "@babel/preset-react",
+    ['@babel/preset-env', {targets: {node: 'current'}}]
   ],
 };

packages/ui/package.json

@@ -58,6 +58,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.18.6",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",

packages/ui/scripts/start-storybook.sh

@@ -2,4 +2,4 @@
 
 source ../../.env.local
 
-storybook dev -p 6006 -h $VITE_APP_HOST --disable-telemetry --https --ssl-key ../../certs/key.pem --ssl-cert ../../certs/cert.pem
+cross-env storybook dev -p 6006 -h $VITE_APP_HOST --ci --disable-telemetry --https --ssl-key ../../certs/key.pem --ssl-cert ../../certs/cert.pem

packages/ui/src/components/tailwind/Settings/index.tsx

@@ -30,7 +30,7 @@ import { twMerge } from 'tailwind-merge'
 import { CaptureClientSettingsState } from '@etherealengine/client-core/src/media/CaptureClientSettingsState'
 import { getMutableState } from '@etherealengine/hyperflux'
 
-interface SettingsProps {
+export interface SettingsProps {
   className?: string
 }