@gyramais/gyra-design 0.1.0 → 0.1.2

package/src/components/List/List.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import dayjs from 'dayjs';
-import classNames from "classnames";
-import { Row } from "../Row";
-import { Col } from "../Col";
-
-import "./index.css";
-
-type ListProps = {
-  id?: string;
-  className?: string;
-  data?: Array<{
-    title: string;
-    subtitle?: string;
-    date: Date;
-    icon?: any;
-  }>;
-}
-
-const formatDateToLong = (date: Date) => {
-  if (!date) {
-    return '';
-  }
-
-  const translateDayOfWeek: {
-    [key: string]: string;
-  } = {
-    'Monday': 'Segunda-feira',
-    'Tuesday': 'Terça-feira',
-    'Wednesday': 'Quarta-feira',
-    'Thursday': 'Quinta-feira',
-    'Friday': 'Sexta-feira',
-    'Saturday': 'Sábado',
-    'Sunday': 'Domingo',
-  };
-
-  const auxDate = new Date(date);
-  const referenceDate = new Date(
-    auxDate.getUTCFullYear(),
-    auxDate.getUTCMonth(),
-    auxDate.getUTCDate(),
-  );
-
-  const weekDayToLong = dayjs(referenceDate).format('dddd');
-  const weekDayToLongTranslated = translateDayOfWeek[weekDayToLong];
-  const dateToLongTranslated = referenceDate.toLocaleDateString('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' });
-
-  return `${weekDayToLongTranslated}, ${dateToLongTranslated}`;
-};
-
-const List = ({
-  id,
-  className,
-  data = [],
-}: ListProps) => {
-  return (
-    <Row
-      id={id}
-      className={classNames(
-        'gyramais-list',
-        className,
-      )}
-      columns={1}
-    >
-      {data.map((item, index) => (
-        <Col span={1} key={index} className="gyramais-list-item">
-          {item.icon && (
-            <div className="gyramais-list-item-icon">
-              {item.icon}
-            </div>
-          )}
-
-          <Row columns={2} align="center" gap={8}>
-            <Col span={{ mobile: 2, desktop: 1 }}>
-              <Row columns={1}>
-                <Col span={1} className="gyramais-list-item-title">
-                  {item.title}
-                </Col>
-
-                {item.subtitle && (
-                  <Col span={1} className="gyramais-list-item-description">
-                    {item.subtitle}
-                  </Col>
-                )}
-              </Row>
-            </Col>
-
-            <Col span={{ mobile: 2, desktop: 1 }} className="gyramais-list-item-date">
-              {formatDateToLong(item.date)}
-            </Col>
-          </Row>
-        </Col>
-      ))}
-    </Row>
-  );
-};
-
-export { List };

package/src/components/List/index.css

@@ -1,54 +0,0 @@
-.gyramais-list .gyramais-list-item {
-  @apply
-    flex
-    items-center
-    px-6
-    py-4;
-}
-.gyramais-list .gyramais-list-item:nth-child(even) {
-  @apply
-    bg-[#F6F8F7];
-}
-
-.gyramais-list .gyramais-list-item-icon {
-  @apply
-    min-h-[40px]
-    min-w-[40px]
-    h-10
-    w-10
-    flex
-    items-center
-    justify-center
-    mr-3
-    rounded-full
-    bg-[var(--dark-button-color)]
-}
-.gyramais-list .gyramais-list-item-icon svg {
-  @apply
-    text-[24px]
-    text-[var(--primary-button-color)];
-}
-
-.gyramais-list .gyramais-list-item-title {
-  @apply
-    font-semibold
-    text-base
-    leading-5;
-}
-
-.gyramais-list .gyramais-list-item-description {
-  @apply
-    text-xs
-    text-[#5C7263]
-    leading-4;
-}
-
-.gyramais-list .gyramais-list-item-date {
-  @apply
-    w-full
-    text-start
-    text-sm
-    text-[#3E4C42]
-
-    md:text-end;
-}

package/src/components/List/index.ts

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

package/src/components/Loading/Loading.stories.tsx

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Loading } from "./Loading";
-
-const meta: Meta<typeof Loading> = {
-  title: "Library/Components/Loading",
-  component: Loading,
-  parameters: {
-    layout: 'centered',
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Loading>;
-
-export const Default: Story = {
-  args: {
-    id: '',
-    className: '',
-    size: 40,
-    color: 'var(--primary-button-color)',
-  },
-}

package/src/components/Loading/Loading.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import "./index.css";
-
-type LoadingProps = {
-  id?: string;
-  className?: string;
-  size?: number;
-  color?: string;
-}
-
-const Loading = ({
-  id,
-  className,
-  size = 40,
-  color = 'var(--primary-button-color)',
-}: LoadingProps) => {
-  return (
-    <div
-      id={id}
-      className={classNames(
-        "gyramais-loading",
-        className,
-      )}
-      style={{
-        width: size,
-        height: size,
-      }}
-    >
-      <div
-        style={{
-          width: size,
-          height: size,
-          borderWidth: Math.max((size / 10) - 1, 2),
-          borderColor: `${color} ${color} transparent transparent`,
-        }}
-      />
-
-      <div
-        style={{
-          width: size,
-          height: size,
-          borderWidth: Math.max((size / 10) - 1, 2),
-          borderColor: `${color} ${color} transparent transparent`,
-        }}
-      />
-    </div>
-  );
-};
-
-export { Loading };

package/src/components/Loading/index.css

@@ -1,36 +0,0 @@
-.gyramais-loading {
-  @apply
-    relative;
-}
-
-.gyramais-loading div {
-  @apply
-    box-border
-    block
-    absolute
-    border-solid
-    rounded-[50%]
-    animate-[lds-ring_1s_cubic-bezier(1,1,1,1)_infinite];
-}
-.gyramais-loading div:nth-child(1) {
-  @apply
-    animate-[lds-ring-1_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite];
-}
-
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes lds-ring-1 {
-  0% {
-    transform: rotate(0deg) scale(.73);
-  }
-  100% {
-    transform: rotate(360deg) scale(.73);
-  }
-}

package/src/components/Loading/index.ts

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

package/src/components/Logo/Logo.stories.tsx

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Logo } from "./Logo";
-
-const meta: Meta<typeof Logo> = {
-  title: "Library/Components/Logo",
-  component: Logo,
-  parameters: {
-    layout: 'centered',
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Logo>;
-
-export const Dark: Story = {
-  args: {
-    id: '',
-    className: '',
-    type: 'dark',
-    width: '400',
-    height: 'auto',
-  },
-}
-
-export const White: Story = {
-  args: {
-    id: '',
-    className: '',
-    type: 'white',
-    width: '400',
-    height: 'auto',
-  },
-}

package/src/components/Logo/Logo.tsx

@@ -1,39 +0,0 @@
-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

@@ -1,9 +0,0 @@
-.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

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

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

@@ -1,55 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,96 +0,0 @@
-.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

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

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

@@ -1,33 +0,0 @@
-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',
-  },
-}