quevita-design-system/.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: "#E3F2F9",
      100: "#C5E4F3",
      200: "#A2D4EC",
      300: "#7AC1E4",
      400: "#47A9DA",
      500: "red",
      600: "#007AB8",
      700: "#006BA1",
      800: "#005885",
      900: "#003F5E",
    },
    // Redefinig only one shade, rest of the color will remain same.
    amber: {
      400: "#d97706",
      500: "#d97706",
    },
    guille: {
      red: "red",
      green: "green",
    },
  },
  config: {
    // Changing initialColorMode to 'dark'
    initialColorMode: "light",
  },
};

const runningcoachTheme = {
  name: "runningCOACH",
  colors: {
    // Add new color
    primary: {
      50: "#E3F2F9",
      100: "#C5E4F3",
      200: "#A2D4EC",
      300: "#7AC1E4",
      400: "#47A9DA",
      500: "green",
      600: "#007AB8",
      700: "#006BA1",
      800: "#005885",
      900: "#003F5E",
    },
    // Redefinig only one shade, rest of the color will remain same.
    amber: {
      400: "#d97706",
      500: "#d97706",
    },
    guille: {
      red: "red",
      green: "green",
    },
    tertiary: {
      500: "red",
      green: "green",
    },
    rose: {
      500: "blue",
      green: "green",
    },
    maettu: {
      500: "violet",
      green: "green",
    },
  },
  config: {
    // Changing initialColorMode to 'dark'
    initialColorMode: "light",
  },
};

const viraceTheme = {
  name: "virace",
  colors: {
    // Add new color
    primary: {
      50: "#E3F2F9",
      100: "#C5E4F3",
      200: "#A2D4EC",
      300: "#7AC1E4",
      400: "#47A9DA",
      500: "green",
      600: "#007AB8",
      700: "#006BA1",
      800: "#005885",
      900: "#003F5E",
    },
    // Redefinig only one shade, rest of the color will remain same.
    amber: {
      400: "#d97706",
      500: "#d97706",
    },
    guille: {
      red: "red",
      green: "green",
    },
    tertiary: {
      500: "red",
      green: "green",
    },
    rose: {
      500: "blue",
      green: "green",
    },
    maettu: {
      500: "violet",
      green: "green",
    },
  },
  config: {
    // Changing initialColorMode to 'dark'
    initialColorMode: "light",
  },
};

const stepcoachTheme = {
  name: "stepCOACH",
  colors: {
    // Add new color
    primary: {
      50: "#E3F2F9",
      100: "#C5E4F3",
      200: "#A2D4EC",
      300: "#7AC1E4",
      400: "#47A9DA",
      500: "green",
      600: "#007AB8",
      700: "#006BA1",
      800: "#005885",
      900: "#003F5E",
    },
    // Redefinig only one shade, rest of the color will remain same.
    amber: {
      400: "#d97706",
      500: "#d97706",
    },
    guille: {
      red: "red",
      green: "green",
    },
    tertiary: {
      500: "red",
      green: "green",
    },
    rose: {
      500: "blue",
      green: "green",
    },
    maettu: {
      500: "violet",
      green: "green",
    },
  },
  config: {
    // Changing initialColorMode to 'dark'
    initialColorMode: "light",
  },
};

const sporthilfeTheme = {
  name: "Sporthilfe",
  colors: {
    // Add new color
    primary: {
      50: "#E3F2F9",
      100: "#C5E4F3",
      200: "#A2D4EC",
      300: "#7AC1E4",
      400: "#47A9DA",
      500: "green",
      600: "#007AB8",
      700: "#006BA1",
      800: "#005885",
      900: "#003F5E",
    },
    // Redefinig only one shade, rest of the color will remain same.
    amber: {
      400: "#d97706",
      500: "#d97706",
    },
    guille: {
      red: "blue",
      green: "green",
    },
    tertiary: {
      500: "red",
      green: "green",
    },
    rose: {
      500: "blue",
      green: "green",
    },
    maettu: {
      500: "violet",
      green: "green",
    },
  },
  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,
      runningcoachTheme,
      viraceTheme,
      stepcoachTheme,
      sporthilfeTheme,
    ],
    { providerFn }
  )
);

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