Implementação de funcionalidades

package.json

@@ -11,16 +11,20 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "daisyui": "^5.0.43",
     "lucide-react": "^0.511.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.5.2",
     "react-router-dom": "^7.6.1",
     "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^4.1.8"
+    "tailwindcss": "^4.1.8",
+    "zod": "^3.25.67"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -35,6 +39,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.2.0",
+    "json-server": "1.0.0-beta.3",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.33.0",
     "vite": "^6.3.5"

src/App.tsx

@@ -1,13 +1,18 @@
-import {ProductionProvider} from "./contexts/production"
-import Routes from "./routes"
-import "./styles/global.css"
+import { Toast } from './components/atoms';
+import { ProductionProvider } from './contexts/production';
+import { ScenesProvider } from './contexts/scenes';
+import Routes from './routes';
+import './styles/global.css';
 
 function App() {
   return (
     <ProductionProvider>
-      <Routes />
+      <ScenesProvider>
+        <Routes />
+        <Toast />
+      </ScenesProvider>
     </ProductionProvider>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/atoms/Button/@types/index.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+
+import { type buttonVariants } from '../variants';
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}

src/components/atoms/Button/index.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+
+import { Button as HeadlessButton } from '@headlessui/react';
+
+import { cn } from '../../../utils/cn';
+import { type ButtonProps } from './@types';
+import { buttonVariants } from './variants';
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? HeadlessButton : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export { Button };

src/components/button/index.tsx → src/components/atoms/Button/variants.ts

@@ -1,12 +1,7 @@
-import {forwardRef} from 'react';
+import { cva } from 'class-variance-authority';
 
-import {Button as HeadlessButton} from '@headlessui/react';
-import {type VariantProps, cva} from 'class-variance-authority';
-
-import {cn} from '../../utils/cn';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
   {
     variants: {
       variant: {
@@ -28,22 +23,5 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
-);
-
-interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps {
-  asChild?: boolean;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? HeadlessButton : 'button';
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-    );
   },
 );
-
-Button.displayName = 'Button';
-
-export { Button };

src/components/atoms/Input/@types/index.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+
+import { type inputVariants } from '../variants';
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  error?: boolean;
+}

src/components/atoms/Input/index.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../../utils/cn';
+import { type InputProps } from './@types';
+
+const inputVariants = cva(
+  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      inputSize: {
+        default: 'h-10',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'default',
+    },
+  },
+);
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, inputSize, error, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(inputVariants({ variant: error ? 'error' : variant, inputSize, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';
+
+export { Input };

src/components/atoms/Input/variants.ts

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export const inputVariants = cva(
+  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      inputSize: {
+        default: 'h-10',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'default',
+    },
+  },
+);

src/components/title/index.tsx → src/components/atoms/Title/index.tsx

@@ -1,9 +1,9 @@
-import { useProduction } from '../../hooks/useProduction';
+import { useProduction } from '../../../hooks/useProduction';
 
 const Title = () => {
   const { selectedProduction } = useProduction();
 
   return <h1 className='text-2xl font-bold text-primary'>{selectedProduction?.name}</h1>;
 };
 
-export default Title;
+export { Title };

src/components/atoms/Toast/index.tsx

@@ -0,0 +1,28 @@
+import { Toaster } from 'react-hot-toast';
+
+export function Toast() {
+  return (
+    <Toaster
+      position='top-right'
+      toastOptions={{
+        duration: 3000,
+        style: {
+          background: '#333',
+          color: '#fff',
+        },
+        success: {
+          duration: 3000,
+          style: {
+            background: '#22c55e',
+          },
+        },
+        error: {
+          duration: 4000,
+          style: {
+            background: '#ef4444',
+          },
+        },
+      }}
+    />
+  );
+}

src/components/atoms/index.ts

@@ -0,0 +1,6 @@
+import { Button } from './Button';
+import { Input } from './Input';
+import { Title } from './Title';
+import { Toast } from './Toast';
+
+export { Input, Title, Toast, Button };