From 166f55ef60e5efb58c400ca5d76077e5ebe20be9 Mon Sep 17 00:00:00 2001 From: RuiOkazaki Date: Thu, 2 May 2024 01:02:34 +0900 Subject: [PATCH 1/3] feat: create typography component --- bun.lockb | Bin 118617 -> 119596 bytes package.json | 1 + src/page/page.tsx | 5 ++- src/shared/ui/typography.tsx | 72 +++++++++++++++++++++++++++++++++++ 4 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 src/shared/ui/typography.tsx diff --git a/bun.lockb b/bun.lockb index 568d5ea252dd13c67675da61eebbe2183bf38199..23c59ae133f10abfaf3142f43d69c37653613204 100755 GIT binary patch delta 18916 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 CU*aSH delta 18380 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 diff --git a/package.json b/package.json index 36734aa..b683436 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "@auth0/nextjs-auth0": "^3.5.0", "@formkit/tempo": "^0.1.1", + "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "lucide-react": "^0.376.0", diff --git a/src/page/page.tsx b/src/page/page.tsx index ec2dc87..e38e330 100644 --- a/src/page/page.tsx +++ b/src/page/page.tsx @@ -1,4 +1,5 @@ import { ProfileClient } from '@/feature/profile-client'; +import { Typography } from '@/shared/ui/typography'; import { getSession } from '@auth0/nextjs-auth0'; export default async function Home() { @@ -9,7 +10,9 @@ export default async function Home() { Login Logout
-

client render

+ + client render +
diff --git a/src/shared/ui/typography.tsx b/src/shared/ui/typography.tsx new file mode 100644 index 0000000..fece6fe --- /dev/null +++ b/src/shared/ui/typography.tsx @@ -0,0 +1,72 @@ +import { cn } from '@/shared/libs/shadcn/utils'; +import { Slot } from '@radix-ui/react-slot'; +import { type VariantProps, cva } from 'class-variance-authority'; +import * as React from 'react'; + +const typographyVariants = cva('', { + variants: { + variant: { + 'body-s': 'text-xs leading-normal', + 'body-m': 'text-sm leading-normal', + 'body-l': 'text-base leading-normal', + 'heading-m': 'text-2xl leading-normal', + }, + weight: { + normal: 'font-normal', + bold: 'font-bold', + }, + }, + defaultVariants: { + variant: 'body-m', + weight: 'normal', + }, +}); + +type VariantPropType = VariantProps; + +const variantElementMap: Record< + NonNullable, + string +> = { + 'body-s': 'p', + 'body-m': 'p', + 'body-l': 'p', + 'heading-m': 'h2', +}; + +export interface TypographyProps + extends React.HTMLAttributes, + VariantProps { + asChild?: boolean; + as?: string; +} + +const Typography = React.forwardRef( + ({ className, variant, weight, as, asChild, ...props }, ref) => { + const Comp = asChild + ? Slot + : as ?? (variant ? variantElementMap[variant] : undefined) ?? 'div'; + return ( + + ); + }, +); + +Typography.displayName = 'Typography'; + +export { Typography, typographyVariants }; + +type TypographyVariantType = NonNullable< + VariantProps['variant'] +>; + +interface VariantPropsTypographyWithoutVariant + extends Omit, 'variant'> { + asChild?: boolean; +} + +export type { VariantPropsTypographyWithoutVariant, TypographyVariantType }; From b332fd9dc4f626a65f562e89123bdad4ac511427 Mon Sep 17 00:00:00 2001 From: RuiOkazaki Date: Thu, 2 May 2024 01:24:39 +0900 Subject: [PATCH 2/3] style: format css --- src/app/globals.css | 108 ++++++++++++++++++++++---------------------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index b0e6fff..4ef0baf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,76 +1,76 @@ @tailwind base; - @tailwind components; - @tailwind utilities; +@tailwind components; +@tailwind utilities; - @layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; - --radius: 0.5rem; - } + --radius: 0.5rem; + } - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - } + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; } +} - @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } - } \ No newline at end of file +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file From 8a9d705121ad9832272c9a787a72b266b8db5de9 Mon Sep 17 00:00:00 2001 From: RuiOkazaki Date: Thu, 2 May 2024 01:41:42 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20cssVariables=20=E3=81=AE=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E3=82=92=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AB?= =?UTF-8?q?=E5=90=88=E3=82=8F=E3=81=9B=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 28 ++++++++++---------- src/page/page.tsx | 3 +++ src/shared/ui/button.tsx | 56 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+), 14 deletions(-) create mode 100644 src/shared/ui/button.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 4ef0baf..0645645 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -4,49 +4,49 @@ @layer base { :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + --background: 0 0% 0%; + --foreground: 0 0% 100%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card: 0 0% 0%; + --card-foreground: 0 0% 100%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover: 0 0% 0%; + --popover-foreground: 0 0% 100%; - --primary: 222.2 47.4% 11.2%; + --primary: 263.4 70% 50.4%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary-foreground: 263.4 70% 50.4%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent-foreground: 263.4 70% 50.4%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --ring: 0 0% 100%; --radius: 0.5rem; } .dark { - --background: 222.2 84% 4.9%; + --background: 0 0% 100%; --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; + --card: 0 0% 100%; --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; + --popover: 0 0% 100%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; + --primary-foreground: 263.4 70% 50.4%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; diff --git a/src/page/page.tsx b/src/page/page.tsx index e38e330..381286d 100644 --- a/src/page/page.tsx +++ b/src/page/page.tsx @@ -1,4 +1,5 @@ import { ProfileClient } from '@/feature/profile-client'; +import { Button } from '@/shared/ui/button'; import { Typography } from '@/shared/ui/typography'; import { getSession } from '@auth0/nextjs-auth0'; @@ -25,6 +26,8 @@ export default async function Home() {
)} + + ); } diff --git a/src/shared/ui/button.tsx b/src/shared/ui/button.tsx new file mode 100644 index 0000000..1f2fdd4 --- /dev/null +++ b/src/shared/ui/button.tsx @@ -0,0 +1,56 @@ +import { Slot } from '@radix-ui/react-slot'; +import { type VariantProps, cva } from 'class-variance-authority'; +import * as React from 'react'; + +import { cn } from '@/shared/libs/shadcn/utils'; + +const buttonVariants = cva( + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: + 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + outline: + 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + secondary: + 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', + }, + size: { + default: 'h-10 px-4 py-2', + sm: 'h-9 rounded-md px-3', + lg: 'h-11 rounded-md px-8', + icon: 'h-10 w-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, +); + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button'; + return ( + + ); + }, +); +Button.displayName = 'Button'; + +export { Button, buttonVariants };