[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-ghosts-hug.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**refactor!**(`SSwitch`): remove `id` prop (it is generated automatically inside now); make `label` prop required - a11y first; add `label-hidden` optional bool prop in order to _visually_ hide the `label` (`false` by default); update doc comments

.changeset/warm-zebras-breathe.md

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

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",

packages/ui/.storybook/main.js

@@ -1,7 +1,12 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 const config = {
-  // TODO use other stories as well
-  stories: ['../stories/**/Alert.stories.@(js|jsx|ts|tsx)'],
+  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',

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

@@ -66,6 +66,7 @@
     "@types/lodash-es": "^4.17.6",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue-kakuyaku/core": "^0.4.3",
     "@vue/compiler-core": "^3.2",
     "@vue/test-utils": "^2",
     "axe-core": "^4.4.1",

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/Notifications/SUseNotification.ts

@@ -22,7 +22,12 @@ export default /* @__PURE__ */ defineComponent({
     showCloseBtn: Boolean,
     description: String,
   },
-  emits: ['update:show', 'click:close', 'timeout'],
+  emits: [
+    // FIXME avoid `v-model` for `show`, because it always emits `false` from the component
+    'update:show',
+    'click:close',
+    'timeout',
+  ],
   setup(props, { emit, slots }) {
     const show = useVModel(props, 'show', emit)
 

packages/ui/src/components/Select/SDropdown.vue

@@ -12,9 +12,9 @@ const props = defineProps<{
   multiple?: boolean
   label?: string
   size?: SelectSize
-  inline?: boolean
   noAutoClose?: boolean
   loading?: boolean
+  inline?: boolean
   dropdownSearch?: boolean
   remoteSearch?: boolean
 }>()

packages/ui/src/components/Select/SSelect.vue

@@ -14,8 +14,12 @@ const props = defineProps<{
   size?: SelectSize
   noAutoClose?: boolean
   loading?: boolean
+  // FIXME `triggerSearch` makes sense only in scope of `SSelectBase`
+  //        I think here it is better to name it `search-in-input`
   triggerSearch?: boolean
+  // FIXME `search-in-dropdown`?
   dropdownSearch?: boolean
+  // FIXME `search-external`
   remoteSearch?: boolean
 }>()
 
@@ -27,6 +31,7 @@ const defaultOptionType = computed(() => (props.multiple ? SelectOptionType.Chec
     v-bind="{ ...$attrs, ...$props } as any"
     same-width-popper
   >
+    <!-- FIXME no sense to get `search` from the slot bindings -->
     <template #control="{ search }">
       <SSelectInput
         data-testid="select-trigger"

packages/ui/src/components/Select/SSelectBase.vue

@@ -55,16 +55,22 @@ const props = withDefaults(
     /**
      * When enabled, passes `search: true` to the `trigger` slot
      */
+    // TODO rename to `searchSlotTrigger`?
+    // FIXME also, it passes `search:true` to CONTROL slot, not TRIGGER
+    //       does it makes sense to pass it at all? cause it is controlled
+    //       by the parent component anyway and isn't anyhow used in this component
     triggerSearch?: boolean
 
     /**
      * When enabled, passes `search: true` to the `dropdown` slot
      */
+    // TODO rename to `searchSlotDropdown`?
     dropdownSearch?: boolean
 
     /**
      * By default, the component filters options by their labels. Set `true` to disable automatic filtering.
      */
+    // TODO rename to `searchExternal`?
     remoteSearch?: boolean
   }>(),
   {

packages/ui/src/components/Switch/SSwitch.vue

@@ -1,49 +1,55 @@
 <script setup lang="ts">
+import { uniqueElementId } from '@/util'
+
 type Props = {
   /**
-   * v-model for two-way data binding
+   * Switch state
    */
   modelValue?: boolean
   /**
-   * Id for matching switch with label
+   * Text label for switch. Required for a11y. If you don't want it to be rendered, use {@link labelHidden}
    *
+   * @default ''
    */
-  id: string
+  label: string
   /**
-   * Text label for switch
+   * Whether to render label or not
    *
-   * @default ''
+   * @default false
    */
-  label?: string
+  labelHidden?: boolean
   /**
-   * Attr specfifies whether switch is disabled
+   * Whether the input is disabled or not
    *
    * @default false
    */
   disabled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  label: '',
   disabled: false,
+  labelHidden: false,
 })
 
+const inputId = uniqueElementId()
+
 const emit = defineEmits<(event: 'update:modelValue', value: boolean) => void>()
 const model = useVModel(props, 'modelValue', emit)
 </script>
 
 <template>
   <div class="s-switch">
     <input
-      :id="id"
+      :id="inputId"
       v-model="model"
       type="checkbox"
       :disabled="disabled"
       class="s-switch__button"
     >
+    <!-- note: `sr-only` class visually hides the element while keeping it accessible for Screen Reader -->
     <label
-      :for="id"
-      class="s-switch__label sora-tpg-p3"
+      :for="inputId"
+      :class="['s-switch__label sora-tpg-p3', { 'sr-only': labelHidden }]"
     >{{ label }}</label>
   </div>
 </template>

packages/ui/src/components/Tabs/STab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTabsPanelApi, type TabsPanelApi } from './api'
+import { useTabsPanelApi } from './api'
 
 const props = withDefaults(
   defineProps<{
@@ -11,22 +11,17 @@ const props = withDefaults(
   },
 )
 
-const state: TabsPanelApi = useTabsPanelApi()
-const { active } = toRefs(state)
-const { selectTab, background } = state
-const tabIsActive = computed(() => props.name === active.value)
+const api = useTabsPanelApi()
+const { active } = toRefs(api)
+const tabIsActive = eagerComputed(() => props.name === active.value)
 
-const activateTab = () => {
-  selectTab(props.name)
+const selectSelf = () => {
+  api.selectTab(props.name)
 }
 
-watch(
-  () => props.disabled,
-  (newVal) => {
-    if (newVal && tabIsActive.value) {
-      selectTab('')
-    }
-  },
+whenever(
+  () => props.disabled && tabIsActive.value,
+  () => api.selectTab(null),
 )
 </script>
 
@@ -35,8 +30,8 @@ watch(
     role="tab"
     class="s-tab flex justify-center items-center sora-tpg-p2"
     :disabled="disabled"
-    :class="[{ 's-tab_active': tabIsActive }, `s-tab_background_${background}`]"
-    @click="activateTab"
+    :class="[{ 's-tab_active': tabIsActive }, `s-tab_background_${api.background}`]"
+    @click="selectSelf"
   >
     <div class="s-tab__label-container flex justify-center items-center">
       <div class="s-tab__label">

packages/ui/src/components/Tabs/STabsPanel.vue

@@ -3,7 +3,7 @@ import { type TabsPanelApi, TABS_PANEL_API_KEY, type TabsPanelBackgroundType } f
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string
+    modelValue: string | null
     background?: TabsPanelBackgroundType
   }>(),
   {
@@ -14,19 +14,21 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const selectTab = (tab: string): void => {
-  emit('update:modelValue', tab)
+const model = useVModel(props, 'modelValue', emit, { passive: true })
+
+const selectTab = (tab: string | null): void => {
+  model.value = tab
 }
-const active = computed(() => props.modelValue)
 
-const tabState: TabsPanelApi = reactive({
-  active: active,
+const api: TabsPanelApi = reactive({
+  active: model,
   selectTab,
-  background: props.background,
+  background: toRef(props, 'background'),
 })
 
-provide(TABS_PANEL_API_KEY, tabState)
+provide(TABS_PANEL_API_KEY, api)
 </script>
+
 <template>
   <div
     role="tablist"

packages/ui/src/components/Tabs/api.ts

@@ -2,9 +2,9 @@ import { forceInject } from '@/util'
 import type { InjectionKey } from 'vue'
 
 export interface TabsPanelApi {
-  active: string
-  selectTab: (tab: string) => void
-  background: TabsPanelBackgroundType
+  readonly active: string | null
+  readonly selectTab: (tab: string | null) => void
+  readonly background: TabsPanelBackgroundType
 }
 
 export const TABS_PANEL_BACKGROUND_TYPES = ['primary', 'secondary', 'none'] as const