Merge pull request #35 from vuejs-jp/enhance/pathPrefix-false

pathPrefix to false

packages/composable/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/useArray'
 export * from './lib/useColor'
+export * from './lib/useNav'
 export * from './lib/useToast'
 export * from './lib/useTypography'

packages/composable/lib/useNav.ts

@@ -0,0 +1,21 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export function useNav() {
+  const navRef = ref<HTMLElement | null>(null)
+  const showNav = ref(false)
+
+  function checkShowNav() {
+    showNav.value = window.pageYOffset > 50
+  }
+
+  onMounted(function () {
+    checkShowNav()
+    window.addEventListener('scroll', checkShowNav)
+  })
+
+  onUnmounted(function () {
+    window.removeEventListener('scroll', checkShowNav)
+  })
+
+  return { navRef, showNav }
+}

packages/ui/.storybook/main.js

@@ -10,6 +10,7 @@ module.exports = {
     '@storybook/addon-backgrounds',
     '@storybook/addon-essentials',
     '@storybook/addon-links',
+    '@storybook/addon-viewport',
   ],
   framework: {
     name: '@storybook/vue3-vite',

packages/ui/components/CssResetButton.stories.ts → packages/ui/components/common/CssResetButton.stories.ts

@@ -2,7 +2,7 @@ import { StoryFn } from '@storybook/vue3'
 import CssResetButton from './CssResetButton.vue'
 
 export default {
-  title: 'Example/CssResetButton',
+  title: 'common/CssResetButton',
   component: CssResetButton,
   args: {
     default: '<strong>Go!</strong>',

packages/ui/components/common/Header.stories.ts

@@ -0,0 +1,48 @@
+import { StoryFn } from '@storybook/vue3'
+import Header from './Header.vue'
+
+export default {
+  title: 'common/Header',
+  component: Header,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#35495e',
+        },
+        {
+          name: 'light',
+          value: '#fff',
+        },
+      ],
+    },
+  },
+  args: {
+    color: 'vue-blue',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Header },
+  setup() {
+    return { args }
+  },
+  template: '<Header v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+
+Default.parameters = {
+  layout: 'fullscreen',
+}

packages/ui/components/common/Header.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Logo from './Logo.vue'
+import { useColor, useNav } from '@vuejs-jp/composable'
+
+const { navRef } = useNav()
+const { color } = useColor()
+</script>
+
+<template>
+  <nav
+    ref="navRef"
+    :style="{ backgroundColor: color('white') }"
+  >
+    <div class="nav-root">
+      <h1>
+        <Logo color="vue-blue" />
+      </h1>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+nav {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+.nav-root {
+  padding: 20px 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

packages/ui/components/common/Logo.stories.ts

@@ -0,0 +1,54 @@
+import { StoryFn } from '@storybook/vue3'
+import Logo from './Logo.vue'
+
+export default {
+  title: 'common/Logo',
+  component: Logo,
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        {
+          name: 'dark',
+          value: '#35495e',
+        },
+        {
+          name: 'light',
+          value: '#fff',
+        },
+      ],
+    },
+  },
+  args: {
+    color: 'vue-blue',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Logo },
+  setup() {
+    return { args }
+  },
+  template: '<Logo v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+
+export const Dark = Template.bind({})
+Dark.args = {
+  color: 'white',
+}
+Dark.parameters = {
+  backgrounds: {
+    default: 'dark',
+  },
+}

packages/ui/components/common/Logo.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import type { Color } from '@vuejs-jp/model'
+import { useColor } from '@vuejs-jp/composable'
+
+export type LogoProps = {
+  color: Color
+}
+
+const props = defineProps<LogoProps>()
+
+const svgComponent =
+  defineAsyncComponent(
+    () => import('../../assets/logo/vuefes_logo.svg?component'),
+  )
+
+const { color: fillColor } = useColor()
+</script>
+
+<template>
+  <component
+    :is="svgComponent"
+    :fill="fillColor(props.color)"
+  />
+</template>

packages/ui/components/common/SpHeader.stories.ts

@@ -0,0 +1,61 @@
+import { StoryFn } from '@storybook/vue3'
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
+import SpHeader from './SpHeader.vue'
+
+export default {
+  title: 'common/SpHeader',
+  component: SpHeader,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#35495e',
+        },
+        {
+          name: 'light',
+          value: '#fff',
+        },
+      ],
+    },
+    viewport: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        mobile1: {
+          name: 'Small mobile',
+          styles: { width: '375px', height: '667px' },
+        },
+      },
+    },
+  },
+  args: {
+    color: 'vue-blue',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SpHeader },
+  setup() {
+    return { args }
+  },
+  template: '<SpHeader v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+
+Default.parameters = {
+  layout: 'fullscreen',
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+}

packages/ui/components/common/SpHeader.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Logo from './Logo.vue'
+import { useColor, useNav } from '@vuejs-jp/composable'
+
+const { navRef } = useNav()
+const { color } = useColor()
+</script>
+
+<template>
+  <nav
+    ref="navRef"
+    :style="{ backgroundColor: color('white') }"
+  >
+    <div class="nav-root">
+      <h1>
+        <Logo color="vue-blue" />
+      </h1>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+nav {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+.nav-root {
+  padding: 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

packages/ui/components/InputField.vue → packages/ui/components/forms/InputField.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { InputHTMLAttributes, InputTypeHTMLAttribute } from 'vue'
 import { useColor, useTypography } from '@vuejs-jp/composable'
-import Typography from './Typography.vue'
+import Typography from '../common/Typography.vue'
 
 type _InputFieldProps = Omit<InputHTMLAttributes, 'onInput' | 'onBlur'>;
 interface Props extends /* @vue-ignore */ _InputFieldProps {

packages/ui/components/SubmitButton.vue → packages/ui/components/forms/SubmitButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ButtonHTMLAttributes } from 'vue'
-import CssResetButton from './CssResetButton.vue'
+import CssResetButton from '../common/CssResetButton.vue'
 import type { Color } from '@vuejs-jp/model'
 import { useColor } from '@vuejs-jp/composable'
 

packages/ui/components/TextAreaField.vue → packages/ui/components/forms/TextAreaField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useColor, useTypography } from '@vuejs-jp/composable'
-import Typography from './Typography.vue'
+import Typography from '../common/Typography.vue'
 
 type Props = {
   /** HTMLAttribute id */

packages/ui/components/Icon.vue → packages/ui/components/icon/Icon.vue

@@ -14,16 +14,16 @@ const props = defineProps<IconProps>()
 const svgComponent =
   match<IconName>(props.name)
     .with('x', () => defineAsyncComponent(
-      () => import('../assets/icon/x_logo.svg?component'),
+      () => import('../../assets/icon/x_logo.svg?component'),
     ))
     .with('note', () => defineAsyncComponent(
-      () => import('../assets/icon/note_logo.svg?component'),
+      () => import('../../assets/icon/note_logo.svg?component'),
     ))
     .with('YouTube', () => defineAsyncComponent(
-      () => import('../assets/icon/youtube_logo.svg?component'),
+      () => import('../../assets/icon/youtube_logo.svg?component'),
     ))
     .with('GitHub', () => defineAsyncComponent(
-      () => import('../assets/icon/github_logo.svg?component'),
+      () => import('../../assets/icon/github_logo.svg?component'),
     ))
     .exhaustive()
 

packages/ui/nuxt.mjs

@@ -10,6 +10,7 @@ export default defineNuxtModule({
       dirs.push({
         path: join(__dirname, 'components'),
         prefix: 'VF',
+        pathPrefix: false,
       })
     },
   },

packages/ui/package.json

@@ -20,6 +20,7 @@
     "@storybook/addon-backgrounds": "8.0.0-beta.2",
     "@storybook/addon-essentials": "8.0.0-beta.2",
     "@storybook/addon-links": "8.0.0-beta.2",
+    "@storybook/addon-viewport": "8.0.0-beta.2",
     "@storybook/builder-vite": "8.0.0-beta.2",
     "@storybook/vue3": "8.0.0-beta.2",
     "@storybook/vue3-vite": "8.0.0-beta.2",

yarn.lock

@@ -4156,6 +4156,7 @@
     "@storybook/addon-backgrounds" "8.0.0-beta.2"
     "@storybook/addon-essentials" "8.0.0-beta.2"
     "@storybook/addon-links" "8.0.0-beta.2"
+    "@storybook/addon-viewport" "8.0.0-beta.2"
     "@storybook/builder-vite" "8.0.0-beta.2"
     "@storybook/vue3" "8.0.0-beta.2"
     "@storybook/vue3-vite" "8.0.0-beta.2"