monorepo

packages/ui/.storybook/main.js

@@ -0,0 +1,58 @@
+const path = require('path');
+const { mergeConfig } = require('vite');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react',
+  // core: {
+  //   builder: '@storybook/builder-vite',
+  // },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    }
+  },
+  staticsDirs: ['../public', '../public/assets'],
+  async webpackFinal(config, { configType }) {
+    config.resolve.alias['react-native'] = 'react-native-web';
+    config.module.rules.push({
+      loader: 'babel-loader',
+      test: /\.jsx?$/,
+      options: {
+        presets: ['@babel/preset-env', '@babel/preset-react'],
+      },
+      include: [
+        /node_modules\/.*react-native.*/,
+      ],
+    });
+    return config;
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      optimizeDeps: {
+        esbuildOptions: {
+          loader: {
+            '.js': 'jsx',
+          },
+        },
+      },
+      base: './',
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '..', 'src'),
+          'react-native': 'react-native-web',
+        },
+      },
+      assetsDir: './public/assets',
+    });
+  },
+};
+

packages/ui/.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import { theme } from './theme';
+
+addons.setConfig({
+  theme,
+});
+

packages/ui/.storybook/preview.tsx

@@ -0,0 +1,31 @@
+import { theme } from './theme';
+import { addDecorator } from "@storybook/react";
+import { Provider } from '../src/theme';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import "@fontsource/montserrat";
+
+const ThemeDecorator = (storyFn: any) => (
+  <SafeAreaProvider>
+    <Provider>{storyFn()}</Provider>
+  </SafeAreaProvider>
+)
+
+addDecorator(ThemeDecorator);
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: (b: any, a: any) =>
+      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+  },
+  docs: {
+    theme,
+  },
+};
+

packages/ui/.storybook/theme.js

@@ -0,0 +1,38 @@
+import { create } from '@storybook/theming';
+
+const theme = create({
+  base: 'light',
+
+  colorPrimary: '#156E80',
+  colorSecondary: '#156E80',
+
+  // UI
+  appBg: 'white',
+  appContentBg: '#F7F9FA',
+  appBorderColor: '#D4DBDE',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Rubik", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#003143',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: '#609CA9',
+  barSelectedColor: '#156E80',
+  barBg: 'white',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: '#156E80',
+  inputTextColor: '#003143',
+  inputBorderRadius: 4,
+
+  brandTitle: 'Morten\'s App Design System',
+  //brandImage: 'https://zn-prod-euw1-cdn.s3.eu-west-1.amazonaws.com/logo-dark-gradient.png',
+});
+
+export { theme };