@gobolt/genesis 0.0.10 → 0.0.11

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

@@ -0,0 +1,321 @@
+import "react/jsx-runtime";
+import "../../Avatar/styles.js";
+import r from "../../Badge/Badge.js";
+import "../../Breadcrumb/styles.js";
+import "../../../providers/BreakpointThemeProvider.js";
+import "../../../Typography-DqI7RslA.js";
+import "../../Button/styles.js";
+import "../../Card/styles.js";
+import "../../Checkbox/styles.js";
+import d from "react";
+import "../../ErrorBoundaryFallback/styles.js";
+import "../../Input/styles.js";
+import "../../Layout/Content/styles.js";
+import "../../Message/styles.js";
+import "../../Notification/NotificationBadge/styles.js";
+import "../../Notification/styles.js";
+import "../../../styles-BSD221S5.js";
+import "../../Progress/styles.js";
+import "../../../styles/global-styles.js";
+import "../../Row/styles.js";
+import "../../Row/RowLabelValue/styles.js";
+import "../../Row/RowActions/styles.js";
+import "../../SegmentedControls/styles.js";
+import "../../Select/styles.js";
+import "../../Switch/styles.js";
+import "../../../styles-D9iYILpv.js";
+import "../../Tabs/styles.js";
+import "../../Tile/styles.js";
+import "../../Toast/styles.js";
+import "../../Tooltip/styles.js";
+import "../../Typography/styles.js";
+const a = (e) => e && e.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()), T = [
+  {
+    key: "number",
+    title: "Number",
+    dataIndex: "number"
+  },
+  {
+    key: "timeslot",
+    title: "Timeslot",
+    dataIndex: "timerange"
+  },
+  {
+    key: "status",
+    title: "Status",
+    dataIndex: "status",
+    render: (e) => {
+      const s = {
+        in_progress: "warning",
+        scheduled: "generic",
+        completed: "success"
+      }, t = e === "in_progress" ? "in progress" : e;
+      return d.createElement(r, {
+        label: a(t),
+        state: s[e]
+      });
+    }
+  },
+  {
+    key: "address",
+    title: "Address",
+    render: (e) => {
+      const {
+        address: { nickname: s, address: t }
+      } = e;
+      return s ? `${s} (${t})` : t;
+    }
+  },
+  {
+    title: "Type",
+    dataIndex: "job_subtype",
+    render: (e) => {
+      const s = {
+        delivery: "info",
+        pickup: "success"
+      };
+      return d.createElement(r, {
+        label: a(e),
+        state: s[e]
+      });
+    }
+  }
+], $ = {
+  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 {
+  T as mockColumns,
+  $ as mockDataSource
+};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Table } from '../Table';
+
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const TableStory: Story;

package/dist/components/Table/__tests__/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Table/__tests__/Table.test.js

@@ -0,0 +1,34 @@
+import { jsx as s } from "react/jsx-runtime";
+import { a as l } from "../../../setup-CKu7-AfI.js";
+import p from "../Table.js";
+import { mockDataSource as r, mockColumns as c } from "../__mocks__/table-mocks.js";
+describe("<Table />", () => {
+  let a;
+  beforeEach(() => {
+    a = {
+      columns: c,
+      dataSource: r.appointments,
+      rowKey: "id"
+      // Add rowKey for unique identification
+    };
+  });
+  const n = () => l(/* @__PURE__ */ s(p, { ...a }));
+  it("should have data in the mock source", () => {
+    expect(r.appointments).toBeDefined(), expect(r.appointments.length).toBeGreaterThan(0);
+  }), it("should render table with data", () => {
+    const { container: t } = n(), e = t.querySelector("table");
+    expect(e).toBeInTheDocument();
+    const o = t.querySelectorAll("tbody tr");
+    expect(o.length).toBeGreaterThan(0);
+  }), it("should render table headers correctly", () => {
+    const { getAllByRole: t } = n(), e = t("columnheader");
+    expect(e).toHaveLength(c.length), expect(e[0]).toHaveTextContent("Number"), expect(e[1]).toHaveTextContent("Timeslot"), expect(e[2]).toHaveTextContent("Status"), expect(e[3]).toHaveTextContent("Address");
+  }), it("should render table data correctly", () => {
+    const { getAllByRole: t } = n(), e = t("cell"), o = r.appointments[0];
+    expect(e[0]).toHaveTextContent(o.number), expect(e[1]).toHaveTextContent(o.timerange), expect(e[2]).toHaveTextContent("In progress"), expect(e[3]).toHaveTextContent(o.address.address);
+  }), it("should handle empty data source", () => {
+    a.dataSource = [];
+    const { container: t } = n(), e = t.querySelector(".ant-table-placeholder");
+    expect(e).toBeInTheDocument(), expect(e).toHaveTextContent("No Data");
+  });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './Table';
+export type { TableProps } from './Table';

package/dist/components/Table/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Table.js";
+export {
+  o as default
+};

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

@@ -0,0 +1,8 @@
+import { Table as AntTable } from 'antd';
+
+export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
+    colors: any;
+    borderRadius: any;
+    sizing: any;
+}) => string;
+export declare const Table: typeof AntTable;

package/dist/components/Table/styles.js

@@ -0,0 +1,6 @@
+import "../../styled-components.browser.esm-CZ1XM4o4.js";
+import { T as o, g as r } from "../../styles-D9iYILpv.js";
+export {
+  o as Table,
+  r as getGenesisClass
+};

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

@@ -0,0 +1,10 @@
+export interface TabsProps {
+    onChange: (id: string) => void;
+    selectedId: string;
+    items: {
+        id: string;
+        label: string;
+    }[];
+}
+declare const Tabs: ({ items, onChange, selectedId }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Tabs as c } from "./styles.js";
+const n = ({ items: t, onChange: a, selectedId: e }) => {
+  const s = t.map(
+    ({ id: r, label: m }) => ({
+      key: r,
+      label: m
+    })
+  );
+  return /* @__PURE__ */ o(
+    c,
+    {
+      items: s,
+      activeKey: e,
+      onChange: a,
+      type: "card",
+      state: "active"
+    }
+  );
+};
+export {
+  n as default
+};

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Tabs } from '../Tabs';
+
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+export declare const UnassignedAssigned: Story;

package/dist/components/Tabs/__tests__/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tabs/__tests__/Tabs.test.js

@@ -0,0 +1,37 @@
+import { jsx as n } from "react/jsx-runtime";
+import { f as s, a as b } from "../../../setup-CKu7-AfI.js";
+import l from "../Tabs.js";
+describe("<Tabs />", () => {
+  const o = vi.fn(), a = {
+    selectedId: "tab1",
+    onChange: o,
+    items: [
+      {
+        id: "tab1",
+        label: "Tab 1"
+      },
+      {
+        id: "tab2",
+        label: "Tab 2"
+      }
+    ]
+  }, t = (e = a) => b(/* @__PURE__ */ n(l, { ...e }));
+  beforeEach(() => {
+    vi.clearAllMocks();
+  }), it("renders all tab labels", () => {
+    const { getByText: e } = t();
+    expect(e("Tab 1")).toBeInTheDocument(), expect(e("Tab 2")).toBeInTheDocument();
+  }), it("shows the selected tab content", () => {
+    const { getByText: e } = t();
+    expect(e("Tab 1")).toBeInTheDocument();
+  }), it("calls onChange when clicking a different tab", () => {
+    const { getByText: e } = t();
+    s.click(e("Tab 2")), expect(o).toHaveBeenCalledWith("tab2");
+  }), it("shows the correct active tab based on selectedId", () => {
+    const e = {
+      ...a,
+      selectedId: "tab2"
+    }, { getByText: c } = t(e);
+    expect(c("Tab 2")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+export type { TabsProps } from './Tabs';

package/dist/components/Tabs/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Tabs.js";
+export {
+  o as default
+};

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

@@ -0,0 +1,12 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+
+interface StyledTabsProps {
+    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> & {
+    TabPane: import('react').FC<import('antd').TabPaneProps>;
+}, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Tabs/styles.js

@@ -0,0 +1,102 @@
+import { d as r } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import { T as n } from "../../index-BTGF--50.js";
+const i = ({ colors: t, borderRadius: e, sizing: a }, o = "primary", b = "active") => `
+  &.ant-tabs {
+    background: #F4F4F4;
+
+    .ant-tabs-nav {
+      margin-bottom: 0;
+    }
+    
+    /* Fix for tab navigation list to ensure no gaps */
+    .ant-tabs-nav-list {
+      overflow: hidden;
+      border-radius: 0;
+      display: flex;
+      box-sizing: border-box;
+    }
+    
+    .ant-tabs-tab {
+      background: #EEEEEE;
+      margin: 0; /* Important: no margin between tabs */
+      padding: 8px 16px;
+      border-radius: 0 !important;
+      float: none; /* Prevent default float behavior */
+      position: relative;
+      
+      /* Use single side borders to prevent double borders */
+      border-left: 1px solid ${t.surface.border};
+
+      margin-right: -2px;
+      user-select: none;
+      color: ${t.onsurface.copy};
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 14px;
+      display: flex;
+      
+      &:hover {
+        background: ${t.interactive.utility.hover};
+      }
+
+      border-top: 0px;
+      
+      &:first-child {
+        border-radius: 0 !important;
+        border-left: none;
+      }
+      
+      /* Only apply right border to the last tab */
+      &:last-child, &.ant-tabs-tab-btn:last-child {
+        border-right: 3px solid ${t.surface.border};
+      }
+
+      .ant-tabs-tab-btn {
+        color: #3E3E3E;
+        user-select: none;
+        background: transparent;
+
+        &:hover {
+          background: ${t.interactive.utility.hover};
+        }
+
+        &:focus {
+          background: transparent;
+        }
+
+        &:active {
+          background: transparent;
+        }
+      }
+    
+      &.ant-tabs-tab-active {
+        background: ${t.interactive.utility.active}; 
+        user-select: none;
+        
+        .ant-tabs-tab-btn {
+          color: #222222;
+        }
+
+        &:hover {
+          background: ${t.interactive.utility.hover};
+        }
+
+        &:focus {
+          background: ${t.interactive.utility.active};
+        }
+
+        &:active {
+          background: ${t.interactive.utility.active};
+        }
+      }
+    }
+  }
+`, l = r(n)`
+  ${({ theme: t, type: e, state: a }) => i(t, e, a)}
+`;
+export {
+  l as Tabs,
+  i as getGenesisClass
+};

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface TileProps {
+    children: React.ReactNode;
+    dataTestId?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    isHorizontal?: boolean;
+}
+declare const Tile: ({ children, dataTestId, className, style, isHorizontal, }: TileProps) => import("react/jsx-runtime").JSX.Element;
+export default Tile;

package/dist/components/Tile/Tile.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Tile as s } from "./styles.js";
+const m = ({
+  children: t,
+  dataTestId: e,
+  className: i,
+  style: o,
+  isHorizontal: r = !1
+}) => /* @__PURE__ */ a(
+  s,
+  {
+    className: i,
+    "data-testid": e,
+    style: o,
+    $isHorizontal: r,
+    children: t
+  }
+);
+export {
+  m as default
+};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Tile } from '../Tile';
+
+declare const meta: Meta<typeof Tile>;
+export default meta;
+type Story = StoryObj<typeof Tile>;
+export declare const TileStory: Story;

package/dist/components/Tile/__tests__/Tile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tile/__tests__/Tile.test.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { a as c } from "../../../setup-CKu7-AfI.js";
+import a from "../Tile.js";
+describe("<Tile />", () => {
+  let t;
+  beforeEach(() => {
+    t = {
+      children: "Test Content",
+      dataTestId: "tile-test",
+      className: "custom-tile"
+    };
+  });
+  const s = () => c(/* @__PURE__ */ n(a, { ...t }));
+  it("should render with correct content", () => {
+    const { getByTestId: o } = s(), e = o(t.dataTestId);
+    expect(e).toBeInTheDocument(), expect(e).toHaveTextContent("Test Content");
+  }), it("should apply custom className", () => {
+    const { getByTestId: o } = s(), e = o(t.dataTestId);
+    expect(e).toHaveClass("custom-tile");
+  });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './Tile';
+export type { TileProps } from './Tile';

package/dist/components/Tile/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Tile.js";
+export {
+  o as default
+};