norma-library 0.4.6 → 0.4.7

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,4 @@ export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimePicker";

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/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/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";

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/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";

package/src/stories/Tag.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { Tag } from "../components";
-import { ColorVariant, SizeVariant, TextFieldSizeVariant } from "../types";
+import { ColorVariant, TextFieldSizeVariant } from "../types";
 
 const colors: ColorVariant[] = [
   "inherit",
@@ -28,8 +28,6 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
-
 export const TagBasic = () => {
   return (
     <>

package/src/stories/TimePicker.stories.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+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 } from "@mui/x-date-pickers/TimePicker";
+import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+import { DesktopTimePicker } from "@mui/x-date-pickers/DesktopTimePicker";
+import type { Meta } from "@storybook/react";
+import dayjs, { 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";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const meta = {
+  title: "Form/TimePicker",
+  component: TimePicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof TimePicker>;
+
+export default meta;
+
+export const BasicDatePicker = () => (
+  <LocalizationProvider dateAdapter={AdapterDayjs}>
+    <DemoContainer components={["TimePicker"]}>
+      <TimePicker label="TimePicker" />
+    </DemoContainer>
+  </LocalizationProvider>
+);
+
+BasicDatePicker.storyName = "TimePicker Basic";
+
+export const TimePickerVariants = () => (
+  <LocalizationProvider dateAdapter={AdapterDayjs}>
+    <DemoContainer
+      components={["TimePicker", "MobileTimePicker", "DesktopTimePicker"]}
+    >
+      <div style={{ width: "480px", marginBottom: 30 }}>
+        <TimePicker
+          sx={{ minWidth: 275 }}
+          label="TimePicker Responsive"
+          timezone="America/Sao_Paulo"
+        />
+      </div>
+      <div style={{ width: "480px", marginBottom: 30 }}>
+        <MobileTimePicker
+          sx={{ minWidth: 275 }}
+          label="TimePicker Mobile"
+          timezone="America/Sao_Paulo"
+        />
+      </div>
+      <div style={{ width: "480px", marginBottom: 30 }}>
+        <DesktopTimePicker
+          sx={{ minWidth: 275 }}
+          label="TimePicker Desktop"
+          timezone="America/Sao_Paulo"
+        />
+      </div>
+    </DemoContainer>
+  </LocalizationProvider>
+);
+
+TimePickerVariants.storyName = "TimePicker Variants";
+
+export const TimePickerLanguage = () => (
+  <>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={"pt-br"}>
+        <DemoContainer components={["TimePicker"]}>
+          <TimePicker
+            sx={{ minWidth: 275 }}
+            label="TimePicker Brazil"
+            timezone="America/Sao_Paulo"
+          />
+        </DemoContainer>
+      </LocalizationProvider>
+    </div>
+
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={"en"}>
+        <DemoContainer components={["TimePicker"]}>
+          <TimePicker
+            sx={{ minWidth: 275 }}
+            label="TimePicker English"
+            timezone="America/Sao_Paulo"
+          />
+        </DemoContainer>
+      </LocalizationProvider>
+    </div>
+    <div style={{ width: "480px", marginBottom: 30 }}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={"es"}>
+        <DemoContainer components={["TimePicker"]}>
+          <TimePicker
+            sx={{ minWidth: 275 }}
+            label="TimePicker Spain"
+            timezone="America/Sao_Paulo"
+          />
+        </DemoContainer>
+      </LocalizationProvider>
+    </div>
+  </>
+);
+
+TimePickerLanguage.storyName = "TimePicker Languages";

package/src/types/index.ts

@@ -1,5 +1,7 @@
 import {
+  AvatarProps as MuiAvatarProps,
   ButtonProps as MuiButtonProps,
+  BadgeProps as MuiBadgeProps,
   IconButtonProps as MuiIconButtonProps,
   TextFieldProps as MuiTextFieldProps,
   CheckboxProps as MuiCheckBoxProps,
@@ -51,6 +53,7 @@ export type ButtonVariant = "text" | "outlined" | "contained";
 export type DropVariant = "menu" | "selectedMenu";
 export type TagVariant = "outlined" | "contained";
 export type TabsVariant = "standard" | "scrollable" | "fullWidth";
+export type DatePickVariant = "responsive" | "desktop" | "mobile";
 export type ProgressVariant =
   | "determinate"
   | "indeterminate"
@@ -137,6 +140,24 @@ export type MuiSelectBaseProps = Omit<
 
 export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
 
+export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, "sx">;
+
+export type MuiAvatarBaseProps = Omit<
+  MuiAvatarProps,
+  "sx" | "src" | "children" | "variant" | "sizes"
+>;
+
+export type MuiBadgeBaseProps = Omit<
+  MuiBadgeProps,
+  | "sx"
+  | "color"
+  | "children"
+  | "invisible"
+  | "variant"
+  | "className"
+  | "badgeContent"
+>;
+
 export type IconScale =
   | "xsmall"
   | "small"