designer-system-agroe 0.0.0

package/src/stories/modais/index.tsx

@@ -0,0 +1,95 @@
+import type { ButtonHTMLAttributes, ComponentProps, HTMLAttributes } from 'react';
+import { Dialog } from 'radix-ui';
+import { cn } from '@/utils/cn';
+import styles from './modal.module.css';
+
+type ModalRootProps = ComponentProps<typeof Dialog.Root>;
+type ModalTriggerProps = ComponentProps<typeof Dialog.Trigger>;
+
+interface ModalContentProps extends ComponentProps<typeof Dialog.Content> {
+    showCloseButton?: boolean;
+}
+
+interface ModalSectionProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+
+interface ModalCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+}
+
+export function Modal(props: ModalRootProps) {
+    return <Dialog.Root {...props} />;
+}
+
+export function ModalTrigger({ className, children, ...props }: ModalTriggerProps) {
+    return (
+        <Dialog.Trigger className={className} {...props}>
+            {children}
+        </Dialog.Trigger>
+    );
+}
+
+export function ModalContent({ children, className, showCloseButton = true, ...props }: ModalContentProps) {
+    return (
+        <Dialog.Portal>
+            <Dialog.Overlay className={styles.overlay} />
+            <Dialog.Content className={cn(styles.content, className)} {...props}>
+                {children}
+                {showCloseButton ? (
+                    <Dialog.Close className={styles.iconButton} aria-label="Fechar modal">
+                        X
+                    </Dialog.Close>
+                ) : null}
+            </Dialog.Content>
+        </Dialog.Portal>
+    );
+}
+
+export function ModalHeader({ className, children, ...props }: ModalSectionProps) {
+    return (
+        <div className={cn(styles.header, className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+export function ModalBody({ className, children, ...props }: ModalSectionProps) {
+    return (
+        <div className={cn(styles.body, className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+export function ModalFooter({ className, children, ...props }: ModalSectionProps) {
+    return (
+        <div className={cn(styles.footer, className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+export function ModalTitle({ className, children, ...props }: ComponentProps<typeof Dialog.Title>) {
+    return (
+        <Dialog.Title className={cn(styles.title, className)} {...props}>
+            {children}
+        </Dialog.Title>
+    );
+}
+
+export function ModalDescription({ className, children, ...props }: ComponentProps<typeof Dialog.Description>) {
+    return (
+        <Dialog.Description className={cn(styles.description, className)} {...props}>
+            {children}
+        </Dialog.Description>
+    );
+}
+
+export function ModalClose({ className, children = 'Fechar', ...props }: ModalCloseProps) {
+    return (
+        <Dialog.Close className={cn(styles.closeButton, className)} {...props}>
+            {children}
+        </Dialog.Close>
+    );
+}

package/src/stories/modais/modal.module.css

@@ -0,0 +1,143 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(19, 28, 22, 0.58);
+	backdrop-filter: blur(4px);
+	animation: fadeIn 180ms ease-out;
+}
+
+.content {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: min(92vw, 560px);
+	max-height: min(85vh, 720px);
+	transform: translate(-50%, -50%);
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 28px;
+	border: 1px solid rgba(52, 58, 64, 0.12);
+	border-radius: 24px;
+	background: linear-gradient(180deg, #ffffff 0%, #f6f8f6 100%);
+	box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22);
+	color: var(--font-color);
+	overflow-y: auto;
+	animation: contentIn 220ms ease-out;
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding-right: 36px;
+}
+
+.title {
+	margin: 0;
+	font-size: 1.5rem;
+	font-weight: 700;
+	line-height: 1.2;
+	color: var(--color-primary);
+}
+
+.description {
+	margin: 0;
+	font-size: 0.98rem;
+	line-height: 1.6;
+	color: rgba(52, 58, 64, 0.76);
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	font-size: 0.98rem;
+	line-height: 1.7;
+	color: var(--font-color);
+}
+
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.closeButton,
+.iconButton {
+	border: 0;
+	cursor: pointer;
+	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+}
+
+.closeButton {
+	min-width: 112px;
+	padding: 12px 18px;
+	border-radius: 12px;
+	background: var(--color-secondary);
+	color: #ffffff;
+	font-weight: 600;
+}
+
+.closeButton:hover,
+.iconButton:hover {
+	transform: translateY(-1px);
+}
+
+.closeButton:hover {
+	box-shadow: 0 10px 24px rgba(32, 93, 46, 0.24);
+}
+
+.iconButton {
+	position: absolute;
+	top: 18px;
+	right: 18px;
+	width: 36px;
+	height: 36px;
+	border-radius: 999px;
+	background: rgba(52, 58, 64, 0.08);
+	color: var(--color-primary);
+	font-size: 0.95rem;
+	font-weight: 700;
+}
+
+.iconButton:hover {
+	background: rgba(52, 58, 64, 0.14);
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes contentIn {
+	from {
+		opacity: 0;
+		transform: translate(-50%, calc(-50% + 16px)) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+@media (max-width: 640px) {
+	.content {
+		width: calc(100vw - 24px);
+		padding: 22px 18px;
+		border-radius: 20px;
+	}
+
+	.footer {
+		flex-direction: column;
+	}
+
+	.closeButton {
+		width: 100%;
+	}
+}

package/src/stories/modais/modal.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../buttons';
+import {
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger,
+} from '.';
+
+const meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    defaultOpen: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultOpen: false,
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <ModalTrigger asChild>
+        <Button label="Abrir modal" onClick={() => undefined} />
+      </ModalTrigger>
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>Nova safra em analise</ModalTitle>
+          <ModalDescription>
+            Revise as informacoes consolidadas antes de confirmar a publicacao para o time comercial.
+          </ModalDescription>
+        </ModalHeader>
+        <ModalBody>
+          <p>Area estimada: 2.450 hectares.</p>
+          <p>Janela de plantio: 18 de marco a 07 de abril.</p>
+          <p>Responsavel: Time de planejamento agricola.</p>
+        </ModalBody>
+        <ModalFooter>
+          <ModalClose>Fechar</ModalClose>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  ),
+};
+
+export const Opened: Story = {
+  args: {
+    defaultOpen: true,
+  },
+  render: Default.render,
+};
+
+export const LongContent: Story = {
+  args: {
+    defaultOpen: true,
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <ModalTrigger asChild>
+        <Button label="Abrir modal" onClick={() => undefined} />
+      </ModalTrigger>
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>Resumo operacional da fazenda</ModalTitle>
+          <ModalDescription>
+            Conteudo extenso para validar espacamento, scroll interno e hierarquia visual do componente.
+          </ModalDescription>
+        </ModalHeader>
+        <ModalBody>
+          <p>A produtividade media projetada para o talhao norte subiu 8% apos a ultima rodada de irrigacao.</p>
+          <p>O custo logistico permanece dentro do limite previsto para o trimestre, com desvio inferior a 2,1%.</p>
+          <p>As equipes de campo reportaram estabilidade no cronograma de colheita e nenhuma intercorrencia critica.</p>
+          <p>Os indicadores de solo apontam necessidade de reforco nutricional em duas frentes especificas.</p>
+          <p>A validacao deste painel garante o envio do fechamento para as liderancas regionais.</p>
+        </ModalBody>
+        <ModalFooter>
+          <ModalClose>Entendi</ModalClose>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  ),
+};

package/src/stories/totalizadores/index.tsx

@@ -0,0 +1,36 @@
+import { cn } from "@/utils/cn"
+import styles from './totalizador.module.css'
+
+interface TotalizadorProps {
+    className?: string,
+    title: string
+    subtitle: string
+    description: string
+    variant?: 'success' | 'warning' | 'danger' | 'info' | 'details'
+    selected?: boolean
+    loading?: boolean
+    onClick?: () => void
+}
+
+export function Totalizador({
+    className,
+    title,
+    subtitle,
+    description,
+    variant = 'success',
+    selected = false,
+    loading = false,
+    onClick,
+}: TotalizadorProps) {
+    return (
+        <div
+            onClick={onClick}
+            className={cn(styles.totalizador, styles[variant], className)}
+            title={description}
+        >
+            <span>{title}</span>
+            {loading && <div>Carregando...</div>}
+            {!loading && <strong className={selected ? styles.selected : ''}>{subtitle}</strong>}
+        </div>
+    )
+}

package/src/stories/totalizadores/totalizador.module.css

@@ -0,0 +1,100 @@
+.totalizador {
+    width: 100%;
+    height: 60px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    display: flex;
+    box-shadow: var(--box-shadow);
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--background-totalizador);
+    border-left: 12px solid var(--color-success-totalizador);
+    cursor: pointer;
+    transition: all 0.3s ease-in-out !important;
+    color: var(--font-color);
+}
+
+.totalizador:hover {
+    box-shadow: none;
+    transform: scale(1.02);
+}
+
+.totalizador span {
+    font-size: 13px;
+    font-weight: 400;
+    margin: 5px 0 2px 0;
+    color: var(--font-color);
+}
+
+.totalizador strong {
+    font-size: 19px;
+    font-weight: 600;
+}
+
+.selected {
+    text-align: center;
+    border-radius: 8px;
+    color: white;
+    min-width: 140px;
+    height: 26px;
+}
+
+.success {
+    border-left-color: var(--color-success-totalizador);
+    color: var(--color-success-totalizador);
+}
+
+.success .selected {
+    background-color: var(--color-success-totalizador);
+}
+
+.warning {
+    border-left-color: var(--color-warning-totalizador);
+    color: var(--color-warning-totalizador);
+}
+
+.warning .selected {
+    background-color: var(--color-warning-totalizador);
+}
+
+.danger {
+    border-left-color: var(--color-danger-totalizador);
+    color: var(--color-danger-totalizador);
+}
+
+.danger .selected {
+    background-color: var(--color-danger-totalizador);
+}
+
+.info {
+    border-left-color: var(--color-info-totalizador);
+    color: var(--color-info-totalizador);
+}
+
+.info .selected {
+    background-color: var(--color-info-totalizador);
+}
+
+.details {
+    border-left-color: var(--color-details-totalizador);
+    color: var(--color-details-totalizador);
+}
+
+.details .selected {
+    background-color: var(--color-details-totalizador);
+}
+
+.loading {
+    width: 100%;
+    padding: 0 40px;
+}
+
+.skeleton {
+    width: 200px;
+    margin: 5px;
+    border-radius: 10px;
+}
+
+.minWidth {
+    min-width: 340px;
+}

package/src/stories/totalizadores/totalizador.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Totalizador } from '.';
+import styles from './totalizador.module.css';
+
+const meta = {
+	title: 'Components/Totalizador',
+	component: Totalizador,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+} satisfies Meta<typeof Totalizador>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		title: 'Total Geral',
+		subtitle: '10',
+		description: 'Total geral de vendas',
+		className: styles.minWidth,
+	},
+};
+
+export const Success: Story = {
+	args: {
+		title: 'Totalizador de Sucesso',
+		subtitle: '10',
+		description: 'Total de sucesso',
+		variant: 'success',
+		className: styles.minWidth,
+	},
+};
+
+export const Warning: Story = {
+	args: {
+		title: 'Totalizador de Aviso',
+		subtitle: '10',
+		description: 'Total de avisos',
+		variant: 'warning',
+		className: styles.minWidth,
+	},
+};
+
+export const Danger: Story = {
+	args: {
+		title: 'Totalizador de Erro',
+		subtitle: '10',
+		description: 'Total de erros',
+		variant: 'danger',
+		className: styles.minWidth,
+	},
+};
+
+export const Info: Story = {
+	args: {
+		title: 'Totalizador de Informação',
+		subtitle: '10',
+		description: 'Total de informações',
+		variant: 'info',
+		className: styles.minWidth,
+	},
+};
+
+export const Details: Story = {
+	args: {
+		title: 'Totalizador de Detalhes',
+		subtitle: '10',
+		description: 'Total de detalhes',
+		variant: 'details',
+		className: styles.minWidth,
+	},
+};
+
+export const Selected: Story = {
+	args: {
+		title: 'Totalizador Selecionado',
+		subtitle: '10',
+		description: 'Total selecionado',
+		selected: true,
+		variant: 'danger',
+		className: styles.minWidth,
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		title: 'Totalizador Carregando',
+		subtitle: '---',
+		description: 'Carregando dados',
+		loading: true,
+		variant: 'info',
+		className: styles.minWidth,
+	},
+};

package/src/utils/cn.tsx

@@ -0,0 +1,3 @@
+export function cn(...inputs: (string | undefined | null)[]): string {
+  return inputs.filter(Boolean).join(' ');
+}

package/tsconfig.app.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* alias */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["*"]
+    }
+  },
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,54 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'DesignSystemAgroe',
+      fileName: 'index',
+      formats: ['es', 'cjs']
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom']
+    }
+  },
+  test: {
+    projects: [{
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        },
+        setupFiles: ['.storybook/vitest.setup.ts']
+      }
+    }]
+  }
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />