ds-learning 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "ds-learning",
+  "version": "0.1.0",
+  "private": false,
+  "scripts": {
+    "dev": "next dev",
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "start": "next start",
+    "lint": "eslint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "@heroicons/react": "^2.2.0",
+    "chromatic": "^15.2.0",
+    "class-variance-authority": "^0.7.1",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-a11y": "^10.2.8",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-onboarding": "^10.2.8",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/nextjs": "^10.2.8",
+    "@storybook/nextjs-vite": "^10.2.8",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "eslint-plugin-storybook": "^10.2.8",
+    "playwright": "^1.58.2",
+    "storybook": "^10.2.8",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "description": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).",
+  "main": "components/index.ts",
+  "author": "",
+  "license": "ISC",
+  "files": [
+    "src/components/*",
+    "src/app/global.css"
+  ]
+}

package/src/components/Avatar/Avatar.mdx

@@ -0,0 +1,16 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as AvatarStories from './Avatar.stories'
+
+<Meta of={AvatarStories} />
+
+# Avatar 
+Este é um componente de avatar. 
+
+### Default 
+<Canvas of={AvatarStories.Default} />
+### Com Imagem
+<Canvas of={AvatarStories.WithImage} />
+
+### Documentacao iterativa 
+<Canvas of={AvatarStories.Default} />
+<Controls of={AvatarStories.Default} />

package/src/components/Avatar/Avatar.stories.ts

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/nextjs';
+import { Avatar, AvatarProps } from './Avatar'
+
+const meta: Meta<AvatarProps> = {
+    title: 'DesignSystem/Molecules/Avatar',
+    component: Avatar, 
+    args: {},
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg']
+        }
+    }
+}
+
+export default meta;
+
+export const Default: StoryObj<AvatarProps> = {
+    args: {
+        size: 'lg',
+    }
+}
+
+export const WithImage: StoryObj<AvatarProps> = {
+    args: {
+        size: 'lg',
+        srcImageIcon: 'https://placehold.co/400x400.png',
+        altImageIcon: 'Avatar Image',
+    }
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,21 @@
+import { VariantProps } from "class-variance-authority";
+import { avatarStyles } from "./styles/avatar.styles";
+import { AvatarImage } from "./variants/AvatarImage";
+import { AvatarIcon } from "./variants/AvatarIcon";
+
+export type AvatarProps = VariantProps<typeof avatarStyles> & {
+  srcImageIcon?: string;
+  altImageIcon?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const Avatar = ({ size = "md", srcImageIcon, altImageIcon }: AvatarProps) => {
+  const avatarContent = srcImageIcon ? <AvatarImage src={srcImageIcon} alt={altImageIcon} /> : <AvatarIcon />;
+
+  return (
+    <div className={`${avatarStyles({ size: size })}`}>
+      {avatarContent}
+    </div>
+  );
+};
+
+export { Avatar };

package/src/components/Avatar/styles/avatar.styles.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority";
+
+export const avatarStyles = cva('rounded-full flex items-center justify-center bg-gray-100', {
+    variants: {
+        size: {
+            xs: 'w-6 h-6',
+            sm: 'w-8 h-8',
+            md: 'w-10 h-10',
+            lg: 'w-12 h-12',
+        },
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+})

package/src/components/Avatar/variants/AvatarIcon.tsx

@@ -0,0 +1,9 @@
+import { UserIcon } from '@heroicons/react/24/outline'
+
+const AvatarIcon = () => {
+    return (
+        <UserIcon className='w-1/2' />
+    )
+}
+
+export { AvatarIcon }

package/src/components/Avatar/variants/AvatarImage.tsx

@@ -0,0 +1,12 @@
+import Image from "next/image";
+
+export type AvatarImageProps = {
+  src?: string;
+  alt?: string;
+};
+
+const AvatarImage = ({ src = "", alt = "" }: AvatarImageProps) => {
+  return <Image width={100} height={100} src={src} alt={alt} className="rounded-full" />;
+};
+
+export { AvatarImage };

package/src/components/Box/Box.mdx

@@ -0,0 +1,16 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as BoxStories from './Box.stories'
+
+<Meta of={BoxStories} />
+
+# Box 
+Este é um componente de caixa para armazenar textos e imagens 
+
+### Default
+<Canvas of={BoxStories.Default} />
+### Com background
+<Canvas of={BoxStories.WithFilledBackground} />
+
+### Documentacao iterativa
+<Canvas of={BoxStories.Default} />
+<Controls of={BoxStories.Default} />

package/src/components/Box/Box.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/nextjs"
+import { BoxProps, Box } from "./Box"
+
+const meta: Meta<BoxProps> = {
+    title: "Atoms/Box",
+    component: Box,
+    args: {
+        variant: 'default',
+        rounded: false, 
+        children: "Aqui será um texto dentro da box."
+    },
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            options: ["default", "dark", "outlined"]
+        },
+        rounded: {
+            control: { type: "boolean" },
+            options: [true, false]
+        }
+    }
+}
+
+export default meta; 
+
+export const Default: StoryObj<BoxProps> = {
+    args: {}
+}
+
+export const WithFilledBackground: StoryObj<BoxProps> = {
+    args: {
+        variant: "dark",
+        rounded: true,
+        children: "This is a box with filled background"
+    }
+}

package/src/components/Box/Box.tsx

@@ -0,0 +1,18 @@
+import { VariantProps } from "class-variance-authority"
+import { boxStyles } from "./styles/box.styles"
+
+export type BoxProps = VariantProps<typeof boxStyles> & {} & React.HTMLAttributes<HTMLDivElement>
+
+const Box = ({
+    rounded = false,
+    variant = "default",
+    children,
+    className,
+    ...rest
+}: BoxProps) => {
+    return (
+        <div {...rest} className={`${boxStyles({ variant: variant, rounded: rounded })}`}>{children}</div>
+    )
+}
+
+export { Box }

package/src/components/Box/styles/box.styles.ts

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+
+export const boxStyles = cva('px-lg py-sm', {
+    variants: {
+        rounded: {
+            true: "rounded-md",
+            false: "none"
+        },
+        border: {
+            true: "border border-gray-100",
+            false: "none",
+        },
+        variant: {
+            default: 'bg-disabled text-text-primary',
+            dark: 'bg-dark text-red-500',
+            outlined: 'border border-gray-100 bg-transparent text-text-primary',
+        }
+    },
+})

package/src/components/Button/Button.mdx

@@ -0,0 +1,30 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Botao
+Este é um componente de botao, usado para disparar açoes.
+
+### Primário
+<Canvas of={ButtonStories.Primary} />
+### Desabilitado
+<Canvas of={ButtonStories.Disabled} />
+### Secundário
+<Canvas of={ButtonStories.Secondary} />
+### Secundário Desabilitado
+<Canvas of={ButtonStories.SecondaryDisabled} />
+### Terciário
+<Canvas of={ButtonStories.Tertiary} />
+### Terciário Desabilitado
+<Canvas of={ButtonStories.TertiaryDisabled} />
+### Tema Violeta
+<Canvas of={ButtonStories.Violet} />
+### Tema Violeta Secundario
+<Canvas of={ButtonStories.VioletSecondary} />
+### Tema Violeta Terciário
+<Canvas of={ButtonStories.VioletTertiary} />
+
+### Documentacao iterativa:
+<Canvas of={ButtonStories.Primary} withToolbar />
+<Controls of={ButtonStories.Primary} />

package/src/components/Button/Button.stories.ts

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from "@storybook/nextjs"
+import { Button, ButtonProps } from "./Button"
+
+const meta: Meta<ButtonProps> = {
+    title: 'DesignSystem/Molecules/Button',
+    component: Button,
+    argTypes: {
+        children: {
+            type: 'string',
+        },
+        disabled: {
+            type: 'boolean',
+        },
+        onClick: {
+            action: 'cliked',
+        }
+    },
+
+}
+
+export default meta 
+
+export const Primary: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        className: '',
+    }
+}
+
+export const Disabled: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        disabled: true,
+    }
+}
+
+export const Secondary: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        variant: 'secondary',
+    }
+}
+
+export const SecondaryDisabled: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        variant: 'secondary',
+        disabled: true,
+    }
+}
+
+export const Tertiary: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        variant: 'tertiary'
+    }
+}
+
+export const TertiaryDisabled: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        variant: 'tertiary',
+        disabled: true,
+    }
+}
+
+export const Violet: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        className: 'theme-violet',
+    }
+}
+
+export const VioletSecondary: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        variant: 'secondary',
+        className: 'theme-violet',
+    }
+}
+
+export const VioletTertiary: StoryObj<ButtonProps> = {
+    args: {
+        children: 'Button',
+        variant: 'tertiary',
+        className: 'theme-violet'
+    }
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,31 @@
+export type ButtonProps = {
+    children: React.ReactNode,
+    variant?: 'primary' | 'secondary' | 'tertiary',
+} & React.ButtonHTMLAttributes<HTMLButtonElement> 
+
+const Button = ({ variant = 'primary', children, className, disabled, ...rest }: ButtonProps) => {
+    
+    function getVariantClasses(variant: ButtonProps['variant'], disabled: ButtonProps['disabled']) {
+        const whenDisabled = 'bg-disabled text-text-disabled';
+        switch (variant) {
+            case 'primary': 
+                return disabled ? whenDisabled : 'bg-primary text-white';
+            case 'secondary': 
+                return disabled ? whenDisabled : 'bg-quaternary text-secondary';
+            case 'tertiary':
+                return disabled ? 'bg-transarent text-text-disabled' : 'bg-transparent text-primary';
+            default: 
+                break;
+        }
+    }
+        
+    return (
+        <button
+        // data-selected={isSelected}
+        className={`rounded-md px-lg py-2xs ${getVariantClasses(variant, disabled)} ${className}`}
+        {...rest}
+        >{children}</button>
+    )
+}
+
+export { Button }

package/src/components/Divider/Divider.mdx

@@ -0,0 +1,16 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DividerStories from './Divider.stories'
+
+<Meta of={DividerStories} />
+
+# Divider 
+Este é um componente de divisao, uasdo em alguns casos para manter a aplicacao moderna 
+
+### Default 
+<Canvas of={DividerStories.Default} />
+### Com children
+<Canvas of={DividerStories.WithChildren} />
+
+### Documentacao iterativa 
+<Canvas of={DividerStories.Default} withToolbar />
+<Controls of={DividerStories.Default} />

package/src/components/Divider/Divider.stories.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import { Divider, DividerProps } from "./Divider";
+
+const meta: Meta<DividerProps> = {
+    title: 'Atoms/Divider',
+    component: Divider, 
+    args: {}
+}
+
+export default meta;
+
+export const Default: StoryObj<DividerProps> = {
+    args: {
+        background: 'dark',
+    }
+}
+
+export const WithChildren: StoryObj<DividerProps> = {
+    args: {
+        background: 'dark',
+        children: 'Divider com children',
+    }
+}

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,25 @@
+import { VariantProps } from "class-variance-authority"
+import { dividerStyles } from "./styles/divider.styles"
+
+export type DividerProps = VariantProps<typeof dividerStyles> & {
+    width?: string
+} & React.HTMLAttributes<HTMLDivElement>
+
+const Divider = ({
+    width,
+    size,
+    children,
+    background,
+}: DividerProps) => {
+    const hasChildren = !!children;
+
+    return (
+        <div className={`flex items-center justify-center ${width}`}>
+            <div className={`${dividerStyles({ hasChildren: hasChildren, background: background, size: size })}`}></div>
+            {children && <div className="px-xs">{children}</div>}
+            <div className={`${dividerStyles({ hasChildren: hasChildren, background: background, size: size })}`}></div>
+        </div>
+    )
+}
+
+export { Divider }

package/src/components/Divider/styles/divider.styles.ts

@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+
+export const dividerStyles = cva('', {
+    variants: {
+        hasChildren: {
+            true: 'w-1/3',
+            false: 'w-1/2'
+        },
+        background: {
+            dark: 'bg-dark',
+            light: 'bg-light',
+        },
+        size: {
+            xs: 'h-0.5',
+            sm: 'h-1',
+            md: 'h-1.5',
+        }
+    },
+    defaultVariants: {
+        hasChildren: false,
+        background: 'light',
+        size: 'md'
+    }
+}
+)

package/src/components/Dropdown/Dropdown.stories.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/nextjs'
+import { Dropdown, DropdownProps } from './Dropdrown'
+
+const meta: Meta<DropdownProps> = {
+    title: 'Molecules/Dropdown',
+    component: Dropdown, 
+    args: {}
+}
+
+export default meta 
+
+export const Default: StoryObj<DropdownProps> = {
+    args: {
+        list: []
+    }
+}
+
+export const WithList: StoryObj<DropdownProps> = {
+    args: {
+        list: ['Option 1', 'Option 2', 'Option 3']
+    }
+}

package/src/components/Dropdown/Dropdrown.tsx

@@ -0,0 +1,88 @@
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/react";
+import { useState } from "react";
+
+type Person = {
+  id: number;
+  name: string;
+};
+
+export type DropdownProps = {
+  list: string[];
+};
+
+const Dropdown = ({ list, ...rest }: DropdownProps) => {
+  const [selectedPerson, setSelectedPerson] = useState<string | null>(list[0]);
+  const [query, setQuery] = useState("");
+
+  const filteredPeople =
+    query === ""
+      ? list
+      : list.filter((listItem) => {
+          return listItem.toLowerCase().includes(query.toLowerCase());
+        });
+
+  return (
+    <Combobox
+      value={selectedPerson}
+      onChange={setSelectedPerson}
+      onClose={() => setQuery("")}
+    >
+      <div className="relative">
+        <ComboboxInput
+          aria-label="Assignee"
+          className="
+        w-full rounded-lg border border-gray-300 bg-white
+        py-2.5 pl-3 pr-10 text-sm text-gray-900
+        shadow-sm
+        outline-none
+        transition
+        focus:border-blue-500
+        focus:ring-2 focus:ring-blue-500/20
+      "
+          onChange={(event) => setQuery(event.target.value)}
+          onFocus={(event) => setQuery(event.target.value)}
+        />
+
+        {/* Ícone opcional */}
+        <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-400">
+          ▾
+        </div>
+      </div>
+
+      <ComboboxOptions
+        anchor="bottom"
+        className="
+      absolute z-50 mt-2 max-h-60 w-full overflow-auto
+      rounded-lg border border-gray-200 bg-white
+      p-1 shadow-lg
+      transition
+      empty:invisible
+    "
+      >
+        {filteredPeople.map((listItem, index) => (
+          <ComboboxOption
+            key={index}
+            value={listItem}
+            className="
+          cursor-pointer select-none rounded-md px-3 py-2 text-sm
+          text-gray-700
+          transition
+          data-[focus]:bg-blue-500
+          data-[focus]:text-white
+          data-[selected]:font-medium
+        "
+          >
+            {listItem}
+          </ComboboxOption>
+        ))}
+      </ComboboxOptions>
+    </Combobox>
+  );
+};
+
+export { Dropdown };

package/src/components/Input/Input.mdx

@@ -0,0 +1,28 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as InputStories from './Input.stories';
+
+<Meta of={InputStories} />
+
+# Input
+Este é um componente de input, usado para receber dados do usuario.
+
+### Primário
+<Canvas of={InputStories.Primary} />
+### Desabilitado
+<Canvas of={InputStories.Disabled} />
+### Input com Label 
+<Canvas of={InputStories.Label} />
+### Input com Label Desabilitado
+<Canvas of={InputStories.LabelDisabled} />
+### Multilinhas
+<Canvas of={InputStories.Multiline} />
+### Multilinhas Desabilitado
+<Canvas of={InputStories.MultilineDisabled} />
+### Multilinhas com Label
+<Canvas of={InputStories.LabelMultiline} />
+### Multilinhas com Label Desabilitado
+<Canvas of={InputStories.LabelMultilineDisabled} />
+
+### Documentacao iterativa:
+<Canvas of={InputStories.Primary} withToolbar /> 
+<Controls of={InputStories.Primary} />