takeat-design-system-ui-kit 0.0.0

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,75 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../Button";
+import { useState } from "react";
+import Modal from ".";
+import { defaultTheme } from "../../utils/consts";
+import { Icon } from "../Icon";
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  title: "Design System/Modal",
+  argTypes: {
+    open: {
+      description: "Variável que diz se o modal está aberto ou fechado",
+      control: {
+        type: "boolean",
+      },
+    },
+    toggle: {
+      description: "Função chamada ao clicar fora do modal",
+      control: {
+        disable: true,
+      },
+    },
+    overlayStyles: {
+      description:
+        "Estilos CSS para a div que fica atras do modal e que chama o função toggle ao ser clicada",
+      control: {
+        type: "object",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Example: Story = {
+  render: () => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+      <div style={{ height: 400, width: 500, backgroundColor: "lightblue" }}>
+        <Button onClick={() => setModalOpen(!modalOpen)}>Open Modal</Button>
+
+        <Modal
+          open={modalOpen}
+          toggle={() => setModalOpen(!modalOpen)}
+          overlayStyles={{ width: "100%", height: "100%" }}
+        >
+          <Modal.Header>
+            <h1>Modal de teste</h1>
+            <h2>Subtitulo do modal de teste</h2>
+          </Modal.Header>
+          <Modal.Body>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+            dignissimos tempore repellendus expedita quia voluptatibus
+            asperiores inventore vero. Sed neque sit quisquam consequatur
+            blanditiis perferendis dolorum asperiores nisi omnis non!{" "}
+            <Icon icon="takeatIconFilled" />
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={() => setModalOpen(!modalOpen)}>Fechar</Button>
+            <Button
+              customColor={defaultTheme.colors.green.default}
+              onClick={() => setModalOpen(!modalOpen)}
+            >
+              Salvar
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  },
+};

package/src/components/Modal/index.tsx

@@ -0,0 +1,81 @@
+import React, { forwardRef } from "react";
+import {
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalTitles,
+} from "./styles";
+import { Icon } from "../Icon";
+import { Divider } from "../Divider";
+
+interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  toggle?: () => void;
+  overlayStyles?: React.CSSProperties;
+}
+
+const Modal = forwardRef(function Modal(
+  { open, toggle, overlayStyles, children, ...props }: ModalProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const modifiedChildren = React.Children.map(
+    children,
+    (child: React.ReactNode) => {
+      if (React.isValidElement(child) && child.props.hasClose) {
+        // @ts-ignore
+        return React.cloneElement(child, { toggle });
+      }
+      return child;
+    }
+  );
+
+  return (
+    <ModalOverlay
+      ref={ref}
+      style={overlayStyles}
+      open={open}
+      onClick={() => toggle?.()}
+    >
+      <ModalContent onClick={(e) => e.stopPropagation()} {...props}>
+        {modifiedChildren}
+      </ModalContent>
+    </ModalOverlay>
+  );
+});
+
+interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  toggle?: () => void;
+  hasClose?: boolean;
+}
+
+const Header = ({ children, hasClose, toggle, ...props }: ModalHeaderProps) => {
+  return (
+    <ModalHeader {...props}>
+      <ModalTitles>{children}</ModalTitles>
+      {hasClose && <Icon icon="close" onClick={() => toggle?.()} />}
+    </ModalHeader>
+  );
+};
+
+interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Body = ({ children, ...props }: ModalBodyProps) => {
+  return <ModalBody {...props}>{children}</ModalBody>;
+};
+
+interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Footer = ({ children, ...props }: ModalFooterProps) => {
+  return (
+    <>
+      <Divider />
+      <ModalFooter {...props}>{children}</ModalFooter>
+    </>
+  );
+};
+
+const ModalComponent = Object.assign(Modal, { Header, Body, Footer });
+
+export default ModalComponent;

package/src/components/Modal/styles.ts

@@ -0,0 +1,75 @@
+import styled from "styled-components";
+
+interface ModalOverlayProps {
+  open?: boolean;
+}
+
+export const ModalOverlay = styled.div<ModalOverlayProps>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100dvw;
+  height: 100dvh;
+  padding: ${({ theme }) => theme.spacing.m};
+  background-color: transparent;
+  display: ${({ open }) => (open ? "flex" : "none")};
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(2px);
+`;
+
+export const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.s};
+  background-color: white;
+  border-radius: ${({ theme }) => theme.radius.m};
+  box-shadow: ${({ theme }) => theme.shadows.default};
+  padding: ${({ theme }) => theme.spacing.s};
+  width: 100%;
+  height: 100%;
+  min-width: fit-content;
+`;
+
+export const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  svg {
+    cursor: pointer;
+  }
+`;
+
+export const ModalTitles = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  h1 {
+    color: ${({ theme }) => theme.colors.neutral.darker};
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+  }
+
+  h2 {
+    color: ${({ theme }) => theme.colors.neutral.dark};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+  }
+`;
+
+export const ModalBody = styled.div`
+  flex-grow: 1;
+`;
+
+export const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${({ theme }) => theme.spacing.xs};
+`;

package/src/components/NotificationBanner/NotificationBanner.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { NotificationBanner } from ".";
+
+const meta: Meta<typeof NotificationBanner> = {
+  component: NotificationBanner,
+  title: "Design System/NotificationBanner",
+  argTypes: {
+    variant: {
+      control: {
+        type: "inline-radio",
+        options: ["success", "error", "warning", "info"],
+      },
+    },
+    children: {
+      description: "Conteúdo do banner. Pode ser um texto ou um componente.",
+      control: {
+        type: "text",
+      },
+    },
+    isOpen: {
+      description: "Controla a visibilidade do banner.",
+      control: {
+        type: "boolean",
+      },
+    },
+    onClose: {
+      description:
+        "Função chamada ao fechar o banner. Habilita o botão de fechar.",
+      action: "onClose",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationBanner>;
+
+export const Example: Story = {
+  args: {
+    isOpen: true,
+    variant: "info",
+    children: (
+      <div>
+        <h2>Titulo</h2>
+        <p>conteúdo do banner</p>
+      </div>
+    ),
+  },
+};

package/src/components/NotificationBanner/index.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from "react";
+import { ContentWrapper, NotificationBannerWrapper } from "./styles";
+import { Icon } from "../Icon";
+
+interface NotificationBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: keyof typeof BANNER_OPTIONS;
+  onClose?: () => void;
+  isOpen?: boolean;
+}
+
+const BANNER_OPTIONS = {
+  success: {
+    color: "green",
+    icon: <Icon icon="check" />,
+  },
+  warning: {
+    color: "yellow",
+    icon: <Icon icon="warning" />,
+  },
+  error: {
+    color: "red",
+    icon: <Icon icon="closeCircle" />,
+  },
+  info: {
+    color: "blue",
+    icon: <Icon icon="info" />,
+  },
+};
+
+export const NotificationBanner = forwardRef(function NotificationBanner(
+  {
+    variant = "info",
+    onClose,
+    isOpen,
+    children,
+    ...props
+  }: NotificationBannerProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <NotificationBannerWrapper
+      ref={ref}
+      color={BANNER_OPTIONS[variant].color}
+      isOpen={isOpen}
+      {...props}
+    >
+      {BANNER_OPTIONS[variant].icon}
+      <ContentWrapper>{children}</ContentWrapper>
+      {!!onClose && (
+        <Icon className="close-icon" icon="close" onClick={() => onClose()} />
+      )}
+    </NotificationBannerWrapper>
+  );
+});

package/src/components/NotificationBanner/styles.ts

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+interface NotificationBannerWrapperProps {
+  color: string;
+  isOpen?: boolean;
+}
+
+export const NotificationBannerWrapper = styled.div<NotificationBannerWrapperProps>`
+  padding: ${({ theme }) => theme.spacing.s};
+  border-radius: ${({ theme }) => theme.radius.m};
+  background-color: ${({ theme, color }) =>
+    theme.colors[color as keyof typeof theme.colors].lightest + "66"};
+  border: 1px solid
+    ${({ theme, color }) =>
+      theme.colors[color as keyof typeof theme.colors].lighter};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.s};
+  align-items: flex-start;
+  transition: all 0.3s;
+
+  color: ${({ theme }) => theme.colors.neutral.dark};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+
+  svg {
+    flex-shrink: 0;
+    fill: ${({ theme, color }) =>
+      theme.colors[color as keyof typeof theme.colors].default};
+  }
+
+  .close-icon {
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.neutral.dark};
+    height: 18px;
+  }
+
+  transform-origin: top;
+  ${({ isOpen }) =>
+    isOpen
+      ? "pointer-events: auto; transform: scaleY(1);"
+      : " pointer-events: none; transform: scaleY(0);"}
+`;
+
+export const ContentWrapper = styled.div`
+  flex-grow: 1;
+`;

package/src/components/SingleTab/SingleTab.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SingleTab } from ".";
+import { Icon } from "../Icon";
+import { ICON_NAMES } from "../../utils/consts";
+
+const meta: Meta<typeof SingleTab> = {
+  component: SingleTab,
+  title: "Design System/SingleTab",
+  argTypes: {
+    children: {
+      description: "Conteúdo da tab. Pode ser um texto ou um componente.",
+    },
+    counter: {
+      description:
+        "Número a ser exibido no badge. Se deixado em branco, o badge não será exibido.",
+      control: {
+        type: "number",
+        allowNegative: false,
+      },
+    },
+    icon: {
+      description:
+        "Ícone a ser exibido no início do botão. Se deixado em branco, nenhum ícone será exibido.",
+      control: {
+        type: "select",
+        options: ICON_NAMES,
+      },
+    },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["default", "transparent"],
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SingleTab>;
+
+export const Example: Story = {
+  args: {
+    children: "Exemplo Tab",
+    icon: <Icon icon="bell" />,
+    counter: 9,
+    isSelected: false,
+    variant: "default",
+  },
+};

package/src/components/SingleTab/index.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import { NumberTag, Tab, TransparentTab } from "./styles";
+
+interface SingleTabProps extends React.HTMLAttributes<HTMLButtonElement> {
+  counter?: number;
+  icon?: React.ReactNode;
+  isSelected?: boolean;
+  variant?: keyof typeof TAB_OPTIONS;
+}
+
+export const TAB_OPTIONS = {
+  default: Tab,
+  transparent: TransparentTab,
+};
+
+export const SingleTab = forwardRef(function SingleTab(
+  {
+    icon,
+    counter,
+    isSelected,
+    children,
+    variant = "default",
+    ...props
+  }: SingleTabProps,
+  ref: React.Ref<HTMLButtonElement>
+) {
+  const TabToRender = TAB_OPTIONS[variant];
+
+  return (
+    <TabToRender ref={ref} isSelected={isSelected} {...props}>
+      {icon}
+      {children}
+      {!isNaN(Number(counter)) && <NumberTag>{counter}</NumberTag>}
+    </TabToRender>
+  );
+});

package/src/components/SingleTab/styles.ts

@@ -0,0 +1,110 @@
+import styled from "styled-components";
+
+interface TabProps {
+  isSelected?: boolean;
+  disabled?: boolean;
+}
+
+export const Tab = styled.button<TabProps>`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xs};
+  padding: ${({ theme }) => theme.spacing.xxs + " " + theme.spacing.xs};
+  border: none;
+  background-color: ${({ theme }) => theme.colors.neutral.lightest};
+  border-radius: ${({ theme }) =>
+    theme.radius.m + " " + theme.radius.m + " 0 0"};
+  width: fit-content;
+  cursor: pointer;
+
+  color: ${({ theme }) => theme.colors.neutral.dark};
+  font-family: ${({ theme }) => theme.typography.family.default};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+
+  svg {
+    fill: ${({ theme }) => theme.colors.neutral.dark};
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral.lighter};
+  }
+
+  ${({ isSelected, theme }) =>
+    isSelected &&
+    `
+    background-color: #fff;
+    color: ${theme.colors.neutral.darker};
+
+    svg {
+        fill: ${theme.colors.neutral.darker};
+    }
+    `}
+
+  &:disabled {
+    cursor: default;
+    color: ${({ theme }) => theme.colors.neutral.light};
+    background-color: ${({ theme }) => theme.colors.neutral.lighter};
+
+    svg {
+      fill: ${({ theme }) => theme.colors.neutral.light};
+    }
+  }
+`;
+
+export const NumberTag = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.neutral.light};
+  border-radius: ${({ theme }) => theme.radius.s};
+  padding: ${({ theme }) => theme.spacing.xxs};
+  min-width: 19px;
+
+  color: #fff;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 11px;
+`;
+
+export const TransparentTab = styled(Tab)`
+  background-color: transparent;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    height: 2px;
+    width: 0px;
+    background-color: ${({ theme }) => theme.colors.neutral.default};
+    border-radius: 2px;
+    transition: all 0.2s;
+  }
+
+  &:hover {
+    background-color: transparent;
+  }
+
+  &:hover::after {
+    width: calc(100% - 16px);
+    left: 8px;
+  }
+
+  ${({ isSelected, theme }) =>
+    isSelected &&
+    `
+        &::after {
+        width: calc(100% - 16px);
+        left: 8px;
+        background-color: ${theme.colors.primary.default};
+        }
+    `}
+`;

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Spinner } from ".";
+
+const meta: Meta<typeof Spinner> = {
+  component: Spinner,
+  title: "Design System/Spinner",
+  argTypes: {
+    size: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Spinner>;
+
+export const Example: Story = {};

package/src/components/Spinner/index.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react";
+import { SpinnerStyles } from "./styles";
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  color?: string;
+  size?: number;
+}
+
+export const Spinner = forwardRef(function Spinner(
+  { color, size, ...props }: SpinnerProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  return <SpinnerStyles ref={ref} size={size} color={color} {...props} />;
+});

package/src/components/Spinner/styles.ts

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+interface SpinnerStylesProps {
+  color?: string;
+  size?: number;
+}
+
+export const SpinnerStyles = styled.div<SpinnerStylesProps>`
+  width: ${({ size }) => size || 22}px;
+  height: ${({ size }) => size || 22}px;
+  background-image: ${({ theme, color }) => `conic-gradient(
+    ${color || theme.colors.primary.default} 0%,
+    transparent 5%,
+    transparent 10%,
+    ${color || theme.colors.primary.default} 100%
+  )`};
+  mask-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M9.249 0.645999C9.63764 0.588245 10.0334 0.685283 10.3513 0.916254C10.6691 1.14722 10.8837 1.49369 10.9488 1.88116C11.0139 2.26864 10.9243 2.66619 10.6994 2.98835C10.4745 3.31051 10.1322 3.53157 9.746 3.604C7.99897 3.90027 6.41326 4.80555 5.26996 6.15934C4.12666 7.51314 3.49963 9.22802 3.5 11C3.5 12.9891 4.29018 14.8968 5.6967 16.3033C7.10322 17.7098 9.01088 18.5 11 18.5V21.5C5.201 21.5 0.5 16.8 0.5 11C0.5 5.855 4.226 1.49 9.249 0.645999ZM15.892 3.29799C16.0235 3.15124 16.1827 3.03185 16.3604 2.94664C16.5381 2.86143 16.7309 2.81208 16.9277 2.8014C17.1245 2.79072 17.3214 2.81892 17.5073 2.8844C17.6932 2.94987 17.8643 3.05134 18.011 3.18299C19.11 4.16702 19.9888 5.37197 20.59 6.71901C21.1913 8.06606 21.5013 9.52486 21.5 11C21.5 16.8 16.799 21.5 11 21.5V18.5C12.5182 18.5 14.0006 18.0393 15.2513 17.1788C16.502 16.3182 17.4621 15.0984 18.0047 13.6805C18.5473 12.2626 18.6469 10.7135 18.2902 9.23782C17.9335 7.76216 17.1373 6.42949 16.007 5.41599C15.7109 5.15036 15.5325 4.778 15.5109 4.38081C15.4893 3.98361 15.6264 3.59412 15.892 3.29799Z'/></svg>");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  animation: spin 2s linear infinite;
+
+  @keyframes spin {
+    0% {
+      rotate: 0deg;
+    }
+    100% {
+      rotate: 360deg;
+    }
+  }
+`;

package/src/components/StoriesComponents/styles.ts

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const Subtitle = styled.h2`
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+export const ResizeableContainer = styled.div`
+  width: 100%;
+  border: 1px solid black;
+  padding: 8px;
+  border-radius: 8px 8px 0 8px;
+  resize: horizontal;
+  overflow: auto;
+`;