From 4d83e467e12780edb74993c14857db2e0a8ae3bc Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 12:59:44 +0700 Subject: [PATCH 01/39] [refactor] stories: rewrite `Alert` --- packages/ui/stories/Alert.stories.ts | 30 ------------ .../ui/stories/components/Alert.stories.ts | 47 +++++++++++++++++++ 2 files changed, 47 insertions(+), 30 deletions(-) delete mode 100644 packages/ui/stories/Alert.stories.ts create mode 100644 packages/ui/stories/components/Alert.stories.ts diff --git a/packages/ui/stories/Alert.stories.ts b/packages/ui/stories/Alert.stories.ts deleted file mode 100644 index 66aaba0c7..000000000 --- a/packages/ui/stories/Alert.stories.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Status, SAlert } from '@/lib' -import type { Meta, StoryFn } from '@storybook/vue3' - -const meta = { - title: 'Example/Alert', -} satisfies Meta - -export default meta - -export const DifferentStatuses: StoryFn = () => ({ - components: { SAlert }, - setup() { - return { - statuses: Object.values(Status), - } - }, - template: ` -
- - - -
- `, -}) diff --git a/packages/ui/stories/components/Alert.stories.ts b/packages/ui/stories/components/Alert.stories.ts new file mode 100644 index 000000000..2ad841198 --- /dev/null +++ b/packages/ui/stories/components/Alert.stories.ts @@ -0,0 +1,47 @@ +import { Status, SAlert } from '@/lib' +import type { Meta, StoryObj } from '@storybook/vue3' + +const StoryComponent = defineComponent({ + components: { SAlert }, + props: ['status', 'title', 'description'], + template: ` + + + + + `, +}) + +const meta = { + component: StoryComponent, + args: { + status: Status.Info, + title: 'Soramitsu', + }, + argTypes: { + status: { + options: Object.values(Status), + control: 'select', + }, + title: { + control: 'text', + }, + description: { + control: 'text', + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Info = {} +export const WithDescription = { args: { description: `It's not a cake` } } satisfies Story +export const Success = { args: { status: Status.Success } } satisfies Story +export const Warning = { args: { status: Status.Warning } } satisfies Story +export const Error = { args: { status: Status.Error } } satisfies Story From 634c473248499e431b7604f6d42689db32196e8d Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 12:59:56 +0700 Subject: [PATCH 02/39] [chore]: update configs --- packages/ui/.storybook/main.js | 9 +++++++-- packages/ui/tsconfig.json | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js index b123c6ede..fcbfbd408 100644 --- a/packages/ui/.storybook/main.js +++ b/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', diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index 138acfb19..e4ec7deeb 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -17,5 +17,5 @@ } }, "include": ["."], - "exclude": ["dist", "ts-build", "cypress", "test", "storybook-static", "stories"] + "exclude": ["dist", "ts-build", "cypress", "test", "storybook-static"] } From d4d2677bc20cfdb1e4f69eda6be8e2af203585e0 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 13:00:22 +0700 Subject: [PATCH 03/39] [refactor] stories: rewrite `Badge` --- packages/ui/stories/Badge.stories.ts | 165 ------------------ .../ui/stories/components/Badge.stories.ts | 34 ++++ 2 files changed, 34 insertions(+), 165 deletions(-) delete mode 100644 packages/ui/stories/Badge.stories.ts create mode 100644 packages/ui/stories/components/Badge.stories.ts diff --git a/packages/ui/stories/Badge.stories.ts b/packages/ui/stories/Badge.stories.ts deleted file mode 100644 index 4e6e1fbb8..000000000 --- a/packages/ui/stories/Badge.stories.ts +++ /dev/null @@ -1,165 +0,0 @@ -import { Meta } from '@storybook/vue3' -import { SBadge, BadgeType, BadgeTypes } from '@/lib' -import { defineStory } from './util' - -const meta: Meta = { - title: 'Example/Badge', -} - -export default meta - -interface Args { - type?: BadgeType - colorBackground?: boolean - withBorder?: boolean - onlyMarker?: boolean -} - -const configurableStory = (args: Args) => ({ - components: { SBadge }, - template: ` {{args.slotTitle}} - `, - setup() { - return { args } - }, -}) - -export const configurable = configurableStory.bind({}) -configurable.args = { - type: 'active', - withBorder: false, - colorBackground: false, - onlyMarker: false, - slotTitle: 'badge', -} - -configurable.argTypes = { - type: { - options: BadgeTypes, - control: { type: 'select' }, - }, -} - -export const DifferentStatuses = defineStory(() => ({ - components: { SBadge }, - template: ` -
- active - - error - - warning - - info - - debug - - pending - -
- `, -})) - -export const onlyMarker = defineStory(() => ({ - components: { SBadge }, - template: ` -
- active - - error - - warning - - info - - debug - - pending - -
- `, -})) - -export const withColorBackground = defineStory(() => ({ - components: { SBadge }, - template: ` -
- active - - error - - warning - - info - - debug - - pending - -
- `, -})) - -export const withBorder = defineStory(() => ({ - components: { SBadge }, - template: ` -
- active - - error - - warning - - info - - debug - - pending - -
- `, -})) diff --git a/packages/ui/stories/components/Badge.stories.ts b/packages/ui/stories/components/Badge.stories.ts new file mode 100644 index 000000000..44d1fe32c --- /dev/null +++ b/packages/ui/stories/components/Badge.stories.ts @@ -0,0 +1,34 @@ +import { SBadge, type BadgeType, BadgeTypes } from '@/lib' +import type { Meta } from '@storybook/vue3' + +const meta = { + component: defineComponent({ + components: { SBadge }, + props: ['title'], + template: ` + + {{ title || $attrs.type }} + + `, + }), + args: { + type: 'info' satisfies BadgeType, + title: '', + colorBackground: false, + withBorder: false, + onlyMarker: false, + }, + argTypes: { + type: { + control: 'select', + options: BadgeTypes, + }, + colorBackground: { control: 'boolean' }, + withBorder: { control: 'boolean' }, + onlyMarker: { control: 'boolean' }, + }, +} satisfies Meta + +export default meta + +export const Default = {} From 513d40631b24dac36f310d5b980cc0f0a3aeb6f0 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 13:09:10 +0700 Subject: [PATCH 04/39] [refactor] stories: rewrite `Checkbox` --- packages/ui/stories/Checkbox.stories.ts | 95 ------------------- .../ui/stories/components/Checkbox.stories.ts | 37 ++++++++ 2 files changed, 37 insertions(+), 95 deletions(-) delete mode 100644 packages/ui/stories/Checkbox.stories.ts create mode 100644 packages/ui/stories/components/Checkbox.stories.ts diff --git a/packages/ui/stories/Checkbox.stories.ts b/packages/ui/stories/Checkbox.stories.ts deleted file mode 100644 index 05eb46f9c..000000000 --- a/packages/ui/stories/Checkbox.stories.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { SCheckboxAtom, SCheckboxSolo, CHECKBOX_SIZE_VALUES, CHECKBOX_TYPE_VALUES } from '@/lib' -import { defineMeta, defineStory } from './util' - -export default defineMeta({ - title: 'Example/Checkbox', -}) - -export const AtomConfigurable = defineStory((args) => ({ - components: { SCheckboxAtom }, - setup: () => ({ args }), - template: ` - - `, -})) - -AtomConfigurable.argTypes = { - size: { - options: CHECKBOX_SIZE_VALUES, - control: 'inline-radio', - }, - checked: { - options: [false, true, 'mixed'], - control: 'inline-radio', - }, - hover: { - control: 'boolean', - }, - disabled: { - control: 'boolean', - }, -} - -AtomConfigurable.args = { - size: 'md', - checked: false, - disabled: false, - hover: false, -} - -export const SoloTwoCheckboxes = defineStory((args) => ({ - components: { SCheckboxSolo }, - setup: () => ({ args }), - template: ` -
- - Tiramisu - - - - Soramatsu - -
- `, -})) - -export const SoloBordered = defineStory((args) => ({ - components: { SCheckboxSolo }, - setup: () => ({ args }), - template: ` - - Miramitsu - - `, -})) - -export const SoloDescription = defineStory((args) => ({ - components: { SCheckboxSolo }, - setup: () => ({ args }), - - template: ` - - Miramistin - - - - `, -})) - -SoloTwoCheckboxes.argTypes = - SoloBordered.argTypes = - SoloDescription.argTypes = - { - disabled: { - control: 'boolean', - }, - } - -SoloTwoCheckboxes.args = - SoloBordered.args = - SoloDescription.args = - { - disabled: false, - } diff --git a/packages/ui/stories/components/Checkbox.stories.ts b/packages/ui/stories/components/Checkbox.stories.ts new file mode 100644 index 000000000..c0f8bc554 --- /dev/null +++ b/packages/ui/stories/components/Checkbox.stories.ts @@ -0,0 +1,37 @@ +import { SCheckboxSolo, CHECKBOX_SIZE_VALUES, CHECKBOX_TYPE_VALUES } from '@/lib' +import type { Meta } from '@storybook/vue3' + +export default { + component: defineComponent({ + components: { SCheckboxSolo }, + props: ['title', 'description'], + template: ` + + + + + `, + }), + args: { + modelValue: false, + type: CHECKBOX_TYPE_VALUES[0], + size: CHECKBOX_SIZE_VALUES[0], + disabled: false, + title: 'Sora', + }, + argTypes: { + type: { + control: 'select', + options: CHECKBOX_TYPE_VALUES, + }, + size: { + control: 'select', + options: CHECKBOX_SIZE_VALUES, + }, + description: { + control: 'text', + }, + }, +} satisfies Meta + +export const Default = {} From 53db760f980933950afbc23a4ea3a5fad5a5d1ee Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 13:09:37 +0700 Subject: [PATCH 05/39] [refactor] stories: remove `JsonInput` story --- .../ui/stories/SJsonInput.stories__exclude.ts | 43 ------------------- 1 file changed, 43 deletions(-) delete mode 100755 packages/ui/stories/SJsonInput.stories__exclude.ts diff --git a/packages/ui/stories/SJsonInput.stories__exclude.ts b/packages/ui/stories/SJsonInput.stories__exclude.ts deleted file mode 100755 index 465c3d7bd..000000000 --- a/packages/ui/stories/SJsonInput.stories__exclude.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Meta } from '@storybook/vue3' -import { Component } from 'vue' -import { SJsonInput } from '@/lib' - -const meta: Meta = { - title: 'Example/JSON Input', - component: SJsonInput, - argTypes: { - modelValue: { - description: 'Description from story', - type: { name: 'string', required: false }, - control: { - type: 'text', - }, - }, - size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }, - onClick: {}, - }, -} - -export default meta - -export const Primary = (): Component => ({ - components: { SJsonInput }, - setup() { - return { - value: { - object: { - string: 'I am a string!', - array: [1, 2, 3], - null: null, - boolean: true, - }, - anotherArray: [1, 2, 3.5], - boolean: false, - null: null, - number: 21, - }, - } - }, - // template: 'wtf', - template: ``, -}) From 551eabad4b0d67ed70f4b3791e5fd3dc8d44b5cb Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 13:15:05 +0700 Subject: [PATCH 06/39] [refactor] stories: rewrite `Button` --- packages/ui/stories/SButton.stories.ts | 70 ------------------- .../ui/stories/components/Button.stories.ts | 59 ++++++++++++++++ 2 files changed, 59 insertions(+), 70 deletions(-) delete mode 100644 packages/ui/stories/SButton.stories.ts create mode 100644 packages/ui/stories/components/Button.stories.ts diff --git a/packages/ui/stories/SButton.stories.ts b/packages/ui/stories/SButton.stories.ts deleted file mode 100644 index be26f7ac0..000000000 --- a/packages/ui/stories/SButton.stories.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { defineMeta, defineStory } from './util' -import { SButton, BUTTON_TYPE_VALUES, BUTTON_SIZE_VALUES, BUTTON_ICON_POSITION_VALUES } from '@/lib' -import { IconClose } from '@/components/icons' - -export default defineMeta({ - title: 'Example/Button', -}) - -export const Configurable = defineStory((args) => ({ - components: { - SButton, - IconClose, - }, - setup() { - return { - args, - } - }, - template: ` -
- - - {{ args.type }} - - - - {{ args.type }} - -
- `, -})) -Configurable.argTypes = { - type: { - options: BUTTON_TYPE_VALUES, - control: 'inline-radio', - }, - size: { - options: BUTTON_SIZE_VALUES, - control: 'inline-radio', - }, - icon: { control: 'text' }, - iconPosition: { - options: BUTTON_ICON_POSITION_VALUES, - control: 'inline-radio', - }, - disabled: { control: 'boolean' }, - rounded: { control: 'boolean' }, - loading: { control: 'boolean' }, - uppercase: { control: 'boolean' }, -} -Configurable.args = { - type: 'primary', - size: 'md', - icon: '', - iconPosition: 'left', - disabled: false, - rounded: false, - loading: false, - uppercase: false, -} diff --git a/packages/ui/stories/components/Button.stories.ts b/packages/ui/stories/components/Button.stories.ts new file mode 100644 index 000000000..513c21d9b --- /dev/null +++ b/packages/ui/stories/components/Button.stories.ts @@ -0,0 +1,59 @@ +import { SButton, BUTTON_TYPE_VALUES, BUTTON_SIZE_VALUES, BUTTON_ICON_POSITION_VALUES } from '@/lib' +import { IconClose } from '@/components/icons' +import type { Meta } from '@storybook/vue3' + +export default { + component: defineComponent({ + components: { SButton, IconClose }, + template: ` +
+ + + {{ $attrs.type }} + + + + {{ $attrs.type }} + +
+ `, + }), + args: { + type: 'primary', + size: 'md', + icon: '', + iconPosition: 'left', + disabled: false, + rounded: false, + loading: false, + uppercase: false, + }, + argTypes: { + type: { + control: 'inline-radio', + options: BUTTON_TYPE_VALUES, + }, + size: { + control: 'inline-radio', + options: BUTTON_SIZE_VALUES, + }, + icon: { control: 'text' }, + iconPosition: { + control: 'inline-radio', + options: BUTTON_ICON_POSITION_VALUES, + }, + disabled: { control: 'boolean' }, + rounded: { control: 'boolean' }, + loading: { control: 'boolean' }, + uppercase: { control: 'boolean' }, + }, +} satisfies Meta + +export const Default = {} From 1cc2ae81b2100d22af76d382d25ca4ae20fd9756 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 13:16:11 +0700 Subject: [PATCH 07/39] [refactor] stories: use `inline-radio` everywhere --- packages/ui/stories/components/Alert.stories.ts | 2 +- packages/ui/stories/components/Badge.stories.ts | 2 +- packages/ui/stories/components/Checkbox.stories.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/stories/components/Alert.stories.ts b/packages/ui/stories/components/Alert.stories.ts index 2ad841198..0268e10dc 100644 --- a/packages/ui/stories/components/Alert.stories.ts +++ b/packages/ui/stories/components/Alert.stories.ts @@ -24,8 +24,8 @@ const meta = { }, argTypes: { status: { + control: 'inline-radio', options: Object.values(Status), - control: 'select', }, title: { control: 'text', diff --git a/packages/ui/stories/components/Badge.stories.ts b/packages/ui/stories/components/Badge.stories.ts index 44d1fe32c..4159ecf9c 100644 --- a/packages/ui/stories/components/Badge.stories.ts +++ b/packages/ui/stories/components/Badge.stories.ts @@ -20,7 +20,7 @@ const meta = { }, argTypes: { type: { - control: 'select', + control: 'inline-radio', options: BadgeTypes, }, colorBackground: { control: 'boolean' }, diff --git a/packages/ui/stories/components/Checkbox.stories.ts b/packages/ui/stories/components/Checkbox.stories.ts index c0f8bc554..4c006fea4 100644 --- a/packages/ui/stories/components/Checkbox.stories.ts +++ b/packages/ui/stories/components/Checkbox.stories.ts @@ -21,11 +21,11 @@ export default { }, argTypes: { type: { - control: 'select', + control: 'inline-radio', options: CHECKBOX_TYPE_VALUES, }, size: { - control: 'select', + control: 'inline-radio', options: CHECKBOX_SIZE_VALUES, }, description: { From 31297d7c2601df30305a56c32003de2714e954a7 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 14 Mar 2023 13:53:08 +0700 Subject: [PATCH 08/39] [refactor] stories: rewrite `TextField` --- packages/ui/stories/STextField.stories.ts | 104 ------------------ .../stories/components/TextField.stories.ts | 68 ++++++++++++ 2 files changed, 68 insertions(+), 104 deletions(-) delete mode 100644 packages/ui/stories/STextField.stories.ts create mode 100644 packages/ui/stories/components/TextField.stories.ts diff --git a/packages/ui/stories/STextField.stories.ts b/packages/ui/stories/STextField.stories.ts deleted file mode 100644 index 67c14235c..000000000 --- a/packages/ui/stories/STextField.stories.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { defineMeta, defineStory } from './util' -import { STextField, Status } from '@/lib' -import IconQuestion from '@soramitsu-ui/icons/icomoon/notifications-question-circle-24.svg' -import IconCopy from '@soramitsu-ui/icons/icomoon/basic-copy-24.svg' - -export default defineMeta({ - title: 'Example/STextField', - decorators: [ - () => ({ - template: ` -
- -
- `, - }), - ], -}) - -export const JustAField = defineStory(() => ({ - components: { STextField }, - template: ` - - `, -})) - -export const DifferentStatuses = defineStory(() => ({ - components: { STextField }, - setup() { - return { - model: ref('Lorem ipsum'), - STATUSES: [null, Status.Error, Status.Warning, Status.Success], - showMessage: ref(false), - } - }, - template: ` - Show message -
-
- - - - -
-
- `, -})) - -export const Disabled = defineStory(() => ({ - setup() { - return () => h(STextField, { label: 'Untouchable', disabled: true, modelValue: 'He-he' }) - }, -})) - -export const Password = defineStory(() => ({ - setup() { - return () => h(STextField, { label: 'Top secret', password: true }) - }, -})) - -export const WithAppendix = defineStory(() => ({ - components: { - STextField, - IconCopy, - IconQuestion, - }, - template: ` - - - - `, -})) - -export const WithCounter = defineStory(() => ({ - components: { - STextField, - }, - setup() { - return { - model: ref('Regulus'), - } - }, - template: ` -
- - -
- `, -})) diff --git a/packages/ui/stories/components/TextField.stories.ts b/packages/ui/stories/components/TextField.stories.ts new file mode 100644 index 000000000..b8786d60f --- /dev/null +++ b/packages/ui/stories/components/TextField.stories.ts @@ -0,0 +1,68 @@ +import { STextField, Status } from '@/lib' +import IconQuestion from '@soramitsu-ui/icons/icomoon/notifications-question-circle-24.svg' +import IconCopy from '@soramitsu-ui/icons/icomoon/basic-copy-24.svg' +import type { Meta, StoryObj } from '@storybook/vue3' + +const meta = { + component: defineComponent({ + components: { STextField, IconCopy, IconQuestion }, + props: ['modelValue', 'oneIcon', 'twoIcons'], + emits: ['update:modelValue'], + setup(props, { emit }) { + const model = useVModel(props, 'modelValue', emit, { passive: true }) + return { model } + }, + template: ` + + + + `, + }), + decorators: [ + () => ({ + template: ` +
+ +
+ `, + }), + ], + args: { + label: 'Your name', + modelValue: '', + password: false, + noEye: false, + disabled: false, + counter: false, + status: undefined, + success: false, + error: false, + message: '', + filledState: false, + }, + argTypes: { + counter: { + type: { + name: 'union', + value: ['boolean', 'number'], + }, + }, + status: { + control: 'inline-radio', + options: [undefined, Status.Success, Status.Error, Status.Warning], + // type: 'inline-radio' + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default = {} + +export const OneIcon = { args: { oneIcon: true } } satisfies Story +export const TwoIcons = { args: { twoIcons: true } } satisfies Story From 5c63d10c96817ddeb8de65f1ac08bde4c9ffc329 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Mon, 20 Mar 2023 10:21:29 +0600 Subject: [PATCH 09/39] [refactor] stories: rewrite `Pagination` --- packages/ui/stories/SPagination.stories.ts | 21 ------------------- .../stories/components/Pagination.stories.ts | 13 ++++++++++++ 2 files changed, 13 insertions(+), 21 deletions(-) delete mode 100644 packages/ui/stories/SPagination.stories.ts create mode 100644 packages/ui/stories/components/Pagination.stories.ts diff --git a/packages/ui/stories/SPagination.stories.ts b/packages/ui/stories/SPagination.stories.ts deleted file mode 100644 index 8df255e2d..000000000 --- a/packages/ui/stories/SPagination.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { defineMeta, defineStory } from './util' -import { SPagination } from '@/lib' - -export default defineMeta({ - title: 'Example/Pagination', -}) - -export const Configurable = defineStory((args: Record) => ({ - components: { - SPagination, - }, - setup() { - return { - args, - } - }, - template: ``, -})) diff --git a/packages/ui/stories/components/Pagination.stories.ts b/packages/ui/stories/components/Pagination.stories.ts new file mode 100644 index 000000000..5431d8400 --- /dev/null +++ b/packages/ui/stories/components/Pagination.stories.ts @@ -0,0 +1,13 @@ +import { SPagination } from '@/lib' +import type { Meta } from '@storybook/vue3' + +export default { + component: SPagination, + args: { + total: 143, + pageSize: 30, + pageSizes: [10, 30, 50], + }, +} satisfies Meta + +export const Default = {} From c07984a1536ee15faf85da973b6a9108af582595 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Mon, 20 Mar 2023 10:22:02 +0600 Subject: [PATCH 10/39] [chore]: fix root-level SB dev script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d3265f9c0..7aab4c31a 100755 --- a/package.json +++ b/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", From 21c76a6d118005f8f26e76beadaa4d83b4d01aa6 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Mon, 20 Mar 2023 10:29:09 +0600 Subject: [PATCH 11/39] [refactor] stories: rewrite `ProgressBar` --- packages/ui/stories/ProgressBar.stories.ts | 59 ------------------- .../stories/components/ProgressBar.stories.ts | 15 +++++ 2 files changed, 15 insertions(+), 59 deletions(-) delete mode 100644 packages/ui/stories/ProgressBar.stories.ts create mode 100644 packages/ui/stories/components/ProgressBar.stories.ts diff --git a/packages/ui/stories/ProgressBar.stories.ts b/packages/ui/stories/ProgressBar.stories.ts deleted file mode 100644 index 02f293098..000000000 --- a/packages/ui/stories/ProgressBar.stories.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Meta } from '@storybook/vue3' -import { SProgressBar } from '@/lib' - -const meta: Meta = { - title: 'Example/ProgressBar', -} - -export default meta - -interface Args { - percent?: number - lineHeight?: string - barColor?: string - activeBarColor?: string -} - -const configurableStory = (args: Args) => ({ - components: { SProgressBar }, - template: `
-
`, - setup() { - const { percent, lineHeight } = args - return { percent, lineHeight } - }, -}) - -export const configurable = configurableStory.bind({}) -configurable.args = { - percent: 50, - lineHeight: 2, -} - -const demoStory = (args: Args) => ({ - components: { SProgressBar }, - template: `
-
`, - setup() { - const { lineHeight } = args - let loadingStatus = ref(0) - const interval = setInterval(async () => { - loadingStatus.value++ - if (loadingStatus.value === 100) { - await new Promise((r) => { - setTimeout(r, 1000) - }) - loadingStatus.value = 0 - } - }, 10) - return { loadingStatus, lineHeight } - }, -}) - -export const demo = demoStory.bind({}) - -demo.args = { - lineHeight: 2, -} diff --git a/packages/ui/stories/components/ProgressBar.stories.ts b/packages/ui/stories/components/ProgressBar.stories.ts new file mode 100644 index 000000000..ff41c2586 --- /dev/null +++ b/packages/ui/stories/components/ProgressBar.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import { SProgressBar } from '@/lib' + +const meta = { + component: SProgressBar, + argTypes: { + percent: { control: { type: 'range', min: 0, max: 100, step: 1 } }, + }, +} satisfies Meta + +export default meta + +export const Default = { + args: { percent: 42 }, +} satisfies StoryObj From e116234e4676031c82d9b1e2f096ba009b255042 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Mon, 20 Mar 2023 10:33:43 +0600 Subject: [PATCH 12/39] [refactor] stories: adopt `Table` --- packages/ui/stories/STable.stories.ts | 112 ----------------- .../ui/stories/components/Table.stories.ts | 113 ++++++++++++++++++ 2 files changed, 113 insertions(+), 112 deletions(-) delete mode 100644 packages/ui/stories/STable.stories.ts create mode 100644 packages/ui/stories/components/Table.stories.ts diff --git a/packages/ui/stories/STable.stories.ts b/packages/ui/stories/STable.stories.ts deleted file mode 100644 index d90893d27..000000000 --- a/packages/ui/stories/STable.stories.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { defineMeta, defineStory } from './util' -import { STable, STableColumn } from '@/lib' - -export default defineMeta({ - title: 'Example/Table', -}) - -export const Configurable = defineStory((args: Record) => ({ - components: { - STable, - STableColumn, - }, - setup() { - const data = [ - { prop1: '21', prop2: 'a12', date: 1424631694418, prop4: 'c12' }, - { prop1: '12', prop2: 'a421', date: 1224382694418, prop4: 'c21' }, - { prop1: '31', prop2: 'a2', date: 1524682614418, prop4: 'c2' }, - { prop1: '13', prop2: 'a32', date: 1654642633318, prop4: 'c32' }, - ] - - return { - args, - currentData: ref(data), - data: ref(data), - altData: ref([ - { prop1: '21', prop2: 'b12', date: 1424331994418, prop4: 'g12' }, - { prop1: 'q12', prop2: 'b421', date: 1223389694418, prop4: 'g21' }, - { prop1: 'q31', prop2: 'b2', date: 1524632694418, prop4: 'g2' }, - { prop1: 'q13', prop2: 'b32', date: 1654342933318, prop4: 'g32' }, - ]), - formatter: (row: any, column: any, x: number) => new Date(x).toLocaleDateString(), - selectable: (row: any, index: number) => !!(index % 2), - sortOrders: ['descending', 'ascending', null], - expandRowKeys: ref(['q21']), - showHeader: ref(true), - } - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - `, -})) diff --git a/packages/ui/stories/components/Table.stories.ts b/packages/ui/stories/components/Table.stories.ts new file mode 100644 index 000000000..3f1006bf2 --- /dev/null +++ b/packages/ui/stories/components/Table.stories.ts @@ -0,0 +1,113 @@ +import { STable, STableColumn } from '@/lib' +import type { Meta } from '@storybook/vue3' + +const meta = { + component: defineComponent({ + components: { + STable, + STableColumn, + }, + setup() { + const data = [ + { prop1: '21', prop2: 'a12', date: 1424631694418, prop4: 'c12' }, + { prop1: '12', prop2: 'a421', date: 1224382694418, prop4: 'c21' }, + { prop1: '31', prop2: 'a2', date: 1524682614418, prop4: 'c2' }, + { prop1: '13', prop2: 'a32', date: 1654642633318, prop4: 'c32' }, + ] + + return { + currentData: ref(data), + data: ref(data), + altData: ref([ + { prop1: '21', prop2: 'b12', date: 1424331994418, prop4: 'g12' }, + { prop1: 'q12', prop2: 'b421', date: 1223389694418, prop4: 'g21' }, + { prop1: 'q31', prop2: 'b2', date: 1524632694418, prop4: 'g2' }, + { prop1: 'q13', prop2: 'b32', date: 1654342933318, prop4: 'g32' }, + ]), + formatter: (_row: any, _column: any, x: number) => new Date(x).toLocaleDateString(), + selectable: (_row: any, index: number) => !!(index % 2), + sortOrders: ['descending', 'ascending', null], + expandRowKeys: ref(['q21']), + showHeader: ref(true), + } + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + + `, + }), +} satisfies Meta + +export default meta + +export const Comprehensive = {} From 09ca9969fa7b1519ade0106be2d41ee6689fdea2 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Mon, 20 Mar 2023 11:01:16 +0600 Subject: [PATCH 13/39] [refactor]: rewrite `Tabs` stories; fix components --- .changeset/curvy-moose-hide.md | 5 + .changeset/good-eels-jump.md | 5 + .changeset/warm-zebras-breathe.md | 5 + packages/ui/src/components/Tabs/STab.vue | 27 +++--- .../ui/src/components/Tabs/STabsPanel.vue | 18 ++-- packages/ui/src/components/Tabs/api.ts | 6 +- packages/ui/stories/Tabs.stories.ts | 94 ------------------- .../ui/stories/components/Table.stories.ts | 1 + .../ui/stories/components/Tabs.stories.ts | 51 ++++++++++ 9 files changed, 91 insertions(+), 121 deletions(-) create mode 100644 .changeset/curvy-moose-hide.md create mode 100644 .changeset/good-eels-jump.md create mode 100644 .changeset/warm-zebras-breathe.md delete mode 100644 packages/ui/stories/Tabs.stories.ts create mode 100644 packages/ui/stories/components/Tabs.stories.ts diff --git a/.changeset/curvy-moose-hide.md b/.changeset/curvy-moose-hide.md new file mode 100644 index 000000000..04eb45375 --- /dev/null +++ b/.changeset/curvy-moose-hide.md @@ -0,0 +1,5 @@ +--- +'@soramitsu-ui/ui': patch +--- + +**fix**(`STabsPanel`): fix `background` reactivity in the provided `TabsPanelApi` diff --git a/.changeset/good-eels-jump.md b/.changeset/good-eels-jump.md new file mode 100644 index 000000000..30a0b71e7 --- /dev/null +++ b/.changeset/good-eels-jump.md @@ -0,0 +1,5 @@ +--- +'@soramitsu-ui/ui': patch +--- + +**fix**(`STab`): don't destructure reactive `TabsPanelApi` diff --git a/.changeset/warm-zebras-breathe.md b/.changeset/warm-zebras-breathe.md new file mode 100644 index 000000000..0146fc7fd --- /dev/null +++ b/.changeset/warm-zebras-breathe.md @@ -0,0 +1,5 @@ +--- +'@soramitsu-ui/ui': minor +--- + +**refactor!**(`STabsPanel`): use passive `model-value`; allow it to be `null` diff --git a/packages/ui/src/components/Tabs/STab.vue b/packages/ui/src/components/Tabs/STab.vue index d4b8d3852..d9817ad1f 100644 --- a/packages/ui/src/components/Tabs/STab.vue +++ b/packages/ui/src/components/Tabs/STab.vue @@ -1,5 +1,5 @@ @@ -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" >
diff --git a/packages/ui/src/components/Tabs/STabsPanel.vue b/packages/ui/src/components/Tabs/STabsPanel.vue index 84dd59ffa..a6a2bcb9e 100644 --- a/packages/ui/src/components/Tabs/STabsPanel.vue +++ b/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) + From 3f5e8c6ab8cc411650bd98a9eff3d9bf65688fa1 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 21 Mar 2023 15:32:20 +0600 Subject: [PATCH 26/39] [refactor] stories: rewrite `Accordion` --- .../components/Accordion/SAccordionItem.vue | 1 + packages/ui/stories/SAccordion.stories.ts | 87 ------------------- .../components/accordion/Accordion.stories.ts | 33 +++++++ .../accordion/AccordionItem.stories.ts | 24 +++++ 4 files changed, 58 insertions(+), 87 deletions(-) delete mode 100644 packages/ui/stories/SAccordion.stories.ts create mode 100644 packages/ui/stories/components/accordion/Accordion.stories.ts create mode 100644 packages/ui/stories/components/accordion/AccordionItem.stories.ts diff --git a/packages/ui/src/components/Accordion/SAccordionItem.vue b/packages/ui/src/components/Accordion/SAccordionItem.vue index 0deef4292..7b2cb34ec 100644 --- a/packages/ui/src/components/Accordion/SAccordionItem.vue +++ b/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, diff --git a/packages/ui/stories/SAccordion.stories.ts b/packages/ui/stories/SAccordion.stories.ts deleted file mode 100644 index 718e0097c..000000000 --- a/packages/ui/stories/SAccordion.stories.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { defineMeta, defineStory } from './util' -import { SAccordionItem, SAccordion } from '@/lib' -import { Ref } from 'vue' - -export default defineMeta({ - title: 'Example/Accordion', -}) - -export const AccordionItem = defineStory((args: Record) => ({ - components: { - SAccordionItem, - }, - setup() { - return { - args, - model: ref(false), - } - }, - template: ` - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi - ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. - - `, -})) -AccordionItem.argTypes = { - title: { control: 'text' }, - subtitle: { control: 'text' }, -} -AccordionItem.args = { - title: 'Accordion item', - subtitle: 'Accordion item description', -} - -export const Accordion = defineStory((args: Record) => ({ - components: { - SAccordionItem, - SAccordion, - }, - setup() { - const selectedStr = ref('item2 item1') - let modelValue: Ref = ref([]) - - watch( - selectedStr, - () => { - modelValue.value = selectedStr.value.split(' ') - }, - { immediate: true }, - ) - - return { - args, - selectedStr, - modelValue, - } - }, - template: ` - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi - ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi - ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. - - - `, -})) -Accordion.argTypes = { - multiple: { control: 'boolean' }, -} -Accordion.args = { - multiple: true, -} diff --git a/packages/ui/stories/components/accordion/Accordion.stories.ts b/packages/ui/stories/components/accordion/Accordion.stories.ts new file mode 100644 index 000000000..bfee3fe74 --- /dev/null +++ b/packages/ui/stories/components/accordion/Accordion.stories.ts @@ -0,0 +1,33 @@ +import { SAccordionItem, SAccordion } from '@/lib' +import type { Meta } from '@storybook/vue3' + +export default { + component: defineComponent({ + components: { SAccordion, SAccordionItem }, + template: ` + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi + ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi + ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + `, + }), + args: { + multiple: false, + }, +} satisfies Meta + +export const Default = {} diff --git a/packages/ui/stories/components/accordion/AccordionItem.stories.ts b/packages/ui/stories/components/accordion/AccordionItem.stories.ts new file mode 100644 index 000000000..3d232817f --- /dev/null +++ b/packages/ui/stories/components/accordion/AccordionItem.stories.ts @@ -0,0 +1,24 @@ +import { SAccordionItem } from '@/lib' +import type { Meta } from '@storybook/vue3' + +export default { + component: defineComponent({ + components: { + SAccordionItem, + }, + template: ` + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi + ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + `, + }), + args: { + title: 'Accordion item', + subtitle: 'Accordion item description', + }, +} satisfies Meta + +export const Default = {} From fe30447a10f05d66e4e25aa4a9d81511b072faf1 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Tue, 21 Mar 2023 15:43:32 +0600 Subject: [PATCH 27/39] [refactor] stories: rewrite `Modal` --- packages/ui/stories/SModal.stories.ts | 36 ----------- .../ui/stories/components/Modal.stories.ts | 60 +++++++++++++++++++ 2 files changed, 60 insertions(+), 36 deletions(-) delete mode 100644 packages/ui/stories/SModal.stories.ts create mode 100644 packages/ui/stories/components/Modal.stories.ts diff --git a/packages/ui/stories/SModal.stories.ts b/packages/ui/stories/SModal.stories.ts deleted file mode 100644 index 2481dbebc..000000000 --- a/packages/ui/stories/SModal.stories.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { SModalCard, SModal } from '@/lib' -import { defineMeta, defineStory } from './util' - -export default defineMeta({ - title: 'Example/SModal', -}) - -export const JustAModal = defineStory(() => ({ - components: { SModal, SModalCard }, - setup() { - return { - show: ref(false), - } - }, - template: ` - - - - - - -

- Pay attention to focus trap! (button is focused!) -

- - - - - `, -})) diff --git a/packages/ui/stories/components/Modal.stories.ts b/packages/ui/stories/components/Modal.stories.ts new file mode 100644 index 000000000..4abfd7faf --- /dev/null +++ b/packages/ui/stories/components/Modal.stories.ts @@ -0,0 +1,60 @@ +import { SModalCard, SModal, SButton } from '@/lib' +import type { Meta } from '@storybook/vue3' + +export default { + component: defineComponent({ + components: { + SModal, + SModalCard, + SButton, + Counter: defineComponent({ + setup() { + return { count: useInterval(300) } + }, + template: `{{ count }}`, + }), + }, + setup() { + return { + show: ref(false), + } + }, + template: ` + + Show modal + + + + + + +
+ + +

+ Pay attention to focus trap! (button is focused!) +

+ +

+ Counter (eagerness check): +

+ + + Close + +
+ + + `, + }), + args: { + closeOnOverlayClick: true, + closeOnEsc: true, + focusTrap: true, + eager: false, + }, +} satisfies Meta + +export const Default = {} From 26399642972d40e7ea63c57dda83334466fd1666 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Mon, 27 Mar 2023 12:03:19 +0600 Subject: [PATCH 28/39] [refactor]: enable `vue/require-default-prop` --- .changeset/quiet-badgers-beg.md | 5 ++++ .changeset/quiet-ghosts-hug.md | 2 +- .changeset/spicy-rivers-run.md | 5 ++++ .changeset/tricky-seas-knock.md | 5 ++++ .eslintrc.js | 19 +++++------- packages/ui/src/components/Alert/SAlert.vue | 2 ++ packages/ui/src/components/Modal/SModal.vue | 6 ++++ .../ui/src/components/Modal/SModalCard.vue | 1 + .../Notifications/SNotificationBody.vue | 2 ++ .../Notifications/SUseNotification.ts | 4 +-- packages/ui/src/components/Switch/SSwitch.vue | 26 ++++++++++------ .../src/components/TextField/STextField.vue | 30 ++++++++++++------- .../ui/src/composables/element-id-fallback.ts | 13 ++++++++ 13 files changed, 87 insertions(+), 33 deletions(-) create mode 100644 .changeset/quiet-badgers-beg.md create mode 100644 .changeset/spicy-rivers-run.md create mode 100644 .changeset/tricky-seas-knock.md create mode 100644 packages/ui/src/composables/element-id-fallback.ts diff --git a/.changeset/quiet-badgers-beg.md b/.changeset/quiet-badgers-beg.md new file mode 100644 index 000000000..bc58d3dca --- /dev/null +++ b/.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 diff --git a/.changeset/quiet-ghosts-hug.md b/.changeset/quiet-ghosts-hug.md index 61d478c88..97131dbe4 100644 --- a/.changeset/quiet-ghosts-hug.md +++ b/.changeset/quiet-ghosts-hug.md @@ -2,4 +2,4 @@ '@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 +**feature**(`SSwitch`): add `label-hidden` optional bool prop in order to _visually_ hide the `label` (`false` by default); update doc comments diff --git a/.changeset/spicy-rivers-run.md b/.changeset/spicy-rivers-run.md new file mode 100644 index 000000000..7f0969c46 --- /dev/null +++ b/.changeset/spicy-rivers-run.md @@ -0,0 +1,5 @@ +--- +'@soramitsu-ui/ui': minor +--- + +**feature**(`STextField`, `SSwitch`): use auto-generated `id` if not provided diff --git a/.changeset/tricky-seas-knock.md b/.changeset/tricky-seas-knock.md new file mode 100644 index 000000000..e0537726e --- /dev/null +++ b/.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` diff --git a/.eslintrc.js b/.eslintrc.js index 96f30949d..0b5a675b2 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -24,9 +24,6 @@ module.exports = { '@typescript-eslint/consistent-type-definitions': 'off', - // FIXME - 'vue/require-default-prop': 'off', - // FIXME 'vuejs-accessibility/no-static-element-interactions': 'off', }, @@ -43,24 +40,24 @@ 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' }, }, diff --git a/packages/ui/src/components/Alert/SAlert.vue b/packages/ui/src/components/Alert/SAlert.vue index 789d9549f..120e9a052 100644 --- a/packages/ui/src/components/Alert/SAlert.vue +++ b/packages/ui/src/components/Alert/SAlert.vue @@ -13,6 +13,8 @@ type Props = { const props = withDefaults(defineProps(), { status: Status.Info, showCloseBtn: false, + title: undefined, + description: undefined, }) const emit = defineEmits<(event: 'click:close') => void>() diff --git a/packages/ui/src/components/Modal/SModal.vue b/packages/ui/src/components/Modal/SModal.vue index bd41f0ee6..fcfd49078 100644 --- a/packages/ui/src/components/Modal/SModal.vue +++ b/packages/ui/src/components/Modal/SModal.vue @@ -111,6 +111,12 @@ const props = withDefaults(defineProps(), { // here is a Vue typing error - primitive value factory is a valid default value uniqueElementId as unknown as string, describedBy: null, + rootClass: undefined, + modalClass: undefined, + overlayClass: undefined, + rootStyle: undefined, + modalStyle: undefined, + overlayStyle: undefined, }) const emit = defineEmits(['update:show', 'click:overlay', 'before-open', 'after-open', 'before-close', 'after-close']) diff --git a/packages/ui/src/components/Modal/SModalCard.vue b/packages/ui/src/components/Modal/SModalCard.vue index 407939541..4805bcdb5 100644 --- a/packages/ui/src/components/Modal/SModalCard.vue +++ b/packages/ui/src/components/Modal/SModalCard.vue @@ -19,6 +19,7 @@ withDefaults( }>(), { close: true, + title: undefined, }, ) diff --git a/packages/ui/src/components/Notifications/SNotificationBody.vue b/packages/ui/src/components/Notifications/SNotificationBody.vue index 3aca544f9..20bfd0833 100644 --- a/packages/ui/src/components/Notifications/SNotificationBody.vue +++ b/packages/ui/src/components/Notifications/SNotificationBody.vue @@ -14,6 +14,8 @@ const props = withDefaults( { status: Status.Info, timeout: 0, + title: undefined, + description: undefined, }, ) diff --git a/packages/ui/src/components/Notifications/SUseNotification.ts b/packages/ui/src/components/Notifications/SUseNotification.ts index cf744a9d6..eae9a09e3 100644 --- a/packages/ui/src/components/Notifications/SUseNotification.ts +++ b/packages/ui/src/components/Notifications/SUseNotification.ts @@ -10,7 +10,7 @@ export default /* @__PURE__ */ defineComponent({ name: 'SUseNotification', props: { show: Boolean, - title: String, + title: { type: String, default: undefined }, status: { type: String as PropType, default: Status.Info, @@ -20,7 +20,7 @@ export default /* @__PURE__ */ defineComponent({ default: 5000, }, showCloseBtn: Boolean, - description: String, + description: { type: String, default: undefined }, }, emits: [ // FIXME avoid `v-model` for `show`, because it always emits `false` from the component diff --git a/packages/ui/src/components/Switch/SSwitch.vue b/packages/ui/src/components/Switch/SSwitch.vue index 48461f5f3..61d00eb22 100644 --- a/packages/ui/src/components/Switch/SSwitch.vue +++ b/packages/ui/src/components/Switch/SSwitch.vue @@ -1,5 +1,6 @@ diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue index 9281a8cd5..689d5a8e2 100644 --- a/packages/ui/src/components/TextField/STextField.vue +++ b/packages/ui/src/components/TextField/STextField.vue @@ -9,6 +9,7 @@ import type { StyleValue } from 'vue' import { Status } from '@/types' import { STATUS_ICONS_MAP_16, IconEye, IconEyeOff } from '../icons' import type { MaybeElementRef } from '@vueuse/core' +import { useElementIdFallback } from '@/composables/element-id-fallback' /** * warning: don't use it inside of `Props`. Vue compiler determines it @@ -42,7 +43,7 @@ type Props = { label?: string /** - * Recommended for a11y + * Can be passed to override default auto-generated id */ id?: string @@ -119,6 +120,11 @@ const props = withDefaults(defineProps(), { noEye: false, noModelValueStrictSync: false, filledState: false, + message: undefined, + status: undefined, + id: undefined, + modelValue: '', + label: undefined, }) const emit = defineEmits<{ @@ -130,7 +136,7 @@ const slots = useSlots() // *** -const status = computed(() => { +const status = computedEager(() => { if (props.status) return props.status if (props.success) return Status.Success if (props.warning) return Status.Warning @@ -148,13 +154,13 @@ function onInput(e: Event) { } } -const isValueEmpty = computed(() => !model.value) +const isValueEmpty = computedEager(() => !model.value) const isFocused = ref(false) -const labelTypographyClass = computed(() => +const labelTypographyClass = computedEager(() => !(props.filledState || isFocused.value) && isValueEmpty.value ? 'sora-tpg-p3' : 'sora-tpg-p4', ) -const inputRef = ref(null) +const inputRef = shallowRef(null) function handleInputWrapperClick(event: MouseEvent) { if (event.target !== document.activeElement) { @@ -206,7 +212,7 @@ const counterConfig = computed(() => { return null }) -const counterText = computed(() => { +const counterText = computedEager(() => { const config = counterConfig.value if (!config) return null const { limit } = config @@ -226,16 +232,20 @@ const inputAttrs = () => { // APPEND -const showEye = computed(() => props.password && !props.noEye) +const showEye = computedEager(() => props.password && !props.noEye) const isAppendSlotDefined = () => !!slots.append const shouldRenderAppend = () => !!counterText.value || isAppendSlotDefined() || showEye.value // EYE const [forceRevealPassword, toggleForceReveal] = useToggle() -const inputType = computed(() => +const inputType = computedEager(() => props.password && (!showEye.value || !forceRevealPassword.value) ? 'password' : 'text', ) + +// A11Y + +const finalId = useElementIdFallback(toRef(props, 'id'))