feat/#3 : Components _ Tag

apps/ziine/src/app/page.tsx

@@ -1,95 +1,11 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import Image from 'next/image';
+import styles from './page.module.css';
 
 export default function Home() {
   return (
     <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>src/app/page.tsx</code>.
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      <main className={styles.main}>main page</main>
+      <footer className={styles.footer}></footer>
     </div>
   );
 }

packages/design/.storybook/index.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

packages/design/.storybook/preview.js

@@ -1,4 +1,7 @@
 /** @type { import('@storybook/react').Preview } */
+
+import '../.storybook/index.css';
+
 const preview = {
   parameters: {
     controls: {
@@ -8,6 +11,7 @@ const preview = {
       },
     },
   },
+  decorators: [],
 };
 
 export default preview;

packages/design/index.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

packages/design/package.json

@@ -21,9 +21,14 @@
     "@storybook/nextjs": "^8.5.1",
     "@storybook/react": "^8.5.1",
     "@storybook/test": "^8.5.1",
-    "storybook": "^8.5.1"
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "storybook": "^8.5.1",
+    "typescript": "^5.7.3"
   },
   "dependencies": {
-    "prop-types": "^15.8.1"
+    "prop-types": "^15.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

packages/design/stories/Tag.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '../styled-system/css';
+
+import { Tag } from './Tag';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ backgroundColor: 'rgba(30, 30, 30, 1)' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Text',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: 'Text',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Text',
+    variant: 'secondary',
+  },
+};

packages/design/stories/Tag.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { css } from '../styled-system/css';
+import React from 'react';
+
+export interface IButtonProps {
+  children: ReactNode;
+  variant?: 'primary' | 'secondary';
+}
+
+export const Tag = ({ children, variant = 'primary' }: IButtonProps) => {
+  return (
+    <button
+      className={css({
+        fontSize: '12px',
+        lineHeight: '19.2px',
+        fontWeight: '400',
+        textAlign: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '4px',
+        px: '10px',
+        py: '4px',
+        border: 'solid',
+        borderWidth: '1.5px',
+        borderRadius: '99px',
+        ...(variant === 'primary'
+          ? {
+              bg: 'rgba(255, 87, 30, 0.15)',
+              color: 'rgba(255, 110, 61, 1)',
+              borderColor: 'rgba(255, 87, 30, 0.1)',
+            }
+          : {
+              bg: 'rgba(255, 87, 30, 1)',
+              color: 'rgba(30, 30, 30, 1)',
+              borderColor: 'rgba(30, 30, 30, 1)',
+            }),
+      })}
+    >
+      {children}
+    </button>
+  );
+};