norma-library 0.4.7 → 0.4.9

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/DataGrid.ts

@@ -0,0 +1,51 @@
+import { MuiDataGridBaseProps } from "@/types";
+import { SxProps, Theme } from "@mui/material";
+import { OverridableStringUnion } from "@mui/types";
+
+export interface DataGridPropsVariantOverrides {}
+
+export interface SortingProps {
+  sort?: string;
+  active?: boolean;
+}
+
+export interface DataGridBaseProps extends MuiDataGridBaseProps {
+  data: { dataSource: any; columns: any }[];
+  sx?: SxProps<Theme>;
+  variant?: OverridableStringUnion<
+    | "standard"
+    | "standard-divider"
+    | "standard-selectable"
+    | "quiet"
+    | "quiet-divider"
+    | "quiet-selectable",
+    DataGridPropsVariantOverrides
+  >;
+  width?: string;
+  height?: string;
+}
+
+export interface DataSourceItem {
+  [key: string]: string | number;
+}
+
+export interface DropdownFilterProps {
+  onSelectAll: boolean;
+  format?: string;
+  data: (string | number)[];
+  onFilter: (item: string) => void;
+  onOrder: (item: string) => void;
+  onChecketAll: (item: boolean) => void;
+  onSelected: (item: (string | number)[]) => void;
+  itemsSelected: (string | number)[];
+  onFilterSelected: () => void;
+}
+
+export interface NumberFilterProps {
+  onClick: (selectedOption: string) => void;
+}
+
+export interface PaginationProps {
+  totalItems: number;
+  pageSize: number;
+}

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/index.ts

@@ -3,7 +3,9 @@ export * from "./Avatar";
 export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
+export * from "./ChatMessage";
 export * from "./CheckBox";
+export * from "./DataGrid";
 export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
@@ -12,9 +14,10 @@ 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";

package/src/sample-data.json

@@ -0,0 +1,178 @@
+[
+  {
+    "columns": [
+      {
+        "allowFiltering": true,
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "data",
+        "format": "date",
+        "headerText": "Data",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "duration",
+        "format": "time",
+        "headerText": "Duração",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "campanha",
+        "format": "string",
+        "headerText": "Campanha",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "agente",
+        "format": "string",
+        "headerText": "Agente",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "ani",
+        "format": "number",
+        "headerText": "ANI",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "dnis",
+        "format": "number",
+        "headerText": "DNIS",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "disposition",
+        "format": "string",
+        "headerText": "Tabulação",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "origem",
+        "format": "number",
+        "headerText": "Origem",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "id",
+        "format": "number",
+        "headerText": "ID",
+        "textAlign": "left",
+        "width": "100%"
+      }
+    ],
+    "dataSource": [
+      {
+        "data": "01/05/2022",
+        "duration": "08:18",
+        "campanha": "Campanha 1",
+        "agente": 16321,
+        "ani": 50364908,
+        "dnis": 123456,
+        "disposition": "Tabulação 1",
+        "origin": 12723,
+        "id": 1
+      },
+      {
+        "data": "01/05/2022",
+        "duration": "00:18",
+        "campanha": "Campanha 2",
+        "agente": "16322",
+        "ani": "50364909",
+        "dnis": "123457",
+        "disposition": "Tabulação 2",
+        "origin": "12721",
+        "id": 2
+      },
+      {
+        "data": "03/05/2022",
+        "duration": "03:13",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 3
+      },
+      {
+        "data": "01/05/2022",
+        "duration": "09:19",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 4
+      },
+      {
+        "data": "02/05/2022",
+        "duration": "02:59",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 5
+      },
+      {
+        "data": "04/05/2022",
+        "duration": "05:02",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 6
+      },
+      {
+        "data": "21/05/2022",
+        "duration": "06:02",
+        "campanha": "Campanha 7",
+        "agente": "16315",
+        "ani": "50364909",
+        "dnis": "123456",
+        "disposition": "Tabulação 7",
+        "origin": "12754",
+        "id": 7
+      },
+      {
+        "data": "23/05/2022",
+        "duration": "04:04",
+        "campanha": "Campanha 8",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 8",
+        "origin": "12752",
+        "id": 8
+      }
+    ]
+  }
+]

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

@@ -0,0 +1,28 @@
+import React from "react";
+
+import type { Meta } from "@storybook/react";
+import { DataGrid } from "../components";
+import dataSource from "../components/DataGrid/allData.json";
+import data from "../sample-data.json";
+
+const meta = {
+  title: "Display/DataGrid",
+  component: DataGrid,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof DataGrid>;
+
+export default meta;
+
+export const DataGridBasic = () => {
+  return (
+    <>
+      <DataGrid data={data} />
+    </>
+  );
+};
+
+DataGridBasic.storyName = "DataGrid Basic";

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/types/index.ts

@@ -16,8 +16,11 @@ import {
   SvgIconProps,
   ModalProps,
   CardProps as MuiCardProps,
+  TableProps as MuiTableProps,
 } from "@mui/material";
 
+import { TimelineProps as MuiTimeLineProps } from "@mui/lab";
+
 import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
 
 import { iconsSVG } from "../components/Svgs";
@@ -75,6 +78,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,
@@ -124,7 +132,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"
@@ -142,11 +153,18 @@ export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
 
 export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, "sx">;
 
+export type MuiDataGridBaseProps = Omit<MuiTableProps, "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"
@@ -231,6 +249,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;