@shipengine/elements 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "peerDependencies": {
     "@shipengine/alchemy": "5.x.x",
     "@emotion/react": "11.x",
@@ -22,9 +22,12 @@
     "@faker-js/faker": "7.6.0",
     "@hookform/resolvers": "2.9.1",
     "@jest/globals": "28.1.3",
+    "@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.41.2",
+    "@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",
@@ -44,6 +47,7 @@
     "lodash": "4.17.21",
     "react-datepicker": "4.11.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/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.styles.d.ts

@@ -5,9 +5,9 @@ export declare const styles: {
         gap: number;
         padding: string;
     };
-    link: {
+    link: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {
         "&:visited": {
-            color: "#006fbb";
+            color: string;
         };
     };
     termLink: (theme: import("@shipengine/giger-theme/dist/lib/Theme").Theme) => {

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,6 +3,7 @@ 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";
@@ -26,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/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.styles.d.ts

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

package/src/elements/account-settings/account-settings.d.ts

@@ -455,17 +455,11 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     cancel: string;
                     close: string;
                     confirm: string;
+                    connect: string;
                     continue: string;
                     delete: string;
                     edit: string;
                     hide: string;
-                    /**
-                     * # Account Settings Component Props
-                     *
-                     * - These are the base props that will be passed into the `<AccountSettings />` component.
-                     *
-                     * @see {@link AccountSettings.Component | This prop types usage in the `<AccountSettings /> component`}
-                     */
                     parse: string;
                     purchase: string;
                     remove: string;
@@ -615,6 +609,11 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                     unknown: string;
                     validation: string;
                 };
+                grid: {
+                    "row-count_one": string;
+                    "row-count_other": string;
+                    rows: string;
+                };
                 insuranceProviders: {
                     carrier: string;
                     none: string;
@@ -723,6 +722,13 @@ export declare const Element: ({ resources, ...props }: ComponentProps & {
                 "QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBNaXNzaW5nIG9yIGludmFsaWQgc2hpcCB0byBTdGF0ZVByb3ZpbmNlQ29kZQ==": string;
                 "QSBzaGlwcGluZyBjYXJyaWVyIGVycm9yIG9jY3VycmVkOiBJbnZhbGlkIHNvbGQgdG8gc3RhdGUgcHJvdmluY2UgY29kZS4gVmFsaWQgbGVuZ3RoIGlzIDAgdG8gNSBhbHBoYW51bWVyaWM=": string;
             };
+            "connect-carrier": {
+                registrationForm: {
+                    title: string;
+                    isLoading: string;
+                    betaWarning: string;
+                };
+            };
             "account-settings": {
                 title: string;
                 sections: {

package/src/elements/configure-shipment/hooks/use-rates-form.d.ts

@@ -27,7 +27,7 @@ export declare const useRatesForm: ({ getPreferredRates, onBeforeRateSaved, onBe
     errors: SE.CodedError[] | undefined;
     isLoading: boolean;
     labelErrors: string[] | undefined;
-    labels: SE.Label[] | undefined;
+    labels: SE.Label[];
     labelsLoading: boolean;
     onSave: ({ carrierId, serviceCode }: Pick<SE.Rate, "carrierId" | "serviceCode">) => Promise<void>;
     onSubmit: (rateId: string) => Promise<void>;