@blockbite/ui 1.0.4 → 1.0.5

package/src/SectionList.tsx

@@ -0,0 +1,166 @@
+import { Wrap } from "./Wrap";
+import { Button } from "@wordpress/components";
+import { useRef, useState } from "@wordpress/element";
+
+import { TextControl } from "./TextControl";
+import classNames from "classnames";
+
+import PlusIcon from "@blockbite/icons/dist/Plus";
+import TrashIcon from "@blockbite/icons/dist/Trash";
+
+type SectionTypeProps = {
+  id: string;
+  name: string;
+  ref?: any;
+  code?: string;
+  content?: any;
+};
+
+type SectionListProps = {
+  sections: SectionTypeProps[];
+  setSections: React.Dispatch<React.SetStateAction<any[]>>;
+  activeSection: any;
+  setActiveSection: any;
+  Update: any;
+  newSection: any;
+  setCode: (code: string) => void;
+  addons?: JSX.Element;
+};
+
+const SectionList = ({
+  sections,
+  setSections,
+  activeSection,
+  setActiveSection,
+  Update,
+  newSection,
+  setCode,
+  addons,
+}: SectionListProps) => {
+  const [renameSection, setRenameSection] = useState({
+    id: "",
+    name: "",
+  });
+  const textFieldRef = useRef<HTMLInputElement | null>(null);
+
+  const addSection = () => {
+    const createNewSection = { ...newSection() };
+    setSections([...sections, createNewSection]);
+  };
+
+  const removeSection = () => {
+    if (!activeSection || sections.length === 0) return;
+
+    const newSections = sections.filter(
+      (section) => section.id !== activeSection
+    );
+
+    let newActiveSection = null;
+
+    if (newSections.length > 0) {
+      // If we're not deleting the last section
+      const currentIndex = sections.findIndex((s) => s.id === activeSection);
+      const nextIndex = Math.min(currentIndex, newSections.length - 1);
+      newActiveSection = newSections[nextIndex]?.id || newSections[0]?.id;
+    } else {
+      // If we're deleting the last section, create a new one
+      const createNewSection = { ...newSection() };
+      newSections.push(createNewSection);
+      newActiveSection = createNewSection.id;
+    }
+
+    setSections(newSections);
+    setActiveSection(newActiveSection);
+    setCode(newSections.find((s) => s.id === newActiveSection)?.code || "");
+  };
+
+  const onBlurHandler = (value) => {
+    setSections((prevSections: SectionTypeProps[]) =>
+      prevSections.map(
+        (section: SectionTypeProps): SectionTypeProps =>
+          section.id === renameSection.id
+            ? { ...section, name: value }
+            : section
+      )
+    );
+
+    setRenameSection({
+      id: "",
+      name: "",
+    });
+  };
+
+  return (
+    <Wrap important className="w-[200px] border-r">
+      <ul className="h-[calc(100%-80px)] divide-y overflow-auto">
+        {addons}
+        <li>
+          <ul className="divide-y border-b">
+            {sections.map((section, index) => (
+              <li
+                key={`section__${index}__${section?.id}`}
+                className="relative m-0"
+              >
+                <button
+                  className={classNames(
+                    "text-gray-medium w-full truncate bg-opacity-50 px-3 py-2 text-left text-sm/6 font-semibold hover:bg-easy hover:text-wordpress",
+                    {
+                      "bg-easy": section.id === activeSection,
+                    }
+                  )}
+                  onClick={() => {
+                    setActiveSection(section.id);
+                    Update(activeSection, section.id);
+                  }}
+                  onDoubleClick={() => {
+                    setRenameSection({
+                      id: section.id,
+                      name: section.name,
+                    });
+                  }}
+                >
+                  {section.name}
+                </button>
+
+                {renameSection.id === section.id && (
+                  <TextControl
+                    className="absolute left-0 top-0 h-full w-full"
+                    defaultValue={renameSection.name}
+                    onChange={(value) =>
+                      setRenameSection({
+                        ...renameSection,
+                        name: value,
+                      })
+                    }
+                    ref={textFieldRef}
+                    onBlur={(value) => onBlurHandler(value)}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+        </li>
+      </ul>
+      <Wrap className="flex justify-center gap-2 p-2">
+        <Button
+          onClick={addSection}
+          icon={<PlusIcon />}
+          variant="tertiary"
+          size="compact"
+        >
+          Add
+        </Button>
+        <Button
+          onClick={removeSection}
+          icon={<TrashIcon />}
+          variant="tertiary"
+          size="compact"
+        >
+          Remove
+        </Button>
+      </Wrap>
+    </Wrap>
+  );
+};
+
+export default SectionList;

package/src/SelectControlWrapper.tsx

@@ -0,0 +1,47 @@
+import { SelectControl as WordpressSelect } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+
+type SelectControlWrapperProps = {
+  className?: string;
+  defaultValue: string;
+  children?: React.ReactNode;
+  options: any[];
+  label?: string;
+  onChange?: (value: string) => void;
+};
+
+export const SelectControlWrapper = ({
+  onChange,
+  className,
+  defaultValue,
+  options,
+  label = '',
+}: SelectControlWrapperProps) => {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    setValue(defaultValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleChange = (val: string) => {
+    setValue(val);
+    if (onChange) {
+      onChange(val);
+    }
+  };
+
+  return (
+    <div className={className}>
+      {options && options.length > 0 && (
+        <WordpressSelect
+          label={label || ''}
+          value={value || ''}
+          onChange={handleChange}
+          options={[{ value: '', label: 'Select an option' }, ...options]}
+        />
+      )}
+      {!options && <p>No options available</p>}
+    </div>
+  );
+};

package/src/SingleBlockTypeAppender.tsx

@@ -0,0 +1,37 @@
+import { createBlock } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+
+const { select, dispatch } = wp.data;
+
+interface SingleBlockTypeAppenderProps {
+  buttonText?: string;
+}
+
+const SingleBlockTypeAppender = ({
+  buttonText = 'Add block',
+}: SingleBlockTypeAppenderProps) => {
+  const addLastDuplicate = () => {
+    // Get the current block
+    const currentBlock = select('core/block-editor').getSelectedBlock();
+    const { clientId, innerBlocks } = currentBlock;
+
+    // get the last block
+    const lastBlock = innerBlocks[innerBlocks.length - 1];
+    // duplicate the last block
+    const newBlock = createBlock(
+      lastBlock.name,
+      lastBlock.attributes,
+      lastBlock.innerBlocks
+    );
+
+    dispatch('core/block-editor').insertBlocks(newBlock, 0, clientId);
+  };
+
+  return (
+    <Button variant="primary" onClick={() => addLastDuplicate()}>
+      {buttonText}
+    </Button>
+  );
+};
+
+export default SingleBlockTypeAppender;

package/src/SlideIn.tsx

@@ -0,0 +1,34 @@
+import { Wrap } from "./Wrap";
+import { useEffect, useState } from "@wordpress/element";
+import classNames from "classnames";
+
+type SlideInProps = {
+  children: React.ReactNode;
+  className?: string;
+  watch?: any;
+};
+
+export const SlideIn = ({ children, watch, className }: SlideInProps) => {
+  const [slide, setSlide] = useState(0);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setSlide(1);
+    }, 250);
+  }, [watch]);
+
+  return (
+    <Wrap
+      className={classNames(
+        className,
+        "duration-50 transform transition-all ease-in-out",
+        {
+          "translate-x-0": slide === 1,
+          "-translate-x-full": slide === 0,
+        }
+      )}
+    >
+      {children}
+    </Wrap>
+  );
+};

package/src/Spinner.tsx

@@ -0,0 +1,24 @@
+import { Spinner as WordpressSpinner } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import classNames from 'classnames';
+
+type SpinnerProps = {
+  label?: string;
+  className?: string;
+  defaultValue: boolean;
+};
+
+export const Spinner = ({ className, defaultValue }: SpinnerProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    if (defaultValue) {
+      setIsLoading(true);
+    }
+  }, [isLoading, defaultValue]);
+
+  return isLoading && <WordpressSpinner className={classNames(className)} />;
+};

package/src/Tabs.tsx

@@ -0,0 +1,102 @@
+import { Wrap } from "./Wrap";
+import { TabPanel } from "@wordpress/components";
+import { createContext, useContext, useState } from "@wordpress/element";
+import classNames from "classnames";
+
+const TabsContext = createContext<{
+  activeTab: string | undefined;
+  setActiveTab: React.Dispatch<React.SetStateAction<string | undefined>>;
+} | null>(null);
+
+type TabsProps = {
+  className?: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children?: React.ReactNode;
+};
+
+export const TabsWrapper = ({
+  children,
+  defaultValue,
+  value,
+  onValueChange,
+  ...rest
+}: TabsProps) => {
+  const isControlled = value !== undefined;
+
+  const [internalValue, setInternalValue] = useState(defaultValue || "");
+
+  const activeTab = isControlled ? value : internalValue;
+
+  const handleTabChange = (newValue: string) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+
+    if (onValueChange) {
+      onValueChange(newValue);
+    }
+  };
+
+  const providerValue = {
+    activeTab,
+    setActiveTab: handleTabChange,
+  };
+
+  return (
+    <TabsContext.Provider value={providerValue}>
+      <Wrap important className={rest.className}>
+        {children}
+      </Wrap>
+    </TabsContext.Provider>
+  );
+};
+
+type TabsListProps = {
+  options: { name: string; title: string; icon?: any }[];
+  children?: React.ReactNode;
+  onValueChange?: (value: string) => void;
+  className?: string;
+};
+
+export const TabsList = ({
+  options,
+  children,
+  className,
+  onValueChange,
+}: TabsListProps) => {
+  const context = useContext(TabsContext);
+  const setActiveTab = onValueChange ? onValueChange : context?.setActiveTab;
+
+  return (
+    <TabPanel
+      className={classNames("tabs-list", className)}
+      tabs={options}
+      onSelect={(tabName) => {
+        setActiveTab(tabName);
+      }}
+    >
+      {() => children}
+    </TabPanel>
+  );
+};
+
+type TabsContentProps = {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const TabsContent = ({
+  value,
+  children,
+  className,
+}: TabsContentProps) => {
+  const context = useContext(TabsContext);
+  const activeTab = context?.activeTab;
+
+  return activeTab === value ? (
+    <Wrap className={className}>{children}</Wrap>
+  ) : null;
+};

package/src/Tag.tsx

@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+
+type TagProps = {
+  children: React.ReactNode;
+  className?: string;
+  color:
+    | 'blue'
+    | 'ruby'
+    | 'tomato'
+    | 'red'
+    | 'crimson'
+    | 'pink'
+    | 'plum'
+    | 'purple'
+    | 'violet'
+    | 'iris'
+    | 'indigo'
+    | 'cyan'
+    | 'teal'
+    | 'jade'
+    | 'green'
+    | 'grass'
+    | 'brown'
+    | 'orange'
+    | 'sky'
+    | 'gray';
+  asButton?: boolean;
+  onClick?: () => void;
+};
+
+export const Tag = ({
+  children,
+  onClick,
+  color = 'blue',
+  className,
+}: TagProps) => {
+  return (
+    <button onClick={onClick}>
+      <div color={color} className={classNames(className)}>
+        {children}
+      </div>
+    </button>
+  );
+};

package/src/TextControl.tsx

@@ -0,0 +1,74 @@
+import { Wrap } from "./Wrap";
+import { forwardRef } from "@wordpress/element";
+import classNames from "classnames";
+
+type TextControlProps = {
+  className?: string;
+  inputClassName?: string;
+  defaultValue: any;
+  children?: React.ReactNode;
+  onChange?: (value: string) => void;
+  onClick?: () => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  onBlur?: (value) => void;
+  type?: string;
+  label?: string;
+  helper?: string;
+};
+
+export const TextControl = forwardRef<HTMLInputElement, TextControlProps>(
+  (
+    {
+      onClick,
+      onChange,
+      className,
+      defaultValue,
+      children,
+      inputClassName,
+      readOnly,
+      placeholder,
+      onBlur,
+      type = "text",
+      label,
+      helper = "",
+    },
+    ref
+  ) => {
+    const fieldId = `text-control-${Math.random()
+      .toString(36)
+      .substring(2, 15)}`;
+
+    return (
+      <Wrap className={classNames("flex items-center p-0", className)}>
+        {label ? (
+          <label htmlFor={fieldId} className="text-primary !m-0 !mb-0 !mr-2">
+            {label}
+          </label>
+        ) : null}
+        <input
+          id={fieldId}
+          className={classNames(
+            "border-primary !m-0 !mb-0 h-[32px] !rounded-none border border-opacity-70 focus:outline-none focus:ring-0",
+            inputClassName
+          )}
+          type={type}
+          value={defaultValue}
+          placeholder={placeholder}
+          onFocus={() => onClick && onClick()}
+          onBlur={(e) => {
+            if (onClick) onClick();
+            if (onBlur) onBlur(e.target.value);
+          }}
+          onChange={(e) => onChange && onChange(e.target.value)}
+          readOnly={readOnly}
+          ref={ref}
+        />
+        <span>{children}</span>
+        {helper && <p className="text-primary !m-0 !mb-0 text-xs">{helper}</p>}
+      </Wrap>
+    );
+  }
+);
+
+TextControl.displayName = "TextControl"; // Recommended for debugging

package/src/TextControlLabel.tsx

@@ -0,0 +1,27 @@
+import Pencil1Icon from "@blockbite/icons/dist/Pencil1";
+import { Wrap } from "./Wrap";
+import { TextControl } from "@wordpress/components";
+
+type TextControlLabelProps = {
+  className?: string;
+  defaultValue: any;
+  children?: React.ReactNode;
+  onChange?: (value: string) => void;
+  onClick?: () => void;
+};
+
+export const TextControlLabel = ({
+  onChange,
+  defaultValue,
+  children,
+}: TextControlLabelProps) => {
+  return (
+    <Wrap className="blockbite-ui__text-control-label flex items-center">
+      <span className="outline-b-2 relative block -outline-offset-2 outline-black">
+        <TextControl type="text" value={defaultValue} onChange={onChange} />
+        <Pencil1Icon className="absolute right-1 top-2" />
+      </span>{" "}
+      {children}
+    </Wrap>
+  );
+};

package/src/ToggleGroup.tsx

@@ -0,0 +1,72 @@
+import { Wrap } from "./Wrap";
+import { memo, useEffect, useState } from "@wordpress/element";
+
+import {
+  __experimentalToggleGroupControlOptionIcon as ToggleGroupControlIcon,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  __experimentalToggleGroupControl as WordpressToggleGroupControl,
+} from "@wordpress/components";
+import classNames from "classnames";
+
+type ToggleProps = {
+  className?: string;
+  options: { value: string; label: string; icon?: React.ReactElement }[];
+  defaultPressed: string;
+  label?: string | boolean;
+  variant?: "primary" | "secondary";
+  display?: "icon" | "label";
+  size?: "small" | "default" | "compact";
+  onPressedChange: (value: string) => void;
+};
+
+const ToggleGroup: React.FC<ToggleProps> = memo(
+  ({
+    className,
+    options,
+    defaultPressed,
+    display = "label",
+    label = false,
+    onPressedChange,
+  }) => {
+    const [isPressed, setIsPressed] = useState<string>("");
+
+    const handlePressChange = (value: string) => {
+      onPressedChange(value);
+    };
+
+    useEffect(() => {
+      setIsPressed(defaultPressed);
+    }, [defaultPressed]);
+
+    return (
+      <Wrap className={classNames(className)}>
+        <WordpressToggleGroupControl
+          isBlock
+          value={isPressed}
+          label={typeof label === "string" ? label : ""}
+        >
+          {options.map((option) =>
+            display === "icon" ? (
+              <ToggleGroupControlIcon
+                icon={option.icon}
+                label={option.label}
+                key={`ToggleGroupControlIcon-${option.value}`}
+                value={option.value}
+                onClick={() => handlePressChange(option.value)}
+              />
+            ) : (
+              <ToggleGroupControlOption
+                key={`ToggleGroupControlOption-${option.value}`}
+                value={option.value}
+                label={option.label}
+                onClick={() => handlePressChange(option.value)}
+              />
+            )
+          )}
+        </WordpressToggleGroupControl>
+      </Wrap>
+    );
+  }
+);
+
+export { ToggleGroup };

package/src/ToggleSwitch.tsx

@@ -0,0 +1,37 @@
+import { Wrap } from "./Wrap";
+import { ToggleControl as Switch } from "@wordpress/components";
+import { useEffect, useState } from "@wordpress/element";
+import classNames from "classnames";
+
+type ToggleSwitchProps = {
+  label?: string;
+  className?: string;
+  onChange?: (checked: boolean) => void;
+  checked?: boolean;
+};
+
+export const ToggleSwitch = ({
+  label,
+  className,
+  onChange,
+  checked = false, // Default to false if undefined, so it's always controlled
+}: ToggleSwitchProps) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
+  return (
+    <Wrap className={classNames(className, "flex items-center gap-2")}>
+      <Switch
+        checked={isChecked}
+        label={label}
+        onChange={(e) => {
+          setIsChecked(e);
+          onChange && onChange(e);
+        }}
+      ></Switch>
+    </Wrap>
+  );
+};

package/src/Wrap.tsx

@@ -0,0 +1,23 @@
+type WrapProps = {
+  children: React.ReactNode;
+  className?: string;
+  important?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export const Wrap = ({
+  children,
+  className,
+  important = false,
+  onClick,
+}: WrapProps) => {
+  if (important) {
+    return (
+      <div className="bb_" onClick={onClick}>
+        <div className={className}>{children}</div>
+      </div>
+    );
+  }
+
+  return <div className={className}>{children}</div>;
+};