pge-front-common 1.0.2 → 2.0.0

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

@@ -1,44 +1,49 @@
-{
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-onboarding": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@types/react": "^18.3.3",
-    "postcss": "^8.4.39",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup": "^4.18.0",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.1.11",
-    "typescript": "^5.5.2"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "rollup -c"
-  },
-  "main": "lib/index.js",
-  "module": "lib/index.esm.js",
-  "types": "lib/index.d.ts",
-  "name": "pge-front-common",
-  "version": "1.0.2",
-  "description": "",
-  "keywords": [],
-  "author": "sturmer cesar",
-  "license": "ISC"
-}
+{
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.0",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@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",
+    "@storybook/test": "^8.1.11",
+    "@types/react": "^18.3.3",
+    "postcss": "^8.4.39",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.18.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.1.11",
+    "typescript": "^5.5.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rollup -c"
+  },
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "name": "pge-front-common",
+  "version": "2.0.0",
+  "description": "",
+  "keywords": [],
+  "author": "sturmer cesar",
+  "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,42 @@
+import React from "react";
+import * as Alert from "@radix-ui/react-alert-dialog";
+import {
+  AlertOverlay,
+  ContentContainer,
+  ModalHeaderContainer,
+  ModalHeaderText,
+  CloseBtn,
+  ContentChildren,
+} from "./styles";
+import { IconCLose } from "../../icons/close-icon";
+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)}>
+              <IconCLose />
+            </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%;
+`;