@blockbite/ui 1.0.5 → 2.0.1

package/src/ButtonToggle.tsx

@@ -1,165 +0,0 @@
-import { Icon } from "./Icon";
-import { Wrap } from "./Wrap";
-import { Button as WordpressButton } from "@wordpress/components";
-import { memo, useCallback, useEffect, useState } from "@wordpress/element";
-import classNames from "classnames";
-
-type ButtonToggleProps = {
-  children?: React.ReactNode;
-  className?: string;
-  value: string;
-  defaultPressed: string;
-  variant?: "primary" | "secondary";
-  size?: "small" | "default" | "compact";
-  icon?: any;
-  display?: "icon" | "label" | "" | null;
-  onPressedChange: (value: string) => void;
-  label?: string;
-};
-
-type ButtonToggleGroupOptionProp = {
-  value: string;
-  label: string;
-  tooltip?: string;
-  icon?: any;
-  children?: React.ReactNode;
-};
-
-type ButtonToggleGroupProps = {
-  className?: string;
-  options: ButtonToggleGroupOptionProp[];
-  defaultPressed?: string;
-  toggle?: boolean;
-  size?: "small" | "default" | "compact";
-  tabs?: boolean;
-  display?: "icon" | "label" | "" | null;
-  variant?: "primary" | "secondary";
-  stretch?: boolean;
-  icon?: any;
-  onPressedChange?: (value: string) => void;
-};
-
-const ButtonToggle: React.FC<ButtonToggleProps> = memo(
-  ({
-    children,
-    className,
-    value,
-    variant = "secondary",
-    defaultPressed,
-    onPressedChange,
-    icon,
-    size = "compact",
-    display = "auto",
-    label,
-  }) => {
-    const [isPressed, setIsPressed] = useState(false);
-
-    useEffect(() => {
-      setIsPressed(defaultPressed === value ? true : false);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultPressed]);
-
-    const handleClick = useCallback(() => {
-      setIsPressed((prev) => !prev);
-      onPressedChange(value);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isPressed, onPressedChange]);
-
-    return (
-      <WordpressButton
-        aria-label={label}
-        className={classNames(className, "blockbite-ui__button--default")}
-        value={value}
-        size={size}
-        label={label}
-        variant={variant}
-        showTooltip={true}
-        isPressed={isPressed}
-        onClick={handleClick}
-      >
-        {icon && <Icon icon={icon} />}
-        {display !== "icon" ? children : null}
-        {label && !children && display !== "icon" ? <span>{label}</span> : null}
-      </WordpressButton>
-    );
-  }
-);
-
-const ButtonToggleGroup: React.FC<ButtonToggleGroupProps> = memo(
-  ({
-    className,
-    defaultPressed = "",
-    toggle = true,
-    display = "auto",
-    options,
-    size = "compact",
-    tabs = false,
-    variant = "secondary",
-    stretch = false,
-    onPressedChange,
-  }) => {
-    const [isPressed, setIsPressed] = useState<string>(defaultPressed);
-
-    useEffect(() => {
-      setIsPressed(defaultPressed);
-    }, [defaultPressed]);
-
-    const handleButtonClick = useCallback(
-      (value: string) => {
-        const newValue = toggle && isPressed === value ? "" : value;
-        setIsPressed(newValue);
-        onPressedChange?.(newValue);
-      },
-      [isPressed, onPressedChange, toggle]
-    );
-
-    const renderContent = (option: ButtonToggleGroupOptionProp) => {
-      if (display === "icon" && option?.icon) {
-        return <Icon icon={option.icon} />;
-      } else if (display === "label") {
-        return <span>{option.label}</span>;
-      }
-      return (
-        <span className="flex items-center justify-center gap-1">
-          {option.icon && <Icon icon={option.icon} />}
-          <span>{option.label}</span>
-        </span>
-      );
-    };
-
-    return (
-      <Wrap
-        className={classNames(
-          "blockbite-ui__button-group flex flex-wrap gap-1",
-          className,
-          tabs ? "blockbite-ui__button-group--tabs" : ""
-        )}
-      >
-        {options.map((option, index) => (
-          <WordpressButton
-            key={`ButtonToggleGroup__${option.value}__${option.label}__${index}`}
-            className={classNames("blockbite-ui__button--default", {
-              grow: stretch,
-              "justify-center": stretch,
-            })}
-            // tooltip
-            aria-label={option.label}
-            showTooltip={true}
-            value={option.value}
-            size={size}
-            label={option?.tooltip || option.label}
-            variant={variant}
-            isPressed={isPressed === option.value}
-            onClick={() => handleButtonClick(option.value)}
-          >
-            {renderContent(option)}
-            {option.children && option.children}
-          </WordpressButton>
-        ))}
-      </Wrap>
-    );
-  }
-);
-
-export default ButtonToggleGroup;
-export { ButtonToggle, ButtonToggleGroup };

package/src/Chapter.tsx

@@ -1,22 +0,0 @@
-import { Wrap } from "./Wrap";
-import classNames from "classnames";
-
-type ChapterProps = {
-  children?: React.ReactNode;
-  className?: string;
-  title?: string;
-};
-
-export const Chapter = ({ children, title }: ChapterProps) => {
-  return (
-    <Wrap
-      className={classNames(
-        "text-gray-medium my-2 flex items-center gap-1 text-[12px] font-medium",
-        classNames
-      )}
-    >
-      {title && <Wrap className="font-medium">{title}</Wrap>}
-      {children}
-    </Wrap>
-  );
-};

package/src/ChapterDivider.tsx

@@ -1,25 +0,0 @@
-import classNames from 'classnames';
-
-type ChapterDividerProps = {
-  id?: string;
-  title?: string;
-  className?: string;
-  help?: string;
-};
-
-export const ChapterDivider = ({
-  id = '',
-  title,
-  className,
-  help,
-}: ChapterDividerProps) => {
-  return (
-    <div {...(id ? { id } : null)} className={classNames('mb-4', className)}>
-      <div className="flex w-full flex-wrap items-center gap-2">
-        <small className="shrink-1 text-[12px]">{title}</small>
-        <span className="h-[1px] w-full bg-easy"></span>
-      </div>
-      {help && <small className="w-full shrink-0 text-[12px]">{help}</small>}
-    </div>
-  );
-};

package/src/Checkbox.tsx

@@ -1,30 +0,0 @@
-import { Wrap } from "./Wrap";
-import { CheckboxControl } from "@wordpress/components";
-import { useEffect, useState } from "@wordpress/element";
-
-type CheckboxProps = {
-  id: string;
-  label?: string;
-  help?: string;
-  defaultChecked?: boolean;
-  onCheckedChange: (checked: boolean, id: string) => void;
-};
-
-export const Checkbox = ({ label, help, defaultChecked }: CheckboxProps) => {
-  const [isChecked, setChecked] = useState(defaultChecked);
-
-  useEffect(() => {
-    setChecked(defaultChecked);
-  }, [defaultChecked]);
-
-  return (
-    <Wrap className="blockbite-ui__checkbox mx-1 flex items-center gap-2">
-      <CheckboxControl
-        label={label}
-        help={help}
-        checked={isChecked}
-        onChange={setChecked}
-      />
-    </Wrap>
-  );
-};

package/src/DisappearingMessage.tsx

@@ -1,41 +0,0 @@
-import { useEffect, useRef, useState } from '@wordpress/element';
-
-type DisappearingMessageProps = {
-  duration: number;
-  children: React.ReactNode;
-  trigger: boolean;
-};
-
-export const DisappearingMessage = ({
-  duration,
-  children,
-  trigger,
-}: DisappearingMessageProps) => {
-  const [alert, setAlert] = useState(false);
-  const isMountingRef = useRef(false);
-
-  useEffect(() => {
-    isMountingRef.current = true;
-  }, []);
-
-  useEffect(() => {
-    let timeoutId = null;
-
-    // Only run on subsequent renders
-    if (trigger && !isMountingRef.current) {
-      setAlert(true);
-      timeoutId = setTimeout(() => {
-        setAlert(false);
-      }, duration);
-    } else {
-      isMountingRef.current = false;
-    }
-
-    // Cleanup timeout on unmount or when `trigger` changes
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [trigger, duration]);
-
-  return alert && <>{children}</>;
-};

package/src/DropdownPicker.tsx

@@ -1,72 +0,0 @@
-import ChevronDownIcon from "@blockbite/icons/dist/ChevronDown";
-import { Icon } from "./Icon";
-import { DropdownMenu } from "@wordpress/components";
-import { useEffect, useState } from "@wordpress/element";
-import classNames from "classnames";
-
-type DropdownPickerProps = {
-  label?: string;
-  className?: string;
-  defaultValue: string;
-  defaultIcon?: any;
-  options: {
-    icon?: React.ReactElement;
-    label: string;
-    subtitle?: string;
-    value: string;
-  }[];
-  onPressedChange: (value: string | null) => void; // Updated to allow `null` for reset
-};
-
-export const DropdownPicker = ({
-  label,
-  className,
-  defaultValue,
-  defaultIcon = ChevronDownIcon,
-  onPressedChange,
-  options,
-}: DropdownPickerProps) => {
-  const [currentOption, setCurrentOption] = useState<string | null>(null);
-
-  useEffect(() => {
-    setCurrentOption(defaultValue);
-  }, [defaultValue]);
-
-  const allOptions = [
-    ...options.map((option) => ({
-      icon: option.icon,
-      label: option.label,
-      title: option.label,
-      value: option.value,
-      onClick: () => {
-        setCurrentOption(option.value);
-        onPressedChange(option.value);
-      },
-    })),
-    {
-      icon: <Icon icon={defaultIcon} />,
-      title: "Reset",
-      value: "reset",
-      onClick: () => {
-        setCurrentOption("reset");
-        onPressedChange("reset");
-      },
-    },
-  ];
-
-  return (
-    <DropdownMenu
-      controls={allOptions}
-      className={classNames(
-        "blockbite-ui__dropdown-picker border-primary border",
-        className
-      )}
-      icon={
-        options.find((option) => option.value === currentOption)?.icon || (
-          <Icon icon={defaultIcon} />
-        )
-      }
-      label={label || "Select"}
-    />
-  );
-};

package/src/EmptyState.tsx

@@ -1,32 +0,0 @@
-type Props = {
-  icon?: JSX.Element;
-  title: string;
-  description: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-};
-
-export default function EmptyState({
-  icon,
-  title,
-  description,
-  children = null,
-  ...rest
-}: Props) {
-  return (
-    <div {...rest}>
-      <div className="flex h-full w-full flex-col items-center justify-center text-center !font-sans">
-        <div className="max-w-sm">
-          {icon && <div className="mx-auto !text-gray-400">{icon}</div>}
-          <h3 className="text-gray-medium mt-2 !font-sans text-sm font-medium">
-            {title}
-          </h3>
-          <p className="mt-1 !font-sans text-sm !text-gray-500">
-            {description}
-          </p>
-          {children && <div className="mt-4">{children}</div>}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/FloatingPanel.tsx

@@ -1,59 +0,0 @@
-import { useEffect, useRef, useState } from '@wordpress/element';
-
-type DraggablePanelProps = {
-  children: React.ReactNode;
-};
-
-export default function FloatingPanel({
-  children,
-}: DraggablePanelProps & {
-  children: React.ReactNode;
-}) {
-  const panelRef = useRef(null);
-  const [position, setPosition] = useState({ x: 100, y: 100 });
-  const [dragging, setDragging] = useState(false);
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
-
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (dragging) {
-        setPosition({
-          x: e.clientX - offset.x,
-          y: e.clientY - offset.y,
-        });
-      }
-    };
-
-    const handleMouseUp = () => setDragging(false);
-
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [dragging, offset]);
-
-  const startDragging = (e) => {
-    const rect = panelRef.current.getBoundingClientRect();
-    setOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-    setDragging(true);
-  };
-
-  return (
-    <div className="bb_">
-      <div
-        ref={panelRef}
-        className="fixed bg-white shadow-xl rounded-2xl p-4 w-[400px] h-[550px] z-[9999]"
-        style={{ left: position.x, top: position.y }}
-      >
-        {children}
-        <div
-          className="absolute top-1 right-1 cursor-move w-5 h-5 bg-gray-300 rounded"
-          onMouseDown={startDragging}
-        ></div>
-      </div>
-    </div>
-  );
-}

package/src/FocalPointControl.tsx

@@ -1,58 +0,0 @@
-import { Wrap } from "./Wrap";
-import { FocalPointPicker } from "@wordpress/components";
-import { useEffect, useState } from "@wordpress/element";
-
-type FocalPointControlProps = {
-  defaultValue: string;
-  onValueChange: (value: string) => void;
-  url?: string;
-};
-
-const FocalPointControl: React.FC<FocalPointControlProps> = ({
-  defaultValue,
-  onValueChange,
-  url,
-}) => {
-  const [focalPoint, setFocalPoint] = useState({
-    x: 0.5,
-    y: 0.5,
-  });
-
-  useEffect(() => {
-    onValueChange(
-      `[${(focalPoint.x * 100).toFixed(2)}%_${(focalPoint.y * 100).toFixed(
-        2
-      )}%]`
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [focalPoint]);
-
-  useEffect(() => {
-    // default value is in the format of [x%_y%] parse to get the x and y values
-    if (defaultValue.includes("%")) {
-      const [x, y] = defaultValue
-        .replace("[", "")
-        .replace("%]", "")
-        .split("_")
-        .map((value: string) => parseFloat(value) / 100);
-
-      setFocalPoint({
-        x,
-        y,
-      });
-    }
-  }, [defaultValue]);
-
-  return (
-    <Wrap className="relative flex flex-col">
-      <FocalPointPicker
-        url={url}
-        value={focalPoint}
-        onDrag={(value) => setFocalPoint(value)}
-        onChange={(value) => setFocalPoint(value)}
-      />
-    </Wrap>
-  );
-};
-
-export default FocalPointControl;

package/src/Icon.tsx

@@ -1,17 +0,0 @@
-import { Wrap } from "./Wrap";
-
-type IconProps = {
-  icon: React.FC<React.SVGProps<SVGSVGElement>> | null; // Type it as a React Functional Component
-  className?: string;
-};
-
-export const Icon = ({ icon: IconComponent, className = "" }: IconProps) => {
-  if (!IconComponent) return null;
-
-  return (
-    <Wrap className={`blockbite--icon`}>
-      <IconComponent className={className} />{" "}
-      {/* Render the functional component */}
-    </Wrap>
-  );
-};

package/src/LinkPicker.tsx

@@ -1,94 +0,0 @@
-import { Wrap } from "./Wrap";
-import apiFetch from "@wordpress/api-fetch";
-import { TextControl } from "@wordpress/components";
-import { useEffect, useState } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
-
-export default function LinkPicker(props) {
-  const [activeKeyword, setActiveKeyword] = useState("");
-  const [links, setLinks] = useState<
-    Array<{ id: number; url: string; title: string; post_type: string }>
-  >([]);
-  const [activeLink, setActiveLink] = useState({
-    url: "",
-    title: "",
-  });
-
-  useEffect(() => {
-    if (activeKeyword === "") return;
-    setLinks(null);
-    apiFetch({
-      path: `/blockbite/v1/block-helpers/get-links/${activeKeyword}`,
-    }).then(
-      (
-        fetchedLinks: Array<{
-          id: number;
-          url: string;
-          title: string;
-          post_type: string;
-        }> | null
-      ) => {
-        if (fetchedLinks?.length) {
-          setLinks([...fetchedLinks]);
-        } else {
-          setLinks([]);
-        }
-      }
-    );
-  }, [activeKeyword]);
-
-  useEffect(() => {
-    if (activeLink.url !== "") {
-      props.parentCallback(activeLink);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeLink]);
-
-  return (
-    <Wrap className="blockbite--editor-linkwrap">
-      <TextControl
-        label={__("Search link", "blockbitelinks")}
-        value={activeKeyword}
-        placeholder="Example: About"
-        onChange={(value) => setActiveKeyword(value)}
-        help={__("Type a post, page, title", "blockbitelinks")}
-      />
-      {activeKeyword ? (
-        <div className="blockbite--editor-linklist">
-          <LinkList
-            links={links}
-            onActiveLink={(link) => [
-              setActiveLink({ ...link }),
-              setActiveKeyword(""),
-            ]}
-          />
-        </div>
-      ) : null}
-    </Wrap>
-  );
-}
-function LinkList({ links, onActiveLink }) {
-  const list = [];
-  if (links === null) {
-    return <p>Loading...</p>;
-  } else if (links.length === 0) {
-    return <p>No Results</p>;
-  }
-  // iterate over the links and show img with icon based on icon_url and icon
-  links.forEach((link) => {
-    list.push(
-      // add key
-      <Wrap key={link.id}>
-        <span
-          className="blockbite--editor-link"
-          onClick={() => onActiveLink(link)}
-        >
-          <span>{link.title}</span>
-          <span className="blockbite--preview-link">{link.url}</span>
-          <span className="blockbite--preview-link">{link.post_type}</span>
-        </span>
-      </Wrap>
-    );
-  });
-  return list;
-}