@gyramais/gyra-design 0.1.0

package/src/components/Input/index.css

@@ -0,0 +1,74 @@
+.gyramais-input-controller {
+  @apply
+    relative
+}
+
+.gyramais-input-controller .gyramais-input-placeholder {
+  @apply
+    pointer-events-none
+    absolute
+    top-1/2
+    -translate-y-1/2
+    left-[26px]
+    text-sm
+    text-[#a9a9a9]
+    duration-300
+
+    md:text-base;
+}
+.gyramais-input-controller .gyramais-input-placeholder.gyramais-input-with-value {
+  @apply
+    top-0
+    text-sm
+    font-medium;
+}
+.gyramais-input-controller .gyramais-input-placeholder.gyramais-input-with-value:not(.gyramais-input-placeholder-disabled) {
+  @apply
+    text-[var(--primary-button-color)];
+}
+.gyramais-input-controller .gyramais-input-placeholder.gyramais-input-with-value::before {
+  @apply
+    absolute
+    content-['']
+    top-1/2
+    left-0
+    w-full
+    h-[2px]
+    scale-x-[115%]
+    bg-[#eeeded]
+    -z-10;
+}
+.gyramais-input-controller .gyramais-input-placeholder.gyramais-input-with-value:not(.gyramais-input-placeholder-disabled)::before {
+  @apply
+    bg-white
+}
+
+.gyramais-input {
+  @apply
+    w-full
+    min-h-[40px]
+    rounded-[16px]
+    border-[1px]
+    border-[var(--border-color)]
+    py-3
+    px-6
+    text-sm
+    font-normal
+    duration-300
+
+    md:min-h-[58px]
+    md:rounded-[20px]
+    md:text-base
+    md:py-4;
+}
+.gyramais-input:disabled {
+  @apply
+    cursor-not-allowed
+    opacity-50
+}
+.gyramais-input-controller:hover .gyramais-input:hover:not(:disabled),
+.gyramais-input:focus:not(:disabled) {
+  @apply
+    shadow-[inset_0_0_0_1px_var(--primary-button-color)]
+    border-[var(--primary-button-color)]
+}

package/src/components/Input/index.ts

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

package/src/components/Label/Label.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../shadcn/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/Label/index.ts

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

package/src/components/Layout/Content.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type ContentProps = {
+  id?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Content = ({
+  id,
+  className,
+  children,
+}: ContentProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-layout-content",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Content };

package/src/components/Layout/Header.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type HeaderProps = {
+  id?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Header = ({
+  id,
+  className,
+  children,
+}: HeaderProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-layout-header",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Header };

package/src/components/Layout/Layout.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Layout } from "./Layout";
+import { Header } from "./Header";
+import { Sider } from "./Sider";
+import { Content } from "./Content";
+
+
+const meta: Meta = {
+  title: "Library/Components/Layout",
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: ({ header, sider }) => (
+    <Layout>
+      {header && (
+        <Header className="bg-[var(--border-color)]">
+          1
+        </Header>
+      )}
+
+      <Layout withSider>
+        {sider && (
+          <Sider className="bg-[var(--secondary-button-color)] min-w-[200px] h-[400px]">
+            2
+          </Sider>
+        )}
+
+        <Content className="bg-[var(--primary-button-color)] !h-[240px]">
+          3
+        </Content>
+      </Layout>
+    </Layout>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  argTypes: {
+    header: {
+      control: 'boolean',
+    },
+    sider: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    header: true,
+    sider: true,
+  }
+}

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type LayoutProps = {
+  id?: string;
+  className?: string;
+  withSider?: boolean;
+  children?: React.ReactNode;
+}
+
+const Layout = ({
+  id,
+  className,
+  withSider,
+  children,
+}: LayoutProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-layout",
+        withSider ? 'gyramais-layout-with-sider' : '',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Layout };

package/src/components/Layout/Sider.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type SiderProps = {
+  id?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Sider = ({
+  id,
+  className,
+  children,
+}: SiderProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-layout-sider",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Sider };

package/src/components/Layout/index.css

@@ -0,0 +1,37 @@
+.gyramais-layout {
+  @apply
+    flex
+    flex-col
+    h-full;
+}
+.gyramais-layout.gyramais-layout-with-sider {
+  @apply
+    flex-row;
+}
+
+.gyramais-layout-content {
+  @apply
+    w-full
+    h-fit
+    max-w-[1440px]
+    m-auto
+    p-4;
+}
+
+.gyramais-layout-header {
+  @apply
+    sticky
+    w-full
+    h-fit
+    top-0
+    p-4
+    z-[90];
+}
+
+.gyramais-layout-sider {
+  @apply
+    sticky
+    top-0
+    px-4
+    py-8;
+}

package/src/components/Layout/index.ts

@@ -0,0 +1,4 @@
+export * from "./Layout";
+export * from "./Header";
+export * from "./Sider";
+export * from "./Content";

package/src/components/List/List.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { List } from "./List";
+
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const meta: Meta<typeof List> = {
+  title: "Library/Components/List",
+  component: List,
+  parameters: {
+    layout: 'padded',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof List>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    data: [{
+      date: new Date(),
+      icon: (<SettingsIcon />),
+      title: 'Alteração nas configurações',
+      subtitle: 'Ajuste na cor do tema',
+    }, {
+      date: new Date(),
+      icon: (<SettingsIcon />),
+      title: 'Alteração nas configurações',
+    }, {
+      date: new Date(),
+      icon: (<SettingsIcon />),
+      title: 'Alteração no permissionamento',
+      subtitle: 'Usuários podem remover clientes',
+    }],
+  },
+}
+
+export const WithoutIcon: Story = {
+  args: {
+    id: '',
+    className: '',
+    data: [{
+      date: new Date(),
+      title: 'Alteração nas configurações',
+      subtitle: 'Ajuste na cor do tema',
+    }, {
+      date: new Date(),
+      title: 'Alteração nas configurações',
+    }, {
+      date: new Date(),
+      title: 'Alteração no permissionamento',
+      subtitle: 'Usuários podem remover clientes',
+    }],
+  },
+}

package/src/components/List/List.tsx

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

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

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

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

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

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

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

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

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

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