@shipengine/elements 1.1.2 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "peerDependencies": {
     "@shipengine/alchemy": "5.x.x",
     "@emotion/react": "11.x",
@@ -45,7 +45,8 @@
     "js-base64": "3.7.3",
     "libphonenumber-js": "1.10.14",
     "lodash": "4.17.21",
-    "react-datepicker": "4.11.0",
+    "prism-react-renderer": "2.3.1",
+    "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/index.d.ts

@@ -1,20 +1,23 @@
-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";
@@ -28,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/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/theme-creator/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./theme-creator-provider";
+export * as ThemeCreator from "./theme-creator";

package/src/elements/theme-creator/theme-creator-provider.d.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from "react";
+import { CustomThemeData } from "@shipengine/giger-theme";
+export type ThemeCreatorContextValue = {
+    setThemeConfig: Dispatch<SetStateAction<CustomThemeData>>;
+    themeConfig: CustomThemeData;
+};
+export type ThemeCreatorProviderProps = {
+    children: React.ReactNode;
+    editableTheme: CustomThemeData;
+};
+export declare const ThemeCreatorProvider: ({ children, editableTheme, }: ThemeCreatorProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const useThemeCreator: () => ThemeCreatorContextValue;