@shipengine/elements 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "peerDependencies": {
     "@shipengine/alchemy": "5.x.x",
     "@emotion/react": "11.x",
@@ -27,7 +27,7 @@
     "@rjsf/validator-ajv8": "5.16.1",
     "@shipengine/giger": "1.0.1",
     "@shipengine/giger-theme": "1.0.1",
-    "@shipengine/js-api": "0.48.2",
+    "@shipengine/js-api": "0.48.3",
     "@storybook/addons": "6.5.16",
     "@storybook/components": "7.0.0-rc.1",
     "@storybook/core-events": "7.0.0-rc.1",
@@ -45,7 +45,7 @@
     "js-base64": "3.7.3",
     "libphonenumber-js": "1.10.14",
     "lodash": "4.17.21",
-    "react-datepicker": "4.11.0",
+    "react-datepicker": "4.25.0",
     "react-hook-form": "7.40.0",
     "rollup-plugin-copy": "3.4.0",
     "zod": "3.19.1"

package/src/components/code-block/code-block.d.ts

@@ -0,0 +1,6 @@
+type CodeBlockProps = {
+    code: string;
+    convertTojs?: boolean;
+};
+export declare const CodeBlock: ({ code, convertTojs }: CodeBlockProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/components/code-block/index.d.ts

@@ -0,0 +1 @@
+export * from "./code-block";

package/src/components/drawer/drawer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type DrawerProps = {
+    children: React.ReactNode;
+    headerContent?: React.ReactNode;
+    isOpen?: boolean;
+    toggleDrawer: () => void;
+};
+export declare const Drawer: ({ children, headerContent, isOpen, toggleDrawer }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/components/drawer/drawer.styles.d.ts

@@ -0,0 +1,28 @@
+import { Theme } from "@emotion/react";
+export declare const styles: {
+    container: {
+        backgroundColor: "#11003A";
+    };
+    getChildrenStyles: (isOpen?: boolean) => (theme: Theme) => {
+        height: string;
+        overflow: "scroll";
+        paddingLeft: number;
+    };
+    getDrawerStyles: (isOpen?: boolean) => (theme: Theme) => {
+        backgroundColor: "#11003A";
+        bottom: number;
+        height: string;
+        minWidth: string;
+        position: "fixed";
+        transformOrigin: string;
+        transition: "height 0.5s;";
+    };
+    header: (theme: Theme) => {
+        alignItems: "center";
+        color: "#fff";
+        display: "flex";
+        height: number;
+        justifyContent: "space-between";
+        padding: number;
+    };
+};

package/src/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from "./drawer";

package/src/components/field/date-picker/date-picker.d.ts

@@ -1,7 +1,7 @@
-import { ReactDatePickerProps } from "react-datepicker";
+import * as RDP from "react-datepicker";
 import { ControlledField } from "../create-field-controller";
 export type DatePickerProps = {
     onChange?: (date: string | null) => void;
     translator?: (text: string) => string;
-} & Omit<ReactDatePickerProps, "onChange">;
+} & Omit<RDP.ReactDatePickerProps, "onChange">;
 export declare const DatePicker: ControlledField<DatePickerProps>;

package/src/components/grid-controller/grid-controller.d.ts

@@ -1,22 +1,14 @@
 import { ReactNode } from "react";
-import { PageableResult } from "@shipengine/alchemy";
 type ColumnProps<T> = {
-    columnOrder: number;
     headerContent: ReactNode;
     renderCellContent: (data: T) => ReactNode;
 };
-type ColumnsConfig<T extends object> = {
-    [K in keyof T]: ColumnProps<T>;
-};
 type GridProps<T extends object> = {
-    columns: Partial<ColumnsConfig<T>>;
-    currentPageSize: number;
+    columns: ColumnProps<T>[];
     data: T[];
-    onPageSelect: (page: number) => void;
-    onPageSizeSelect: (rowsPerPage: number) => void;
+    footerContent?: ReactNode;
     onRowClick?: (data: T) => void;
-    pagingData: PageableResult;
-    rowCountSelection?: Array<number>;
+    useCheckboxes?: boolean;
 };
-export declare const GridController: <T extends object>({ currentPageSize, columns, data, pagingData, rowCountSelection, onPageSelect, onPageSizeSelect, onRowClick, }: GridProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const GridController: <T extends object>({ columns, data, footerContent, onRowClick, useCheckboxes, }: GridProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/components/grid-controller/grid-controller.styles.d.ts

@@ -1,45 +1,6 @@
 export declare const styles: {
-    footer: {
-        "> *": {
-            borderTop: string;
-        };
-        alignItems: "center";
-        display: "flex";
-        justifyContent: "space-between";
-    };
-    leftFooter: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        display: "flex";
-        margin: number;
-        span: {
-            fontWeight: number;
-        };
-    };
-    rowCount: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        alignItems: "center";
-        display: "flex";
-        marginRight: number;
-        whiteSpace: "pre";
-    };
-    rowCountDropDown: {
-        "> * > *": {
-            justifyContent: "center !important";
-        };
-    };
-    rowsActions: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        "#selected-row": {
-            ":hover": {
-                backgroundColor: "transparent";
-            };
-            borderRadius: string;
-            color: string;
-            padding: number;
-            paddingRight: number;
-        };
-        alignItems: "baseline";
-        display: "flex";
-        span: {
-            alignSelf: "center";
-        };
+    checkboxHeader: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        width: number;
     };
     table: {
         "*": {
@@ -47,15 +8,4 @@ export declare const styles: {
             textOverflow: "clip !important";
         };
     };
-    tableHeader: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        "> :nth-of-type(1)": {
-            width: number;
-        };
-        "> :nth-of-type(2)": {
-            width: number;
-        };
-        "> :nth-of-type(7)": {
-            width: number;
-        };
-    };
 };

package/src/components/index.d.ts

@@ -1,25 +1,29 @@
-export * from "./collapsible-panel";
 export * from "./add-funds-form";
 export * from "./auto-funding-form";
 export * from "./button-group";
 export * from "./carrier-balance";
 export * from "./carrier-icon";
 export * from "./carrier-logo";
+export * from "./code-block";
+export * from "./collapsible-panel";
 export * from "./copy";
 export * from "./cube";
 export * from "./date-range-combo";
 export * from "./date-range-select";
 export * from "./display-term";
+export * from "./drawer";
 export * from "./error-fallback";
-export * from "./field";
 export * from "./field-label";
+export * from "./field";
 export * from "./form-portal";
 export * from "./fund-and-purchase";
+export * from "./grid-controller";
 export * from "./inline-label";
 export * from "./items-breakdown";
 export * from "./link-action";
 export * from "./loader";
 export * from "./manage-funding";
+export * from "./pager";
 export * from "./payment-method-settings";
 export * from "./portal";
 export * from "./powered-by-shipengine";
@@ -27,4 +31,4 @@ export * from "./section";
 export * from "./spacer";
 export * from "./spread";
 export * from "./story-notes";
-export * from "./grid-controller";
+export * from "./tabs";

package/src/components/pager/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./pager";
+export * from "./usePager";

package/src/components/pager/pager.d.ts

@@ -0,0 +1,10 @@
+import { PageableResult } from "@shipengine/alchemy";
+type PagerProps = {
+    currentPageSize: number;
+    onPageSelect: (page: number) => void;
+    onPageSizeSelect: (rowsPerPage: number) => void;
+    pagingData: PageableResult;
+    rowCountSelection?: Array<number>;
+};
+export declare const Pager: ({ currentPageSize, pagingData, rowCountSelection, onPageSelect, onPageSizeSelect, }: PagerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/components/pager/pager.styles.d.ts

@@ -0,0 +1,44 @@
+export declare const styles: {
+    footer: {
+        "> *": {
+            borderTop: string;
+        };
+        alignItems: "center";
+        display: "flex";
+        justifyContent: "space-between";
+    };
+    leftFooter: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        margin: number;
+        span: {
+            fontWeight: number;
+        };
+    };
+    rowCount: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        alignItems: "center";
+        display: "flex";
+        marginRight: number;
+        whiteSpace: "pre";
+    };
+    rowCountDropDown: {
+        "> * > *": {
+            justifyContent: "center !important";
+        };
+    };
+    rowsActions: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        "#selected-row": {
+            ":hover": {
+                backgroundColor: "transparent";
+            };
+            borderRadius: string;
+            color: string;
+            padding: number;
+            paddingRight: number;
+        };
+        alignItems: "baseline";
+        display: "flex";
+        span: {
+            alignSelf: "center";
+        };
+    };
+};

package/src/components/pager/usePager.d.ts

@@ -0,0 +1,10 @@
+export declare const usePager: (initialPageSize?: number) => {
+    page: number;
+    pagerProps: {
+        currentPage: number;
+        currentPageSize: number;
+        onPageSelect: (page: number) => void;
+        onPageSizeSelect: (pageSize: number) => void;
+    };
+    pageSize: number;
+};

package/src/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from "./tabs";

package/src/components/tabs/tabs.d.ts

@@ -0,0 +1,7 @@
+type TabsProps = {
+    onSelectTab: (tab: string) => void;
+    selectedTab: string;
+    tabs: string[];
+};
+export declare const Tabs: ({ tabs, onSelectTab, selectedTab }: TabsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/components/tabs/tabs.styles.d.ts

@@ -0,0 +1,20 @@
+export declare const styles: {
+    container: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        border: string;
+        borderRadius: string;
+        display: "flex";
+        gap: number;
+        padding: number;
+        width: string;
+    };
+    getTabStyles: (selected: boolean) => (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        color: string;
+        cursor: "pointer";
+        fontSize: string;
+        fontWeight: "normal" | "bold";
+        padding: number;
+    };
+};

package/src/components/templates/index.d.ts

@@ -1,9 +1,9 @@
+export * from "../address-preference-context";
 export * from "./account-settings";
 export * from "./add-carrier-form";
 export * from "./address-display";
 export * from "./address-form";
 export * from "./address-parser";
-export * from "../address-preference-context";
 export * from "./address-preference-display";
 export * from "./address-preference-select";
 export * from "./customs-item-form";
@@ -11,9 +11,10 @@ export * from "./label";
 export * from "./list-carriers";
 export * from "./manage-warehouses";
 export * from "./rate-form";
-export * from "./suspend-sales-order";
 export * from "./shipment-form";
 export * from "./shipment";
+export * from "./suspend-sales-order";
 export * from "./suspend-shipment";
-export * from "./warehouse-form";
+export * from "./theme-creator";
 export * from "./wallet-form";
+export * from "./warehouse-form";

package/src/components/templates/theme-creator/color-palette-editor/color-palette-editor.d.ts

@@ -0,0 +1,8 @@
+import { CustomThemeData } from "@shipengine/giger-theme";
+type ColorPaletteEditorProps = {
+    formatKey: (key: string) => string;
+    onUpdatePaletteConfig: (paletteConfig: CustomThemeData["palette"]) => void;
+    paletteConfig: CustomThemeData["palette"];
+};
+export declare const ColorPaletteEditor: ({ paletteConfig, onUpdatePaletteConfig, formatKey, }: ColorPaletteEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/components/templates/theme-creator/color-palette-editor/color-palette-editor.styles.d.ts

@@ -0,0 +1,49 @@
+import { Theme } from "@emotion/react";
+export declare const styles: {
+    category: {
+        alignItems: "center";
+        cursor: "pointer";
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+    colorPicker: (theme: Theme) => {
+        "&::-webkit-color-swatch": {
+            border: string;
+            borderRadius: string;
+            padding: number;
+        };
+        "&::-webkit-color-swatch-wrapper": {
+            padding: number;
+        };
+        alignSelf: "center";
+        appearance: "none";
+        background: string;
+        border: number;
+        cursor: "pointer";
+        height: number;
+        outline: string;
+        width: number;
+    };
+    container: (theme: Theme) => {
+        marginBottom: number;
+    };
+    input: (theme: Theme) => {
+        border: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        padding: number;
+    };
+    inputContainer: (theme: Theme) => {
+        alignItems: "center";
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        padding: string;
+    };
+    wrapper: (theme: Theme) => {
+        display: "flex";
+        gap: number;
+    };
+};

package/src/components/templates/theme-creator/color-palette-editor/index.d.ts

@@ -0,0 +1 @@
+export * from "./color-palette-editor";

package/src/components/templates/theme-creator/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./color-palette-editor";
+export * from "./typography-editor";
+export * from "./theme-creator";

package/src/components/templates/theme-creator/theme-creator.d.ts

@@ -0,0 +1,10 @@
+import { CustomThemeData } from "@shipengine/giger-theme";
+export type ThemeCreatorProps = {
+    onUpdateThemeConfig: (themeConfig: CustomThemeData) => void;
+    presets?: {
+        presetName: string;
+        themeConfig: CustomThemeData;
+    }[];
+    themeConfig: CustomThemeData;
+};
+export declare const ThemeCreator: ({ themeConfig, onUpdateThemeConfig, presets }: ThemeCreatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/components/templates/theme-creator/theme-creator.styles.d.ts

@@ -0,0 +1,71 @@
+import { Theme } from "@emotion/react";
+export declare const styles: {
+    container: (theme: Theme) => {
+        color: string;
+        display: "flex";
+        flexDirection: "column";
+        flexGrow: number;
+        overflow: "hidden";
+        position: "relative";
+    };
+    content: (theme: Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        padding: number;
+    };
+    copy: (theme: Theme) => {
+        backgroundColor: string;
+        borderRadius: string;
+        padding: number;
+    };
+    drawerHeader: (theme: Theme) => {
+        alignItems: "center";
+        display: "flex";
+        gap: number;
+        justifyContent: "end";
+        width: string;
+    };
+    drawerWrapper: {
+        display: "flex";
+        justifyContent: "space-between";
+        position: "relative";
+    };
+    header: {
+        alignItems: "center";
+        display: "flex";
+        justifyContent: "space-between";
+    };
+    popoverWrapper: (theme: Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+    };
+    pre: (theme: Theme) => {
+        backgroundColor: "#FFFFFF66";
+        borderRadius: string;
+        fontSize: string;
+        padding: number;
+    };
+    presetOption: (theme: Theme) => {
+        "&:hover": {
+            backgroundColor: string;
+        };
+        backgroundColor: "transparent";
+        borderRadius: string;
+        fontSize: string;
+        padding: number;
+    };
+    presetsButton: (theme: Theme) => {
+        "&:hover": {
+            backgroundColor: "#d1d4d7";
+        };
+        backgroundColor: string;
+        borderRadius: string;
+        cursor: "pointer";
+        display: "flex";
+        fontSize: string;
+        gap: number;
+        padding: string;
+    };
+};

package/src/components/templates/theme-creator/typography-editor/index.d.ts

@@ -0,0 +1 @@
+export * from "./typography-editor";

package/src/components/templates/theme-creator/typography-editor/typography-editor.d.ts

@@ -0,0 +1,8 @@
+import { CustomComponentsVariables } from "@shipengine/giger-theme";
+type TypographyEditorProps = {
+    formatKey: (key: string) => string;
+    onUpdateTypographyConfig: (typographyConfig: CustomComponentsVariables["Typography"]) => void;
+    typographyConfig: CustomComponentsVariables["Typography"];
+};
+export declare const TypographyEditor: ({ onUpdateTypographyConfig, typographyConfig, formatKey, }: TypographyEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/components/templates/theme-creator/typography-editor/typography-editor.styles.d.ts

@@ -0,0 +1,36 @@
+import { Theme } from "@emotion/react";
+export declare const styles: {
+    input: (theme: Theme) => {
+        border: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        maxWidth: number;
+        padding: number;
+    };
+    keys: {
+        fontSize: string;
+        fontWeight: "bold";
+        marginTop: string;
+    };
+    section: (theme: Theme) => {
+        "& > div:first-child": {
+            flexGrow: number;
+        };
+        "& > div:last-child": {
+            flexShrink: number;
+        };
+        display: "flex";
+        gap: number;
+        justifyContent: "space-between";
+    };
+    sectionContainer: (theme: Theme) => {
+        marginBottom: number;
+    };
+    select: (theme: Theme) => {
+        border: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+    };
+};

package/src/elements/index.d.ts

@@ -2,6 +2,7 @@ export * from "./account-settings";
 export * from "./list-carriers";
 export * from "./manage-warehouses";
 export * from "./purchase-label";
+export * from "./shipengine-workflow";
+export * from "./theme-creator";
 export * from "./view-shipment";
 export * from "./void-label";
-export * from "./shipengine-workflow";

package/src/elements/shipments-grid/index.d.ts

@@ -1 +1 @@
-export * as ShipmentsGrid from "./shipmets-grid";
+export * as ShipmentsGrid from "./shipments-grid";