feat: add basic local storybook implementation for newspack-ui

Author: thomasguillot

.eslintrc.js

@@ -7,4 +7,13 @@ module.exports = {
 		newspack_aux_data: 'readonly',
 	},
 	ignorePatterns: [ '*/dist/', '*/node_modules/', '*/release' ],
+	overrides: [
+		{
+			files: [ '.storybook/**/*.js' ],
+			rules: {
+				'import/no-unresolved': 'off',
+				'import/no-extraneous-dependencies': 'off'
+			}
+		}
+	]
 };

.storybook/main.js

@@ -0,0 +1,31 @@
+const config = {
+  stories: [
+    '../storybook/**/*.mdx',
+    '../storybook/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config) => {
+    // Add SASS support
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+    });
+
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.js

@@ -0,0 +1,23 @@
+import '../src/newspack-ui/style.scss';
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '2em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default preview;