@reni-corp/reni-2c-ui 0.3.27 → 0.3.29

package/src/stories/PasswordField.stories.ts

@@ -0,0 +1,304 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import PasswordField, {
+  type PasswordFieldProps,
+} from '@/components/elements/PasswordField.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import { ref } from 'vue'
+
+const meta: Meta<typeof PasswordField> = {
+  title: 'Elements/PasswordField',
+  component: PasswordField,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'ラベルテキスト',
+    },
+    disabled: {
+      control: 'boolean',
+      description: '無効状態',
+    },
+    showStrengthIndicator: {
+      control: 'boolean',
+      description: 'パスワード強度インジケーターの表示',
+    },
+    requireStrongPassword: {
+      control: 'boolean',
+      description: '強いパスワードを必須にする',
+    },
+    customErrorMessage: {
+      control: 'text',
+      description: 'カスタムエラーメッセージ',
+    },
+  },
+  args: {
+    label: 'パスワード',
+    disabled: false,
+    showStrengthIndicator: false,
+    requireStrongPassword: false,
+    customErrorMessage: '',
+  },
+}
+
+export default meta
+type StoryArgs = PasswordFieldProps & { modelValue?: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    label: 'パスワード',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-password-field': PasswordField },
+    setup() {
+      const password = ref('')
+
+      const handleInput = (value: string) => {
+        console.log('パスワード入力:', value)
+      }
+
+      return { args, password, handleInput }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-password-field
+          v-model="password"
+          :label="args.label"
+          :disabled="args.disabled"
+          :show-strength-indicator="args.showStrengthIndicator"
+          :require-strong-password="args.requireStrongPassword"
+          :custom-error-message="args.customErrorMessage"
+          @update:modelValue="handleInput"
+        />
+        <div style="margin-top: 16px;">
+          <p>入力値: {{ password }}</p>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 強度インジケーター: OverridesStory = {
+  args: {
+    label: 'パスワード（強度表示あり）',
+    showStrengthIndicator: true,
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    showStrengthIndicator: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-password-field': PasswordField, 'rn-stack': Stack },
+    setup() {
+      const password = ref('')
+
+      return { args, password }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p>パスワードを入力すると強度が表示されます：</p>
+            <ul>
+              <li>8文字以上</li>
+              <li>英字と数字を含む</li>
+              <li>特殊文字を含む</li>
+              <li>大文字と小文字を含む</li>
+            </ul>
+          </div>
+          <rn-password-field
+            v-model="password"
+            :label="args.label"
+            :show-strength-indicator="args.showStrengthIndicator"
+          />
+          <div>
+            <p><strong>現在の入力:</strong> {{ password || '（未入力）' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 強いパスワード必須: OverridesStory = {
+  args: {
+    label: 'パスワード（強い強度必須）',
+    showStrengthIndicator: true,
+    requireStrongPassword: true,
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    showStrengthIndicator: { control: { disable: true } },
+    requireStrongPassword: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-password-field': PasswordField, 'rn-stack': Stack },
+    setup() {
+      const password = ref('')
+
+      return { args, password }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p><strong>強いパスワードが必須です。</strong></p>
+            <p>以下の条件をすべて満たす必要があります：</p>
+            <ul>
+              <li>8文字以上</li>
+              <li>英字と数字を含む</li>
+              <li>特殊文字を含む</li>
+              <li>大文字と小文字を含む</li>
+            </ul>
+            <p>例: <code>MyP@ssw0rd123</code></p>
+          </div>
+          <rn-password-field
+            v-model="password"
+            :label="args.label"
+            :show-strength-indicator="args.showStrengthIndicator"
+            :require-strong-password="args.requireStrongPassword"
+          />
+          <div>
+            <p><strong>現在の入力:</strong> {{ password || '（未入力）' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const カスタムエラーメッセージ: OverridesStory = {
+  args: {
+    label: 'パスワード',
+    showStrengthIndicator: true,
+    requireStrongPassword: true,
+    customErrorMessage:
+      'セキュリティのため、より強力なパスワードを設定してください。',
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    showStrengthIndicator: { control: { disable: true } },
+    requireStrongPassword: { control: { disable: true } },
+    customErrorMessage: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-password-field': PasswordField, 'rn-stack': Stack },
+    setup() {
+      const password = ref('')
+
+      return { args, password }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p>カスタムエラーメッセージの例：</p>
+            <p>弱いパスワードを入力するとカスタムメッセージが表示されます。</p>
+          </div>
+          <rn-password-field
+            v-model="password"
+            :label="args.label"
+            :show-strength-indicator="args.showStrengthIndicator"
+            :require-strong-password="args.requireStrongPassword"
+            :custom-error-message="args.customErrorMessage"
+          />
+          <div>
+            <p><strong>現在の入力:</strong> {{ password || '（未入力）' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 無効状態: OverridesStory = {
+  args: {
+    label: 'パスワード（無効）',
+    disabled: true,
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    disabled: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-password-field': PasswordField, 'rn-stack': Stack },
+    setup() {
+      const password = ref('sample123')
+
+      return { args, password }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p>このパスワードフィールドは無効状態です。入力や表示切り替えができません。</p>
+          </div>
+          <rn-password-field
+            v-model="password"
+            :label="args.label"
+            :disabled="args.disabled"
+          />
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 比較例: OverridesStory = {
+  args: {},
+  argTypes: {
+    label: { control: { disable: true } },
+    disabled: { control: { disable: true } },
+    showStrengthIndicator: { control: { disable: true } },
+    requireStrongPassword: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-password-field': PasswordField, 'rn-stack': Stack },
+    setup() {
+      const basicPassword = ref('')
+      const strengthPassword = ref('')
+      const requiredPassword = ref('')
+
+      return { args, basicPassword, strengthPassword, requiredPassword }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="lg">
+          <div>
+            <h3>パスワードフィールドの比較</h3>
+          </div>
+          
+          <rn-stack direction="vertical" gap="xs">
+            <h4>基本タイプ</h4>
+            <rn-password-field
+              v-model="basicPassword"
+              label="基本パスワード"
+            />
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="xs">
+            <h4>強度インジケーター付き</h4>
+            <rn-password-field
+              v-model="strengthPassword"
+              label="強度表示パスワード"
+              :show-strength-indicator="true"
+            />
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="xs">
+            <h4>強いパスワード必須</h4>
+            <rn-password-field
+              v-model="requiredPassword"
+              label="強力パスワード必須"
+              :show-strength-indicator="true"
+              :require-strong-password="true"
+            />
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/ProductLabels.stories.ts

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ProductLabels, {
+  type ProductLabelsProps,
+} from '@/components/features/ProductLabels.vue'
+
+const meta: Meta<typeof ProductLabels> = {
+  title: 'Features/ProductLabels',
+  component: ProductLabels,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'プロダクトラベル用コンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    labelUrls: [
+      {
+        control: 'text',
+      },
+    ],
+    soldLabelUrl: {
+      control: 'text',
+    },
+  },
+  args: {
+    labelUrls: [
+      'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+      'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+    ],
+    soldLabelUrl:
+      'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+  },
+  render: (args) => ({
+    components: { 'rn-product-labels': ProductLabels },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 100px'>
+          <rn-product-labels
+            :labelUrls=args.labelUrls
+            :soldLabelUrl=args.soldLabelUrl
+          />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = ProductLabelsProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}