norma-library 0.6.6 → 0.6.62

package/.babelrc.json

@@ -1,18 +1,18 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "chrome": 100,
-          "safari": 15,
-          "firefox": 91
-        }
-      }
-    ],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
-  ],
-  "plugins": []
-}
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

package/.prettierignore

@@ -1,11 +1,11 @@
-*.json
-.husky/
-.storybook/
-storybook-static/
-scripts/
-lib/
-build/
-dist/
-src/styles/*
-*.d.ts
+*.json
+.husky/
+.storybook/
+storybook-static/
+scripts/
+lib/
+build/
+dist/
+src/styles/*
+*.d.ts
 .rollup.cache

package/.prettierrc.json

@@ -1,20 +1,20 @@
-{
-  "printWidth": 120,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "arrowParens": "avoid",
-  "overrides": [
-    {
-      "files": ["docs/**/*.md", "docs/src/pages/**/*.{js,tsx}", "docs/data/**/*.{js,tsx}"],
-      "options": {
-        "printWidth": 85
-      }
-    },
-    {
-      "files": ["docs/pages/blog/**/*.md"],
-      "options": {
-        "printWidth": 82
-      }
-    }
-  ]
-}
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "overrides": [
+    {
+      "files": ["docs/**/*.md", "docs/src/pages/**/*.{js,tsx}", "docs/data/**/*.{js,tsx}"],
+      "options": {
+        "printWidth": 85
+      }
+    },
+    {
+      "files": ["docs/pages/blog/**/*.md"],
+      "options": {
+        "printWidth": 82
+      }
+    }
+  ]
+}

package/.storybook/main.ts

@@ -1,20 +1,20 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm'
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -1,15 +1,15 @@
-import type { Preview } from '@storybook/react';
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -1,44 +1,44 @@
-<!-- markdownlint-disable-next-line -->
-<p align="center">
-  <img width="120" height="120" src="https://www.olos.com.br/wp-content/uploads/2023/03/cropped-selo-olos-1-180x180.png" alt="Olos logo">
-</p>
-<h1 align="center">Norma DS </h1>
-<div align="center">
-Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
-
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
-[![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-
-[Documentation](#Documentation) |
-[Contributing](#Contributing) |
-[Changelog](#Changelog) |
-[License](#License)
-
----
-
-</div>
-
-## Configurações
-
-- [React v18](https://react.dev/)
-- [TypeScript](https://www.typescriptlang.org/)
-- UI development with [Storybook](https://storybook.js.org/)
-- Unit test with [Testing-library](https://testing-library.com/)
-- Linting with [Eslint](https://eslint.org/) and code formatting with [Prettier](https://prettier.io/)
-- Conventional commit messages with [Commitlint][commitlint-url]
-- Build the library with [Rollup][rollup-url]
-- Automated release with [changesets][changesets-url]
-
-# Documentação
-
-### Instalação
-Para instalação das dependencias:
-``` 
-npm install
-```
-### Execução do projeto
-Para utilizar o Storybook:
-```
-npm run storybook
+<!-- markdownlint-disable-next-line -->
+<p align="center">
+  <img width="120" height="120" src="https://www.olos.com.br/wp-content/uploads/2023/03/cropped-selo-olos-1-180x180.png" alt="Olos logo">
+</p>
+<h1 align="center">Norma DS </h1>
+<div align="center">
+Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
+
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
+[![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
+[Documentation](#Documentation) |
+[Contributing](#Contributing) |
+[Changelog](#Changelog) |
+[License](#License)
+
+---
+
+</div>
+
+## Configurações
+
+- [React v18](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- UI development with [Storybook](https://storybook.js.org/)
+- Unit test with [Testing-library](https://testing-library.com/)
+- Linting with [Eslint](https://eslint.org/) and code formatting with [Prettier](https://prettier.io/)
+- Conventional commit messages with [Commitlint][commitlint-url]
+- Build the library with [Rollup][rollup-url]
+- Automated release with [changesets][changesets-url]
+
+# Documentação
+
+### Instalação
+Para instalação das dependencias:
+``` 
+npm install
+```
+### Execução do projeto
+Para utilizar o Storybook:
+```
+npm run storybook
 ```

package/commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = {extends: ['@commitlint/config-conventional']}

package/dist/esm/helpers/colors.js

@@ -2,7 +2,7 @@ import { __assign } from "tslib";
 import { createTheme } from '@mui/material/styles';
 export var getPalette = function () {
     return {
-        primary: '#db6619',
+        primary: '#fc7f29',
         primaryLight: '#FFDB9F',
         primaryMedium: '#FFA84C',
         primaryDark: '#B74608',

package/docs/index.md

@@ -1,118 +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).
+## 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).