@blockbite/ui 1.0.5 → 2.0.1

package/src/Popover.tsx

@@ -1,68 +0,0 @@
-import Cross2Icon from '@blockbite/icons/dist/Cross2';
-import { Button, Popover as WordpressPopover } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
-
-type PopoverProps = {
-  children: React.ReactNode;
-  className?: string;
-  defaultValue?: string;
-  value?: string;
-  position?: any;
-  visible?: boolean;
-  onClick?: () => void;
-  onVisibleChange?: (value: boolean) => void;
-};
-
-export const Popover: React.FC<PopoverProps> = ({
-  children,
-  className,
-  position,
-  visible,
-  onClick,
-  onVisibleChange,
-}) => {
-  const [isVisible, setIsVisible] = useState<boolean>(!!visible);
-
-  useEffect(() => {
-    if (visible !== undefined) {
-      setIsVisible(visible);
-    }
-  }, [visible]);
-
-  const toggleVisible = () => {
-    const newValue = !isVisible;
-    setIsVisible(newValue);
-    onVisibleChange && onVisibleChange(newValue);
-  };
-
-  return (
-    <>
-      {isVisible && (
-        <WordpressPopover
-          position={position}
-          className="blockbite-ui__popover bb_"
-          onClick={onClick}
-          onFocusOutside={() => {
-            setIsVisible(false);
-            onVisibleChange && onVisibleChange(false);
-          }}
-        >
-          <div className={className}>
-            <div className="relative h-full w-full p-4">
-              <Button
-                onClick={toggleVisible}
-                size="small"
-                className="close-button absolute right-0 top-0"
-              >
-                <Cross2Icon />
-              </Button>
-              {children}
-            </div>
-          </div>
-        </WordpressPopover>
-      )}
-    </>
-  );
-};
-
-export default Popover;

package/src/RangeSlider.tsx

@@ -1,68 +0,0 @@
-import { Wrap } from "./Wrap";
-import { useEffect, useState } from "@wordpress/element";
-
-import { RangeControl as WordpressRangeControl } from "@wordpress/components";
-
-export type RangeControlType = {
-  defaultValue: string;
-  label: string;
-  min: number;
-  max: number;
-  withInputField?: boolean;
-  onValueChange: (value: string) => void;
-  gridMode?: boolean;
-  showTooltip?: boolean;
-  [key: string]: any;
-};
-
-const RangeControl: React.FC<RangeControlType> = ({
-  defaultValue,
-  label,
-  min = 0,
-  max = 2000,
-  withInputField = false,
-  onValueChange,
-  gridMode = false,
-  showTooltip = false,
-  ...props
-}) => {
-  const [resetFallbackValue] = useState(0);
-  const [rangeValue, setRangeValue] = useState<number>(0);
-
-  useEffect(() => {
-    setRangeValue(Math.round(parseInt(defaultValue) / (gridMode ? 16 : 1)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
-  /**
-   * Set the range slider values
-   * @param modifier
-   */
-
-  // convert back to arbitrary unit
-  function handleRangeUpdate(value: number) {
-    const gridValue = value * (gridMode ? 16 : 1);
-    onValueChange(gridValue.toString());
-  }
-
-  return (
-    <Wrap className="flex min-w-[240px] flex-col">
-      <WordpressRangeControl
-        label={label}
-        value={rangeValue}
-        min={min}
-        max={max}
-        showTooltip={showTooltip}
-        withInputField={withInputField}
-        onChange={(value) => {
-          setRangeValue(value);
-          handleRangeUpdate(value);
-        }}
-        resetFallbackValue={resetFallbackValue}
-        {...props}
-      />
-      <span>{gridMode ? `${rangeValue * 16}px` : null} </span>
-    </Wrap>
-  );
-};
-
-export default RangeControl;

package/src/ResponsiveImage.tsx

@@ -1,42 +0,0 @@
-export default function ResponsiveImage(props) {
-  const { media, mediaClass } = props;
-  const { url, alt, sizes } = media;
-
-  if (sizes === undefined) {
-    return <img src={url} alt={alt} className={`bf_media ${mediaClass}`} />;
-  }
-
-  const { thumbnail, medium, large } = sizes;
-  const thumbnailImg = thumbnail || url;
-  const mediumImg = medium || url;
-  const largeImg = large || url;
-
-  return (
-    <picture className="bf_responsive-media">
-      {thumbnailImg ? (
-        <source
-          media="(max-width: 768px)"
-          srcSet={thumbnailImg}
-          className={`bf_media ${mediaClass}`}
-        />
-      ) : null}
-      {mediumImg ? (
-        <source
-          media="(min-width: 1024px)"
-          srcSet={mediumImg}
-          className={`bf_media ${mediaClass}`}
-        />
-      ) : null}
-      {largeImg ? (
-        <source
-          media="(min-width: 1536px)"
-          srcSet={largeImg}
-          className={`bf_media ${mediaClass}`}
-        />
-      ) : null}
-      {mediumImg ? (
-        <img src={mediumImg} alt={alt} className={`bf_media ${mediaClass}`} />
-      ) : null}
-    </picture>
-  );
-}

package/src/ResponsiveVideo.tsx

@@ -1,20 +0,0 @@
-export default function ResponsiveVideo(props: any) {
-  const { media, mediaClass } = props;
-  const { url } = media;
-
-  const videoUrl = url;
-
-  return (
-    <video
-      className={`bf_responsive-media ${mediaClass}`}
-      preload="none"
-      playsInline
-      controls
-      autoPlay
-      muted
-      loop
-    >
-      <source src={videoUrl} type="video/mp4" />
-    </video>
-  );
-}

package/src/ScrollList.tsx

@@ -1,24 +0,0 @@
-import { Wrap } from "./Wrap";
-import classNames from "classnames";
-
-type ScrollListProps = {
-  children: React.ReactNode;
-  className?: string;
-  height?: "small" | "medium" | "large";
-};
-
-export const ScrollList: React.FC<ScrollListProps> = ({
-  children,
-  className = "",
-  height = "large",
-}) => (
-  <Wrap
-    className={classNames("scrollbar relative overflow-y-scroll", className, {
-      "h-[400px]": height === "large",
-      "h-[300px]": height === "medium",
-      "h-[200px]": height === "small",
-    })}
-  >
-    {children}
-  </Wrap>
-);

package/src/SectionList.tsx

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

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

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

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

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

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

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