qvt-components/.storybook/preview.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

import { addDecorator } from "@storybook/react";
import { withThemes } from "@react-theming/storybook-addon";

// import { theme } from "../src/theme";
import { NativeBaseProvider, extendTheme } from "native-base";

const defaultTheme = {
  name: "default",
  colors: {
    // Add new color
    primary: {
      50: "#F8DDDD",
      100: "#F1BCBC",
      200: "#EA9A9A",
      300: "#E27878",
      400: "#DB5757",
      500: "#D22E2E",
      600: "#B92727",
      700: "#972020",
      800: "#761919",
      900: "#541212",
    },
    secondary: {
      50: "#D4E0E7",
      100: "#B5C1CF",
      200: "#9CACBF",
      300: "#8497AE",
      400: "#6B829E",
      500: "#596E88",
      600: "#49EA6F",
      700: "#384656",
      800: "#262F3A",
      900: "#181E25",
    },
    tertiary: {
      50: "#EFF5FB",
      100: "#CFE2F2",
      200: "#AECEEA",
      300: "#8EBAE1",
      400: "#6EA7D8",
      500: "#4E93D0",
      600: "#337FC1",
      700: "#2B6AA1",
      800: "#225581",
      900: "#1A4061",
    },
    // Redefinig only one shade, rest of the color will remain same.
  },
  config: {
    // Changing initialColorMode to 'dark'
    initialColorMode: "light",
  },
};

const providerFn = ({ theme, children }) => {
  const nbTheme = extendTheme(theme);
  return <NativeBaseProvider theme={nbTheme}>{children}</NativeBaseProvider>;
};

// pass ThemeProvider and array of your themes to decorator
addDecorator(withThemes(null, [defaultTheme], { providerFn }));

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
    expanded: true,
  },
};