norma-library 0.4.6 → 0.4.8

package/src/components/TimePicker.tsx

@@ -0,0 +1,95 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery } from "@mui/material";
+import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { TimePicker as MuiTimePicker } from "@mui/x-date-pickers/TimePicker";
+import { MobileTimePicker as MuiMobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+import { DesktopTimePicker as MuiDesktopTimePicker } from "@mui/x-date-pickers/DesktopTimePicker";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+import { TimePickerBaseProps } from "@/interfaces/TimePicker";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const MuiTimePickerStyled = styled(MuiTimePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+export const TimePicker = ({
+  label,
+  timezone = "America/Sao_Paulo",
+  language = "pt-br",
+  variant = "desktop",
+}: TimePickerBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+        <DemoContainer
+          components={["TimePicker", "MobileTimePicker", "DesktopTimePicker"]}
+        >
+          {variant === "responsive" && (
+            <MuiTimePickerStyled label={label} timezone={timezone} />
+          )}
+          {variant === "mobile" && (
+            <MuiMobileTimePickerStyled label={label} timezone={timezone} />
+          )}
+          {variant === "desktop" && (
+            <MuiDesktopTimePickerStyled label={label} timezone={timezone} />
+          )}
+        </DemoContainer>
+      </LocalizationProvider>
+    </ThemeProvider>
+  );
+};

package/src/components/index.ts

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";
@@ -14,3 +17,6 @@ export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
+export * from "./TimePicker";
+export * from "./ChatMessage";

package/src/helpers/colors.ts

@@ -2,20 +2,20 @@ import { createTheme } from "@mui/material/styles";
 
 export const getPalette = () => {
   return {
-    primary: "#FF7F11",
+    primary: "rgb(219, 102, 25)",
     primaryLight: "#FFDB9F",
     primaryMedium: "#FFA84C",
     primaryDark: "#B74608",
 
-    inherit: "#000000",
-    secondary: "#43BBF2",
-    error: "#D63643",
-    warning: "#FFC300",
-    info: "#71D5F7",
-    success: "#6BC235",
+    inherit: "rgb(102, 102, 102)",
+    secondary: "rgb(67, 187, 242)",
+    error: "rgb(214, 54, 67)",
+    warning: "rgb(255, 195, 0)",
+    info: "rgb(113, 213, 247)",
+    success: "rgb(107, 194, 53)",
     white: "#ffffff",
-    black: "#666666",
-    helper: "#5A2A79",
+    black: "rgb(0, 0, 0)",
+    helper: "rgb(90, 42, 121)",
     secondaryLight: "#D9FCFE",
     secondaryMedium: "#71D5F7",
     secondaryDark: "#154F8C",
@@ -170,4 +170,38 @@ const getColor = (key: PaletteKey) => {
   }
 };
 
-export { getColor };
+const extractRGB = (rgbString: string) => {
+  if (typeof rgbString === "string") {
+    const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
+
+    if (match) {
+      const r = match[1];
+      const g = match[2];
+      const b = match[3];
+      return `${r},${g},${b}`;
+    }
+  }
+  return null;
+};
+
+const lightenRGB = (rgbString: string, amount = 20) => {
+  console.log("RGB ==> ", rgbString);
+  if (typeof rgbString === "string") {
+    const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
+
+    if (match) {
+      const r = parseInt(match[1]);
+      const g = parseInt(match[2]);
+      const b = parseInt(match[3]);
+
+      const newR = Math.min(255, r + amount);
+      const newG = Math.min(255, g + amount);
+      const newB = Math.min(255, b + amount);
+
+      return `rgb(${newR},${newG},${newB})`;
+    }
+  }
+  return null;
+};
+
+export { getColor, extractRGB, lightenRGB };

package/src/index.ts

@@ -13,6 +13,7 @@ import { Select } from "./components/Select";
 import { Tabs } from "./components/Tabs";
 import { Tag } from "./components/Tag";
 import { TextField } from "./components/TextField";
+import { DatePicker } from "./components/DatePicker";
 import { themes, getPalette } from "./helpers";
 
 export {
@@ -20,6 +21,7 @@ export {
   Button,
   Card,
   CheckBox,
+  DatePicker,
   getPalette,
   IconButton,
   Icons,

package/src/interfaces/Avatar.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { Theme } from "@emotion/react";
+
+import { AvatarPropsVariantOverrides, SxProps } from "@mui/material";
+
+import { MuiAvatarBaseProps } from "../types";
+import { OverridableStringUnion } from "@mui/types";
+
+export interface AvatarBaseProps extends MuiAvatarBaseProps {
+  sx?: SxProps<Theme>;
+  src?: string;
+  children?: ReactNode;
+  variant?: OverridableStringUnion<
+    "circular" | "rounded" | "square",
+    AvatarPropsVariantOverrides
+  >;
+  sizes?: string;
+}

package/src/interfaces/Badge.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { Theme } from "@emotion/react";
+
+import {
+  BadgePropsColorOverrides,
+  BadgePropsVariantOverrides,
+  SxProps,
+} from "@mui/material";
+import { MuiBadgeBaseProps } from "@/types";
+import { OverridableStringUnion } from "@mui/types";
+
+export interface BadgeBaseProps extends MuiBadgeBaseProps {
+  sx?: SxProps<Theme>;
+  className?: string;
+  children?: ReactNode;
+  badgeContent?: ReactNode;
+  invisible?: boolean;
+  color?: OverridableStringUnion<
+    | "primary"
+    | "secondary"
+    | "default"
+    | "error"
+    | "info"
+    | "success"
+    | "warning",
+    BadgePropsColorOverrides
+  >;
+  variant?: OverridableStringUnion<
+    "standard" | "dot",
+    BadgePropsVariantOverrides
+  >;
+}

package/src/interfaces/ChatMessage.ts

@@ -0,0 +1,12 @@
+export interface ChatProps {
+  name: string;
+  message: string;
+  emotion?: React.ReactNode;
+  emotionReplay?: React.ReactNode;
+  time: string;
+  send: "me" | "replay";
+}
+
+export interface ChatMessageProps {
+  data: ChatProps[];
+}

package/src/interfaces/DatePicker.ts

@@ -0,0 +1,13 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+
+import { DatePickVariant } from "../types";
+
+export interface DatePickerBaseProps {
+  sx?: SxProps<Theme>;
+  label?: string;
+  format?: string;
+  language?: string;
+  onChange?: React.ChangeEvent<HTMLInputElement>;
+  variant?: DatePickVariant;
+}

package/src/interfaces/TimeLine.ts

@@ -0,0 +1,16 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import {
+  ColorVariant,
+  DataTimeLine,
+  MuiTimeLineBaseProps,
+  PositionVariant,
+} from "../types";
+
+export interface TimeLineBaseProps extends MuiTimeLineBaseProps {
+  position?: PositionVariant;
+  children?: React.ReactNode;
+  sx?: SxProps<Theme>;
+  color: ColorVariant;
+  data: DataTimeLine[];
+}

package/src/interfaces/TimePicker.ts

@@ -0,0 +1,13 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+
+import { DatePickVariant } from "../types";
+
+export interface TimePickerBaseProps {
+  sx?: SxProps<Theme>;
+  label?: string;
+  timezone?: string;
+  language?: string;
+  onChange?: React.ChangeEvent<HTMLInputElement>;
+  variant?: DatePickVariant;
+}

package/src/interfaces/index.ts

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";
@@ -9,9 +12,11 @@ export * from "./Modal";
 export * from "./Paper";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
-export * from "./RadioGroup";
 export * from "./RangerSlider";
 export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
+export * from "./TimePicker";
+export * from "./ChatMessage";

package/src/stories/Avatar.stories.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+
+import type { Meta } from "@storybook/react";
+import { Avatar, Icons } from "../components";
+import { AvatarGroup, Stack } from "@mui/material";
+import { green, pink } from "@mui/material/colors";
+
+const meta = {
+  title: "Display/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+function stringToColor(string: string) {
+  let hash = 0;
+  let i;
+
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = "#";
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  /* eslint-enable no-bitwise */
+
+  return color;
+}
+
+function stringAvatar(name: string) {
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: `${name.split(" ")[0][0]}${name.split(" ")[1][0]}`,
+  };
+}
+
+export const AvatarBasic = () => {
+  return (
+    <>
+      <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
+    </>
+  );
+};
+
+export const AvatarVariants = () => {
+  return (
+    <Stack direction="row" spacing={2}>
+      <Avatar
+        src="https://mui.com/static/images/avatar/1.jpg"
+        variant="square"
+      />
+      <Avatar
+        src="https://mui.com/static/images/avatar/2.jpg"
+        variant="rounded"
+      />
+      <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
+    </Stack>
+  );
+};
+
+export const AvatarLetters = () => {
+  return (
+    <>
+      <Stack direction="row" spacing={2}>
+        <Avatar {...stringAvatar("Kent Dodds")} />
+        <Avatar {...stringAvatar("Jed Watson")} />
+        <Avatar {...stringAvatar("Tim Neutkens")} />
+      </Stack>
+    </>
+  );
+};
+
+export const AvatarSizes = () => {
+  return (
+    <>
+      <Stack direction="row" spacing={2}>
+        <Avatar
+          src="https://mui.com/static/images/avatar/1.jpg"
+          variant="square"
+          sx={{ width: 24, height: 24 }}
+        />
+        <Avatar
+          src="https://mui.com/static/images/avatar/2.jpg"
+          variant="rounded"
+        />
+        <Avatar
+          src="https://mui.com/static/images/avatar/3.jpg"
+          sx={{ width: 56, height: 56 }}
+        />
+      </Stack>
+    </>
+  );
+};
+
+export const AvatarWidthIcons = () => {
+  return (
+    <>
+      <Stack direction="row" spacing={2}>
+        <Avatar>
+          <Icons icon="user" color="white" />
+        </Avatar>
+        <Avatar sx={{ bgcolor: pink[500] }}>
+          <Icons icon="starOutlined" color="white" />
+        </Avatar>
+        <Avatar sx={{ bgcolor: green[500] }}>
+          <Icons icon="chartBar" color="white" />
+        </Avatar>
+      </Stack>
+    </>
+  );
+};
+
+export const AvatarGrouped = () => {
+  return (
+    <>
+      <Stack direction="row" spacing={2}>
+        <AvatarGroup max={4}>
+          <Avatar src="https://mui.com/static/images/avatar/1.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/4.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/5.jpg" />
+        </AvatarGroup>
+      </Stack>
+    </>
+  );
+};

package/src/stories/Badge.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import type { Meta } from "@storybook/react";
+import { Avatar, Badge, Icons } from "../components";
+import { AvatarGroup, Stack } from "@mui/material";
+
+const meta = {
+  title: "Display/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+export const BadgeBasic = () => {
+  return (
+    <>
+      <Badge badgeContent={4} color="primary">
+        <Icons icon="user" />
+      </Badge>
+    </>
+  );
+};
+
+export const BadgeColors = () => {
+  return (
+    <Stack direction="row" spacing={2}>
+      {[
+        "primary",
+        "secondary",
+        "default",
+        "error",
+        "info",
+        "success",
+        "warning",
+      ].map((color, key) => (
+        <Badge badgeContent={4} color={color} key={key}>
+          <Icons icon="user" />
+        </Badge>
+      ))}
+    </Stack>
+  );
+};

package/src/stories/ChatMessage.stories.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+import type { Meta } from "@storybook/react";
+import { ChatMessage, Icons, Avatar } from "../components";
+
+const meta = {
+  title: "Display/ChatMessage",
+  component: ChatMessage,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof ChatMessage>;
+
+export default meta;
+
+const chat = [
+  {
+    send: "me",
+    name: "Alice",
+    message:
+      "Olá, tudo bem? Meu nome é Alice e falo em nome do banco Bradesco. Eu gostaria de falar com Bob",
+    time: "09:50",
+    emotion: (
+      <Avatar
+        sx={{
+          backgroundColor: "#FFF",
+          border: "1px solid  rgb(255, 195, 0)",
+          m: "5px",
+        }}
+      >
+        <Icons icon="faceNeutral" scale="large" color="warning" />
+      </Avatar>
+    ),
+    emotionReplay: (
+      <Avatar
+        sx={{
+          backgroundColor: "#FFF",
+          border: "1px solid  rgb(219, 102, 25)",
+          m: "5px",
+        }}
+      >
+        <Icons icon="faceHappy" scale="large" color="primary" />
+      </Avatar>
+    ),
+  },
+  {
+    send: "replay",
+    name: "Bob",
+    message: "Oi, estou bem, obrigado! E você?",
+    time: "10:05",
+  },
+  {
+    send: "me",
+    name: "Alice",
+    message: "Estou ótima, obrigada por perguntar!",
+    time: "10:10",
+  },
+  {
+    send: "replay",
+    name: "Bob",
+    message: "Que bom ouvir isso!",
+    time: "10:15",
+    emotion: (
+      <Avatar
+        sx={{
+          backgroundColor: "#FFF",
+          border: "1px solid  rgb(219, 102, 25)",
+          m: "5px",
+        }}
+      >
+        <Icons icon="faceHappy" scale="large" color="primary" />
+      </Avatar>
+    ),
+  },
+];
+
+export const ChatMessageBasic = () => {
+  return (
+    <>
+      <ChatMessage data={chat} />
+    </>
+  );
+};

package/src/stories/DatePicker.stories.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { DatePicker } from "../components";
+import type { Meta } from "@storybook/react";
+
+const meta = {
+  title: "Form/DatePicker",
+  component: DatePicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+export const BasicDatePicker = () => (
+  <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />
+);
+BasicDatePicker.storyName = "DatePicker Basic";
+
+export const DatePickerVariants = () => (
+  <>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <DatePicker
+        sx={{ minWidth: 275 }}
+        label="DatePicker Responsive"
+        variant="responsive"
+      />
+    </div>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <DatePicker
+        sx={{ minWidth: 275 }}
+        label="DatePicker Mobile"
+        variant="mobile"
+      />
+    </div>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <DatePicker
+        sx={{ minWidth: 275 }}
+        label="DatePicker Desktop"
+        variant="desktop"
+      />
+    </div>
+  </>
+);
+
+DatePickerVariants.storyName = "DatePicker Variants";
+
+export const DatePickerLanguage = () => (
+  <>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <DatePicker
+        sx={{ minWidth: 275 }}
+        label="DatePicker Brazil"
+        language="pt-br"
+      />
+    </div>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <DatePicker
+        sx={{ minWidth: 275 }}
+        label="DatePicker English"
+        language="en"
+        format="YYYY-MM-DD"
+      />
+    </div>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <DatePicker
+        sx={{ minWidth: 275 }}
+        label="DatePicker Spain"
+        language="es"
+      />
+    </div>
+  </>
+);
+
+DatePickerLanguage.storyName = "DatePicker Languages";