norma-library 0.4.6 → 0.4.8

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/TimeLine.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import type { Meta } from "@storybook/react";
+import { TimeLine } from "../components";
+import { Stack } from "@mui/material";
+
+const meta = {
+  title: "Display/TimeLine",
+  component: TimeLine,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof TimeLine>;
+
+export default meta;
+
+export const TimeLineBasic = () => {
+  return (
+    <>
+      <TimeLine />
+    </>
+  );
+};
+
+export const TimeLineColors = () => {
+  return (
+    <Stack direction="row" spacing={2}>
+      {[
+        "primary",
+        "secondary",
+        "inherit",
+        "error",
+        "info",
+        "success",
+        "warning",
+      ].map((color, key) => (
+        <TimeLine color={color} key={key} />
+      ))}
+    </Stack>
+  );
+};

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,
@@ -16,6 +18,8 @@ import {
   CardProps as MuiCardProps,
 } from "@mui/material";
 
+import { TimelineProps as MuiTimeLineProps } from "@mui/lab";
+
 import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
 
 import { iconsSVG } from "../components/Svgs";
@@ -51,6 +55,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"
@@ -72,6 +77,11 @@ export type TextFieldVariant = "standard" | "outlined" | "filled";
 export type TextFieldSizeVariant = "small" | "medium";
 export type DirectionVariant = "vertical" | "horizontal";
 export type PaperVariant = "elevation" | "outlined";
+export type PositionVariant =
+  | "left"
+  | "right"
+  | "alternate"
+  | "alternate-reverse";
 
 export type MuiTextFieldBaseProps = Omit<
   MuiTextFieldProps,
@@ -121,7 +131,10 @@ export type MuiCardBaseProps = Omit<MuiCardProps, "sx">;
 export type MuiDropDownBaseProps = Omit<MuiDropDownProps, "sx" | "variant">;
 export type MuiTagBaseProps = Omit<MuiChipProps, "sx" | "color">;
 export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, "sx" | "color">;
-export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx">;
+export type MuiProgressBarBaseProps = Omit<
+  MuiLinearProgressProps,
+  "sx" | "ref"
+>;
 export type MuiTabsBaseProps = Omit<
   MuiTabsProps,
   "sx" | "children" | "onChange" | "variant" | "value"
@@ -137,6 +150,29 @@ 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 MuiTimeLineBaseProps = Omit<
+  MuiTimeLineProps,
+  "sx" | "position" | "children" | "ref"
+>;
+
+export type MuiBadgeBaseProps = Omit<
+  MuiBadgeProps,
+  | "sx"
+  | "color"
+  | "children"
+  | "invisible"
+  | "variant"
+  | "className"
+  | "badgeContent"
+>;
+
 export type IconScale =
   | "xsmall"
   | "small"
@@ -210,6 +246,13 @@ export type DataSelect = {
   value: string | number;
 };
 
+export type DataTimeLine = {
+  id?: string;
+  title: string;
+  data: string;
+  by: string;
+};
+
 export type RenderProps<E extends HTMLElement = HTMLElement> = {
   focusRef?: React.MutableRefObject<E | null>;
   id?: string;