Merge branch 'master' into button

.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,17 +38,14 @@ module.exports = {
 
   coverageDirectory: '<rootDir>/test/coverage/',
 
-  coveragePathIgnorePatterns: [
-    '<rootDir>/dist/',
-    '<rootDir>/helpers/',
-    '<rootDir>/node_modules/',
-    '<rootDir>/src/stories/',
-  ],
-
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost/',
   },
 
   coverageProvider: 'v8',
+
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+ },
 };

components/src/stories/Button.stories.js

@@ -0,0 +1,29 @@
+import Button from '~widgets/button/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-button', Button);
+
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `<ui-button disabled v-bind="args"></ui-button>`,
+  }),
+
+  args: {
+    text: 'Text',
+  },
+};
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    text: 'text',
+  },
+};

components/src/widgets/button/widget.spec.js

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import Button from './widget';
+
+
+describe('Button widget', () => {
+  let result;
+
+  describe('computed', () => {
+    describe('#style', () => {
+      it('returns the styles', () => {
+        const wrapper = mount(Button)
+
+        result = wrapper.vm.style;
+
+        expect(result).toEqual(`
+  background-color: #2C98F0;
+  color: #FFF;
+`);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('#onClick', () => {
+      it('emits clicked event if it is not disabled', async () => {
+        const wrapper = mount(Button)
+
+        result = wrapper.vm.onClick();
+
+        expect(wrapper.emitted('clicked')).toBeTruthy()
+      });
+    });
+  });
+});

src/widgets/button/widget.vue → components/src/widgets/button/widget.vue

@@ -3,6 +3,7 @@
   <button
     :disabled="disabled"
     :style="style"
+    @click="onClick"
   >
     <slot>
       {{ text }}
@@ -13,6 +14,8 @@
 <script setup>
 import { computed } from 'vue'
 
+const emit = defineEmits(['clicked']);
+
  const props = defineProps({
   text: {
     type: String,
@@ -30,12 +33,17 @@ import { computed } from 'vue'
     type: String,
     default: '#FFF',
   },
-})
+});
 
 const style = computed(() => `
   background-color: ${props.backgroundColor};
   color: ${props.color};
 `);
+
+const onClick = () => {
+  if (!props.disabled) emit('clicked');
+};
+
 </script>
 
 <style lang="stylus">
@@ -50,7 +58,15 @@ button {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 
   &:hover {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    background-color: #f2f2f2 !important;
+    color: #BDBDBD !important;
     opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
   }
 }
 </style>

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' }],
+    },
+  },
+};