norma-library 0.5.80 → 0.5.121

package/package.json

@@ -1,136 +1,136 @@
-{
-  "name": "norma-library",
-  "version": "0.5.80",
-  "private": false,
-  "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": "yarn storybook --no-manager-cache",
-    "storybook": "storybook dev -p 6006",
-    "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",
-    "prepare": "husky install",
-    "prettier": "npx prettier \"./**/*.{js,json,ts,tsx}\" --write",
-    "tar": "tar -cvf norma-library.tar ./storybook-static"
-  },
-  "author": "José Roberto Miguel Filho",
-  "module": "dist/esm/index.js",
-  "main": "dist/esm/index.js",
-  "license": "BSD-3-Clause",
-  "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",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.5.0",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-vite": "^7.5.0",
-    "@storybook/react-webpack5": "^7.5.0-alpha.1",
-    "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "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",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.15",
-    "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",
-    "storybook-addon-dark-mode-toggle": "^0.0.6",
-    "storybook-dark-mode": "^3.0.1",
-    "style-loader": "^3.3.3",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  },
-  "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",
-    "@material-tailwind/react": "^2.1.1",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.8",
-    "@mui/x-date-pickers": "^6.14.0",
-    "@storybook/addon-mdx-gfm": "^7.5.2",
-    "dayjs": "^1.11.9",
-    "react-i18next": "^13.2.2",
-    "react-scripts": "^5.0.1",
-    "tslib": "^2.6.2"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OlosLive/norma-library"
-  },
-  "bugs": {
-    "url": "https://github.com/OlosLive/norma-library/issues"
-  },
-  "homepage": "https://github.com/OlosLive/norma-library",
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
-}
+{
+  "name": "norma-library",
+  "version": "0.5.121",
+  "private": false,
+  "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": "yarn storybook",
+    "storybook": "storybook dev -p 6006",
+    "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",
+    "prettier": "npx prettier \"./**/*.{js,json,ts,tsx}\" --write",
+    "tar": "tar -cvf norma-library.tar ./storybook-static"
+  },
+  "author": "José Roberto Miguel Filho",
+  "module": "dist/esm/index.js",
+  "main": "dist/esm/index.js",
+  "license": "BSD-3-Clause",
+  "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",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0-alpha.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.15",
+    "@types/react-datepicker": "^4.19.1",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "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",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "git-cz": "^4.9.0",
+    "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",
+    "storybook-dark-mode": "^3.0.1",
+    "style-loader": "^3.3.3",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  },
+  "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",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/lab": "^5.0.0-alpha.152",
+    "@mui/material": "^5.14.8",
+    "@mui/x-date-pickers": "^6.14.0",
+    "@storybook/addon-mdx-gfm": "^7.5.2",
+    "@tanstack/react-table": "^8.10.7",
+    "dayjs": "^1.11.9",
+    "react-datepicker": "^4.21.0",
+    "react-i18next": "^13.2.2",
+    "react-select": "^5.8.0",
+    "styled-components": "^6.1.0",
+    "tslib": "^2.6.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OlosLive/norma-library"
+  },
+  "bugs": {
+    "url": "https://github.com/OlosLive/norma-library/issues"
+  },
+  "homepage": "https://github.com/OlosLive/norma-library",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

package/src/components/Accordion.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import {
-  AccordionDetails,
-  AccordionSummary,
-  Accordion as MuiAccordion,
-  Typography
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { AccordionBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const AccordionStyled = styled(MuiAccordion)({});
-
-export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
-  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);
-  };
-
-  return (
-    <>
-      {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>
-        ))}
-    </>
-  );
-};
+import React from 'react';
+import {
+  AccordionDetails,
+  AccordionSummary,
+  Accordion as MuiAccordion,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { AccordionBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const AccordionStyled = styled(MuiAccordion)({});
+
+export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
+  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);
+  };
+
+  return (
+    <>
+      {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>
+        ))}
+    </>
+  );
+};

package/src/components/Avatar.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-
-import { Avatar as MuiVatar } from '@mui/material';
-
-import { AvatarBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const AvatarStyled = styled(MuiVatar)({
-  textTransform: 'none',
-  color: 'currentcolor',
-});
-
-export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
-  return (
-    <AvatarStyled src={src} {...props} />
-  );
-};
+import React from 'react';
+
+import { Avatar as MuiVatar } from '@mui/material';
+
+import { AvatarBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const AvatarStyled = styled(MuiVatar)({
+  textTransform: 'none',
+  color: 'currentcolor',
+});
+
+export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
+  return (
+    <AvatarStyled src={src} {...props} />
+  );
+};

package/src/components/Badge.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-
-import { Badge as MuiBadge } from '@mui/material';
-
-import { BadgeBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const BadgeStyled = styled(MuiBadge)({});
-
-export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
-  return (
-    <BadgeStyled {...props} />
-  );
-};
+import React from 'react';
+
+import { Badge as MuiBadge } from '@mui/material';
+
+import { BadgeBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const BadgeStyled = styled(MuiBadge)({});
+
+export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
+  return (
+    <BadgeStyled {...props} />
+  );
+};

package/src/components/Box/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import * as S from "./styles"
+import { BoxProps } from "./interfaces"
+
+const Box:React.FC<BoxProps> = ({ children, size }) => {
+  return (
+    <S.Container size={size}>
+      {children}
+    </S.Container>
+  )
+}
+
+export default Box

package/src/components/Box/interfaces.ts

@@ -0,0 +1,4 @@
+export interface BoxProps {
+  children: JSX.Element[] | JSX.Element
+  size: string
+}

package/src/components/Box/styles.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+import { BoxProps } from "./interfaces"
+
+const setSizeSelected = (size: string) => {
+  switch (size) {
+    case "small":
+      return "10px";
+    case "medium":
+      return "16px";
+    case "large":
+      return "24px"
+    default:
+      return "16px";
+  }
+} 
+
+export const Container = styled.div<BoxProps>`
+  background: #fff;
+  border-radius: 5px;
+  width: 100%;
+  box-shadow: 0px 2px 6px #0000000A;
+  padding: ${props => setSizeSelected(props.size)}
+`

package/src/components/Breadcrumb/index.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import * as S from "./styles"
+import { BreadcrumbProps, Link } from './interface';
+
+const Breadcrumb:React.FC<BreadcrumbProps> = ({ links, onChange }) => {
+  const listLinks = useMemo(() => {
+    return links.map((link: Link, index: number, self: Link[]) => {
+      const showIcon = self.length > index + 1
+      return (
+        <div className='content' key={index}>
+          <S.Link onClick={() => onChange(link)}>{link.name}</S.Link>
+          { showIcon ? <S.Arrow><i className="icon"></i></S.Arrow> : null }
+        </div>
+      )
+    })
+  }, [links])
+
+  return (
+    <S.Container>
+      <S.ListLinks>
+        { listLinks }
+      </S.ListLinks>
+    </S.Container>
+  )
+}
+
+export default Breadcrumb

package/src/components/Breadcrumb/interface.ts

@@ -0,0 +1,9 @@
+export interface Link {
+  name: string
+  route: string 
+}
+
+export interface BreadcrumbProps {
+  links: Link[]
+  onChange: Function
+}

package/src/components/Breadcrumb/styles.tsx

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  margin: 0 0 16px 0;
+`
+
+export const ListLinks = styled.div`
+  display: flex;
+  gap: 8px;
+  .content {
+    display: flex;
+    gap: 8px;
+  }
+`
+
+export const Link = styled.p`
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+`
+
+export const Arrow = styled.div`
+  display: flex;
+  align-items: center;
+  .icon {
+    border: solid #999;
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 2px;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
+`

package/src/components/Button.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { Button as MuiButton } from '@mui/material';
-import { ButtonBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const ButtonStyled = styled(MuiButton)({
-  textTransform: 'none',
-  '& .MuiButton-sizeLarge': {
-    height: '75px',
-    backgroundColor: 'red',
-  },
-});
-
-export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
-  
-  return (
-    <ButtonStyled
-      {...props}
-      sx={{
-        color: props.variant === 'contained' ? '#FFFF' : props.color,
-      }}
-    >
-      {label ? label : children}
-    </ButtonStyled>
-  );
-};
+import React from 'react';
+import { Button as MuiButton } from '@mui/material';
+import { ButtonBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const ButtonStyled = styled(MuiButton)({
+  textTransform: 'none',
+  '& .MuiButton-sizeLarge': {
+    height: '75px',
+    backgroundColor: 'red',
+  },
+});
+
+export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
+  
+  return (
+    <ButtonStyled
+      {...props}
+      sx={{
+        color: props.variant === 'contained' ? '#FFFF' : props.color,
+      }}
+    >
+      {label ? label : children}
+    </ButtonStyled>
+  );
+};