Merge pull request #28 from vuejs-jp/enhance/refactor-icon-button

refactor: IconButton

packages/composable/index.ts

@@ -1 +1,2 @@
 export * from './lib/useArray'
+export * from './lib/useColor'

packages/composable/lib/useColor.ts

@@ -0,0 +1,13 @@
+import { match } from 'ts-pattern'
+import type { Color } from '@vuejs-jp/model'
+
+export function useColor() {
+  const color = (text: Color) =>
+    match<Color>(text)
+      .with('white', () => '#ffffff')
+      .with('vue-blue', () => '#35495e')
+      .with('vue-green', () => '#42b883')
+      .exhaustive()
+
+  return { color }
+}

packages/composable/package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@vuejs-jp/eslint-config": "workspace:*",
     "@vuejs-jp/typescript-config": "workspace:*",
+    "ts-pattern": "5.0.8",
     "typescript": "5.3.3"
   },
   "type": "module"

packages/ui/components/Icon.stories.ts

@@ -0,0 +1,41 @@
+import { StoryFn } from '@storybook/vue3'
+import Icon from './Icon.vue'
+
+export default {
+  title: 'Icon/Icon',
+  component: Icon,
+  args: {
+    color: 'vue-blue',
+    name: 'x',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+    name: {
+      description: 'The name property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Icon },
+  setup() {
+    return { args }
+  },
+  template: `<div style="display: flex; gap: 8px;">
+    <Icon v-bind="args" />
+    <Icon v-bind="args" name="note" />
+    <Icon v-bind="args" name="YouTube" />
+    <Icon v-bind="args" name="GitHub" />
+  </div>`,
+})
+
+export const Default = Template.bind({})

packages/ui/components/Icon.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import { match } from 'ts-pattern'
+import type { Color, IconName } from '@vuejs-jp/model'
+import { useColor } from '@vuejs-jp/composable'
+
+export type IconProps = {
+  color: Color
+  name: IconName
+}
+
+const props = defineProps<IconProps>()
+
+const svgComponent =
+  match<IconName>(props.name)
+    .with('x', () => defineAsyncComponent(
+      () => import('../assets/icon/x_logo.svg?component'),
+    ))
+    .with('note', () => defineAsyncComponent(
+      () => import('../assets/icon/note_logo.svg?component'),
+    ))
+    .with('YouTube', () => defineAsyncComponent(
+      () => import('../assets/icon/youtube_logo.svg?component'),
+    ))
+    .with('GitHub', () => defineAsyncComponent(
+      () => import('../assets/icon/github_logo.svg?component'),
+    ))
+    .exhaustive()
+
+const { color: fillColor } = useColor()
+</script>
+
+<template>
+  <component
+    :is="svgComponent"
+    :fill="fillColor(props.color)"
+  />
+</template>
+
+<style scoped>
+svg:hover {
+  fill: #42b883;
+  transition: .2s;
+}
+</style>

packages/ui/components/IconButton.vue

@@ -1,38 +1,12 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-import { match } from 'ts-pattern'
-import type { Color, IconName } from '@vuejs-jp/model'
+import Icon from './Icon.vue'
+import type { IconProps } from './Icon.vue'
 
-type IconButtonProps = {
+type IconButtonProps = IconProps & {
   href: string
-  color: Color
-  name: IconName
 }
 
 const props = defineProps<IconButtonProps>()
-
-const svgComponent =
-  match<IconName>(props.name)
-    .with('x', () => defineAsyncComponent(
-      () => import('../assets/icon/x_logo.svg?component'),
-    ))
-    .with('note', () => defineAsyncComponent(
-      () => import('../assets/icon/note_logo.svg?component'),
-    ))
-    .with('YouTube', () => defineAsyncComponent(
-      () => import('../assets/icon/youtube_logo.svg?component'),
-    ))
-    .with('GitHub', () => defineAsyncComponent(
-      () => import('../assets/icon/github_logo.svg?component'),
-    ))
-    .exhaustive()
-
-const color =
-  match<Color>(props.color)
-    .with('white', () => '#ffffff')
-    .with('vue-blue', () => '#35495e')
-    .with('vue-green', () => '#42b883')
-    .exhaustive()
 </script>
 
 <template>
@@ -41,16 +15,12 @@ const color =
     :aria-label="props.name"
     class="icon-wrapper"
   >
-    <component
-      :is="svgComponent"
-      :fill="color"
-    />
+    <Icon v-bind="props" />
   </a>
 </template>
 
 <style scoped>
-.icon-wrapper svg:hover {
-  fill: #42b883;
-  transition: .2s;
+.icon-wrapper {
+  cursor: pointer;
 }
 </style>

packages/ui/components/Typography.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { match } from 'ts-pattern'
 import type { Color, Typography } from '@vuejs-jp/model'
+import { useColor } from '@vuejs-jp/composable'
 
 type TypographyProps = {
   color: Color
@@ -37,16 +38,11 @@ const fontSize =
     .with('body/300', () => '1rem')
     .exhaustive()
 
-const color =
-  match<Color>(props.color)
-    .with('white', () => '#ffffff')
-    .with('vue-blue', () => '#35495e')
-    .with('vue-green', () => '#42b883')
-    .exhaustive()
+const { color: textColor } = useColor()
 </script>
 
 <template>
-  <component :is="typographyComponent" :style="{ fontWeight, fontSize, color }">
+  <component :is="typographyComponent" :style="{ fontWeight, fontSize, color: textColor(props.color) }">
     <slot />
   </component>
 </template>

packages/ui/package.json

@@ -24,6 +24,7 @@
     "@storybook/vue3": "8.0.0-beta.2",
     "@storybook/vue3-vite": "8.0.0-beta.2",
     "@vitejs/plugin-vue": "5.0.3",
+    "@vuejs-jp/composable": "workspace:*",
     "@vuejs-jp/eslint-config": "workspace:*",
     "@vuejs-jp/markuplint-config": "workspace:*",
     "@vuejs-jp/model": "workspace:*",

yarn.lock

@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: 90E0A5FE60EF5946-d5d064a1f8fe807c-513B83E39A6D0671-634b3e677a0d54cf
+# bun ./bun.lockb --hash: EF3E1C4E76CBCE55-fb4bbc6206e5e5f8-4BF2F194CE3D3813-fe47679483f50452
 
 
 "@aashutoshrathi/word-wrap@^1.2.3":
@@ -4103,15 +4103,16 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.18.tgz"
   integrity sha512-CxouGFxxaW5r1WbrSmWwck3No58rApXgRSBxrqgnY1K+jk20F6DrXJkHdH9n4HVT+/B6G2CAn213Uq3npWiy8Q==
 
-"@vuejs-jp/composable@@vuejs-jp/composable":
+"@vuejs-jp/composable@packages/composable":
   version "workspace:packages/composable"
   resolved "workspace:packages/composable"
   devDependencies:
     "@vuejs-jp/eslint-config" "packages/eslint-config"
     "@vuejs-jp/typescript-config" "packages/typescript-config"
+    ts-pattern "5.0.8"
     typescript "5.3.3"
 
-"@vuejs-jp/eslint-config@@vuejs-jp/eslint-config", "@vuejs-jp/eslint-config@packages/eslint-config":
+"@vuejs-jp/eslint-config@packages/eslint-config":
   version "workspace:packages/eslint-config"
   resolved "workspace:packages/eslint-config"
   devDependencies:
@@ -4125,26 +4126,26 @@
     eslint-plugin-vuejs-accessibility "2.2.1"
     typescript "5.3.3"
 
-"@vuejs-jp/markuplint-config@@vuejs-jp/markuplint-config":
+"@vuejs-jp/markuplint-config@packages/markuplint-config":
   version "workspace:packages/markuplint-config"
   resolved "workspace:packages/markuplint-config"
   devDependencies:
     markuplint "4.1.1"
     typescript "5.3.3"
 
-"@vuejs-jp/model@@vuejs-jp/model":
+"@vuejs-jp/model@packages/model":
   version "workspace:packages/model"
   resolved "workspace:packages/model"
   devDependencies:
     "@vuejs-jp/eslint-config" "packages/eslint-config"
     "@vuejs-jp/typescript-config" "packages/typescript-config"
     typescript "5.3.3"
 
-"@vuejs-jp/typescript-config@@vuejs-jp/typescript-config", "@vuejs-jp/typescript-config@packages/typescript-config":
+"@vuejs-jp/typescript-config@packages/typescript-config":
   version "workspace:packages/typescript-config"
   resolved "workspace:packages/typescript-config"
 
-"@vuejs-jp/vuefes-ui@@vuejs-jp/vuefes-ui":
+"@vuejs-jp/vuefes-ui@packages/ui":
   version "workspace:packages/ui"
   resolved "workspace:packages/ui"
   devDependencies:
@@ -4158,9 +4159,10 @@
     "@storybook/vue3" "8.0.0-beta.2"
     "@storybook/vue3-vite" "8.0.0-beta.2"
     "@vitejs/plugin-vue" "5.0.3"
+    "@vuejs-jp/composable" "packages/composable"
     "@vuejs-jp/eslint-config" "packages/eslint-config"
-    "@vuejs-jp/markuplint-config" "@vuejs-jp/markuplint-config"
-    "@vuejs-jp/model" "@vuejs-jp/model"
+    "@vuejs-jp/markuplint-config" "packages/markuplint-config"
+    "@vuejs-jp/model" "packages/model"
     "@vuejs-jp/typescript-config" "packages/typescript-config"
     chromatic "10.9.4"
     storybook "8.0.0-beta.2"
@@ -4170,6 +4172,28 @@
     vite-svg-loader "5.1.0"
     vue "3.4.15"
 
+"@vuejs-jp/web@apps/web":
+  version "workspace:apps/web"
+  resolved "workspace:apps/web"
+  devDependencies:
+    "@nuxt/content" "^2.12.0"
+    "@nuxt/types" "^2.17.3"
+    "@nuxtjs/i18n" "^8.1.0"
+    "@types/node" "~18.19.0"
+    "@vuejs-jp/composable" "packages/composable"
+    "@vuejs-jp/eslint-config" "packages/eslint-config"
+    "@vuejs-jp/markuplint-config" "packages/markuplint-config"
+    "@vuejs-jp/model" "packages/model"
+    "@vuejs-jp/typescript-config" "packages/typescript-config"
+    "@vuejs-jp/vuefes-ui" "packages/ui"
+    cypress "13.6.4"
+    nuxt "3.10.0"
+    open-props "^1.6.21"
+    postcss-custom-media "^10.0.3"
+    vite-svg-loader "5.1.0"
+    vitest "1.2.2"
+    vue-tsc "^1.8.27"
+
 "@vueuse/[email protected]", "@vueuse/core@^10.7.2":
   version "10.7.2"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz"
@@ -11746,6 +11770,48 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+[email protected]:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/turbo/-/turbo-1.12.2.tgz"
+  integrity sha512-BcoQjBZ+LJCMdjzWhzQflOinUjek28rWXj07aaaAQ8T3Ehs0JFSjIsXOm4qIbo52G4xk3gFVcUtJhh/QRADl7g==
+  optionalDependencies:
+    turbo-darwin-64 "1.12.2"
+    turbo-darwin-arm64 "1.12.2"
+    turbo-linux-64 "1.12.2"
+    turbo-linux-arm64 "1.12.2"
+    turbo-windows-64 "1.12.2"
+    turbo-windows-arm64 "1.12.2"
+
+[email protected]:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.12.2.tgz"
+  integrity sha512-Aq/ePQ5KNx6XGwlZWTVTqpQYfysm1vkwkI6kAYgrX5DjMWn+tUXrSgNx4YNte0F+V4DQ7PtuWX+jRG0h0ZNg0A==
+
+[email protected]:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.12.2.tgz"
+  integrity sha512-wTr+dqkwJo/eXE+4SPTSeNBKyyfQJhI6I9sKVlCSBmtaNEqoGNgdVzgMUdqrg9AIFzLIiKO+zhfskNaSWpVFow==
+
+[email protected]:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.12.2.tgz"
+  integrity sha512-BggBKrLojGarDaa2zBo+kUR3fmjpd6bLA8Unm3Aa2oJw0UvEi3Brd+w9lNsPZHXXQYBUzNUY2gCdxf3RteWb0g==
+
+[email protected]:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.12.2.tgz"
+  integrity sha512-v/apSRvVuwYjq1D9MJFsHv2EpGd1S4VoSdZvVfW6FaM06L8CFZa92urNR1svdGYN28YVKwK9Ikc9qudC6t/d5A==
+
+[email protected]:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.12.2.tgz"
+  integrity sha512-3uDdwXcRGkgopYFdPDpxQiuQjfQ12Fxq0fhj+iGymav0eWA4W4wzYwSdlUp6rT22qOBIzaEsrIspRwx1DsMkNg==
+
+[email protected]:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.12.2.tgz"
+  integrity sha512-zNIHnwtQfJSjFi7movwhPQh2rfrcKZ7Xv609EN1yX0gEp9GxooCUi2yNnBQ8wTqFjioA2M5hZtGJQ0RrKaEm/Q==
+
 tween-functions@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz"