@gyramais/gyra-design 0.1.0

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type LogoProps = {
+  id?: string;
+  className?: string;
+  type?: "dark" | "white" | "background-contrasted";
+  width?: number | string;
+  height?: number | string;
+}
+
+const Logo = ({
+  id,
+  className,
+  type = 'dark',
+  width,
+  height,
+}: LogoProps) => {
+  return (
+    <img
+      id={id}
+      className={classNames(
+        'gyramais-logo',
+        `gyramais-logo-${type}`,
+        className,
+      )}
+      style={{
+        width,
+        height,
+      }}
+      width={width}
+      height={height}
+      alt="Logo"
+    />
+  );
+};
+
+export { Logo };

package/src/components/Logo/index.css

@@ -0,0 +1,9 @@
+.gyramais-logo.gyramais-logo-dark {
+  content: var(--dark-logo-url);
+}
+.gyramais-logo.gyramais-logo-white {
+  content: var(--white-logo-url);
+}
+.gyramais-logo.gyramais-logo-background-contrasted {
+  content: var(--background-logo-url);
+}

package/src/components/Logo/index.ts

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

package/src/components/Menubar/Menubar.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Menubar } from "./Menubar";
+
+const meta: Meta<typeof Menubar> = {
+  title: "Library/Components/Menubar",
+  component: Menubar,
+  parameters: {
+    layout: 'padded',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Menubar>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    borderless: false,
+    orientation: 'horizontal',
+    onClick: (key: string) => {},
+    activeKey: '',
+    items: [{
+      key: 'home',
+      title: 'Página inicial',
+      items: [{
+        key: 'loans',
+        title: 'Empréstimos',
+      }, {
+        key: 'prepayments',
+        title: 'Antecipações',
+        disabled: true,
+      }]
+    }, {
+      key: 'plain',
+      title: 'Plano',
+      disabled: true,
+    }, {
+      separator: true,
+    }, {
+      key: 'profile',
+      title: 'Perfil',
+      items: [{
+        key: 'user',
+        title: 'Usuário',
+      }, {
+        separator: true,
+      }, {
+        key: 'business',
+        title: 'Empresa',
+      }]
+    }],
+  },
+}

package/src/components/Menubar/Menubar.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import {
+  Menubar as PrimitiveMenubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarTrigger,
+} from "../../shadcn/menubar"
+
+type MenubarProps = {
+  id?: string;
+  className?: string;
+  borderless?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  activeKey?: string;
+  items?: Array<{
+    key?: string;
+    title?: string | React.ReactNode;
+    disabled?: boolean;
+    separator?: boolean;
+    items?: Array<{
+      key?: string;
+      title?: string | React.ReactNode;
+      disabled?: boolean;
+      separator?: boolean;
+    }>;
+  }>;
+  onClick?: (key: string) => void;
+}
+
+const Menubar = ({
+  id,
+  className,
+  borderless = false,
+  orientation = 'horizontal',
+  activeKey = '',
+  items = [],
+  onClick,
+}: MenubarProps) => {
+  const [internalActiveKey, setInternalActiveKey] = useState(activeKey);
+
+  useEffect(() => {
+    setInternalActiveKey(activeKey);
+  }, [activeKey]);
+  return (
+    <PrimitiveMenubar
+      id={id}
+      className={classNames(
+        "gyramais-menubar",
+        `gyramais-menubar-${orientation}`,
+        borderless ? 'gyramais-menubar-borderless' : '',
+        className,
+      )}
+    >
+      {items.map((item, index) => item.separator ? (
+        <MenubarSeparator
+          key={`separator-${index}`}
+          aria-orientation={orientation === 'horizontal' ? "vertical" : "horizontal"} className="gyramais-menubar-separator"
+        />
+      ) : (
+        <MenubarMenu key={`menu-${index}`}>
+          <MenubarTrigger
+            className={classNames(
+              'gyramais-menubar-option',
+              item.key === internalActiveKey ? 'gyramais-menubar-option-selected' : '',
+            )}
+            onClick={() => {
+              if (item.key) {
+                if (!activeKey && item.key) {
+                  setInternalActiveKey(item.key);
+                }
+  
+                onClick?.(item.key);
+              }
+            }}
+            disabled={item.disabled}
+          >
+            {item.title}
+          </MenubarTrigger>
+
+          {!item.disabled
+          && Array.isArray(item.items)
+          && item.items.length > 0
+          && (
+            <MenubarContent className="gyramais-menubar-content" side={orientation === 'horizontal' ? 'bottom' : 'right'}>
+              {item.items.map((subitem, index) => subitem.separator ? (
+                <MenubarSeparator
+                  key={`sub-separator-${index}`}
+                  aria-orientation="horizontal"
+                  className="gyramais-menubar-separator submenu-separator"
+                  />
+              ) : (
+                <MenubarItem
+                  key={`sub-menu-${index}`}
+                  className="gyramais-menubar-sub-option"
+                  onClick={() => {
+                    if (subitem.key) {
+                      onClick?.(subitem.key);
+                    }
+                  }}
+                  disabled={subitem.disabled}
+                >
+                  {subitem.title}
+                </MenubarItem>
+              ))}
+            </MenubarContent>
+          )}
+        </MenubarMenu>
+      ))}
+    </PrimitiveMenubar>
+  );
+};
+
+export { Menubar };

package/src/components/Menubar/index.css

@@ -0,0 +1,96 @@
+.gyramais-menubar {
+  @apply
+    w-fit
+    bg-white;
+}
+.gyramais-menubar.gyramais-menubar-vertical {
+  @apply
+    flex-col
+    h-fit;
+}
+.gyramais-menubar.gyramais-menubar-borderless {
+  @apply
+    border-none;
+}
+
+.gyramais-menubar-option {
+  @apply
+    rounded-[4px]
+    duration-300
+    text-[#4F5762];
+}
+.gyramais-menubar-vertical .gyramais-menubar-option {
+  @apply
+    flex
+    w-full
+    items-center
+    justify-center
+    !mr-0
+    !ml-0
+}
+.gyramais-menubar-vertical .gyramais-menubar-option + .gyramais-menubar-option {
+  @apply
+    mt-2;
+}
+.gyramais-menubar-option-selected {
+  @apply
+    !bg-[var(--dark-button-color)]
+    !text-[var(--primary-button-color)]
+}
+.gyramais-menubar-option:disabled {
+  @apply
+    opacity-50
+    !bg-transparent
+    !text-black
+}
+.gyramais-menubar-option:not(:disabled) {
+  @apply
+    cursor-pointer
+    hover:!bg-[var(--dark-button-color)]
+    hover:!text-[var(--primary-button-color)]
+}
+
+.gyramais-menubar-sub-option {
+  @apply
+    rounded-none
+    duration-300;
+}
+.gyramais-menubar-sub-option:disabled {
+  @apply
+    opacity-50
+}
+.gyramais-menubar-sub-option:not(:disabled) {
+  @apply
+    cursor-pointer
+    hover:!bg-[var(--primary-button-color)]
+    hover:!text-[var(--primary-button-text-color)]
+}
+
+.gyramais-menubar-content {
+  @apply
+    !bg-white;
+}
+
+.gyramais-menubar-separator[aria-orientation="vertical"] {
+  @apply
+    h-full
+    w-[1px]
+    bg-[var(--border-color)];
+}
+.gyramais-menubar-separator[aria-orientation="horizontal"] {
+  @apply
+    bg-[var(--border-color)];
+}
+.gyramais-menubar-vertical .gyramais-menubar-separator[aria-orientation="horizontal"] {
+  @apply
+    !mr-0
+    !ml-0
+    mb-2
+    mt-2
+}
+.gyramais-menubar-separator[aria-orientation="horizontal"]:not(.submenu-separator) {
+  @apply
+    h-[1px]
+    w-full
+    bg-[var(--border-color)];
+}

package/src/components/Menubar/index.ts

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

package/src/components/Row/Row.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Col } from "../Col";
+import { Row } from "./Row";
+
+const meta: Meta<typeof Row> = {
+  title: "Library/Components/Row",
+  component: Row,
+  parameters: {
+    layout: 'padded',
+  },
+  render: ({ columns, gap, align }) => (
+    <Row columns={columns} gap={gap} align={align}>
+      {Array.from({ length: columns || 3 }).map((_, index) => (
+        <Col span={1} className={`${index % 2 === 0 ? 'h-32' : 'h-14'} rounded-md bg-[var(--background-color)]`} />
+      ))}
+    </Row>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Row>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    columns: 4,
+    gap: 16,
+    align: 'start',
+  },
+}

package/src/components/Row/Row.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type Gap = {
+  mobile?: 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80;
+  tablet?: 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80;
+  desktop?: 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80;
+  wide?: 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80;
+}
+
+type RowProps = {
+  id?: string;
+  className?: string;
+  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  gap?: 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | Gap;
+  align?: 'start' | 'center' | 'end';
+  children: React.ReactNode;
+}
+
+const Row = ({
+  id,
+  className,
+  columns = 1,
+  gap = 0,
+  align = 'start',
+  children,
+}: RowProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-row",
+        `gyramais-row-columns-${columns}`,
+        `gyramais-row-align-${align}`,
+        `gyramais-row-mobile-gap-${typeof gap === 'number' ? gap : typeof gap === 'object' && !Array.isArray(gap) && gap.mobile}`,
+        typeof gap === 'object' && !Array.isArray(gap) && gap.tablet ? `gyramais-row-tablet-gap-${gap.tablet}` : '',
+        typeof gap === 'object' && !Array.isArray(gap) && gap.desktop ? `gyramais-row-desktop-gap-${gap.desktop}` : '',
+        typeof gap === 'object' && !Array.isArray(gap) && gap.wide ? `gyramais-row-wide-gap-${gap.wide}` : '',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Row };

package/src/components/Row/index.css

@@ -0,0 +1,116 @@
+.gyramais-row {
+  @apply
+  grid
+  w-full;
+}
+
+.gyramais-row.gyramais-row-mobile-gap-0 { @apply gap-[0px]; }
+.gyramais-row.gyramais-row-mobile-gap-4 { @apply gap-[4px]; }
+.gyramais-row.gyramais-row-mobile-gap-8 { @apply gap-[8px]; }
+.gyramais-row.gyramais-row-mobile-gap-12 { @apply gap-[12px]; }
+.gyramais-row.gyramais-row-mobile-gap-16 { @apply gap-[16px]; }
+.gyramais-row.gyramais-row-mobile-gap-20 { @apply gap-[20px]; }
+.gyramais-row.gyramais-row-mobile-gap-24 { @apply gap-[24px]; }
+.gyramais-row.gyramais-row-mobile-gap-28 { @apply gap-[28px]; }
+.gyramais-row.gyramais-row-mobile-gap-32 { @apply gap-[32px]; }
+.gyramais-row.gyramais-row-mobile-gap-36 { @apply gap-[36px]; }
+.gyramais-row.gyramais-row-mobile-gap-40 { @apply gap-[40px]; }
+.gyramais-row.gyramais-row-mobile-gap-44 { @apply gap-[44px]; }
+.gyramais-row.gyramais-row-mobile-gap-48 { @apply gap-[48px]; }
+.gyramais-row.gyramais-row-mobile-gap-52 { @apply gap-[52px]; }
+.gyramais-row.gyramais-row-mobile-gap-56 { @apply gap-[56px]; }
+.gyramais-row.gyramais-row-mobile-gap-60 { @apply gap-[60px]; }
+.gyramais-row.gyramais-row-mobile-gap-64 { @apply gap-[64px]; }
+.gyramais-row.gyramais-row-mobile-gap-68 { @apply gap-[68px]; }
+.gyramais-row.gyramais-row-mobile-gap-72 { @apply gap-[72px]; }
+.gyramais-row.gyramais-row-mobile-gap-76 { @apply gap-[76px]; }
+.gyramais-row.gyramais-row-mobile-gap-80 { @apply gap-[80px]; }
+
+@media(min-width: 769px) {
+  .gyramais-row.gyramais-row-tablet-gap-0 { @apply gap-[0px]; }
+  .gyramais-row.gyramais-row-tablet-gap-4 { @apply gap-[4px]; }
+  .gyramais-row.gyramais-row-tablet-gap-8 { @apply gap-[8px]; }
+  .gyramais-row.gyramais-row-tablet-gap-12 { @apply gap-[12px]; }
+  .gyramais-row.gyramais-row-tablet-gap-16 { @apply gap-[16px]; }
+  .gyramais-row.gyramais-row-tablet-gap-20 { @apply gap-[20px]; }
+  .gyramais-row.gyramais-row-tablet-gap-24 { @apply gap-[24px]; }
+  .gyramais-row.gyramais-row-tablet-gap-28 { @apply gap-[28px]; }
+  .gyramais-row.gyramais-row-tablet-gap-32 { @apply gap-[32px]; }
+  .gyramais-row.gyramais-row-tablet-gap-36 { @apply gap-[36px]; }
+  .gyramais-row.gyramais-row-tablet-gap-40 { @apply gap-[40px]; }
+  .gyramais-row.gyramais-row-tablet-gap-44 { @apply gap-[44px]; }
+  .gyramais-row.gyramais-row-tablet-gap-48 { @apply gap-[48px]; }
+  .gyramais-row.gyramais-row-tablet-gap-52 { @apply gap-[52px]; }
+  .gyramais-row.gyramais-row-tablet-gap-56 { @apply gap-[56px]; }
+  .gyramais-row.gyramais-row-tablet-gap-60 { @apply gap-[60px]; }
+  .gyramais-row.gyramais-row-tablet-gap-64 { @apply gap-[64px]; }
+  .gyramais-row.gyramais-row-tablet-gap-68 { @apply gap-[68px]; }
+  .gyramais-row.gyramais-row-tablet-gap-72 { @apply gap-[72px]; }
+  .gyramais-row.gyramais-row-tablet-gap-76 { @apply gap-[76px]; }
+  .gyramais-row.gyramais-row-tablet-gap-80 { @apply gap-[80px]; }
+}
+
+@media(min-width: 1025px) {
+  .gyramais-row.gyramais-row-desktop-gap-0 { @apply gap-[0px]; }
+  .gyramais-row.gyramais-row-desktop-gap-4 { @apply gap-[4px]; }
+  .gyramais-row.gyramais-row-desktop-gap-8 { @apply gap-[8px]; }
+  .gyramais-row.gyramais-row-desktop-gap-12 { @apply gap-[12px]; }
+  .gyramais-row.gyramais-row-desktop-gap-16 { @apply gap-[16px]; }
+  .gyramais-row.gyramais-row-desktop-gap-20 { @apply gap-[20px]; }
+  .gyramais-row.gyramais-row-desktop-gap-24 { @apply gap-[24px]; }
+  .gyramais-row.gyramais-row-desktop-gap-28 { @apply gap-[28px]; }
+  .gyramais-row.gyramais-row-desktop-gap-32 { @apply gap-[32px]; }
+  .gyramais-row.gyramais-row-desktop-gap-36 { @apply gap-[36px]; }
+  .gyramais-row.gyramais-row-desktop-gap-40 { @apply gap-[40px]; }
+  .gyramais-row.gyramais-row-desktop-gap-44 { @apply gap-[44px]; }
+  .gyramais-row.gyramais-row-desktop-gap-48 { @apply gap-[48px]; }
+  .gyramais-row.gyramais-row-desktop-gap-52 { @apply gap-[52px]; }
+  .gyramais-row.gyramais-row-desktop-gap-56 { @apply gap-[56px]; }
+  .gyramais-row.gyramais-row-desktop-gap-60 { @apply gap-[60px]; }
+  .gyramais-row.gyramais-row-desktop-gap-64 { @apply gap-[64px]; }
+  .gyramais-row.gyramais-row-desktop-gap-68 { @apply gap-[68px]; }
+  .gyramais-row.gyramais-row-desktop-gap-72 { @apply gap-[72px]; }
+  .gyramais-row.gyramais-row-desktop-gap-76 { @apply gap-[76px]; }
+  .gyramais-row.gyramais-row-desktop-gap-80 { @apply gap-[80px]; }
+}
+
+@media(min-width: 1201px) {
+  .gyramais-row.gyramais-row-wide-gap-0 { @apply gap-[0px]; }
+  .gyramais-row.gyramais-row-wide-gap-4 { @apply gap-[4px]; }
+  .gyramais-row.gyramais-row-wide-gap-8 { @apply gap-[8px]; }
+  .gyramais-row.gyramais-row-wide-gap-12 { @apply gap-[12px]; }
+  .gyramais-row.gyramais-row-wide-gap-16 { @apply gap-[16px]; }
+  .gyramais-row.gyramais-row-wide-gap-20 { @apply gap-[20px]; }
+  .gyramais-row.gyramais-row-wide-gap-24 { @apply gap-[24px]; }
+  .gyramais-row.gyramais-row-wide-gap-28 { @apply gap-[28px]; }
+  .gyramais-row.gyramais-row-wide-gap-32 { @apply gap-[32px]; }
+  .gyramais-row.gyramais-row-wide-gap-36 { @apply gap-[36px]; }
+  .gyramais-row.gyramais-row-wide-gap-40 { @apply gap-[40px]; }
+  .gyramais-row.gyramais-row-wide-gap-44 { @apply gap-[44px]; }
+  .gyramais-row.gyramais-row-wide-gap-48 { @apply gap-[48px]; }
+  .gyramais-row.gyramais-row-wide-gap-52 { @apply gap-[52px]; }
+  .gyramais-row.gyramais-row-wide-gap-56 { @apply gap-[56px]; }
+  .gyramais-row.gyramais-row-wide-gap-60 { @apply gap-[60px]; }
+  .gyramais-row.gyramais-row-wide-gap-64 { @apply gap-[64px]; }
+  .gyramais-row.gyramais-row-wide-gap-68 { @apply gap-[68px]; }
+  .gyramais-row.gyramais-row-wide-gap-72 { @apply gap-[72px]; }
+  .gyramais-row.gyramais-row-wide-gap-76 { @apply gap-[76px]; }
+  .gyramais-row.gyramais-row-wide-gap-80 { @apply gap-[80px]; }
+}
+
+.gyramais-row.gyramais-row-columns-1 { @apply grid-cols-1; }
+.gyramais-row.gyramais-row-columns-2 { @apply grid-cols-2; }
+.gyramais-row.gyramais-row-columns-3 { @apply grid-cols-3; }
+.gyramais-row.gyramais-row-columns-4 { @apply grid-cols-4; }
+.gyramais-row.gyramais-row-columns-5 { @apply grid-cols-5; }
+.gyramais-row.gyramais-row-columns-6 { @apply grid-cols-6; }
+.gyramais-row.gyramais-row-columns-7 { @apply grid-cols-7; }
+.gyramais-row.gyramais-row-columns-8 { @apply grid-cols-8; }
+.gyramais-row.gyramais-row-columns-9 { @apply grid-cols-9; }
+.gyramais-row.gyramais-row-columns-10 { @apply grid-cols-10; }
+.gyramais-row.gyramais-row-columns-11 { @apply grid-cols-11; }
+.gyramais-row.gyramais-row-columns-12 { @apply grid-cols-12; }
+
+.gyramais-row.gyramais-row-align-start { @apply items-start; }
+.gyramais-row.gyramais-row-align-center { @apply items-center; }
+.gyramais-row.gyramais-row-align-end { @apply items-end; }

package/src/components/Row/index.ts

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

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+
+const meta: Meta<typeof Switch> = {
+  title: "Library/Components/Switch",
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+  },
+  render: ({ disabled, checked = false }) => {
+    const [internalChecked, setInternalChecked] = useState(false);
+
+    useEffect(() => {
+      setInternalChecked(checked);
+    }, [checked]) 
+
+    return (
+      <Switch
+        disabled={disabled}
+        checked={internalChecked}
+        onCheckedChange={(checked) => setInternalChecked(checked)}  
+      />
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    disabled: false,
+    checked: false,
+  },
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import { Switch as PrimitiveSwitch } from '../../shadcn/switch';
+
+type SwitchProps = {
+  id?: string;
+  className?: string;
+  disabled?: boolean;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = ({
+  id,
+  className,
+  disabled = false,
+  checked = false,
+  onCheckedChange,
+}: SwitchProps) => {
+  return (
+    <PrimitiveSwitch
+      id={id}
+      className={classNames(
+        'gyramais-switch',
+        className,
+      )}
+      disabled={disabled}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+    />
+  );
+};
+
+export { Switch };

package/src/components/Switch/index.css

@@ -0,0 +1,37 @@
+.gyramais-switch {
+  @apply
+    relative
+    w-[44px]
+    h-[25px]
+    bg-[var(--dark-button-color)]
+    rounded-[999999px]
+    border-[1px]
+    border-[var(--border-color)]
+    duration-300;
+}
+.gyramais-switch[data-state='checked'],
+.gyramais-switch:hover {
+  @apply
+    bg-[var(--primary-button-color)]
+}
+.gyramais-switch:disabled {
+  @apply
+    grayscale
+    opacity-50
+}
+
+.gyramais-switch .switch-thumb {
+  @apply
+    block
+    w-[21px]
+    h-[21px]
+    bg-white
+    rounded-full
+    transition-[transform_100ms]
+    translate-x-[2px]
+    will-change-transform;
+}
+.gyramais-switch .switch-thumb[data-state='checked'] {
+  @apply
+    translate-x-[19px];
+}

package/src/components/Switch/index.ts

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