norma-library 0.5.4 → 0.5.10

package/src/stories/UncontrolledTable.stories.tsx

@@ -0,0 +1,379 @@
+import React from 'react'
+import UncontrolledTable from '../components/UncontrolledTable'
+import { Button } from "../components/Button"
+import { format } from "date-fns"
+
+export default {
+  title: "Layout/UncontrolledTable",
+  component: UncontrolledTable,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'gray',
+      values: [
+        { 
+          name: 'gray', 
+          value: '#f8f8f8' 
+        }
+      ],
+    },
+  },
+  argTypes: {},
+}
+
+const data = [
+  {
+      "date": format(new Date('8-14-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 1",
+      "agent": "Maggie Leach",
+      "dnis": "dnis",
+      "disposition": "Disposition 1",
+      "origin": "origin",
+      "id": "1",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+      "date": format(new Date('8-13-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 2",
+      "agent": "Christina Harris",
+      "ani": "ani",
+      "dnis": "dnis",
+      "disposition": "Disposition 2",
+      "origin": "origin",
+      "id": "2",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+      "date": format(new Date('8-12-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 3",
+      "agent": "Alexia Crawford",
+      "ani": "ani",
+      "dnis": "dnis",
+      "disposition": "Disposition 3",
+      "origin": "origin",
+      "id": "3",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+      "date": format(new Date('8-11-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 4",
+      "agent": "Robyn Phillips",
+      "ani": "ani",
+      "dnis": "dnis",
+      "disposition": "Disposition 4",
+      "origin": "origin",
+      "id": "4",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+      "date": format(new Date('8-10-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 5",
+      "agent": "Bruce Robinson",
+      "ani": "ani",
+      "dnis": "dnis",
+      "disposition": "Disposition 5",
+      "origin": "origin",
+      "id": "5",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+      "date": format(new Date('8-9-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 6",
+      "agent": "Sophia Fletcher",
+      "ani": "ani",
+      "dnis": "dnis",
+      "disposition": "Disposition 6",
+      "origin": "origin",
+      "id": "6",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+      "date": format(new Date('8-8-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 7",
+      "agent": "Blanca Roberts",
+      "ani": "ani",
+      "dnis": "dnis",
+      "disposition": "Disposition 7",
+      "origin": "origin",
+      "id": "7",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+      "date": format(new Date('8-7-2023 21:29'), "dd/MM/yyyy"),
+      "duration": 60,
+      "campaign": "Campaign 8",
+      "agent": "Peter Warburton",
+      "ani": "ani",
+      "dnis": "dnis",
+      "disposition": "Disposition 8",
+      "origin": "origin",
+      "id": "8",
+      "action": (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      )
+  },
+  {
+    "date": format(new Date('8-7-2023 21:29'), "dd/MM/yyyy"),
+    "duration": 60,
+    "campaign": "Campaign 8",
+    "agent": "Peter Warburton",
+    "ani": "ani",
+    "dnis": "dnis",
+    "disposition": "Disposition 8",
+    "origin": "origin",
+    "id": "8",
+    "action": (
+      <Button
+        color="primary"
+        disableElevation
+        variant="text"
+        onClick={() => console.log('click')}
+      >
+        Editar
+      </Button>
+    )
+},
+{
+  "date": format(new Date('8-7-2023 21:29'), "dd/MM/yyyy"),
+  "duration": 60,
+  "campaign": "Campaign 8",
+  "agent": "Peter Warburton",
+  "ani": "ani",
+  "dnis": "dnis",
+  "disposition": "Disposition 8",
+  "origin": "origin",
+  "id": "8",
+  "action": (
+    <Button
+      color="primary"
+      disableElevation
+      variant="text"
+      onClick={() => console.log('click')}
+    >
+      Editar
+    </Button>
+  )
+},
+{
+  "date": format(new Date('8-7-2023 21:29'), "dd/MM/yyyy"),
+  "duration": 60,
+  "campaign": "Campaign 8",
+  "agent": "Peter Warburton",
+  "ani": "ani",
+  "dnis": "dnis",
+  "disposition": "Disposition 8",
+  "origin": "origin",
+  "id": "8",
+  "action": (
+    <Button
+      color="primary"
+      disableElevation
+      variant="text"
+      onClick={() => console.log('click')}
+    >
+      Editar
+    </Button>
+  )
+},
+{
+  "date": format(new Date('8-7-2023 21:29'), "dd/MM/yyyy"),
+  "duration": 60,
+  "campaign": "Campaign 8",
+  "agent": "Peter Warburton",
+  "ani": "ani",
+  "dnis": "dnis",
+  "disposition": "Disposition 8",
+  "origin": "origin",
+  "id": "8",
+  "action": (
+    <Button
+      color="primary"
+      disableElevation
+      variant="text"
+      onClick={() => console.log('click')}
+    >
+      Editar
+    </Button>
+  )
+},
+{
+  "date": format(new Date('8-7-2023 21:29'), "dd/MM/yyyy"),
+  "duration": 60,
+  "campaign": "Campaign 8",
+  "agent": "Peter Warburton",
+  "ani": "ani",
+  "dnis": "dnis",
+  "disposition": "Disposition 8",
+  "origin": "origin",
+  "id": "8",
+  "action": (
+    <Button
+      color="primary"
+      disableElevation
+      variant="text"
+      onClick={() => console.log('click')}
+    >
+      Editar
+    </Button>
+  )
+}
+]
+
+const columns = [
+  {
+    header: 'data',
+    accessorKey: 'date',
+    type: 'date',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText',
+  },
+  {
+    header: 'duration',
+    accessorKey: 'duration',
+    type: 'number',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'campaign',
+    accessorKey: 'campaign',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'agent',
+    accessorKey: 'agent',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'disposition',
+    accessorKey: 'disposition',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'origin',
+    accessorKey: 'origin',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'ID',
+    accessorKey: 'id',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'action',
+    accessorKey: 'action',
+    type: 'action',
+    enableColumnFilter: false,
+    filterFn: 'customFilterText',
+    disableMenu: true
+  }
+]
+
+export const Default = (args) => (
+  <UncontrolledTable 
+    data={data} 
+    columns={columns} 
+    showTotalResults 
+    showSettings
+    onClick={(value) => console.log('onClick line:', value)}
+    onMouseOver={(value) => console.log('onMouseOver line:', value)}
+    onMouseOut={(value) => console.log('onMouseOut line:', value)}
+    onClearFieldsClick={() => console.log('onClearFieldsClick')}
+    onFilterClick={(column) => console.log('onFilterClick', column)}
+    onChangePage={(page) => console.log('onChangePage', page)}
+    onSortClick={(column, direction) => console.log('onSortClick', column, direction)}
+    pagination={{pageIndex:0, pageSize: 10, totalPages: 2}}
+    showClearFields
+    {...args} 
+  />
+)
+
+Default.args = {}

package/src/styles/custom.css

@@ -1,3 +1,4 @@
+
 .appearance-none {
   -webkit-appearance: none;
   -moz-appearance: none;

package/src/styles/{globals.css → globals.scss}

@@ -1,6 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 :root {
   --transparent: transparent;
@@ -18,4 +15,4 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-}
+}

package/src/types/index.ts

@@ -27,6 +27,8 @@ import { iconsSVG } from '../components/Svgs';
 
 export type ColorVariant = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
 
+export type DisabledVariant = 'true' | 'false';
+
 export type TextFieldColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
 
 export type CheckBoxColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
@@ -165,6 +167,7 @@ export type OnAction = {
   color?: ColorVariant;
   size?: SizeVariant;
   variant?: ButtonVariant;
+  disabled?: boolean;
 };
 
 export type DataAccordion = {

package/tsconfig.json

@@ -10,7 +10,7 @@
     "rootDir": "./src",
     "outDir": "./dist/esm",
     "strict": true,
-    "noImplicitReturns": true,
+    "noImplicitReturns": false,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

package/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/global.scss";`
+      },
+    },
+  },
+})

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ${1}

package/dist/Button/index.d.ts

@@ -1,9 +0,0 @@
-import { ButtonBaseProps } from './types';
-export declare const Button: {
-    ({ label, ...rest }: ButtonBaseProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        variant: string;
-        size: string;
-        color: string;
-    };
-};

package/dist/Button/types.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-import { Theme } from '@emotion/react';
-import { Button } from './index';
-import { ButtonPropsColorOverrides, ButtonPropsSizeOverrides, ButtonPropsVariantOverrides, ButtonProps as MuiButtonProps, SxProps } from '@mui/material';
-import { OverridableStringUnion } from '@mui/types';
-type MuiButtonBaseProps = Pick<MuiButtonProps, 'sx' | 'color' | 'size' | 'variant'>;
-export interface ButtonBaseProps extends MuiButtonBaseProps {
-    label: string;
-    sx?: SxProps<Theme>;
-    children?: ReactNode;
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent | React.TouchEvent) => void;
-    color?: OverridableStringUnion<'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning', ButtonPropsColorOverrides>;
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
-    variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides>;
-    style?: React.CSSProperties;
-}
-export type ButtonType = keyof typeof Button;
-export {};

package/dist/Card/Card.d.ts

@@ -1,3 +0,0 @@
-import { CardBaseProps } from './types';
-declare const Card: ({ children, title }: CardBaseProps) => import("react/jsx-runtime").JSX.Element;
-export default Card;

package/dist/Card/CardHeader.d.ts

@@ -1,3 +0,0 @@
-import { CardHeaderBaseProps } from './types';
-declare const CardHeader: ({ title }: CardHeaderBaseProps) => import("react/jsx-runtime").JSX.Element;
-export default CardHeader;

package/dist/Card/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Card';
-export * from './CardHeader';
-export { default as Card } from './Card';
-export { default as CardHeader } from './CardHeader';