@shipengine/elements 0.39.0 → 1.1.0

package/package.json

@@ -1,31 +1,33 @@
 {
   "name": "@shipengine/elements",
-  "version": "0.39.0",
+  "version": "1.1.0",
   "peerDependencies": {
-    "@shipengine/giger": "0.x.x",
-    "react-i18next": "*",
-    "i18next": "*"
+    "@shipengine/alchemy": "5.x.x",
+    "@emotion/react": "11.x",
+    "react-i18next": "11.x",
+    "i18next": "22.x",
+    "react": "17.x || 18.x",
+    "react-dom": "17.x || 18.x"
   },
   "msw": {
     "workerDirectory": "public"
   },
-  "publishConfig": {
-    "access": "restricted"
-  },
   "module": "./index.js",
   "main": "./index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",
   "dependencies": {
     "@emotion/css": "11.10.5",
-    "@emotion/react": "11.10.0",
     "@emotion/serialize": "1.1.1",
     "@faker-js/faker": "7.6.0",
     "@hookform/resolvers": "2.9.1",
     "@jest/globals": "28.1.3",
-    "@shipengine/alchemy": "4.2.2",
-    "@shipengine/giger-theme": "0.4.0",
-    "@shipengine/js-api": "0.39.0",
+    "@rjsf/core": "5.16.1",
+    "@rjsf/utils": "5.16.1",
+    "@rjsf/validator-ajv8": "5.16.1",
+    "@shipengine/giger": "1.0.1",
+    "@shipengine/giger-theme": "1.0.1",
+    "@shipengine/js-api": "0.48.2",
     "@storybook/addons": "6.5.16",
     "@storybook/components": "7.0.0-rc.1",
     "@storybook/core-events": "7.0.0-rc.1",
@@ -43,10 +45,9 @@
     "js-base64": "3.7.3",
     "libphonenumber-js": "1.10.14",
     "lodash": "4.17.21",
-    "react": "18.2.0",
     "react-datepicker": "4.11.0",
-    "react-dom": "18.2.0",
     "react-hook-form": "7.40.0",
+    "rollup-plugin-copy": "3.4.0",
     "zod": "3.19.1"
   }
 }

package/src/components/carrier-icon/carrier-icon.d.ts

@@ -0,0 +1,13 @@
+declare const iconSize: {
+    small: string;
+    medium: string;
+    regular: string;
+    large: string;
+    extra_large: string;
+};
+export type CarrierIconProps = {
+    carrierCode: string;
+    size?: keyof typeof iconSize;
+};
+export declare const CarrierIcon: ({ carrierCode, size }: CarrierIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/components/carrier-icon/index.d.ts

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

package/src/components/carrier-logo/carrier-logo.d.ts

@@ -0,0 +1,11 @@
+declare const sizes: {
+    md: number;
+    lg: number;
+    xl: number;
+};
+export type CarrierLogoProps = {
+    carrierCode: string;
+    size?: keyof typeof sizes;
+};
+export declare const CarrierLogo: ({ carrierCode, size }: CarrierLogoProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/src/components/carrier-logo/index.d.ts

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

package/src/components/collapsible-panel/collapsible-panel.styles.d.ts

@@ -9,7 +9,7 @@ export declare const styles: {
         padding: string;
     };
     icon: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        color: "#006fbb";
+        color: string;
     };
     link: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         ":hover": {

package/src/components/display-term/display-term.d.ts

@@ -0,0 +1,5 @@
+import { MetadataRequiredTermWithLinks } from "../../types";
+export type DisplayTermProps = {
+    term: MetadataRequiredTermWithLinks;
+};
+export declare const DisplayTerm: ({ term }: DisplayTermProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/components/display-term/display-term.styles.d.ts

@@ -0,0 +1,23 @@
+export declare const styles: {
+    container: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        padding: string;
+    };
+    link: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        "&:visited": {
+            color: string;
+        };
+    };
+    termLink: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        listStyle: "none";
+    };
+    terms: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+    };
+};

package/src/components/display-term/index.d.ts

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

package/src/components/grid-controller/cell-formatted-date.d.ts

@@ -0,0 +1,4 @@
+export declare const CellFormattedDate: ({ date, short }: {
+    date: string;
+    short?: boolean | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+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;
+    data: T[];
+    onPageSelect: (page: number) => void;
+    onPageSizeSelect: (rowsPerPage: number) => void;
+    onRowClick?: (data: T) => void;
+    pagingData: PageableResult;
+    rowCountSelection?: Array<number>;
+};
+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 {};

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

@@ -0,0 +1,61 @@
+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";
+        };
+    };
+    table: {
+        "*": {
+            overflow: "hidden";
+            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/grid-controller/hooks/use-grid.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { UseQueryResult } from "@tanstack/react-query";
+import { Label, LinkedResource, PageableQuery, PageableResult, Shipment } from "@shipengine/js-api";
+export type Column<T> = {
+    columnOrder: number;
+    headerContent: string;
+    renderCellContent: (data: T) => React.ReactNode;
+};
+type UseGridProps<T extends object, O extends PageableQuery, R extends PageableResult, E> = {
+    columns: {
+        [key in keyof T]?: Column<T>;
+    };
+    dataUNI: "shipments" | "labels";
+    fetchData: (options: O) => UseQueryResult<R, E[]>;
+    initialOptions: O;
+};
+export declare function useGrid<T extends object, O extends PageableQuery, R extends PageableResult & {
+    labels?: Label[];
+    shipments?: Shipment[];
+}, E>({ columns, fetchData, initialOptions, dataUNI }: UseGridProps<T, O, R, E>): {
+    gridProps: {
+        columns: { [key in keyof T]?: Column<T> | undefined; };
+        currentPageSize: number;
+        data: Label[] | Shipment[];
+        error: E[] | null;
+        isError: boolean;
+        isLoading: boolean;
+        onPageSelect: (page: number) => void;
+        onPageSizeSelect: (pageSize: number) => void;
+        pagingData: {
+            links: {
+                first: LinkedResource;
+                last: LinkedResource;
+                next: LinkedResource;
+                prev: LinkedResource;
+            };
+            page: number;
+            pages: number;
+            total: number;
+        };
+    };
+};
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./grid-controller";
+export * from "./cell-formatted-date";

package/src/components/history/history-card-extension/history-card-extension.styles.d.ts

@@ -2,8 +2,8 @@ export declare const styles: {
     chevronTypography: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         color: string;
     };
-    detailsBottomContainer: {
-        backgroundColor: "#f4f6f8";
+    detailsBottomContainer: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        backgroundColor: string;
         padding: string;
     };
     detailsRow: {

package/src/components/index.d.ts

@@ -3,10 +3,13 @@ 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 "./copy";
 export * from "./cube";
 export * from "./date-range-combo";
 export * from "./date-range-select";
+export * from "./display-term";
 export * from "./error-fallback";
 export * from "./field";
 export * from "./field-label";
@@ -24,3 +27,4 @@ export * from "./section";
 export * from "./spacer";
 export * from "./spread";
 export * from "./story-notes";
+export * from "./grid-controller";

package/src/components/label-layout/label-layout.styles.d.ts

@@ -38,13 +38,13 @@ export declare const styles: {
         width: number;
     };
     letterLabel: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        backgroundColor: "#95C2E0";
+        backgroundColor: string;
         height: number;
         margin: number;
     };
     selectedLetter: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         alignItems: "center";
-        backgroundColor: "#EAF6FF";
+        backgroundColor: string;
         border: string;
         borderRadius: string;
         boxShadow: `0 0 0 3px ${string}`;
@@ -59,7 +59,7 @@ export declare const styles: {
     };
     selectedThermal: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         alignItems: "center";
-        backgroundColor: "#EAF6FF";
+        backgroundColor: string;
         border: string;
         borderRadius: string;
         boxShadow: `0 0 0 3px ${string}`;
@@ -70,6 +70,9 @@ export declare const styles: {
         position: "relative";
         width: number;
     };
+    text: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        color: string;
+    };
     thermal: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         ":hover": {
             border: string;
@@ -85,7 +88,7 @@ export declare const styles: {
         width: number;
     };
     thermalIcon: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        backgroundColor: "#95C2E0";
+        backgroundColor: string;
         height: number;
         width: number;
     };
@@ -99,7 +102,7 @@ export declare const styles: {
         width: number;
     };
     thermalLabel: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        backgroundColor: "#95C2E0";
+        backgroundColor: string;
         height: number;
         width: number;
     };

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

@@ -0,0 +1,11 @@
+export declare const styles: {
+    container: {
+        alignItems: "center";
+        display: "flex";
+        flexDirection: "column";
+        height: string;
+        justifyContent: "center";
+        textAlign: "center";
+        width: string;
+    };
+};

package/src/components/powered-by-shipengine/powered-by-shipengine.styles.d.ts

@@ -1,7 +1,7 @@
 export declare const styles: {
-    poweredByShipEngine: {
+    poweredByShipEngine: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         alignItems: "center";
-        color: "#818F9C";
+        color: string;
         display: "flex";
         gap: string;
         justifyContent: "center";

package/src/components/save-status/save-status-styles.d.ts

@@ -1,14 +1,9 @@
-export declare const colors: {
-    green: string;
-    grey: string;
-    red: string;
-};
 export declare const styles: {
-    checkmark: () => {
+    checkmark: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         animation: `${string} forwards`;
         borderRadius: string;
         height: string;
-        stroke: "#fff";
+        stroke: string;
         width: string;
     };
     checkmarkCheck: () => {
@@ -30,14 +25,14 @@ export declare const styles: {
     saving: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         marginLeft: string;
     };
-    savingContainer: () => {
+    savingContainer: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         alignItems: "center";
         color: string;
         display: "flex";
         justifyContent: "flex-start";
     };
     savingFailed: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
-        color: "#EE3B3F";
+        color: string;
         marginLeft: string;
     };
 };

package/src/components/section/section.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 import { WithChildrenCommonProps } from "@shipengine/giger";
 /**
  * @internal
@@ -10,7 +10,7 @@ export type SectionProps = WithChildrenCommonProps<{
     /** Element to render at the right part of the summary */
     rightContent?: JSX.Element;
     /** Title to show */
-    title?: string;
+    title?: ReactNode;
 }>;
 /**
  * @internal

package/src/components/templates/connect-carrier/connect-carrier.d.ts

@@ -0,0 +1 @@
+export declare const ConnectCarrier: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/components/templates/connect-carrier/connect-carrier.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: {};

package/src/components/templates/connect-carrier/index.d.ts

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

package/src/components/templates/connect-carrier-form/connect-carrier-form.d.ts

@@ -0,0 +1,4 @@
+export type ConnectCarrierFormProps = {
+    apiCode: string;
+};
+export declare const ConnectCarrierForm: ({ apiCode }: ConnectCarrierFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/components/templates/connect-carrier-form/connect-carrier-form.styles.d.ts

@@ -0,0 +1,60 @@
+export declare const styles: {
+    body: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        flexGrow: number;
+        fontSize: string;
+        height: string;
+        maxHeight: string;
+        overflow: "auto";
+    };
+    form: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        ".checkbox": {
+            "> input": {
+                marginRight: number;
+            };
+            "> label": {
+                alignItems: "center";
+                display: "flex";
+                marginBottom: number;
+            };
+        };
+        ".control-label": {
+            fontSize: string;
+            fontWeight: number;
+            marginRight: number;
+        };
+        ".custom-description-field": {
+            marginBottom: number;
+        };
+        ".form-group": {
+            display: "flex";
+            flexDirection: "column";
+            marginBottom: number;
+        };
+        ".help-block": {
+            color: string;
+        };
+        ".required": {
+            color: string;
+        };
+        display: "flex";
+        fieldset: {
+            border: number;
+            padding: number;
+        };
+        flexDirection: "column";
+        height: string;
+        legend: {
+            borderBottom: string;
+            display: "block";
+            fontSize: string;
+            fontWeight: number;
+            marginBottom: number;
+            width: string;
+        };
+    };
+    terms: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+    };
+};

package/src/components/templates/connect-carrier-form/index.d.ts

@@ -0,0 +1 @@
+export * from "./connect-carrier-form";

package/src/components/templates/display-carrier-terms/display-carrier-terms.d.ts

@@ -1,6 +1,6 @@
 import { CarrierTerms } from "../../../types";
-interface DisplayCarrierTermsParams {
+interface DisplayCarrierTermsProps {
     carrierTerms: CarrierTerms;
 }
-export declare const DisplayCarrierTerms: (c: DisplayCarrierTermsParams) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DisplayCarrierTerms: (props: DisplayCarrierTermsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/components/templates/display-carrier-terms/display-carrier-terms.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const styles: {
+    link: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        "&:visited": {
+            color: string;
+        };
+        border: string;
+    };
+    links: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        border: string;
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        paddingBottom: number;
+        paddingTop: number;
+    };
+    listItems: {
+        border: string;
+        listStyle: "none";
+    };
+    terms: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+    };
+};

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

@@ -3,15 +3,13 @@ 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 "./carrier-recovery-form";
-export * from "./carrier-terms-form";
+export * from "./address-preference-select";
 export * from "./customs-item-form";
 export * from "./label";
-export * from "./landing-page";
 export * from "./list-carriers";
 export * from "./manage-warehouses";
-export * from "./onboarding";
 export * from "./rate-form";
 export * from "./suspend-sales-order";
 export * from "./shipment-form";
@@ -19,5 +17,3 @@ export * from "./shipment";
 export * from "./suspend-shipment";
 export * from "./warehouse-form";
 export * from "./wallet-form";
-export * from "../address-preference-context";
-export * from "./address-preference-select";

package/src/components/templates/list-carriers/list-carriers.d.ts

@@ -1,8 +1,8 @@
 import { CarrierConnection, CodedError } from "@shipengine/alchemy";
 import { ConnectedCarrierMetadata } from "../../../elements/list-carriers/hooks/use-list-connected-carriers";
 export type ListCarriersFeatures = {
-    carriers?: {
-        enabledCarriers: string[];
+    carriers: {
+        enabledCarriers: ("stamps_com" | "ups_walleted" | "ups" | "dhl_express_walleted" | "dhl_express_worldwide" | "hermes" | "yodel_walleted")[];
     };
 };
 export type ListCarriersProps = {

package/src/components/templates/rate-form/rate-form.d.ts

@@ -5,6 +5,7 @@ export type RateFormProps = {
     disabled?: boolean;
     displayableRateErrors?: string[];
     displayableSaveRateErrors?: string[];
+    displayableShipmentErrors?: string[];
     errors?: SE.CodedError[];
     features?: ConfigureShipmentFeatures;
     isLoading?: boolean;
@@ -14,10 +15,9 @@ export type RateFormProps = {
     onSave?: (rate: Pick<SE.Rate, "carrierId" | "serviceCode">) => Promise<void> | void;
     onSelectRate?: (rateId: string) => void;
     onSubmit?: (rateId: string) => Promise<void> | void;
-    outOfBandDisplayableErrors?: string[];
     preferredRates?: PreferredRatesResponse;
     preferredServiceCodes?: string[];
     rates?: SE.Rate[];
     shipment?: SE.SalesOrderShipment;
 };
-export declare const RateForm: ({ carriers, disabled, displayableRateErrors, displayableSaveRateErrors, errors, features, isLoading, labelErrors, labels, labelsLoading, onSave, onSelectRate, onSubmit, outOfBandDisplayableErrors, preferredRates, preferredServiceCodes, rates, shipment, }: RateFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RateForm: ({ carriers, disabled, displayableRateErrors, displayableSaveRateErrors, errors, features, isLoading, labelErrors, labels, labelsLoading, onSave, onSelectRate, onSubmit, displayableShipmentErrors, preferredRates, preferredServiceCodes, rates, shipment, }: RateFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/components/templates/warehouse-form/warehouse-form.d.ts

@@ -1,11 +1,11 @@
 import { SE } from "@shipengine/alchemy";
 import { WarehousePayload } from "../manage-warehouses";
 export type WarehouseFormProps = {
-    isOnboarding?: boolean;
     onCancel?: () => void;
     onDelete?: () => void;
     onSubmit: (payload: WarehousePayload) => void;
+    shouldForceDefault?: boolean;
     submitButtonTitle: string;
     warehouse?: SE.Warehouse | Pick<SE.Warehouse, "name" | "isDefault" | "originAddress" | "returnAddress">;
 };
-export declare const WarehouseForm: ({ isOnboarding, onCancel, onDelete, onSubmit, submitButtonTitle, warehouse, }: WarehouseFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const WarehouseForm: ({ onCancel, onDelete, onSubmit, submitButtonTitle, warehouse, shouldForceDefault, }: WarehouseFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;