norma-library 0.6.77 → 0.6.79

package/src/components/UncontrolledTable/components/row/DraggableRow.tsx

@@ -0,0 +1,34 @@
+import React, { CSSProperties } from 'react';
+import * as S from './styles';
+
+import { flexRender } from '@tanstack/react-table';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.id,
+  });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: 'relative',
+  };
+
+  return (
+    <S.Tr $hasAction={!!onClick || !!onMouseOver || !!onMouseOut} ref={setNodeRef} style={style}>
+      {row.getVisibleCells().map((cell: any) => (
+        <S.Td key={cell.id} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
+          {cell.column.columnDef.type == 'action'
+            ? cell.getValue()
+            : flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </S.Td>
+      ))}
+    </S.Tr>
+  );
+};
+
+export default DraggableRow;

package/src/components/UncontrolledTable/components/row/RowDragHandleCell.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { Button } from '../../../../components/Button';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+const RowDragHandleCell: React.FC<any> = ({ rowId }: { rowId: string}) => {
+  const { attributes, listeners } = useSortable({
+    id: rowId,
+  });
+  return (
+    <Button {...attributes} {...listeners} style={{ cursor: 'grab' }}>
+      <DragIndicatorIcon />
+    </Button>
+  );
+};
+
+export default RowDragHandleCell;

package/src/components/UncontrolledTable/components/row/SimpleRow.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { flexRender } from '@tanstack/react-table';
+import * as S from './styles';
+
+const SimpleRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
+  return (
+    <S.Tr
+      $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
+      onClick={() => (onClick ? onClick(row.original) : null)}
+      onMouseOver={() => (onMouseOver ? onMouseOver(row.original) : null)}
+      onMouseOut={() => (onMouseOut ? onMouseOut(row.original) : null)}
+    >
+      {row.getVisibleCells().map((cell: any, index: number) => {
+        return (
+          <S.Td key={index}>
+            {cell.column.columnDef.type == 'action'
+              ? cell.getValue()
+              : flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </S.Td>
+        );
+      })}
+    </S.Tr>
+  );
+};
+
+export default SimpleRow;

package/src/components/UncontrolledTable/index.tsx

@@ -10,7 +10,21 @@ import {
   TableOptions,
 } from '@tanstack/react-table';
 
-import { Pagination, Header, TBody } from './components';
+import {
+  DndContext,
+  MouseSensor,
+  closestCenter,
+  type DragEndEvent,
+  type UniqueIdentifier,
+  useSensor,
+  useSensors,
+  TouchSensor,
+  KeyboardSensor,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+
+import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components';
 import { UncontrolledTableProps } from './interface';
 import useClickOutside from '../../hooks/useClickOutside';
 
@@ -35,6 +49,8 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
     tableClassName,
     stickyHeader,
     stickyHeaderP,
+    draggable,
+    onDragEnd,
   } = props;
 
   const [openFilterDialog, setOpenFilterDialog] = useState('');
@@ -44,10 +60,27 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
   const [orderSmallest, setOrderSmallest] = useState(false);
   const [orderLargest, setOrderLargest] = useState(false);
 
+  const _columns: any[] = useMemo(() => {
+    return draggable
+      ? [
+          {
+            id: 'drag',
+            header: '',
+            cell: ({ row }: { row: any }) => <RowDragHandleCell rowId={row.id}/>,
+            disableMenu: true,
+          },
+          ...columns.map((column) => ({
+            ...column,
+            disableMenu: true,
+          })),
+        ]
+      : columns;
+  }, [columns]);
+
   const reactTableConfig = useMemo(() => {
     const config: TableOptions<unknown> = {
-      columns: columns as any,
       data,
+      columns: _columns,
       state: {
         sorting: sorting,
         columnFilters: filterByColumn,
@@ -59,16 +92,40 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
       onSortingChange: setSorting,
       onColumnFiltersChange: setFilterByColumn,
       manualPagination: true,
+      getRowId: (row: any) => row.id,
+      debugTable: true,
+      debugHeaders: true,
+      debugColumns: true,
     };
 
     return config;
-  }, [data, sorting, filterByColumn, columns, pagination]);
+  }, [data, sorting, filterByColumn, _columns, pagination]);
 
   const table = useReactTable(reactTableConfig);
   const filterRef = useRef<HTMLDivElement>(null);
 
   useClickOutside(filterRef, () => setOpenFilterDialog(''));
 
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+
+    if (active && over && active.id !== over.id && onDragEnd) {
+      const oldIndex = dataIds.indexOf(active.id);
+      const newIndex = dataIds.indexOf(over.id);
+
+      const _data = arrayMove(data, oldIndex, newIndex);
+      onDragEnd(_data);
+    }
+  };
+
+  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+
+  const dataIds = useMemo<UniqueIdentifier[]>(
+    () => data?.map((item: { id: UniqueIdentifier }) => item.id) || [],
+    [data],
+  );
+
   return (
     <S.Container>
       <Header
@@ -89,128 +146,157 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
         hideColumns={props.hideColumns}
         onColumnVisibilityChange={props.onColumnVisibilityChange}
       />
-      <S.Table className={tableClassName || ''}>
-        <S.Thead $sticky={stickyHeader} $stickyTopP={stickyHeaderP}>
-          {table.getHeaderGroups().map((headerGroup: any) => (
-            <S.TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header: any) => (
-                <S.Th key={header.id}>
-                  <S.ColumnContent
-                    onClick={() => {
-                      if (!header?.column?.columnDef?.disableMenu)
-                        setOpenFilterDialog(header.column.columnDef.accessorKey);
-                    }}
-                  >
-                    <S.TextColumn>
-                      {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
-                    </S.TextColumn>
-                    {!header?.column?.columnDef?.disableMenu && (
-                      <S.IconFilterDialog>
-                        <svg fill="#666" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
-                          <path d="m7 10 5 5 5-5z" />
-                        </svg>
-                      </S.IconFilterDialog>
-                    )}
-                  </S.ColumnContent>
-                  {openFilterDialog === header.column.columnDef.accessorKey && (
-                    <S.FilterDialog ref={filterRef}>
-                      <S.ListFilterDialog>
-                        <S.OptionFilterDialog
-                          style={{
-                            background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
-                          }}
-                          onClick={() => {
-                            onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
-                            setOpenFilterDialog('');
-                          }}
-                        >
-                          <div className="icon">
-                            <svg
-                              fill="#666"
-                              stroke="currentColor"
-                              strokeWidth="1.5"
-                              viewBox="0 0 24 24"
-                              xmlns="http://www.w3.org/2000/svg"
-                              aria-hidden="true"
-                              width="20"
-                              height="20"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
-                              />
-                            </svg>
-                          </div>
-                          <p>{labels?.orderAsc || 'Menor primeiro'}</p>
-                        </S.OptionFilterDialog>
-                        <S.OptionFilterDialog
-                          style={{
-                            background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
-                          }}
-                          onClick={() => {
-                            onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
-                            setOpenFilterDialog('');
-                          }}
-                        >
-                          <div className="icon rotate">
-                            <svg
-                              fill="#666"
-                              stroke="currentColor"
-                              strokeWidth="1.5"
-                              viewBox="0 0 24 24"
-                              xmlns="http://www.w3.org/2000/svg"
-                              aria-hidden="true"
-                              width="20"
-                              height="20"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
-                              ></path>
-                            </svg>
-                          </div>
-                          <p>{labels?.orderDesc || 'Maior primeiro'}</p>
-                        </S.OptionFilterDialog>
-                        {!header?.column?.columnDef?.nofilter && (
+      <DndContext
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        onDragEnd={handleDragEnd}
+        sensors={sensors}
+      >
+        <S.Table className={tableClassName || ''}>
+          <S.Thead $sticky={stickyHeader} $stickyTopP={stickyHeaderP}>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <S.TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <S.Th key={header.id}>
+                    <S.ColumnContent
+                      onClick={() => {
+                        if (!header?.column?.columnDef?.disableMenu)
+                          setOpenFilterDialog(header.column.columnDef.accessorKey);
+                      }}
+                    >
+                      <S.TextColumn>
+                        {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                      </S.TextColumn>
+                      {!header?.column?.columnDef?.disableMenu && (
+                        <S.IconFilterDialog>
+                          <svg fill="#666" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+                            <path d="m7 10 5 5 5-5z" />
+                          </svg>
+                        </S.IconFilterDialog>
+                      )}
+                    </S.ColumnContent>
+                    {openFilterDialog === header.column.columnDef.accessorKey && (
+                      <S.FilterDialog ref={filterRef}>
+                        <S.ListFilterDialog>
                           <S.OptionFilterDialog
+                            style={{
+                              background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
+                            }}
                             onClick={() => {
-                              onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
+                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
                               setOpenFilterDialog('');
                             }}
                           >
                             <div className="icon">
                               <svg
-                                fill="none"
+                                fill="#666"
                                 stroke="currentColor"
                                 strokeWidth="1.5"
                                 viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg"
                                 aria-hidden="true"
-                                width="16"
-                                height="16"
+                                width="20"
+                                height="20"
                               >
                                 <path
                                   strokeLinecap="round"
                                   strokeLinejoin="round"
-                                  d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+                                  d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+                                />
+                              </svg>
+                            </div>
+                            <p>{labels?.orderAsc || 'Menor primeiro'}</p>
+                          </S.OptionFilterDialog>
+                          <S.OptionFilterDialog
+                            style={{
+                              background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
+                            }}
+                            onClick={() => {
+                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
+                              setOpenFilterDialog('');
+                            }}
+                          >
+                            <div className="icon rotate">
+                              <svg
+                                fill="#666"
+                                stroke="currentColor"
+                                strokeWidth="1.5"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                                aria-hidden="true"
+                                width="20"
+                                height="20"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
                                 ></path>
                               </svg>
                             </div>
-                            <p>{labels?.filter || 'Filtrar por'}</p>
+                            <p>{labels?.orderDesc || 'Maior primeiro'}</p>
                           </S.OptionFilterDialog>
-                        )}
-                      </S.ListFilterDialog>
-                    </S.FilterDialog>
-                  )}
-                </S.Th>
-              ))}
-            </S.TableRow>
-          ))}
-        </S.Thead>
-        <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
-      </S.Table>
+                          {!header?.column?.columnDef?.nofilter && (
+                            <S.OptionFilterDialog
+                              onClick={() => {
+                                onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
+                                setOpenFilterDialog('');
+                              }}
+                            >
+                              <div className="icon">
+                                <svg
+                                  fill="none"
+                                  stroke="currentColor"
+                                  strokeWidth="1.5"
+                                  viewBox="0 0 24 24"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  aria-hidden="true"
+                                  width="16"
+                                  height="16"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+                                  ></path>
+                                </svg>
+                              </div>
+                              <p>{labels?.filter || 'Filtrar por'}</p>
+                            </S.OptionFilterDialog>
+                          )}
+                        </S.ListFilterDialog>
+                      </S.FilterDialog>
+                    )}
+                  </S.Th>
+                ))}
+              </S.TableRow>
+            ))}
+          </S.Thead>
+          <tbody>
+            <SortableContext items={dataIds} strategy={verticalListSortingStrategy}>
+              {table.getRowModel().rows.map((row: any) => {
+                return draggable ? (
+                  <DraggableRow
+                    key={row.id}
+                    row={row}
+                    onClick={onClick}
+                    onMouseOver={onMouseOver}
+                    onMouseOut={onMouseOut}
+                  />
+                ) : (
+                  <SimpleRow
+                    key={row.id}
+                    row={row}
+                    onClick={onClick}
+                    onMouseOver={onMouseOver}
+                    onMouseOut={onMouseOut}
+                  />
+                );
+              })}
+            </SortableContext>
+          </tbody>
+        </S.Table>
+      </DndContext>
       {pagination && (
         <Pagination
           pagination={pagination}

package/src/components/UncontrolledTable/interface.ts

@@ -24,17 +24,19 @@ export interface UncontrolledTableProps {
   totalPages: number;
   showClearFields?: boolean;
   customTotalResults?: string;
-  onChangePage: (pagination: Pagination) => void;
-  onClearFieldsClick?: () => void;
-  onFilterClick?: (column: string) => void;
-  onSortClick?: (column: string, direction: string) => void;
   labels?: Labels;
   tableClassName?: string;
   stickyHeader?: boolean;
   stickyHeaderP?: number;
   customIcons?: React.ReactNode[];
   hideColumns?: string[];
+  draggable?: boolean;
+  onChangePage: (pagination: Pagination) => void;
+  onClearFieldsClick?: () => void;
+  onFilterClick?: (column: string) => void;
+  onSortClick?: (column: string, direction: string) => void;
   onColumnVisibilityChange?: (columnId: string, isVisible: boolean) => void;
+  onDragEnd?: (data: any[]) => void;
 }
 
 export interface ColumnsTable {

package/src/components/index.ts

@@ -12,10 +12,12 @@ export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
 export * from './Paper';
+export * from './ProductCard/ProductCard';
 export * from './ProgressBar';
 export * from './RadioGroup';
 export * from './RangerSlider';
 export * from './Select';
+export * from './ServiceCard/ServiceCard';
 export * from './Tabs';
 export * from './Tag';
 export * from './Table';

package/src/index.ts

@@ -14,7 +14,7 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
-import { ChatMessage, ChatMessageBalloon } from './components';
+import { ChatMessage, ChatMessageBalloon, ProductCard, ServiceCard } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 import DateInput from './components/DateInput';
@@ -47,6 +47,7 @@ export {
   Modal,
   Paper,
   ProgressBar,
+  ProductCard,
   RadioGroup,
   RangerSlider,
   Select,
@@ -59,6 +60,7 @@ export {
   Box,
   Breadcrumb,
   SelectInput,
+  ServiceCard,
   MultiSelectInput,
   Text,
   Title,

package/src/interfaces/Modal.ts

@@ -14,5 +14,6 @@ export interface ModalBaseProps extends MuiModalBaseProps {
   id?: string;
   paperProps?: MuiPaperBaseProps;
   width?: string;
-
+  shouldNotCloseOnOutsideClick?: boolean;
+  
 }

package/src/interfaces/ProductCard.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react'
+
+export interface ProductCardProps {
+    // product?: string
+    onClick?: () => void
+    disabled?: boolean
+    color: string
+    iconColor: string
+    iconName: string
+    title: string
+    description: string
+    hasBorder?: boolean
+    flaggable?: boolean
+  }
+  
+  
+export interface BgIconProps {
+    $bColor: string
+    children?: ReactNode
+    className?: string
+    color: string
+  }
+  

package/src/interfaces/RangerSlider.ts

@@ -18,4 +18,7 @@ export interface RangerSliderBaseProps extends MuiRangerSliderBaseProps {
   defaultValue?: number | number[];
   valueLabelDisplay?: 'on' | 'auto' | 'off';
   color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;
+  label?: string;
+  showValueInline?: boolean;
+  valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
 }

package/src/interfaces/ServiceCard.ts

@@ -0,0 +1,11 @@
+export interface ServiceCardProps {
+    // service: string;
+    title?: string;
+    description: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    color?: string;
+    iconColor?: string;
+    iconName?: string;
+    borderColor?: string;
+  }

package/src/stories/IconifyIcon.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { IconifyIcon } from '../components/IconifyIcon';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof IconifyIcon> = {
+    title: "Display/IconifyIcons",
+    component: IconifyIcon,
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const OpenSourceIcons: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Este é um exemplo de uso do componente IconifyIcon, que permite a utilização de ícones de diversas bibliotecas, como Lucide, Material UI, e mais.',
+            },
+        },
+    },
+    render: () => (
+        <>
+            <IconifyIcon iconName="mdi:home" size="24px" color="red" />
+            <IconifyIcon iconName="mdi:account" size="24px" color="blue" />
+            <IconifyIcon iconName="mdi:account-check" size="24px" color="green" />
+            <IconifyIcon iconName="mdi:account-edit" size="24px" color="purple" />
+        </>
+
+    ),
+}

package/src/stories/Modal.stories.tsx

@@ -244,3 +244,57 @@ export const ModalSize = () => {
 };
 
 ModalSize.storyName = 'Modal width and height';
+
+export const ModalOutsideClick = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const defaultAction = [
+    {
+      label: 'Cancelar',
+      action: handleClose,
+      color: 'error',
+      size: 'medium',
+      variant: 'outlined',
+    },
+    {
+      label: 'Confirmar',
+      action: handleClose,
+      color: 'primary',
+      size: 'medium',
+      variant: 'contained',
+    },
+  ];
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          shouldNotCloseOnOutsideClick={true}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          action={defaultAction}
+          title="Select a company"
+          width='90vw'
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalOutsideClick.storyName = 'Modal custom outside click behaviour';

package/src/stories/ModalStatus.stories.tsx

@@ -11,6 +11,7 @@ const actions: OnAction[] = [
   },
   {
     label: 'Entendi',
+    variant: 'contained',
     action: () => {},
   },
 ];