From a0849b192b2ed987033fbcb4189359b9c6a96236 Mon Sep 17 00:00:00 2001 From: Renato Teixeira Date: Sun, 29 Mar 2026 22:47:38 -0300 Subject: [PATCH 1/8] feat: add status, hover, and placeholder color variables to light and dark themes --- src/styles/tailwind.css | 9 +++++++++ src/styles/themes/dark.css | 25 +++++++++++++++++-------- src/styles/themes/light.css | 17 +++++++++++++---- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 4e65143..15f57f6 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -1,6 +1,8 @@ @theme { --color-background: var(--background); + --color-background-hover: var(--background-hover); --color-foreground: var(--foreground); + --color-placeholder: var(--placeholder); --color-card: var(--card); --color-card-foreground: var(--card-foreground); @@ -18,6 +20,7 @@ --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); + --color-secondary-hover: var(--secondary-hover); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); @@ -39,4 +42,10 @@ --color-error-text: var(--error-text); --color-ring: var(--ring); + + --color-status-green: var(--status-green); + --color-status-green-text: var(--status-green-text); + + --color-status-red: var(--status-red); + --color-status-red-text: var(--status-red-text); } diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css index 9f65ae8..f845a1e 100644 --- a/src/styles/themes/dark.css +++ b/src/styles/themes/dark.css @@ -1,6 +1,8 @@ .dark { --background: #020617; + --background-hover: #0f172a; --foreground: #f8fafc; + --placeholder: #334155; --card: #0f172a; --card-foreground: #f8fafc; @@ -18,6 +20,7 @@ --secondary: #1e293b; --secondary-foreground: #f8fafc; + --secondary-hover: #0f172a; --accent: #1e3a8a; --accent-foreground: #bfdbfe; @@ -26,17 +29,23 @@ --destructive-foreground: #fafafa; --destructive-hover: #b91c1c; - --success: #d1fae5; - --success-text: #065f46; + --success: #065f46; + --success-text: #bbf7d0; - --warning: #fef3c7; - --warning-text: #92400e; + --warning: #a16207; + --warning-text: #fef08a; - --info: #e0f2fe; - --info-text: #075985; + --info: #0369a1; + --info-text: #bae6fd; - --error: #fee2e2; - --error-text: #991b1b; + --error: #b91c1c; + --error-text: #fecaca; --ring: #3b82f6; + + --status-green: #bbf7d0; + --status-green-text: #15803d; + + --status-red: #fecaca; + --status-red-text: #b91c1c; } diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css index 8582f03..c9afb1a 100644 --- a/src/styles/themes/light.css +++ b/src/styles/themes/light.css @@ -1,6 +1,8 @@ :root { --background: #eff6ff; + --background-hover: #dbeafe; --foreground: #0f172a; + --placeholder: #cbd5e1; --card: #fafafa; --card-foreground: #0f172a; @@ -18,6 +20,7 @@ --secondary: #dbeafe; --secondary-foreground: #172554; + --secondary-hover: #bfdbfe; --accent: #eff6ff; --accent-foreground: #1e40af; @@ -26,11 +29,11 @@ --destructive-foreground: #fafafa; --destructive-hover: #f87171; - --success: #d1fae5; - --success-text: #065f46; + --success: #dcfce7; + --success-text: #166534; - --warning: #fef3c7; - --warning-text: #92400e; + --warning: #fef9c3; + --warning-text: #854d0e; --info: #e0f2fe; --info-text: #075985; @@ -39,4 +42,10 @@ --error-text: #991b1b; --ring: #3b82f6; + + --status-green: #dcfce7; + --status-green-text: #166534; + + --status-red: #fee2e2; + --status-red-text: #991b1b; } From 5272f08144209d44446643ba9747b3833863668e Mon Sep 17 00:00:00 2001 From: Renato Teixeira Date: Sun, 29 Mar 2026 22:48:01 -0300 Subject: [PATCH 2/8] refactor: update Button hover styles to use new hover color variables --- src/shared/components/Button/Button.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/shared/components/Button/Button.styles.ts b/src/shared/components/Button/Button.styles.ts index 758d62e..5c8a486 100644 --- a/src/shared/components/Button/Button.styles.ts +++ b/src/shared/components/Button/Button.styles.ts @@ -6,9 +6,9 @@ const defaultClasses = clsx( ); const variantClasses = { - primary: "bg-primary text-primary-foreground hover:bg-primary/80", - secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70", - danger: "bg-destructive text-destructive-foreground hover:bg-destructive/80", + primary: "bg-primary text-primary-foreground hover:bg-primary-hover", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover", + danger: "bg-destructive text-destructive-foreground hover:bg-destructive-hover", }; const disabledClasses = "cursor-not-allowed opacity-50"; From 02016782722b4da561983c278e77059dfc453be0 Mon Sep 17 00:00:00 2001 From: Renato Teixeira Date: Sun, 29 Mar 2026 22:48:24 -0300 Subject: [PATCH 3/8] refactor: generalize OrdersChart to Chart with configurable props and types --- .../components/Chart/Chart.tsx} | 42 ++++++------------- src/shared/components/Chart/Chart.types.ts | 10 +++++ src/shared/components/Chart/index.ts | 1 + 3 files changed, 24 insertions(+), 29 deletions(-) rename src/{modules/dashboard/components/OrdersChart.tsx => shared/components/Chart/Chart.tsx} (68%) create mode 100644 src/shared/components/Chart/Chart.types.ts create mode 100644 src/shared/components/Chart/index.ts diff --git a/src/modules/dashboard/components/OrdersChart.tsx b/src/shared/components/Chart/Chart.tsx similarity index 68% rename from src/modules/dashboard/components/OrdersChart.tsx rename to src/shared/components/Chart/Chart.tsx index c96bcfc..de2cd24 100644 --- a/src/modules/dashboard/components/OrdersChart.tsx +++ b/src/shared/components/Chart/Chart.tsx @@ -1,29 +1,13 @@ +import type { ChartProps } from "./Chart.types"; import { useEffect, useRef } from "react"; import * as echarts from "echarts"; -type ChartData = { - month: string; - orders: number; -}; - -const data: ChartData[] = [ - { month: "Jan", orders: 12 }, - { month: "Feb", orders: 15 }, - { month: "Mar", orders: 18 }, - { month: "Apr", orders: 22 }, - { month: "May", orders: 28 }, - { month: "Jun", orders: 25 }, - { month: "Jul", orders: 30 }, - { month: "Aug", orders: 34 }, - { month: "Sep", orders: 29 }, - { month: "Oct", orders: 36 }, - { month: "Nov", orders: 41 }, - { month: "Dec", orders: 48 }, -]; - -export default function OrdersChart() { +export function Chart({ title, description, data }: ChartProps) { const chartRef = useRef(null); const chartInstance = useRef(null); + const theme = localStorage.getItem("theme"); + const chartLineColor = + theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "#334155" : "#cbd5e1"; useEffect(() => { if (!chartRef.current) return; @@ -43,14 +27,14 @@ export default function OrdersChart() { xAxis: { type: "category", - data: data.map((d) => d.month), + data: data.map((d) => d.xAxis), axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: true, lineStyle: { type: "dashed", - color: "#e5e7eb", + color: chartLineColor, }, }, }, @@ -63,14 +47,14 @@ export default function OrdersChart() { show: true, lineStyle: { type: "dashed", - color: "#e5e7eb", + color: chartLineColor, }, }, }, series: [ { - data: data.map((d) => d.orders), + data: data.map((d) => d.yAxis), type: "line", smooth: true, @@ -108,13 +92,13 @@ export default function OrdersChart() { resizeObserver.disconnect(); chartInstance.current?.dispose(); }; - }, []); + }, [chartLineColor, data]); return ( -
+
-

Orders per Month

- last 12 months +

{title}

+ {description}
diff --git a/src/shared/components/Chart/Chart.types.ts b/src/shared/components/Chart/Chart.types.ts new file mode 100644 index 0000000..594eb2e --- /dev/null +++ b/src/shared/components/Chart/Chart.types.ts @@ -0,0 +1,10 @@ +export type ChartData = { + xAxis: string; + yAxis: number; +}; + +export interface ChartProps { + title?: string; + description?: string; + data: ChartData[]; +} diff --git a/src/shared/components/Chart/index.ts b/src/shared/components/Chart/index.ts new file mode 100644 index 0000000..a5a8f85 --- /dev/null +++ b/src/shared/components/Chart/index.ts @@ -0,0 +1 @@ +export { Chart } from "./Chart"; From b2183b1377c7b06a72b20ec668bff6464dde64ab Mon Sep 17 00:00:00 2001 From: Renato Teixeira Date: Sun, 29 Mar 2026 22:48:37 -0300 Subject: [PATCH 4/8] refactor: update growthPositive and growthNegative styles to use status color variables --- src/shared/components/Card/Card.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/Card/Card.styles.ts b/src/shared/components/Card/Card.styles.ts index 18a3040..17d4537 100644 --- a/src/shared/components/Card/Card.styles.ts +++ b/src/shared/components/Card/Card.styles.ts @@ -25,5 +25,5 @@ export const iconStyles = { ghost: "bg-transparent text-muted-foreground", }; -export const growthPositive = "bg-emerald-500/10 text-emerald-500"; -export const growthNegative = "bg-red-500/10 text-red-500"; +export const growthPositive = "bg-status-green text-status-green-text"; +export const growthNegative = "bg-status-red text-status-red-text"; From e602700130906538b5f07d86258ca698191dd204 Mon Sep 17 00:00:00 2001 From: Renato Teixeira Date: Sun, 29 Mar 2026 22:49:07 -0300 Subject: [PATCH 5/8] refactor: modularize RecentOrders and StatsSkeleton components, update DashboardPage to use new structure and props --- .../dashboard/components/DashboardHeader.tsx | 19 ------- .../RecentOrders/RecentOrder.types.ts | 13 +++++ .../{ => RecentOrders}/RecentOrders.tsx | 36 ++++--------- .../components/RecentOrders/index.ts | 1 + .../Skeleton}/StatsSkeleton.tsx | 2 +- .../dashboard/components/Skeleton/index.ts | 1 + src/modules/dashboard/pages/DashboardPage.tsx | 53 +++++++++++++------ .../skeleton/RecentOrdersSkeleton.tsx | 23 -------- 8 files changed, 63 insertions(+), 85 deletions(-) delete mode 100644 src/modules/dashboard/components/DashboardHeader.tsx create mode 100644 src/modules/dashboard/components/RecentOrders/RecentOrder.types.ts rename src/modules/dashboard/components/{ => RecentOrders}/RecentOrders.tsx (64%) create mode 100644 src/modules/dashboard/components/RecentOrders/index.ts rename src/modules/dashboard/{skeleton => components/Skeleton}/StatsSkeleton.tsx (91%) create mode 100644 src/modules/dashboard/components/Skeleton/index.ts delete mode 100644 src/modules/dashboard/skeleton/RecentOrdersSkeleton.tsx diff --git a/src/modules/dashboard/components/DashboardHeader.tsx b/src/modules/dashboard/components/DashboardHeader.tsx deleted file mode 100644 index 2c4e546..0000000 --- a/src/modules/dashboard/components/DashboardHeader.tsx +++ /dev/null @@ -1,19 +0,0 @@ -type DashboardHeaderProps = { - title?: string; - description?: string; -}; - -export default function DashboardHeader({ - title = "Dashboard", - description = "Overview of the operation", -}: DashboardHeaderProps) { - return ( -
-
-

{title}

- -

{description}

-
-
- ); -} diff --git a/src/modules/dashboard/components/RecentOrders/RecentOrder.types.ts b/src/modules/dashboard/components/RecentOrders/RecentOrder.types.ts new file mode 100644 index 0000000..393da36 --- /dev/null +++ b/src/modules/dashboard/components/RecentOrders/RecentOrder.types.ts @@ -0,0 +1,13 @@ +export type OrderStatus = "delivered" | "production" | "payment" | "review"; + +export interface Order { + id: string; + title: string; + client: string; + status: OrderStatus; +} + +export interface RecentOrdersProps { + loading?: boolean; + orders: Order[]; +} diff --git a/src/modules/dashboard/components/RecentOrders.tsx b/src/modules/dashboard/components/RecentOrders/RecentOrders.tsx similarity index 64% rename from src/modules/dashboard/components/RecentOrders.tsx rename to src/modules/dashboard/components/RecentOrders/RecentOrders.tsx index 2784a43..f1db14d 100644 --- a/src/modules/dashboard/components/RecentOrders.tsx +++ b/src/modules/dashboard/components/RecentOrders/RecentOrders.tsx @@ -1,31 +1,13 @@ -type OrderStatus = "Delivered" | "Production" | "Payment" | "Review"; +import type { RecentOrdersProps } from "./RecentOrder.types"; -type Order = { - id: string; - title: string; - client: string; - status: OrderStatus; +const statusStyles = { + delivered: "bg-emerald-500/15 text-emerald-600", + production: "bg-blue-500/15 text-blue-600", + payment: "bg-amber-500/15 text-amber-600", + review: "bg-purple-500/15 text-purple-600", }; -type RecentOrdersProps = { - loading?: boolean; -}; - -const orders: Order[] = [ - { id: "1", title: "TCC - Administração", client: "Ana Silva", status: "Delivered" }, - { id: "2", title: "Artigo Científico", client: "Carlos Souza", status: "Production" }, - { id: "3", title: "Monografia - Direito", client: "Marina Costa", status: "Payment" }, - { id: "4", title: "Revisão de Texto", client: "João Pereira", status: "Review" }, -]; - -const statusStyles: Record = { - Delivered: "bg-emerald-500/15 text-emerald-600", - Production: "bg-blue-500/15 text-blue-600", - Payment: "bg-amber-500/15 text-amber-600", - Review: "bg-purple-500/15 text-purple-600", -}; - -export default function RecentOrders({ loading = false }: RecentOrdersProps) { +export function RecentOrders({ loading = false, orders }: RecentOrdersProps) { return (
@@ -37,7 +19,7 @@ export default function RecentOrders({ loading = false }: RecentOrdersProps) { ) : ( <>

Recent Orders

- latest orders + Latest orders )}
@@ -66,7 +48,7 @@ export default function RecentOrders({ loading = false }: RecentOrdersProps) {
- + {order.status}
diff --git a/src/modules/dashboard/components/RecentOrders/index.ts b/src/modules/dashboard/components/RecentOrders/index.ts new file mode 100644 index 0000000..0b31026 --- /dev/null +++ b/src/modules/dashboard/components/RecentOrders/index.ts @@ -0,0 +1 @@ +export { RecentOrders } from "./RecentOrders"; diff --git a/src/modules/dashboard/skeleton/StatsSkeleton.tsx b/src/modules/dashboard/components/Skeleton/StatsSkeleton.tsx similarity index 91% rename from src/modules/dashboard/skeleton/StatsSkeleton.tsx rename to src/modules/dashboard/components/Skeleton/StatsSkeleton.tsx index 9c737d3..84e3b78 100644 --- a/src/modules/dashboard/skeleton/StatsSkeleton.tsx +++ b/src/modules/dashboard/components/Skeleton/StatsSkeleton.tsx @@ -1,4 +1,4 @@ -export default function StatsSkeleton() { +export function StatsSkeleton() { return (
diff --git a/src/modules/dashboard/components/Skeleton/index.ts b/src/modules/dashboard/components/Skeleton/index.ts new file mode 100644 index 0000000..e14e4d1 --- /dev/null +++ b/src/modules/dashboard/components/Skeleton/index.ts @@ -0,0 +1 @@ +export { StatsSkeleton } from "./StatsSkeleton"; diff --git a/src/modules/dashboard/pages/DashboardPage.tsx b/src/modules/dashboard/pages/DashboardPage.tsx index a4d77af..e041bcf 100644 --- a/src/modules/dashboard/pages/DashboardPage.tsx +++ b/src/modules/dashboard/pages/DashboardPage.tsx @@ -1,20 +1,39 @@ +import type { Order } from "../components/RecentOrders/RecentOrder.types"; import { Helmet } from "react-helmet-async"; import { FileText, Clock, CheckCircle, DollarSign } from "lucide-react"; - -import { SidebarMenu } from "@/shared/components/Sidebar/SidebarMenu/SidebarMenu"; +import { SidebarMenu } from "@/shared/components/Sidebar"; import { getPageTitle } from "@/shared/utils"; - -import DashboardHeader from "../components/DashboardHeader"; import { Card } from "@/shared/components/Card"; -import StatsSkeleton from "../skeleton/StatsSkeleton"; -import OrdersChart from "../components/OrdersChart"; -import RecentOrders from "../components/RecentOrders"; - +import { StatsSkeleton } from "../components/Skeleton"; +import { Chart } from "@/shared/components/Chart"; +import { RecentOrders } from "../components/RecentOrders"; import { useDashboardData } from "../hooks/useDashboardData"; export function DashboardPage() { const { stats, loading } = useDashboardData(); + const recentOrders: Order[] = [ + { id: "1", title: "TCC - Administração", client: "Ana Silva", status: "delivered" }, + { id: "2", title: "Artigo Científico", client: "Carlos Souza", status: "production" }, + { id: "3", title: "Monografia - Direito", client: "Marina Costa", status: "payment" }, + { id: "4", title: "Revisão de Texto", client: "João Pereira", status: "review" }, + ]; + + const chartData = [ + { xAxis: "Jan", yAxis: 12 }, + { xAxis: "Feb", yAxis: 15 }, + { xAxis: "Mar", yAxis: 18 }, + { xAxis: "Apr", yAxis: 22 }, + { xAxis: "May", yAxis: 28 }, + { xAxis: "Jun", yAxis: 25 }, + { xAxis: "Jul", yAxis: 30 }, + { xAxis: "Aug", yAxis: 34 }, + { xAxis: "Sep", yAxis: 29 }, + { xAxis: "Oct", yAxis: 36 }, + { xAxis: "Nov", yAxis: 41 }, + { xAxis: "Dec", yAxis: 48 }, + ]; + const statsCards = stats ? [ { @@ -50,11 +69,15 @@ export function DashboardPage() { -
-
- +
+
+
+

Dashboard

+ +

Overview of the operation

+
-
+
{loading ? Array.from({ length: 4 }).map((_, index) => ) : statsCards.map((card) => ( @@ -71,13 +94,13 @@ export function DashboardPage() {
{loading ? ( -
+
) : ( - + )}
- +
diff --git a/src/modules/dashboard/skeleton/RecentOrdersSkeleton.tsx b/src/modules/dashboard/skeleton/RecentOrdersSkeleton.tsx deleted file mode 100644 index ac9c140..0000000 --- a/src/modules/dashboard/skeleton/RecentOrdersSkeleton.tsx +++ /dev/null @@ -1,23 +0,0 @@ -export default function RecentOrdersSkeleton() { - return ( -
-
-
-
-
- -
- {Array.from({ length: 4 }).map((_, index) => ( -
-
-
-
-
- -
-
- ))} -
-
- ); -} From 047b0bb1dff66ab603bf1b64b97cbb081c76c68d Mon Sep 17 00:00:00 2001 From: Renato Teixeira Date: Sun, 29 Mar 2026 22:49:29 -0300 Subject: [PATCH 6/8] refactor: modularize Sidebar components, update exports and props for consistency --- .../Sidebar/SidebarItem/SidebarItem.tsx | 15 ++++----------- .../Sidebar/SidebarItem/SidebarItem.types.ts | 8 ++++++++ .../components/Sidebar/SidebarItem/index.ts | 1 + .../Sidebar/SidebarLayout/SidebarLayout.tsx | 8 ++++---- .../components/Sidebar/SidebarLayout/index.ts | 1 + .../Sidebar/SidebarMenu/SidebarMenu.tsx | 13 +++++-------- .../Sidebar/SidebarMenu/SidebarMenu.types.ts | 5 +++++ .../components/Sidebar/SidebarMenu/index.ts | 1 + .../SidebarMenuButton/SidebarMenuButton.tsx | 4 ++-- .../components/Sidebar/SidebarMenuButton/index.ts | 1 + .../components/Sidebar/SidebarProvider/index.ts | 2 ++ src/shared/components/Sidebar/index.ts | 2 +- 12 files changed, 35 insertions(+), 26 deletions(-) create mode 100644 src/shared/components/Sidebar/SidebarItem/SidebarItem.types.ts create mode 100644 src/shared/components/Sidebar/SidebarItem/index.ts create mode 100644 src/shared/components/Sidebar/SidebarLayout/index.ts create mode 100644 src/shared/components/Sidebar/SidebarMenu/SidebarMenu.types.ts create mode 100644 src/shared/components/Sidebar/SidebarMenu/index.ts create mode 100644 src/shared/components/Sidebar/SidebarMenuButton/index.ts create mode 100644 src/shared/components/Sidebar/SidebarProvider/index.ts diff --git a/src/shared/components/Sidebar/SidebarItem/SidebarItem.tsx b/src/shared/components/Sidebar/SidebarItem/SidebarItem.tsx index 9b3352d..23544bc 100644 --- a/src/shared/components/Sidebar/SidebarItem/SidebarItem.tsx +++ b/src/shared/components/Sidebar/SidebarItem/SidebarItem.tsx @@ -1,14 +1,7 @@ +import type { SidebarItemProps } from "./SidebarItem.types"; import { NavLink } from "react-router-dom"; -import type { LucideIcon } from "lucide-react"; -interface Props { - icon: LucideIcon; - label: string; - path: string; - collapsed: boolean; -} - -export default function SidebarItem({ icon: Icon, label, path, collapsed }: Props) { +export function SidebarItem({ icon: Icon, label, path, collapsed }: SidebarItemProps) { return ( `group relative flex items-center ${collapsed ? "justify-center" : "gap-3"} rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200 ${ isActive - ? "bg-card-foreground/10 text-primary shadow-sm" - : "text-muted-foreground hover:bg-card-foreground/10 hover:text-foreground" + ? "bg-card-hover text-primary shadow-border shadow-xs" + : "text-muted-foreground hover:bg-card-hover hover:text-foreground" } ` } > diff --git a/src/shared/components/Sidebar/SidebarItem/SidebarItem.types.ts b/src/shared/components/Sidebar/SidebarItem/SidebarItem.types.ts new file mode 100644 index 0000000..47304a8 --- /dev/null +++ b/src/shared/components/Sidebar/SidebarItem/SidebarItem.types.ts @@ -0,0 +1,8 @@ +import type { LucideIcon } from "lucide-react"; + +export interface SidebarItemProps { + icon: LucideIcon; + label: string; + path: string; + collapsed: boolean; +} diff --git a/src/shared/components/Sidebar/SidebarItem/index.ts b/src/shared/components/Sidebar/SidebarItem/index.ts new file mode 100644 index 0000000..de9055b --- /dev/null +++ b/src/shared/components/Sidebar/SidebarItem/index.ts @@ -0,0 +1 @@ +export { SidebarItem } from "./SidebarItem"; diff --git a/src/shared/components/Sidebar/SidebarLayout/SidebarLayout.tsx b/src/shared/components/Sidebar/SidebarLayout/SidebarLayout.tsx index 304cd0c..b17418f 100644 --- a/src/shared/components/Sidebar/SidebarLayout/SidebarLayout.tsx +++ b/src/shared/components/Sidebar/SidebarLayout/SidebarLayout.tsx @@ -1,11 +1,11 @@ import { useLogout } from "@/modules/auth/hooks"; import { ChevronLeft, X, LogOut } from "lucide-react"; import { sidebarItems } from "@/config/sidebarItems"; -import SidebarItem from "../SidebarItem/SidebarItem.tsx"; +import { SidebarItem } from "../SidebarItem"; import { useSidebar } from "@/shared/hooks/useSidebar.ts"; -import { Button } from "../../Button"; +import { Button } from "@/shared/components/Button"; -export default function SidebarLayout() { +export function SidebarLayout() { const { collapsed, openMobile, toggleCollapse, closeMobile } = useSidebar(); const { logout } = useLogout(); @@ -39,7 +39,7 @@ export default function SidebarLayout() { > diff --git a/src/shared/components/Sidebar/SidebarLayout/index.ts b/src/shared/components/Sidebar/SidebarLayout/index.ts new file mode 100644 index 0000000..d493549 --- /dev/null +++ b/src/shared/components/Sidebar/SidebarLayout/index.ts @@ -0,0 +1 @@ +export { SidebarLayout } from "./SidebarLayout"; diff --git a/src/shared/components/Sidebar/SidebarMenu/SidebarMenu.tsx b/src/shared/components/Sidebar/SidebarMenu/SidebarMenu.tsx index 26e77e4..484ccad 100644 --- a/src/shared/components/Sidebar/SidebarMenu/SidebarMenu.tsx +++ b/src/shared/components/Sidebar/SidebarMenu/SidebarMenu.tsx @@ -1,12 +1,9 @@ -import { SidebarProvider } from "@/shared/components/Sidebar/SidebarProvider/SidebarProvider"; -import SidebarLayout from "../SidebarLayout/SidebarLayout.tsx"; -import SidebarMenuButton from "@/shared/components/Sidebar/SidebarMenuButton/SidebarMenuButton"; +import type { SidebarMenuProps } from "./SidebarMenu.types"; +import { SidebarProvider } from "../SidebarProvider"; +import { SidebarLayout } from "../SidebarLayout"; +import { SidebarMenuButton } from "../SidebarMenuButton"; -interface Props { - children: React.ReactNode; -} - -export function SidebarMenu({ children }: Props) { +export function SidebarMenu({ children }: SidebarMenuProps) { return (
diff --git a/src/shared/components/Sidebar/SidebarMenu/SidebarMenu.types.ts b/src/shared/components/Sidebar/SidebarMenu/SidebarMenu.types.ts new file mode 100644 index 0000000..8507b98 --- /dev/null +++ b/src/shared/components/Sidebar/SidebarMenu/SidebarMenu.types.ts @@ -0,0 +1,5 @@ +import type { ReactNode } from "react"; + +export interface SidebarMenuProps { + children: ReactNode; +} diff --git a/src/shared/components/Sidebar/SidebarMenu/index.ts b/src/shared/components/Sidebar/SidebarMenu/index.ts new file mode 100644 index 0000000..629b623 --- /dev/null +++ b/src/shared/components/Sidebar/SidebarMenu/index.ts @@ -0,0 +1 @@ +export { SidebarMenu } from "./SidebarMenu"; diff --git a/src/shared/components/Sidebar/SidebarMenuButton/SidebarMenuButton.tsx b/src/shared/components/Sidebar/SidebarMenuButton/SidebarMenuButton.tsx index 90805f5..78cd9a1 100644 --- a/src/shared/components/Sidebar/SidebarMenuButton/SidebarMenuButton.tsx +++ b/src/shared/components/Sidebar/SidebarMenuButton/SidebarMenuButton.tsx @@ -1,13 +1,13 @@ import { Menu } from "lucide-react"; import { useSidebar } from "@/shared/hooks/useSidebar"; -export default function SidebarMenuButton() { +export function SidebarMenuButton() { const { toggleMobile, openMobile } = useSidebar(); return ( diff --git a/src/shared/components/Sidebar/SidebarMenuButton/index.ts b/src/shared/components/Sidebar/SidebarMenuButton/index.ts new file mode 100644 index 0000000..449c7b3 --- /dev/null +++ b/src/shared/components/Sidebar/SidebarMenuButton/index.ts @@ -0,0 +1 @@ +export { SidebarMenuButton } from "./SidebarMenuButton"; diff --git a/src/shared/components/Sidebar/SidebarProvider/index.ts b/src/shared/components/Sidebar/SidebarProvider/index.ts new file mode 100644 index 0000000..ee5ddfb --- /dev/null +++ b/src/shared/components/Sidebar/SidebarProvider/index.ts @@ -0,0 +1,2 @@ +export { SidebarProvider } from "./SidebarProvider"; +export { SidebarContext } from "./SidebarContext"; diff --git a/src/shared/components/Sidebar/index.ts b/src/shared/components/Sidebar/index.ts index 531b05e..629b623 100644 --- a/src/shared/components/Sidebar/index.ts +++ b/src/shared/components/Sidebar/index.ts @@ -1 +1 @@ -export { SidebarMenu } from "./SidebarMenu/SidebarMenu"; +export { SidebarMenu } from "./SidebarMenu"; From aa68f7c97c08d238110ce26d8d595868401dad75 Mon Sep 17 00:00:00 2001 From: Renato Teixeira Date: Sun, 29 Mar 2026 22:49:41 -0300 Subject: [PATCH 7/8] refactor: update InputField to support bgTransparent prop, improve color and spacing consistency --- .../InputField/InputField.styles.ts | 12 +++++--- .../components/InputField/InputField.tsx | 28 ++++++++++++++----- .../components/InputField/InputField.types.ts | 1 + 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/shared/components/InputField/InputField.styles.ts b/src/shared/components/InputField/InputField.styles.ts index 93caf27..bcb8a2d 100644 --- a/src/shared/components/InputField/InputField.styles.ts +++ b/src/shared/components/InputField/InputField.styles.ts @@ -1,13 +1,13 @@ import clsx from "clsx"; const defaultClasses = clsx( - "w-full appearance-none rounded border py-2 leading-tight shadow", - "transition-all focus:outline-none" + "w-full appearance-none rounded border py-2 leading-tight shadow-xs shadow-border", + "transition-all focus:outline-none bg-card" ); const stateClasses = { default: clsx( - "border-input text-foreground placeholder:text-foreground/30", + "border-input text-foreground placeholder:text-placeholder", "focus:border-primary focus:ring focus:ring-ring" ), error: clsx( @@ -18,9 +18,12 @@ const stateClasses = { const disabledClasses = "cursor-not-allowed opacity-50"; +const bgClass = "bg-card"; + export function getInputFieldClasses( hasError: boolean, disabled: boolean, + bgTransparent: boolean, hasLeftAddon: boolean, hasRightAddon: boolean ): string { @@ -30,6 +33,7 @@ export function getInputFieldClasses( hasError && stateClasses["error"], hasLeftAddon ? "pl-10" : "pl-3", hasRightAddon ? "pr-10" : "pr-3", - disabled && disabledClasses + disabled && disabledClasses, + bgTransparent && bgClass ); } diff --git a/src/shared/components/InputField/InputField.tsx b/src/shared/components/InputField/InputField.tsx index 0fafa39..41df9c4 100644 --- a/src/shared/components/InputField/InputField.tsx +++ b/src/shared/components/InputField/InputField.tsx @@ -4,7 +4,18 @@ import { getInputFieldClasses } from "./InputField.styles"; export const InputField = forwardRef( ( - { label, showLabel = true, helperText, errorMessage, leftAddon, rightAddon, id: idProp, disabled = false, ...rest }, + { + label, + showLabel = true, + helperText, + errorMessage, + leftAddon, + rightAddon, + id: idProp, + disabled = false, + bgTransparent = false, + ...rest + }, ref ) => { const generatedId = useId(); @@ -13,12 +24,15 @@ export const InputField = forwardRef( return (
-