Add Storybook

[dsebastien]

Related: https://github.com/area17/blast

[dsebastien]

Old main.js

module.exports = {
  stories: ['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials', '@nx/react/plugins/storybook', 'storybook-tailwind-dark-mode', '@storybook/addon-mdx-gfm'],
  // Customize the Webpack configuration
  // References
  // - https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
  // - https://nx.dev/packages/storybook/documents/custom-builder-configs
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
    };
    return config;
  },
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: true,
  },
};

[dsebastien]

Old preview.ts

import { Preview } from '@storybook/react';

import './tailwind-imports.css';

const preview: Preview = {
  parameters: {},
};

export default preview;

[dsebastien]

Old tailwind-imports.css

/*
 * Wrap Tailwind's base and utilities in separate layers
 * Reference: https://primereact.org/tailwind/#csslayer
 */
@layer tailwind-base, primereact, tailwind-utilities;

@import 'primereact/resources/themes/lara-light-pink/theme.css' layer(primereact);

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

/* TODO import app styles.css */