[refactor] #514: Component Story Format 3.0

.changeset/curvy-moose-hide.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`STabsPanel`): fix `background` reactivity in the provided `TabsPanelApi`

.changeset/good-eels-jump.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`STab`): don't destructure reactive `TabsPanelApi`

.changeset/quiet-badgers-beg.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**refactor**(`STextField`, `SSwitch`, `SUseNotification`, `SNotificationBody`, `SModal`, `SModalCard`, `SAlert`): set default values for optional props

.changeset/quiet-ghosts-hug.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feature**(`SSwitch`): add `label-hidden` optional bool prop in order to _visually_ hide the `label` (`false` by default); update doc comments

.changeset/spicy-rivers-run.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feature**(`STextField`, `SSwitch`): use auto-generated `id` if not provided

.changeset/tricky-seas-knock.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**perf**(`STextField`): use `computedEager` for cheap computeds; use `shallowRef` instead of `ref`

.changeset/warm-zebras-breathe.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**refactor!**(`STabsPanel`): use passive `model-value`; allow it to be `null`

.eslintrc.js

@@ -24,11 +24,13 @@ module.exports = {
 
     '@typescript-eslint/consistent-type-definitions': 'off',
 
-    // FIXME
-    'vue/require-default-prop': 'off',
-
-    // FIXME
-    'vuejs-accessibility/no-static-element-interactions': 'off',
+    'vuejs-accessibility/label-has-for': [
+      'error',
+      {
+        // all labels should have `for` attr
+        required: 'id',
+      },
+    ],
   },
   overrides: [
     {
@@ -43,38 +45,57 @@ module.exports = {
       files: ['**/packages/ui/**/*.{ts,vue,js}'],
       extends: ['./packages/ui/.eslintrc-auto-import.json'],
     },
-    {
-      files: ['**/*.spec.{js,ts}'],
-      env: {
-        jest: true,
-      },
-    },
-
-    // It is OK to define a lot of components in stories or tests
     {
       files: ['**/packages/ui/stories/**/*.stories.ts', '**/*.cy.{js,ts}'],
       rules: {
+        // It is OK to define a lot of components in stories or tests
         'vue/one-component-per-file': 'off',
+
+        // We don't need such strictness in stories
+        'vue/require-prop-types': 'off',
       },
     },
     {
       files: ['**/*.spec.ts', '**/*.spec.cy.ts'],
       rules: {
         'max-nested-callbacks': 'off',
+
+        // We don't need such strictness in tests
+        'vue/require-default-prop': 'off',
+        'vue/require-prop-types': 'off',
       },
     },
 
-    // FIXME - temporary disables to fix them in a different PRs
     {
       files: ['**/ui/src/components/Select/**/*.vue'],
       rules: {
+        // FIXME https://github.com/soramitsu/soramitsu-js-ui-library/issues/525
         'vuejs-accessibility/click-events-have-key-events': 'off',
+        'vuejs-accessibility/no-static-element-interactions': 'off',
+      },
+    },
+
+    {
+      files: ['**/ui/src/components/DatePicker/**/*.vue'],
+      rules: {
+        // FIXME https://github.com/soramitsu/soramitsu-js-ui-library/issues/526
+        'vuejs-accessibility/no-static-element-interactions': 'off',
+      },
+    },
+
+    {
+      files: ['**/ui/src/components/Table/**/*.vue'],
+      rules: {
+        // FIXME https://github.com/soramitsu/soramitsu-js-ui-library/issues/527
+        'vuejs-accessibility/no-static-element-interactions': 'off',
       },
     },
+
+    // FIXME https://github.com/soramitsu/soramitsu-js-ui-library/issues/528
     {
-      files: ['**/STextField.vue', '**/SSwitch.vue'],
+      files: ['**/ui/src/components/JsonInput/**/*.vue'],
       rules: {
-        'vuejs-accessibility/label-has-for': 'off',
+        'vuejs-accessibility/no-static-element-interactions': 'off',
       },
     },
   ],

package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "sb:serve": "pnpm --filter ui sb:serve",
+    "sb:dev": "pnpm --filter ui sb:dev",
     "sb:build": "pnpm --filter ui sb:build",
     "test:all": "run-s lint:check test:theme:unit build:vite-plugin-svg test:ui:unit test:ui:cy build:ui:only-vite test:ui:after-build",
     "test:theme:unit": "pnpm --filter theme test",
@@ -44,8 +44,8 @@
     "prettier": "^2.6.2",
     "prettier-eslint": "^15.0.0",
     "prettier-eslint-cli": "^7.1.0",
-    "typescript": "5.0.2",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "typescript": "5.0.4",
+    "vite": "^4.3.4",
+    "vitest": "^0.30.1"
   }
 }

packages/ui/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+export default {
+  stories: [
+    {
+      directory: '../stories/components',
+      titlePrefix: 'Components',
+      files: '**/*.stories.@(js|jsx|ts|tsx)',
+    },
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+} satisfies StorybookConfig

packages/ui/.storybook/preview.js → packages/ui/.storybook/preview.ts

@@ -1,12 +1,10 @@
+import type { Preview } from '@storybook/vue3'
+
 import 'virtual:windi.css'
 import './custom.scss'
 
-/** @type { import('@storybook/vue3').Preview } */
-const preview = {
+export default {
   parameters: {
-    backgrounds: {
-      default: 'light',
-    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
@@ -15,6 +13,4 @@ const preview = {
       },
     },
   },
-}
-
-export default preview
+} satisfies Preview

packages/ui/cypress/component/SSwitch.spec.cy.ts

@@ -9,49 +9,58 @@ after(() => {
   VueTestUtils.config.global.components = {}
 })
 
-it('SSwitch - renders with specified label', () => {
-  cy.mount(SSwitch, { props: { id: 'id', label: 'Label' } })
+describe('SSwitch', () => {
+  it('renders with specified label', () => {
+    cy.mount(SSwitch, { props: { label: 'Label' } })
 
-  cy.contains('Label')
-})
+    cy.contains('Label')
+  })
 
-it('SSwitch - renders unchecked switch by default', () => {
-  cy.mount(SSwitch, { props: { id: 'id' } })
+  it('renders unchecked switch by default', () => {
+    cy.mount(SSwitch, { props: { label: 'Test' } })
 
-  cy.get('input').should('be.not.checked')
-})
+    cy.get('input').should('be.not.checked')
+  })
 
-it('SSwitch - renders disabled switch when prop is passed', () => {
-  cy.mount(SSwitch, { props: { id: 'id', disabled: true } })
+  it('renders disabled switch when prop is passed', () => {
+    cy.mount(SSwitch, { props: { label: 'Test', disabled: true } })
 
-  cy.get('input').should('be.disabled')
-})
+    cy.get('input').should('be.disabled')
+  })
 
-it('SSwitch - handles two-way data binding and rises value up', () => {
-  cy.mount({
-    setup() {
-      const checked = ref(false)
+  it('handles two-way data binding and rises value up', () => {
+    cy.mount({
+      setup() {
+        const checked = ref(false)
 
-      return { checked }
-    },
-    template: `
+        return { checked }
+      },
+      template: `
       <div class="switch">{{ checked }}</div>
       <SSwitch
-        id="id"
         v-model="checked"
         label="Label"
       />
       `,
+    })
+
+    cy.contains('Label').click()
+    cy.get('.switch').contains('true')
   })
 
-  cy.contains('Label').click()
-  cy.get('.switch').contains('true')
-})
+  describe('a11y', () => {
+    beforeEach(() => {
+      cy.injectAxeAndConfigureCTDefaults()
+    })
 
-it('SSwitch - has the same id for linking label with input element', () => {
-  const id = 'identificator'
-  cy.mount(SSwitch, { props: { id } })
+    it('SSwitch - a11y check with visible label', () => {
+      cy.mount(SSwitch, { props: { label: 'Test' } })
+      cy.checkA11y()
+    })
 
-  cy.get('input').should('have.id', id)
-  cy.get('label').should('have.attr', 'for', id)
+    it('SSwitch - a11y check with hidden label', () => {
+      cy.mount(SSwitch, { props: { label: 'Test', labelHidden: true } })
+      cy.checkA11y()
+    })
+  })
 })

packages/ui/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.10",
+    "@vue-kakuyaku/core": "^0.4",
     "@vueuse/core": "^9.13",
     "@vueuse/math": "^9.13",
     "date-fns": "^2.29",
@@ -52,44 +53,43 @@
     "@soramitsu-ui/icons": "0.1.0",
     "@soramitsu-ui/theme": "0.3.0",
     "@soramitsu-ui/vite-plugin-svg": "0.1.0",
-    "@storybook/addon-actions": "7.0.0-beta.62",
-    "@storybook/addon-essentials": "7.0.0-beta.62",
-    "@storybook/addon-interactions": "^7.0.0-beta.62",
-    "@storybook/addon-links": "7.0.0-beta.62",
-    "@storybook/blocks": "^7.0.0-beta.62",
-    "@storybook/cli": "7.0.0-beta.62",
-    "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/vue3": "7.0.0-beta.62",
-    "@storybook/vue3-vite": "^7.0.0-beta.62",
+    "@storybook/addon-actions": "7.0.7",
+    "@storybook/addon-essentials": "7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "7.0.7",
+    "@storybook/blocks": "^7.0.7",
+    "@storybook/cli": "7.0.7",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/vue3": "7.0.7",
+    "@storybook/vue3-vite": "^7.0.7",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/jsoneditor": "^9.9.0",
     "@types/lodash-es": "^4.17.6",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vue/compiler-core": "^3.2",
-    "@vue/test-utils": "^2",
+    "@vitejs/plugin-vue": "^4.2.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/test-utils": "^2.3.2",
     "axe-core": "^4.4.1",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "cypress": "^12.7.0",
+    "cypress": "^12.11.0",
     "cypress-axe": "^1.0.0",
     "happy-dom": "^8.9.0",
     "immer": "^9.0.19",
     "postcss": "^8.4.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.18.0",
-    "rollup-plugin-dts": "^5.2.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-dts": "^5.3.0",
     "sass": "^1.41.1",
-    "storybook": "^7.0.0-beta.62",
+    "storybook": "^7.0.7",
     "tabbable": "^6.0.0",
     "ts-pattern": "^4.2.1",
-    "typescript": "5.0.2",
+    "typescript": "5.0.4",
     "unimport": "^3.0.2",
     "unplugin-auto-import": "^0.15.1",
     "unplugin-icons": "^0.15.3",
-    "vite": "^4.1.4",
+    "vite": "^4.3.4",
     "vite-plugin-windicss": "^1.8.10",
-    "vue-tsc": "^1.2.0",
+    "vue-tsc": "1.2",
     "windicss": "^3.5.4"
   }
 }

packages/ui/src/components/Accordion/SAccordionItem.vue

@@ -22,6 +22,7 @@ const props = withDefaults(
 
 const emit = defineEmits<(event: 'update:modelValue', value: boolean) => void>()
 
+// FIXME replace with useVModel-passive?
 const model = ref(props.modelValue)
 watch(
   () => props.modelValue,

packages/ui/src/components/Alert/SAlert.vue

@@ -13,6 +13,8 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {
   status: Status.Info,
   showCloseBtn: false,
+  title: undefined,
+  description: undefined,
 })
 
 const emit = defineEmits<(event: 'click:close') => void>()