@phsa.tec/design-system-react 0.1.6 → 0.1.9

package/src/components/dataDisplay/Table/custom/CustomTable/data-table.tsx

@@ -1,145 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  TableState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../../../../components/ui/table";
-
-import { DataTablePagination } from "./data-table-pagination";
-import { DataTableToolbar } from "./data-table-toolbar";
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  callback?: (data: TableState) => void;
-  renderToolbar?: (table: any) => React.ReactNode;
-  renderPagination?: (table: any) => React.ReactNode;
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  callback = () => {},
-  renderToolbar = () => null,
-  renderPagination = () => null,
-}: DataTableProps<TData, TValue>) {
-  const [rowSelection, setRowSelection] = useState({});
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    manualPagination: true,
-    manualSorting: true,
-    manualFiltering: true,
-  });
-
-  const {
-    pagination,
-    sorting: tableSorting,
-    columnFilters: tableFilters,
-  } = table.getState();
-
-  useEffect(() => {
-    callback(table.getState());
-  }, [pagination, tableSorting, tableFilters]);
-
-  return (
-    <div className="space-y-4">
-      {/* <DataTableToolbar table={table} /> */}
-      {renderToolbar(table)}
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id} colSpan={header.colSpan}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  Sem resultados.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      {renderPagination(table)}
-      {/* <DataTablePagination table={table} /> */}
-    </div>
-  );
-}

package/src/components/dataDisplay/Table/custom/CustomTable/data.ts

@@ -1,71 +0,0 @@
-import {
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowUpIcon,
-  CheckCircledIcon,
-  CircleIcon,
-  CrossCircledIcon,
-  QuestionMarkCircledIcon,
-  StopwatchIcon,
-} from "@radix-ui/react-icons";
-
-export const labels = [
-  {
-    value: "bug",
-    label: "Bug",
-  },
-  {
-    value: "feature",
-    label: "Feature",
-  },
-  {
-    value: "documentation",
-    label: "Documentation",
-  },
-];
-
-export const statuses = [
-  {
-    value: "backlog",
-    label: "Backlog",
-    icon: QuestionMarkCircledIcon,
-  },
-  {
-    value: "todo",
-    label: "Todo",
-    icon: CircleIcon,
-  },
-  {
-    value: "in progress",
-    label: "In Progress",
-    icon: StopwatchIcon,
-  },
-  {
-    value: "done",
-    label: "Done",
-    icon: CheckCircledIcon,
-  },
-  {
-    value: "canceled",
-    label: "Canceled",
-    icon: CrossCircledIcon,
-  },
-];
-
-export const priorities = [
-  {
-    label: "Low",
-    value: "low",
-    icon: ArrowDownIcon,
-  },
-  {
-    label: "Medium",
-    value: "medium",
-    icon: ArrowRightIcon,
-  },
-  {
-    label: "High",
-    value: "high",
-    icon: ArrowUpIcon,
-  },
-];

package/src/components/dataDisplay/Table/custom/CustomTable/index.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { DataTable } from "./data-table";
-export { DataTableColumnHeader } from "./data-table-column-header";
-export { DataTableRowActions } from "./data-table-row-actions";
-export { DataTablePagination } from "./data-table-pagination";
-export { DataTableToolbar } from "./data-table-toolbar";
-
-import { ColumnDef, TableState } from "@tanstack/react-table";
-
-export type CustomTableProps<TData, TValue> = {
-  data: TData[];
-  columns: ColumnDef<TData, TValue>[];
-  callback?: (data: TableState) => void;
-  renderToolbar?: (table: any) => React.ReactNode;
-  renderPagination?: (table: any) => React.ReactNode;
-};
-
-export function CustomTable<TData, TValue>({
-  data,
-  columns,
-  callback = () => {},
-  renderPagination = () => null,
-  renderToolbar = () => null,
-}: CustomTableProps<TData, TValue>) {
-  return (
-    <DataTable
-      columns={columns}
-      data={data}
-      callback={callback}
-      renderPagination={renderPagination}
-      renderToolbar={renderToolbar}
-    />
-  );
-}

package/src/components/dataDisplay/Table/custom/CustomTable/schema.ts

@@ -1,11 +0,0 @@
-import { z } from "zod";
-
-export const taskSchema = z.object({
-  id: z.string(),
-  title: z.string(),
-  status: z.string(),
-  label: z.string(),
-  priority: z.string(),
-});
-
-export type Task = z.infer<typeof taskSchema>;

package/src/components/dataDisplay/Table/index.ts

@@ -1,2 +0,0 @@
-export * from "./components/DynamicTable";
-export * from "./types";

package/src/components/dataDisplay/Table/table.stories.tsx

@@ -1,147 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Table } from "./Table";
-import { ColumnDef } from "@tanstack/react-table";
-
-const meta: Meta<typeof Table> = {
-  title: "DataDisplay/Table",
-  component: Table,
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Table<User>>;
-
-type User = {
-  id: number;
-  name: string;
-  email: string;
-  role: string;
-};
-
-const mockData: User[] = [
-  {
-    id: 1,
-    name: "John Doe",
-    email: "john@example.com",
-    role: "Admin",
-  },
-  {
-    id: 2,
-    name: "Jane Smith",
-    email: "jane@example.com",
-    role: "User",
-  },
-  {
-    id: 3,
-    name: "Bob Johnson",
-    email: "bob@example.com",
-    role: "Editor",
-  },
-  {
-    id: 4,
-    name: "Alice Brown",
-    email: "alice@example.com",
-    role: "User",
-  },
-  {
-    id: 5,
-    name: "Charlie Wilson",
-    email: "charlie@example.com",
-    role: "Editor",
-  },
-  {
-    id: 6,
-    name: "Diana Miller",
-    email: "diana@example.com",
-    role: "User",
-  },
-];
-
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: "id",
-    header: "ID",
-    enableSorting: true,
-  },
-  {
-    accessorKey: "name",
-    header: "Name",
-    enableSorting: true,
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-    enableSorting: true,
-  },
-  {
-    accessorKey: "role",
-    header: "Role",
-  },
-];
-
-export const Default: Story = {
-  args: {
-    data: mockData,
-    columns: columns,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 5,
-    },
-    onPaginationChange: (pagination) => {
-      console.log("Page changed:", {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-      });
-    },
-  },
-};
-
-export const SmallPageSize: Story = {
-  args: {
-    data: mockData,
-    columns: columns,
-    pagination: {
-      pageIndex: 0,
-      pageSize: 3,
-    },
-    onPaginationChange: (pagination) => {
-      console.log("Page changed:", {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-      });
-    },
-  },
-};
-
-export const StartingFromPage2: Story = {
-  args: {
-    data: mockData,
-    columns: columns,
-    pagination: {
-      pageIndex: 1, // Starts from second page
-      pageSize: 3,
-    },
-    onPaginationChange: (pagination) => {
-      console.log("Page changed:", {
-        pageIndex: pagination.pageIndex,
-        pageSize: pagination.pageSize,
-      });
-    },
-  },
-};
-
-export const EmptyTable: Story = {
-  args: {
-    data: [],
-    columns: columns,
-  },
-};
-
-export const SingleRow: Story = {
-  args: {
-    data: [mockData[0]],
-    columns: columns,
-  },
-};

package/src/components/dataDisplay/Table/types.ts

@@ -1,15 +0,0 @@
-export interface Column<T> {
-  header: string;
-  accessorKey: keyof T;
-  cell?: (row: T) => React.ReactNode;
-  sortable?: boolean;
-  filterable?: boolean;
-}
-
-export interface TableProps<T> {
-  data: T[];
-  columns: Column<T>[];
-  className?: string;
-  filters?: React.ReactNode;
-  onSort?: (field: keyof T, direction: "asc" | "desc") => void;
-}

package/src/components/dataDisplay/Tabs/Tabs.stories.tsx

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-
-import { Tabs } from "./Tabs";
-
-const meta = {
-  title: "DataDisplay/Tabs",
-  component: Tabs,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    data: [
-      {
-        label: "Tab 1",
-        value: "tab1",
-        content: <div>Tab 1 content</div>,
-      },
-      {
-        label: "Tab 2",
-        value: "tab2",
-        content: <div>Tab 2 content</div>,
-      },
-    ],
-    defaultValue: "tab1",
-    onSelectTab: (value) => console.log(value),
-  },
-};

package/src/components/dataDisplay/Tabs/Tabs.tsx

@@ -1,53 +0,0 @@
-import {
-  Tabs as TabsShadcn,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../../components/ui/tabs";
-import { useCallback } from "react";
-
-export type TabsProps = {
-  data: {
-    label: string;
-    value: string;
-    content: JSX.Element;
-  }[];
-  defaultValue: string;
-  className?: string;
-  onSelectTab?: (value: string) => void;
-  value?: string;
-};
-
-export function Tabs({
-  data,
-  className,
-  value,
-  onSelectTab = () => {},
-}: TabsProps) {
-  const renderTabsTrigger = useCallback(() => {
-    return data.map(({ label, value }, index) => (
-      <TabsTrigger key={index} value={value} onClick={() => onSelectTab(value)}>
-        {label}
-      </TabsTrigger>
-    ));
-  }, [data, onSelectTab]);
-
-  const renderTabsContent = useCallback(() => {
-    return data.map(({ value, content }, index) => (
-      <TabsContent key={index} value={value}>
-        {content}
-      </TabsContent>
-    ));
-  }, [data]);
-
-  return (
-    <TabsShadcn defaultValue={value} className={className}>
-      {data?.length && (
-        <TabsList className="grid w-full grid-cols-2">
-          {renderTabsTrigger()}
-        </TabsList>
-      )}
-      {data?.length && renderTabsContent()}
-    </TabsShadcn>
-  );
-}

package/src/components/dataDisplay/Tabs/index.ts

@@ -1 +0,0 @@
-export * from "./Tabs";

package/src/components/dataDisplay/Text/Text.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { Text } from "./Text";
-
-const meta: Meta<typeof Text> = {
-  title: "DataDisplay/Text",
-  component: Text,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["display", "title", "subtitle", "body", "caption", "muted"],
-    },
-    align: {
-      control: "select",
-      options: ["left", "center", "right", "justify"],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Text>;
-
-export const Display: Story = {
-  args: {
-    variant: "display",
-    children: "Cabeçalho Principal (Display)",
-  },
-};
-
-export const Title: Story = {
-  args: {
-    variant: "title",
-    children: "Título da Seção",
-  },
-};
-
-export const Subtitle: Story = {
-  args: {
-    variant: "subtitle",
-    children: "Subtítulo explicativo",
-  },
-};
-
-export const Normal: Story = {
-  args: {
-    variant: "normal",
-    children: "Texto de corpo padrão",
-  },
-};
-
-export const Caption: Story = {
-  args: {
-    variant: "caption",
-    children: "Texto de legenda",
-  },
-};
-
-export const Muted: Story = {
-  args: {
-    variant: "muted",
-    children: "Texto desativado ou informativo",
-  },
-};

package/src/components/dataDisplay/Text/Text.tsx

@@ -1,56 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../..//lib/utils";
-
-// Definição das variantes com pesos adequados
-const textVariants = cva("", {
-  variants: {
-    variant: {
-      display: "text-5xl font-extrabold tracking-tight",
-      title: "text-3xl font-bold tracking-tight",
-      subtitle: "text-2xl font-semibold",
-      normal: "text-base font-normal",
-      caption: "text-sm font-medium",
-      muted: "text-sm font-normal text-muted-foreground",
-    },
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right",
-      justify: "text-justify",
-    },
-  },
-  defaultVariants: {
-    variant: "normal",
-    align: "left",
-  },
-});
-
-// Mapeia variantes para as tags HTML corretas
-const tagMap = {
-  display: "h1",
-  title: "h2",
-  subtitle: "h3",
-  normal: "p",
-  caption: "small",
-  muted: "p",
-} as const;
-
-type TextProps = VariantProps<typeof textVariants> & {
-  className?: string;
-  children: React.ReactNode;
-};
-
-export function Text({
-  variant = "normal",
-  align,
-  className,
-  children,
-}: TextProps) {
-  const Tag = tagMap[variant || "normal"] || "p";
-
-  return (
-    <Tag className={cn(textVariants({ variant, align }), className)}>
-      {children}
-    </Tag>
-  );
-}

package/src/components/dataDisplay/Text/index.ts

@@ -1 +0,0 @@
-export * from "./Text";

package/src/components/dataDisplay/index.ts

@@ -1,8 +0,0 @@
-export * from "./Table";
-export * from "./Badge";
-export * from "./Icon";
-export * from "./Card";
-export * from "./Avatar";
-export * from "./DropDownMenu";
-export * from "./DataPairList";
-export * from "./Text";