norma-library 0.4.9 → 0.5.1

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/docs/index.md

@@ -0,0 +1,118 @@
+## Passos Básicos
+
+### 1. Instalando o pacote em seu projeto
+
+Para instalar o pacote Norma em seu projeto execute o comando em seu terminal:
+
+### `npm install norma-library`
+
+## Components disponível e como usa-lo
+
+### Button
+
+`import { Button } from "norma-library`;
+
+`<Button label="Clique-me" onClick={handleButtonClick} />`;
+
+#### Props
+
+O componente `Button` aceita as seguintes propriedades:
+
+- `label` (string, obrigatório): O texto exibido no botão.
+- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
+- `color` (string): A cor do botão (inherit, primary, secondary, success, error, info, warning).
+- `size` (string): O tamanho do botão (small, medium, large).
+- `variant` (string): A variante do botão (text, outlined, contained).
+- `style` (React.CSSProperties): Estilos CSS adicionais.
+- `children` (ReactNode): Conteúdo adicional a ser exibido dentro do botão.
+- `onClick` (função): Uma função de callback para ser executada quando o botão for clicado.
+
+### Card
+
+`import { Card } from "norma-library`;
+
+`<Card title="Titulo do cartão" />conteúdo do card</card>`;
+
+#### Props
+
+O componente `Card` aceita as seguintes propriedades:
+
+- `title` (string, opcional): O título exibido no cabeçalho do card, se fornecido.
+- `children` (ReactNode, obrigatório): O conteúdo do card, que pode incluir qualquer componente ou conteúdo.
+
+### Modal
+
+`import { Modal} from "norma-library`;
+
+`<Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" onConfirm={handleConfirm}
+title="Titulo do modal">conteúdo do modal</modal>`;
+
+#### Props
+
+O componente `Modal` aceita as seguintes propriedades:
+
+- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
+- `children` (React.ReactElement | React.ReactElement[]): Elementos filhos do modal.
+- `open` (boolean): Indica se o modal está aberto.
+- `onClose` (função): Função de callback chamada quando o modal é fechado.
+- `className` (string): Classe CSS adicional para estilização.
+- `title` (string): Título do modal.
+- `full` (boolean): Indica se o modal deve ocupar toda a largura.
+- `onConfirm` (função): Função de callback chamada quando o botão "Confirmar" é clicado.
+
+### TextField
+
+`import { TextField } from "norma-library`;
+
+`<TextField id="outlined-basic" label="Outlined" variant="outlined" />`;
+
+#### Props
+
+O componente `TextField` aceita as seguintes propriedades:
+
+- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
+- `variant` (string): A variante do campo (standard, outlined, filled).
+- `value` (TextFieldValue): O valor do campo de entrada.
+- `onChange` (função): Função de callback chamada quando o valor do campo muda.
+- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
+- `required` (boolean): Indica se o campo de entrada é obrigatório.
+- `hasError` (boolean): Indica se o campo de entrada possui erro.
+- E outras propriedades relacionadas a estilos, tamanho, id, etc.
+
+### CheckBox
+
+`import { CheckBox } from "norma-library`;
+
+`<CheckBox id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;
+
+#### Props
+
+O componente `CheckBox` aceita as seguintes propriedades:
+
+- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
+- `checked ` (boolean): Indica se a caixa de seleção está marcada.
+- `onChange` (função): Função de callback chamada quando o valor do campo muda.
+- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
+- `color ` (string): A cor da caixa de seleção (primary, secondary, error, info, success, warning, default).
+- `size ` (string): O tamanho da caixa de seleção (small, medium).
+- `value` (TextFieldValue): O valor do campo de entrada.
+- E outras propriedades relacionadas a estilos, required, id, etc.
+
+### ProgressBar
+
+`import { ProgressBar } from "norma-library`;
+
+`<ProgressBar id="checkbox-basic" label="Checkbox" checked={checked} onChange={handleCheckboxChange} />`;
+
+#### Props
+
+O componente `ProgressBar` aceita as seguintes propriedades:
+
+- `sx` (SxProps<Theme>): Propriedade de estilo do Material-UI para estilizar o componente.
+- `usage` (number): O valor de uso para calcular a porcentagem da barra de progresso.
+- `value` (number): O valor da barra de progresso.
+- `total` (number): O valor total usado para calcular a porcentagem.
+- `label` (string): Texto do rótulo exibido acima da barra de progresso.
+- `colorCustom` (string): Cor personalizada para a barra de progresso.
+- `variant` ('determinate' | 'indeterminate' | 'buffer' | 'query'): O estilo da barra de progresso.
+- `color` (string): Cor da barra de progresso (primary, secondary, error, info, success, warning, inherit).

package/package.json

@@ -1,23 +1,43 @@
 {
   "name": "norma-library",
-  "version": "0.4.9",
+  "version": "0.5.1",
   "private": false,
-  "description": "Norma Library. A React UI kit.",
+  "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {
     "build": "tsc",
-    "start": "react-scripts start",
+    "start": "yarn storybook --no-manager-cache",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "start-docz": "docz dev --typescript --port=4000",
+    "build-docz": "docz build",
+    "serve-docz": "docz build && docz serve",
+    "clean-docz": "npx rimraf .docz && npx rimraf build/docz",
+    "pre-commit": "npx lint-staged",
+    "prepare": "husky install",
+    "prettier": "npx prettier \"./**/*.{js,json,ts,tsx}\" --write",
+    "tar": "tar -cvf norma-library.tar ./storybook-static",
+    "commit": "git-cz"
   },
-  "author": "José Roberto Miguel Filho",
+  "author": "Olos",
+  "type": "module",
   "module": "dist/esm/index.js",
   "main": "dist/esm/index.js",
   "license": "ISC",
-  "keywords": [],
+  "keywords": [
+    "react",
+    "design-system",
+    "material-ui",
+    "mui",
+    "typescripts",
+    "styled-components"
+  ],
   "devDependencies": {
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
+    "@emotion/core": "^11.0.0",
+    "@emotion/styled-base": "^11.0.0",
+    "@mdx-js/loader": "^2.3.0",
     "@mui/lab": "^5.0.0-alpha.145",
     "@storybook/addon-essentials": "^7.5.0-alpha.1",
     "@storybook/addon-interactions": "^7.5.0-alpha.1",
@@ -30,15 +50,47 @@
     "@storybook/testing-library": "^0.2.1-next.0",
     "@types/react": "^18.2.21",
     "autoprefixer": "^10.4.15",
+    "camelcase": "^8.0.0",
+    "chalk": "^5.3.0",
+    "commitizen": "^4.3.0",
+    "copy-to-clipboard": "^3.3.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "dotenv": "^16.3.1",
+    "git-cz": "^4.9.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "path": "^0.12.7",
     "postcss": "^8.4.29",
+    "postcss-prettify": "^0.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
     "storybook": "^7.5.0-alpha.1",
     "storybook-addon-dark-mode-toggle": "^0.0.6",
     "storybook-dark-mode": "^3.0.1",
-    "tailwindcss": "^3.3.3",
+    "style-loader": "^3.3.3",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2"
   },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "prepare-commit-msg": "exec < /dev/tty && npx cz --hook || true",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{md,mdx}": [
+      "yarn prettier",
+      "yarn eslint",
+      "git add"
+    ],
+    "*.{js,json,ts,tsx}": [
+      "yarn prettier",
+      "yarn eslint",
+      "git add"
+    ]
+  },
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -74,5 +126,10 @@
   "bugs": {
     "url": "https://github.com/OlosLive/norma-library/issues"
   },
-  "homepage": "https://github.com/OlosLive/norma-library"
+  "homepage": "https://github.com/OlosLive/norma-library",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
 }

package/src/components/Accordion.tsx

@@ -1,64 +1,47 @@
-import React, { useMemo } from "react";
-import {
-  AccordionDetails,
-  AccordionSummary,
-  Accordion as MuiAccordion,
-  ThemeProvider,
-  Typography,
-  useMediaQuery,
-} from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { AccordionBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-const AccordionStyled = styled(MuiAccordion)({});
-
-export const Accordion = ({
-  data = [],
-  defaultExpanded = false,
-  ...props
-}: AccordionBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const [expanded, setExpanded] = React.useState<boolean | string>(
-    defaultExpanded
-  );
-
-  const handleChange =
-    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-      console.log("Event ==> ", event);
-      setExpanded(isExpanded ? panel : false);
-    };
-
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <>
-        {data &&
-          data.map((item, key) => (
-            <AccordionStyled
-              expanded={expanded === item.id}
-              onChange={handleChange(item.id)}
-              key={key}
-              {...props}
-            >
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
-                aria-controls={`panel-${key}-content`}
-                id={`panel-${key}-header`}
-              >
-                <Typography sx={{ width: "66%", flexShrink: 0 }}>
-                  {item.label}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>{item.children}</AccordionDetails>
-            </AccordionStyled>
-          ))}
-      </>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import {
+  AccordionDetails,
+  AccordionSummary,
+  Accordion as MuiAccordion,
+  ThemeProvider,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { AccordionBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+const AccordionStyled = styled(MuiAccordion)({});
+
+export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded);
+
+  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+    console.log('Event ==> ', event);
+    setExpanded(isExpanded ? panel : false);
+  };
+
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <>
+        {data &&
+          data.map((item, key) => (
+            <AccordionStyled expanded={expanded === item.id} onChange={handleChange(item.id)} key={key} {...props}>
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls={`panel-${key}-content`}
+                id={`panel-${key}-header`}
+              >
+                <Typography sx={{ width: '66%', flexShrink: 0 }}>{item.label}</Typography>
+              </AccordionSummary>
+              <AccordionDetails>{item.children}</AccordionDetails>
+            </AccordionStyled>
+          ))}
+      </>
+    </ThemeProvider>
+  );
+};

package/src/components/Avatar.tsx

@@ -1,29 +1,22 @@
-import React, { useMemo } from "react";
-
-import {
-  ThemeProvider,
-  useMediaQuery,
-  Avatar as MuiVatar,
-} from "@mui/material";
-
-import { AvatarBaseProps } from "../interfaces";
-import { styled } from "@mui/material/styles";
-import { themes } from "../helpers";
-
-const AvatarStyled = styled(MuiVatar)({
-  textTransform: "none",
-  color: "currentcolor",
-});
-
-export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-  return (
-    <ThemeProvider theme={theme}>
-      <AvatarStyled src={src} {...props} />
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+
+import { ThemeProvider, useMediaQuery, Avatar as MuiVatar } from '@mui/material';
+
+import { AvatarBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+import { themes } from '../helpers';
+
+const AvatarStyled = styled(MuiVatar)({
+  textTransform: 'none',
+  color: 'currentcolor',
+});
+
+export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+  return (
+    <ThemeProvider theme={theme}>
+      <AvatarStyled src={src} {...props} />
+    </ThemeProvider>
+  );
+};

package/src/components/Badge.tsx

@@ -1,22 +1,19 @@
-import React, { useMemo } from "react";
-
-import { ThemeProvider, useMediaQuery, Badge as MuiBadge } from "@mui/material";
-
-import { BadgeBaseProps } from "../interfaces";
-import { styled } from "@mui/material/styles";
-import { themes } from "../helpers";
-
-const BadgeStyled = styled(MuiBadge)({});
-
-export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.dark : themes.light),
-    [prefersDarkMode]
-  );
-  return (
-    <ThemeProvider theme={theme}>
-      <BadgeStyled {...props} />
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+
+import { ThemeProvider, useMediaQuery, Badge as MuiBadge } from '@mui/material';
+
+import { BadgeBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+import { themes } from '../helpers';
+
+const BadgeStyled = styled(MuiBadge)({});
+
+export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.dark : themes.light), [prefersDarkMode]);
+  return (
+    <ThemeProvider theme={theme}>
+      <BadgeStyled {...props} />
+    </ThemeProvider>
+  );
+};

package/src/components/Button.tsx

@@ -1,34 +1,27 @@
-import React, { useMemo } from "react";
-import {
-  Button as MuiButton,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-import { ButtonBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
+import React, { useMemo } from 'react';
+import { Button as MuiButton, ThemeProvider, useMediaQuery } from '@mui/material';
+import { ButtonBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
 
 const ButtonStyled = styled(MuiButton)({
-  textTransform: "none",
-  "& .MuiButton-sizeLarge": {
-    height: "75px",
-    backgroundColor: "red",
+  textTransform: 'none',
+  '& .MuiButton-sizeLarge': {
+    height: '75px',
+    backgroundColor: 'red',
   },
 });
 
 export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.dark : themes.light),
-    [prefersDarkMode]
-  );
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.dark : themes.light), [prefersDarkMode]);
 
   return (
     <ThemeProvider theme={theme}>
       <ButtonStyled
         {...props}
         sx={{
-          color: props.variant === "contained" ? "#FFFF" : props.color,
+          color: props.variant === 'contained' ? '#FFFF' : props.color,
         }}
       >
         {label ? label : children}

package/src/components/Card.tsx

@@ -1,47 +1,44 @@
-import React, { useMemo } from "react";
-import { Card as MuiCard, ThemeProvider, useMediaQuery } from "@mui/material";
-import { CardBaseProps } from "../interfaces";
-import { palette, themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-import { ColorVariant } from "@/types";
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
-
-const CardStyled = styled(MuiCard)<{
-  borderColor?: ColorVariant;
-}>(({ borderColor }) => ({
-  padding: 16,
-  borderRadius: 5,
-  boxShadow: "0px 2px 8px #00000053",
-  borderLeft: borderColor ? `7px solid ${colorMap[borderColor]}` : "none",
-}));
-
-export const Card = ({
-  children,
-  border,
-  color = "inherit",
-  ...props
-}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <CardStyled borderColor={border ? color : undefined} {...props}>
-        {children}
-      </CardStyled>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { Card as MuiCard, ThemeProvider, useMediaQuery } from '@mui/material';
+import { CardBaseProps } from '../interfaces';
+import { palette, themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { ColorVariant } from '@/types';
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const CardStyled = styled(MuiCard)<{
+  borderColor?: ColorVariant;
+}>(({ borderColor }) => ({
+  padding: 16,
+  borderRadius: 5,
+  boxShadow: '0px 2px 8px #00000053',
+  borderLeft: borderColor ? `7px solid ${colorMap[borderColor]}` : 'none',
+}));
+
+export const Card = ({
+  children,
+  border,
+  color = 'inherit',
+  ...props
+}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CardStyled borderColor={border ? color : undefined} {...props}>
+        {children}
+      </CardStyled>
+    </ThemeProvider>
+  );
+};