@vuu-ui/vuu-shell 0.5.13 → 0.5.15

package/package.json

@@ -1,26 +1,22 @@
 {
   "name": "@vuu-ui/vuu-shell",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "VUU UI Shell",
+  "main": "src/index.ts",
   "author": "heswell",
   "license": "Apache-2.0",
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs"
+  },
   "peerDependencies": {
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0",
-    "@vuu-ui/vuu-data": "0.5.13",
-    "@vuu-ui/vuu-layout": "0.5.13",
-    "@vuu-ui/vuu-utils": "0.5.13",
+    "@vuu-ui/vuu-data": "0.5.15",
+    "@vuu-ui/vuu-layout": "0.5.15",
+    "@vuu-ui/vuu-utils": "0.5.15",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "files": [
-    "cjs",
-    "esm",
-    "index.css",
-    "index.css.map"
-  ],
-  "module": "esm/index.js",
-  "main": "cjs/index.js"
-}
+  }
+}

package/src/ShellContextProvider.tsx

@@ -0,0 +1,60 @@
+import { MenuRpcResponse } from "@vuu-ui/vuu-data";
+import { ColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { createContext, ReactElement, ReactNode, useContext } from "react";
+
+export interface ShellContextProps {
+  getDefaultColumnConfig?: (
+    tableName: string,
+    columnName: string
+  ) => Partial<ColumnDescriptor>;
+  handleRpcResponse?: (response: MenuRpcResponse) => void;
+}
+
+const defaultConfig = {};
+
+const ShellContext = createContext<ShellContextProps>(defaultConfig);
+
+export interface ShellProviderProps {
+  children: ReactNode;
+  value: ShellContextProps;
+}
+
+const Provider = ({
+  children,
+  context,
+  inheritedContext,
+}: {
+  children: ReactNode;
+  context?: ShellContextProps;
+  inheritedContext?: ShellContextProps;
+}) => {
+  // TODO functions provided at multiple levels must be merged
+  const mergedContext = {
+    ...inheritedContext,
+    ...context,
+  };
+  return (
+    <ShellContext.Provider value={mergedContext}>
+      {children}
+    </ShellContext.Provider>
+  );
+};
+
+export const ShellContextProvider = ({
+  children,
+  value,
+}: ShellProviderProps): ReactElement => {
+  return (
+    <ShellContext.Consumer>
+      {(context) => (
+        <Provider context={value} inheritedContext={context}>
+          {children}
+        </Provider>
+      )}
+    </ShellContext.Consumer>
+  );
+};
+
+export const useShellContext = () => {
+  return useContext(ShellContext);
+};

package/src/app-header/AppHeader.css

@@ -0,0 +1,6 @@
+.hwAppHeader {
+  justify-content: flex-end;
+  display: flex;
+  height: 40px;
+  border-bottom: solid 1px #ccc;
+}

package/src/app-header/AppHeader.tsx

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from "react";
+import { VuuUser } from "../shell";
+import { UserProfile } from "../user-profile";
+import "./AppHeader.css";
+
+export interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  layoutId: string;
+  loginUrl?: string;
+  onNavigate: (id: string) => void;
+  user: VuuUser;
+}
+
+export const AppHeader = ({
+  layoutId,
+  loginUrl,
+  onNavigate,
+  user,
+  ...htmlAttributes
+}: AppHeaderProps) => {
+  return (
+    <header className="hwAppHeader" {...htmlAttributes}>
+      {/* <ToggleButton onChange={toggleColorScheme}>
+              theme
+            </ToggleButton> */}
+      <UserProfile
+        layoutId={layoutId}
+        loginUrl={loginUrl}
+        onNavigate={onNavigate}
+        user={user}
+      />
+    </header>
+  );
+};

package/src/app-header/index.ts

@@ -0,0 +1 @@
+export * from './AppHeader';

package/src/app-palette/AppPalette.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import cx from "classnames";
+import {
+  ComponentRegistry,
+  isRegistered,
+  Palette,
+  PaletteItem,
+} from "@vuu-ui/vuu-layout";
+
+const getPaletteItems = (config) => {
+  const paletteItems = [];
+
+  config.forEach((configItem) => {
+    const { label, items = [] } = configItem;
+    paletteItems.push(
+      <div key={label} data-header>
+        {label}
+      </div>
+    );
+    items.forEach((paletteItem, i) => {
+      const { component, type, props, ...args } = paletteItem;
+      if (component) {
+        paletteItems.push(
+          <PaletteItem {...args} key={i}>
+            {component}
+          </PaletteItem>
+        );
+      } else if (type && isRegistered(type)) {
+        const Component = ComponentRegistry[type];
+        paletteItems.push(
+          <PaletteItem {...args} key={i}>
+            {React.createElement(Component, {
+              ...props,
+              key: i,
+            })}
+          </PaletteItem>
+        );
+      }
+    });
+  });
+
+  return paletteItems;
+};
+
+export const AppPalette = ({ className, config, ...props }) => {
+  return (
+    <Palette
+      className={cx("TableList", className)}
+      orientation="vertical"
+      collapsibleHeaders
+      {...props}
+    >
+      {getPaletteItems(config)}
+    </Palette>
+  );
+};

package/src/app-palette/index.ts

@@ -0,0 +1 @@
+export * from './AppPalette';

package/src/feature/ErrorBoundary.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+// TODO
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errorMessage: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { errorMessage: error.message };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.log(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.errorMessage) {
+      return (
+        <>
+          <h1>Something went wrong.</h1>
+          <p>{this.state.errorMessage}</p>
+        </>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/feature/Feature.tsx

@@ -0,0 +1,52 @@
+import React, { Suspense } from "react";
+import { registerComponent } from "@vuu-ui/vuu-layout";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { Loader } from "./Loader";
+import { importCSS } from "./css-module-loader";
+
+export interface FeatureProps<Params extends object | undefined = undefined> {
+  height?: number;
+  url: string;
+  css?: string;
+  width?: number;
+  params: Params;
+}
+
+// const RawFeature = <Params extends object | undefined>({
+function RawFeature<Params extends object | undefined>({
+  url,
+  css,
+  params,
+  ...props
+}: FeatureProps<Params>) {
+  if (css) {
+    // import(/* @vite-ignore */ css, { assert: { type: "css" } }).then(
+    //   (cssModule) => {
+    //     document.adoptedStyleSheets = [
+    //       ...document.adoptedStyleSheets,
+    //       cssModule.default,
+    //     ];
+    //   }
+    // );
+    // Polyfill until vite build supports import assertions
+    // Note: already fully supported in esbuild, so vite dev
+    importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet,
+      ];
+    });
+  }
+  const LazyFeature = React.lazy(() => import(/* @vite-ignore */ url));
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<Loader />}>
+        <LazyFeature {...props} {...params} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+export const Feature = React.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");

package/src/feature/Loader.tsx

@@ -0,0 +1,2 @@
+// TODO
+export const Loader = () => <div className="hwLoader">loading</div>;

package/src/feature/css-module-loader.ts

@@ -0,0 +1,6 @@
+export const importCSS = async (path: string) => {
+  const container = new CSSStyleSheet();
+  return fetch(path)
+    .then((x) => x.text())
+    .then((x) => container.replace(x));
+};

package/src/feature/index.ts

@@ -0,0 +1 @@
+export * from './Feature';

package/src/get-layout-history.js

@@ -0,0 +1,12 @@
+export const getLayoutHistory = async (user) => {
+  const history = await fetch(`api/vui/${user.username}`, {})
+    .then((response) => {
+      return response.ok ? response.json() : null;
+    })
+    .catch(() => {
+      // TODO we should set a layout with a warning here
+      console.log(`error getting history`);
+    });
+
+  return history;
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./feature";
+export * from "./login";
+export * from "./shell";
+export * from "./shellTypes";
+export * from "./ShellContextProvider";

package/src/login/LoginPanel.css

@@ -0,0 +1,24 @@
+.vuuLoginPanel {
+  --hwTextInput-border: solid 1px #ccc;
+  --hwTextInput-height: 28px;
+  --hwTextInput-padding: 0 12px;
+  --hwTextInput-width: 100%;
+  --login-row-height: 60px;
+  align-content: center;
+  align-items: center;
+  border: solid 1px lightgray;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  justify-content: center;
+  justify-items: center;
+  margin: 0 auto;
+  padding: 48px 48px 24px 48px;
+  width: fit-content;
+}
+
+.vuuLoginPanel-login {
+  grid-column: 2/3;
+  align-self: end;
+  justify-self: end;
+}

package/src/login/LoginPanel.tsx

@@ -0,0 +1,63 @@
+import { ChangeEvent, HTMLAttributes, useState } from "react";
+import { Button } from "@salt-ds/core";
+import { FormField, Input } from "@heswell/salt-lab";
+
+import "./LoginPanel.css";
+
+const classBase = "vuuLoginPanel";
+
+export interface LoginPanelProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
+  onSubmit: (username: string, password: string) => void;
+}
+
+export const LoginPanel = ({ onSubmit }: LoginPanelProps) => {
+  const [username, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+
+  const login = () => {
+    onSubmit(username, password);
+  };
+
+  const handleUsername = (
+    _event: ChangeEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    setUserName(value);
+  };
+
+  const handlePassword = (
+    _event: ChangeEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    setPassword(value);
+  };
+
+  const dataIsValid = username.trim() !== "" && password.trim() !== "";
+
+  return (
+    <div className={classBase}>
+      <FormField label="Username" style={{ width: 200 }}>
+        <Input value={username} id="text-username" onChange={handleUsername} />
+      </FormField>
+
+      <FormField label="Password" style={{ width: 200 }}>
+        <Input
+          type="password"
+          value={password}
+          id="text-password"
+          onChange={handlePassword}
+        />
+      </FormField>
+
+      <Button
+        className={`${classBase}-login`}
+        disabled={!dataIsValid}
+        onClick={login}
+        variant="cta"
+      >
+        Login
+      </Button>
+    </div>
+  );
+};

package/src/login/index.ts

@@ -0,0 +1,2 @@
+export * from './LoginPanel';
+export * from './login-utils';

package/src/login/login-utils.ts

@@ -0,0 +1,21 @@
+const getCookieValue = (name: string) =>
+  document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(`${name}=`))
+    ?.split("=")[1];
+
+export const getAuthDetailsFromCookies = () => {
+  const username = getCookieValue("vuu-username");
+  const token = getCookieValue("vuu-auth-token");
+  return [username, token];
+};
+
+export const redirectToLogin = (loginUrl = "/login.html") => {
+  window.location.href = loginUrl;
+};
+
+export const logout = (loginUrl?: string) => {
+  document.cookie = "vuu-username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie = "vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
+  redirectToLogin(loginUrl);
+};

package/src/shell.css

@@ -0,0 +1,15 @@
+.vuuShell {
+  background-color: var(--salt-container-primary-background, ivory);
+  height: var(--vuuShell-height, 100vh);
+  width: var(--vuuShell-width, 100vw);
+}
+
+.vuuShell-palette {
+  --vuuView-border: none;
+  --vuuView-margin: 0;
+}
+
+.vuuShell-warningPlaceholder {
+  background-color: var(--salt-container-background-high);
+  height: 100%;
+}

package/src/shell.tsx

@@ -0,0 +1,171 @@
+import { connectToServer } from "@vuu-ui/vuu-data";
+import {
+  HTMLAttributes,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import useLayoutConfig from "./use-layout-config";
+import { ShellContextProvider } from "./ShellContextProvider";
+import cx from "classnames";
+
+import {
+  Chest,
+  DraggableLayout,
+  Drawer,
+  FlexboxLayout as Flexbox,
+  LayoutProvider,
+  View,
+} from "@vuu-ui/vuu-layout";
+
+import { AppHeader } from "./app-header";
+// import { AppPalette } from "./app-palette";
+
+import { LayoutJSON } from "@vuu-ui/vuu-layout/src/layout-reducer";
+import "./shell.css";
+
+export type VuuUser = {
+  username: string;
+  token: string;
+};
+
+const warningLayout = {
+  type: "View",
+  props: {
+    style: { height: "calc(100% - 6px)" },
+  },
+  children: [
+    {
+      props: {
+        className: "vuuShell-warningPlaceholder",
+      },
+      type: "Placeholder",
+    },
+  ],
+};
+
+export interface ShellProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  defaultLayout?: LayoutJSON;
+  leftSidePanel?: ReactElement;
+  loginUrl?: string;
+  // paletteConfig: any;
+  serverUrl?: string;
+  user: VuuUser;
+}
+
+export const Shell = ({
+  children,
+  className,
+  defaultLayout = warningLayout,
+  leftSidePanel,
+  loginUrl,
+  serverUrl,
+  user,
+  ...htmlAttributes
+}: ShellProps) => {
+  const paletteView = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const layoutId = useRef("latest");
+
+  const [layout, setLayoutConfig, loadLayoutById] = useLayoutConfig(
+    user,
+    defaultLayout
+  );
+
+  const handleLayoutChange = useCallback(
+    (layout) => {
+      setLayoutConfig(layout);
+    },
+    [setLayoutConfig]
+  );
+
+  const handleDrawerClick = (e: MouseEvent<HTMLElement>) => {
+    const target = e.target as HTMLElement;
+    if (!paletteView.current?.contains(target)) {
+      setOpen(!open);
+    }
+  };
+
+  const handleNavigate = useCallback(
+    (id) => {
+      layoutId.current = id;
+      loadLayoutById(id);
+    },
+    [loadLayoutById]
+  );
+
+  useEffect(() => {
+    if (serverUrl && user.token) {
+      connectToServer(serverUrl, user.token);
+    }
+  }, [serverUrl, user.token]);
+
+  const getDrawers = () => {
+    const drawers: ReactElement[] = [];
+    if (leftSidePanel) {
+      drawers.push(
+        <Drawer
+          key="left-panel"
+          onClick={handleDrawerClick}
+          open={open}
+          position="left"
+          inline
+          peekaboo
+          sizeOpen={200}
+          toggleButton="end"
+        >
+          <View
+            className="vuuShell-palette"
+            id="vw-app-palette"
+            key="app-palette"
+            ref={paletteView}
+            style={{ height: "100%" }}
+          >
+            {leftSidePanel}
+          </View>
+        </Drawer>
+      );
+    }
+
+    return drawers;
+  };
+
+  return (
+    // ShellContext TBD
+    <ShellContextProvider value={undefined}>
+      <LayoutProvider layout={layout} onLayoutChange={handleLayoutChange}>
+        <DraggableLayout
+          className={cx("vuuShell", className)}
+          {...htmlAttributes}
+        >
+          <Flexbox
+            className="App"
+            style={{ flexDirection: "column", height: "100%", width: "100%" }}
+          >
+            <AppHeader
+              layoutId={layoutId.current}
+              loginUrl={loginUrl}
+              user={user}
+              onNavigate={handleNavigate}
+            />
+            <Chest style={{ flex: 1 }}>
+              {getDrawers().concat(
+                <DraggableLayout
+                  dropTarget
+                  key="main-content"
+                  style={{ width: "100%", height: "100%" }}
+                />
+              )}
+            </Chest>
+          </Flexbox>
+        </DraggableLayout>
+      </LayoutProvider>
+      {children}
+    </ShellContextProvider>
+  );
+};

package/src/shellTypes.ts

@@ -0,0 +1,18 @@
+declare global {
+  const vuuConfig: Promise<VuuConfig>;
+}
+
+export interface FeatureConfig {
+  name: string;
+  title: string;
+  url: string;
+  css?: string;
+}
+
+export type Features = {
+  [key: string]: FeatureConfig;
+};
+export interface VuuConfig {
+  features?: Features;
+  websocketUrl: string;
+}

package/src/use-force-render.js

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+
+export const useForceRender = () => {
+  const [, forceUpdate] = useState({});
+  return forceUpdate;
+};