norma-library 0.4.3 → 0.4.6

package/src/styles/custom.css

@@ -0,0 +1,5 @@
+.appearance-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

package/src/styles/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --transparent: transparent;
+  --current: currentColor;
+  --primary: #fe761c;
+  --secondary: #43bbf2;
+  --error: #d63643;
+  --warning: #ffc300;
+  --info: #71d5f7;
+  --success: #6bc235;
+  --helper: #5a2a79;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

package/src/types/index.ts

@@ -0,0 +1,220 @@
+import {
+  ButtonProps as MuiButtonProps,
+  IconButtonProps as MuiIconButtonProps,
+  TextFieldProps as MuiTextFieldProps,
+  CheckboxProps as MuiCheckBoxProps,
+  MenuProps as MuiDropDownProps,
+  ChipProps as MuiChipProps,
+  LinearProgressProps as MuiLinearProgressProps,
+  SliderProps as MuiSliderProps,
+  AccordionProps as MuiAccordionProps,
+  TabsProps as MuiTabsProps,
+  SelectProps as MuiSelectProps,
+  PaperProps as MuiPaperProps,
+  SvgIconProps,
+  ModalProps,
+  CardProps as MuiCardProps,
+} from "@mui/material";
+
+import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
+
+import { iconsSVG } from "../components/Svgs";
+
+export type ColorVariant =
+  | "inherit"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "error"
+  | "info"
+  | "warning";
+
+export type TextFieldColorVariant =
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning";
+
+export type CheckBoxColorVariant =
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning"
+  | "default";
+
+export type SizeVariant = "small" | "medium" | "large";
+export type ButtonVariant = "text" | "outlined" | "contained";
+export type DropVariant = "menu" | "selectedMenu";
+export type TagVariant = "outlined" | "contained";
+export type TabsVariant = "standard" | "scrollable" | "fullWidth";
+export type ProgressVariant =
+  | "determinate"
+  | "indeterminate"
+  | "buffer"
+  | "query";
+
+export type MuiButtonBaseProps = Omit<
+  MuiButtonProps,
+  "sx" | "color" | "size" | "variant"
+>;
+
+export type MuiIconButtonBaseProps = Omit<
+  MuiIconButtonProps,
+  "sx" | "color" | "size" | "variant"
+>;
+
+export type TextFieldValue = string | number;
+export type TextFieldVariant = "standard" | "outlined" | "filled";
+export type TextFieldSizeVariant = "small" | "medium";
+export type DirectionVariant = "vertical" | "horizontal";
+export type PaperVariant = "elevation" | "outlined";
+
+export type MuiTextFieldBaseProps = Omit<
+  MuiTextFieldProps,
+  | "onChange"
+  | "onBlur"
+  | "onFocus"
+  | "defaultValue"
+  | "size"
+  | "value"
+  | "id"
+  | "fullWidth"
+  | "helperText"
+  | "type"
+  | "InputProps"
+  | "InputLabelProps"
+  | "autoComplete"
+  | "label"
+  | "helperText"
+  | "InputLabelProps"
+  | "margin"
+  | "maxRows"
+  | "minRows"
+  | "multiline"
+  | "name"
+  | "placeholder"
+  | "rows"
+  | "select"
+  | "SelectProps"
+  | "sx"
+  | "autoFocus"
+  | "error"
+  | "classes"
+  | "children"
+  | "color"
+  | "variant"
+>;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsSizeOverrides {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsColorOverrides {}
+
+export type MuiCheckBoxBaseProps = Omit<MuiCheckBoxProps, "sx">;
+export type MuiModalBaseProps = Omit<ModalProps, "sx">;
+export type MuiCardBaseProps = Omit<MuiCardProps, "sx">;
+export type MuiDropDownBaseProps = Omit<MuiDropDownProps, "sx" | "variant">;
+export type MuiTagBaseProps = Omit<MuiChipProps, "sx" | "color">;
+export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, "sx" | "color">;
+export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx">;
+export type MuiTabsBaseProps = Omit<
+  MuiTabsProps,
+  "sx" | "children" | "onChange" | "variant" | "value"
+>;
+export type MuiAccordionBaseProps = Omit<
+  MuiAccordionProps,
+  "sx" | "children" | "defaultExpanded" | "onChange"
+>;
+export type MuiSelectBaseProps = Omit<
+  MuiSelectProps,
+  "sx" | "value" | "onClose" | "onOpen" | "input" | "label"
+>;
+
+export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
+
+export type IconScale =
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "2xlarge"
+  | "3xlarge";
+
+export type IconColors =
+  | "inherit"
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning"
+  | "white"
+  | "black";
+
+export const scaleSize: Record<IconScale, number> = {
+  xsmall: 14,
+  small: 20,
+  medium: 24,
+  large: 28,
+  xlarge: 32,
+  "2xlarge": 36,
+  "3xlarge": 40,
+};
+
+export type SVGIconProps = {
+  icon: React.ReactNode;
+} & SvgIconProps;
+
+export type IconType = keyof typeof iconsSVG;
+export type IconKey = keyof typeof iconsSVG;
+
+export type MuiRadioBaseProps = Omit<
+  MuiSwitchBaseProps,
+  "checkedIcon" | "color" | "icon" | "type" | "checked" | "size"
+>;
+
+export type OptionsRadios = {
+  label: string;
+  value: string;
+  size?: TextFieldSizeVariant;
+};
+
+export type OnAction = {
+  label: string;
+  action: React.ReactEventHandler<{}>;
+  color?: ColorVariant;
+  size?: SizeVariant;
+  variant?: ButtonVariant;
+};
+
+export type DataAccordion = {
+  label: string;
+  id: string;
+  children: NonNullable<React.ReactNode>;
+};
+
+export type DataTabs = {
+  label: string;
+  id: string;
+  children: NonNullable<React.ReactNode>;
+};
+
+export type DataSelect = {
+  label: string;
+  value: string | number;
+};
+
+export type RenderProps<E extends HTMLElement = HTMLElement> = {
+  focusRef?: React.MutableRefObject<E | null>;
+  id?: string;
+};
+
+export type StyledProgressBarProps = {
+  colorCustom?: string;
+};

package/tailwind.config.js

@@ -0,0 +1,58 @@
+// @ts-check
+const { fontFamily } = require("tailwindcss/defaultTheme");
+const colors = require("tailwindcss/colors");
+
+/** @type {import("tailwindcss/types").Config } */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: ["class", '[data-mode="dark"]'],
+  theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      black: colors.black,
+      white: colors.white,
+      gray: colors.gray,
+      emerald: colors.emerald,
+      indigo: colors.indigo,
+      yellow: colors.yellow,
+      primary: {
+        DEFAULT: "#FE761C",
+        100: "#FEA064",
+        200: "#FE9755",
+        300: "#FE8D44",
+        400: "#FE8231",
+        500: "#FE761C",
+        600: "#EA6D1A",
+        700: "#E06819",
+        800: "#DB6619",
+        900: "#D66318",
+      },
+      secondary: "#43BBF2",
+      error: "#D63643",
+      warning: "#FFC300",
+      info: "#71D5F7",
+      success: "#6BC235",
+      helper: "#5A2A79",
+    },
+  },
+  cursor: {
+    fancy: "url(hand.cur), pointer",
+  },
+  safelist: [
+    {
+      pattern:
+        /(bg|text|border|accent)-(transparent|current|default|white|info|midnight|success|primary|secondary|error|warning|helper)/,
+    },
+    {
+      pattern:
+        /(bg|text|border|accent)-(primary)-(100|200|300|400|500|600|700|900)/,
+    },
+  ],
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "include": ["src"],
+  "exclude": ["dist", "node_modules", "src/stories"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "outDir": "./dist/esm",
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@interfaces/*": ["./src/interfaces/*"],
+      "@helpers/*": ["./src/helpers/*"],
+      "@types/*": ["./src/types/*"],
+      "@stories/*": ["./src/stories/*"]
+    }
+  }
+}

package/README.md

@@ -1,160 +0,0 @@
-# Como usar um pacote Norma Library
-
-O npm (Node Package Manager) é um gerenciador de pacotes para o ambiente Node.js, permitindo que você instale e gerencie bibliotecas e pacotes em seus projetos. Neste guia, você aprenderá como usar um pacote Norma Library em seu projeto.
-
-Repository GitHub [Norma LIbrary](https://github.com/OlosLive/norma-libraryp).
-
-## 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
-
-```jsx
-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
-
-```jsx
-  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
-
-```jsx
-
-  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
-
-```jsx
-  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
-
-```jsx
-  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
-
-```jsx
-import { ProgressBar } from "norma-library`;
-
-<ProgressBar
-  variant="determinate"
-  value={(35 / 180) * 100} // value
-  usage={35}
-  total={180}
-  label="Progresso"
-  color="primary"
-/>
-```
-
-#### 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/dist/components/button/button.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { ButtonBaseProps } from './types';
-export declare const Button: React.FC<ButtonBaseProps>;

package/dist/components/button/index.d.ts

@@ -1 +0,0 @@
-export * from './button';

package/dist/components/button/types.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-import { Theme } from '@emotion/react';
-import Button from './button';
-import { ButtonPropsColorOverrides, ButtonPropsSizeOverrides, ButtonPropsVariantOverrides, ButtonProps as MuiButtonProps, SxProps } from '@mui/material';
-import { OverridableStringUnion } from '@mui/types';
-declare type MuiButtonBaseProps = Pick<MuiButtonProps, 'sx' | 'color' | 'size' | 'variant'>;
-export interface ButtonBaseProps extends MuiButtonBaseProps {
-    label: string;
-    sx?: SxProps<Theme>;
-    children?: ReactNode;
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent | React.TouchEvent) => void;
-    color?: OverridableStringUnion<'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning', ButtonPropsColorOverrides>;
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
-    variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides>;
-    style?: React.CSSProperties;
-}
-export declare type ButtonType = keyof typeof Button;
-export {};

package/dist/components/card/card-header.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CardHeaderProps } from './types';
-export declare const CardHeader: React.FC<CardHeaderProps>;

package/dist/components/card/card.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CardBaseProps } from './types';
-export declare const Card: ({ children, title }: CardBaseProps) => React.JSX.Element;

package/dist/components/card/index.d.ts

@@ -1 +0,0 @@
-export * from './card';