@gobolt/genesis 0.2.21 → 0.3.0

package/dist/components/Table/__mocks__/table-mocks.js

@@ -1,10 +1,10 @@
 import React__default from "react";
 import Badge from "../../Badge/Badge.js";
-const startCase = (str) => {
-  if (str) {
-    return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+const startCase = (string_) => {
+  if (string_) {
+    return string_.replaceAll(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
   }
-  return str;
+  return string_;
 };
 const mockColumns = [
   {
@@ -59,13 +59,245 @@ const mockColumns = [
     }
   }
 ];
-const mockColumnsWithSort = mockColumns.map((column) => ({
+mockColumns.map((column) => ({
   ...column
 }));
-mockColumnsWithSort[1].sorter = true;
-mockColumnsWithSort[2].sorter = true;
-mockColumnsWithSort[4].sorter = true;
+const mockDataSource = {
+  appointments: [
+    {
+      id: "1",
+      number: "1",
+      timerange: "9:00 AM - 10:00 AM",
+      status: "in_progress",
+      address: {
+        nickname: "Home",
+        address: "123 Main St"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "2",
+      number: "2",
+      timerange: "10:00 AM - 11:00 AM",
+      status: "scheduled",
+      address: {
+        nickname: "Work",
+        address: "456 Elm St"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "3",
+      number: "3",
+      timerange: "11:00 AM - 12:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Store",
+        address: "789 Oak St"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "4",
+      number: "4",
+      timerange: "1:00 PM - 2:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Office",
+        address: "321 Pine St"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "5",
+      number: "5",
+      timerange: "2:00 PM - 3:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Library",
+        address: "555 Book Lane"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "6",
+      number: "6",
+      timerange: "3:00 PM - 4:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Gym",
+        address: "777 Fitness Ave"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "7",
+      number: "7",
+      timerange: "4:00 PM - 5:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Mall",
+        address: "888 Shopping Center"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "8",
+      number: "8",
+      timerange: "9:00 AM - 10:00 AM",
+      status: "completed",
+      address: {
+        nickname: "School",
+        address: "999 Education Rd"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "9",
+      number: "9",
+      timerange: "10:00 AM - 11:00 AM",
+      status: "scheduled",
+      address: {
+        nickname: "Restaurant",
+        address: "111 Food Court"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "10",
+      number: "10",
+      timerange: "11:00 AM - 12:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Park",
+        address: "222 Green Ave"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "11",
+      number: "11",
+      timerange: "1:00 PM - 2:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Beach",
+        address: "333 Shore Dr"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "12",
+      number: "12",
+      timerange: "2:00 PM - 3:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Hotel",
+        address: "444 Stay Blvd"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "13",
+      number: "13",
+      timerange: "3:00 PM - 4:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Airport",
+        address: "666 Flight Way"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "14",
+      number: "14",
+      timerange: "4:00 PM - 5:00 PM",
+      status: "cancelled",
+      address: {
+        nickname: "Stadium",
+        address: "777 Sports Complex"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "15",
+      number: "15",
+      timerange: "9:00 AM - 10:00 AM",
+      status: "scheduled",
+      address: {
+        nickname: "Theater",
+        address: "888 Show Ave"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "16",
+      number: "16",
+      timerange: "10:00 AM - 11:00 AM",
+      status: "scheduled",
+      address: {
+        nickname: "Museum",
+        address: "999 History Lane"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "17",
+      number: "17",
+      timerange: "11:00 AM - 12:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Zoo",
+        address: "123 Animal Park"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "18",
+      number: "18",
+      timerange: "1:00 PM - 2:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Bank",
+        address: "456 Money St"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "19",
+      number: "19",
+      timerange: "2:00 PM - 3:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Post Office",
+        address: "789 Mail Road"
+      },
+      job_subtype: "delivery"
+    },
+    {
+      id: "20",
+      number: "20",
+      timerange: "3:00 PM - 4:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Church",
+        address: "321 Faith Street"
+      },
+      job_subtype: "pickup"
+    },
+    {
+      id: "21",
+      number: "21",
+      timerange: "4:00 PM - 5:00 PM",
+      status: "scheduled",
+      address: {
+        nickname: "Pharmacy",
+        address: "654 Health Ave"
+      },
+      job_subtype: "delivery"
+    }
+  ]
+};
 export {
   mockColumns,
-  mockColumnsWithSort
+  mockDataSource
 };

package/dist/components/Table/__stories__/GenesisTable.stories.d.ts

@@ -1,3 +1,5 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/Table/__stories__/Table.stories.d.ts

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { default as Table } from '../Table';
-declare const meta: Meta<typeof Table>;
+import { default as TablePagination } from '../TablePagination';
+declare const meta: Meta<typeof TablePagination>;
 export default meta;
-type Story = StoryObj<typeof Table>;
-export declare const SortColumns: Story;
+type Story = StoryObj<typeof TablePagination>;
 export declare const BulkCheckSelection: Story;
 export declare const RadioSelection: Story;
+export declare const MainContentCell: Story;

package/dist/components/Table/index.d.ts

@@ -1,4 +1,5 @@
-export { default } from './Table';
+export { default } from './TablePagination';
 export type { TableProps } from './Table';
+export type { TablePaginationProps } from './TablePagination';
 export { useTable } from './useTable';
 export type { UseTableConfig } from './useTable';

package/dist/components/Table/styles.cjs

@@ -1,32 +1,61 @@
 "use strict";
 var styled = require("styled-components");
 var Table$1 = require("../../node_modules/antd/es/table/Table.cjs");
-const getGenesisClass = ({ colors, borderRadius, sizing }) => `
-  &.ant-table-wrapper {
-    // Add your custom styles here
-  }
-  
-  .ant-table {
-    // Add your custom table styles here
-  }
-
-  .ant-table-thead > tr > th {
-    // Add your custom header styles here
-  }
-
-  .ant-table-tbody > tr  {
-    // Add your custom row styles here
-  }
-
-  .ant-table-tbody > tr > td {
-    // Add your custom cell styles here
-    font-family: 'Inter', sans-serif;
-    font-size: 14px;
-  }
-`;
+const getGenesisClass = ({ colors, borderRadius, sizing, typography, components }, $isMainContentCell) => {
+  return `
+    &.ant-table-wrapper {
+      // Add your custom styles here
+    }
+
+    .ant-table {
+      // Add your custom table styles here
+    }
+
+    .ant-table-cell {
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      color: ${$isMainContentCell ? colors.onsurface.copy : colors.onsurface["copy-light"]} !important;
+      background-color: ${components.tableCell.surface} !important;
+      transition: background-color 0.2s ease;
+    }
+
+    .ant-table-tbody > tr:hover > td,
+    .ant-table-tbody > tr:hover > .ant-table-cell {
+      background-color: ${components.tableCell.hover} !important;
+    }
+
+    .ant-table-cell-selected {
+      background-color: ${components.tableCell.selected} !important;
+    }
+
+    .ant-table-thead > tr > th {
+      // Add your custom header styles here
+      font-family: 'Inter', sans-serif;
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      font-weight: 400;
+      color: ${$isMainContentCell ? colors.onsurface.copy : colors.onsurface["copy-light"]} !important;
+    }
+
+    .ant-table-tbody > tr  {
+      // Add your custom row styles here
+    }
+
+    .ant-table-tbody > tr > td {
+      // Add your custom cell styles here
+      font-family: 'Inter', sans-serif;
+      font-size: 14px;
+      color: ${colors.onsurface["copy-light"]};
+    }
+
+    .ant-table-tbody > tr.ant-table-row-selected > td,
+    .ant-table-tbody > tr.ant-table-row-selected > .ant-table-cell {
+      background-color: ${components.tableCell.selected} !important;
+      color: #fff !important;
+    }
+  `;
+};
 const Table = styled(Table$1)`
-  ${({ theme }) => {
-  return getGenesisClass(theme);
+  ${({ theme, $isMainContentCell }) => {
+  return getGenesisClass(theme, $isMainContentCell);
 }}
 `;
 exports.Table = Table;

package/dist/components/Table/styles.d.ts

@@ -1,7 +1,28 @@
-import { Table as AntTable } from 'antd';
-export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
+import { TableProps } from 'antd';
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+export interface StyledTableProps<T = any> extends TableProps<T> {
+    theme?: GenesisTheme;
+    $isMainContentCell?: boolean;
+}
+export declare const getGenesisClass: ({ colors, borderRadius, sizing, typography, components }: {
     colors: any;
     borderRadius: any;
     sizing: any;
-}) => string;
-export declare const Table: typeof AntTable;
+    typography: any;
+    components: any;
+}, $isMainContentCell: any) => string;
+export declare const Table: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<TableProps<unknown> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<import('rc-table').Reference>, "ref"> & {
+    ref?: import('react').Ref<import('rc-table').Reference>;
+}, StyledTableProps<any>>> & string & Omit<import('antd/es/table/interface').RefTable & {
+    displayName?: string;
+    SELECTION_COLUMN: typeof import('antd/es/table/hooks/useSelection').SELECTION_COLUMN;
+    EXPAND_COLUMN: typeof import('rc-table').EXPAND_COLUMN;
+    SELECTION_ALL: typeof import('antd/es/table/hooks/useSelection').SELECTION_ALL;
+    SELECTION_INVERT: typeof import('antd/es/table/hooks/useSelection').SELECTION_INVERT;
+    SELECTION_NONE: typeof import('antd/es/table/hooks/useSelection').SELECTION_NONE;
+    Column: <RecordType extends import('antd/es/_util/type').AnyObject>(_: import('antd').TableColumnProps<RecordType>) => null;
+    ColumnGroup: <RecordType extends import('antd/es/_util/type').AnyObject>(_: import('antd/es/table/ColumnGroup').ColumnGroupProps<RecordType>) => null;
+    Summary: typeof import('rc-table').Summary;
+}, keyof import('react').Component<any, {}, any>>;

package/dist/components/Table/styles.js

@@ -1,31 +1,60 @@
 import styled from "styled-components";
 import ForwardTable from "../../node_modules/antd/es/table/Table.js";
-const getGenesisClass = ({ colors, borderRadius, sizing }) => `
-  &.ant-table-wrapper {
-    // Add your custom styles here
-  }
-  
-  .ant-table {
-    // Add your custom table styles here
-  }
-
-  .ant-table-thead > tr > th {
-    // Add your custom header styles here
-  }
-
-  .ant-table-tbody > tr  {
-    // Add your custom row styles here
-  }
-
-  .ant-table-tbody > tr > td {
-    // Add your custom cell styles here
-    font-family: 'Inter', sans-serif;
-    font-size: 14px;
-  }
-`;
+const getGenesisClass = ({ colors, borderRadius, sizing, typography, components }, $isMainContentCell) => {
+  return `
+    &.ant-table-wrapper {
+      // Add your custom styles here
+    }
+
+    .ant-table {
+      // Add your custom table styles here
+    }
+
+    .ant-table-cell {
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      color: ${$isMainContentCell ? colors.onsurface.copy : colors.onsurface["copy-light"]} !important;
+      background-color: ${components.tableCell.surface} !important;
+      transition: background-color 0.2s ease;
+    }
+
+    .ant-table-tbody > tr:hover > td,
+    .ant-table-tbody > tr:hover > .ant-table-cell {
+      background-color: ${components.tableCell.hover} !important;
+    }
+
+    .ant-table-cell-selected {
+      background-color: ${components.tableCell.selected} !important;
+    }
+
+    .ant-table-thead > tr > th {
+      // Add your custom header styles here
+      font-family: 'Inter', sans-serif;
+      font-size: ${$isMainContentCell ? "16px" : "14px"} !important;
+      font-weight: 400;
+      color: ${$isMainContentCell ? colors.onsurface.copy : colors.onsurface["copy-light"]} !important;
+    }
+
+    .ant-table-tbody > tr  {
+      // Add your custom row styles here
+    }
+
+    .ant-table-tbody > tr > td {
+      // Add your custom cell styles here
+      font-family: 'Inter', sans-serif;
+      font-size: 14px;
+      color: ${colors.onsurface["copy-light"]};
+    }
+
+    .ant-table-tbody > tr.ant-table-row-selected > td,
+    .ant-table-tbody > tr.ant-table-row-selected > .ant-table-cell {
+      background-color: ${components.tableCell.selected} !important;
+      color: #fff !important;
+    }
+  `;
+};
 const Table = styled(ForwardTable)`
-  ${({ theme }) => {
-  return getGenesisClass(theme);
+  ${({ theme, $isMainContentCell }) => {
+  return getGenesisClass(theme, $isMainContentCell);
 }}
 `;
 export {

package/dist/components/Tabs/styles.d.ts

@@ -1,11 +1,11 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledTabsProps {
+interface StyledTabsProperties {
     theme?: GenesisTheme;
     state: "active" | "hovered" | "focussed" | "disabled";
     type: "card";
 }
 export declare const getGenesisClass: ({ colors, borderRadius, sizing }: GenesisTheme, type?: string, state?: string) => string;
-export declare const Tabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('antd').TabsProps, StyledTabsProps>> & string & Omit<import('react').FC<import('antd').TabsProps> & {
+export declare const Tabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('antd').TabsProps, StyledTabsProperties>> & string & Omit<import('react').FC<import('antd').TabsProps> & {
     TabPane: import('react').FC<import('antd').TabPaneProps>;
 }, keyof import('react').Component<any, {}, any>>;
 export {};

package/dist/components/Tile/styles.d.ts

@@ -1,10 +1,10 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledTileProps {
+interface StyledTileProperties {
     theme?: GenesisTheme;
     $isHorizontal?: boolean;
 }
 export declare const getGenesisClass: ({ sizing }: {
     sizing: any;
 }, $isHorizontal?: boolean) => string;
-export declare const Tile: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTileProps>> & string;
+export declare const Tile: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTileProperties>> & string;
 export {};

package/dist/components/Toast/Toast.cjs

@@ -13,33 +13,43 @@ var CloseCircleOutlined = require("../../node_modules/@ant-design/icons/es/icons
 var ExclamationCircleOutlined = require("../../node_modules/@ant-design/icons/es/icons/ExclamationCircleOutlined.cjs");
 const getIconColor = (state, theme) => {
   switch (state) {
-    case index.STATE.error:
+    case index.STATE.error: {
       return theme.colors.status.error.onsurface;
-    case index.STATE.success:
+    }
+    case index.STATE.success: {
       return theme.colors.status.success.onsurface;
-    case index.STATE.warning:
+    }
+    case index.STATE.warning: {
       return theme.colors.status.warning.onsurface;
-    case index.STATE.generic:
+    }
+    case index.STATE.generic: {
       return theme.colors.status.generic.onsurface;
+    }
     case index.STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const iconFontSize = 22;
 const getIcon = (state, color) => {
   switch (state) {
-    case index.STATE.warning:
+    case index.STATE.warning: {
       return /* @__PURE__ */ jsxRuntime.jsx(ExclamationCircleOutlined, { style: { color, fontSize: iconFontSize } });
-    case index.STATE.error:
+    }
+    case index.STATE.error: {
       return /* @__PURE__ */ jsxRuntime.jsx(CloseCircleOutlined, { style: { color, fontSize: iconFontSize } });
-    case index.STATE.success:
+    }
+    case index.STATE.success: {
       return /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlined, { style: { color, fontSize: iconFontSize } });
-    case index.STATE.generic:
+    }
+    case index.STATE.generic: {
       return /* @__PURE__ */ jsxRuntime.jsx(MinusCircleOutlined, { style: { color, fontSize: iconFontSize } });
+    }
     case index.STATE.info:
-    default:
+    default: {
       return /* @__PURE__ */ jsxRuntime.jsx(InfoCircleOutlined, { style: { color, fontSize: iconFontSize } });
+    }
   }
 };
 const Toast = ({

package/dist/components/Toast/Toast.js

@@ -12,33 +12,43 @@ import RefIcon$4 from "../../node_modules/@ant-design/icons/es/icons/CloseCircle
 import RefIcon$5 from "../../node_modules/@ant-design/icons/es/icons/ExclamationCircleOutlined.js";
 const getIconColor = (state, theme) => {
   switch (state) {
-    case STATE.error:
+    case STATE.error: {
       return theme.colors.status.error.onsurface;
-    case STATE.success:
+    }
+    case STATE.success: {
       return theme.colors.status.success.onsurface;
-    case STATE.warning:
+    }
+    case STATE.warning: {
       return theme.colors.status.warning.onsurface;
-    case STATE.generic:
+    }
+    case STATE.generic: {
       return theme.colors.status.generic.onsurface;
+    }
     case STATE.info:
-    default:
+    default: {
       return theme.colors.status.info.onsurface;
+    }
   }
 };
 const iconFontSize = 22;
 const getIcon = (state, color) => {
   switch (state) {
-    case STATE.warning:
+    case STATE.warning: {
       return /* @__PURE__ */ jsx(RefIcon$5, { style: { color, fontSize: iconFontSize } });
-    case STATE.error:
+    }
+    case STATE.error: {
       return /* @__PURE__ */ jsx(RefIcon$4, { style: { color, fontSize: iconFontSize } });
-    case STATE.success:
+    }
+    case STATE.success: {
       return /* @__PURE__ */ jsx(RefIcon$3, { style: { color, fontSize: iconFontSize } });
-    case STATE.generic:
+    }
+    case STATE.generic: {
       return /* @__PURE__ */ jsx(RefIcon$2, { style: { color, fontSize: iconFontSize } });
+    }
     case STATE.info:
-    default:
+    default: {
       return /* @__PURE__ */ jsx(RefIcon$1, { style: { color, fontSize: iconFontSize } });
+    }
   }
 };
 const Toast = ({

package/dist/components/Tooltip/Tooltip.cjs

@@ -9,14 +9,14 @@ const Tooltip = ({ tip = "", children }) => {
     {
       "data-testid": "Tooltip",
       placement: "top",
-      color: "white",
-      title: /* @__PURE__ */ jsxRuntime.jsx(
+      title: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
         Typography,
         {
-          variant: index.TYPOGRAPHY_VARIANT.body1,
+          variant: index.TYPOGRAPHY_VARIANT.body2,
+          color: "white",
           children: tip
         }
-      ),
+      ) }),
       children
     }
   );