takeat-design-system-ui-kit 0.0.0

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { Icon } from ".";
+import { icons } from "../../utils/icons";
+import { IconList, Item, SearchInput } from "./styles";
+import { defaultTheme, ICON_NAMES } from "../../utils/consts";
+import { Meta, StoryObj } from "@storybook/react";
+import { Subtitle } from "../StoriesComponents/styles";
+
+const meta: Meta<typeof Icon> = {
+  title: "Design System/Icon",
+  component: Icon,
+  parameters: {
+    componentSubtitle: (
+      <Subtitle>
+        Componente para renderizar os ícones do sistema.
+        <br /> Na lista abaixo você pode pesquisar os ícones disponíveis e
+        copiar o código para usar no seu projeto. Exemplo: Ao clicar no icone
+        "takeatIconFilled" o código{" "}
+        {`
+        <Icon icon="takeatIconFilled" />`}{" "}
+        será copiado para a área de transferência.
+      </Subtitle>
+    ),
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: "text",
+      },
+    },
+    color: {
+      description: "Cor customizada do ícone (hexadecimal). Exemplo: `#ff0000`",
+      control: {
+        type: "color",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Example: Story = {
+  name: "Exemplo",
+  args: {
+    icon: "takeatIconFilled",
+  },
+};
+
+export const List: Story = {
+  name: "Lista de icones",
+  render: () => {
+    const [search, setSearch] = useState("");
+
+    return (
+      <div>
+        <SearchInput
+          placeholder="Buscar"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+
+        <IconList>
+          {Object.keys(icons)
+            .filter((icon) => icon.includes(search))
+            .map((icon) => (
+              <Item
+                key={icon}
+                onClick={() =>
+                  navigator.clipboard.writeText('<Icon icon="' + icon + '" />')
+                }
+              >
+                <Icon
+                  icon={icon as (typeof ICON_NAMES)[number]}
+                  color={defaultTheme.colors.primary.default}
+                />
+                <span style={{ color: defaultTheme.colors.neutral.darker }}>
+                  {icon}
+                </span>
+              </Item>
+            ))}
+        </IconList>
+      </div>
+    );
+  },
+};

package/src/components/Icon/index.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import { icons } from "../../utils/icons";
+import { ICON_NAMES, defaultTheme } from "../../utils/consts";
+
+interface IconProps extends React.HTMLAttributes<SVGElement> {
+  icon: (typeof ICON_NAMES)[number];
+  color?: string;
+  size?: number;
+}
+
+export const Icon = forwardRef(function Icon({
+  icon,
+  color = defaultTheme.colors.neutral.darker,
+  size = 26,
+  ...rest
+}: IconProps) {
+  const IconComponent = icons[icon];
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return <IconComponent fill={color} {...rest} height={size} width={size} />;
+});

package/src/components/Icon/styles.ts

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { spacing } from "../../utils/consts";
+
+// Componente
+
+// Stories
+
+export const IconList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${spacing.xs};
+`;
+
+export const Item = styled.div`
+  flex-basis: 245px;
+  display: flex;
+  gap: ${spacing.xs};
+  align-items: center;
+  padding: ${spacing.xs};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.light};
+  border-radius: ${spacing.xs};
+  cursor: pointer;
+  transition: border-color 0.3s;
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.neutral.default};
+  }
+`;
+
+export const SearchInput = styled.input`
+  padding: 8px 16px;
+  font-size: 16px;
+  border-radius: 8px;
+  border: 1px solid grey;
+  margin-bottom: 16px;
+`;

package/src/components/Layouts/ColumnsGrid/ColumnsGrid.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MockComponent } from "../../MockComponent";
+import { ColumnsGrid } from "./index";
+import { Subtitle } from "../../StoriesComponents/styles";
+
+const meta: Meta<typeof ColumnsGrid> = {
+  title: "Layout/Columns Grid",
+  component: ColumnsGrid,
+  parameters: {
+    componentSubtitle: (
+      <Subtitle>
+        Componente para separar os elementos em colunas, mantendo a altura de
+        cada componente, criando o efeito que temos no cardápio do Totem. É uma
+        div e aceita todas as props que um div pode receber. Pode ser utilizada
+        com o styled components da seguinte forma:
+        <br /> const StyledColumnsGrid = styled(ColumnsGrid)``
+      </Subtitle>
+    ),
+  },
+  argTypes: {
+    columnCount: {
+      description: "Quantidade de colunas a serem exibidas",
+      control: {
+        type: "number",
+      },
+    },
+    gap: {
+      description:
+        "Espaçamento entre os componentes. Caso seja passado apenas um valor, será aplicado o mesmo espaçamento na horizontal e vertical. Caso sejam passados dois valores, o primeiro será o espaçamento vertical e o segundo o horizontal. Formato: `10px` ou `10px 20px`",
+      control: {
+        type: "text",
+      },
+    },
+    children: {
+      description: "Componentes a serem exibidos dentro do grid",
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const exampleArray = Array.from({ length: 10 }, (_, i) => i + 1);
+
+export default meta;
+
+type Story = StoryObj<typeof ColumnsGrid>;
+
+export const Example: Story = {
+  args: {
+    columnCount: 3,
+    gap: "10px",
+  },
+  render: (args) => (
+    <ColumnsGrid {...args}>
+      {exampleArray.map((item) => {
+        const randomHeight = Math.floor(Math.random() * 100);
+        return (
+          <MockComponent style={{ height: randomHeight }} key={item}>
+            {item}
+          </MockComponent>
+        );
+      })}
+    </ColumnsGrid>
+  ),
+};

package/src/components/Layouts/ColumnsGrid/index.tsx

@@ -0,0 +1,35 @@
+import { Children, forwardRef, ReactNode } from "react";
+import { Column, ColumnsGridContainer } from "./styles";
+
+interface ColumnsGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  columnCount: number;
+  gap?: string;
+  children: Iterable<ReactNode>;
+}
+
+export const ColumnsGrid = forwardRef(
+  (
+    { columnCount, gap = "10px", children, ...props }: ColumnsGridProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const array: Array<ReactNode> = Array.from(
+      { length: columnCount },
+      (_) => []
+    );
+
+    Children.forEach(children, (child, index) => {
+      const column = array[index % columnCount];
+      if (Array.isArray(column)) {
+        column.push(child);
+      }
+    });
+
+    return (
+      <ColumnsGridContainer ref={ref} gap={gap} {...props}>
+        {array.map((column) => {
+          return <Column gap={gap}>{column}</Column>;
+        })}
+      </ColumnsGridContainer>
+    );
+  }
+);

package/src/components/Layouts/ColumnsGrid/styles.ts

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+interface ColumnsGridContainerProps {
+  gap: string;
+}
+
+export const ColumnsGridContainer = styled.div<ColumnsGridContainerProps>`
+  display: flex;
+  gap: ${({ gap }) => gap};
+  width: 100%;
+`;
+
+interface ColumnProps {
+  gap: string;
+}
+
+export const Column = styled.div<ColumnProps>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ gap }) => gap};
+`;

package/src/components/Layouts/Grid/Grid.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MockComponent } from "../../MockComponent";
+import { Grid } from "./index";
+import { Subtitle } from "../../StoriesComponents/styles";
+
+const meta: Meta<typeof Grid> = {
+  title: "Layout/Grid",
+  component: Grid,
+  parameters: {
+    componentSubtitle: (
+      <Subtitle>
+        Componente para facilitar a criação de um grid com elementos de
+        diferentes larguras. É uma div e aceita todas as props que um div pode
+        receber. Pode ser utilizada com o styled components da seguinte forma:
+        <br /> const StyledGrid = styled(Grid)``
+      </Subtitle>
+    ),
+  },
+  argTypes: {
+    elementsPerRow: {
+      description:
+        "Array com a quantidade de elementos por linha. Exemplo: `[1, 4, 2, 3]`",
+      control: {
+        type: "object",
+      },
+    },
+    gap: {
+      description:
+        "Espaçamento entre os componentes. Caso seja passado apenas um valor, será aplicado o mesmo espaçamento na horizontal e vertical. Caso sejam passados dois valores, o primeiro será o espaçamento vertical e o segundo o horizontal. Formato: `10px` ou `10px 20px`",
+      control: {
+        type: "text",
+      },
+    },
+    children: {
+      description: "Componentes a serem exibidos dentro do grid",
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+const exmapleArray = Array.from({ length: 10 }, (_, i) => i + 1);
+
+export const Example: Story = {
+  args: {
+    elementsPerRow: [1, 4, 2, 3],
+    gap: "8px",
+  },
+  render: (args) => (
+    <Grid {...args}>
+      {exmapleArray.map((item) => (
+        <MockComponent key={item}>{item}</MockComponent>
+      ))}
+    </Grid>
+  ),
+};

package/src/components/Layouts/Grid/index.tsx

@@ -0,0 +1,42 @@
+import { cloneElement, forwardRef, ReactElement } from "react";
+import { mmcArray } from "../../../utils/functions";
+import { GridContainer } from "./styles";
+
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  elementsPerRow?: number[];
+  children: ReactElement[];
+  gap?: string;
+}
+
+export const Grid = forwardRef(
+  (
+    { elementsPerRow, gap = "8px", children, ...props }: GridProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const colCount = mmcArray(elementsPerRow || [1]);
+    let start = 0;
+
+    return (
+      <GridContainer ref={ref} gap={gap} colCount={colCount} {...props}>
+        {elementsPerRow?.map((rowCount) => {
+          const elementsToReturn = children
+            .slice(start, start + rowCount)
+            .map((child) => {
+              console.log("child: ", child.props);
+              return cloneElement(child, {
+                style: {
+                  ...child.props.style,
+                  gridColumn: `span ${colCount / rowCount}`,
+                },
+              });
+            });
+          start += rowCount;
+          return elementsToReturn;
+        })}
+        {children.slice(start).map((child) => {
+          return child;
+        })}
+      </GridContainer>
+    );
+  }
+);

package/src/components/Layouts/Grid/styles.ts

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+interface GridContainerProps {
+  colCount: number;
+  gap: string;
+}
+
+export const GridContainer = styled.div<GridContainerProps>`
+  display: grid;
+  grid-template-columns: repeat(${({ colCount }) => colCount}, 1fr);
+  gap: ${({ gap }) => gap};
+
+  .red {
+    background-color: red;
+  }
+`;

package/src/components/Layouts/GridArea/GridArea.stories.tsx

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MockComponent } from "../../MockComponent";
+import { GridArea } from "./index";
+import { Subtitle } from "../../StoriesComponents/styles";
+
+const meta: Meta<typeof GridArea> = {
+  title: "Layout/Grid Area",
+  component: GridArea,
+  parameters: {
+    componentSubtitle: (
+      <Subtitle>
+        Componente para facilitar a criação de um grid com elementos de
+        diferentes larguras. É uma div e aceita todas as props que um div pode
+        receber. Pode ser utilizada com o styled components da seguinte forma:
+        <br /> const StyledGridArea = styled(GridArea)``
+      </Subtitle>
+    ),
+  },
+  argTypes: {
+    areaTemplate: {
+      description:
+        "Array bidimensional com a quantidade de colunas que cada componente deve ocupar. Os valores positivos representam a quantidade de colunas que o componente deve ocupar, enquanto valores negativos 'renderizam' um espaço em branco. A quantidade de colunas do grid é determinada pela soma de colunas do primeiro array. Exemplo: `[[1, 2, 3, 4, 1], [5, -2, 1]]`",
+      control: {
+        type: "object",
+      },
+    },
+    gap: {
+      description:
+        "Espaçamento entre os componentes. Caso seja passado apenas um valor, será aplicado o mesmo espaçamento na horizontal e vertical. Caso sejam passados dois valores, o primeiro será o espaçamento vertical e o segundo o horizontal. Formato: `10px` ou `10px 20px`",
+      control: {
+        type: "text",
+      },
+    },
+    children: {
+      description: "Componentes a serem exibidos dentro do grid",
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GridArea>;
+
+const exmapleArray = Array.from({ length: 10 }, (_, i) => i + 1);
+
+export const Example: Story = {
+  args: {
+    areaTemplate: [
+      [1, 2, 3, 4, 1],
+      [5, -2, 1],
+    ],
+    gap: "8px",
+  },
+  render: (args) => (
+    <GridArea {...args}>
+      {exmapleArray.map((item) => (
+        <MockComponent key={item}>{item}</MockComponent>
+      ))}
+    </GridArea>
+  ),
+};

package/src/components/Layouts/GridArea/index.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from "react";
+import { GridAreaContainer } from "./styles";
+
+interface GridAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  areaTemplate: number[][];
+  gap: string;
+  children: React.ReactElement[];
+}
+
+export const GridArea = forwardRef(
+  (
+    { areaTemplate, gap = "8px", children, ...props }: GridAreaProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const colCount = areaTemplate[0].reduce((acc, cur) => {
+      return acc + Math.abs(cur);
+    }, 0);
+    let start = 0;
+
+    return (
+      <GridAreaContainer ref={ref} colCount={colCount} gap={gap} {...props}>
+        {areaTemplate.map((row) => {
+          const elementsCount = row.length;
+          const positiveCount = row.filter((el) => el > 0).length;
+
+          const elementsToReturn = children
+            .slice(start, start + elementsCount)
+            .map((child, idx) => {
+              if (row[idx] < 0) {
+                return (
+                  <div style={{ gridColumn: `span ${Math.abs(row[idx])}` }} />
+                );
+              }
+              return React.cloneElement(child, {
+                style: {
+                  ...child.props.style,
+                  gridColumn: `span ${row[idx]}`,
+                },
+              });
+            });
+
+          start += positiveCount;
+          return elementsToReturn;
+        })}
+        {children.slice(start + 1).map((child) => {
+          return child;
+        })}
+      </GridAreaContainer>
+    );
+  }
+);

package/src/components/Layouts/GridArea/styles.ts

@@ -0,0 +1,12 @@
+import { styled } from "styled-components";
+
+interface GridAreaContainerProps {
+  colCount: number;
+  gap: string;
+}
+
+export const GridAreaContainer = styled.div<GridAreaContainerProps>`
+  display: grid;
+  grid-template-columns: repeat(${({ colCount }) => colCount}, 1fr);
+  gap: ${({ gap }) => gap};
+`;

package/src/components/Layouts/ResponsiveGrid/ResponsiveGrid.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MockComponent } from "../../MockComponent";
+import { ResponsiveGrid } from "./index";
+import { ResizeableContainer, Subtitle } from "../../StoriesComponents/styles";
+
+const meta: Meta = {
+  title: "Layout/Responsive Grid",
+  component: ResponsiveGrid,
+  parameters: {
+    componentSubtitle: (
+      <Subtitle>
+        Componente para facilitar a criação de um grid responsivo. É uma div e
+        aceita todas as props que um div pode receber. Pode ser utilizada com o
+        styled components da seguinte forma:
+        <br /> const StyledGridArea = styled(GridArea)``
+      </Subtitle>
+    ),
+  },
+  argTypes: {
+    minWidth: {
+      description: "Largura mínima que cada componente pode ter",
+      control: {
+        type: "text",
+      },
+    },
+    fixedWidth: {
+      description:
+        "Largura fixa que cada componente deve ter. Caso seja passado, o minWidth será ignorado",
+      control: {
+        type: "text",
+      },
+    },
+    gap: {
+      description:
+        "Espaçamento entre os componentes. Caso seja passado apenas um valor, será aplicado o mesmo espaçamento na horizontal e vertical. Caso sejam passados dois valores, o primeiro será o espaçamento vertical e o segundo o horizontal. Formato: `10px` ou `10px 20px`",
+      control: {
+        type: "text",
+      },
+    },
+    children: {
+      description: "Componentes a serem exibidos dentro do grid",
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ResponsiveGrid>;
+
+const exmapleArray = Array.from({ length: 10 }, (_, i) => i + 1);
+
+export const Example: Story = {
+  args: {
+    minWidth: "100px",
+    gap: "8px",
+    fixedWidth: "",
+  },
+  render: (args) => (
+    <ResizeableContainer>
+      <ResponsiveGrid {...args}>
+        {exmapleArray.map((item) => (
+          <MockComponent key={item}>{item}</MockComponent>
+        ))}
+      </ResponsiveGrid>
+      Ajuste o tamanho do container para ver o comportamento do grid {"->"}
+    </ResizeableContainer>
+  ),
+};

package/src/components/Layouts/ResponsiveGrid/index.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import { ResponsiveGridContainer } from "./styles";
+
+interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactElement[];
+  gap?: string;
+  minWidth?: string;
+  fixedWidth?: string;
+}
+
+export const ResponsiveGrid = forwardRef(
+  (
+    {
+      gap = "8px",
+      minWidth = "auto",
+      fixedWidth,
+      children,
+      ...props
+    }: ResponsiveGridProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    return (
+      <ResponsiveGridContainer
+        ref={ref}
+        fixedWidth={fixedWidth}
+        minWidth={minWidth}
+        gap={gap}
+        {...props}
+      >
+        {children}
+      </ResponsiveGridContainer>
+    );
+  }
+);

package/src/components/Layouts/ResponsiveGrid/styles.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+interface ResponsiveGridContainerProps {
+  gap: string;
+  minWidth: string;
+  fixedWidth?: string;
+}
+
+export const ResponsiveGridContainer = styled.div<ResponsiveGridContainerProps>`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    ${({ minWidth, fixedWidth }) =>
+      fixedWidth ? fixedWidth : `minmax(${minWidth}, 1fr)`}
+  );
+  justify-content: space-between;
+  gap: ${({ gap }) => gap};
+`;

package/src/components/MockComponent/index.tsx

@@ -0,0 +1,9 @@
+import { StyledDiv } from "./styles";
+
+interface MockComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const MockComponent = ({ children, ...rest }: MockComponentProps) => {
+  return <StyledDiv {...rest}>{children}</StyledDiv>;
+};

package/src/components/MockComponent/styles.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const StyledDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  background-color: lightblue;
+  border-radius: 8px;
+  border: 1px solid blue;
+  font-size: 20px;
+  font-family: Poppins, sans-serif;
+  font-weight: 700;
+`;