@vuu-ui/vuu-layout 0.5.15 → 0.5.16

package/src/responsive/utils.ts

@@ -1,37 +0,0 @@
-const COLLAPSIBLE = 'data-collapsible';
-
-const RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {
-  [COLLAPSIBLE]: true,
-  'data-pad-start': true,
-  'data-pad-end': true
-};
-
-export const isResponsiveAttribute = (propName: string): boolean =>
-  RESPONSIVE_ATTRIBUTE[propName] ?? false;
-
-const isCollapsible = (propName: string) => propName === COLLAPSIBLE;
-
-const COLLAPSIBLE_VALUE: { [key: string]: string } = {
-  dynamic: 'dynamic',
-  instant: 'instant',
-  true: 'instant'
-};
-
-const collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? 'none';
-
-type Props = { [key: string]: any };
-export const extractResponsiveProps = (props: Props) => {
-  return Object.keys(props).reduce<[Props, Props]>(
-    (result, propName) => {
-      const [toolbarProps, rest] = result;
-      if (isResponsiveAttribute(propName)) {
-        const value = isCollapsible(propName) ? collapsibleValue(props[propName]) : props[propName];
-
-        toolbarProps[propName] = value;
-        rest[propName] = undefined;
-      }
-      return result;
-    },
-    [{}, {}]
-  );
-};

package/src/stack/Stack.css

@@ -1,39 +0,0 @@
-.Tabs {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-}
-
-.Tabs-horizontal {
-  flex-direction: row;
-}
-
-.Tabs .Toolbar:before {
-  left: 0;
-  width: 100%;
-  bottom: 0;
-  height: 1px;
-  content: '';
-  position: absolute;
-  background: var(--grey60);
-}
-
-.vuuTabHeader {
-  --saltTabs-activationIndicator-background: transparent;
-  --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);
-  border-bottom: solid 1px var(--salt-container-primary-borderColor);
-}
-
-.vuuTabHeader + .hwFlexbox,
-.vuuTabHeader + * {
-  flex: 1;
-}
-
-.vuuTabHeader + .vuuView > .vuuHeader {
-  height: 0;
-  overflow: hidden;
-}
-
-.Layout-svg-button {
-  --spacing-medium: 5px;
-}

package/src/stack/Stack.tsx

@@ -1,173 +0,0 @@
-import { Tab, Tabstrip, Toolbar, ToolbarField } from "@heswell/salt-lab";
-import { useIdMemo as useId } from "@salt-ds/core";
-import cx from "classnames";
-import React, {
-  ForwardedRef,
-  forwardRef,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  useCallback
-} from "react";
-import { StackProps } from "./stackTypes";
-
-import "./Stack.css";
-
-const classBase = "Tabs";
-
-const getDefaultTabIcon = () =>
-  undefined;
-
-const getDefaultTabLabel = (component: ReactElement, tabIndex: number) =>
-  component.props?.title ?? `Tab ${tabIndex + 1}`;
-
-const getChildElements = <T extends ReactElement = ReactElement>(
-  children: ReactNode
-): T[] => {
-  const elements: T[] = [];
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement(child)) {
-      elements.push(child as T);
-    } else {
-      console.warn(`Stack has unexpected child element type`);
-    }
-  });
-  return elements;
-};
-
-export const Stack = forwardRef(function Stack(
-  {
-    active = 0,
-    children,
-    className: classNameProp,
-    enableAddTab,
-    enableCloseTabs,
-    getTabIcon = getDefaultTabIcon,
-    getTabLabel = getDefaultTabLabel,
-    id: idProp,
-    keyBoardActivation = "manual",
-    onMouseDown,
-    onTabAdd,
-    onTabClose,
-    onTabEdit,
-    onTabSelectionChanged,
-    showTabs,
-    style,
-    TabstripProps,
-  }: StackProps,
-  ref: ForwardedRef<HTMLDivElement>
-) {
-  const id = useId(idProp);
-
-  const handleTabSelection = (nextIdx: number) => {
-    onTabSelectionChanged?.(nextIdx);
-  };
-
-  const handleTabClose = (tabIndex: number) => {
-    onTabClose?.(tabIndex);
-  };
-
-  const handleAddTab = () => {
-    onTabAdd?.(React.Children.count(children));
-  };
-
-  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
-    const target = e.target as HTMLElement;
-    const tabElement = target.closest('[role^="tab"]') as HTMLDivElement;
-    const role = tabElement?.getAttribute("role");
-    if (role === "tab") {
-      const tabIndex = parseInt(tabElement.dataset.idx ?? "-1");
-      if (tabIndex === -1) {
-        throw Error("Stack: mousedown on tab with unknown index");
-      }
-      onMouseDown?.(e, tabIndex);
-    }
-  };
-
-  const handleExitEditMode = useCallback(
-    (
-      _oldText: string,
-      newText: string,
-      _allowDeactivation: boolean,
-      tabIndex: number
-    ) => {
-      onTabEdit?.(tabIndex, newText);
-    },
-    [onTabEdit]
-  );
-
-  const activeChild = () => {
-    if (React.isValidElement(children)) {
-      return children;
-    }
-    if (Array.isArray(children)) {
-      return children[active] ?? null;
-    }
-    return null;
-  };
-
-  const renderTabs = () =>
-    getChildElements(children).map((child, idx) => {
-      const rootId = `${id}-${idx}`;
-      const { closeable, id: childId } = child.props;
-      return (
-        <Tab
-          ariaControls={`${rootId}-tab`}
-          data-icon={getTabIcon(child, idx)}
-          draggable
-          key={childId ?? idx}
-          id={rootId}
-          label={getTabLabel(child, idx)}
-          closeable={closeable}
-          editable={TabstripProps?.enableRenameTab !== false}
-        />
-      );
-    });
-
-  const child = activeChild();
-
-  return (
-    <div
-      className={cx(classBase, classNameProp, {
-        [`${classBase}-horizontal`]: TabstripProps?.orientation === "vertical",
-      })}
-      style={style}
-      id={id}
-      ref={ref}
-    >
-      {showTabs ? (
-        <Toolbar
-          className="vuuTabHeader vuuHeader"
-          orientation={TabstripProps?.orientation}
-        >
-          <ToolbarField
-            disableFocusRing
-            data-collapsible="dynamic"
-            data-priority="3"
-            style={{ alignSelf: "flex-end" }}
-          >
-            <Tabstrip
-              {...TabstripProps}
-              enableRenameTab={TabstripProps?.enableRenameTab !== false}
-              enableAddTab={enableAddTab}
-              enableCloseTab={enableCloseTabs}
-              keyBoardActivation={keyBoardActivation}
-              onActiveChange={handleTabSelection}
-              onAddTab={handleAddTab}
-              onCloseTab={handleTabClose}
-              onExitEditMode={handleExitEditMode}
-              onMouseDown={handleMouseDown}
-              activeTabIndex={
-                TabstripProps?.activeTabIndex ?? (child === null ? -1 : active)
-              }
-            >
-              {renderTabs()}
-            </Tabstrip>
-          </ToolbarField>
-        </Toolbar>
-      ) : null}
-      {child}
-    </div>
-  );
-});
-Stack.displayName = "Stack";

package/src/stack/StackLayout.tsx

@@ -1,119 +0,0 @@
-import { useIdMemo as useId } from "@salt-ds/core";
-import React, { ReactElement, useRef } from "react";
-import Component from "../Component";
-import { useLayoutProviderDispatch } from "../layout-provider";
-import { useViewActionDispatcher, View } from "../layout-view";
-import { registerComponent } from "../registry/ComponentRegistry";
-import { usePersistentState } from "../use-persistent-state";
-import { Stack } from "./Stack";
-import { StackProps } from "./stackTypes";
-
-import "./Stack.css";
-
-const defaultCreateNewChild = (index: number) => (
-  <View
-    resizeable
-    title={`Tab ${index}`}
-    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}
-    header
-    closeable
-  >
-    <Component style={{ flex: 1 }} />
-  </View>
-);
-
-export const StackLayout = (props: StackProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const dispatch = useLayoutProviderDispatch();
-  const { loadState } = usePersistentState();
-
-  const {
-    createNewChild = defaultCreateNewChild,
-    id: idProp,
-    onTabSelectionChanged,
-    path,
-    ...restProps
-  } = props;
-
-  const { children } = props;
-
-  const id = useId(idProp);
-
-  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
-
-  const handleTabSelection = (nextIdx: number) => {
-    console.log(`StackLayout handleTabSelection nextTab = ${nextIdx}`);
-    if (path) {
-      dispatch({ type: "switch-tab", path, nextIdx });
-      onTabSelectionChanged?.(nextIdx);
-    }
-  };
-
-  const handleTabClose = (tabIndex: number) => {
-    if (Array.isArray(children)) {
-      const {
-        props: { "data-path": dataPath, path = dataPath },
-      } = children[tabIndex];
-      dispatch({ type: "remove", path });
-    }
-  };
-
-  const handleTabAdd = (e: unknown, tabIndex = React.Children.count(children)) => {
-    if (path) {
-      console.log(`[StackLayout] handleTabAdd`);
-      const component = createNewChild(tabIndex);
-      console.log({ component });
-      dispatch({
-        type: "add",
-        path,
-        component,
-      });
-    }
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleMouseDown = async (e: any, index: number) => {
-    let readyToDrag: undefined | ((value: unknown) => void);
-
-    const preDragActivity = async () =>
-      new Promise((resolve) => {
-        console.log("preDragActivity: Ok, gonna release the drag");
-        readyToDrag = resolve;
-      });
-
-    const dragging = await dispatchViewAction(
-      { type: "mousedown", index, preDragActivity },
-      e
-    );
-
-    if (dragging) {
-      readyToDrag?.(undefined);
-    }
-  };
-
-  const handleTabEdit = (tabIndex: number, text: string) => {
-    dispatch({ type: "set-title", path: `${path}.${tabIndex}`, title: text });
-  };
-
-  const getTabLabel = (component: ReactElement, idx: number) => {
-    const { id, title } = component.props;
-    return loadState(id, "view-title") || title || `Tab ${idx + 1}`;
-  };
-
-  return (
-    <Stack
-      {...restProps}
-      id={id}
-      getTabLabel={getTabLabel}
-      onMouseDown={handleMouseDown}
-      onTabAdd={handleTabAdd}
-      onTabClose={handleTabClose}
-      onTabEdit={handleTabEdit}
-      onTabSelectionChanged={handleTabSelection}
-      ref={ref}
-    />
-  );
-};
-StackLayout.displayName = "Stack";
-
-registerComponent("Stack", StackLayout, "container");

package/src/stack/stackTypes.ts

@@ -1,22 +0,0 @@
-import { TabstripProps } from "@heswell/salt-lab";
-import { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from "react";
-
-export interface StackProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onMouseDown"> {
-  active?: number;
-  createNewChild?: (index: number) => ReactElement;
-  enableAddTab?: boolean;
-  enableCloseTabs?: boolean;
-  getTabIcon?: (component: ReactElement, index: number) => string | undefined;
-  getTabLabel?: (component: ReactElement, index: number) => string | undefined;
-  keyBoardActivation?: "automatic" | "manual";
-  onMouseDown?: (e: MouseEvent, tabIndex: number) => void;
-  onTabAdd?: (tabIndex: number) => void;
-  onTabClose?: (tabIndex: number) => void;
-  onTabEdit?: (tabIndex: number, label: string) => void;
-  onTabSelectionChanged?: (nextIndex: number) => void;
-  path?: string;
-  showTabs?: boolean;
-  toolbarContent?: ReactNode;
-  TabstripProps?: Partial<TabstripProps>;
-}

package/src/tabs/TabPanel.css

@@ -1,12 +0,0 @@
-.TabPanel {
-  display: flex;
-  flex: 1;
-}
-
-.TabPanel > * {
-  height: 100%;
-}
-
-.TabPanel > .View > .Header {
-  display: none;
-}

package/src/tabs/TabPanel.tsx

@@ -1,17 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-import './TabPanel.css';
-
-export interface TabPanelProps extends HTMLAttributes<HTMLDivElement>{
-  ariaLabelledBy: string;
-}
-
-const TabPanel = ({ ariaLabelledBy, children, id }: TabPanelProps) => {
-  return (
-    <div className="TabPanel" id={id} role="tabpanel" aria-labelledby={ariaLabelledBy}>
-      {children}
-    </div>
-  );
-};
-
-export default TabPanel;

package/src/tools/config-wrapper/ConfigWrapper.tsx

@@ -1,55 +0,0 @@
-import React, { useState } from "react";
-
-import { LayoutConfigurator, LayoutTreeViewer } from "..";
-import { followPathToComponent } from "../..";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ConfigWrapper = ({ children }: any) => {
-  const designMode = false;
-  const [layout, setLayout] = useState(children);
-  const [selectedComponent, setSelectedComponent] = useState(children);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleSelection = (selectedPath: any) => {
-    const targetComponent = followPathToComponent(layout, selectedPath);
-    setSelectedComponent(targetComponent);
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleChange = (property: any, value: any) => {
-    console.log(`change ${property} -> ${value}`);
-
-    const newComponent = React.cloneElement(selectedComponent, {
-      style: {
-        ...selectedComponent.props.style,
-        [property]: value,
-      },
-    });
-    setSelectedComponent(newComponent);
-    setLayout(React.cloneElement(layout, {}, newComponent));
-  };
-
-  return (
-    <div data-design-mode={`${designMode}`}>
-      {layout}
-      <br />
-      <div style={{ display: "flex" }}>
-        <LayoutConfigurator
-          height={300}
-          managedStyle={selectedComponent.props.style}
-          width={300}
-          onChange={handleChange}
-          style={undefined}
-        />
-        <LayoutTreeViewer
-          layout={layout}
-          onSelect={handleSelection}
-          style={{ width: 300, height: 300, backgroundColor: "#ccc" }}
-        />
-      </div>
-      {/* <StateButton
-        defaultChecked={false}
-        onChange={(e, value) => setDesignMode(value)}>Design Mode</StateButton> */}
-    </div>
-  );
-};

package/src/tools/devtools-box/layout-configurator.css

@@ -1,112 +0,0 @@
-[data-design-mode='true'] .Component {
-  filter: grayscale(100%);
-  opacity: 0.4;
-}
-
-[data-design-mode='true'] .Component:after {
-  color: black;
-  content: 'Component';
-  height: 12px;
-  background-color: yellow;
-}
-
-.LayoutConfigurator {
-  --margin-color: #f3cea5;
-  --border-color: #fddda0;
-  --padding-color: #c6d092;
-  --content-color: #8cb6c0;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  background-color: var(--margin-color);
-}
-
-.LayoutConfigurator .layout-outer {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.LayoutBox {
-  --hw-control-font-size: 13px;
-  --hw-text-input-bg: rgba(255, 255, 255, 0.3);
-  --hwTextInput-padding: 3px;
-  --hw-text-input-position: absolute;
-  --hwTextInput-width: 30px;
-
-  flex: 1 1 auto;
-}
-
-.LayoutBox > .layout-top {
-  flex: 0 0 40px;
-  padding-left: 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-}
-
-.LayoutBox > .layout-bottom {
-  flex: 0 0 40px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.LayoutBox > .layout-inner > .layout-right,
-.LayoutBox > .layout-inner > .layout-left {
-  flex: 0 0 40px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.layout-top,
-.layout-bottom {
-  --hw-text-input-margin: 0 0 0 -15px;
-}
-
-.layout-top > .layout-input,
-.layout-bottom > .layout-input {
-  left: 50%;
-}
-
-.LayoutBox > .layout-inner {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-}
-
-.LayoutBox.layout-margin {
-  background-color: var(--margin-color);
-  border: dashed 2px black;
-}
-
-.LayoutBox.layout-border {
-  background-color: var(--border-color);
-  border: solid 2px black;
-}
-
-.LayoutBox.layout-padding {
-  background-color: var(--padding-color);
-  border: dashed 2px black;
-}
-
-.LayoutBox .layout-content {
-  flex: 1 1 auto;
-  background-color: var(--content-color);
-  border: solid 2px #808080;
-}
-
-.LayoutBox .layout-title {
-  color: #161616;
-  font-size: 11px;
-  left: 4px;
-  line-height: 15px;
-  position: absolute;
-  top: 1px;
-}