ds-learning 0.1.0

package/src/components/Typography/Typography.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/nextjs'
+import { Typography, TypographyProps } from "./Typography"
+import { typographyStyles } from './styles/typography.styles';
+
+const meta: Meta<TypographyProps> = {
+    title: 'Atoms/Typography',
+    component: Typography,
+    args: {},
+}
+
+export default meta;
+
+export const Primary: StoryObj<TypographyProps> = {
+    args: {
+        children: 'Typography',
+        variant: 'primary',
+        size: 'md',
+    }
+}
+
+export const Secondary: StoryObj<TypographyProps> = {
+    args: {
+        children: 'Typography',
+        variant: 'secondary',  
+        size: 'md',
+    }
+}
+
+export const Tertiary: StoryObj<TypographyProps> = {
+    args: {
+        children: 'Typography',
+        variant: 'tertiary',
+        size: 'md',
+    }
+}

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,28 @@
+import { JSX } from "react"
+import { VariantProps } from "class-variance-authority"
+import { typographyStyles } from "./styles/typography.styles"
+
+export type TypographyProps = VariantProps<typeof typographyStyles> & {
+    children?: React.ReactNode
+    element?: keyof JSX.IntrinsicElements
+} & JSX.IntrinsicElements['p']
+
+const Typography = ({
+    variant,
+    size,
+    className,
+    children,
+    element = "p",
+    ...rest
+}: TypographyProps) => {
+    const Element = element as any
+
+    return (
+        <Element
+            className={`${typographyStyles({ variant: variant, size: size })} ${className}`}
+            {...rest}
+        >{children}</Element>
+    )
+}
+
+export { Typography }

package/src/components/Typography/styles/typography.styles.ts

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority"
+
+export const typographyStyles = cva('text-text-primary text-sm font-normal', {
+    variants: {
+        variant: {
+            primary: 'text-text-primary',
+            secondary: 'text-text-secondary',
+            tertiary: 'text-text-tertiary',
+        },
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-md',
+            lg: 'text-lg',
+            xl: 'text-xl',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md'
+    }
+})

package/src/components/index.ts

@@ -0,0 +1,15 @@
+export * from './Avatar/Avatar'
+export * from './Box/Box'
+export * from './Button/Button'
+export * from './Divider/Divider'  
+export * from './Dropdown/Dropdrown'
+export * from './Input/Input'
+export * from './Link/Link'
+export * from './Modal/Modal'
+export * from './Notice/Notice'
+export * from './Switch/Switch'
+export * from './TextBlock/TextBlock'
+export * from './Typography/Typography'
+
+
+