ds-learning 0.1.0

package/src/components/Input/Input.stories.ts

@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from "@storybook/nextjs"
+import { Input, InputProps } from "./Input"
+
+const meta: Meta<InputProps> = {
+    title: 'Molecules/Input',
+    component: Input,
+    argTypes: {},
+}
+
+export default meta
+
+export const Primary: StoryObj<InputProps> = {
+    args: {
+        value: 'Input',       
+    }
+}
+
+export const Disabled: StoryObj<InputProps> = {
+    args: {
+        value: 'Input',
+        disabled: true,
+    }
+}
+
+export const Multiline: StoryObj<InputProps> = {
+    args: {
+        value: 'Input',
+        multiline: true,
+    }
+}
+
+export const MultilineDisabled: StoryObj<InputProps> = {
+    args: {
+        value: 'Input',
+        multiline: true,
+        disabled: true,
+    }
+}
+
+export const Label: StoryObj<InputProps> = {
+    args: {
+        value: 'Input',
+        label: 'Label',
+    }
+}
+
+export const LabelDisabled: StoryObj<InputProps> = {
+    args: {
+        value: 'Input',
+        label: 'Label',
+        disabled: true,
+    }
+}
+
+export const LabelMultiline: StoryObj<InputProps> = {
+    args: {
+        value: 'Input', 
+        label: 'Label',
+        multiline: true,
+    }
+}
+
+export const LabelMultilineDisabled: StoryObj<InputProps> = {
+    args: {
+        value: 'Input',
+        label: 'Label',
+        multiline: true,
+        disabled: true,
+    }
+}   

package/src/components/Input/Input.tsx

@@ -0,0 +1,29 @@
+export type InputProps = {
+    label?: string
+    multiline?: boolean
+} & (
+        React.InputHTMLAttributes<HTMLInputElement> |
+        React.TextareaHTMLAttributes<HTMLTextAreaElement>
+    )
+
+const InputOrTextarea = (props: InputProps) => {
+    if (props.multiline) {
+        return <textarea {...props as React.TextareaHTMLAttributes<HTMLTextAreaElement>} />
+    }
+    return <input {...props as React.InputHTMLAttributes<HTMLInputElement>} />
+}
+
+const Input = ({ className, label, ...rest }: InputProps) => {
+    return (
+        <div className="relative">
+            {label && <label className="absolute pt-4xs pl-xs text-xs">{label}</label>}
+            <InputOrTextarea 
+            className={`bg-dark text-gray disabled:bg-disabled disabled:border-2 disabled:border-disabled rounded-md p-xs
+            ${label && 'pt-sm'}
+            ${className}`}
+            {...rest} />
+        </div>
+    )
+}
+
+export { Input }

package/src/components/Link/Link.mdx

@@ -0,0 +1,17 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as LinkStories from './Link.stories';
+
+<Meta of={LinkStories} />
+
+# Link
+Este é um componente de link, usado para navegar entre páginas ou seções.
+
+### Primário
+<Canvas of={LinkStories.Primary} />
+### Desabilitado
+<Canvas of={LinkStories.Disabled} />
+### Tema Violeta
+<Canvas of={LinkStories.Violet} />
+
+### Documentacao iterativa:
+<Controls of={LinkStories.Primary} />

package/src/components/Link/Link.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import { Link, LinkProps } from "./Link";
+
+const meta: Meta<LinkProps> = {
+    title: 'Molecules/Link',
+    component: Link,
+    args: {
+        className: '',
+    },
+}
+
+export default meta;
+
+export const Primary: StoryObj<LinkProps> = {
+    args: {
+        children: 'Link',
+        href: '/'
+    }
+}
+
+export const Disabled: StoryObj<LinkProps> = {
+    args: {
+        children: 'Link',
+        href: '/',
+        disabled: true
+    }  
+}
+
+export const Violet: StoryObj<LinkProps> = {
+    args: {
+        children: 'Link',
+        href: '/',
+        className: 'theme-violet'
+    }
+}

package/src/components/Link/Link.tsx

@@ -0,0 +1,14 @@
+export type LinkProps = {
+    children: React.ReactNode,
+    disabled?: boolean,
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+const Link = ({ children, href, disabled, className,...rest }: LinkProps) => {
+    return <a 
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    className={`text-primary aria-disabled:text-text-disabled ${className}`}
+    {...rest}>{children}</a>
+}
+
+export { Link }

package/src/components/Modal/Modal.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ModalStories from './Modal.stories'
+
+<Meta of={ModalStories} />
+
+### Modal 
+Este é um componente de Modal
+
+### Modal Info 
+<Canvas of={ModalStories.ModalInfo} />

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Modal, ModalProps } from "./Modal"
+import { Button } from '../Button/Button'
+import { Typography } from '../Typography/Typography'
+import { Meta, StoryObj } from '@storybook/nextjs'
+
+const ModalStoryComponent = (args: ModalProps) => {
+    const [isOpen, setIsOpen] = useState(args.isOpen)
+
+    return (
+        <>
+            <Button onClick={() => setIsOpen(true)}>Abrir Modal</Button>
+            <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)} title='Modal Componente'>
+                <Typography>
+                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English
+                </Typography>
+                <Typography>
+                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English
+                </Typography>
+                <div className='w-full flex flex-col items-center space-y-2'>
+                    <Button onClick={() => setIsOpen(false)} variant='primary' className='w-full'>Primary</Button>
+                    <Button onClick={() => setIsOpen(false)} variant='secondary'className='w-full'>Secondary</Button>
+                </div>
+            </Modal>
+        </>
+    )
+}
+
+export { ModalStoryComponent }
+
+const meta: Meta<ModalProps> = {
+    title: 'Molecules/Modal',
+    component: Modal,
+}
+
+export default meta; 
+
+export const ModalInfo: StoryObj<ModalProps> = {
+    args: {
+        isOpen: false, 
+        title: 'Modal Info'
+    },
+    render: (args: ModalProps) => {
+        return <ModalStoryComponent {...args} />
+    }
+}

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,63 @@
+import { Dialog, Transition, DialogProps } from "@headlessui/react"
+import { XMarkIcon } from "@heroicons/react/24/outline"
+import React, { Fragment } from "react"
+
+export type ModalProps = {
+    children?: React.ReactNode 
+    isOpen: boolean 
+    onClose: () => void 
+    title?: string 
+} & DialogProps & React.HTMLAttributes<HTMLDivElement>
+
+const Modal = ({
+    children, 
+    isOpen, 
+    onClose,
+    title 
+}: ModalProps) => {
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-10" onClose={onClose}>
+                <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black opacity-25" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <Transition.Child
+                        as={Fragment} 
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0 scale-95"
+                        enterTo="opacity-100 scale-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100 scale-100"
+                        leaveTo="opacity-0"
+                        >
+                            <Dialog.Panel className="flex flex-col gap-5 max-w-3xl bg-white transform overflow-hidden rounded-lg p-7 transition-all">
+                                <div className="flex items-center justify-between">
+                                    <Dialog.Title as="h3" className="text-lg font-semibold">
+                                        {title}
+                                    </Dialog.Title>
+                                    <button onClick={onClose}>
+                                        <XMarkIcon className="w-5 h-5 text-disabled" />
+                                    </button>
+                                </div>
+                                {children}
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    )
+}
+
+export { Modal }

package/src/components/Molecules.mdx

@@ -0,0 +1,3 @@
+# Molecules 
+
+Molecules are components of design more complex than atoms.

package/src/components/Notice/ExclamationIcon.tsx

@@ -0,0 +1,23 @@
+import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+
+export type ExclamationIconProps = {
+    variant: "warning" | "error" | "default"
+}
+
+const ExclamationIcon = ({ variant }: ExclamationIconProps) => {
+    const colorsIconMap = {
+        "warning": "#F6D523",
+        "error": "#FF3030",
+        "default": ""
+    }
+
+    return (
+        <ExclamationCircleIcon
+        width={32}
+        height={32}
+        color={colorsIconMap[variant]}
+        />
+    )
+}
+
+export { ExclamationIcon as Exclamationicon }

package/src/components/Notice/Notice.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as NoticeStories from './Notice.stories'
+
+<Meta of={NoticeStories} />
+
+### Notice Card
+Este é um componente usado para exibir noticias
+
+### Default 
+<Canvas of={NoticeStories.Default} />
+### Warning 
+<Canvas of={NoticeStories.Warning} />
+### Error 
+<Canvas of={NoticeStories.Error} />
+
+### Documentacao irativa
+<Canvas of={NoticeStories.Default} />
+<Controls of={NoticeStories.Default} />
+
+

package/src/components/Notice/Notice.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/nextjs'
+import { Notice, NoticeProps } from './Notice'
+
+const meta: Meta<NoticeProps> = {
+    title: 'Molecules/Notice',
+    component: Notice, 
+    args: {
+        variant: 'default',
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['default', 'warning', 'error']
+        }
+    }
+}
+
+export default meta;
+
+export const Default: StoryObj<NoticeProps> = {
+    args: {
+        noticeTitle: 'Default Notice',
+        notice: 'This is a default notice without any specific variant.',
+        variant: 'default',
+    }
+}
+
+export const Warning: StoryObj<NoticeProps> = {
+    args: {
+        notice: 'This is a warning notice. Please be cautious!',
+        variant: 'warning'
+    }
+}
+
+export const Error: StoryObj<NoticeProps> = {
+    args: {
+        notice: 'This is an error notice. Something went wrong!',
+        variant: 'error'
+    }
+}

package/src/components/Notice/Notice.tsx

@@ -0,0 +1,41 @@
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import { VariantProps } from "class-variance-authority";
+import { noticeStyles } from "./styles/notice.styles";
+import { Typography } from "../Typography/Typography";
+import { Exclamationicon } from "./ExclamationIcon";
+
+export type NoticeProps = VariantProps<typeof noticeStyles> & {
+  notice?: string;
+  noticeTitle?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const Notice = ({
+  variant = "warning",
+  notice,
+  noticeTitle,
+}: NoticeProps) => {
+  return (
+    <div className={`${noticeStyles({ variant: variant })}`}>
+      <section className="flex items-center space-x-2">
+        {variant !== 'default' && (
+            <Exclamationicon variant={variant ?? 'warning'} />
+        )}
+        <div className="flex flex-col">
+          {noticeTitle && (
+            <Typography element="h1" variant="primary" size="xl">
+              {noticeTitle}
+            </Typography>
+          )}
+          {notice && (
+            <Typography element="p" variant="primary">
+              {notice}
+            </Typography>
+          )}
+        </div>
+      </section>
+      <XMarkIcon width={32} height={32} />
+    </div>
+  );
+};
+
+export { Notice };

package/src/components/Notice/styles/notice.styles.ts

@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+export const noticeStyles = cva('flex items-center justify-between rounded-md w-1/2 px-sm py-xs', {
+    variants: {
+        variant: {
+            warning: 'bg-warning',
+            error: 'bg-error',
+            default: 'bg-disabled',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    }
+})

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { useState } from "react";
+import {
+  Switch as HeadlessSwitch,
+  type SwitchProps as HeadlessSwitchProps,
+} from "@headlessui/react";
+import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+
+export type SwitchProps = {
+  defaultEnable?: boolean;
+  variant?: "common" | "contract";
+  disabled?: boolean;
+  onChange?: (enabled: boolean) => void;
+};
+
+const Switch = ({
+  defaultEnable,
+  variant = "common",
+  disabled,
+  onChange,
+  ...rest
+}: SwitchProps) => {
+  const [enabled, setEnabled] = useState(defaultEnable);
+
+  const toggleSwitch = () => {
+    const newState = !enabled;
+    setEnabled(newState);
+    onChange?.(newState);
+  };
+
+  return (
+    <HeadlessSwitch
+      checked={enabled}
+      onChange={toggleSwitch}
+      disabled={disabled}
+      {...rest}
+    >
+      {variant === "common" ? (
+        <span />
+      ) : (
+        <span>
+          {enabled ? (
+            <CheckIcon aria-disabled={disabled} />
+          ) : (
+            <XMarkIcon aria-disabled={disabled} />
+          )}
+        </span>
+      )}
+    </HeadlessSwitch>
+  );
+};
+
+export { Switch };

package/src/components/Switch/styles/switch.styles.ts

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority";
+
+export const switchStyles = cva('outline-none relative inline-flex h-6 w-16 items-center rounded-full disabled:bg-disabled', {
+    variants: {
+        variant: {
+            common: '',
+            contract: '',
+        },
+        enabled: {
+            true: '',
+            false: '',
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'common',
+            enabled: true, 
+            className: 'bg-primary'
+        },
+        {
+            variant: 'common',
+            enabled: false, 
+            className: 'bg-primary hover:"bg-red-500'
+        },
+        {
+            variant: 'contract',
+            enabled: true, 
+            className: 'bg-success',
+        },
+        {
+            variant: 'contract',
+            enabled: false, 
+            className: 'bg-error',
+        }
+    ],
+    defaultVariants: {
+        variant: 'common',
+        enabled: false,
+    }
+})

package/src/components/TextBlock/TextBlock.mdx

@@ -0,0 +1,18 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TextBlockStories from './TextBlock.stories'
+
+<Meta of={TextBlockStories} />
+
+### TextBlock 
+Este é um componente de Box que tem um titulo e subtitulo 
+
+### Default 
+<Canvas of={TextBlockStories.Default} />
+### Dark 
+<Canvas of={TextBlockStories.Dark} />
+### Outlined 
+<Canvas of={TextBlockStories.Outlined} />
+
+### Documentacao iterativa
+<Canvas of={TextBlockStories.Default} />
+<Controls of={TextBlockStories.Default} />

package/src/components/TextBlock/TextBlock.stories.ts

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import { TextBlock, TextBlockProps } from "./TextBlock";
+
+const meta: Meta<TextBlockProps> = {
+  title: "Atoms/TextBlock",
+  component: TextBlock,
+  args: {
+    variant: "default",
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "dark", "outlined"],
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<TextBlockProps> = {
+  args: {
+    title: "Default Text Block",
+    variant: "default",
+    variantContent: "primary",
+    children:
+      "This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant.",
+  },
+};
+
+export const Dark: StoryObj<TextBlockProps> = {
+  args: {
+    title: "Dark Text Block",
+    variant: "dark",
+    variantContent: "secondary",
+    children:
+      "This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant.",
+  },
+};
+
+export const Outlined: StoryObj<TextBlockProps> = {
+  args: {
+    title: "Outlined Text Block",
+    variant: "outlined",
+    variantContent: "primary",
+    children:
+      "This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant. This is a dark text block with primary content variant.",
+  },
+};

package/src/components/TextBlock/TextBlock.tsx

@@ -0,0 +1,39 @@
+import { VariantProps } from "class-variance-authority"
+import { Typography } from "../Typography/Typography"
+import { Box, BoxProps } from "../Box/Box"
+import { textBlockStyles } from "./styles/styles.text-block"
+
+type VariantContent = "primary" | "secondary" | "tertiary"
+
+export type TextBlockProps = VariantProps<typeof textBlockStyles> & {
+    title?: string,
+    variantContent: VariantContent
+} & React.HTMLAttributes<HTMLDivElement> & BoxProps
+
+const TextBlock = ({
+    title,
+    children,
+    variant,
+    variantContent,
+    ...rest
+}: TextBlockProps) => {
+    return (
+        <Box
+            variant={variant}
+            {...rest}
+        >
+            <div className="flex flex-col space-y-2">
+                {title && (
+                    <Typography
+                        element="h1"
+                        variant={variantContent}
+                        size="xl"
+                    >{title}</Typography>
+                )}
+                {children && <Typography element="p" variant={variantContent}>{children}</Typography>}
+            </div>
+        </Box>
+    )
+}
+
+export { TextBlock }

package/src/components/TextBlock/styles/styles.text-block.ts

@@ -0,0 +1,10 @@
+import { cva } from "class-variance-authority";
+
+export const textBlockStyles = cva('flex flex-col space-y-4', {
+    variants: {
+        type: {
+            light: 'bg-light text-text-primary',
+            dark: 'bg-dark text-white'
+        },
+    }
+})

package/src/components/Typography/Typography.mdx

@@ -0,0 +1,18 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as TypographyStories from './Typography.stories'
+
+<Meta of={TypographyStories} />
+
+# Typography 
+Este é um componente de tipografia, usado para exibir um texto na tela.
+
+### Primário
+<Canvas of={TypographyStories.Primary} />
+### Secundário 
+<Canvas of={TypographyStories.Secondary} />
+### Terciário
+<Canvas of={TypographyStories.Tertiary} />
+
+### Documentacao iterativa:
+<Canvas of={TypographyStories.Primary} />
+<Controls of={TypographyStories.Primary} />