@blockbite/ui 1.0.4 → 1.0.5

package/src/FloatingPanel.tsx

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

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

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

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

package/src/MediaPicker.tsx

@@ -0,0 +1,161 @@
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+
+import { Button, PanelRow } from '@wordpress/components';
+
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+export default function MediaPicker({ mediaProps, mediaCallback }) {
+  const allowedTypes = [
+    'image',
+    'video',
+    'image/svg+xml',
+    'svg',
+    'text/plain',
+    'application/json',
+  ];
+
+  // toggles
+  const [stateMedia, setStateMedia] = useState({
+    id: null,
+    url: '',
+    sizes: [],
+    alt: '',
+    type: '',
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (mediaProps) {
+      setStateMedia({ ...mediaProps });
+    }
+  }, [mediaProps]);
+
+  // image handlers
+  const removeMedia = () => {
+    const mediaObj = {
+      mediaId: 0,
+      mediaUrl: '',
+    };
+    mediaCallback({ ...mediaObj });
+  };
+  // onselect media
+  const onSelectMedia = (media) => {
+    const safeSizes = {
+      thumbnail: null,
+      medium: null,
+      large: null,
+    };
+
+    // Normalize Sizes
+    if (media?.sizes) {
+      Object.keys(media.sizes).map((key) => {
+        const sizeObject = media.sizes[key];
+
+        if (key === 'thumbnail') {
+          safeSizes.thumbnail = sizeObject.url;
+        } else if (sizeObject.width < 768 || sizeObject.height < 768) {
+          safeSizes.thumbnail = sizeObject.url;
+        }
+
+        if (key === 'medium') {
+          safeSizes.medium = sizeObject.url;
+        } else if (
+          (sizeObject.width > 1024 && sizeObject.width < 1024) ||
+          (sizeObject.height < 1536 && sizeObject.height > 1536)
+        ) {
+          safeSizes.medium = sizeObject.url;
+        }
+
+        if (key === 'large') {
+          safeSizes.large = sizeObject.url;
+        } else if (sizeObject.width > 1536 || sizeObject.height > 1536) {
+          safeSizes.large = sizeObject.url;
+        }
+
+        return null;
+      });
+    }
+
+    // if type ends .lottie then it is a lottie file
+    if (media.url.endsWith('.json')) {
+      media.type = 'lottie';
+    }
+    // if type ends with .svg then it is an svg file
+    if (media.url.endsWith('.svg')) {
+      media.type = 'svg';
+    }
+
+    const mediaObj = {
+      id: media.id,
+      url: media.url,
+      sizes: safeSizes,
+      alt: media.alt,
+      type: media.type,
+      width: media.width,
+      height: media.height,
+    };
+    mediaCallback({ ...mediaObj });
+  };
+
+  return (
+    <PanelRow>
+      {stateMedia.id !== null && (
+        <MediaUploadCheck>
+          <MediaUpload
+            onSelect={onSelectMedia}
+            value={stateMedia.id}
+            allowedTypes={allowedTypes}
+            render={({ open }) => (
+              <Button
+                className={
+                  stateMedia.id === 0
+                    ? 'editor-post-featured-image__toggle'
+                    : 'editor-post-featured-image__preview'
+                }
+                onClick={open}
+              >
+                {stateMedia.id === 0 && __('Choose Media', 'blockbite')}
+                {stateMedia.id && stateMedia.type === 'image' ? (
+                  <div className="blockbite--editor-visual-image">
+                    <img
+                      alt={
+                        stateMedia.alt
+                          ? stateMedia.alt
+                          : __('Image', 'blockbite')
+                      }
+                      src={stateMedia.url}
+                    />
+                  </div>
+                ) : (
+                  'Add media'
+                )}
+              </Button>
+            )}
+          />
+        </MediaUploadCheck>
+      )}
+      {stateMedia.id !== 0 && (
+        <MediaUploadCheck>
+          <MediaUpload
+            title={__('Replace media', 'blockbite')}
+            value={stateMedia.id}
+            onSelect={onSelectMedia}
+            allowedTypes={allowedTypes}
+            render={({ open }) => (
+              <Button onClick={open}>{__('Replace media', 'blockbite')}</Button>
+            )}
+          />
+        </MediaUploadCheck>
+      )}
+      {stateMedia.id !== 0 && (
+        <MediaUploadCheck>
+          <Button onClick={() => removeMedia()} isDestructive>
+            {__('Remove media', 'blockbite')}
+          </Button>
+        </MediaUploadCheck>
+      )}
+    </PanelRow>
+  );
+}

package/src/MetricsControl.tsx

@@ -0,0 +1,179 @@
+import ButtonToggleGroup from "./ButtonToggle";
+import { DropdownPicker } from "./DropdownPicker";
+import { Popover } from "./Popover";
+import RangeControl from "./RangeSlider";
+import { TextControl } from "./TextControl";
+import { Wrap } from "./Wrap";
+import { useEffect, useState } from "@wordpress/element";
+
+import ColumnSpacingIcon from "@blockbite/icons/dist/ColumnSpacing";
+import DesktopIcon from "@blockbite/icons/dist/Desktop";
+import GridIcon from "@blockbite/icons/dist/Grid";
+import PercentageIcon from "@blockbite/icons/dist/Percentage";
+import SliderIcon from "@blockbite/icons/dist/Slider";
+import TailwindUnitIcon from "@blockbite/icons/dist/Tailwind";
+import has from "lodash/has";
+
+type MetricsControlProps = {
+  defaultUnit: string;
+  defaultValue: string;
+  units?:
+    | string[]
+    | "native"
+    | "percent"
+    | "grid"
+    | "arbitrary"
+    | "fluid"
+    | "screen"
+    | "all";
+  inputClassName?: string;
+  onValueChange: (value: string) => void;
+  onUnitChange: (unit: string) => void;
+};
+
+const MetricsControl: React.FC<MetricsControlProps> = ({
+  defaultUnit,
+  defaultValue,
+  onValueChange,
+  onUnitChange,
+  inputClassName = "w-[75px]",
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [currentOptions, setCurrentOptions] = useState<string[]>([]);
+
+  // Use local state for defaultUnit and defaultValue
+  const [unit, setUnit] = useState(defaultUnit);
+  const [value, setValue] = useState<string>("");
+  const [resetValue, setResetValue] = useState<string | number>(defaultValue);
+
+  // Set initial state from props
+  useEffect(() => {
+    if (defaultUnit) {
+      setUnit(defaultUnit);
+    }
+    if (defaultValue) {
+      setValue(defaultValue.toString());
+    }
+  }, [defaultUnit, defaultValue]);
+
+  // Save last value after popover close to support "reset" functionality
+  // Only apply to arbitrary units
+  useEffect(() => {
+    if (!isVisible && unit === "arbitrary") {
+      setResetValue(value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVisible]);
+
+  const showOptions = (u: string) => {
+    if (u !== "arbitrary" && has(bb.codex.units.spacing, u)) {
+      const options =
+        bb.codex.units.spacing[u as keyof typeof bb.codex.units.spacing];
+      setCurrentOptions(
+        Array.isArray(options) ? options : Object.keys(options)
+      );
+    } else {
+      setCurrentOptions([]);
+    }
+    setIsVisible(true);
+  };
+
+  const unitOptions = [
+    {
+      icon: <TailwindUnitIcon />,
+      label: "Tailwind CSS Units",
+      value: "native",
+    },
+    { icon: <PercentageIcon />, label: "Percentage Units", value: "percent" },
+    { icon: <GridIcon />, label: "Grid Units", value: "grid" },
+    { icon: <DesktopIcon />, label: "Screen Units", value: "screen" },
+    { icon: <SliderIcon />, label: "Pixel Units", value: "arbitrary" },
+    { icon: <ColumnSpacingIcon />, label: "Fluid Units", value: "fluid" },
+  ];
+
+  return (
+    <Wrap className="relative flex flex-col items-baseline">
+      <TextControl
+        inputClassName={inputClassName}
+        defaultValue={
+          // Remove the "b_" prefix for grid units
+          unit === "grid" ? value.replace("b_", "") : value
+        }
+        onClick={() => unit !== "arbitrary" && showOptions(unit)}
+        onChange={(newValue) => {
+          setValue(newValue);
+          onValueChange(newValue);
+        }}
+        readOnly={unit !== "arbitrary"}
+      >
+        <Popover
+          visible={isVisible}
+          position="bottom left"
+          className="w-[300px] bg-white shadow-sm"
+          onVisibleChange={setIsVisible}
+        >
+          {unit === "arbitrary" ? (
+            <RangeControl
+              defaultValue={value}
+              label="Pixel Value"
+              min={0}
+              max={100}
+              gridMode={true}
+              showTooltip={false}
+              allowReset={true}
+              resetFallbackValue={
+                isNaN(resetValue.toString() as any)
+                  ? 0
+                  : Number(resetValue) / 16
+              }
+              onValueChange={(newValue: string) => {
+                setValue(newValue);
+                onValueChange(newValue);
+              }}
+            />
+          ) : (
+            <ButtonToggleGroup
+              className="mt-4"
+              options={currentOptions.map((option) => ({
+                value: option,
+                label:
+                  unit === "grid"
+                    ? option.toString().replace("b_", "")
+                    : option,
+                onClick: () => {
+                  setValue(option);
+                  onValueChange(option);
+                },
+              }))}
+              size="small"
+              defaultPressed={value?.toString() || ""}
+              onPressedChange={(newValue: string) => {
+                setValue(newValue);
+                onValueChange(newValue);
+              }}
+            />
+          )}
+        </Popover>
+
+        <DropdownPicker
+          className="h-[32px]"
+          defaultValue={unit}
+          options={unitOptions}
+          onPressedChange={(selectedUnit) => {
+            if (selectedUnit === "reset") {
+              setValue("");
+              onValueChange("");
+              setIsVisible(false);
+            } else {
+              setUnit(selectedUnit);
+              onUnitChange(selectedUnit);
+              showOptions(selectedUnit);
+            }
+          }}
+        />
+      </TextControl>
+    </Wrap>
+  );
+};
+
+export default MetricsControl;