Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-core-ui/.storybook/main.ts

@@ -0,0 +1,60 @@
+const path = require('path');
+const editorDir = path.join(__dirname, '../../noodl-editor');
+const coreLibDir = path.join(__dirname, '../');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-measure'
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5'
+  },
+  webpackFinal: (config) => {
+    const destinationPath = path.resolve(__dirname, '../../noodl-editor');
+    const addExternalPath = (rules) => {
+      for (let i = 0; i < rules.length; i++) {
+        const rule = rules[i];
+        if (rule.test && RegExp(rule.test).test('.tsx')) {
+          if (rule.include?.length) rule.include.push(destinationPath);
+          else rule.include = destinationPath;
+        } else if (rule.test && RegExp(rule.test).test('.ts')) {
+          if (rule.include?.length) rule.include.push(destinationPath);
+          else rule.include = destinationPath;
+        } else if (rule.oneOf) {
+          addExternalPath(rule.oneOf);
+        }
+      }
+    };
+
+    addExternalPath(config.module.rules);
+
+    config.module.rules.push({
+      test: /\.ts$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader')
+        }
+      ]
+    });
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@noodl-core-ui': path.join(coreLibDir, 'src'),
+      '@noodl-hooks': path.join(editorDir, 'src/editor/src/hooks'),
+      '@noodl-utils': path.join(editorDir, 'src/editor/src/utils'),
+      '@noodl-models': path.join(editorDir, 'src/editor/src/models'),
+      '@noodl-constants': path.join(editorDir, 'src/editor/src/constants'),
+      '@noodl-contexts': path.join(editorDir, 'src/editor/src/contexts'),
+      '@noodl-types': path.join(editorDir, 'src/editor/src/types'),
+      '@noodl-views': path.join(editorDir, 'src/editor/src/views')
+    };
+
+    return config;
+  }
+};

packages/noodl-core-ui/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark
+});

packages/noodl-core-ui/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div class="dialog-layer-portal-target" style="position: absolute;z-index: 666;top: 0;left: 0;"></div>

packages/noodl-core-ui/.storybook/preview.ts

@@ -0,0 +1,22 @@
+import '../src/styles/custom-properties/fonts.css';
+import '../src/styles/custom-properties/colors.css';
+import '../src/styles/custom-properties/animations.css';
+import '../src/styles/global.css';
+import { themes } from '@storybook/theming';
+
+// Setup the platform before anything else is loading
+// This is a problem since we are calling the platform when importing
+import '@noodl/platform';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  },
+  docs: {
+    theme: themes.dark
+  }
+};