pge-front-common 1.0.2 → 1.0.3

package/.storybook/main.ts

@@ -1,21 +1,22 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: [
-    // "../stories/**/*.mdx",
-    // "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../src/**/*.stories.tsx",
-  ],
-  addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-};
-export default config;
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    // "../stories/**/*.mdx",
+    // "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/**/*.stories.tsx",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -1,14 +1,25 @@
-import type { Preview } from "@storybook/react";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
+// .storybook/preview.jsx
+import { createGlobalStyle, ThemeProvider } from "styled-components";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+
+import theme from "../src/components/theme";
+
+const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+  body {
+    font-family: 'Open Sans', sans-serif !;
+  }
+`;
 
-export default preview;
+/* snipped for brevity */
+
+export const decorators = [
+  withThemeFromJSXProvider({
+    themes: {
+      default: theme,
+    },
+    defaultTheme: "default",
+    Provider: ThemeProvider,
+    GlobalStyles: GlobalStyle,
+  }),
+];

package/README.md

@@ -10,16 +10,14 @@ My Component Library é uma biblioteca de componentes React criada com TypeScrip
 - [Instalação](#instalação)
 - [Uso](#uso)
 - [Desenvolvimento](#desenvolvimento)
-- [Componentes](#componentes)
-- [Contribuição](#contribuição)
-- [Licença](#licença)
+- [Template Pull Request](#template)
 
 ## Instalação
 
 Instale a biblioteca usando npm:
 
 ```bash
-npm install pge-design-system
+npm i pge-front-common
 ```
 
 ## Uso
@@ -28,7 +26,7 @@ Instale a biblioteca usando npm:
 
 ```typescript
 import React from 'react';
-import { Button } from 'my-component-library';
+import { Button } from 'pge-front-common';
 
 const App: React.FC = () => {
   const handleClick = () => {
@@ -38,7 +36,7 @@ const App: React.FC = () => {
   return (
     <div>
       <h1>Hello, World!</h1>
-      <Button label="Click Me" onClick={handleClick} />
+        <Button variant="secondary" text="Text" />
     </div>
   );
 };
@@ -62,3 +60,21 @@ npm run storybook
 ```
 
 O Storybook estará disponível em http://localhost:6006.
+
+## Template Pull Request
+
+    # Qual é a Feature ou Bug?
+
+    # Como foi implementada a solução?
+
+
+    # Isso pode impactar outra parte do projeto?
+
+
+    # O que é esperado após esta implementação
+
+
+    # Existem alterações na UI/UX? (screenshots, gravações de tela)
+
+
+    # Como reproduzir esta feature/correção?

package/package.json

@@ -8,6 +8,7 @@
     "@storybook/addon-interactions": "^8.1.11",
     "@storybook/addon-links": "^8.1.11",
     "@storybook/addon-onboarding": "^8.1.11",
+    "@storybook/addon-themes": "^8.1.11",
     "@storybook/blocks": "^8.1.11",
     "@storybook/react": "^8.1.11",
     "@storybook/react-vite": "^8.1.11",
@@ -21,7 +22,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.1.11",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.2",
+    "@radix-ui/react-alert-dialog": "^1.1.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -36,9 +38,12 @@
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
   "name": "pge-front-common",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "keywords": [],
   "author": "sturmer cesar",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "styled-components": "^6.1.11"
+  }
 }

package/src/components/Button/Button.stories.tsx

@@ -2,51 +2,49 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { Button } from "./Button";
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<typeof Button> = {
   title: "Example/Button",
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered",
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: "color" },
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+    },
+    text: { control: "text" },
+    leftIcon: { control: "text" },
+    onClick: { action: "clicked" },
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
+  args: {
+    onClick: fn(),
+  },
+};
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   args: {
-    primary: true,
-    label: "Button",
+    variant: "primary",
+    text: "Primary Button",
   },
 };
 
 export const Secondary: Story = {
   args: {
-    label: "Button",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "large",
-    label: "Button",
+    variant: "secondary",
+    text: "Secondary Button",
   },
 };
 
-export const Small: Story = {
+export const WithIcon: Story = {
   args: {
-    size: "small",
-    label: "Button",
+    variant: "primary",
+    text: "Button with Icon",
+    leftIcon: "⭐", // You can use any ReactNode, here we use a simple star emoji for demonstration
   },
 };

package/src/components/Button/Button.tsx

@@ -1,52 +1,28 @@
-import React from "react";
-import "./button.css";
+import React, { ButtonHTMLAttributes } from "react";
+import styled from "styled-components";
+import * as s from "./styles";
 
-export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: "small" | "medium" | "large";
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant: "primary" | "secondary";
+  text: string;
+  leftIcon?: React.ReactNode;
 }
 
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = "medium",
-  backgroundColor,
-  label,
+const StyledButton = styled(s.BaseButton)<{ variant: "primary" | "secondary" }>`
+  ${({ variant }) =>
+    variant === "primary" ? s.PrimaryButton : s.SecondaryButton}
+`;
+
+export function Button({
+  variant,
+  text = "",
+  leftIcon,
   ...props
-}: ButtonProps) => {
-  const mode = primary
-    ? "storybook-button--primary"
-    : "storybook-button--secondary";
+}: ButtonProps) {
   return (
-    <button
-      type="button"
-      className={["storybook-button", `storybook-button--${size}`, mode].join(
-        " "
-      )}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
+    <StyledButton variant={variant} {...props}>
+      {leftIcon}
+      {text}
+    </StyledButton>
   );
-};
+}

package/src/components/Button/styles.tsx

@@ -0,0 +1,39 @@
+import styled, { css } from "styled-components";
+
+// Estilos base compartilhados
+export const BaseButton = styled.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+// Estilos do botão primário
+export const PrimaryButton = css`
+  width: fit-content;
+  height: fit-content;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  color: #fff;
+  font-weight: 700;
+  background: ${({ theme }) => theme.colors.primary};
+`;
+
+// Estilos do botão secundário
+export const SecondaryButton = css`
+  width: fit-content;
+  height: fit-content;
+  padding: 12px 8px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.primary};
+  background: transparent;
+`;

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal } from "./Modal";
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Example/Modal",
+  component: Modal,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    isModalOpen: { control: "boolean" },
+    onOpenChange: { action: "onOpenChange" },
+    children: { control: "text" },
+  },
+  args: {
+    isModalOpen: false,
+    onOpenChange: fn(),
+    children: "This is the modal content.",
+    title: "Title",
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => {
+    const [isModalOpen, setIsModalOpen] = useState(args.isModalOpen);
+
+    return (
+      <Modal
+        {...args}
+        isModalOpen={isModalOpen}
+        onOpenChange={(open) => {
+          setIsModalOpen(open);
+          args.onOpenChange(open);
+        }}
+      >
+        {args.children}
+      </Modal>
+    );
+  },
+};
+
+export const Default: Story = {
+  ...Template,
+  args: {
+    isModalOpen: true,
+    children: "This is the modal content.",
+  },
+};
+
+export const Closed: Story = {
+  ...Template,
+  args: {
+    isModalOpen: false,
+    children: "This is the modal content.",
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import * as Alert from "@radix-ui/react-alert-dialog";
+import {
+  AlertOverlay,
+  ContentContainer,
+  ModalHeaderContainer,
+  ModalHeaderText,
+  CloseBtn,
+  ContentChildren,
+} from "./styles";
+import { CloseIcon } from "./iconeClose";
+
+export interface ModalProps {
+  isModalOpen: boolean;
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+  children: React.ReactNode;
+  title: string;
+}
+
+export const Modal = ({
+  isModalOpen,
+  onOpenChange,
+  children,
+  title,
+}: ModalProps) => {
+  return (
+    <Alert.Root open={isModalOpen} onOpenChange={onOpenChange}>
+      <Alert.Portal>
+        <AlertOverlay />
+        <ContentContainer>
+          <ModalHeaderContainer>
+            <ModalHeaderText>{title}</ModalHeaderText>
+            <CloseBtn onClick={() => onOpenChange(!isModalOpen)}>
+              <CloseIcon />
+              {/* <CustomIcon className="material-icons-outlined">close</CustomIcon> */}
+            </CloseBtn>
+          </ModalHeaderContainer>
+
+          <ContentChildren>{children}</ContentChildren>
+        </ContentContainer>
+      </Alert.Portal>
+    </Alert.Root>
+  );
+};

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

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import ModalConfirm from "./index";
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Example/ModalConfirm",
+  component: ModalConfirm,
+  parameters: {
+    layout: "centered",
+  },
+
+  args: {
+    isModalOpen: false,
+    onOpenChange: fn(),
+    children: "conteúdo",
+  },
+} satisfies Meta<typeof ModalConfirm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => {
+    const [isModalOpen, setIsModalOpen] = useState(args.isModalOpen);
+
+    return (
+      <ModalConfirm
+        {...args}
+        isModalOpen={isModalOpen}
+        onOpenChange={(open) => {
+          setIsModalOpen(open);
+          args.onOpenChange(open);
+        }}
+      >
+        {args.children}
+      </ModalConfirm>
+    );
+  },
+};
+
+export const Default: Story = {
+  ...Template,
+  args: {
+    isModalOpen: true,
+    children: "conteúdo",
+  },
+};

package/src/components/Modal/ModalConfirm/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Modal } from "../Modal";
+import { Button } from "../../Button/Button";
+import * as S from "./styles";
+
+export interface ModalProps {
+  isModalOpen: boolean;
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+  children: React.ReactNode;
+}
+
+const ModalConfirm: React.FC<ModalProps> = ({
+  isModalOpen,
+  onOpenChange,
+  children,
+}) => {
+  return (
+    <Modal
+      isModalOpen={isModalOpen}
+      onOpenChange={onOpenChange}
+      title="Título (Resumo do conteúdo)"
+    >
+      {children}
+      <S.ContainerModalConfirm>
+        <Button variant="secondary" text="Cancelar" />
+        <Button variant="primary" text="Ação" />
+      </S.ContainerModalConfirm>
+    </Modal>
+  );
+};
+
+export default ModalConfirm;

package/src/components/Modal/ModalConfirm/styles.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const ContainerModalConfirm = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+
+  margin-top: 10%;
+`;

package/src/components/Modal/iconeClose.tsx

@@ -0,0 +1,17 @@
+import React, { SVGProps } from "react";
+
+export const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="14"
+    height="17"
+    viewBox="0 0 14 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.4251 10.1343L2.5251 15.8543C2.34176 16.0684 2.10843 16.1754 1.8251 16.1754C1.54176 16.1754 1.30843 16.0684 1.1251 15.8543C0.941764 15.6403 0.850098 15.3679 0.850098 15.0372C0.850098 14.7064 0.941764 14.4341 1.1251 14.2201L6.0251 8.50003L1.1251 2.78002C0.941764 2.566 0.850098 2.29362 0.850098 1.96287C0.850098 1.63212 0.941764 1.35974 1.1251 1.14573C1.30843 0.931714 1.54176 0.824707 1.8251 0.824707C2.10843 0.824707 2.34176 0.931714 2.5251 1.14573L7.4251 6.86574L12.3251 1.14573C12.5084 0.931714 12.7418 0.824707 13.0251 0.824707C13.3084 0.824707 13.5418 0.931714 13.7251 1.14573C13.9084 1.35974 14.0001 1.63212 14.0001 1.96287C14.0001 2.29362 13.9084 2.566 13.7251 2.78002L8.8251 8.50003L13.7251 14.2201C13.9084 14.4341 14.0001 14.7064 14.0001 15.0372C14.0001 15.3679 13.9084 15.6403 13.7251 15.8543C13.5418 16.0684 13.3084 16.1754 13.0251 16.1754C12.7418 16.1754 12.5084 16.0684 12.3251 15.8543L7.4251 10.1343Z"
+      fill="white"
+    />
+  </svg>
+);

package/src/components/Modal/styles.tsx

@@ -0,0 +1,75 @@
+import styled, { keyframes } from "styled-components";
+
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const AlertOverlay = styled.div`
+  background: rgb(61 62 63 / 0.5);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const ModalHeaderContainer = styled.div`
+  width: 410px;
+  height: 56px;
+  border-radius: 6px 6px 0 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background: ${({ theme }) => theme.colors.primary};
+  padding-left: 24px;
+  padding-right: 24px;
+`;
+
+const ModalHeaderText = styled.div`
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  text-align: left;
+  color: ${({ theme }) => theme.colors.base.white};
+`;
+
+const CloseBtn = styled.button`
+  all: unset;
+  cursor: pointer;
+`;
+
+const CustomIcon = styled.div`
+  color: ${({ theme }) => theme.colors.base.white};
+`;
+
+const ContentContainer = styled.div`
+  border-radius: 6px;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 500px;
+  height: auto;
+  background: ${({ theme }) => theme.colors.base.white};
+`;
+
+const ContentChildren = styled.div`
+  padding: 20px;
+`;
+
+export {
+  AlertOverlay,
+  ModalHeaderContainer,
+  ModalHeaderText,
+  CloseBtn,
+  CustomIcon,
+  ContentContainer,
+  ContentChildren,
+};

package/src/components/theme.ts

@@ -0,0 +1,16 @@
+import { DefaultTheme } from "styled-components";
+
+const theme: DefaultTheme = {
+  colors: {
+    primary: "#005a92",
+    secondary: "",
+    //    success:
+
+    base: {
+      white: "#FFFFFF",
+      black: "",
+    },
+  },
+};
+
+export default theme;

package/src/index.ts

@@ -1,3 +1,4 @@
 import { Button } from "./components/Button/Button";
+import { Modal } from "./components/Modal/Modal";
 
-export { Button };
+export { Button, Modal };

package/src/styled-components.d.ts

@@ -0,0 +1,16 @@
+// styled-components.d.ts
+import "styled-components";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    colors: {
+      primary: string;
+      secondary: string;
+
+      base: {
+        white: string;
+        black: string;
+      };
+    };
+  }
+}

package/src/components/Button/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}