Freshstart

.gitignore

@@ -1,3 +1 @@
 node_modules
-dist
-storybook-static

.storybook/main.js

@@ -1,23 +1,11 @@
 module.exports = {
-    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-    addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-a11y',
-        {
-            name: '@storybook/addon-docs',
-            options: {
-                configureJSX: true
-            }
-        },
-        '@storybook/addon-controls',
-        './webpack.config.preset.js'
-    ],
-    core: { builder: 'webpack5' },
-    typescript: {
-        check: true,
-        reactDocgen: 'react-docgen-typescript'
-    }
-};
-
-
+  "stories": [
+    "../components/**/*.stories.@(js|mdx|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    'storybook-addon-designs'
+  ]
+}

.storybook/manager-head.html

@@ -0,0 +1,12 @@
+
+<style>
+
+.css-21d5zu span:first-of-type * {
+  color: white;
+}
+
+.sidebar-container * {
+  font-size: 1rem!important;
+}
+
+</style>

.storybook/manager.js

@@ -0,0 +1,12 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import storybooktheme from './storybooktheme';
+
+addons.setConfig({
+  theme: storybooktheme,
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: ['other'],
+  },
+});

.storybook/preview.js

@@ -1,23 +1,17 @@
-import React from 'react';
-
-import { MuiCustomThemeProvider } from '../src/mui-custom/ThemeProvider';
-
 export const parameters = {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-        matchers: {
-            color: /(background|color)$/i,
-            date: /Date$/
-        }
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  layout: 'centered',
+  previewTabs: {
+    'storybook/docs/panel': {
+      hidden: true
     }
-};
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
 
-export const decorators = [
-    (Story) => {
-        return (
-            <MuiCustomThemeProvider>
-                <Story />
-            </MuiCustomThemeProvider>
-        );
-    }
-];

.storybook/storybooktheme.js

@@ -0,0 +1,41 @@
+// .storybook/YourTheme.js
+
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: 'black',
+  colorSecondary: 'black',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: 'grey',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"system-ui", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'black',
+//   textInverseColor: 'white',
+//   textMutedColor: 'black',
+
+  // Toolbar default and active colors
+  barTextColor: 'black',
+  barSelectedColor: 'black',
+  barBg: 'white',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'black',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: 'UX Framework',
+//   brandUrl: 'put the git url here',
+//   brandImage: 'https://place-hold.it/350x150',
+
+});