Lite 29719 update eslint config and add prettier (#66)

* LITE-29719 update eslintrc, add prettier config, add github action for prettier

* LITE-29719 run prettier to format all files

* LITE-29719 remove not needed script

Author: paulinaczybir

.eslintrc.js

@@ -1,3 +1,5 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
 module.exports = {
   root: true,
 
@@ -13,6 +15,8 @@ module.exports = {
     'plugin:vue/vue3-recommended',
     'eslint:recommended',
     'plugin:storybook/recommended',
+    'prettier',
+    '@vue/eslint-config-prettier/skip-formatting',
   ],
 
   plugins: ['vue'],
@@ -21,17 +25,21 @@ module.exports = {
   rules: {
     'vue/multi-word-component-names': 'off',
     'vue/no-deprecated-slot-attribute': 'off',
+    'vue/block-order': [
+      'error',
+      {
+        order: ['template', 'script', 'style'],
+      },
+    ],
+    'vue/attribute-hyphenation': ['error', 'never'],
   },
 
   overrides: [
     // Config for unit tests
     {
       files: ['*.spec.js'],
       plugins: ['jest'],
-      extends: [
-        'plugin:jest/recommended',
-        'plugin:jest-formatting/strict',
-      ],
+      extends: ['plugin:jest/recommended', 'plugin:jest-formatting/strict'],
       env: {
         jest: true,
         'jest/globals': true,

.github/workflows/build.yml

@@ -2,19 +2,19 @@ name: Build and Test
 
 on:
   push:
-    branches: "*"
+    branches: '*'
     tags:
       - '*'
 
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   test:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '18', '20' ]
+        node: ['18', '20']
     name: Node ${{ matrix.node }}
     steps:
       - name: Checkout
@@ -24,9 +24,11 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
       - name: Install dependencies
-        run: npm install
+        run: npm ci
       - name: Lint
         run: npm run lint
+      - name: Check formatting with Prettier
+        run: npm run format:check
       - name: Testing
         run: npm test
   sonar:
@@ -41,7 +43,7 @@ jobs:
         with:
           node-version: 20
       - name: Install dependencies
-        run: npm install
+        run: npm ci
       - name: Testing
         run: npm test
       - uses: SonarSource/sonarcloud-github-action@master

.github/workflows/publish.yml

@@ -17,7 +17,7 @@ jobs:
         with:
           node-version: 20
       - name: Install dependencies
-        run: npm install
+        run: npm ci
       - name: Build
         run: npm run build
       - name: Testing
@@ -26,6 +26,6 @@ jobs:
         uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
-          access: "public"
+          access: 'public'
           dry-run: false
           strategy: all

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "all",
+  "singleAttributePerLine": true
+}

.storybook/CloudBlueTheme.js

@@ -1,11 +1,10 @@
-
 import { create } from '@storybook/theming';
 
 export default create({
   base: 'light',
   brandTitle: 'CloudBlue Connect',
   brandUrl: 'https://connect.cloudblue.com',
-  brandImage: 'https://connect.cloudblue.com/wp-content/uploads/2020/07/ClouBlue-Standalone-Logo-Blue.png',
+  brandImage:
+    'https://connect.cloudblue.com/wp-content/uploads/2020/07/ClouBlue-Standalone-Logo-Blue.png',
   brandTarget: '_self',
 });
-

.storybook/main.js

@@ -1,25 +1,24 @@
 const path = require('node:path');
 
-
 module.exports = {
   stories: [
-    "../components/src/**/*.stories.@(js|jsx|ts|tsx|vue)",
-    "../components/src/stories/**/*.mdx",
+    '../components/src/**/*.stories.@(js|jsx|ts|tsx|vue)',
+    '../components/src/stories/**/*.mdx',
   ],
 
-  staticDirs: ["../public"],
+  staticDirs: ['../public'],
 
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-	  "@storybook/addon-designs",
-    "storybook-vue-addon",
-    "storybook-addon-vue-mdx",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-designs',
+    'storybook-vue-addon',
+    'storybook-addon-vue-mdx',
   ],
 
   framework: {
-    name: "@storybook/vue3-webpack5",
+    name: '@storybook/vue3-webpack5',
     options: {},
   },
 
@@ -28,38 +27,32 @@ module.exports = {
   },
 
   webpackFinal: async (config) => {
-    config.module.rules.push(
-      {
-        test: /\.svg/,
-        type: 'asset/source',
-        loader: 'svgo-loader',
-        options: {
-          configFile: require.resolve('../components/svgo.config.js'),
-        },
-      }
-    );
+    config.module.rules.push({
+      test: /\.svg/,
+      type: 'asset/source',
+      loader: 'svgo-loader',
+      options: {
+        configFile: require.resolve('../components/svgo.config.js'),
+      },
+    });
 
     // Find Vue webpack rule and update its options to work with custom elements
-    const vueRule = config.module.rules.find(rule => rule.test?.toString() === '/\\.vue$/');
+    const vueRule = config.module.rules.find((rule) => rule.test?.toString() === '/\\.vue$/');
     vueRule.options = {
       ...vueRule.options,
       customElement: true,
       compilerOptions: {
-        isCustomElement: tag => tag.startsWith('ui-'),
+        isCustomElement: (tag) => tag.startsWith('ui-'),
       },
     };
 
     config.module.rules.push({
       test: /\.styl(us)$/,
-      use: [
-        'vue-style-loader',
-        'css-loader',
-        'stylus-loader',
-      ],
+      use: ['vue-style-loader', 'css-loader', 'stylus-loader'],
     });
 
     config.resolve.alias = {
-      'vue': path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
+      vue: path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
       '~core': path.resolve(__dirname, '../components/src/core'),
       '~widgets': path.resolve(__dirname, '../components/src/widgets'),
       '~constants': path.resolve(__dirname, '../components/src/constants'),

.storybook/manager.js

@@ -1,4 +1,3 @@
-
 import { addons } from '@storybook/addons';
 import { themes } from '@storybook/theming';
 import cloudBlueTheme from './CloudBlueTheme';

.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

README.md

@@ -7,39 +7,39 @@
 
 ---
 
-Build your Connect Extension UI easily with our UI Toolkit. Feel free to use any frontend library 
+Build your Connect Extension UI easily with our UI Toolkit. Feel free to use any frontend library
 or framework you prefer!
 
 ## Installation
+
 ### Minimalistic via CDN
 
 Just plug a module via `script` tag, import default exported function and call it. You're good.
 
 N.B.: For development mode - by default `<path>` will be `http://localhost:3003`
 
 ```html
-<script type="module"> 
+<script type="module">
   import createApp from '<path>';
-  
+
   createApp();
 </script>
 ```
 
 This will implement minimalistic interaction with parent Connect Application.
 
 ## Usage
+
 ### Use widgets
 
 1. Import required widget from named exports
 2. Pass a configuration Object to `createApp` function as an argument
 3. Configuration object should contain desired tag name as a `key` and widget descriptor object as a `value`. N.B.: widget name should contain at least one "-"
 
 ```html
-<script type="module"> 
-  import createApp, { 
-    Card,
-  } from '<path>';
-  
+<script type="module">
+  import createApp, { Card } from '<path>';
+
   createApp({
     'my-card': Card,
   });
@@ -55,24 +55,26 @@ This will implement minimalistic interaction with parent Connect Application.
 Control widgets using attributes (see widgets documentation)
 
 ### Interaction with parent app
-We implemented two ways to interact with parent application - one is data-based, another events-based. 
-You will find supported data properties and handled events list in slot's documentation. 
-Let's see how you can use it to build your app: 
+
+We implemented two ways to interact with parent application - one is data-based, another events-based.
+You will find supported data properties and handled events list in slot's documentation.
+Let's see how you can use it to build your app:
 
 ### Data-based interface with `watch/commit`
-If some data-based interface is documented for particular slot 
+
+If some data-based interface is documented for particular slot
 you may subscribe on it using `watch` method or publish changes using `commit`
 
 ```html
-<script type="module"> 
+<script type="module">
   import createApp from '<path>';
-  
+
   const app = createApp();
-  
-  app.watch('observed', (value) => { 
+
+  app.watch('observed', (value) => {
     /* handle "observed" property change here */
   });
-  
+
   app.commit({
     observed: /* Desired "observed" value here */,
   });
@@ -94,29 +96,18 @@ Functions, Dates etc. will not work.**
 ### Events-based interface with `listen/emit`;
 
 ```html
-<script type="module"> 
+<script type="module">
   import createApp from '<path>';
-  
+
   const app = createApp();
-  
+
   app.emit('openDialog', {
     title: 'Lorem Ipsum',
     description: 'Dolor sit amet',
   });
-  
+
   app.listen('dialog:confirmed', () => {
     /* handle parent app dialog confirmation */
   });
 </script>
 ```
-
-
-
-
-
-
-
-
-
-
-

components/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  "presets": [
-    "@vue/cli-plugin-babel/preset",
-  ],
+  presets: ['@vue/cli-plugin-babel/preset'],
 };