@stella-source/stellasource-dsl 0.1.6 → 0.2.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React$1, { HTMLAttributes, ReactElement } from 'react';
 import { TooltipProps as TooltipProps$1 } from 'antd';
+import { ColumnDef, ColumnFiltersState, Row } from '@tanstack/react-table';
 
 interface LabelProps {
     id: string;
@@ -47,10 +48,11 @@ interface StellaButtonProps {
     disabled?: boolean;
     preventDefault?: boolean;
     variant?: `${StellaButtonVariant}`;
+    ref?: React.Ref<HTMLButtonElement>;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }
 
-declare const StellaButton: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, preventDefault, type, }: StellaButtonProps) => React$1.JSX.Element;
+declare const StellaButton: React$1.ForwardRefExoticComponent<Omit<StellaButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface LoaderProps {
     size?: number;
@@ -94,7 +96,7 @@ interface TooltipProps {
 
 declare const Tooltip: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: TooltipProps) => React$1.JSX.Element;
 
-type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash";
+type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash" | "sync" | "chevron-left";
 interface StellaIconProps {
     iconName: StellaIconDefinition;
     size?: number;
@@ -110,16 +112,19 @@ interface IconButtonProps {
     iconName: `${StellaIconDefinition}`;
     ariaLabel: string;
     size?: number;
-    onClick: () => void;
+    onClick: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     id?: string;
     className?: string;
     isLoading?: boolean;
     disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+    preventDefault?: boolean;
+    dataTestId?: string;
     variant?: `${StellaButtonVariant}`;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }
 
-declare const IconButton: ({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: IconButtonProps) => React$1.JSX.Element;
+declare const IconButton: React$1.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare enum TextFieldAlignments {
     LEFT = "left",
@@ -231,6 +236,107 @@ interface NumberInputProps {
 
 declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, allowNegativeNumbers, ariaDescribedBy, }: NumberInputProps) => React$1.JSX.Element;
 
+declare enum TableVariant {
+    PRIMARY = "Primary",
+    SECONDARY = "Secondary"
+}
+interface PaginationDetails {
+    startingPage: number;
+    totalRows: number;
+    rowsPerPage?: number;
+}
+interface TableProps<T> {
+    columns: ColumnDef<T, any>[];
+    data: T[];
+    isLoading?: boolean;
+    serverSide?: boolean;
+    onPageChange?: (page: number, pageSize: number) => void;
+    onSortChange?: (sort: {
+        id: string;
+        desc: boolean;
+    }[]) => void;
+    onFilterChange?: (filters: ColumnFiltersState) => void;
+    onRowSelect?: (rows: T[]) => void;
+    showSelection?: boolean;
+    showRowOptions?: boolean;
+    showPagination?: boolean;
+    variant?: `${TableVariant}`;
+    selectionMenuItems?: {
+        label: string;
+        onClick: (row: Row<T>) => void;
+        conditional?: () => boolean;
+    }[];
+    dataTestId?: string;
+    dataAuto?: string;
+    id?: string;
+    className?: string;
+    htmlProps?: HTMLAttributes<HTMLTableElement>;
+    paginationDetails?: PaginationDetails;
+    rowStatuses?: Record<number | string, RowStatus>;
+}
+type RowStatus = "action-pending" | "completed";
+
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, }: TableProps<T>): React$1.JSX.Element;
+
+interface PaginationProps {
+    id?: string;
+    className?: string;
+    htmlProps?: HTMLAttributes<HTMLElement>;
+    isLoading?: boolean;
+    rowsPerPage?: number;
+    ariaLabel?: string;
+    totalRows: number;
+    onPageChange?: (page: number, pageSize: number) => void;
+    startingPage?: number;
+}
+
+declare const Pagination: ({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: PaginationProps) => React$1.JSX.Element;
+
+interface SyncProps {
+    id: string;
+    className?: string;
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>, time?: string) => void;
+    dataTestId?: string;
+    showTime?: boolean;
+    labelPosition?: "right" | "left";
+}
+
+declare const Sync: ({ dataTestId, onClick, className, id, showTime, labelPosition, }: SyncProps) => React$1.JSX.Element;
+
+declare enum QuoteVariants {
+    TOTAL_PRICE = "total-price",
+    TOTAL_WEIGHT = "total-weight"
+}
+declare enum QuoteCategory {
+    ITEM = "/item",
+    HOUR = "/hr",
+    CWT = "CWT",
+    LBS = "lbs",
+    KG = "kg",
+    TON = "ton"
+}
+interface TableUnitsAndTotalsProps {
+    id?: string;
+    className?: string;
+    value: number;
+    subValue?: number;
+    rightCategory?: `${QuoteCategory}`;
+}
+interface TotalPriceProps {
+    variant: QuoteVariants.TOTAL_PRICE;
+    leftCategory?: `${TableUnitsAndTotalsLeftCategory}`;
+}
+interface TotalWeightProps {
+    variant: QuoteVariants.TOTAL_WEIGHT;
+    leftCategory?: never;
+}
+type TableUnitsAndTotals$1 = TableUnitsAndTotalsProps & (TotalPriceProps | TotalWeightProps);
+declare enum TableUnitsAndTotalsLeftCategory {
+    US_CURRENCY = "$"
+}
+
+declare const TableUnitsAndTotals: ({ id, className, value, subValue, variant, leftCategory, rightCategory, }: TableUnitsAndTotals$1) => React$1.JSX.Element;
+
 declare const Styles: {
     color: {
         white: string;
@@ -292,5 +398,5 @@ declare const Styles: {
     };
 };
 
-export { HelperText, IconButton, Label, Loader, NumberInput, PasswordInput, StellaButton, StellaButtonVariant, StellaIcon, Styles, TextInput, Tooltip };
+export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, TextInput, Tooltip };
 export type { StellaIconDefinition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stella-source/stellasource-dsl",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Design System owned and operated by Stella Source.",
   "files": [
     "dist"
@@ -16,11 +16,17 @@
     "test:coverage": "vitest run --coverage",
     "start": "storybook dev -p 6006",
     "build": "storybook build",
-    "package": "rollup -c"
+    "package": "rollup -c",
+    "ngrok": "ngrok http 6006"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "styled-components": "^6.1.11"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -32,7 +38,10 @@
     "@storybook/test": "^8.4.2",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/node": "^24.0.10",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.2.2",
     "@vitest/coverage-v8": "^1.6.0",
     "jsdom": "^24.1.0",
     "postcss": "^8.4.38",
@@ -41,22 +50,18 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.4.2",
+    "styled-components": "^6.1.11",
     "typescript": "^5.4.5",
-    "styled-components": "^6.1.11"
-  },
-  "peerDependencies": {
-    "styled-components": "^6.1.11"
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
     "@storybook/addon-docs": "^8.4.7",
     "@storybook/manager-api": "^8.4.2",
     "@tanstack/react-table": "^8.20.5",
-    "@testing-library/react": "^16.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "antd": "^5.20.0",
     "tslib": "^2.6.3",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.6.0"
+    "vite-plugin-svgr": "^4.2.0"
   }
 }