feat(shared/ui/typography): create component

libs/shared/ui/src/cuHacking/components/typography/typgoraphy.tsx

@@ -0,0 +1,42 @@
+import { cn } from '@cuhacking/shared/utils/cn'
+import { cva } from 'class-variance-authority'
+import React from 'react'
+
+interface TypographyProps {
+  variant:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'paragraph-sm'
+    | 'paragraph-base'
+    | 'paragraph-xs'
+  children: React.ReactNode
+  className: string
+}
+
+const typographyVariants = cva('', {
+  variants: {
+    variant: {
+      'h1': 'text-6xl font-bold font-sans',
+      'h2': 'text-5xl font-normal font-sans',
+      'h3': 'font-sans font-medium leading-10 font-sans text-4xl tracking-normal uppercase no-underline',
+      'h4': 'text-2xl font-normal font-sans',
+      'h5': 'text-lg font-normal font-sans',
+      'h6': 'font-sans font-medium leading-5 text-sm tracking-normal uppercase no-underline',
+      'paragraph-base': 'text-base font-normal font-sans',
+      'paragraph-sm': 'text-sm font-normal font-sans',
+      'paragraph-xs': 'text-xs font-normal font-sans',
+    },
+  },
+})
+
+export function Typography({ variant, className, children }: TypographyProps) {
+  return (
+    <div className={cn(typographyVariants({ variant }), className)}>
+      {children}
+    </div>
+  )
+}

libs/shared/ui/src/cuHacking/components/typography/typography.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Typography } from './typgoraphy'
+
+const meta: Meta<typeof Typography> = {
+  title: 'cuHacking Design System/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    variant: 'h1',
+    children: 'This is a headline',
+    className: '',
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: [
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+          'paragraph-sm',
+          'paragraph-base',
+          'paragraph-xs',
+        ],
+      },
+      table: {
+        type: { summary: 'Typography variant' },
+        defaultValue: { summary: 'h1' },
+      },
+    },
+    children: {
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    className: {
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Typography>
+
+function createVariantStory(variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'paragraph-base' | 'paragraph-sm' | 'paragraph-xs'): Story {
+  return {
+    args: {
+      variant,
+      children: `This is ${variant} typography`,
+      className: '',
+    },
+  }
+}
+
+export const H1: Story = createVariantStory('h1')
+export const H2: Story = createVariantStory('h2')
+export const H3: Story = createVariantStory('h3')
+export const H4: Story = createVariantStory('h4')
+export const H5: Story = createVariantStory('h5')
+export const H6: Story = createVariantStory('h6')
+export const ParagraphBase: Story = createVariantStory('paragraph-base')
+export const ParagraphSm: Story = createVariantStory('paragraph-sm')
+export const ParagraphXs: Story = createVariantStory('paragraph-xs')