@blockbite/ui 1.0.3 → 1.0.5

package/package.json

@@ -1,186 +1,19 @@
 {
   "name": "@blockbite/ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Shared React UI components for Blockbite apps",
   "author": "Blockbite",
   "license": "MIT",
   "private": false,
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "module": "src/index.js",
   "files": [
-    "dist"
+    "src/"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./AutocompleteDropdown": {
-      "import": "./dist/AutocompleteDropdown.js",
-      "types": "./dist/AutocompleteDropdown.d.ts"
-    },
-    "./Badge": {
-      "import": "./dist/Badge.js",
-      "types": "./dist/Badge.d.ts"
-    },
-    "./BitePreview": {
-      "import": "./dist/BitePreview.js",
-      "types": "./dist/BitePreview.d.ts"
-    },
-    "./Button": {
-      "import": "./dist/Button.js",
-      "types": "./dist/Button.d.ts"
-    },
-    "./ButtonToggle": {
-      "import": "./dist/ButtonToggle.js",
-      "types": "./dist/ButtonToggle.d.ts"
-    },
-    "./Chapter": {
-      "import": "./dist/Chapter.js",
-      "types": "./dist/Chapter.d.ts"
-    },
-    "./ChapterDivider": {
-      "import": "./dist/ChapterDivider.js",
-      "types": "./dist/ChapterDivider.d.ts"
-    },
-    "./Checkbox": {
-      "import": "./dist/Checkbox.js",
-      "types": "./dist/Checkbox.d.ts"
-    },
-    "./DisappearingMessage": {
-      "import": "./dist/DisappearingMessage.js",
-      "types": "./dist/DisappearingMessage.d.ts"
-    },
-    "./DropdownPicker": {
-      "import": "./dist/DropdownPicker.js",
-      "types": "./dist/DropdownPicker.d.ts"
-    },
-    "./EmptyState": {
-      "import": "./dist/EmptyState.js",
-      "types": "./dist/EmptyState.d.ts"
-    },
-    "./FloatingPanel": {
-      "import": "./dist/FloatingPanel.js",
-      "types": "./dist/FloatingPanel.d.ts"
-    },
-    "./FocalPointControl": {
-      "import": "./dist/FocalPointControl.js",
-      "types": "./dist/FocalPointControl.d.ts"
-    },
-    "./Icon": {
-      "import": "./dist/Icon.js",
-      "types": "./dist/Icon.d.ts"
-    },
-    "./LinkPicker": {
-      "import": "./dist/LinkPicker.js",
-      "types": "./dist/LinkPicker.d.ts"
-    },
-    "./MediaPicker": {
-      "import": "./dist/MediaPicker.js",
-      "types": "./dist/MediaPicker.d.ts"
-    },
-    "./MetricsControl": {
-      "import": "./dist/MetricsControl.js",
-      "types": "./dist/MetricsControl.d.ts"
-    },
-    "./Modal": {
-      "import": "./dist/Modal.js",
-      "types": "./dist/Modal.d.ts"
-    },
-    "./NewWindowPortal": {
-      "import": "./dist/NewWindowPortal.js",
-      "types": "./dist/NewWindowPortal.d.ts"
-    },
-    "./Notice": {
-      "import": "./dist/Notice.js",
-      "types": "./dist/Notice.d.ts"
-    },
-    "./PasswordInput": {
-      "import": "./dist/PasswordInput.js",
-      "types": "./dist/PasswordInput.d.ts"
-    },
-    "./Popover": {
-      "import": "./dist/Popover.js",
-      "types": "./dist/Popover.d.ts"
-    },
-    "./RangeSlider": {
-      "import": "./dist/RangeSlider.js",
-      "types": "./dist/RangeSlider.d.ts"
-    },
-    "./ResponsiveImage": {
-      "import": "./dist/ResponsiveImage.js",
-      "types": "./dist/ResponsiveImage.d.ts"
-    },
-    "./ResponsiveVideo": {
-      "import": "./dist/ResponsiveVideo.js",
-      "types": "./dist/ResponsiveVideo.d.ts"
-    },
-    "./ScrollList": {
-      "import": "./dist/ScrollList.js",
-      "types": "./dist/ScrollList.d.ts"
-    },
-    "./SectionList": {
-      "import": "./dist/SectionList.js",
-      "types": "./dist/SectionList.d.ts"
-    },
-    "./SelectControlWrapper": {
-      "import": "./dist/SelectControlWrapper.js",
-      "types": "./dist/SelectControlWrapper.d.ts"
-    },
-    "./SingleBlockTypeAppender": {
-      "import": "./dist/SingleBlockTypeAppender.js",
-      "types": "./dist/SingleBlockTypeAppender.d.ts"
-    },
-    "./SlideIn": {
-      "import": "./dist/SlideIn.js",
-      "types": "./dist/SlideIn.d.ts"
-    },
-    "./Spinner": {
-      "import": "./dist/Spinner.js",
-      "types": "./dist/Spinner.d.ts"
-    },
-    "./Tabs": {
-      "import": "./dist/Tabs.js",
-      "types": "./dist/Tabs.d.ts"
-    },
-    "./Tag": {
-      "import": "./dist/Tag.js",
-      "types": "./dist/Tag.d.ts"
-    },
-    "./TextControl": {
-      "import": "./dist/TextControl.js",
-      "types": "./dist/TextControl.d.ts"
-    },
-    "./TextControlLabel": {
-      "import": "./dist/TextControlLabel.js",
-      "types": "./dist/TextControlLabel.d.ts"
-    },
-    "./ToggleGroup": {
-      "import": "./dist/ToggleGroup.js",
-      "types": "./dist/ToggleGroup.d.ts"
-    },
-    "./ToggleSwitch": {
-      "import": "./dist/ToggleSwitch.js",
-      "types": "./dist/ToggleSwitch.d.ts"
-    },
-    "./Wrap": {
-      "import": "./dist/Wrap.js",
-      "types": "./dist/Wrap.d.ts"
-    }
-  },
   "scripts": {
-    "clean": "rm -rf dist",
     "dev": "vite",
-    "preview": "vite preview",
-    "lint": "eslint ./src --ext .ts,.tsx",
-    "type-check": "tsc --noEmit",
-    "types": "tsc --project tsconfig.build.json",
-    "generate:exports": "node generate-exports.js",
-    "build": "npm run clean && vite build && npm run types && npm run generate:exports"
+    "preview": "vite preview"
   },
   "peerDependencies": {
     "@blockbite/icons": "^4.4.7",
@@ -211,5 +44,11 @@
     "blockbite",
     "vite",
     "typescript"
-  ]
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  }
 }

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>
+  );
+};