init

packages/ui/.storybook/main.ts

@@ -0,0 +1,52 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    }
+  },
+  framework: "@storybook/react-webpack5",
+  docs: {
+    autodocs: "tag",
+  },
+  webpackFinal: (config) => {
+    config!.resolve!.alias = {
+      'react-native$': 'react-native-web',
+    };
+    config!.module!.rules!.push({
+      loader: 'babel-loader',
+      test: /\.tsx?$/,
+      options: {
+        presets: ['babel-preset-expo', '@babel/preset-typescript'],
+      },
+    });
+    config!.module!.rules!.push({
+      loader: 'babel-loader',
+      test: /\.jsx?$/,
+      options: {
+        presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+      },
+      include: [
+        /node_modules\/.*react-native.*/,
+      ],
+    });
+    return config;
+  },
+};
+export default config;

packages/ui/.storybook/manager.js

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

packages/ui/.storybook/preview.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Decorator, Parameters } from '@storybook/react';
+import "@fontsource/montserrat";
+import { ThemeProvider } from 'styled-components';
+import { theme } from './theme';
+import { Provider, light } from '../src/theme/theme';
+
+const ThemeDecorator: Decorator = (storyFn) => (
+  <ThemeProvider theme={theme}>
+    <Provider theme={light}>{storyFn()}</Provider>
+  </ThemeProvider>
+)
+
+export const decorators = [ThemeDecorator];
+
+export const parameters: Parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    default: 'dark',
+    values: [
+      {
+        name: 'dark',
+        value: '#444',
+        default: true,
+      },
+      {
+        name: 'light',
+        value: '#ddd',
+      },
+    ],
+  },
+  docs: {
+    // theme,
+  },
+};

packages/ui/.storybook/theme.js

@@ -0,0 +1,37 @@
+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: 'React Native Ref Design System',
+});
+
+export { theme };