@gyramais/gyra-design 0.1.0

package/src/components/Button/index.css

@@ -0,0 +1,168 @@
+.gyramais-button {
+  @apply
+    flex
+    items-center
+    justify-center
+    text-lg
+    font-semibold
+    rounded-2xl
+    border-[1px]
+    border-solid
+    duration-300;
+}
+.gyramais-button:not(:disabled):not(.gyramais-button-loading) {
+  @apply  
+    hover:brightness-110;
+}
+
+.gyramais-button.gyramais-button-primary {
+  @apply
+    bg-[var(--primary-button-color)]
+    border-[var(--primary-button-color)]
+    text-[var(--primary-button-text-color)];
+}
+.gyramais-button.gyramais-button-primary .gyramais-button-loading-feedback div {
+  @apply
+    !border-[var(--primary-button-text-color)_var(--primary-button-text-color)_transparent_transparent];
+}
+  
+.gyramais-button.gyramais-button-secondary {
+  @apply
+    bg-[var(--secondary-button-color)]
+    border-[var(--secondary-button-color)]
+    text-[var(--secondary-button-text-color)];
+}
+.gyramais-button.gyramais-button-secondary .gyramais-button-loading-feedback div {
+  @apply
+    !border-[var(--secondary-button-text-color)_var(--secondary-button-text-color)_transparent_transparent];
+}
+  
+.gyramais-button.gyramais-button-white {
+  @apply
+    bg-white
+    border-[var(--border-color)]
+    text-black;
+}
+.gyramais-button.gyramais-button-white svg {
+  @apply
+    text-[var(--primary-button-color)];
+}
+.gyramais-button.gyramais-button-white .gyramais-button-loading-feedback div {
+  @apply
+    !border-[var(--primary-button-color)_var(--primary-button-color)_transparent_transparent];
+}
+
+.gyramais-button.gyramais-button-dark {
+  @apply
+    bg-[var(--dark-button-color)]
+    border-[var(--dark-button-color)]
+    text-[var(--dark-button-text-color)];
+}
+.gyramais-button.gyramais-button-dark .gyramais-button-loading-feedback div {
+  @apply
+    !border-[var(--dark-button-text-color)_var(--dark-button-text-color)_transparent_transparent];
+}
+
+.gyramais-button.gyramais-button-icon .gyramais-button-icon-container {
+  @apply
+    mr-0
+}
+
+.gyramais-button.gyramais-button-link {
+  @apply
+    bg-transparent
+    border-none
+    !text-[var(--link-button-color)]
+    !p-0;
+}
+
+.gyramais-button.gyramais-button-block {
+  @apply
+    w-full;
+}
+
+.gyramais-button.gyramais-button-small {
+  @apply
+    text-xs
+    rounded-[6px]
+    px-2 py-2;
+}
+.gyramais-button.gyramais-button-icon.gyramais-button-small {
+  @apply
+    !p-1
+    rounded-[8px];
+}
+.gyramais-button.gyramais-button-small .gyramais-button-icon-container svg {
+  @apply
+    text-base;
+}
+.gyramais-button.gyramais-button-icon.gyramais-button-small .gyramais-button-icon-container svg {
+  @apply
+    text-[22px]
+}
+
+.gyramais-button.gyramais-button-medium {
+  @apply
+    text-base
+    rounded-[12px]
+    px-5 py-3;
+}
+.gyramais-button.gyramais-button-icon.gyramais-button-medium {
+  @apply
+    !p-3
+    rounded-[10px];
+}
+
+.gyramais-button.gyramais-button-large {
+  @apply
+    text-lg
+    px-12 py-4;
+}
+.gyramais-button.gyramais-button-icon.gyramais-button-large {
+  @apply
+    !p-4
+    rounded-[12px];
+}
+
+.gyramais-button.gyramais-button-loading {
+  @apply
+    opacity-80
+    cursor-progress
+}
+
+.gyramais-button:disabled {
+  @apply
+    bg-[#E0E0E0]
+    border-[#E0E0E0]
+    text-black
+    opacity-60
+    cursor-not-allowed;
+}
+.gyramais-button.gyramais-button-white:disabled svg {
+  @apply
+    text-black;
+}
+.gyramais-button.gyramais-button-link:disabled {
+  @apply
+    bg-transparent;
+}
+
+.gyramais-button .gyramais-button-icon-container {
+  @apply
+    flex
+    items-center
+    mr-2
+}
+.gyramais-button .gyramais-button-icon-container svg {
+  @apply
+    text-2xl
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

package/src/components/Button/index.ts

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

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./Card";
+import { Logo } from '../Logo';
+
+const meta: Meta<typeof Card> = {
+  title: "Library/Components/Card",
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: '',
+    type: 'shadow',
+    disabled: false,
+    loading: false,
+    onClick: () => {},
+    children: (
+      <div className="min-w-[400px] min-h-[200px]">
+        Conteúdo do cartão
+      </div>
+    ),
+  },
+}
+
+export const Title: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: 'Título do cartão',
+    collapsible: false,
+    type: 'shadow',
+    disabled: false,
+    loading: false,
+    onClick: () => {},
+    children: (
+      <div className="min-w-[400px] min-h-[200px]">
+        Conteúdo do cartão
+      </div>
+    ),
+  },
+}
+
+export const HeaderContent: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: 'Título do cartão',
+    collapsible: false,
+    type: 'shadow',
+    disabled: false,
+    loading: false,
+    onClick: () => {},
+    headerContent: (
+      <Logo height={20} />
+    ),
+    children: (
+      <div className="min-w-[400px] min-h-[200px]">
+        Conteúdo do cartão com conteúdo no header
+      </div>
+    ),
+  },
+}
+
+export const Collapsible: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: 'Título do cartão',
+    collapsible: true,
+    type: 'shadow',
+    disabled: false,
+    loading: false,
+    onClick: () => {},
+    children: (
+      <div className="min-w-[400px] min-h-[200px]">
+        Conteúdo do cartão colapsável
+      </div>
+    ),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: 'Título do cartão bloqueado',
+    collapsible: false,
+    type: 'shadow',
+    disabled: false,
+    loading: true,
+    onClick: () => {},
+    children: (
+      <div className="min-w-[400px] text-[var(--primary-button-color)]">
+        Conteúdo do cartão bloqueado
+      </div>
+    ),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: 'Título do cartão bloqueado',
+    collapsible: false,
+    type: 'shadow',
+    disabled: true,
+    loading: false,
+    onClick: () => {},
+    children: (
+      <div className="min-w-[400px] min-h-[200px] text-[var(--primary-button-color)]">
+        Conteúdo do cartão bloqueado
+      </div>
+    ),
+  },
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useMemo } from "react";
+import classNames from "classnames";
+import "./index.css";
+import { Loading } from "../Loading";
+import { Collapse, CollapseIcon } from "../Collapse";
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Row } from "../Row";
+import { Col } from "../Col";
+
+type CardProps = {
+  id?: string;
+  className?: string;
+  type?: 'shadow' | 'shadow-inset' | 'border';
+  title?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  onClick?: () => void;
+  headerContent?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const Card = ({
+  id,
+  type = 'shadow',
+  className,
+  title,
+  disabled,
+  loading,
+  collapsible,
+  defaultCollapsed,
+  onClick,
+  headerContent,
+  children,
+}: CardProps) => {
+  const [collapsed, setCollapsed] = useState(collapsible && defaultCollapsed);
+  
+  const hasTitleContent = useMemo(() => !!(title || collapsible || headerContent), [title, collapsible, headerContent])
+
+  const handleCollapse = () => {
+    if (disabled) {
+      return;
+    }
+    if (!collapsible) {
+      return;
+    }
+
+    setCollapsed(!collapsed);
+  }
+
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-card",
+        type ? `gyramais-card-${type}` : '',
+        loading ? 'gyramais-card-loading' : '',
+        disabled ? 'gyramais-card-disabled' : '',
+        className,
+      )}
+      onClick={!disabled ? onClick : () => {}}
+    >
+      {(title || collapsible || headerContent) && (
+        <div className="gyramais-card-header">
+          <Row columns={2} align="center">
+            {(title || collapsible) && (
+              <Col
+                span={!headerContent ? 2 : 1}
+                className={`gyramais-card-header-left ${collapsible ? 'with-collapse' : ''}`}
+                onClick={handleCollapse}
+              >
+                {title && (
+                  <h5 className="gyramais-card-header-title">
+                    {title}
+                  </h5>
+                )}
+
+                {collapsible && (
+                  <CollapseIcon collapsed={collapsed} />
+                )}
+              </Col>
+            )}
+
+            {headerContent && (
+              <Col span={(!title && !collapsible) ? 2 : 1} className="gyramais-card-header-right">
+                {headerContent}
+              </Col>
+            )}
+          </Row>
+
+        </div>
+      )}
+
+      <Collapse collapsed={collapsed}>
+        <div className={`gyramais-card-content ${children ? 'with-content' : ''} ${hasTitleContent ? 'with-title' : ''}`}>
+          {loading && (
+            <div className="gyramais-card-loading">
+              <Loading size={40} />
+            </div>
+          )}
+
+          {children}
+        </div>
+      </Collapse>
+    </div>
+  );
+};
+
+export { Card };

package/src/components/Card/index.css

@@ -0,0 +1,96 @@
+.gyramais-card {
+  @apply
+    relative
+    p-4
+    bg-white
+    rounded-[20px]
+    duration-300
+    md:p-6;
+}
+.gyramais-card.gyramais-card-shadow {
+  @apply
+    shadow-[0px_14px_64px_-4px_#18274b1f,_0px_8px_22px_-6px_#18274b1f];
+}
+.gyramais-card.gyramais-card-shadow-inset {
+  @apply
+    shadow-[inset_0px_0px_10px_6px_#18274b1f];
+}
+.gyramais-card.gyramais-card-border {
+  @apply
+    border-[1px]
+    border-[var(--border-color)]
+    border-solid;
+}
+
+.gyramais-card.gyramais-card-disabled {
+  @apply
+    cursor-not-allowed
+    grayscale-[100]
+    opacity-50
+}
+
+.gyramais-card .gyramais-card-header-left {
+  @apply
+    flex
+    items-center;
+}
+.gyramais-card:not(.gyramais-card-disabled) .gyramais-card-header-left.with-collapse {
+  @apply
+    cursor-pointer;
+}
+
+.gyramais-card .gyramais-card-header-title {
+  @apply
+    text-black
+    font-semibold
+    mr-2;
+}
+
+.gyramais-card .gyramais-card-header-collapse {
+  @apply
+    w-fit
+    h-fit;
+}
+
+.gyramais-card .gyramais-card-header-collapse-icon {
+  @apply
+    text-[var(--primary-button-color)]
+    transition-all
+    duration-300;
+}
+.gyramais-card .gyramais-card-header-collapse-icon.collapsed {
+  @apply
+    -rotate-90
+}
+
+.gyramais-card .gyramais-card-content {
+  @apply
+    relative
+    w-full
+    h-full;
+}
+.gyramais-card .gyramais-card-content.with-title.with-content {
+  @apply
+    pt-4;
+}
+.gyramais-card.gyramais-card-loading > .ReactCollapse--collapse > .ReactCollapse--content > .gyramais-card-content {
+  @apply
+    min-h-[4rem];
+}
+
+.gyramais-card .gyramais-card-loading {
+  @apply
+    absolute
+    z-10
+    w-full
+    h-full
+    scale-x-[102%]
+    pt-4
+    top-0
+    left-0
+    flex
+    items-center
+    justify-center
+    bg-[#ffffff80]
+    backdrop-blur-sm;
+}

package/src/components/Card/index.ts

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

package/src/components/Chart/Chart.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Chart } from "./Chart";
+
+const meta: Meta<typeof Chart> = {
+  title: "Library/Components/Chart",
+  component: Chart,
+  parameters: {
+    layout: 'padded',
+  },
+  render: (props) => (
+    <div className="w-full h-[300px] flex items-center">
+      <Chart {...props}/>
+    </div>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Chart>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    layout: 'horizontal',
+    barSize: 26,
+    barGap: 16,
+    indexes: [{
+      name: 'CNPJ',
+      key: 'cnpj',
+      color: '#2F5DCB',
+    }, {
+      name: 'CPF',
+      key: 'cpf',
+      color: '#7B99E0',
+    }],
+    data: [{
+      cpf: 621,
+      cnpj: 843,
+    }],
+  },
+}
+
+export const Pie: Story = {
+  args: {
+    id: '',
+    className: '',
+    type: 'pie',
+    data: [{
+      name: 'RJ',
+      value: 23,
+    }, {
+      name: 'SP',
+      value: 54,
+    }, {
+      name: 'AM',
+      value: 11,
+    }],
+  },
+}