@gyramais/gyra-design 0.1.0

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

@@ -0,0 +1,85 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Table } from "./Table";
+
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const meta: Meta<typeof Table> = {
+  title: "Library/Components/Table",
+  component: Table,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    columns: [{
+      key: 'fullName',
+      header: 'Nome',
+      render: (value) => `Sr. ${value}`,
+      align: 'left',
+    }, {
+      key: 'email',
+      header: 'E-mail',
+    }, {
+      key: 'age',
+      header: 'Idade',
+      render: (value) => `${value} anos`,
+    }, {
+      key: 'options',
+      header: 'Ações',
+      render: () => (
+        <div className="flex justify-center">
+          <SettingsIcon className="text-[var(--primary-button-color)]" />
+        </div>
+      ),
+    }],
+    data: [{
+      fullName: 'Dayvid',
+      email: 'dmoreira@gyramais.com',
+      age: 24,
+    }, {
+      fullName: 'Bruna',
+      email: 'breis@gyramais.com',
+      age: 24,
+    }],
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    id: '',
+    className: '',
+    columns: [{
+      key: 'fullName',
+      header: 'Nome',
+      render: (value) => `Sr. ${value}`,
+      align: 'left',
+    }, {
+      key: 'email',
+      header: 'E-mail',
+    }, {
+      key: 'age',
+      header: 'Idade',
+      render: (value) => `${value} anos`,
+    }, {
+      key: 'options',
+      header: 'Ações',
+      render: () => (
+        <div className="flex justify-center">
+          <SettingsIcon className="text-[var(--primary-button-color)]" />
+        </div>
+      ),
+    }],
+    empty: {
+      text: 'Sem dados para exibir',
+    },
+  },
+}

package/src/components/Table/Table.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import {
+  Table as PrimitiveTable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../shadcn/table";
+import { Row } from "../Row";
+import { Col } from "../Col";
+import UpcomingOutlinedIcon from '@mui/icons-material/UpcomingOutlined';
+
+type TableColumnProps = {
+  key: string;
+  header: string;
+  render?: (value: any, data: any) => React.ReactNode | string;
+  align?: 'left' | 'center' | 'right';
+}
+type TableProps = {
+  id?: string;
+  className?: string;
+  columns: Array<TableColumnProps>;
+  data: Array<any>;
+  empty?: {
+    icon?: React.ReactNode;
+    text?: string;
+  };
+}
+
+const Table = ({
+  id,
+  className,
+  columns = [],
+  data = [],
+  empty = {
+    icon: undefined,
+    text: 'Tabela vazia',
+  },
+}: TableProps) => {
+  const formattedData = useMemo(() => {
+    const columnsByKey = columns.reduce((acc: { [key: string]: TableColumnProps }, column) => {
+      const key = column.key;
+      acc[key] = column;
+
+      return acc;
+    }, {});
+    const keys = Object.keys(columnsByKey);
+
+    const temp = data.reduce((acc, item, index) => {
+      const cells: Array<React.ReactNode> = [];
+
+      keys.forEach((key) => {
+        const { render, align } = columnsByKey[key] || {};
+
+        cells.push(
+          <TableCell
+            key={`${key}-${JSON.stringify(item)}`}
+            className={`gyramais-table-cell gyramais-table-align-${align || 'center'}`}
+          >
+            {render ? render(item[key], item) : item[key]}
+          </TableCell>
+        )
+      })
+
+      acc.push(
+        <TableRow key={`${index}-${JSON.stringify(item)}`}>
+          {cells}
+        </TableRow>
+      )
+
+      return acc;
+    }, []);
+
+    return temp
+  }, [columns, data]);
+
+  return (
+    <div className="gyramais-table-container">
+      <PrimitiveTable
+        id={id}
+        className={classNames(
+          'gyramais-table',
+          className,
+        )}
+      >
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead
+                key={column.key}
+                className={`gyramais-table-head gyramais-table-align-${column.align || 'center'}`}
+              >
+                {column.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        
+        <TableBody className="gyramais-table-body">
+          {formattedData}
+        </TableBody>
+      </PrimitiveTable>
+
+      {data.length === 0 && (
+        <Row columns={1} gap={8} className="gyramais-table-empty-container">
+          <Col span={1} className="gyramais-table-empty-icon">
+            {empty.icon || (<UpcomingOutlinedIcon />)}
+          </Col>
+
+          <Col span={1} className="gyramais-table-empty-text">
+            {empty.text}
+          </Col>
+        </Row>
+      )}
+    </div>
+  );
+};
+
+export { Table };

package/src/components/Table/index.css

@@ -0,0 +1,74 @@
+.gyramais-table {
+  @apply
+    relative;
+}
+
+.gyramais-table .gyramais-table-head {
+  @apply
+    text-sm
+    font-medium
+    leading-[14px]
+    text-black;
+}
+.gyramais-table .gyramais-table-head:nth-child(1) {
+  @apply
+    pl-0;
+}
+.gyramais-table .gyramais-table-head:last-child {
+  @apply
+    pr-0;
+}
+
+.gyramais-table .gyramais-table-cell {
+  @apply
+    py-7
+    text-base
+    font-normal
+    leading-[19.2px]
+    text-[#626976];
+}
+.gyramais-table .gyramais-table-cell:nth-child(1) {
+  @apply
+    pl-0;
+}
+.gyramais-table .gyramais-table-cell:last-child {
+  @apply
+    pr-0;
+}
+
+.gyramais-table .gyramais-table-align-left {
+  @apply
+    text-left;
+}
+.gyramais-table .gyramais-table-align-center {
+  @apply
+    text-center;
+}
+.gyramais-table .gyramais-table-align-right {
+  @apply
+    text-right;
+}
+
+.gyramais-table-container .gyramais-table-empty-container {
+  @apply
+    py-4
+}
+.gyramais-table-container .gyramais-table-empty-icon {
+  @apply
+    flex
+    justify-center
+}
+.gyramais-table-container .gyramais-table-empty-icon svg {
+  @apply
+    text-[40px]
+    text-[#b8b8b8];
+}
+.gyramais-table-container .gyramais-table-empty-text {
+  @apply
+    flex
+    justify-center
+    text-black
+    text-sm
+    font-normal
+    leading-[22px];
+}

package/src/components/Table/index.ts

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

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "./Tabs";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Library/Components/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: 'padded',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    defaultKey: 'account',
+    tabs: [{
+      key: 'account',
+      title: 'Conta',
+      content: (
+        <div>
+          Conteúdo da janela de conta
+        </div>
+      )
+    }, {
+      key: 'business',
+      title: 'Empresa',
+      content: (
+        <div>
+          Conteúdo da janela de empresa
+        </div>
+      )
+    }, {
+      key: 'analysis',
+      title: 'Análises',
+      disabled: true,
+      content: (
+        <div>
+          Conteúdo da janela de análise
+        </div>
+      )
+    }],
+  },
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import { Tabs as PrimitiveTabs, TabsContent, TabsList, TabsTrigger } from "../../shadcn/tabs";
+
+type TabsProps = {
+  id?: string;
+  className?: string;
+  defaultKey?: string;
+  tabs: Array<{
+    key: string;
+    title: string | React.ReactNode;
+    disabled?: boolean;
+    content: React.ReactNode;
+  }>
+}
+
+const Tabs = ({
+  id,
+  className,
+  defaultKey,
+  tabs = [],
+}: TabsProps) => {
+  const {
+    titles,
+    contents,
+  } = useMemo(() => {
+    const titles = tabs.map((tab) => (
+      <TabsTrigger
+        key={`${tab.key}-tab`}
+        className="gyramais-tabs-tab"
+        value={tab.key}
+        disabled={tab.disabled}
+      >
+        {tab.title}
+      </TabsTrigger>
+    ))
+
+    const contents = tabs.map((tab) => (
+      <TabsContent
+        key={`${tab.key}-content`}
+        value={tab.key}
+        className="gyramais-tabs-content"
+      >
+        {tab.content}
+      </TabsContent>
+    ))
+
+    return {
+      titles,
+      contents,
+    }
+  }, [tabs]);
+
+  return (
+    <PrimitiveTabs
+      id={id}
+      defaultValue={defaultKey}
+      className={classNames(
+        'gyramais-tabs',
+        className,
+      )}
+    >
+      <div className="gyramais-tabs-tab-container">
+        <TabsList className="gyramais-tabs-tab-content">
+          {titles}
+        </TabsList>
+      </div>
+
+      {contents}
+    </PrimitiveTabs>
+  );
+};
+
+export { Tabs };

package/src/components/Tabs/index.css

@@ -0,0 +1,89 @@
+.gyramais-tabs {
+  @apply
+    w-full;
+}
+
+.gyramais-tabs .gyramais-tabs-tab-container {
+  @apply
+    overflow-x-auto;
+}
+.gyramais-tabs .gyramais-tabs-tab-container::-webkit-scrollbar {
+  @apply
+    w-[1px]
+    h-[1px];
+}
+.gyramais-tabs .gyramais-tabs-tab-container::-webkit-scrollbar-track {
+  @apply
+    bg-transparent;
+}
+.gyramais-tabs .gyramais-tabs-tab-container::-webkit-scrollbar-thumb {
+  @apply
+    bg-[var(--primary-button-color)]
+    rounded-[0.625rem]
+
+    md:bg-[#DCDCDC];
+  }
+.gyramais-tabs .gyramais-tabs-tab-container::-webkit-scrollbar-thumb:hover {
+  @apply
+    bg-[var(--primary-button-color)]
+    brightness-110;
+}
+
+
+.gyramais-tabs .gyramais-tabs-tab-content {
+  @apply
+    relative
+    h-fit
+    p-0;
+}
+
+.gyramais-tabs .gyramais-tabs-tab {
+  @apply
+    relative
+    p-0
+    pb-3
+    text-xs
+    font-bold
+    opacity-50
+    duration-200;
+}
+.gyramais-tabs .gyramais-tabs-tab[data-state="active"],
+.gyramais-tabs .gyramais-tabs-tab:hover {
+  @apply
+    opacity-100
+}
+.gyramais-tabs .gyramais-tabs-tab::before {
+  @apply
+    content-['']
+    absolute
+    w-full
+    h-[0px]
+    bottom-0
+    bg-[var(--primary-button-color)]
+    duration-200;
+}
+.gyramais-tabs .gyramais-tabs-tab[data-state="active"]::before,
+.gyramais-tabs .gyramais-tabs-tab:hover::before {
+  @apply
+    h-[3px]
+}
+.gyramais-tabs .gyramais-tabs-tab + .gyramais-tabs-tab {
+  @apply
+    ml-4;
+}
+
+.gyramais-tabs .gyramais-tabs-content {
+  @apply
+    relative
+    m-0
+    pt-4;
+}
+.gyramais-tabs .gyramais-tabs-content::before {
+  @apply
+    content-['']
+    absolute
+    w-full
+    h-[1px]
+    top-0
+    bg-[var(--border-color)];
+}

package/src/components/Tabs/index.ts

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

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "./Tag";
+
+import PersonIcon from '@mui/icons-material/Person';
+
+const meta: Meta<typeof Tag> = {
+  title: "Library/Components/Tag",
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    icon: false,
+    children: (
+      'Informação qualquer'
+    ),
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    id: '',
+    className: '',
+    icon: (
+      <PersonIcon />
+    ),
+    children: (
+      'Informação qualquer'
+    ),
+  },
+}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type TagProps = {
+  id?: string;
+  className?: string;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const Tag = ({
+  id,
+  className,
+  icon,
+  children,
+}: TagProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-tag",
+        className,
+      )}
+    >
+      {icon && (
+        <div className="gyramais-tag-icon">
+          {icon}
+        </div>
+      )}
+
+      <div className="gyramais-tag-content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export { Tag };

package/src/components/Tag/index.css

@@ -0,0 +1,31 @@
+.gyramais-tag {
+  @apply
+    flex
+    items-center
+    w-fit
+    px-4
+    py-3
+    bg-[#F6F8F7]
+    border-[1px]
+    border-[var(--border-color)]
+    border-solid
+    rounded-xl;
+}
+
+.gyramais-tag .gyramais-tag-icon {
+  @apply
+    flex
+    items-center
+    justify-center
+    mr-2
+    text-[var(--primary-button-color)]
+    scale-[135%]
+}
+
+.gyramais-tag .gyramais-tag-content {
+  @apply
+    text-lg
+    leading-[18px]
+    text-black
+    font-normal
+}

package/src/components/Tag/index.ts

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

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = {
+  title: "Library/Components/Text",
+  parameters: {
+    layout: 'centered',
+  },
+  render: () => (
+    <>
+      <h1>Texto em h1 em desktop</h1>
+      <h1 className="text-[24px]">Texto em h1 em mobile</h1>
+      <br />
+
+      <h2>Texto em h2 em desktop</h2>
+      <h2 className="text-[24px]">Texto em h2 em mobile</h2>
+      <br />
+      
+      <h3>Texto em h3 em desktop</h3>
+      <h3 className="text-[20px]">Texto em h3 em mobile</h3>
+      <br />
+      
+      <h4>Texto em h4 em desktop</h4>
+      <h4 className="text-[20px]">Texto em h4 em mobile</h4>
+      <br />
+      
+      <h5>Texto em h5 em desktop</h5>
+      <h5 className="text-[16px]">Texto em h5 em mobile</h5>
+      <br />
+      
+      <h6>Texto em h6 em desktop</h6>
+      <h6 className="text-[16px]">Texto em h6 em mobile</h6>
+    </>
+  )
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {}

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToastContainer, toast } from '.';
+import { Button } from '../Button';
+
+const meta: Meta = {
+  title: "Library/Components/Toast",
+  parameters: {
+    layout: 'centered',
+  },
+  render: ({ type, position, message }) => (
+    <div className="w-[800px] h-[400px]">
+      <ToastContainer />
+
+      <div className="w-full h-full flex items-center justify-center">
+        <Button onClick={() => toast(message, { type, position })}>
+          Notificar
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'error', 'default'],
+    },
+    position: {
+      control: 'select',
+      options: ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'],
+    },
+    message: {
+      control: 'text',
+    },
+  },
+  args: {
+    type: 'success',
+    position: 'top-right',
+    message: 'Conteúdo da notificação',
+  },
+}