@vuu-ui/vuu-shell 0.5.4 → 0.5.6

package/src/shell.tsx

@@ -1,171 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

package/src/use-layout-config.js

@@ -1,55 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-const useLayoutConfig = (user, defaultLayout) => {
-  const [layout, _setLayout] = useState(defaultLayout);
-
-  const setLayout = (layout) => {
-    _setLayout(layout);
-  };
-
-  const load = useCallback(
-    async (id = "latest") => {
-      fetch(`api/vui/${user.username}/${id}`, {})
-        .then((response) => {
-          return response.ok ? response.json() : defaultLayout;
-        })
-        .then(setLayout)
-        .catch(() => {
-          // TODO we should set a layout with a warning here
-          setLayout(defaultLayout);
-        });
-    },
-    [defaultLayout, user.username]
-  );
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const saveData = useCallback(
-    (data) => {
-      fetch(`api/vui/${user.username}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
-      }).then((response) => {
-        return response.ok ? response.json() : defaultLayout;
-      });
-      // .then((data) => console.log(data));
-    },
-    [defaultLayout, user]
-  );
-
-  const loadLayoutById = useCallback(
-    (id) => {
-      load(id);
-    },
-    [load]
-  );
-
-  return [layout, saveData, loadLayoutById];
-};
-
-export default useLayoutConfig;

package/src/user-profile/UserPanel.css

@@ -1,26 +0,0 @@
-.vuuUserPanel {
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  max-height: 400px;
-  padding: 12px;
-}
-
-vuuUserPanel-history {
-  flex: 1 1 auto;
-}
-
-.vuuUserPanel-buttonBar {
-  --saltButton-width: 100%;
-  align-items: flex-end;
-  border-top: 1px solid var(--surface3);
-  display: flex;
-  flex: 0 0 32px;
-  justify-content: flex-start;
-}
-
-.btn-logout {
-  --hwButton-icon-left: 12px;
-  --hwButton-padding: 0 6px 0 24px;
-  padding-left: 24px;
-}

package/src/user-profile/UserPanel.tsx

@@ -1,81 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useState } from "react";
-import { formatDate } from "@vuu-ui/vuu-utils";
-import { logout } from "../login";
-import { getLayoutHistory } from "../get-layout-history";
-import { ExportIcon } from "@salt-ds/icons";
-import { Button } from "@salt-ds/core";
-import { List, ListItem } from "@heswell/salt-lab";
-
-import "./UserPanel.css";
-
-const byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
-  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
-};
-
-const HistoryListItem = (props) => {
-  return <ListItem {...props} />;
-};
-
-export const UserPanel = forwardRef(function UserPanel(
-  { loginUrl, onNavigate, user, layoutId = "latest" },
-  forwardedRef
-) {
-  const [history, setHistory] = useState([]);
-
-  useEffect(() => {
-    async function getHistory() {
-      const history = await getLayoutHistory(user);
-      console.log({ history });
-      const sortedHistory = history
-        .filter((item) => item.id !== "latest")
-        .sort(byLastUpdate)
-        .map(({ id, lastUpdate }) => ({
-          lastUpdate,
-          id,
-          label: `Saved at ${formatDate(new Date(lastUpdate), "kk:mm:ss")}`,
-        }));
-      console.log({ sortedHistory });
-      setHistory(sortedHistory);
-    }
-
-    getHistory();
-  }, [user]);
-
-  const handleHisorySelected = useCallback(
-    (evt, selected) => {
-      if (selected) {
-        onNavigate(selected.id);
-      }
-    },
-    [onNavigate]
-  );
-
-  const handleLogout = useCallback(() => {
-    logout(loginUrl);
-  }, [loginUrl]);
-
-  const selected =
-    history.length === 0
-      ? []
-      : layoutId === "latest"
-      ? history[0]
-      : history.find((i) => i.id === layoutId);
-  console.log({ selected });
-
-  return (
-    <div className="vuuUserPanel" ref={forwardedRef}>
-      <List
-        ListItem={HistoryListItem}
-        className="vuuUserPanel-history"
-        onSelect={handleHisorySelected}
-        selected={selected}
-        source={history}
-      />
-      <div className="vuuUserPanel-buttonBar">
-        <Button aria-label="logout" onClick={handleLogout}>
-          <ExportIcon /> Logout
-        </Button>
-      </div>
-    </div>
-  );
-});

package/src/user-profile/UserProfile.css

@@ -1,3 +0,0 @@
-.vuuUserProfile {
-  --svg-icon: var(--svg-user);
-}

package/src/user-profile/UserProfile.tsx

@@ -1,47 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import { Button } from "@salt-ds/core";
-import { DropdownBase } from "@heswell/salt-lab";
-import { UserSolidIcon } from "@salt-ds/icons";
-import { UserPanel } from "./UserPanel";
-
-import "./UserProfile.css";
-
-export const UserProfile = ({ layoutId, loginUrl, onNavigate, user }) => {
-  const [open, setOpen] = useState(false);
-  const openRef = useRef(false);
-  const buttonRef = useRef(null);
-
-  const toggle = useCallback(() => {
-    setOpen((isOpen) => {
-      return (openRef.current = !isOpen);
-    });
-    requestAnimationFrame(() => {
-      if (!openRef.current) {
-        requestAnimationFrame(() => {
-          buttonRef.current.focus();
-        });
-      }
-    });
-  }, []);
-
-  const handleNavigate = (id) => {
-    setOpen(false);
-    onNavigate(id);
-  };
-
-  return (
-    <div className="vuuUserProfile">
-      <DropdownBase placement="bottom-end" onCancel={toggle}>
-        <Button ref={buttonRef} variant="secondary">
-          <UserSolidIcon />
-        </Button>
-        <UserPanel
-          layoutId={layoutId}
-          loginUrl={loginUrl}
-          onNavigate={handleNavigate}
-          user={user}
-        />
-      </DropdownBase>
-    </div>
-  );
-};

package/src/user-profile/index.ts

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