Updated directory structure and project configuration to allow multiple exports

.eslintrc.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 module.exports = {
   root: true,
-  ignorePatterns: ['*.config.js', '*.spec.js', 'tasks/*', 'dist/*'],
+  ignorePatterns: ['*.config.js', '*.spec.js', 'dist/*'],
   extends: [
     'plugin:vue/vue3-recommended',
     'eslint:recommended',

.github/workflows/build.yml

@@ -14,13 +14,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '16', '18', '20' ]
+        node: [ '18', '20' ]
     name: Node ${{ matrix.node }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
       - name: Install dependencies
@@ -33,11 +33,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: npm install
       - name: Testing
@@ -60,10 +60,13 @@ jobs:
     needs: [sonar]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Install dependencies
-        run: yarn
+        run: npm ci
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/publish.yml

@@ -11,21 +11,21 @@ jobs:
     name: Running Publish Build
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Install dependencies
         run: npm install
       - name: Build
         run: npm run build
       - name: Testing
         run: npm test
       - name: Publish NPM package
-        uses: JS-DevTools/npm-publish@v1
+        uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
           access: "public"
           dry-run: false
-          check-version: true
+          strategy: all

.storybook/main.js

@@ -1,11 +1,10 @@
 const path = require('path');
-const {resolve} = require("path");
 
 
 module.exports = {
   stories: [
-    "../src/**/*.stories.@(js|jsx|ts|tsx|vue)",
-    "../src/stories/**/*.mdx",
+    "../components/src/**/*.stories.@(js|jsx|ts|tsx|vue)",
+    "../components/src/stories/**/*.mdx",
   ],
 
   staticDirs: ["../public"],
@@ -35,7 +34,7 @@ module.exports = {
         type: 'asset/source',
         loader: 'svgo-loader',
         options: {
-          configFile: require.resolve('../svgo.config.js'),
+          configFile: require.resolve('../components/svgo.config.js'),
         },
       }
     );
@@ -61,9 +60,9 @@ module.exports = {
 
     config.resolve.alias = {
       'vue': path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
-      '~core': path.resolve(__dirname, '../src/core'),
-      '~widgets': path.resolve(__dirname, '../src/widgets'),
-      '~constants': resolve(__dirname, '../src/constants'),
+      '~core': path.resolve(__dirname, '../components/src/core'),
+      '~widgets': path.resolve(__dirname, '../components/src/widgets'),
+      '~constants': path.resolve(__dirname, '../components/src/constants'),
     };
 
     return config;

jest.config.js → components/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  rootDir: __dirname,
   moduleFileExtensions: [
     'js',
     'json',
@@ -37,13 +38,6 @@ module.exports = {
 
   coverageDirectory: '<rootDir>/test/coverage/',
 
-  coveragePathIgnorePatterns: [
-    '<rootDir>/dist/',
-    '<rootDir>/helpers/',
-    '<rootDir>/node_modules/',
-    '<rootDir>/src/stories/',
-  ],
-
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost/',

components/webpack.config.js

@@ -0,0 +1,92 @@
+const { VueLoaderPlugin } = require('vue-loader');
+const ESLintPlugin = require('eslint-webpack-plugin');
+
+const { resolve } = require("path");
+
+module.exports = {
+  mode: process.env.NODE_ENV,
+
+  experiments: {
+    outputModule: true,
+  },
+
+  entry: resolve(__dirname, 'src/index.js'),
+
+  output: {
+    path: resolve(__dirname, '..', 'dist'),
+    filename: 'index.js',
+    library: {
+      type: 'module',
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: {
+          loader: 'vue-loader',
+          options: {
+            customElement: true,
+            compilerOptions: {
+              isCustomElement: tag => tag.startsWith('ui-'),
+            },
+          },
+        },
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('app'), resolve('test')],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader',
+        ],
+      },
+      {
+        test: /\.svg/,
+        type: 'asset/source',
+        loader: 'svgo-loader',
+        options: {
+          configFile: resolve(__dirname, 'svgo.config.js'),
+        },
+      },
+    ],
+  },
+
+  resolve: {
+    alias: {
+      '~core': resolve(__dirname, './src/core'),
+      '~widgets': resolve(__dirname, './src/widgets'),
+      '~constants': resolve(__dirname, './src/constants'),
+    },
+  },
+
+  plugins: [
+    new VueLoaderPlugin(),
+
+    new ESLintPlugin({
+      extensions: ['js', 'vue'],
+    }),
+  ],
+  devServer: {
+    hot: true,
+
+    allowedHosts: 'all',
+
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+
+    static: ['dist'],
+
+    historyApiFallback: {
+      rewrites: [{ from: /./, to: '/index.js' }],
+    },
+  },
+};