@evoke-platform/ui-components 1.4.0-testing.9 → 1.5.0-dev.0

package/dist/published/components/custom/Menubar/Menubar.d.ts

@@ -1,9 +1,22 @@
 import React, { ReactNode } from 'react';
 export type MenuBarProps = {
-    showNotifications: boolean;
+    /** The URL of the logo image to display. */
     logo: string;
+    /** Alternative text for the logo image. */
     logoAltText?: string;
+    /** Navigation items to display on the right side of the menu bar. */
     navItems?: ReactNode;
+    /** The name of the environment to display instead of the logo. */
     envName?: string;
+    /** Navigation item to display before the logo. */
+    navBeforeLogo?: ReactNode;
+    /** Indicates whether to show notifications. Currently not supported. */
+    showNotifications?: boolean;
 };
+/**
+ * Renders a customizable menu bar with navigation items, logo, etc.
+ *
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
+ * @returns {JSX.Element} A menu bar component.
+ */
 export default function MenuBar(props: MenuBarProps): React.JSX.Element;

package/dist/published/components/custom/Menubar/Menubar.js

@@ -1,6 +1,12 @@
 import { AppBar, Box, CardMedia, Toolbar, Typography } from '@mui/material';
 import React from 'react';
 import UIThemeProvider, { useResponsive } from '../../../theme';
+/**
+ * Renders a customizable menu bar with navigation items, logo, etc.
+ *
+ * @param {MenuBarProps} props - Configuration props for the MenuBar component.
+ * @returns {JSX.Element} A menu bar component.
+ */
 export default function MenuBar(props) {
     const { isXs: isMobileView } = useResponsive();
     const classes = {
@@ -9,7 +15,7 @@ export default function MenuBar(props) {
             flexGrow: 1,
         },
         logo: {
-            paddingRight: '16px',
+            padding: '0 16px',
             height: '70px',
             maxWidth: isMobileView ? '220px' : null,
             objectFit: 'contain',
@@ -18,7 +24,8 @@ export default function MenuBar(props) {
     };
     return (React.createElement(UIThemeProvider, null,
         React.createElement(AppBar, { color: "inherit", position: "fixed", elevation: 0, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, borderBottom: '1px solid #919EAB3D' } },
-            React.createElement(Toolbar, { sx: { justifyContent: 'space-between' } },
+            React.createElement(Toolbar, { disableGutters: true, sx: { justifyContent: 'space-between', overflow: 'hidden', paddingRight: '14px' } },
+                props.navBeforeLogo && (React.createElement(Box, { sx: { height: '70px', borderRight: '1px solid #919EAB3D' } }, props.navBeforeLogo)),
                 React.createElement(Box, { sx: classes.title }, !props.envName ? (React.createElement(CardMedia, { component: 'img', src: props.logo, alt: props.logoAltText, sx: classes.logo })) : (React.createElement(Box, { mt: 2 },
                     React.createElement(Typography, { variant: "h5" },
                         props?.envName,

package/dist/published/components/custom/Menubar/Menubar.test.js

@@ -11,3 +11,8 @@ it('render Menubar component without crashing', () => {
     render(React.createElement(Menubar, { showNotifications: true, navItems: navItems, logo: "" }));
     expect(screen.getAllByRole('link')).toHaveLength(3);
 });
+it('renders navBeforeLogo correctly', () => {
+    const navBeforeLogo = React.createElement(Link, { href: "#" }, "Before");
+    render(React.createElement(Menubar, { showNotifications: true, navItems: null, navBeforeLogo: navBeforeLogo, logo: "" }));
+    expect(screen.getAllByRole('link')).toHaveLength(1);
+});

package/dist/published/components/layout/Box/Box.d.ts

@@ -1,8 +1,8 @@
-import { BoxProps } from '@mui/material';
+import { BoxProps as MUIBoxProps } from '@mui/material';
 import React, { ElementType } from 'react';
-type CustomBoxProps = BoxProps & {
+export type BoxProps = MUIBoxProps & {
     sx?: object;
     component?: ElementType;
 };
-declare const Box: (props: CustomBoxProps) => React.JSX.Element;
+declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>;
 export default Box;

package/dist/published/components/layout/Box/Box.js

@@ -1,8 +1,8 @@
 import { Box as MUIBox } from '@mui/material';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import UIThemeProvider from '../../../theme';
-const Box = (props) => {
+const Box = forwardRef((props, ref) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIBox, { ...props })));
-};
+        React.createElement(MUIBox, { ref: ref, ...props })));
+});
 export default Box;

package/dist/published/icons/custom/NoNavigation.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+import React from 'react';
+export declare const NoNavigation: (props: SvgIconProps) => React.JSX.Element;

package/dist/published/icons/custom/NoNavigation.js

@@ -0,0 +1,10 @@
+import { SvgIcon } from '@mui/material';
+import React from 'react';
+export const NoNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
+        verticalAlign: 'top',
+        maxWidth: props.width ?? '24',
+        maxHeight: props.height ?? '24',
+        ...(props.sx ?? {}),
+    } },
+    React.createElement("g", { id: "icon/no_navigation" },
+        React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', strokeWidth: "1.5", fill: "transparent" }))));

package/dist/published/icons/custom/SideNavigation.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+import React from 'react';
+export declare const SideNavigation: (props: SvgIconProps) => React.JSX.Element;

package/dist/published/icons/custom/SideNavigation.js

@@ -0,0 +1,11 @@
+import { SvgIcon } from '@mui/material';
+import React from 'react';
+export const SideNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
+        verticalAlign: 'top',
+        maxWidth: props.width ?? '24',
+        maxHeight: props.height ?? '24',
+        ...(props.sx ?? {}),
+    } },
+    React.createElement("g", { id: "icon/side_navigation" },
+        React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', strokeWidth: "1.5", fill: "transparent" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H11V4H4ZM4.5 6C4.22386 6 4 6.22386 4 6.5C4 6.77614 4.22386 7 4.5 7H8.5C8.77614 7 9 6.77614 9 6.5C9 6.22386 8.77614 6 8.5 6H4.5ZM4 8.5C4 8.22386 4.22386 8 4.5 8H7.5C7.77614 8 8 8.22386 8 8.5C8 8.77614 7.77614 9 7.5 9H4.5C4.22386 9 4 8.77614 4 8.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H8.5C8.77614 11 9 10.7761 9 10.5C9 10.2239 8.77614 10 8.5 10H4.5ZM4 14.5C4 14.2239 4.22386 14 4.5 14H8.5C8.77614 14 9 14.2239 9 14.5C9 14.7761 8.77614 15 8.5 15H4.5C4.22386 15 4 14.7761 4 14.5ZM4.5 12C4.22386 12 4 12.2239 4 12.5C4 12.7761 4.22386 13 4.5 13H7.5C7.77614 13 8 12.7761 8 12.5C8 12.2239 7.77614 12 7.5 12H4.5Z", fill: props?.htmlColor ?? '#212B36' }))));

package/dist/published/icons/custom/TopNavigation.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+import React from 'react';
+export declare const TopNavigation: (props: SvgIconProps) => React.JSX.Element;

package/dist/published/icons/custom/TopNavigation.js

@@ -0,0 +1,11 @@
+import { SvgIcon } from '@mui/material';
+import React from 'react';
+export const TopNavigation = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 24 24', sx: {
+        verticalAlign: 'top',
+        maxWidth: props.width ?? '24',
+        maxHeight: props.height ?? '24',
+        ...(props.sx ?? {}),
+    } },
+    React.createElement("g", { id: "icon/top_navigation" },
+        React.createElement("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "1.25", stroke: props?.htmlColor ?? '#212B36', "stroke-width": "1.5", "stroke-linejoin": "round", fill: "transparent" }),
+        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22 5.66667C22 4.74619 21.2538 4 20.3333 4H3.66667C2.74619 4 2 4.74619 2 5.66667V9L22 9V5.66667ZM4.5 6C4.22386 6 4 6.22386 4 6.5C4 6.77614 4.22386 7 4.5 7H7.5C7.77614 7 8 6.77614 8 6.5C8 6.22386 7.77614 6 7.5 6H4.5ZM9 6.5C9 6.22386 9.22386 6 9.5 6H11.5C11.7761 6 12 6.22386 12 6.5C12 6.77614 11.7761 7 11.5 7H9.5C9.22386 7 9 6.77614 9 6.5ZM13.5 6C13.2239 6 13 6.22386 13 6.5C13 6.77614 13.2239 7 13.5 7H16.5C16.7761 7 17 6.77614 17 6.5C17 6.22386 16.7761 6 16.5 6H13.5Z", fill: props?.htmlColor ?? '#212B36' }))));

package/dist/published/icons/custom/index.d.ts

@@ -1,5 +1,8 @@
 export * from './FileWithExtension';
 export * from './Inherited';
+export * from './NoNavigation';
 export * from './Overrides';
+export * from './SideNavigation';
+export * from './TopNavigation';
 export * from './TrashCan';
 export * from './UploadCloud';

package/dist/published/icons/custom/index.js

@@ -1,5 +1,8 @@
 export * from './FileWithExtension';
 export * from './Inherited';
+export * from './NoNavigation';
 export * from './Overrides';
+export * from './SideNavigation';
+export * from './TopNavigation';
 export * from './TrashCan';
 export * from './UploadCloud';

package/dist/published/index.d.ts

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/dist/published/index.js

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/dist/published/stories/Box.stories.d.ts

@@ -1,15 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-declare const _default: ComponentMeta<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
-    sx?: object | undefined;
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}) => React.JSX.Element>;
+import { BoxProps } from '../components/layout/Box/Box';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>>;
 export default _default;
-export declare const Box: ComponentStory<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
-    sx?: object | undefined;
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}) => React.JSX.Element>;
+export declare const Box: ComponentStory<React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<unknown>>>;

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -95,6 +95,12 @@ const defaultProperties = [
         type: 'integer',
         required: false,
     },
+    {
+        id: 'canApply',
+        name: 'Can Apply',
+        type: 'boolean',
+        required: true,
+    },
 ];
 const CriteriaBuilderTemplate = (args) => {
     const [criteria, setCriteria] = React.useState(args.criteria);

package/dist/published/stories/Form.stories.js

@@ -24,6 +24,11 @@ const object = {
             name: 'Integer',
             type: 'integer',
         },
+        {
+            id: 'boolean',
+            name: 'Boolean',
+            type: 'boolean',
+        },
     ],
     actions: [
         {
@@ -55,7 +60,7 @@ FormWithButtons.args = {
     actionId: '_update',
     actionType: 'update',
     object: object,
-    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5 },
+    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5, boolean: true },
 };
 const FormWithNoButtonsTemplate = (args) => {
     return (React.createElement("div", null,
@@ -76,7 +81,7 @@ FormWithNoButtons.args = {
     actionId: '_update',
     actionType: 'update',
     object: object,
-    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5 },
+    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5, boolean: true },
     hideButtons: true,
     formRef: { current: {} },
 };

package/dist/published/stories/FormField.stories.js

@@ -132,6 +132,8 @@ BooleanField.args = {
     required: true,
     readOnly: false,
     size: 'small',
+    displayOption: 'checkbox',
+    label: "<a href='#'>Label</a>",
 };
 export const FileUploadField = FormFieldTemplate.bind({});
 FileUploadField.args = {

package/dist/published/stories/MenuBar.stories.js

@@ -1,25 +1,20 @@
-import { Link } from '@mui/material';
 import React from 'react';
 import { MenuBar as CustomMenuBar } from '../index';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const logo = require('../assets/SA_logo.jpeg');
 export default {
-    title: 'Data Display/MenuBar',
+    title: 'Custom/MenuBar',
     component: CustomMenuBar,
-    argTypes: {
-        navItems: {
-            control: 'object',
-            defaultValue: React.createElement(Link, null, "Object"),
-        },
-        showNotifications: {
-            defaultValue: true,
-            type: 'boolean',
-        },
-        logo: {
-            defaultValue: logo,
-        },
-        envName: { defaultValue: 'System Automation' },
-    },
 };
-const Template = (props) => React.createElement(CustomMenuBar, { ...props });
-export const MenuBar = Template.bind({});
+const MenuBarTemplate = (args) => React.createElement(CustomMenuBar, { ...args });
+export const MenuBar = MenuBarTemplate.bind({});
+MenuBar.args = {
+    logo: logo,
+    logoAltText: 'System Automation',
+    navItems: (React.createElement(React.Fragment, null,
+        React.createElement("a", { href: "#" }, "Object1"),
+        React.createElement("a", { href: "#" }, "Object2"),
+        React.createElement("a", { href: "#" }, "Object3"))),
+    envName: 'System Automation',
+    showNotifications: true,
+};

package/dist/published/stories/Palette.stories.d.ts

@@ -1,15 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-declare const _default: ComponentMeta<(props: import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme>> & {
-    sx?: object | undefined;
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}) => React.JSX.Element>;
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<import("../components/layout/Box/Box").BoxProps, "ref"> & React.RefAttributes<unknown>>>;
 export default _default;
-export declare const Palette: ComponentStory<(props: import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme>> & {
-    sx?: object | undefined;
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-}) => React.JSX.Element>;
+export declare const Palette: ComponentStory<React.ForwardRefExoticComponent<Omit<import("../components/layout/Box/Box").BoxProps, "ref"> & React.RefAttributes<unknown>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.4.0-testing.9",
+    "version": "1.5.0-dev.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -31,7 +31,8 @@
         "eslint": "eslint src",
         "eslint:fix": "npm run eslint -- --fix",
         "release": "commit-and-tag-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-        "prepare": "husky install"
+        "prepare": "husky install",
+        "yalc:publish": "npm run build && yalc push --replace --sig"
     },
     "author": "",
     "license": "MIT",
@@ -81,9 +82,11 @@
         "rimraf": "^3.0.2",
         "typescript": "^4.7.3",
         "vitest": "^1.5.3",
-        "webpack": "^5.74.0"
+        "webpack": "^5.74.0",
+        "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
+        "@evoke-platform/context": "^1.2.0-0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -94,7 +97,6 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.1.0-testing.4",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",
@@ -103,6 +105,7 @@
         "@mui/material": "^5.16.7",
         "@mui/x-data-grid": "^6.4.0",
         "@mui/x-date-pickers": "^5.0.13",
+        "@mui/x-tree-view": "^7.29.1",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^6.5.0",
         "clean-deep": "^3.4.0",