norma-library 0.5.3 → 0.5.9

package/package.json

@@ -1,22 +1,19 @@
 {
   "name": "norma-library",
-  "version": "0.5.3",
+  "version": "0.5.9",
   "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",
+    "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",
-    "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"
+    "tar": "tar -cvf norma-library.tar ./storybook-static"
   },
   "author": "José Roberto Miguel Filho",
   "module": "dist/esm/index.js",
@@ -37,17 +34,22 @@
     "@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",
-    "@storybook/addon-links": "^7.5.0-alpha.1",
+    "@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.4.1",
-    "@storybook/react": "^7.4.0",
+    "@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.1-next.0",
-    "@types/react": "^18.2.21",
+    "@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",
@@ -55,8 +57,11 @@
     "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",
@@ -64,19 +69,12 @@
     "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": "^7.5.0",
     "storybook-dark-mode": "^3.0.1",
     "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"
-    }
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
   },
   "lint-staged": {
     "*.{md,mdx}": [
@@ -93,13 +91,17 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@material-tailwind/react": "^2.1.1",
     "@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-scripts": "^5.0.1",
+    "react-select": "^5.8.0",
+    "styled-components": "^6.1.0",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/src/components/Accordion.tsx

@@ -1,21 +1,17 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   AccordionDetails,
   AccordionSummary,
   Accordion as MuiAccordion,
-  ThemeProvider,
-  Typography,
-  useMediaQuery,
+  Typography
 } 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) => {
@@ -23,25 +19,21 @@ export const Accordion = ({ data = [], defaultExpanded = false, ...props }: Acco
     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>
+    <>
+      {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,10 +1,9 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { ThemeProvider, useMediaQuery, Avatar as MuiVatar } from '@mui/material';
+import { 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',
@@ -12,11 +11,7 @@ const AvatarStyled = styled(MuiVatar)({
 });
 
 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>
+    <AvatarStyled src={src} {...props} />
   );
 };

package/src/components/Badge.tsx

@@ -1,19 +1,14 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { ThemeProvider, useMediaQuery, Badge as MuiBadge } from '@mui/material';
+import { 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>
+    <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,7 +1,6 @@
-import React, { useMemo } from 'react';
-import { Button as MuiButton, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Button as MuiButton } from '@mui/material';
 import { ButtonBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 const ButtonStyled = styled(MuiButton)({
@@ -13,19 +12,15 @@ const ButtonStyled = styled(MuiButton)({
 });
 
 export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
-  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,
-        }}
-      >
-        {label ? label : children}
-      </ButtonStyled>
-    </ThemeProvider>
+    <ButtonStyled
+      {...props}
+      sx={{
+        color: props.variant === 'contained' ? '#FFFF' : props.color,
+      }}
+    >
+      {label ? label : children}
+    </ButtonStyled>
   );
 };

package/src/components/Card.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { Card as MuiCard, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Card as MuiCard } from '@mui/material';
 import { CardBaseProps } from '../interfaces';
-import { palette, themes } from '../helpers';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 
@@ -30,15 +30,9 @@ export const Card = ({
   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>
+    <CardStyled borderColor={border ? color : undefined} {...props}>
+      {children}
+    </CardStyled>
   );
-};
+};

package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts

@@ -0,0 +1,56 @@
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const ChatMessageBalloonContainerStyle = styled(Box)({
+  display: 'flex',
+  flexDirection: "column",
+});
+
+export const ChatMessageBalloonRowStyle = styled('div')<{ direction: string }>`
+  display: flex;
+  margin-bottom: 8px;
+  flex-direction: ${(props) => (props.direction === "I") ? "row-reverse" : "row"};
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`
+
+export const ChatMessageBalloonStyle = styled('div')<{ direction: string }>`
+  background-color: ${(props) => (props.direction === "I") ? "#FFF" : "#E18B50"};
+  border: 2px solid transparent;
+  border-radius: ${(props) => (props.direction === "I") ? "20px 20px 0px 20px" : "20px 20px 20px 0px"};
+  box-sizing: border-box;
+  color: ${(props) => (props.direction === "I") ? "#4D4F5B" : "#FFF"};
+  display: flex;
+  flex-direction: column;
+  padding: 12px 24px;
+  width: 60%;
+  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &.is-highlight {
+    border: 2px solid #8a8888;
+  }
+
+  &.is-interactive {
+    cursor: pointer;
+
+    &:hover {
+      border: 2px solid #8a8888;
+    }
+  }
+`
+
+export const ChatMessageDateStyle = styled(Typography)`
+  color: #43425D;
+  opacity: .5;
+`
+
+export const ChatMessageChildrenStyle = styled('div')<{ direction: string }>`
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  justify-content: ${(props) => (props.direction === "I") ? "end" : "start"};
+  padding: 8px;
+`;

package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { Typography } from '@mui/material';
+import { ChatMessageBalloonProps } from '../../interfaces';
+import * as S from './ChatMessageBalloon.style'
+
+export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ 
+    label, 
+    description, 
+    date,
+    direction,
+    children,
+    className,
+    bottomChildren,
+    onMouseEnter,
+    onMouseLeave,
+    onRowMouseEnter,
+    onRowMouseLeave,
+    highlight,
+    ...rest 
+  }) => {
+
+  const ballonClassNames = useMemo(() => {
+    const classNames = []
+    if(!!onMouseEnter) classNames.push('is-interactive')
+    if(!!highlight) classNames.push('is-highlight')
+    return classNames.join(" ")
+  }, [highlight, onMouseEnter])
+
+  return (
+    <S.ChatMessageBalloonContainerStyle className={className} {...rest}>
+      <S.ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
+        <S.ChatMessageBalloonStyle onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} direction={direction} className={ballonClassNames}>
+          <Typography
+            variant="subtitle2"
+            style={{
+              fontSize: "1rem",
+              fontWeight: "600",
+              marginBottom: '5px'
+            }}
+          >
+            {label}
+          </Typography>
+          {description}
+        </S.ChatMessageBalloonStyle>
+        <S.ChatMessageChildrenStyle direction={direction}>
+          {children}
+        </S.ChatMessageChildrenStyle>
+      </S.ChatMessageBalloonRowStyle>
+      <S.ChatMessageBalloonRowStyle direction={direction} sx={{gap: "10px"}}>
+        <S.ChatMessageDateStyle fontSize={"0.7rem"}>{date}</S.ChatMessageDateStyle>
+        {bottomChildren}
+      </S.ChatMessageBalloonRowStyle>
+    </S.ChatMessageBalloonContainerStyle>
+  );
+};

package/src/components/CheckBox.tsx

@@ -1,24 +1,21 @@
-import React, { useMemo } from 'react';
-import { FormControlLabel, Checkbox as MuiCheckbox, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
 
 import { CheckBoxBaseProps } from '../interfaces';
 
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 const CheckBoxStyled = styled(MuiCheckbox)({});
 
 export const CheckBox = ({ ...props }: CheckBoxBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
+    <>
       {props.label ? (
         <FormControlLabel control={<CheckBoxStyled {...props} />} label={props.label} />
       ) : (
         <CheckBoxStyled {...props} />
       )}
-    </ThemeProvider>
+    </>
   );
 };

package/src/components/DateInput/index.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react"
+import DatePicker from "react-datepicker";
+import * as S from "./styles"
+import { DateInputProps } from './interface';
+
+const DateInput:React.FC<DateInputProps> = ({ 
+    label, 
+    dateFormat, 
+    dateSelected, 
+    className,
+    showTimeSelect,
+    timeFormat,
+    disabled, 
+    onChange 
+  }) => {
+  const [date, setDate] = useState<Date | null>(dateSelected)
+  return (
+    <S.Container className={className}>
+      <S.Label>{label}</S.Label>
+      <DatePicker
+        dateFormat={dateFormat}
+        selected={date}
+        showTimeSelect={showTimeSelect}
+        timeFormat={timeFormat}
+        disabled={disabled}
+        onChange={(date) => {
+          setDate(date)
+          onChange(date)
+        }}
+      />
+    </S.Container>
+  )
+}
+
+export default DateInput

package/src/components/DateInput/interface.ts

@@ -0,0 +1,14 @@
+export interface DateInputProps {
+  className?: string
+  label: string 
+  dateSelected: Date 
+  onChange: Function
+  dateFormat: string
+  showTimeSelect?: boolean
+  timeFormat?: string
+  disabled?: boolean
+}
+
+export interface ContainerStyles {
+  
+}

package/src/components/DateInput/styles.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import "react-datepicker/dist/react-datepicker.css";
+import { ContainerStyles } from './interface';
+
+export const Container = styled.div<ContainerStyles>`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .react-datepicker-wrapper {
+    width: 100%;
+    input {
+      border: none;
+      color: #4D4F5C;
+      border-bottom: 1px solid #00000033;
+      outline: none;
+      font-size: 18px;
+      padding: 8px;
+      width: 100%;
+      font-size: 16px;
+    }
+  }
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #666;
+`