@zesty-io/material 0.11.0 → 0.12.1

package/es/SSOButton/SSOButton.stories.d.ts

@@ -0,0 +1,7 @@
+import { Story, Meta } from "@storybook/react/types-6-0";
+import { SSOButtonProps } from ".";
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Google: Story<SSOButtonProps>;
+export declare const Microsoft: Story<SSOButtonProps>;
+export declare const Github: Story<SSOButtonProps>;

package/es/SSOButton/SSOButton.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SSOButton from ".";
+export default {
+    title: "SSOButton",
+    component: SSOButton,
+    argType: {},
+};
+const Template = (args) => {
+    return _jsx(SSOButton, { ...args });
+};
+export const Google = Template.bind({});
+export const Microsoft = Template.bind({});
+export const Github = Template.bind({});
+Google.args = {
+    service: "google",
+};
+Microsoft.args = {
+    service: "azure",
+};
+Github.args = {
+    service: "github",
+};

package/es/SSOButton/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { ButtonProps, SxProps, Theme } from "@mui/material";
+import { SSOService } from "../utils/useSSO";
+/**
+ * Props for the SSOButton component.
+ */
+export interface SSOButtonProps {
+    /**
+     * Specifies the SSO service to use.
+     */
+    service: SSOService;
+    /**
+     * Optional styling properties.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Optional click handler that returns the selected SSO service.
+     */
+    onClick?: (service: SSOService) => void;
+    /**
+     * Optional properties for underlying MUI Button component.
+     */
+    ButtonProps?: ButtonProps;
+}
+declare const SSOButton: ({ sx, service, onClick, ButtonProps }: SSOButtonProps) => JSX.Element;
+export default SSOButton;

package/es/SSOButton/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@mui/material";
+import { Github, Google, Microsoft } from "../icons";
+const ssoServiceMap = {
+    "google": {
+        name: "Google",
+        icon: _jsx(Google, {}),
+    },
+    "azure": {
+        name: "Microsoft",
+        icon: _jsx(Microsoft, {}),
+    },
+    "github": {
+        name: "Github",
+        icon: _jsx(Github, {}),
+    },
+};
+const SSOButton = ({ sx, service, onClick, ButtonProps }) => {
+    const ssoService = ssoServiceMap[service];
+    return (_jsxs(Button, { size: "large", variant: "outlined", color: "inherit", onClick: () => {
+            if (onClick) {
+                onClick(service);
+            }
+        }, startIcon: ssoService.icon, sx: { justifyContent: "flex-start", ...sx }, ...ButtonProps, children: ["Continue with ", ssoService.name] }, service));
+};
+export default SSOButton;

package/{cjs/FieldTypeSort/FieldTypeSort.stories.d.ts → es/SSOButtonGroup/SSOButtonGroup.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { FieldTypeSortProps } from './';
+import { SSOButtonGroupProps } from '.';
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;
-export declare const Default: Story<FieldTypeSortProps>;
+export declare const Google: Story<SSOButtonGroupProps>;

package/es/SSOButtonGroup/SSOButtonGroup.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SSOButtonGroup from '.';
+import SSOButton from '../SSOButton';
+export default {
+    title: 'SSOButtonGroup',
+    component: SSOButtonGroup,
+    argType: {},
+};
+const Template = (args) => {
+    return (_jsxs(SSOButtonGroup, { ...args, children: [_jsx(SSOButton, { service: 'google' }), _jsx(SSOButton, { service: 'azure' }), _jsx(SSOButton, { service: 'github' })] }));
+};
+export const Google = Template.bind({});
+Google.args = {
+    authServiceUrl: "https://auth.api.dev.zesty.io",
+    onSuccess: () => {
+        console.log('exittoooo');
+    },
+    onError: (error) => {
+        console.log(error);
+    },
+};

package/es/SSOButtonGroup/index.d.ts

@@ -0,0 +1,30 @@
+import { SxProps, Theme } from "@mui/material";
+import { ReactNode } from "react";
+/**
+ * Props for the SSOButtonGroup component.
+ */
+export interface SSOButtonGroupProps {
+    /**
+     * React elements to be rendered within the group.
+     */
+    children: ReactNode;
+    /**
+     * The URL endpoint for the authentication service.
+     */
+    authServiceUrl: string;
+    /**
+     * Callback invoked upon successful authentication.
+     */
+    onSuccess: () => void;
+    /**
+     * Callback invoked when an error occurs during authentication.
+     * @param error - Description or details of the error.
+     */
+    onError: (error: string) => void;
+    /**
+     * Optional styling properties.
+     */
+    sx?: SxProps<Theme>;
+}
+declare const SSOButtonGroup: ({ children, sx, authServiceUrl, onSuccess, onError, }: SSOButtonGroupProps) => JSX.Element;
+export default SSOButtonGroup;

package/es/SSOButtonGroup/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import React, { useEffect } from "react";
+import { useSSO } from "../utils/useSSO";
+const SSOButtonGroup = ({ children, sx, authServiceUrl, onSuccess, onError, }) => {
+    const [initiate, isAuthenticated, ssoError] = useSSO(authServiceUrl);
+    useEffect(() => {
+        if (isAuthenticated && onSuccess) {
+            onSuccess();
+        }
+        else if (ssoError && onError) {
+            onError(ssoError);
+        }
+    }, [isAuthenticated, ssoError]);
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, sx: sx, children: React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    ...child.props,
+                    authServiceUrl,
+                    onSuccess,
+                    onError,
+                    onClick: (service) => {
+                        initiate(service);
+                    },
+                });
+            }
+            return child;
+        }) }));
+};
+export default SSOButtonGroup;

package/es/icons/Github.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgIconProps } from "@mui/material";
+export declare const Github: (props: SvgIconProps) => JSX.Element;

package/es/icons/Github.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export const Github = (props) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.7998 1.00001C8.99838 0.99788 6.28774 1.99327 4.15345 3.80786C2.01917 5.62244 0.600696 8.13766 0.152147 10.9029C-0.296401 13.6682 0.254281 16.5028 1.70554 18.899C3.15681 21.2952 5.41383 23.0964 8.07227 23.9799C8.66262 24.0872 8.8773 23.7229 8.8773 23.4107C8.8773 23.131 8.86754 22.3894 8.86103 21.4054C5.58237 22.1178 4.88956 19.8247 4.88956 19.8247C4.35288 18.4618 3.58037 18.1008 3.58037 18.1008C2.51026 17.3689 3.66169 17.3836 3.66169 17.3836C4.84565 17.4665 5.4669 18.5984 5.4669 18.5984C6.51913 20.4004 8.22677 19.88 8.89844 19.5775C9.00578 18.8163 9.31153 18.2959 9.64655 18.0016C7.02817 17.7039 4.27644 16.6924 4.27644 12.1744C4.25941 11.003 4.69452 9.87012 5.4913 9.01126C5.36933 8.71201 4.96437 7.51504 5.60514 5.88872C5.60514 5.88872 6.5972 5.57322 8.84802 7.09871C9.81019 6.83705 10.8027 6.70363 11.7998 6.70188C12.7969 6.70376 13.7894 6.83718 14.7516 7.09871C17.0024 5.57322 17.9912 5.89035 17.9912 5.89035C18.6352 7.51342 18.2303 8.71201 18.1083 9.01126C18.8645 9.8358 19.3199 10.8864 19.3199 12.1744C19.3199 16.7037 16.5633 17.7007 13.9368 17.9918C14.3596 18.3561 14.7369 19.0766 14.7369 20.1759C14.7369 21.7535 14.7223 23.0236 14.7223 23.4107C14.7223 23.7262 14.9353 24.0937 15.5338 23.9783C18.1917 23.0937 20.4479 21.2917 21.8981 18.895C23.3483 16.4984 23.8979 13.6637 23.4484 10.8988C22.9989 8.13384 21.5797 5.61925 19.4449 3.80544C17.3102 1.99163 14.601 0.997108 11.7998 1.00001Z", fill: "black" }) }));

package/es/icons/Google.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgIconProps } from "@mui/material";
+export declare const Google: (props: SvgIconProps) => JSX.Element;

package/es/icons/Google.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export const Google = (props) => (_jsxs(SvgIcon, { ...props, children: ["(", _jsx("path", { d: "M23.9888 12.2244C23.9888 11.2412 23.9071 10.5236 23.7304 9.77954H12.2393V14.2175H18.9843C18.8484 15.3204 18.114 16.9814 16.4821 18.0975L16.4592 18.246L20.0925 20.9962L20.3442 21.0208C22.656 18.9346 23.9888 15.8652 23.9888 12.2244Z", fill: "#4285F4" }), _jsx("path", { d: "M12.2393 23.9176C15.5438 23.9176 18.3179 22.8545 20.3442 21.0209L16.4821 18.0976C15.4486 18.8018 14.0615 19.2934 12.2393 19.2934C9.00273 19.2934 6.25576 17.2074 5.27654 14.324L5.13301 14.3359L1.35507 17.1927L1.30566 17.3269C3.31829 21.2334 7.45238 23.9176 12.2393 23.9176Z", fill: "#34A853" }), _jsx("path", { d: "M5.27634 14.324C5.01797 13.58 4.86844 12.7826 4.86844 11.9589C4.86844 11.135 5.01797 10.3378 5.26275 9.59366L5.25591 9.43519L1.43062 6.53247L1.30547 6.59064C0.475969 8.21174 0 10.0322 0 11.9589C0 13.8855 0.475969 15.7059 1.30547 17.327L5.27634 14.324Z", fill: "#FBBC05" }), _jsx("path", { d: "M12.2393 4.62403C14.5374 4.62403 16.0877 5.59402 16.9717 6.40461L20.4258 3.10928C18.3044 1.1826 15.5438 0 12.2393 0C7.45238 0 3.31829 2.68406 1.30566 6.59056L5.26295 9.59359C6.25576 6.7102 9.00273 4.62403 12.2393 4.62403Z", fill: "#EB4335" }), ")"] }));

package/es/icons/ImageSync.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgIconProps } from "@mui/material";
+export declare const ImageSync: (props: SvgIconProps) => JSX.Element;

package/es/icons/ImageSync.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export const ImageSync = (props) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M8.5 13.5L5 18H13.03C13.11 19.1 13.47 20.12 14.03 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 3.9 3.9 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V11.18C20.5 11.07 20 11 19.5 11C17.78 11 16.23 11.67 15.07 12.76L14.5 12L11 16.5L8.5 13.5ZM19 20C18.337 20 17.7011 19.7366 17.2322 19.2678C16.7634 18.7989 16.5 18.163 16.5 17.5C16.5 17.1 16.59 16.72 16.76 16.38L15.67 15.29C15.25 15.92 15 16.68 15 17.5C15 19.71 16.79 21.5 19 21.5V23L21.25 20.75L19 18.5V20ZM19 13.5V12L16.75 14.25L19 16.5V15C19.663 15 20.2989 15.2634 20.7678 15.7322C21.2366 16.2011 21.5 16.837 21.5 17.5C21.5 17.9 21.41 18.28 21.24 18.62L22.33 19.71C22.75 19.08 23 18.32 23 17.5C23 15.29 21.21 13.5 19 13.5Z", fill: "currentColor" }) }));

package/es/icons/Microsoft.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SvgIconProps } from "@mui/material";
+export declare const Microsoft: (props: SvgIconProps) => JSX.Element;

package/es/icons/Microsoft.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export const Microsoft = (props) => (_jsxs(SvgIcon, { ...props, children: ["(", _jsx("path", { d: "M11.4062 11.4062H0V0H11.4062V11.4062Z", fill: "#F1511B" }), _jsx("path", { d: "M23.9998 11.4062H12.5938V0H23.9998V11.4062Z", fill: "#80CC28" }), _jsx("path", { d: "M11.4059 24.0002H0V12.594H11.4059V24.0002Z", fill: "#00ADEF" }), _jsx("path", { d: "M23.9998 24.0002H12.5938V12.594H23.9998V24.0002Z", fill: "#FBBC09" }), ")"] }));

package/es/icons/index.d.ts

@@ -10,3 +10,7 @@ export { Brain } from "./Brain";
 export { Home } from "./Home";
 export { ScreenShare } from "./ScreenShare";
 export { DatabaseSearch } from "./DatabaseSearch";
+export { Google } from "./Google";
+export { Github } from "./Github";
+export { Microsoft } from "./Microsoft";
+export { ImageSync } from "./ImageSync";

package/es/icons/index.js

@@ -10,3 +10,7 @@ export { Brain } from "./Brain";
 export { Home } from "./Home";
 export { ScreenShare } from "./ScreenShare";
 export { DatabaseSearch } from "./DatabaseSearch";
+export { Google } from "./Google";
+export { Github } from "./Github";
+export { Microsoft } from "./Microsoft";
+export { ImageSync } from "./ImageSync";

package/es/index.d.ts

@@ -12,5 +12,7 @@ export { default as FieldTypeOneToMany } from "./FieldTypeOneToMany";
 export { default as CopyButton } from "./CopyButton";
 export { default as ConfirmDialog } from "./ConfirmDialog";
 export { default as VirtualizedAutocomplete } from "./VitualizedAutocomplete";
+export { default as SSOButtonGroup } from "./SSOButtonGroup";
+export { default as SSOButton } from "./SSOButton";
 export { IconButton } from "./IconButton";
 export * from "./icons";

package/es/index.js

@@ -12,5 +12,7 @@ export { default as FieldTypeOneToMany } from "./FieldTypeOneToMany";
 export { default as CopyButton } from "./CopyButton";
 export { default as ConfirmDialog } from "./ConfirmDialog";
 export { default as VirtualizedAutocomplete } from "./VitualizedAutocomplete";
+export { default as SSOButtonGroup } from "./SSOButtonGroup";
+export { default as SSOButton } from "./SSOButton";
 export { IconButton } from "./IconButton";
 export * from "./icons";

package/es/theme/index.js

@@ -274,6 +274,8 @@ const components = {
     MuiMenuItem: {
         styleOverrides: {
             root: {
+                // Overrides the media query of the MenuItem that sets minHeight
+                minHeight: "36px !important",
                 " .MuiListItemIcon-root": {
                     minWidth: "32px",
                 },
@@ -324,10 +326,13 @@ const components = {
                 },
             }),
             standardInfo: ({ theme }) => ({
-                backgroundColor: alpha(theme.palette.blue[500], 0.1),
+                backgroundColor: theme.palette.blue[100],
                 " .MuiAlert-icon": {
                     color: theme.palette.info.main,
                 },
+                "& .MuiAlert-message": {
+                    color: theme.palette.info.dark,
+                },
             }),
             standardError: ({ theme }) => ({
                 backgroundColor: alpha(theme.palette.error.main, 0.1),

package/es/utils/useSSO.d.ts

@@ -0,0 +1,2 @@
+export declare type SSOService = "github" | "google" | "azure";
+export declare const useSSO: (authServiceUrl: string) => readonly [(service: SSOService) => void, boolean, string];

package/es/utils/useSSO.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+let tabWindow = null;
+export const useSSO = (authServiceUrl) => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [error, setError] = useState("");
+    const receiveMessage = (event) => {
+        if (event.origin === authServiceUrl &&
+            event.data.source === "zesty") {
+            if (event.data.status === "200") {
+                setIsAuthenticated(true);
+            }
+            else {
+                setError(event.data.error_message);
+            }
+            if (tabWindow) {
+                tabWindow.close();
+            }
+        }
+    };
+    useEffect(() => {
+        window.addEventListener("message", receiveMessage);
+        return () => {
+            window.removeEventListener("message", receiveMessage);
+        };
+    }, []);
+    const initiate = (service) => {
+        if (tabWindow) {
+            tabWindow.close();
+        }
+        tabWindow = window.open(`${authServiceUrl}/${service}/login`);
+    };
+    return [initiate, isAuthenticated, error];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.14.3",
+    "@mui/lab": "^5.0.0-alpha.150",
     "@mui/material": "^5.14.5",
     "@mui/x-date-pickers": "^5.0.0-alpha.5",
     "date-fns": "^2.28.0",
@@ -52,5 +53,8 @@
     "react-json-view": "^1.21.3",
     "typescript": "^4.6.3"
   },
-  "files": ["cjs", "es"]
+  "files": [
+    "cjs",
+    "es"
+  ]
 }

package/cjs/ConfirmDialog/ConfirmDialog.stories.d.ts

@@ -1,6 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { ConfirmDialogProps } from '.';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-export declare const Default: Story<ConfirmDialogProps>;
-export declare const CustomChildren: Story<ConfirmDialogProps>;

package/cjs/ConfirmDialog/ConfirmDialog.stories.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomChildren = exports.Default = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const _1 = require(".");
-exports.default = {
-    title: 'ConfirmDialog',
-    component: _1.default,
-    argType: {},
-};
-const Template = (args) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => setOpen(true), children: "Click me to open" }), (0, jsx_runtime_1.jsx)(_1.default, { ...args, open: open, callback: (confirmed) => setOpen(false) })] }));
-};
-exports.Default = Template.bind({});
-exports.Default.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-};
-exports.CustomChildren = Template.bind({});
-exports.CustomChildren.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-    children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "error", variant: "contained", children: "Custom 1" }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "success", variant: "contained", children: "Custom 2" })] })
-};

package/cjs/ConfirmDialog/index.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-import { DialogProps } from '@mui/material/Dialog';
-export interface ConfirmDialogProps extends Omit<DialogProps, 'title'> {
-    /**
-     * Title of confirm dialog
-     */
-    title: string | ReactNode;
-    /**
-     * Content of confirm dialog
-     */
-    content: string | ReactNode;
-    /**
-     * Callback of confirm dialog
-     */
-    callback: (confirmed: boolean) => void;
-}
-declare const ConfirmDialog: ({ title, content, onClose, children, callback, ...props }: ConfirmDialogProps) => JSX.Element;
-export default ConfirmDialog;

package/cjs/ConfirmDialog/index.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Dialog_1 = require("@mui/material/Dialog");
-const DialogActions_1 = require("@mui/material/DialogActions");
-const DialogContent_1 = require("@mui/material/DialogContent");
-const DialogContentText_1 = require("@mui/material/DialogContentText");
-const DialogTitle_1 = require("@mui/material/DialogTitle");
-const material_1 = require("@mui/material");
-const ConfirmDialog = ({ title, content, onClose, children, callback, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { ...props, children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: title }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: (0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: content }) }), children ? (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: children }) : ((0, jsx_runtime_1.jsxs)(DialogActions_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => callback(false), children: "No" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => callback(true), autoFocus: true, children: "Yes" })] }))] }));
-};
-exports.default = ConfirmDialog;

package/cjs/CopyButton/CopyButton.stories.d.ts

@@ -1,5 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CopyButtonProps } from '.';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-export declare const Default: Story<CopyButtonProps>;

package/cjs/CopyButton/CopyButton.stories.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _1 = require(".");
-exports.default = {
-    title: 'CopyButton',
-    component: _1.default,
-    argType: {},
-};
-const Template = (args) => {
-    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args }));
-};
-exports.Default = Template.bind({});
-exports.Default.args = {
-    value: 'Copy Me!'
-};

package/cjs/CopyButton/index.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '@mui/material/Button';
-export interface CopyButtonProps extends ButtonProps {
-    /**
-    * Value to be copied to clipboard
-    */
-    value: string;
-}
-declare const CopyButton: ({ value, sx, ...props }: CopyButtonProps) => JSX.Element;
-export default CopyButton;

package/cjs/CopyButton/index.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Button_1 = require("@mui/material/Button");
-const ContentCopy_1 = require("@mui/icons-material/ContentCopy");
-const Check_1 = require("@mui/icons-material/Check");
-const CopyButton = ({ value, sx, ...props }) => {
-    const [copied, setCopied] = (0, react_1.useState)(false);
-    const copyValue = (0, react_1.useCallback)(() => {
-        navigator?.clipboard.writeText(value);
-        setCopied(true);
-    }, [value]);
-    (0, react_1.useEffect)(() => {
-        const iconTimer = setTimeout(() => {
-            setCopied(false);
-        }, 500);
-        return () => {
-            clearTimeout(iconTimer);
-        };
-    }, [copied]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: 'outlined', onClick: copyValue, size: "small", title: props.children ? `Copy ${props.children}` : `Copy ${value}`, sx: {
-            textTransform: 'unset',
-            // Spread sx prop at the end to allow sx prop overrides
-            ...sx,
-        }, startIcon: copied ? ((0, jsx_runtime_1.jsx)(Check_1.default, { color: 'success', fontSize: 'small' })) : ((0, jsx_runtime_1.jsx)(ContentCopy_1.default, { fontSize: 'small' })), ...props, children: props.children ? props.children : value }));
-};
-exports.default = CopyButton;

package/cjs/FieldTypeColor/FieldTypeColor.stories.d.ts

@@ -1,5 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { FieldTypeColorProps } from './';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-export declare const Default: Story<FieldTypeColorProps>;

package/cjs/FieldTypeColor/FieldTypeColor.stories.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _1 = require("./");
-exports.default = {
-    title: 'FieldTypeColor',
-    component: _1.default,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = (0, react_1.useState)('');
-    const handleOnChange = (e) => {
-        setValue(e.target.value);
-    };
-    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }));
-};
-exports.Default = Template.bind({});
-exports.Default.args = {
-    placeholder: 'Placeholder Text...',
-    label: 'Color label',
-    helperText: 'Color helper text',
-};

package/cjs/FieldTypeColor/index.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { OutlinedTextFieldProps } from '@mui/material/TextField';
-export interface FieldTypeColorProps extends Omit<OutlinedTextFieldProps, 'variant'> {
-}
-declare const FieldTypeColor: ({ InputProps, label, required, ...props }: FieldTypeColorProps) => JSX.Element;
-export default FieldTypeColor;

package/cjs/FieldTypeColor/index.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TextField_1 = require("@mui/material/TextField");
-const material_1 = require("@mui/material");
-const Brush_1 = require("@mui/icons-material/Brush");
-const FieldTypeColor = ({ InputProps, label, required, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", variant: 'outlined', type: 'color', InputProps: {
-                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", onClick: (e) => {
-                                // References color input via event in order to open color picker
-                                const input = e.currentTarget?.parentElement?.parentElement?.firstElementChild;
-                                input?.click();
-                            }, children: (0, jsx_runtime_1.jsx)(Brush_1.default, { fontSize: 'small' }) }) })),
-                    // Spread props at the end to allow Input prop overrides
-                    ...InputProps,
-                }, ...props })] }));
-};
-exports.default = FieldTypeColor;

package/cjs/FieldTypeDate/FieldTypeDate.stories.d.ts

@@ -1,5 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { FieldTypeDateProps } from '.';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-export declare const Default: Story<FieldTypeDateProps>;

package/cjs/FieldTypeDate/FieldTypeDate.stories.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _1 = require(".");
-exports.default = {
-    title: 'FieldTypeDate',
-    component: _1.default,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: (value) => setValue(value) }));
-};
-exports.Default = Template.bind({});
-exports.Default.args = {
-    label: 'Date label',
-    helperText: 'Date helper text',
-};

package/cjs/FieldTypeDate/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { DesktopDatePickerProps } from '@mui/x-date-pickers';
-export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<Date, Date>, 'renderInput'> {
-    helperText?: string;
-    error?: boolean;
-    required?: boolean;
-}
-declare const FieldTypeDate: ({ label, helperText, error, required, ...props }: FieldTypeDateProps) => JSX.Element;
-export default FieldTypeDate;

package/cjs/FieldTypeDate/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
-const LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
-const x_date_pickers_1 = require("@mui/x-date-pickers");
-const material_1 = require("@mui/material");
-;
-const FieldTypeDate = ({ label, helperText, error, required, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DesktopDatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => (0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
-};
-exports.default = FieldTypeDate;

package/cjs/FieldTypeDateTime/FieldTypeDateTime.stories.d.ts

@@ -1,5 +0,0 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { FieldTypeDateTimeProps } from '.';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-export declare const Default: Story<FieldTypeDateTimeProps>;

package/cjs/FieldTypeDateTime/FieldTypeDateTime.stories.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _1 = require(".");
-exports.default = {
-    title: 'FieldTypeDateTime',
-    component: _1.default,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: (value) => setValue(value) }));
-};
-exports.Default = Template.bind({});
-exports.Default.args = {
-    label: 'Date label',
-    helperText: 'Date helper text',
-};