@blockbite/ui 1.0.3 → 1.0.5

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

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