@vuu-ui/vuu-layout 0.5.4 → 0.5.6

package/src/chest-of-drawers/Drawer.tsx

@@ -1,118 +0,0 @@
-import React, { CSSProperties, HTMLAttributes, useCallback } from "react";
-import cx from "classnames";
-import { Button, useControlled } from "@salt-ds/core";
-
-import "./Drawer.css";
-
-const classBase = "vuuDrawer";
-
-const sizeAttribute = (value: string | number) => {
-  return typeof value === "string" ? value : value + "px";
-};
-
-const getStyle = (
-  styleProp?: CSSProperties,
-  sizeOpen?: number,
-  sizeClosed?: number
-) => {
-  const hasSizeOpen = sizeOpen !== undefined;
-  const hasSizeClosed = sizeClosed !== undefined;
-
-  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {
-    return undefined;
-  }
-
-  if (!hasSizeClosed && !hasSizeOpen) {
-    return styleProp;
-  }
-
-  return {
-    ...styleProp,
-    "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,
-    "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,
-  };
-};
-
-export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
-  clickToOpen?: boolean;
-  defaultOpen: boolean;
-  inline?: boolean;
-  open?: boolean;
-  peekaboo?: boolean;
-  position?: "left" | "right" | "top" | "bottom";
-  sizeOpen?: number;
-  sizeClosed?: number;
-  toggleButton?: "start" | "end";
-}
-const Drawer = ({
-  children,
-  className: classNameProp,
-  clickToOpen,
-  defaultOpen,
-  sizeOpen,
-  sizeClosed,
-  style: styleProp,
-  open: openProp,
-  position = "left",
-  inline,
-  onClick,
-  peekaboo = false,
-  toggleButton,
-  ...props
-}: DrawerProps) => {
-  const [open, setOpen] = useControlled({
-    controlled: openProp,
-    default: defaultOpen ?? false,
-    name: "Drawer",
-    state: "open",
-  });
-
-  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
-    [`${classBase}-open`]: open,
-    [`${classBase}-inline`]: inline,
-    [`${classBase}-over`]: !inline,
-    [`${classBase}-peekaboo`]: peekaboo,
-  });
-
-  const toggleDrawer = useCallback(() => {
-    console.log("toggleDrawer");
-    setOpen(!open);
-  }, [open, setOpen]);
-
-  const style = getStyle(styleProp, sizeOpen, sizeClosed);
-
-  const handleClick = clickToOpen ? toggleDrawer : onClick;
-
-  const renderToggleButton = () => (
-    <div className={cx("vuuToggleButton-container")}>
-      {open ? (
-        <Button
-          aria-label="close"
-          onClick={toggleDrawer}
-          data-icon="close"
-          variant="secondary"
-        />
-      ) : (
-        <Button
-          aria-label="open"
-          onClick={toggleDrawer}
-          data-icon="close"
-          variant="secondary"
-        />
-      )}
-    </div>
-  );
-
-  return (
-    <div {...props} className={className} onClick={handleClick} style={style}>
-      {toggleButton == "start" ? renderToggleButton() : null}
-      <div className={`${classBase}-liner`}>
-        <div className={`${classBase}-content`}>{children}</div>
-      </div>
-      {toggleButton == "end" ? renderToggleButton() : null}
-    </div>
-  );
-};
-Drawer.displayName = "Drawer";
-
-export default Drawer;

package/src/chest-of-drawers/index.ts

@@ -1,2 +0,0 @@
-export { default as Chest } from './Chest';
-export { default as Drawer } from './Drawer';

package/src/common-types.ts

@@ -1,9 +0,0 @@
-export interface rect {
-  bottom: number;
-  left: number;
-  right: number;
-  top: number;
-}
-export type rectTuple = [number, number, number, number];
-
-export type dimension = 'width' | 'height';

package/src/debug.ts

@@ -1,16 +0,0 @@
-import { ReactElement } from 'react';
-import { typeOf } from './utils';
-
-export const tree = (el: ReactElement, depth = 0) => {
-  const type = typeOf(el);
-  const spaces = '          ';
-  let str = `\n${spaces.slice(0, depth)}${type}`;
-  if (type !== 'View') {
-    const els = el.props.children || [];
-    (Array.isArray(els) ? els : [els]).forEach((child) => {
-      str += tree(child, depth + 1);
-    });
-  }
-
-  return str;
-};

package/src/dialog/Dialog.css

@@ -1,16 +0,0 @@
-.hwDialog {
-  --dialog-border: var(--hw-dialog-border, solid 1px #ccc);
-  --dialog-padding: var(--hw-dialog-padding, 0);
-  --dialog-shadow: var(--hw-dialog-shadow, none);
-  --vuuView-margin: 0;
-  --vuuView-flex-wrap: none;
-
-  border: var(--dialog-border);
-  margin: var(--hwDialog-margin, 200px auto 0 auto);
-  padding: var(--dialog-padding);
-  box-shadow: var(--dialog-shadow);
-}
-
-.hwDialog::backdrop {
-  background-color: var(--hw-dialog-backdrop);
-}

package/src/dialog/Dialog.tsx

@@ -1,59 +0,0 @@
-import React, {
-  HTMLAttributes,
-  useCallback,
-  useLayoutEffect,
-  useRef,
-} from "react";
-import cx from "classnames";
-import { Flexbox } from "../flexbox";
-import { View } from "../layout-view";
-
-import { Toolbar, ToolbarButton } from "@heswell/salt-lab";
-import { CloseIcon } from "@salt-ds/icons";
-
-import "./Dialog.css";
-
-export interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
-  isOpen?: boolean;
-  onClose?: () => void;
-}
-
-const Dialog = ({
-  children,
-  className,
-  isOpen = false,
-  onClose,
-  ...props
-}: DialogProps) => {
-  const classRoot = "hwDialog";
-  const root = useRef<HTMLDialogElement>(null);
-
-  useLayoutEffect(() => {
-    if (isOpen) {
-      root.current?.showModal();
-    }
-  }, [isOpen]);
-
-  const close = useCallback(() => {
-    root.current?.close();
-    onClose?.();
-  }, [onClose]);
-
-  return (
-    <dialog {...props} className={cx(classRoot, className)} ref={root}>
-      {/* <Flexbox style={{ flexDirection: "column", width: "fit-content" }}> */}
-      <Flexbox
-        style={{ flexDirection: "column", width: "100%", height: "100%" }}
-      >
-        <Toolbar style={{ height: 32 }}>
-          <ToolbarButton key="close" onClick={close} data-align="right">
-            <CloseIcon /> Close
-          </ToolbarButton>
-        </Toolbar>
-        <View style={{ flex: 1 }}>{children}</View>
-      </Flexbox>
-    </dialog>
-  );
-};
-
-export default Dialog;

package/src/dialog/index.ts

@@ -1 +0,0 @@
-export { default as Dialog } from './Dialog';