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

package/dist/types.d.ts

@@ -13,6 +13,13 @@ export type Aspect = keyof typeof AspectOptions;
 export type LimitedSize = keyof typeof LimitedSizeOptions;
 export type BorderWidth = keyof typeof BorderWidthOptions;
 export type SNS = keyof typeof SNSOptions;
+export type MenuItem = {
+    title: string;
+    url?: string;
+    action?: () => void;
+    children?: MenuItem[];
+    expandable?: boolean;
+};
 export type HTMLInputAttribute = {
     autocomplete?: string;
     autofocus?: boolean;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,EACX,MAAM,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,YAAY,CAAA;AAC7C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAA;AACzD,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,WAAW,CAAA;AAC3C,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,eAAe,CAAA;AACnD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,iBAAiB,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AACrD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,aAAa,CAAA;AAC/C,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,YAAY,CAAA;AAC7C,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,WAAW,CAAA;AAC3C,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,aAAa,CAAA;AAC/C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAA;AACzD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAA;AACzD,MAAM,MAAM,GAAG,GAAG,MAAM,OAAO,UAAU,CAAA;AACzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,EACX,MAAM,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,YAAY,CAAA;AAC7C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAA;AACzD,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,WAAW,CAAA;AAC3C,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,eAAe,CAAA;AACnD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,iBAAiB,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AACrD,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,aAAa,CAAA;AAC/C,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,YAAY,CAAA;AAC7C,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,WAAW,CAAA;AAC3C,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,aAAa,CAAA;AAC/C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAA;AACzD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAA;AACzD,MAAM,MAAM,GAAG,GAAG,MAAM,OAAO,UAAU,CAAA;AAEzC,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reni-corp/reni-2c-ui",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "type": "module",
   "repository": {
     "type": "git",
@@ -32,6 +32,7 @@
   },
   "files": [
     "dist",
+    "src/**/*.stories.ts",
     ".yarn/patches/floating-vue-npm-2.0.0-b4308359d7.patch"
   ],
   "scripts": {
@@ -70,25 +71,29 @@
     "floating-vue": "patch:floating-vue@npm%3A2.0.0#./.yarn/patches/floating-vue-npm-2.0.0-b4308359d7.patch",
     "swiper": "^11.1.15",
     "vee-validate": "^4.11.3",
-    "vue": "^3.4.31"
+    "vue": "^3.5.25"
   },
   "peerDependencies": {
-    "dompurify": "^3.0.0",
     "happy-dom": ">=20"
   },
-  "packageManager": "yarn@4.10.0",
+  "peerDependenciesMeta": {
+    "happy-dom": {
+      "optional": true
+    }
+  },
+  "packageManager": "yarn@4.12.0",
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.36.0",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-interactions": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/blocks": "^7.3.2",
-    "@storybook/manager-api": "^7.3.2",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/blocks": "^7.6.20",
+    "@storybook/manager-api": "^7.6.20",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.3.2",
-    "@storybook/vue3": "^7.3.2",
-    "@storybook/vue3-vite": "^7.3.2",
+    "@storybook/theming": "^7.6.20",
+    "@storybook/vue3": "^7.6.20",
+    "@storybook/vue3-vite": "^7.6.20",
     "@types/dompurify": "^3.0.5",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
@@ -110,7 +115,7 @@
     "react-dom": "^18.2.0",
     "rollup-plugin-visualizer": "^5.11.0",
     "sass": "^1.66.1",
-    "storybook": "^7.3.2",
+    "storybook": "^7.6.21",
     "storybook-addon-vue-slots": "^0.9.21",
     "stylelint": "^16.9.0",
     "stylelint-config-prettier-scss": "^1.0.0",

package/src/stories/Alert.stories.ts

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Alert, { type AlertProps } from '@/components/elements/Alert.vue'
+import Button from '@/components/elements/Button.vue'
+import {
+  StatusColorOptions,
+  LimitedSizeOptions,
+  ResizeOptions,
+} from '@/constants'
+import { StatusColor, LimitedSize, Resize } from '@/types'
+import { ref } from 'vue'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Elements/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: Object.keys(StatusColorOptions) as StatusColor[],
+    },
+    title: {
+      control: 'text',
+    },
+    message: {
+      control: 'text',
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(LimitedSizeOptions) as LimitedSize[],
+    },
+    width: {
+      control: 'select',
+      options: Object.keys(ResizeOptions) as Resize[],
+    },
+    hasHtml: {
+      control: {
+        control: 'boolean',
+      },
+    },
+  },
+  args: {
+    color: 'default',
+    message: 'Alert',
+    size: 'md',
+    width: 'hug',
+    hasHtml: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: AlertProps) => ({
+    components: { 'rn-alert': Alert, 'rn-button': Button },
+    setup() {
+      const isVisible = ref(true)
+      const handleClose = () => {
+        isVisible.value = false
+      }
+      const handleShow = () => {
+        isVisible.value = true
+      }
+      return { args, isVisible, handleClose, handleShow }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-alert
+          v-if="isVisible"
+          :color=args.color
+          :title=args.title
+          :message=args.message
+          :size=args.size
+          :width=args.width
+          :hasHtml=args.hasHtml
+          @close="handleClose"
+        >
+        </rn-alert>
+        <rn-button v-if="!isVisible" @click="handleShow" variant="outlined" color="primary">
+          再表示
+        </rn-button>
+      </div>
+    `,
+  }),
+}
+
+export const 応用: Story = {
+  args: {
+    color: 'info',
+    hasHtml: true,
+    message: '<p>HTMLも記載可能です</p><p>pタグ</p>',
+  },
+  render: (args: AlertProps) => ({
+    components: { 'rn-alert': Alert, 'rn-button': Button },
+    setup() {
+      const isVisible = ref(true)
+      const handleClose = () => {
+        isVisible.value = false
+      }
+      const handleShow = () => {
+        isVisible.value = true
+      }
+      return { args, isVisible, handleClose, handleShow }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-alert
+          v-if="isVisible"
+          :color=args.color
+          :title=args.title
+          :message=args.message
+          :size=args.size
+          :width=args.width
+          :hasHtml=args.hasHtml
+          @close="handleClose"
+        >
+        </rn-alert>
+        <rn-button v-if="!isVisible" @click="handleShow" variant="outlined" color="primary">
+          再表示
+        </rn-button>
+      </div>
+    `,
+  }),
+}
+
+export const タイトル付き: Story = {
+  args: {
+    color: 'danger',
+    title: 'エラーが発生しました',
+    message:
+      'ネットワークの問題によりエラーが発生しました。時間を空けてリトライしてください。',
+    size: 'md',
+    width: 'fill',
+  },
+  render: (args: AlertProps) => ({
+    components: { 'rn-alert': Alert, 'rn-button': Button },
+    setup() {
+      const isVisible = ref(true)
+      const handleClose = () => {
+        isVisible.value = false
+      }
+      const handleShow = () => {
+        isVisible.value = true
+      }
+      return { args, isVisible, handleClose, handleShow }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-alert
+          v-if="isVisible"
+          :color=args.color
+          :title=args.title
+          :message=args.message
+          :size=args.size
+          :width=args.width
+          @close="handleClose"
+        >
+        </rn-alert>
+        <rn-button v-if="!isVisible" @click="handleShow" variant="outlined" color="primary">
+          再表示
+        </rn-button>
+      </div>
+    `,
+  }),
+}
+
+export const アクション付き: Story = {
+  args: {
+    color: 'danger',
+    title: 'エラーが発生しました',
+    message:
+      'ネットワークの問題によりエラーが発生しました。時間を空けてリトライしてください。',
+    size: 'md',
+    width: 'fill',
+  },
+  render: (args: AlertProps) => ({
+    components: { 'rn-alert': Alert, 'rn-button': Button },
+    setup() {
+      const isVisible = ref(true)
+      const handleClose = () => {
+        isVisible.value = false
+      }
+      const handleShow = () => {
+        isVisible.value = true
+      }
+      return { args, isVisible, handleClose, handleShow }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-alert
+          v-if="isVisible"
+          :color=args.color
+          :title=args.title
+          :message=args.message
+          :size=args.size
+          :width=args.width
+          @close="handleClose"
+        >
+          <template #action>
+            <rn-button variant="text" color="light" size="sm">リトライ</rn-button>
+          </template>
+        </rn-alert>
+        <rn-button v-if="!isVisible" @click="handleShow" variant="outlined" color="primary">
+          再表示
+        </rn-button>
+      </div>
+    `,
+  }),
+}
+
+export const 複数アクション: Story = {
+  args: {
+    color: 'warning',
+    title: '確認が必要です',
+    message: 'この操作を続行しますか？',
+    size: 'md',
+    width: 'fill',
+  },
+  render: (args: AlertProps) => ({
+    components: { 'rn-alert': Alert, 'rn-button': Button },
+    setup() {
+      const isVisible = ref(true)
+      const handleClose = () => {
+        isVisible.value = false
+      }
+      const handleShow = () => {
+        isVisible.value = true
+      }
+      return { args, isVisible, handleClose, handleShow }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-alert
+          v-if="isVisible"
+          :color=args.color
+          :title=args.title
+          :message=args.message
+          :size=args.size
+          :width=args.width
+          @close="handleClose"
+        >
+          <template #action>
+            <rn-button variant="text" color="light" size="sm">キャンセル</rn-button>
+            <rn-button variant="text" color="light" size="sm">続行</rn-button>
+          </template>
+        </rn-alert>
+        <rn-button v-if="!isVisible" @click="handleShow" variant="outlined" color="primary">
+          再表示
+        </rn-button>
+      </div>
+    `,
+  }),
+}

package/src/stories/AnnounceBar.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AnnounceBar, {
+  type AnnounceBarProps,
+} from '@/components/features/AnnounceBar.vue'
+import { StatusColorOptions } from '@/constants'
+import { StatusColor } from '@/types'
+
+const meta: Meta<typeof AnnounceBar> = {
+  title: 'Elements/AnnounceBar',
+  component: AnnounceBar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'アナウンス用コンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    subtitle: {
+      control: 'text',
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(StatusColorOptions) as StatusColor[],
+    },
+    colorStyle: {
+      control: 'select',
+      options: ['default', 'tonal', 'gradient'],
+    },
+    persistentHiddenKey: {
+      control: 'text',
+    },
+    closable: {
+      control: 'boolean',
+    },
+    url: {
+      control: 'text',
+    },
+    isTargetBlank: {
+      control: 'boolean',
+    },
+    dense: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    title: 'title',
+    subtitle: 'subTitle',
+    color: 'default',
+    colorStyle: 'default',
+    persistentHiddenKey: '',
+    closable: false,
+    url: '',
+    isTargetBlank: false,
+    dense: false,
+  },
+  render: (args) => ({
+    components: { 'rn-announce-bar': AnnounceBar },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-announce-bar
+          :title=args.title
+          :subtitle=args.subtitle
+          :color=args.color
+          :colorStyle=args.colorStyle
+          :persistentHiddenKey=args.persistentHiddenKey
+          :closable=args.closable
+          :url=args.url
+          :isTargetBlank=args.isTargetBlank
+          :dense=args.dense
+        >
+        </rn-announce-bar>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = AnnounceBarProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText: 'AnnounceBar',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}
+
+export const 応用1: OverridesStory = {
+  args: {
+    slotText: 'AnnounceBar',
+    url: 'https://www.reni.co.jp/',
+    isTargetBlank: true,
+    dense: true,
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'URLをとisTargetBlankを併用することで別タブで開くリンクを追加することができる。',
+      },
+    },
+  },
+}
+
+export const 応用2: OverridesStory = {
+  args: {
+    slotText: 'AnnounceBar',
+    persistentHiddenKey: '1',
+    closable: true,
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'closableとpersistentHiddenKeyを併用することで、一度しか表示されないアナウンスが可能になる。（localStorageに値を保持している）',
+      },
+    },
+  },
+}