From 6fa5124f6b547a9233b3205e4660234e39a968c1 Mon Sep 17 00:00:00 2001 From: KannoStanfoot Date: Sun, 21 Apr 2024 14:56:36 +0900 Subject: [PATCH 1/9] chore: fix turbosnap setting --- .github/workflows/chromatic.yml | 39 +++++++------------ packages/ui/.storybook/main.js | 2 +- .../components/forms/TextAreaField.stories.ts | 3 +- 3 files changed, 15 insertions(+), 29 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index e66802fe..a951f109 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -1,12 +1,6 @@ name: Chromatic CI -on: - # push: - # branches: - # - main - pull_request: - branches: - - main +on: push jobs: chromatic: @@ -25,24 +19,17 @@ jobs: - id: diff run: echo "::set-output name=changed::$(git diff --name-only origin/${{ github.base_ref }} HEAD --relative ./packages/ui/ | wc -l)" - + - name: Install packages uses: ./.github/actions/install-packages - if: ${{ steps.diff.outputs.changed != '0' }} - - # - name: Chromatic - # uses: chromaui/action@latest - # if: ${{ steps.diff.outputs.changed != '0' }} - # with: - # projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - # workingDir: packages/ui - # exitZeroOnChanges: true - # onlyChanged: true - # env: - # LOG_LEVEL: 'debug' - - - name: Chromatic - if: ${{ steps.diff.outputs.changed != '0' }} - run: | - bun build-storybook - bunx chromatic -d ./packages/ui/storybook-static --storybook-base-dir ./packages/ui --project-token ${{ secrets.CHROMATIC_PROJECT_TOKEN }} --exit-zero-on-changes --only-changed + - name: Run Chromatic + uses: chromaui/action@v1 + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + workingDir: packages/ui + exitZeroOnChanges: true + onlyChanged: true + diagnostics: true + storybookBaseDir: ./packages/ui + env: + LOG_LEVEL: 'debug' diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js index 36f5a124..f5672881 100644 --- a/packages/ui/.storybook/main.js +++ b/packages/ui/.storybook/main.js @@ -25,7 +25,7 @@ module.exports = { return mergeConfig(config, { plugins: configType === 'PRODUCTION' - ? [turbosnap({ rootDir: config.root }), svgLoader({ defaultImport: 'component' })] + ? [turbosnap({ rootDir: process.cwd() }), svgLoader({ defaultImport: 'component' })] : [svgLoader({ defaultImport: 'component' })], resolve: { alias: { diff --git a/packages/ui/components/forms/TextAreaField.stories.ts b/packages/ui/components/forms/TextAreaField.stories.ts index 1fbcb290..85eea3fb 100644 --- a/packages/ui/components/forms/TextAreaField.stories.ts +++ b/packages/ui/components/forms/TextAreaField.stories.ts @@ -59,9 +59,8 @@ export const vModel: Story = { return { args,detail } }, template: `
-

親コンポーネント側のv-model値: {{ detail }}

+

v-model value: {{ detail }}

`, }) - } From c2af57fad7abf2fccfc5f71455b579c38846772f Mon Sep 17 00:00:00 2001 From: KannoStanfoot Date: Sun, 21 Apr 2024 15:40:39 +0900 Subject: [PATCH 2/9] WIP: debug Turbosnap --- .github/workflows/chromatic.yml | 12 +++--------- packages/ui/.storybook/main.js | 5 ++++- .../ui/components/forms/TextAreaField.stories.ts | 10 ++++++++++ 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index a951f109..bbe7a51b 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -14,22 +14,16 @@ jobs: - uses: actions/checkout@v4 with: fetch-depth: 0 - - - run: git fetch origin ${{ github.base_ref }} --depth=1 - - - id: diff - run: echo "::set-output name=changed::$(git diff --name-only origin/${{ github.base_ref }} HEAD --relative ./packages/ui/ | wc -l)" - - name: Install packages uses: ./.github/actions/install-packages - name: Run Chromatic uses: chromaui/action@v1 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - workingDir: packages/ui + workingDir: ./packages/ui + storybookBaseDir: ./packages/ui + untraced: \"./packages/!(ui)/**\" exitZeroOnChanges: true onlyChanged: true - diagnostics: true - storybookBaseDir: ./packages/ui env: LOG_LEVEL: 'debug' diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js index f5672881..05ca5dea 100644 --- a/packages/ui/.storybook/main.js +++ b/packages/ui/.storybook/main.js @@ -25,7 +25,10 @@ module.exports = { return mergeConfig(config, { plugins: configType === 'PRODUCTION' - ? [turbosnap({ rootDir: process.cwd() }), svgLoader({ defaultImport: 'component' })] + ? [ + turbosnap({ rootDir: config.root ?? process.cwd() }), + svgLoader({ defaultImport: 'component' }), + ] : [svgLoader({ defaultImport: 'component' })], resolve: { alias: { diff --git a/packages/ui/components/forms/TextAreaField.stories.ts b/packages/ui/components/forms/TextAreaField.stories.ts index 85eea3fb..bbe4aba3 100644 --- a/packages/ui/components/forms/TextAreaField.stories.ts +++ b/packages/ui/components/forms/TextAreaField.stories.ts @@ -64,3 +64,13 @@ export const vModel: Story = { `, }) } + +export const wipDebugTurbosnap: Story = { + name: 'with error message', + args: { + id: 'detail', + name: 'detail', + label: 'お問い合わせ内容/Content', + errorMessage: 'Turbosnap動作確認用', + }, +} From b5a8962550ecda79344577b33059c19b79ae0982 Mon Sep 17 00:00:00 2001 From: KannoStanfoot Date: Thu, 25 Apr 2024 14:35:24 +0900 Subject: [PATCH 3/9] WIP: change story [1] --- .github/workflows/chromatic.yml | 1 - .../components/forms/TextAreaField.stories.ts | 36 ++++++------------- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index bbe7a51b..f166ba3c 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -21,7 +21,6 @@ jobs: with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} workingDir: ./packages/ui - storybookBaseDir: ./packages/ui untraced: \"./packages/!(ui)/**\" exitZeroOnChanges: true onlyChanged: true diff --git a/packages/ui/components/forms/TextAreaField.stories.ts b/packages/ui/components/forms/TextAreaField.stories.ts index bbe4aba3..8e7f3797 100644 --- a/packages/ui/components/forms/TextAreaField.stories.ts +++ b/packages/ui/components/forms/TextAreaField.stories.ts @@ -15,6 +15,17 @@ const meta: Meta = { label: { control: 'text' }, errorMessage: { control: 'text' }, }, + render: (args) => ({ + components: { TextAreaField }, + setup() { + const detail = ref() + return { args,detail } + }, + template: `
+

v-model value: {{ detail }}

+ +
`, + }) } export default meta @@ -49,28 +60,3 @@ export const withErrorMessage: Story = { errorMessage: 'エラーメッセージを表示します', }, } - -export const vModel: Story = { - name: '[for dev] v-model', - render: (args) => ({ - components: { TextAreaField }, - setup() { - const detail = ref() - return { args,detail } - }, - template: `
-

v-model value: {{ detail }}

- -
`, - }) -} - -export const wipDebugTurbosnap: Story = { - name: 'with error message', - args: { - id: 'detail', - name: 'detail', - label: 'お問い合わせ内容/Content', - errorMessage: 'Turbosnap動作確認用', - }, -} From 46bdfa37bea051ac4148572c1355121807b31f94 Mon Sep 17 00:00:00 2001 From: KannoStanfoot Date: Thu, 25 Apr 2024 15:10:22 +0900 Subject: [PATCH 4/9] WIP: change story [2] --- packages/ui/components/icon/IconButton.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/components/icon/IconButton.stories.ts b/packages/ui/components/icon/IconButton.stories.ts index 4fce3cc6..26ad64a8 100644 --- a/packages/ui/components/icon/IconButton.stories.ts +++ b/packages/ui/components/icon/IconButton.stories.ts @@ -6,7 +6,7 @@ export default { component: IconButton, args: { href: 'https://twitter.com/vuefes', - color: 'vue-blue', + color: 'vue-green', name: 'x', }, argTypes: { From d4c9caddff3d12faeca7ba96e81b1f06b5542b11 Mon Sep 17 00:00:00 2001 From: KannoStanfoot Date: Thu, 25 Apr 2024 15:16:39 +0900 Subject: [PATCH 5/9] Revert "WIP: change story [2]" This reverts commit 46bdfa37bea051ac4148572c1355121807b31f94. --- packages/ui/components/icon/IconButton.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/components/icon/IconButton.stories.ts b/packages/ui/components/icon/IconButton.stories.ts index 26ad64a8..4fce3cc6 100644 --- a/packages/ui/components/icon/IconButton.stories.ts +++ b/packages/ui/components/icon/IconButton.stories.ts @@ -6,7 +6,7 @@ export default { component: IconButton, args: { href: 'https://twitter.com/vuefes', - color: 'vue-green', + color: 'vue-blue', name: 'x', }, argTypes: { From 7af016d5e879f7b39c2d235eee2c29a2ce23c08d Mon Sep 17 00:00:00 2001 From: KannoStanfoot Date: Fri, 26 Apr 2024 01:50:43 +0900 Subject: [PATCH 6/9] WIP: add sample story --- .../forms/TextAreaFieldCopy.stories.ts | 62 ++++++++++ .../ui/components/forms/TextAreaFieldCopy.vue | 106 ++++++++++++++++++ 2 files changed, 168 insertions(+) create mode 100644 packages/ui/components/forms/TextAreaFieldCopy.stories.ts create mode 100644 packages/ui/components/forms/TextAreaFieldCopy.vue diff --git a/packages/ui/components/forms/TextAreaFieldCopy.stories.ts b/packages/ui/components/forms/TextAreaFieldCopy.stories.ts new file mode 100644 index 00000000..3ef3dc35 --- /dev/null +++ b/packages/ui/components/forms/TextAreaFieldCopy.stories.ts @@ -0,0 +1,62 @@ +import { ref } from 'vue' +import { Meta, StoryObj } from '@storybook/vue3' +import TextAreaFieldCopy from './TextAreaFieldCopy.vue' + +const meta: Meta = { + title: 'Forms/TextAreaFieldCopy', + tags: ['autodocs'], + component: TextAreaFieldCopy, + argTypes: { + id: { control: 'text' }, + name: { control: 'text' }, + placeholder: { control: 'text' }, + required: { control: { expanded: true } }, + rows: { control: { type: 'range', min: 5, max: 30, step: 1 } }, + label: { control: 'text' }, + errorMessage: { control: 'text' }, + }, + render: (args) => ({ + components: { TextAreaFieldCopy }, + setup() { + const detail = ref() + return { args,detail } + }, + template: `
+

v-model value: {{ detail }}

+ +
`, + }) +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + name: 'default', + args: { + id: 'detail', + name: 'detail', + label: 'お問い合わせ内容/Content', + }, +} + +export const withPlaceholder: Story = { + name: 'with placeholder', + args: { + id: 'detail', + name: 'detail', + label: 'お問い合わせ内容/Content', + placeholder: 'placeholderを設定できます', + }, +} + +export const withErrorMessage: Story = { + name: 'with error message', + args: { + id: 'detail', + name: 'detail', + label: 'お問い合わせ内容/Content', + errorMessage: 'エラーメッセージを表示します', + }, +} diff --git a/packages/ui/components/forms/TextAreaFieldCopy.vue b/packages/ui/components/forms/TextAreaFieldCopy.vue new file mode 100644 index 00000000..99269720 --- /dev/null +++ b/packages/ui/components/forms/TextAreaFieldCopy.vue @@ -0,0 +1,106 @@ + +