@blockbite/ui 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockbite/ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Shared React UI components for Blockbite apps",
   "author": "Blockbite",
   "license": "MIT",
@@ -9,7 +9,7 @@
   "types": "src/index.d.ts",
   "module": "src/index.js",
   "files": [
-    "src/components/"
+    "src/"
   ],
   "scripts": {
     "dev": "vite",

package/src/AutocompleteDropdown.tsx

@@ -0,0 +1,109 @@
+import ChevronDownIcon from "@blockbite/icons/dist/ChevronDown";
+import type { OptionProps } from "./types";
+import { ButtonToggle } from "./ButtonToggle";
+import { Wrap } from "./Wrap";
+import { Button, Dropdown, TextControl } from "@wordpress/components";
+import { useEffect, useState } from "@wordpress/element";
+import classNames from "classnames";
+
+interface OptionPanelDropdownProps {
+  defaultValue: string;
+  options: { label: string; value: string }[];
+  onPressedChange: (value: string) => void;
+  swatch?: boolean;
+}
+
+export default function OptionPanelDropdown({
+  defaultValue,
+  options,
+  swatch,
+  onPressedChange,
+}: OptionPanelDropdownProps) {
+  const [activeKeyword, setActiveKeyword] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState<OptionProps[]>([]);
+
+  useEffect(() => {
+    setFilteredOptions(
+      options.filter((option: OptionProps) =>
+        option.label.toLowerCase().includes(activeKeyword.toLowerCase())
+      )
+    );
+  }, [activeKeyword, options]);
+
+  useEffect(() => {
+    setActiveKeyword("");
+    setFilteredOptions(options);
+  }, [defaultValue, options]);
+
+  return (
+    <Dropdown
+      className="option-panel-dropdown"
+      contentClassName="option-panel-dropdown-content"
+      popoverProps={{ placement: "bottom-start" }}
+      renderToggle={({ isOpen, onToggle }) => (
+        <Wrap important>
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={onToggle}
+            aria-expanded={isOpen}
+          >
+            <div className="flex items-center gap-1 !bg-transparent !p-0 !text-[11px] !text-current">
+              {swatch && (
+                <div
+                  className={classNames(
+                    `h-3 w-3 rounded-full bg-${defaultValue}`
+                  )}
+                />
+              )}
+              <span>{defaultValue || "Select option…"}</span>
+              <ChevronDownIcon />
+            </div>
+          </Button>
+        </Wrap>
+      )}
+      renderContent={() => (
+        <Wrap important>
+          <div className="w-52">
+            <TextControl
+              label="Search options"
+              value={activeKeyword}
+              onChange={(value) => setActiveKeyword(value)}
+              autoComplete="off"
+            />
+            <div className="grid grid-cols-2 gap-1 !bg-transparent !p-0 !pt-2">
+              {filteredOptions.length === 0 && (
+                <div className="!text-gray-medium col-span-2 pb-2 text-center !text-[11px]">
+                  No options found.
+                </div>
+              )}
+              {filteredOptions.map((option: OptionProps, index: Number) => (
+                <ButtonToggle
+                  key={`ButtonToggle__${option.value}___${index}`}
+                  className={classNames({
+                    "bg-primary": option.value,
+                  })}
+                  size="small"
+                  value={option.value.toString()}
+                  defaultPressed={defaultValue}
+                  onPressedChange={(value: string) => {
+                    onPressedChange(value ? option.value : "");
+                  }}
+                >
+                  {swatch && (
+                    <div
+                      className={classNames(
+                        `mr-3 h-3 w-3 rounded-full bg-${option.value}`
+                      )}
+                    />
+                  )}
+                  {option.label}
+                </ButtonToggle>
+              ))}
+            </div>
+          </div>
+        </Wrap>
+      )}
+    />
+  );
+}

package/src/Badge.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+
+type BadgeProps = {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+};
+
+export const Badge = ({ children, className, onClick }: BadgeProps) => {
+  return (
+    <div
+      onClick={onClick}
+      className={classNames(
+        className,
+        'inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800'
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/BitePreview.tsx

@@ -0,0 +1,88 @@
+import { createPortal, useEffect, useRef, useState } from '@wordpress/element';
+
+const BitePreview = ({ htmlContent, cssContent, frontendAssets }) => {
+  const iframeRef = useRef(null);
+  const [iframeBody, setIframeBody] = useState(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+
+    if (iframe) {
+      iframe.onload = () => {
+        const iframeDocument =
+          iframe.contentDocument || iframe.contentWindow.document;
+
+        if (iframeDocument) {
+          setIframeBody(iframeDocument.body); // Set the iframe body for portal
+
+          // Inject CSS content directly
+          const styleTag = iframeDocument.createElement('style');
+          styleTag.innerHTML = cssContent;
+          iframeDocument.head.appendChild(styleTag);
+
+          // Adopt or Create Frontend Assets
+          frontendAssets.forEach(({ type, id, url }) => {
+            const existingElement = document.getElementById(id);
+
+            if (existingElement) {
+              // If the asset exists in the parent, move it to the iframe
+              const adoptedElement = document.adoptNode(
+                existingElement.cloneNode(true)
+              );
+              iframeDocument.head.appendChild(adoptedElement);
+            } else {
+              // Create a new script or style if not found
+              const newElement = iframeDocument.createElement(
+                type === 'script' ? 'script' : 'link'
+              );
+              newElement.id = id;
+
+              if (type === 'script') {
+                newElement.src = url;
+                newElement.async = true;
+              } else {
+                newElement.rel = 'stylesheet';
+                newElement.href = url;
+              }
+
+              iframeDocument.head.appendChild(newElement);
+            }
+          });
+        }
+      };
+    }
+
+    return () => {
+      if (iframe) {
+        iframe.onload = null; // Clean up event listener
+      }
+    };
+  }, [htmlContent, cssContent, frontendAssets]);
+
+  return (
+    <div
+      className="render-preview-container"
+      style={{ width: '100%', minHeight: '100%' }}
+    >
+      <iframe
+        ref={iframeRef}
+        title="Preview"
+        className="editor-styles-wrapper"
+        width="100%"
+        height="100%"
+      />
+      {iframeBody &&
+        createPortal(
+          <div className="b_">
+            <div
+              className="b_utils"
+              dangerouslySetInnerHTML={{ __html: htmlContent }}
+            />
+          </div>,
+          iframeBody
+        )}
+    </div>
+  );
+};
+
+export default BitePreview;

package/src/Button.tsx

@@ -0,0 +1,60 @@
+import { Icon } from "./Icon";
+import { Button as WordpressButton } from "@wordpress/components";
+import classNames from "classnames";
+
+type ButtonProps = {
+  children?: React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+  display?: "icon" | "icon-lg" | "label" | "auto" | "" | null;
+  onClick?: () => void;
+  label?: string;
+  size?: "small" | "default" | "compact";
+  variant?: "primary" | "secondary" | "link" | "primary" | "tertiary";
+  icon?: any;
+  disabled?: boolean;
+};
+
+export const Button = ({
+  children,
+  size = "default",
+  label,
+  className,
+  onClick,
+  variant = "primary",
+  display = "auto",
+  icon,
+  disabled = false,
+}: ButtonProps) => {
+  const isIconDisplay = display === "icon" || display === "icon-lg";
+
+  return (
+    <WordpressButton
+      size={size}
+      variant={variant}
+      label={label}
+      showTooltip={true}
+      disabled={disabled}
+      className={classNames(
+        className,
+        "blockbite-ui__button",
+        "flex items-center justify-center gap-1",
+        { "is-primary": variant === "primary" },
+        { "is-secondary": variant === "secondary" },
+        { "is-link": variant === "link" },
+        { "is-tertiary": variant === "tertiary" },
+        { "is-icon": display === "icon" }
+      )}
+      onClick={onClick}
+    >
+      {icon && (
+        <Icon
+          icon={icon}
+          className={classNames({ "h-4 w-4": display === "icon-lg" })}
+        />
+      )}
+      {!isIconDisplay ? children : null}
+      {label && !children && !isIconDisplay ? <span>{label}</span> : null}
+    </WordpressButton>
+  );
+};

package/src/ButtonToggle.tsx

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+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>
+  );
+}