@gyramais/gyra-design 0.1.0

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from "react";
+import classNames from 'classnames';
+import "./index.css";
+
+import { 
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  PieChart,
+  Pie,
+  Sector,
+} from 'recharts';
+
+type BarChartData = Array<{
+  [key: string]: number;
+}>;
+type PieChartData = Array<{
+  name: string;
+  value: string | number;
+}>;
+
+type ChartProps = {
+  id?: string;
+  className?: string;
+  type?: 'bar' | 'pie';
+  layout?: 'horizontal' | 'vertical';
+  barSize?: number;
+  barGap?: number;
+  indexes?: Array<{
+    name: string;
+    key: string;
+    stackId?: string;
+    color?: string;
+  }>;
+  data?: BarChartData | PieChartData;
+}
+
+const renderActiveShape = (props: any) => {
+  const RADIAN = Math.PI / 180;
+  const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent, value } = props;
+  const sin = Math.sin(-RADIAN * midAngle);
+  const cos = Math.cos(-RADIAN * midAngle);
+  const sx = cx + (outerRadius + 10) * cos;
+  const sy = cy + (outerRadius + 10) * sin;
+  const mx = cx + (outerRadius + 30) * cos;
+  const my = cy + (outerRadius + 30) * sin;
+  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  const ey = my;
+  const textAnchor = cos >= 0 ? 'start' : 'end';
+
+  return (
+    <g>
+      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
+        {payload.name}
+      </text>
+
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius + 6}
+        outerRadius={outerRadius + 10}
+        fill={fill}
+      />
+
+      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
+      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${value}`}</text>
+      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="var(--dark-button-color)">
+        {`(${(percent * 100).toFixed(2)}%)`}
+      </text>
+    </g>
+  );
+};
+
+const Chart = ({
+  id,
+  className,
+  type = 'bar',
+  layout = 'vertical',
+  barSize = 24,
+  barGap = 16,
+  indexes = [],
+  data = [],
+}: ChartProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const renderChart = () => {
+    if (type === 'bar') {
+      return (
+        <BarChart
+          barSize={barSize}
+          barGap={barGap}
+          layout={layout}
+          data={data}
+        >
+          <CartesianGrid />
+
+          <XAxis
+            hide={layout === 'horizontal'}
+            type={layout === 'horizontal' ? 'category' : 'number'}
+          />
+          <YAxis
+            hide={layout === 'vertical'}
+            type={layout === 'vertical' ? 'category' : 'number'}
+          />
+          
+          <Tooltip
+            contentStyle={{ borderRadius: 12 }}
+            labelStyle={{ display: 'none' }}
+            cursor={{ fill: '#00000011' }}
+          />
+          
+          <Legend
+            align={layout === 'vertical' ? 'left' : 'right'}
+            verticalAlign="top"
+            iconType="square"
+            iconSize={12}
+            wrapperStyle={{ paddingBottom: 16 }}
+          />
+          
+          {indexes.map((index, i) => (
+            <Bar
+              key={`${index}-${i}`}
+              name={index.name}
+              dataKey={index.key}
+              stackId={index.stackId}
+              fill={`var(--primary-button-color-${i}00)`}
+              radius={layout === 'vertical' ? [0, 4, 4, 0] : [4, 4, 0, 0]}
+            />
+          ))}
+        </BarChart>
+      );
+    }
+
+    if (type === 'pie') {
+      return (
+        <PieChart width={300} height={300}>
+          <Pie
+            activeIndex={activeIndex}
+            activeShape={renderActiveShape}
+            onMouseEnter={(_, index) => setActiveIndex(index)}
+            data={data}
+            dataKey="value"
+            cx="50%"
+            cy="50%"
+            outerRadius={90}
+            innerRadius={70}
+            fill="var(--primary-button-color)"
+          />
+        </PieChart>
+      )
+    }
+
+    return (
+      <div />
+    )
+  }
+
+  return (
+    <ResponsiveContainer
+      id={id}
+      className={classNames(
+        'gyramais-chart',
+        `gyramais-chart-${type}`,
+        className,
+      )}
+      width="100%"
+      height="100%"
+    >
+      {renderChart()}
+    </ResponsiveContainer>
+  );
+};
+
+export { Chart };

package/src/components/Chart/index.css

@@ -0,0 +1,15 @@
+.gyramais-chart .recharts-legend-item {
+  @apply
+    !mr-0
+}
+.gyramais-chart .recharts-legend-item + .recharts-legend-item {
+  @apply
+    !ml-8
+}
+
+.gyramais-chart .recharts-legend-item-text {
+  @apply
+    !text-[#565656]
+    !font-normal
+    !text-xs
+}

package/src/components/Chart/index.ts

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Library/Components/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'white',
+    },
+  },
+  render: ({ children, checked = false }) => {
+    const [internalChecked, setInternalChecked] = useState(false);
+
+    useEffect(() => {
+      setInternalChecked(checked);
+    }, [checked]) 
+
+    return (
+      <Checkbox
+        checked={internalChecked}
+        onCheckedChange={(checked) => setInternalChecked(checked)}  
+      >
+        {children}
+      </Checkbox>
+    );
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    name: '',
+    checked: false,
+    children: (
+      'Caixa de seleção'
+    ),
+  },
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import { Checkbox as PrimitiveCheckbox } from "../../shadcn/checkbox";
+
+type CheckboxProps = {
+  id?: string;
+  className?: string;
+  name?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  children?: React.ReactNode;
+}
+
+const Checkbox = React.forwardRef(({
+  id,
+  className,
+  name,
+  checked,
+  onCheckedChange,
+  children,
+}: CheckboxProps, ref) => {
+  return (
+    <div className="gyramais-checkbox-container">
+      <PrimitiveCheckbox
+        id={id}
+        name={name}
+        className={classNames(
+          'gyramais-checkbox',
+          className,
+        )}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+      />
+
+      {children && (
+        <div className="gyramais-checkbox-label">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export { Checkbox };

package/src/components/Checkbox/index.css

@@ -0,0 +1,29 @@
+.gyramais-checkbox-container {
+  @apply
+    flex
+}
+
+.gyramais-checkbox-container .gyramais-checkbox {
+  @apply
+    relative
+    bg-white
+    min-h-[20px]
+    min-w-[20px]
+    h-5
+    w-5
+    rounded-sm
+    border-2
+    border-[var(--border-color)]
+    duration-300;
+}
+.gyramais-checkbox-container .gyramais-checkbox:hover,
+.gyramais-checkbox-container .gyramais-checkbox[data-state="checked"]{
+  @apply
+    border-[var(--primary-button-color)];
+}
+
+.gyramais-checkbox-container .gyramais-checkbox-label {
+  @apply
+    ml-4
+    font-normal
+}

package/src/components/Checkbox/index.ts

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

package/src/components/Col/Col.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Row } from "../Row";
+import { Col } from "./Col";
+
+const meta: Meta<typeof Col> = {
+  title: "Library/Components/Col",
+  component: Col,
+  parameters: {
+    layout: 'padded',
+  },
+  render: ({ span }) => (
+    <Row columns={12} gap={16}>
+      <Col span={span} className="h-16 bg-[var(--background-color)] rounded-md" />
+
+      {Array.from({ length: 12 - (typeof span === 'number' ? span : 0) }).map(() => (
+        <Col span={1} className="h-full bg-[var(--background-color)] rounded-md opacity-20" />
+      ))}
+    </Row>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Col>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    span: 4,
+  },
+}

package/src/components/Col/Col.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type Span = {
+  mobile?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  tablet?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  desktop?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  wide?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+}
+
+type ColProps = {
+  id?: string;
+  className?: string;
+  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Span;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const Col = ({
+  id,
+  className,
+  span = 1,
+  onClick,
+  children,
+}: ColProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-col",
+        `gyramais-col-mobile-span-${typeof span === 'number' ? span : typeof span === 'object' && !Array.isArray(span) && span.mobile}`,
+        typeof span === 'object' && !Array.isArray(span) && span.tablet ? `gyramais-col-tablet-span-${span.tablet}` : '',
+        typeof span === 'object' && !Array.isArray(span) && span.desktop ? `gyramais-col-desktop-span-${span.desktop}` : '',
+        typeof span === 'object' && !Array.isArray(span) && span.wide ? `gyramais-col-wide-span-${span.wide}` : '',
+        className,
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Col };

package/src/components/Col/index.css

@@ -0,0 +1,57 @@
+.gyramais-col.gyramais-col-mobile-span-1 { @apply col-span-1; }
+.gyramais-col.gyramais-col-mobile-span-2 { @apply col-span-2; }
+.gyramais-col.gyramais-col-mobile-span-3 { @apply col-span-3; }
+.gyramais-col.gyramais-col-mobile-span-4 { @apply col-span-4; }
+.gyramais-col.gyramais-col-mobile-span-5 { @apply col-span-5; }
+.gyramais-col.gyramais-col-mobile-span-6 { @apply col-span-6; }
+.gyramais-col.gyramais-col-mobile-span-7 { @apply col-span-7; }
+.gyramais-col.gyramais-col-mobile-span-8 { @apply col-span-8; }
+.gyramais-col.gyramais-col-mobile-span-9 { @apply col-span-9; }
+.gyramais-col.gyramais-col-mobile-span-10 { @apply col-span-10; }
+.gyramais-col.gyramais-col-mobile-span-11 { @apply col-span-11; }
+.gyramais-col.gyramais-col-mobile-span-12 { @apply col-span-12; }
+
+@media(min-width: 769px) {
+  .gyramais-col.gyramais-col-tablet-span-1 { @apply col-span-1; }
+  .gyramais-col.gyramais-col-tablet-span-2 { @apply col-span-2; }
+  .gyramais-col.gyramais-col-tablet-span-3 { @apply col-span-3; }
+  .gyramais-col.gyramais-col-tablet-span-4 { @apply col-span-4; }
+  .gyramais-col.gyramais-col-tablet-span-5 { @apply col-span-5; }
+  .gyramais-col.gyramais-col-tablet-span-6 { @apply col-span-6; }
+  .gyramais-col.gyramais-col-tablet-span-7 { @apply col-span-7; }
+  .gyramais-col.gyramais-col-tablet-span-8 { @apply col-span-8; }
+  .gyramais-col.gyramais-col-tablet-span-9 { @apply col-span-9; }
+  .gyramais-col.gyramais-col-tablet-span-10 { @apply col-span-10; }
+  .gyramais-col.gyramais-col-tablet-span-11 { @apply col-span-11; }
+  .gyramais-col.gyramais-col-tablet-span-12 { @apply col-span-12; }
+}
+
+@media(min-width: 1025px) {
+  .gyramais-col.gyramais-col-desktop-span-1 { @apply col-span-1; }
+  .gyramais-col.gyramais-col-desktop-span-2 { @apply col-span-2; }
+  .gyramais-col.gyramais-col-desktop-span-3 { @apply col-span-3; }
+  .gyramais-col.gyramais-col-desktop-span-4 { @apply col-span-4; }
+  .gyramais-col.gyramais-col-desktop-span-5 { @apply col-span-5; }
+  .gyramais-col.gyramais-col-desktop-span-6 { @apply col-span-6; }
+  .gyramais-col.gyramais-col-desktop-span-7 { @apply col-span-7; }
+  .gyramais-col.gyramais-col-desktop-span-8 { @apply col-span-8; }
+  .gyramais-col.gyramais-col-desktop-span-9 { @apply col-span-9; }
+  .gyramais-col.gyramais-col-desktop-span-10 { @apply col-span-10; }
+  .gyramais-col.gyramais-col-desktop-span-11 { @apply col-span-11; }
+  .gyramais-col.gyramais-col-desktop-span-12 { @apply col-span-12; }
+}
+
+@media(min-width: 1201px) {
+  .gyramais-col.gyramais-col-wide-span-1 { @apply col-span-1; }
+  .gyramais-col.gyramais-col-wide-span-2 { @apply col-span-2; }
+  .gyramais-col.gyramais-col-wide-span-3 { @apply col-span-3; }
+  .gyramais-col.gyramais-col-wide-span-4 { @apply col-span-4; }
+  .gyramais-col.gyramais-col-wide-span-5 { @apply col-span-5; }
+  .gyramais-col.gyramais-col-wide-span-6 { @apply col-span-6; }
+  .gyramais-col.gyramais-col-wide-span-7 { @apply col-span-7; }
+  .gyramais-col.gyramais-col-wide-span-8 { @apply col-span-8; }
+  .gyramais-col.gyramais-col-wide-span-9 { @apply col-span-9; }
+  .gyramais-col.gyramais-col-wide-span-10 { @apply col-span-10; }
+  .gyramais-col.gyramais-col-wide-span-11 { @apply col-span-11; }
+  .gyramais-col.gyramais-col-wide-span-12 { @apply col-span-12; }
+}

package/src/components/Col/index.ts

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

package/src/components/Collapse/Collapse.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Collapse } from "./Collapse";
+import { CollapseIcon } from "./CollapseIcon";
+import { Card } from '../Card';
+import { Switch } from '../Switch';
+import { Divider } from '../Divider';
+import { Logo } from '../Logo';
+
+const meta: Meta<typeof Collapse> = {
+  title: "Library/Components/Collapse",
+  component: Collapse,
+  parameters: {
+    layout: 'centered',
+  },
+  render: ({ children, collapsed }) => {
+    const [internalCollapsed, setInternalCollapsed] = useState<boolean | undefined>(collapsed);
+
+    useEffect(() => {
+      setInternalCollapsed(collapsed);
+    }, [collapsed]);
+
+    return (
+      <Card className="w-[300px]">
+        <Switch
+          checked={!internalCollapsed}
+          onCheckedChange={(checked) => setInternalCollapsed(!checked)}
+        />
+
+        <Divider margin={12} />
+
+        <Collapse collapsed={internalCollapsed}>
+          {children}
+        </Collapse>
+      </Card>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapse>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    collapsed: false,
+    children: (
+      <Logo height={30} />
+    ),
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    id: '',
+    className: '',
+    collapsed: true,
+    children: (
+      <Logo height={30} />
+    ),
+  },
+  render: ({ children, collapsed }) => {
+    const [internalCollapsed, setInternalCollapsed] = useState<boolean | undefined>(false);
+
+    useEffect(() => {
+      setInternalCollapsed(collapsed);
+    }, [collapsed]) 
+    
+    return (
+      <Card className="w-[300px]">
+        <CollapseIcon
+          collapsed={internalCollapsed}
+          onCollapse={(value) => setInternalCollapsed(value)}
+        />
+
+        <Divider margin={12} />
+
+        <Collapse collapsed={internalCollapsed}>
+          {children}
+        </Collapse>
+      </Card>
+    )
+  }
+};

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import { Collapse as PrimitiveCollapse } from 'react-collapse';
+
+type CollapseProps = {
+  id?: string;
+  className?: string;
+  collapsed?: boolean;
+  children?: React.ReactNode;
+}
+
+const Collapse = ({
+  id,
+  className,
+  collapsed = false,
+  children,
+}: CollapseProps) => {
+  return (
+    <PrimitiveCollapse
+      id={id}
+      className={classNames(
+        'gyramais-collapse',
+        className,
+      )}
+      isOpened={!collapsed}
+    >
+      {children}
+    </PrimitiveCollapse>
+  );
+};
+
+export { Collapse };

package/src/components/Collapse/CollapseIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+
+type CollapseIconProps = {
+  id?: string;
+  className?: string;
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+}
+
+const CollapseIcon = ({
+  id,
+  className,
+  collapsed = false,
+  onCollapse,
+}: CollapseIconProps) => {
+  return (
+    <ArrowForwardIosIcon
+      id={id}
+      className={classNames(
+        'gyramais-collapse-icon',
+        collapsed ? 'collapsed' : '',
+        className,
+      )}
+      onClick={() => onCollapse?.(!collapsed)}
+    />
+  );
+};
+
+export { CollapseIcon };

package/src/components/Collapse/index.css

@@ -0,0 +1,14 @@
+.gyramais-collapse-icon {
+  @apply
+    !text-[20px]
+    text-[var(--primary-button-color)]
+    cursor-pointer
+    !transition-all
+    !rotate-90
+    !duration-300;
+}
+
+.gyramais-collapse-icon.collapsed {
+  @apply
+    !rotate-0;
+}

package/src/components/Collapse/index.ts

@@ -0,0 +1,2 @@
+export * from "./Collapse";
+export * from "./CollapseIcon";

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Divider } from "./Divider";
+
+const meta: Meta<typeof Divider> = {
+  title: "Library/Components/Divider",
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+  },
+  render: ({ children, margin }) => (
+    <div className="w-[360px]">
+      Conteúdo 1
+
+      <Divider margin={margin}>
+        {children}
+      </Divider>
+
+      Conteúdo 2
+    </div>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    margin: 26,
+  },
+}
+
+export const Content: Story = {
+  args: {
+    id: '',
+    className: '',
+    margin: 26,
+    children: (
+      'Ou'
+    )
+  },
+}