Add initial button components

.babelrc

@@ -0,0 +1,3 @@
+{
+    "plugins": ["babel-plugin-react-scoped-css"]
+}

.cspell.json

@@ -1,7 +1,8 @@
 {
     "ignorePaths": [
         "graphics",
-        ".storybook-dist"
+        ".storybook-dist",
+        "*.otf"
     ],
     "import": ".cspell-base.json",
     "words": [
@@ -16,6 +17,15 @@
         "svgs",
         "tiktok",
         "toniq",
-        "toniqlabs"
+        "toniqlabs",
+        "preinstall",
+        "globby",
+        "prismjs",
+        "overscroll",
+        "callout",
+        "fonturl",
+        "iefix",
+        "opentype",
+        "truetype"
     ]
 }

.storybook/main.ts

@@ -1,4 +1,6 @@
 import {StorybookConfig} from '@storybook/core-common';
+import {dirname, resolve} from 'path';
+import type {Configuration} from 'webpack';
 
 /** These configs values are exported as individual variables to appease some storybook build warnings. */
 
@@ -12,9 +14,9 @@ export const addons: StorybookConfig['addons'] = [
 ];
 export const framework: StorybookConfig['framework'] = '@storybook/react';
 
-export const staticDirs: StorybookConfig['staticDirs'] = ['./public'];
+export const staticDirs: StorybookConfig['staticDirs'] = ['../public'];
 
-export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
+export const webpackFinal: StorybookConfig['webpackFinal'] = (config: Configuration) => {
     const maxAssetSize = 1024 * 1024;
 
     config.optimization = {
@@ -31,6 +33,29 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
         maxAssetSize: maxAssetSize,
     };
 
+    config.module?.rules?.push({
+        test: /\.scoped\.(sc|c|sa)ss$/,
+        include: dirname(__dirname),
+        use: [
+            'style-loader',
+            'css-loader',
+            'scoped-css-loader',
+            'sass-loader',
+            {
+                loader: 'style-resources-loader',
+                options: {
+                    patterns: ['./src/assets/styles/main.scss'],
+                },
+            },
+        ],
+    });
+
+    config.resolve!.roots = [
+        // Fixes for unresolved assets from within css/scss at build time https://github.com/storybookjs/storybook/issues/12844#issuecomment-970088820
+        resolve(__dirname, '../public'),
+        'node_modules',
+    ];
+
     return config;
 };
 

.virmator/jest/jest-config.ts

@@ -19,6 +19,9 @@ export const virmatorJestConfig: InitialOptionsTsJest = {
             },
         },
     },
+    moduleNameMapper: {
+        '.+\\.(css|sass|scss)$': 'identity-obj-proxy',
+    },
 };
 
 export default virmatorJestConfig;