From 9b287c0eef1b9d40995f025efb0272e1f21fbcc2 Mon Sep 17 00:00:00 2001 From: jiyuujin Date: Fri, 12 Jul 2024 21:11:47 +0900 Subject: [PATCH] Namecard23 --- packages/composable/index.ts | 1 + packages/composable/lib/useUserRole.ts | 27 + packages/model/lib/attendee.ts | 2 + packages/ui/assets/namecard/2023/block.svg | 169 +++++ packages/ui/assets/namecard/2023/hook.svg | 3 + packages/ui/assets/namecard/2023/sponsor.svg | 10 + packages/ui/assets/namecard/2023/ticket.svg | 6 + packages/ui/assets/namecard/2023/title1.svg | 21 + packages/ui/assets/namecard/2023/title2.svg | 3 + .../ui/assets/namecard/2023/vuefes_logo.svg | 3 + packages/ui/assets/namecard/2023/wave.svg | 698 ++++++++++++++++++ .../components/namecard/Namecard23.stories.ts | 70 ++ .../ui/components/namecard/Namecard23.vue | 149 ++++ .../components/namecard/Namecard24.stories.ts | 18 + .../ui/components/namecard/Namecard24.vue | 3 + .../ui/components/namecard/NamecardAvatar.vue | 63 ++ .../namecard/NamecardAvatarLogo.vue | 54 ++ 17 files changed, 1300 insertions(+) create mode 100644 packages/composable/lib/useUserRole.ts create mode 100644 packages/ui/assets/namecard/2023/block.svg create mode 100644 packages/ui/assets/namecard/2023/hook.svg create mode 100644 packages/ui/assets/namecard/2023/sponsor.svg create mode 100644 packages/ui/assets/namecard/2023/ticket.svg create mode 100644 packages/ui/assets/namecard/2023/title1.svg create mode 100644 packages/ui/assets/namecard/2023/title2.svg create mode 100644 packages/ui/assets/namecard/2023/vuefes_logo.svg create mode 100644 packages/ui/assets/namecard/2023/wave.svg create mode 100644 packages/ui/components/namecard/Namecard23.stories.ts create mode 100644 packages/ui/components/namecard/Namecard23.vue create mode 100644 packages/ui/components/namecard/Namecard24.stories.ts create mode 100644 packages/ui/components/namecard/Namecard24.vue create mode 100644 packages/ui/components/namecard/NamecardAvatar.vue create mode 100644 packages/ui/components/namecard/NamecardAvatarLogo.vue diff --git a/packages/composable/index.ts b/packages/composable/index.ts index 95e9f7f6..0c6e5daa 100644 --- a/packages/composable/index.ts +++ b/packages/composable/index.ts @@ -4,3 +4,4 @@ export * from './lib/useCsv' export * from './lib/useHeader' export * from './lib/useToast' export * from './lib/useTypography' +export * from './lib/useUserRole' diff --git a/packages/composable/lib/useUserRole.ts b/packages/composable/lib/useUserRole.ts new file mode 100644 index 00000000..623a1d65 --- /dev/null +++ b/packages/composable/lib/useUserRole.ts @@ -0,0 +1,27 @@ +import { Role } from '@vuejs-jp/model' +import { match } from 'ts-pattern' + +export function useUserRole() { + const backgroundColor = (role: Role) => + match(role) + .with('staff', () => '#233445') + .with('speaker', () => '#90B44B') + .with('sponsor', () => '#FFC408') + .with('attendee', () => '#F17C67') + .with('attendee + party', () => '#33A6B8') + .exhaustive() + + const textColor = (role: Role) => + match(role) + .with('sponsor', () => '#35495E') + .with('staff', 'speaker', 'attendee', 'attendee + party', () => '#fff') + .exhaustive() + + const getRole = (target: string): Role => { + return target.indexOf('一般＋アフターパーティーチケット') !== -1 + ? 'attendee + party' + : 'attendee' + } + + return { backgroundColor, textColor, getRole } +} diff --git a/packages/model/lib/attendee.ts b/packages/model/lib/attendee.ts index f5d57098..e6d37871 100644 --- a/packages/model/lib/attendee.ts +++ b/packages/model/lib/attendee.ts @@ -28,3 +28,5 @@ export type Attendee = { updated_at: string user_id: string } + +export type NamecardUser = Pick diff --git a/packages/ui/assets/namecard/2023/block.svg b/packages/ui/assets/namecard/2023/block.svg new file mode 100644 index 00000000..436841d2 --- /dev/null +++ b/packages/ui/assets/namecard/2023/block.svg @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/assets/namecard/2023/hook.svg b/packages/ui/assets/namecard/2023/hook.svg new file mode 100644 index 00000000..f8e4b7ef --- /dev/null +++ b/packages/ui/assets/namecard/2023/hook.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/assets/namecard/2023/sponsor.svg b/packages/ui/assets/namecard/2023/sponsor.svg new file mode 100644 index 00000000..051cbc1a --- /dev/null +++ b/packages/ui/assets/namecard/2023/sponsor.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/ui/assets/namecard/2023/ticket.svg b/packages/ui/assets/namecard/2023/ticket.svg new file mode 100644 index 00000000..0fc3f135 --- /dev/null +++ b/packages/ui/assets/namecard/2023/ticket.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/assets/namecard/2023/title1.svg b/packages/ui/assets/namecard/2023/title1.svg new file mode 100644 index 00000000..2abe3167 --- /dev/null +++ b/packages/ui/assets/namecard/2023/title1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/assets/namecard/2023/title2.svg b/packages/ui/assets/namecard/2023/title2.svg new file mode 100644 index 00000000..8d656724 --- /dev/null +++ b/packages/ui/assets/namecard/2023/title2.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/assets/namecard/2023/vuefes_logo.svg b/packages/ui/assets/namecard/2023/vuefes_logo.svg new file mode 100644 index 00000000..7a19b6d2 --- /dev/null +++ b/packages/ui/assets/namecard/2023/vuefes_logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/assets/namecard/2023/wave.svg b/packages/ui/assets/namecard/2023/wave.svg new file mode 100644 index 00000000..459731be --- /dev/null +++ b/packages/ui/assets/namecard/2023/wave.svg @@ -0,0 +1,698 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/components/namecard/Namecard23.stories.ts b/packages/ui/components/namecard/Namecard23.stories.ts new file mode 100644 index 00000000..1c768019 --- /dev/null +++ b/packages/ui/components/namecard/Namecard23.stories.ts @@ -0,0 +1,70 @@ +import { StoryFn } from '@storybook/vue3' +import Namecard23 from './Namecard23.vue' + +export default { + title: 'namecard/Namecard23', + component: Namecard23, + args: { + user: { + display_name: 'jiyuujin', + avatar_url: 'https://i.imgur.com/X0CcoU9.jpg', + role: 'attendee', + }, + }, +} + +const Template: StoryFn = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { Namecard23 }, + setup() { + return { args } + }, + template: '{{ args.default }}', +}) + +export const Default = Template.bind({}) + +export const WithParty = Template.bind({}) +WithParty.args = { + user: { + display_name: 'jiyuujin', + avatar_url: 'https://i.imgur.com/X0CcoU9.jpg', + role: 'attendee + party', + }, +} + +export const Speaker = Template.bind({}) +Speaker.args = { + user: { + display_name: 'jiyuujin', + avatar_url: 'https://i.imgur.com/X0CcoU9.jpg', + role: 'speaker', + }, +} + +export const Sponsor = Template.bind({}) +Sponsor.args = { + user: { + display_name: 'jiyuujin', + avatar_url: 'https://i.imgur.com/X0CcoU9.jpg', + role: 'sponsor', + }, +} + +export const Staff = Template.bind({}) +Staff.args = { + user: { + display_name: 'jiyuujin', + avatar_url: 'https://i.imgur.com/X0CcoU9.jpg', + role: 'staff', + }, +} + +export const NoAvatar = Template.bind({}) +NoAvatar.args = { + user: { + display_name: 'jiyuujin', + avatar_url: '', + role: 'attendee', + }, +} diff --git a/packages/ui/components/namecard/Namecard23.vue b/packages/ui/components/namecard/Namecard23.vue new file mode 100644 index 00000000..62fb933a --- /dev/null +++ b/packages/ui/components/namecard/Namecard23.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/packages/ui/components/namecard/Namecard24.stories.ts b/packages/ui/components/namecard/Namecard24.stories.ts new file mode 100644 index 00000000..8ed02ef6 --- /dev/null +++ b/packages/ui/components/namecard/Namecard24.stories.ts @@ -0,0 +1,18 @@ +import { StoryFn } from '@storybook/vue3' +import Namecard24 from './Namecard24.vue' + +export default { + title: 'namecard/Namecard24', + component: Namecard24, +} + +const Template: StoryFn = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { Namecard24 }, + setup() { + return { args } + }, + template: '{{ args.default }}', +}) + +export const Default = Template.bind({}) diff --git a/packages/ui/components/namecard/Namecard24.vue b/packages/ui/components/namecard/Namecard24.vue new file mode 100644 index 00000000..7b05fbf7 --- /dev/null +++ b/packages/ui/components/namecard/Namecard24.vue @@ -0,0 +1,3 @@ + diff --git a/packages/ui/components/namecard/NamecardAvatar.vue b/packages/ui/components/namecard/NamecardAvatar.vue new file mode 100644 index 00000000..2bc44379 --- /dev/null +++ b/packages/ui/components/namecard/NamecardAvatar.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/packages/ui/components/namecard/NamecardAvatarLogo.vue b/packages/ui/components/namecard/NamecardAvatarLogo.vue new file mode 100644 index 00000000..65e84254 --- /dev/null +++ b/packages/ui/components/namecard/NamecardAvatarLogo.vue @@ -0,0 +1,54 @@ + + + + +