@basic-ui/core 0.0.31 → 0.0.34

package/src/Popper/Popper.story.tsx

@@ -0,0 +1,267 @@
+import { useRef, useState, useEffect } from 'react';
+import { useSpring, animated } from 'react-spring';
+import { storiesOf } from '@storybook/react';
+import { Popper } from './Popper';
+import { PopperArrow } from './PopperArrow';
+import './styles.css';
+
+const stories = storiesOf('Components/Popper', module);
+
+const noop = () => {
+  // noop function to be used on onRest, as a cleanup
+};
+
+const placements = [
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'left',
+  'left-start',
+  'left-end',
+];
+
+const Tooltip = ({ children, open, placement, anchorEl, showArrow }) => {
+  const [visible, setVisible] = useState(open);
+  const [animationProps, set] = useSpring(() => ({
+    opacity: open ? 1 : 0,
+  }));
+
+  const onRest = () => {
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      set({ opacity: 1, onRest: noop, delay: 0 });
+    } else {
+      set({ opacity: 0, onRest, delay: 0 });
+    }
+  }, [open, set]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Popper
+      anchorEl={anchorEl}
+      placement={placement}
+      usePortal={true}
+      distance={showArrow ? 8 : 0}
+      skidding={0}
+      style={{ zIndex: 1100 }}
+    >
+      <animated.div style={animationProps}>
+        <div
+          style={{
+            backgroundColor: '#fff',
+            boxShadow: '0 0 4px 1px rgba(187,187,187,0.7)',
+            padding: 8,
+          }}
+        >
+          {children}
+        </div>
+        {showArrow && <PopperArrow color="#f00" />}
+      </animated.div>
+    </Popper>
+  );
+};
+
+const PopperExample = ({ showAll = false, showArrow = false }) => {
+  const ref = useRef<any>(null);
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        minHeight: 2900,
+        backgroundColor: '#f5f5f5',
+        padding: 120,
+      }}
+    >
+      <div
+        ref={ref}
+        style={{
+          width: 350,
+          height: 350,
+          minWidth: 350,
+          minHeight: 350,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#c5afae',
+        }}
+        onMouseEnter={() => {
+          setOpen(true);
+        }}
+        onMouseLeave={() => {
+          setOpen(true);
+        }}
+      >
+        Cool div
+      </div>
+      {showAll ? (
+        placements.map((placement) => (
+          <Tooltip
+            anchorEl={ref}
+            key={`placement_${placement}`}
+            open={open}
+            showArrow={showArrow}
+            placement={placement}
+          >
+            {placement}
+          </Tooltip>
+        ))
+      ) : (
+        <Tooltip
+          anchorEl={ref}
+          open={open}
+          showArrow={showArrow}
+          placement="right-start"
+        >
+          right-start
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+function Menu() {
+  const ref = useRef<any>(null);
+  return (
+    <>
+      <div
+        ref={ref}
+        style={{
+          width: 64,
+          textAlign: 'center',
+          height: 32,
+          display: 'flex',
+          backgroundColor: '#cc8888',
+        }}
+      >
+        Menu
+      </div>
+      <Tooltip anchorEl={ref} open={true} showArrow={true} placement="bottom">
+        Some slightly bigger tooltip
+      </Tooltip>
+    </>
+  );
+}
+
+const PopperFixedExample = ({ showAll = false, showArrow = false }) => {
+  const ref = useRef<any>(null);
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          left: 0,
+          maxWidth: 230,
+          right: 230,
+          top: 0,
+          bottom: 0,
+          display: 'flex',
+          backgroundColor: '#f5f5f5',
+          overflow: 'hidden',
+          justifyContent: 'flex-end',
+          zIndex: 1000,
+        }}
+      >
+        <Menu />
+      </div>
+      <div style={{ paddingLeft: 560 }}>
+        <Menu />
+      </div>
+    </>
+  );
+};
+
+const JumpingPopper = () => {
+  const [currentPopperIndex, setCurrentPopperIndex] = useState(0);
+  const ref1 = useRef();
+  const ref2 = useRef();
+  const ref3 = useRef();
+  const allRefs = [ref1, ref2, ref3];
+
+  useEffect(() => {
+    const handler = setInterval(() => {
+      setCurrentPopperIndex((i) => i + 1);
+    }, 1000);
+
+    return () => {
+      clearInterval(handler);
+    };
+  }, []);
+
+  const currentPopperRef = allRefs[currentPopperIndex % allRefs.length];
+
+  return (
+    <>
+      <div>
+        <button ref={ref1} style={{ margin: 25 }}>
+          Button 1
+        </button>
+        <button ref={ref2} style={{ margin: 25 }}>
+          Button 2
+        </button>
+        <button ref={ref3} style={{ margin: 25 }}>
+          Button 3
+        </button>
+      </div>
+      {currentPopperRef && (
+        <Popper anchorEl={currentPopperRef}>Hello Popper</Popper>
+      )}
+    </>
+  );
+};
+
+const RerenderingPopper = () => {
+  const [value, setValue] = useState('');
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <div style={{ margin: 100 }}>
+      <button ref={ref}>Buy now</button>
+      <Popper anchorEl={ref}>
+        <div
+          style={{
+            padding: 24,
+            boxShadow: '0px 2px 10px rgba(0,0,0,0.12)',
+            backgroundColor: 'white',
+          }}
+        >
+          <input value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+      </Popper>
+    </div>
+  );
+};
+
+stories.add('Single point', () => <PopperExample />);
+
+stories.add('All points', () => <PopperExample showAll={true} />);
+
+stories.add('Single point, with arrow', () => (
+  <PopperExample showArrow={true} />
+));
+
+stories.add('All points, with arrow', () => (
+  <PopperExample showAll={true} showArrow={true} />
+));
+
+stories.add('Fixed popper, all points', () => (
+  <PopperFixedExample showAll={true} />
+));
+stories.add('Re-rendering popper', () => <RerenderingPopper />);
+stories.add('Jumping popper', () => <JumpingPopper />);

package/src/Popper/Popper.tsx

@@ -0,0 +1,149 @@
+import {
+  forwardRef,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  memo,
+} from 'react';
+import type * as React from 'react';
+import { assignMultipleRefs } from '../utils/assignRef';
+import { PopperProvider, PopperContextProps } from './context';
+import { Portal } from '../Portal';
+
+import {
+  Placement,
+  Modifier,
+  PositioningStrategy,
+  Instance,
+  Rect,
+  createPopper,
+} from '@popperjs/core';
+import type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';
+import type { ArrowModifier } from '@popperjs/core/lib/modifiers/arrow';
+
+const useEnhancedEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export type OffsetsFunction = (arg0: {
+  popper: Rect;
+  reference: Rect;
+  placement: Placement;
+}) => [number | null | undefined, number | null | undefined];
+
+export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  anchorEl: React.RefObject<HTMLElement>;
+  children?: React.ReactNode;
+  placement?: Placement;
+  strategy?: PositioningStrategy;
+  modifiers?: Array<Partial<Modifier<any, any>>>;
+  usePortal?: boolean;
+  portalSelector?: string;
+  /**
+   * Displaces the popper along the reference element.
+   */
+  skidding?: number;
+  /**
+   * Displaces the popper away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference.
+   */
+  distance?: number;
+  /**
+   * An optional function that must return a pair of [skidding, padding]. Useful for doing things like, displace the popper by 100%.
+   */
+  offsetFn?: OffsetsFunction;
+  /**
+   * If you don't want the arrow to reach the very edge of the popper (this is common if your popper has rounded corners using border-radius), you can apply some padding to it.
+   */
+  arrowPadding?: number;
+}
+
+const emptyModifiers: Array<Partial<Modifier<any, any>>> = [];
+export const Popper = memo(
+  forwardRef<HTMLDivElement, PopperProps>(function Popper(
+    {
+      placement = 'bottom',
+      strategy = 'absolute',
+      as: Comp = 'div',
+      innerAs,
+      anchorEl,
+      children,
+      modifiers = emptyModifiers,
+      usePortal = false,
+      style = {},
+      portalSelector = 'body',
+      distance = 0,
+      skidding = 0,
+      arrowPadding = 5,
+      offsetFn,
+      ...props
+    },
+    forwardedRef
+  ) {
+    const arrowRef = useRef<HTMLSpanElement>(null);
+
+    const popperRef = useRef<HTMLDivElement | null>(null);
+    const popperEngineInstance = useRef<null | Instance>(null);
+
+    const defaultModifiers: Array<Partial<Modifier<any, any>>> = useMemo(() => {
+      const arrowModifier: Omit<ArrowModifier, 'enabled' | 'fn' | 'phase'> = {
+        name: 'arrow',
+        options: {
+          element: '[data-popper-arrow]',
+          padding: arrowPadding,
+        },
+      };
+      const offsetModifier: Omit<OffsetModifier, 'enabled' | 'fn' | 'phase'> = {
+        name: 'offset',
+        options: {
+          offset: offsetFn ?? [skidding, distance],
+        },
+      };
+
+      return [arrowModifier, offsetModifier];
+    }, [arrowPadding, distance, skidding, offsetFn]);
+
+    useEnhancedEffect(() => {
+      if (anchorEl && anchorEl.current && popperRef.current) {
+        popperEngineInstance.current = createPopper(
+          anchorEl.current,
+          popperRef.current,
+          {
+            placement,
+            strategy,
+            modifiers: [...defaultModifiers, ...modifiers],
+          }
+        );
+      }
+
+      return () => {
+        popperEngineInstance.current && popperEngineInstance.current.destroy();
+        popperEngineInstance.current = null;
+      };
+    }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);
+
+    const contextValue: PopperContextProps = {
+      arrowRef,
+    };
+
+    const ret = (
+      <PopperProvider value={contextValue}>
+        <Comp
+          {...props}
+          as={innerAs}
+          ref={assignMultipleRefs(popperRef, forwardedRef)}
+          style={{ position: 'fixed', left: -5000, top: -5000, ...style }}
+        >
+          {children}
+        </Comp>
+      </PopperProvider>
+    );
+
+    if (usePortal) {
+      return <Portal selector={portalSelector}>{ret}</Portal>;
+    }
+
+    return ret;
+  })
+);

package/src/Popper/PopperArrow.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { usePopperContext } from './context';
+import { assignRef } from '../utils/assignRef';
+
+export interface PopperArrowProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+}
+
+export const PopperArrow = forwardRef<HTMLDivElement, PopperArrowProps>(
+  function PopperArrow({ as: Comp = 'div', ...props }, ref) {
+    const ctx = usePopperContext();
+
+    if (ctx === null) {
+      return null;
+    }
+
+    return (
+      <Comp
+        {...props}
+        ref={(node: HTMLDivElement | null) => {
+          if (node && ctx.arrowRef.current && ctx.arrowRef.current !== node) {
+            throw new Error(
+              'You can only render one <PopperArrow /> per <Popper> component'
+            );
+          }
+
+          assignRef(ref, node);
+          assignRef(ctx.arrowRef, node);
+        }}
+        data-popper-arrow=""
+      />
+    );
+  }
+);

package/src/Popper/context.ts

@@ -0,0 +1,9 @@
+import { createContext, MutableRefObject, useContext } from 'react';
+
+export interface PopperContextProps {
+  arrowRef: MutableRefObject<HTMLSpanElement | null>;
+}
+
+const context = createContext<PopperContextProps | null>(null);
+export const PopperProvider = context.Provider;
+export const usePopperContext = () => useContext(context);

package/src/Popper/index.ts

@@ -0,0 +1,3 @@
+export * from './Popper';
+export * from './PopperArrow';
+export * from './context';

package/src/Popper/styles.css

@@ -0,0 +1,60 @@
+[data-popper-arrow] {
+  box-sizing: border-box;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+[data-popper-arrow]::before {
+  /* Apply shadows as a pseudo element */
+  content: '';
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  box-shadow: 2px 2px 2px 0 rgba(187, 187, 187, 0.6);
+}
+
+/* Popper on top */
+[data-popper-placement^='top'] {
+  transform-origin: bottom center;
+}
+[data-popper-placement^='top'] [data-popper-arrow] {
+  bottom: -5px;
+}
+[data-popper-placement^='top'] [data-popper-arrow]::before {
+  transform: rotate(45deg);
+}
+
+/* Popper on bottom */
+[data-popper-placement^='bottom'] {
+  transform-origin: top center;
+}
+[data-popper-placement^='bottom'] [data-popper-arrow] {
+  top: -5px;
+}
+[data-popper-placement^='bottom'] [data-popper-arrow]::before {
+  transform: rotate(-135deg);
+}
+
+/* Popper on right */
+[data-popper-placement^='right'] {
+  transform-origin: left center;
+}
+[data-popper-placement^='right'] [data-popper-arrow] {
+  left: -5px;
+}
+[data-popper-placement^='right'] [data-popper-arrow]::before {
+  transform: rotate(135deg);
+}
+
+/* Popper on left */
+[data-popper-placement^='left'] {
+  transform-origin: right center;
+}
+[data-popper-placement^='left'] [data-popper-arrow] {
+  right: -5px;
+}
+[data-popper-placement^='left'] [data-popper-arrow]::before {
+  transform: rotate(-45deg);
+}

package/src/Portal/Portal.tsx

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface PortalProps {
+  children?: ReactNode;
+  selector?: string;
+}
+
+export const Portal: FC<PortalProps> = ({ children, selector = 'body' }) => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const dom = document.querySelector(selector);
+  if (dom) {
+    return createPortal(<div data-portal="">{children}</div>, dom);
+  }
+
+  return null;
+};

package/src/Portal/index.ts

@@ -0,0 +1 @@
+export * from './Portal';

package/src/RadioButton/RadioButton.story.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { RadioButton, RadioGroup } from './';
+import { storiesOf } from '@storybook/react';
+// import './styles.css';
+
+const Uncontrolled = (props: { initialValue?: string }) => {
+  return (
+    <RadioGroup defaultValue={props.initialValue}>
+      <label>
+        <RadioButton value="highly agree" />
+        Highly agree
+      </label>
+      <label>
+        <RadioButton value="agree" />
+        Agree
+      </label>
+      <label>
+        <RadioButton value="neutral" />
+        Neutral
+      </label>
+      <label>
+        <RadioButton value="disagree" />
+        Disagree
+      </label>
+      <label>
+        <RadioButton value="highly disagree" />
+        Highly disagree
+      </label>
+    </RadioGroup>
+  );
+};
+
+const Controlled = () => {
+  const [value, setValue] = useState(undefined);
+
+  return (
+    <RadioGroup
+      value={value}
+      onChange={(e, value) => {
+        setValue(value);
+      }}
+    >
+      <label>
+        <RadioButton value="highly agree" />
+        Highly agree
+      </label>
+      <label>
+        <RadioButton value="agree" />
+        Agree
+      </label>
+      <label>
+        <RadioButton value="neutral" />
+        Neutral
+      </label>
+      <label>
+        <RadioButton value="disagree" />
+        Disagree
+      </label>
+      <label>
+        <RadioButton value="highly disagree" />
+        Highly disagree
+      </label>
+    </RadioGroup>
+  );
+};
+
+const stories = storiesOf('Components/RadioButton', module);
+
+stories.add('uncontrolled', () => <Uncontrolled />);
+stories.add('uncontrolled, initial value set', () => (
+  <Uncontrolled initialValue={'highly disagree'} />
+));
+stories.add('controlled', () => <Controlled />);

package/src/RadioButton/RadioButton.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { RadioValue, useRadioGroupContext } from './context';
+import { wrapEvent } from '../utils';
+
+export interface RadioButtonProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  checked?: boolean;
+  value: RadioValue;
+}
+
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
+  function RadioButton(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      value: valueProp,
+      onChange: onChangeProp,
+      checked: checkedProp,
+      name: nameProp,
+      ...otherProps
+    } = props;
+    const radioGroupContext = useRadioGroupContext();
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      radioGroupContext?.onChange?.(e, valueProp);
+    };
+
+    const checked = radioGroupContext
+      ? radioGroupContext.value === valueProp
+      : checkedProp;
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        type="radio"
+        checked={checked}
+        aria-checked={String(checked)}
+        name={radioGroupContext ? radioGroupContext.name : nameProp}
+        onChange={wrapEvent(onChangeProp, handleChange)}
+        value={valueProp}
+        {...otherProps}
+      />
+    );
+  }
+);