norma-library 0.4.2 → 0.4.5

package/package.json

@@ -1,90 +1,75 @@
-{
-  "version": "0.4.2",
-  "license": "MIT",
-  "description": "Norma Library. A React UI kit.",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "private": false,
-  "files": [
-    "dist",
-    "src"
-  ],
-  "engines": {
-    "node": ">=10"
-  },
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "format": "prettier --write src//**/**/*.{ts,tsx,css} --config ./.prettierrc",
-    "prepare": "husky install",
-    "deploy": "npm run build && npm publish"
-  },
-  "peerDependencies": {
-    "react": ">=16"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/**/*.{js,jsx,ts,tsx}": [
-      "yarn lint",
-      "yarn  format"
-    ]
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "name": "norma-library",
-  "author": "José Roberto Miguel Filho",
-  "module": "dist/norma.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/norma.cjs.production.min.js",
-      "limit": "100 KB"
-    },
-    {
-      "path": "dist/norma.esm.js",
-      "limit": "100 KB"
-    }
-  ],
-  "devDependencies": {
-    "@size-limit/preset-small-lib": "^8.2.6",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "husky": "^8.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "size-limit": "^8.2.6",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@ladle/react": "^2.17.2",
-    "@mui/material": "^5.14.6",
-    "lint-staged": "^14.0.1",
-    "styled-components": "^6.0.7"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OlosLive/norma-library"
-  },
-  "bugs": {
-    "url": "https://github.com/OlosLive/norma-library/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "homepage": "https://github.com/OlosLive/norma-library"
-}
+{
+  "name": "norma-library",
+  "version": "0.4.5",
+  "private": false,
+  "description": "Norma Library. A React UI kit.",
+  "scripts": {
+    "build": "tsc",
+    "start": "react-scripts start",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "José Roberto Miguel Filho",
+  "module": "dist/esm/index.js",
+  "main": "dist/esm/index.js",
+  "license": "ISC",
+  "keywords": [],
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@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-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.4.1",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.5.0-alpha.1",
+    "@storybook/testing-library": "^0.2.1-next.0",
+    "@types/react": "^18.2.21",
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.29",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.5.0-alpha.1",
+    "storybook-addon-dark-mode-toggle": "^0.0.6",
+    "storybook-dark-mode": "^3.0.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@material-tailwind/react": "^2.1.1",
+    "@mui/icons-material": "^5.14.8",
+    "@mui/material": "^5.14.8",
+    "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"
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/Accordion.tsx

@@ -0,0 +1,64 @@
+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/Button.tsx

@@ -0,0 +1,38 @@
+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",
+  },
+});
+
+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>
+  );
+};

package/src/components/Card.tsx

@@ -0,0 +1,47 @@
+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>
+  );
+};

package/src/components/CheckBox.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import {
+  FormControlLabel,
+  Checkbox as MuiCheckbox,
+  ThemeProvider,
+  useMediaQuery,
+} 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/DropDown.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+import {
+  Menu as MuiDropDown,
+  ThemeProvider,
+  useMediaQuery,
+} from "@mui/material";
+import { DropDownBaseProps } from "../interfaces";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+
+const DropDownStyled = styled(MuiDropDown)({});
+
+export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <>
+        <DropDownStyled
+          open
+          id="basic-menu"
+          anchorEl={props.anchorEl}
+          onClose={props.onClose}
+          MenuListProps={{
+            "aria-labelledby": "basic-button",
+          }}
+          {...props}
+        >
+          {children}
+        </DropDownStyled>
+      </>
+    </ThemeProvider>
+  );
+};

package/src/components/IconButton.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from "react";
+import {
+  IconButton as MuiIconButton,
+  ThemeProvider,
+  useMediaQuery,
+} from "@mui/material";
+import { IconButtonBaseProps } from "../interfaces";
+import { palette, themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+import { ButtonVariant, 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 IconButtonStyled = styled(MuiIconButton)<{
+  circle: boolean;
+  color: ColorVariant;
+  variant: ButtonVariant;
+  cursor: string;
+}>(({ circle, color, variant, cursor }) => ({
+  borderRadius: circle === true ? 99 : 5,
+  border: variant === "outlined" ? `1px solid ${colorMap[color]}` : "none",
+  backgroundColor: variant === "contained" ? `${colorMap[color]}` : "none",
+  cursor: cursor,
+}));
+
+export const IconButton = ({
+  circle = false,
+  children,
+  ...props
+}: IconButtonBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.dark : themes.light),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <IconButtonStyled
+        circle={circle}
+        color="primary"
+        variant="text"
+        cursor="default"
+        {...props}
+      >
+        {children}
+      </IconButtonStyled>
+    </ThemeProvider>
+  );
+};

package/src/components/Icons.tsx

@@ -0,0 +1,87 @@
+import React, { FunctionComponent } from "react";
+import { iconsSVG } from "./Svgs";
+import { IconColors, IconScale } from "../types";
+import { IconsProps, SvgProps } from "../interfaces/Icons";
+import styled from "@emotion/styled";
+import { palette } from "../helpers";
+
+export const Svg = styled.svg<SvgProps>(
+  {
+    shapeRendering: "inherit",
+    transform: "translate3d(0,0,0)",
+  },
+  ({ inline }) => (inline ? { display: "inline-block" } : { display: "block" })
+);
+
+const scaleSize: Record<IconScale, number> = {
+  xsmall: 14,
+  small: 20,
+  medium: 24,
+  large: 28,
+  xlarge: 32,
+  "2xlarge": 36,
+  "3xlarge": 40,
+};
+
+// Definindo um objeto com as cores de preenchimento e traço com base no MUI
+const colors: Record<IconColors, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  info: palette.info,
+  success: palette.success,
+  warning: palette.warning,
+  white: palette.white,
+  black: palette.black,
+};
+
+export const Icons: FunctionComponent<IconsProps> = ({
+  icon,
+  scale,
+  useSymbol,
+  color = "inherit",
+  ...props
+}: IconsProps) => {
+  let width = 24;
+  let height = 24;
+  if (scale) {
+    width = scaleSize[scale];
+    height = scaleSize[scale];
+  }
+
+  // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
+  const fill = colors[color];
+  const stroke = colors[color];
+
+  const Svg = styled.svg`
+    display: inline-block;
+    shape-rendering: inherit;
+    vertical-align: middle;
+    fill: ${fill};
+    path {
+      stroke: ${stroke};
+    }
+    circle {
+      stroke: ${stroke};
+    }
+    rect {
+      stroke: ${stroke};
+    }
+  `;
+
+  return (
+    <Svg
+      viewBox="0 0 64 64"
+      width={`${width}px`}
+      height={`${height}px`}
+      {...props}
+    >
+      {useSymbol ? (
+        <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
+      ) : (
+        React.cloneElement(iconsSVG[icon], { fill, stroke })
+      )}
+    </Svg>
+  );
+};

package/src/components/Modal.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo } from "react";
+import {
+  Modal as MuiModal,
+  Paper,
+  Box,
+  ThemeProvider,
+  useMediaQuery,
+} from "@mui/material";
+import { ModalBaseProps } from "../interfaces";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+import { IconButton } from "./IconButton";
+import { Button } from "./Button";
+
+const ModalStyled = styled(MuiModal)({});
+
+const ModalContentStyled = styled(Paper)`
+  border: 1px solid #00000033;
+  border-radius: 4px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 421px;
+  transform: translate(-50%, -50%);
+  bgcolor: background.paper;
+  box-shadow: 24px;
+  padding: 16px;
+`;
+
+const ModalHeaderStyled = styled(Box)`
+  text-align: left;
+  border-bottom: 1px solid #00000033;
+  margin: 0;
+  top: -5px;
+  position: relative;
+  padding: 0 5px;
+  display: flex;
+
+  & h2 {
+    font: normal normal 600 18px/30px Source Sans Pro;
+    color: #292929;
+  }
+`;
+
+const ModalFooterStyled = styled(Box)`
+  text-align: left;
+  border-top: 1px solid #00000033;
+  margin-top: 16px;
+  bottom: -5px;
+  position: relative;
+  padding: 10px 5px 5px;
+  display: flex;
+  justify-content: end;
+`;
+
+export function Close() {
+  return (
+    <svg
+      fill="#808080"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      height="24"
+      width="24"
+    >
+      <path
+        clipRule="evenodd"
+        fillRule="evenodd"
+        d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
+      />
+    </svg>
+  );
+}
+
+export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ModalStyled open {...props}>
+        <ModalContentStyled>
+          {props.title && (
+            <ModalHeaderStyled>
+              <>
+                <h2>{props.title}</h2>
+                <IconButton
+                  onClick={props.onClose}
+                  size="small"
+                  color="inherit"
+                  variant="text"
+                  cursor="pointer"
+                  sx={{ position: "absolute", right: 0, top: 5 }}
+                >
+                  <Close />
+                </IconButton>
+              </>
+            </ModalHeaderStyled>
+          )}
+          {children}
+          {props.action && (
+            <ModalFooterStyled>
+              {props.action.map((item, key) => (
+                <Button
+                  color={item.color}
+                  variant={item.variant}
+                  key={key}
+                  onClick={item.action}
+                  style={{ marginLeft: 10 }}
+                >
+                  {item.label}
+                </Button>
+              ))}
+            </ModalFooterStyled>
+          )}
+        </ModalContentStyled>
+      </ModalStyled>
+    </ThemeProvider>
+  );
+};