norma-library 0.4.8 → 0.5.0

package/src/interfaces/Tag.ts

@@ -1,17 +1,17 @@
-import { SxProps } from "@mui/material";
-import { Theme } from "@emotion/react";
-import { ColorVariant, MuiTagBaseProps } from "../types";
-import { OverridableStringUnion } from "@mui/types";
-
-export interface ChipPropsColorOverrides {}
-export interface ChipPropsSizeOverrides {}
-
-export interface TagBaseProps extends MuiTagBaseProps {
-  label?: React.ReactNode | String;
-  sx?: SxProps<Theme>;
-  avatar?: React.ReactElement;
-  outlined?: Boolean;
-  size?: OverridableStringUnion<"small" | "medium", ChipPropsSizeOverrides>;
-  color?: OverridableStringUnion<ColorVariant, ChipPropsColorOverrides>;
-  onClose?: React.ReactEventHandler<{}>;
-}
+import { SxProps } from '@mui/material';
+import { Theme } from '@emotion/react';
+import { ColorVariant, MuiTagBaseProps } from '../types';
+import { OverridableStringUnion } from '@mui/types';
+
+export interface ChipPropsColorOverrides {}
+export interface ChipPropsSizeOverrides {}
+
+export interface TagBaseProps extends MuiTagBaseProps {
+  label?: React.ReactNode | String;
+  sx?: SxProps<Theme>;
+  avatar?: React.ReactElement;
+  outlined?: Boolean;
+  size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
+  color?: OverridableStringUnion<ColorVariant, ChipPropsColorOverrides>;
+  onClose?: React.ReactEventHandler<{}>;
+}

package/src/interfaces/TextField.ts

@@ -1,25 +1,11 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react';
 
-import {
-  TextFieldPropsColorOverrides,
-  TextFieldPropsSizeOverrides,
-} from "@mui/material/TextField";
-import {
-  FormHelperTextProps,
-  InputBaseProps,
-  InputLabelProps,
-  OutlinedInputProps,
-  SelectProps,
-} from "@mui/material";
-import { InputProps as StandardInputProps } from "@mui/material/Input";
-import { OverridableStringUnion } from "@mui/types";
-import { TextField } from "@mui/material";
-import {
-  TextFieldColorVariant,
-  MuiTextFieldBaseProps,
-  TextFieldSizeVariant,
-  TextFieldVariant,
-} from "../types";
+import { TextFieldPropsColorOverrides, TextFieldPropsSizeOverrides } from '@mui/material/TextField';
+import { FormHelperTextProps, InputBaseProps, InputLabelProps, OutlinedInputProps, SelectProps } from '@mui/material';
+import { InputProps as StandardInputProps } from '@mui/material/Input';
+import { OverridableStringUnion } from '@mui/types';
+import { TextField } from '@mui/material';
+import { TextFieldColorVariant, MuiTextFieldBaseProps, TextFieldSizeVariant, TextFieldVariant } from '../types';
 
 export interface TextFieldBaseProps extends MuiTextFieldBaseProps {
   id?: string;
@@ -27,7 +13,7 @@ export interface TextFieldBaseProps extends MuiTextFieldBaseProps {
   defaultValue?: string;
   disabled?: boolean;
   required?: boolean;
-  type?: React.InputHTMLAttributes<unknown>["type"];
+  type?: React.InputHTMLAttributes<unknown>['type'];
   hasError?: boolean;
   label?: ReactNode;
   children?: ReactNode;
@@ -44,19 +30,13 @@ export interface TextFieldBaseProps extends MuiTextFieldBaseProps {
   minRows?: string | number;
   select?: boolean;
   SelectProps?: Partial<SelectProps>;
-  onChange?: OutlinedInputProps["onChange"];
-  onClick?: InputBaseProps["onClick"];
-  onBlur?: InputBaseProps["onBlur"];
-  onFocus?: StandardInputProps["onFocus"];
-  size?: OverridableStringUnion<
-    TextFieldSizeVariant,
-    TextFieldPropsSizeOverrides
-  >;
+  onChange?: OutlinedInputProps['onChange'];
+  onClick?: InputBaseProps['onClick'];
+  onBlur?: InputBaseProps['onBlur'];
+  onFocus?: StandardInputProps['onFocus'];
+  size?: OverridableStringUnion<TextFieldSizeVariant, TextFieldPropsSizeOverrides>;
   FormHelperTextProps?: Partial<FormHelperTextProps>;
-  color?: OverridableStringUnion<
-    TextFieldColorVariant,
-    TextFieldPropsColorOverrides
-  >;
+  color?: OverridableStringUnion<TextFieldColorVariant, TextFieldPropsColorOverrides>;
   value?: unknown;
 }
 

package/src/interfaces/TimeLine.ts

@@ -1,16 +1,11 @@
-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[];
-}
+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

@@ -1,13 +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;
-}
+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,22 +1,23 @@
-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";
-export * from "./Modal";
-export * from "./Paper";
-export * from "./ProgressBar";
-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";
+export * from './Accordion';
+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';
+export * from './Icons';
+export * from './Modal';
+export * from './Paper';
+export * from './ProgressBar';
+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/Accordion.stories.tsx

@@ -1,65 +1,65 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Accordion } from "../components";
-import { DataAccordion } from "../types";
-import { Typography } from "@mui/material";
-
-const data: DataAccordion[] = [
-  {
-    label: "Accordion 1",
-    id: "panel-1",
-    children: (
-      <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget.
-      </Typography>
-    ),
-  },
-  {
-    label: "Accordion 2",
-    id: "panel-2",
-    children: (
-      <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget.
-      </Typography>
-    ),
-  },
-];
-
-const meta = {
-  title: "Display/Accordion",
-  component: Accordion,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    data: data,
-  },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const AccordionBasic = () => {
-  return (
-    <div style={{ width: "480px", marginBottom: 30 }}>
-      <Accordion data={data} />
-    </div>
-  );
-};
-
-AccordionBasic.storyName = "Accordion Basic";
-
-export const AccordionExpanded = () => {
-  return (
-    <div style={{ width: "480px", marginBottom: 30 }}>
-      <Accordion data={data} defaultExpanded="panel-1" />
-    </div>
-  );
-};
-
-AccordionExpanded.storyName = "Accordion Expanded";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from '../components';
+import { DataAccordion } from '../types';
+import { Typography } from '@mui/material';
+
+const data: DataAccordion[] = [
+  {
+    label: 'Accordion 1',
+    id: 'panel-1',
+    children: (
+      <Typography>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+        lobortis eget.
+      </Typography>
+    ),
+  },
+  {
+    label: 'Accordion 2',
+    id: 'panel-2',
+    children: (
+      <Typography>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+        lobortis eget.
+      </Typography>
+    ),
+  },
+];
+
+const meta = {
+  title: 'Display/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    data: data,
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AccordionBasic = () => {
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Accordion data={data} />
+    </div>
+  );
+};
+
+AccordionBasic.storyName = 'Accordion Basic';
+
+export const AccordionExpanded = () => {
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Accordion data={data} defaultExpanded="panel-1" />
+    </div>
+  );
+};
+
+AccordionExpanded.storyName = 'Accordion Expanded';