norma-library 0.5.10 → 0.5.12

package/src/components/UncontrolledTable/interface.ts

@@ -1,27 +1,36 @@
-import { ColumnDef } from '@tanstack/react-table';
-
-export interface UncontrolledTableProps {
-  data: any;
-  columns: ColumnDef<ColumnsTable>[];
-  onClick: any;
-  onMouseOver: any;
-  onMouseOut: any;
-  showTotalResults: boolean;
-  showSettings: boolean;
-  rowCount: number;
-  pagination?: { pageIndex: number; pageSize: number; totalPages: number };
-  showClearFields?: boolean;
-  onChangePage?: (page: number) => void;
-  onClearFieldsClick?: () => void;
-  onFilterClick?: (column: string) => void;
-  onSortClick?: (column: string, direction: string) => void;
-}
-
-export interface ColumnsTable {
-  header: string;
-  accessorKey: string;
-  type: string;
-  enableColumnFilter: boolean;
-  filterFn: string;
-  nofilter?: boolean;
-}
+import { ColumnDef } from '@tanstack/react-table';
+
+type Labels = {
+  orderAsc: string;
+  orderDesc: string;
+  filter: string;
+  clearFilter: string;
+}
+
+export interface UncontrolledTableProps {
+  data: any;
+  columns: ColumnDef<ColumnsTable>[];
+  onClick: any;
+  onMouseOver: any;
+  onMouseOut: any;
+  showTotalResults: boolean;
+  showSettings: boolean;
+  rowCount: number;
+  pagination?: { pageIndex: number; pageSize: number; totalPages: number };
+  showClearFields?: boolean;
+  customTotalResults?: string;
+  onChangePage?: (page: number) => void;
+  onClearFieldsClick?: () => void;
+  onFilterClick?: (column: string) => void;
+  onSortClick?: (column: string, direction: string) => void;
+  labels?: Labels;
+}
+
+export interface ColumnsTable {
+  header: string;
+  accessorKey: string;
+  type: string;
+  enableColumnFilter: boolean;
+  filterFn: string;
+  nofilter?: boolean;
+}

package/src/components/UncontrolledTable/styles.tsx

@@ -1,120 +1,120 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  width: 100%;
-  background: #fff;
-`;
-
-export const Content = styled.div<any>`
-  min-height: ${props => (props.minHeight ? props.minHeight : 'auto')};
-`;
-
-export const Table = styled.table`
-  border-collapse: collapse;
-  width: 100%;
-  thead {
-    tr {
-      border-bottom: 1px solid #e0e0e0;
-      th {
-        padding: 12px 24px;
-      }
-    }
-  }
-  tbody {
-    tr {
-      td {
-        padding: 16px 24px;
-        color: #666666;
-        font-size: 14px;
-      }
-    }
-    tr:nth-child(even) {
-      background: #fafafa;
-      border-bottom: 1px solid #f1f1f1;
-      border-top: 1px solid #f1f1f1;
-    }
-  }
-`;
-
-export const TextColumn = styled.span<any>`
-  color: #666666;
-  font-size: 14px;
-  width: ${props => (props.$alone ? '100%' : 'auto')};
-  text-align: ${props => (props.$alone ? 'center' : 'initial')};
-`;
-
-export const ColumnContent = styled.div`
-  gap: 2px;
-  align-items: center;
-  display: flex;
-  cursor: pointer;
-`;
-
-export const IconFilterDialog = styled.div`
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-`;
-
-export const backgroundDialog = styled.div`
-  width: 100%;
-  position: absolute;
-  height: 100vh;
-  background: transparent;
-  top: 0;
-  left: 0;
-`;
-
-export const FilterDialog = styled.div`
-  padding: 10px 0;
-  margin: 6px 0px 0 0;
-  position: absolute;
-  width: max-content;
-  background: #fff;
-  box-shadow: 0px 3px 6px #00000029;
-  border: 1px solid #e0e0e0;
-  z-index: 99;
-`;
-
-export const ListFilterDialog = styled.div`
-  display: flex;
-  flex-direction: column;
-  .label {
-    margin: 0 0 8px 0;
-    color: #666666;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: left;
-  }
-  .select {
-    border: 1px solid #e0e0e0;
-    padding: 8px 12px;
-  }
-`;
-
-export const OptionFilterDialog = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  padding: 6px 15px;
-  cursor: pointer;
-  &:hover {
-    background: rgba(0, 0, 0, 0.04);
-  }
-  .icon {
-    color: #666;
-  }
-  .rotate {
-    rotate: 180deg;
-  }
-  div {
-    width: 20px;
-    height: 20px;
-  }
-  p {
-    margin: 0;
-    color: #666666;
-    font-size: 16px;
-    font-weight: 400;
-  }
-`;
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  background: #fff;
+`;
+
+export const Content = styled.div<any>`
+  min-height: ${props => (props.minHeight ? props.minHeight : 'auto')};
+`;
+
+export const Table = styled.table`
+  border-collapse: collapse;
+  width: 100%;
+  thead {
+    tr {
+      border-bottom: 1px solid #e0e0e0;
+      th {
+        padding: 12px 24px;
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        padding: 16px 24px;
+        color: #666666;
+        font-size: 14px;
+      }
+    }
+    tr:nth-child(even) {
+      background: #fafafa;
+      border-bottom: 1px solid #f1f1f1;
+      border-top: 1px solid #f1f1f1;
+    }
+  }
+`;
+
+export const TextColumn = styled.span<any>`
+  color: #666666;
+  font-size: 14px;
+  width: ${props => (props.$alone ? '100%' : 'auto')};
+  text-align: ${props => (props.$alone ? 'center' : 'initial')};
+`;
+
+export const ColumnContent = styled.div`
+  gap: 2px;
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+`;
+
+export const IconFilterDialog = styled.div`
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+`;
+
+export const backgroundDialog = styled.div`
+  width: 100%;
+  position: absolute;
+  height: 100vh;
+  background: transparent;
+  top: 0;
+  left: 0;
+`;
+
+export const FilterDialog = styled.div`
+  padding: 10px 0;
+  margin: 6px 0px 0 0;
+  position: absolute;
+  width: max-content;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #e0e0e0;
+  z-index: 99;
+`;
+
+export const ListFilterDialog = styled.div`
+  display: flex;
+  flex-direction: column;
+  .label {
+    margin: 0 0 8px 0;
+    color: #666666;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: left;
+  }
+  .select {
+    border: 1px solid #e0e0e0;
+    padding: 8px 12px;
+  }
+`;
+
+export const OptionFilterDialog = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 6px 15px;
+  cursor: pointer;
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .icon {
+    color: #666;
+  }
+  .rotate {
+    rotate: 180deg;
+  }
+  div {
+    width: 20px;
+    height: 20px;
+  }
+  p {
+    margin: 0;
+    color: #666666;
+    font-size: 16px;
+    font-weight: 400;
+  }
+`;

package/src/components/index.ts

@@ -1,24 +1,24 @@
-export * from './Accordion';
-export * from './Avatar';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './ChatMessage';
-export * from './ChatMessageBalloon/ChatMessageBalloon';
-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 './Table';
-export * from './TextField';
-export * from './TimeLine';
-export * from './TimePicker';
+export * from './Accordion';
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './ChatMessage';
+export * from './ChatMessageBalloon/ChatMessageBalloon';
+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 './Table';
+export * from './TextField';
+export * from './TimeLine';
+export * from './TimePicker';

package/src/helpers/alignments.ts

@@ -1,14 +1,14 @@
-function getAlign(border: string) {
-  switch (border) {
-    case 'left':
-      return 'text-start justify-items-start';
-    case 'center':
-      return 'justify-items-center';
-    case 'right':
-      return 'text-end justify-items-end';
-    default:
-      return 'text-center inline-flex';
-  }
-}
-
-export { getAlign };
+function getAlign(border: string) {
+  switch (border) {
+    case 'left':
+      return 'text-start justify-items-start';
+    case 'center':
+      return 'justify-items-center';
+    case 'right':
+      return 'text-end justify-items-end';
+    default:
+      return 'text-center inline-flex';
+  }
+}
+
+export { getAlign };

package/src/helpers/borders.ts

@@ -1,18 +1,18 @@
-function getBorderSize(size: number) {
-  switch (size.toString()) {
-    case '0':
-      return 'border-0';
-    case '1':
-      return 'border border-[0.05rem]';
-    case '2':
-      return 'border border-2';
-    case '4':
-      return 'border border-4';
-    case '8':
-      return 'border border-8';
-    default:
-      return 'border border-2';
-  }
-}
-
-export { getBorderSize };
+function getBorderSize(size: number) {
+  switch (size.toString()) {
+    case '0':
+      return 'border-0';
+    case '1':
+      return 'border border-[0.05rem]';
+    case '2':
+      return 'border border-2';
+    case '4':
+      return 'border border-4';
+    case '8':
+      return 'border border-8';
+    default:
+      return 'border border-2';
+  }
+}
+
+export { getBorderSize };