@basic-ui/core 0.0.29 → 0.0.33

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.29",
+  "version": "0.0.33",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
-  "private": false,
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",
   "jsnext:main": "./build/esm/index.js",
   "types": "./build/esm/index.d.ts",
   "files": [
-    "/build"
+    "/build",
+    "/src"
   ],
   "sideEffects": false,
   "scripts": {
@@ -19,7 +19,7 @@
     "build:cjs": "rollup -c ../../rollup.config.js",
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
     "build-storybook": "build-storybook -c ../../scripts/storybook -o .out",
-    "storybook": "start-storybook -p 9001 -c ../../scripts/storybook",
+    "storybook": "yarn run -T start-storybook -p 9001 -c ../../scripts/storybook",
     "start": "yarn run storybook",
     "serve": "http-server .out",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
@@ -36,5 +36,5 @@
     "react": ">=16.14.0 || >=17.0.0",
     "react-dom": ">=16.14.0 || >=17.0.0"
   },
-  "gitHead": "7a2cdc77b408052bb1d30301905c3b0e5c39f1dc"
+  "gitHead": "5aa740f6686e8ed8b633d4e0d173a6dd91d28bef"
 }

package/src/Accordion/Accordion.story.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './';
+import { storiesOf } from '@storybook/react';
+import './styles.css';
+
+const stories = storiesOf('Components/Accordion', module);
+
+function AccordionControlled() {
+  const [expandedId, setExpandedId] = useState(0);
+
+  return (
+    <Accordion
+      expandedIndex={expandedId}
+      onChange={(e, idx) => setExpandedId(idx)}
+    >
+      <AccordionItem>
+        <AccordionHeader>Personal information</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="name" />
+          <input type="text" placeholder="email" />
+          <input type="text" placeholder="phone" />
+          <input type="text" placeholder="extension" />
+          <input type="text" placeholder="country" />
+        </AccordionBody>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>Billing address</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="address" />
+          <input type="text" placeholder="address 2" />
+          <input type="text" placeholder="city" />
+          <input type="text" placeholder="state" />
+          <input type="text" placeholder="zip code" />
+        </AccordionBody>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>Shipping address</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="address" />
+          <input type="text" placeholder="address 2" />
+          <input type="text" placeholder="city" />
+          <input type="text" placeholder="state" />
+          <input type="text" placeholder="zip code" />
+        </AccordionBody>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+function SingleAccordionItem() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <AccordionItem
+      expanded={expanded}
+      onChange={(e, value) => setExpanded(value)}
+    >
+      <AccordionHeader>Personal information</AccordionHeader>
+      <AccordionBody>
+        <input type="text" placeholder="name" />
+        <input type="text" placeholder="email" />
+        <input type="text" placeholder="phone" />
+        <input type="text" placeholder="extension" />
+        <input type="text" placeholder="country" />
+      </AccordionBody>
+    </AccordionItem>
+  );
+}
+
+stories.add('controlled', () => <AccordionControlled />);
+
+stories.add('single accordion, controlled', () => <SingleAccordionItem />);

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useRef, useState } from 'react';
+import type * as React from 'react';
+import { AccordionContextProps, AccordionProvider } from './context';
+import { useScope } from '../hooks';
+import { assignMultipleRefs } from '../utils';
+
+export interface AccordionProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  expandedIndex?: number;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    index: number
+  ) => void;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  function Accordion(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      expandedIndex = -1,
+      onChange,
+      ...otherProps
+    } = props;
+    const [childrenHeaderHasFocus, setChildrenHeaderHasFocus] = useState(false);
+    const ref = useRef<HTMLDivElement>();
+
+    const scope = useScope(ref);
+
+    const contextValue: AccordionContextProps = {
+      childrenHeaderHasFocus,
+      setChildrenHeaderHasFocus,
+      scope,
+      expandedIndex,
+      onChange,
+    };
+
+    return (
+      <AccordionProvider value={contextValue}>
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, ref)}
+          {...otherProps}
+          data-accordion-root=""
+          data-children-has-focus={childrenHeaderHasFocus}
+        />
+      </AccordionProvider>
+    );
+  }
+);

package/src/Accordion/AccordionBody.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, useState, useEffect, useRef } from 'react';
+import type * as React from 'react';
+import { useAccordionItemContext, useAccordionContext } from './context';
+import { bodyScopeQuery as scopeQuery } from './scopeQuery';
+import { assignMultipleRefs } from '../utils';
+
+export interface AccordionBodyProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+}
+
+export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
+  function AccordionBody(props, forwardedRef) {
+    const { as: Comp = 'div', ...otherProps } = props;
+    const accordionItemContext = useAccordionItemContext();
+    const accordionContext = useAccordionContext();
+    const ref = useRef<HTMLDivElement>();
+    const [index, setIndex] = useState<number>();
+
+    if (!accordionItemContext) {
+      throw new Error('Missing parent <Accordion /> component');
+    }
+
+    useEffect(() => {
+      if (accordionContext) {
+        const allHeaders = accordionContext.scope.current.queryAllNodes(
+          scopeQuery
+        );
+
+        const index = allHeaders.findIndex((e) => e === ref.current);
+        setIndex(index);
+      }
+    }, [accordionContext]);
+
+    const expanded = Boolean(
+      accordionItemContext.expanded ||
+        (accordionContext && accordionContext.expandedIndex === index)
+    );
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(forwardedRef, ref)}
+        {...otherProps}
+        aria-labelledby={accordionItemContext.headerId}
+        id={accordionItemContext.bodyId}
+        role="region"
+        data-accordion-body=""
+        hidden={expanded ? undefined : 'hidden'}
+      />
+    );
+  }
+);

package/src/Accordion/AccordionHeader.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import type * as React from 'react';
+import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
+import { useAccordionContext, useAccordionItemContext } from './context';
+import { headerScopeQuery as scopeQuery } from './scopeQuery';
+
+export interface AccordionHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
+  function AccordionHeader(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      onKeyDown,
+      onClick: onClickProp,
+      onFocus,
+      onBlur,
+      ...otherProps
+    } = props;
+    const accordionContext = useAccordionContext();
+    const accordionItemContext = useAccordionItemContext();
+    const ref = useRef<HTMLDivElement>();
+    const [index, setIndex] = useState<number | undefined>();
+
+    if (!accordionItemContext) {
+      throw new Error('Missing parent <Accordion /> component');
+    }
+
+    useEffect(() => {
+      if (accordionContext) {
+        const allHeaders =
+          accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
+
+        const index = allHeaders.findIndex((e) => e === ref.current);
+        setIndex(index);
+      }
+    }, [accordionContext]);
+
+    const onClick = wrapEvent(
+      onClickProp,
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        let index = 0;
+        if (accordionItemContext.expanded) {
+          index = -1;
+        } else if (accordionContext) {
+          const allHeaders =
+            accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
+
+          index = allHeaders.findIndex((e) => e === ref.current);
+          if (index === accordionContext.expandedIndex) {
+            index = -1;
+          }
+          accordionContext.onChange && accordionContext.onChange(e, index);
+        }
+
+        accordionItemContext.onChange &&
+          accordionItemContext.onChange(e, index >= 0);
+      }
+    );
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      switch (e.key) {
+        case 'Enter':
+        case ' ': {
+          onClick((e as unknown) as React.MouseEvent<HTMLDivElement>);
+          e.preventDefault();
+          break;
+        }
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'Home':
+        case 'End': {
+          if (!accordionContext) {
+            return;
+          }
+          const allHeaders = accordionContext.scope.current.queryAllNodes(
+            scopeQuery
+          );
+
+          e.preventDefault();
+
+          if (allHeaders.length === 0) {
+            return;
+          }
+
+          let nextIndex = allHeaders.findIndex((e) => e === ref.current);
+          switch (e.key) {
+            case 'ArrowUp':
+              nextIndex += -1;
+              break;
+            case 'ArrowDown':
+              nextIndex += +1;
+              break;
+            case 'Home':
+              nextIndex = 0;
+              break;
+            case 'End':
+              nextIndex = -1;
+              break;
+          }
+
+          // We're sure it will not be null, because we already checked for allHeaders.length > 0 above
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          nextIndex = getCircularIndex(nextIndex, allHeaders.length)!;
+          allHeaders[nextIndex] && allHeaders[nextIndex].focus();
+          break;
+        }
+        default:
+          return;
+      }
+    };
+
+    const handleFocus = () => {
+      if (accordionContext) {
+        if (!accordionContext.childrenHeaderHasFocus) {
+          // this is needed to avoid rerendering the parent and
+          // messing up with the internal count for children/parent count
+          accordionContext.setChildrenHeaderHasFocus(true);
+        }
+      }
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+      if (accordionContext) {
+        const allHeaders = accordionContext.scope.current.queryAllNodes(
+          scopeQuery
+        );
+        const newFocusIsHeader =
+          allHeaders.findIndex((header) => header === e.relatedTarget) >= 0;
+
+        // only remove focus flag if the focus went to some element
+        // that is not an accordion header
+        if (!newFocusIsHeader) {
+          accordionContext.setChildrenHeaderHasFocus(false);
+        }
+      }
+    };
+
+    const expanded = Boolean(
+      accordionItemContext.expanded ||
+        (accordionContext && accordionContext.expandedIndex === index)
+    );
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(ref, forwardedRef)}
+        {...otherProps}
+        id={accordionItemContext.headerId}
+        aria-controls={accordionItemContext.bodyId}
+        role="button"
+        data-accordion-header=""
+        tabIndex="0"
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        onFocus={wrapEvent(onFocus, handleFocus)}
+        onBlur={wrapEvent(onBlur, handleBlur)}
+        onClick={onClick}
+        aria-expanded={String(expanded)}
+      />
+    );
+  }
+);

package/src/Accordion/AccordionItem.tsx

@@ -0,0 +1,43 @@
+import { Fragment, forwardRef } from 'react';
+import type * as React from 'react';
+import { AccordionItemContextProps, AccordionItemProvider } from './context';
+import { useId } from '../hooks';
+
+export interface AccordionItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  expanded?: boolean;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    value: boolean
+  ) => void;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  function AccordionItem(props, forwardedRef) {
+    const {
+      as: Comp = Fragment,
+      expanded = false,
+      onChange,
+      ...otherProps
+    } = props;
+    const id = useId();
+
+    const headerId = id ? `accordion-header-${id}` : undefined;
+    const bodyId = id ? `accordion-body-${id}` : undefined;
+    const contextValue: AccordionItemContextProps = {
+      headerId,
+      bodyId,
+      expanded,
+      onChange,
+    };
+
+    return (
+      <AccordionItemProvider value={contextValue}>
+        <Comp ref={forwardedRef} {...otherProps} />
+      </AccordionItemProvider>
+    );
+  }
+);

package/src/Accordion/context.ts

@@ -0,0 +1,35 @@
+import { useContext, createContext } from 'react';
+import { Scope } from '../hooks/useScope';
+
+// AccordionGroup Component
+export interface AccordionContextProps {
+  childrenHeaderHasFocus: boolean;
+  setChildrenHeaderHasFocus: (value: boolean) => void;
+  scope: Scope<HTMLElement>;
+  expandedIndex: number;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    index: number
+  ) => void;
+}
+
+const accordionContext = createContext<AccordionContextProps | null>(null);
+export const { Provider: AccordionProvider } = accordionContext;
+export const useAccordionContext = () => useContext(accordionContext);
+
+// Accordion Component
+export interface AccordionItemContextProps {
+  headerId: string | undefined;
+  bodyId: string | undefined;
+  expanded: boolean;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    value: boolean
+  ) => void;
+}
+
+const accordionItemContext = createContext<AccordionItemContextProps | null>(
+  null
+);
+export const { Provider: AccordionItemProvider } = accordionItemContext;
+export const useAccordionItemContext = () => useContext(accordionItemContext);

package/src/Accordion/index.ts

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './AccordionItem';
+export * from './AccordionHeader';
+export * from './AccordionBody';

package/src/Accordion/scopeQuery.ts

@@ -0,0 +1,7 @@
+export function headerScopeQuery(type: string, props: Record<string, unknown>) {
+  return props['data-accordion-header'] === '';
+}
+
+export function bodyScopeQuery(type: string, props: Record<string, unknown>) {
+  return props['data-accordion-body'] === '';
+}

package/src/Accordion/styles.css

@@ -0,0 +1,21 @@
+[data-accordion-root] {
+  box-sizing: border-box;
+  max-width: 300px;
+  padding: 32px;
+  border: solid 1px #aaa;
+  margin: 32px;
+}
+[data-accordion-root][data-children-has-focus='true'] {
+  border-color: red;
+}
+
+[data-accordion-body]:not([hidden]) {
+  box-sizing: border-box;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-accordion-header] {
+  cursor: pointer;
+}

package/src/CheckBox/CheckBox.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useControlledState } from '../hooks';
+
+export interface CheckBoxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  function CheckBox(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      checked: checkedProp,
+      defaultChecked = false,
+      onChange: onChangeProp,
+      ...otherProps
+    } = props;
+    const [checked, onChange] = useControlledState(
+      checkedProp,
+      onChangeProp,
+      defaultChecked,
+      (setValue) => (e) => {
+        setValue(e.target.checked);
+      }
+    );
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        type="checkbox"
+        checked={checked}
+        aria-checked={checked}
+        onChange={onChange}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/CheckBox/index.ts

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

package/src/ComboBox/ComboBox.story.tsx

@@ -0,0 +1,118 @@
+import { useMemo, useState } from 'react';
+import type * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ComboboxOption } from './ComboboxOption';
+import { ComboboxList } from './ComboboxList';
+import { ComboboxPopover } from './ComboboxPopover';
+import { ComboboxInput } from './ComboboxInput';
+import { ComboboxLabel } from './ComboboxLabel';
+import { Combobox } from './Combobox';
+import cities from './cities';
+import './styles.css';
+
+const stories = storiesOf('Components/Combobox', module);
+
+function useCityMatch(searchTerm: string) {
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === ''
+      ? []
+      : cities.filter(
+          (city) =>
+            city.city.toLowerCase().indexOf(term) !== -1 ||
+            city.state.toLowerCase().indexOf(term) !== -1
+        );
+  }, [searchTerm]);
+}
+
+export function UncontrolledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} defaultValue={initialValue} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+export function ControlledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+    setSelected('');
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} value={selected || term} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+stories.add('Uncontrolled Clientside', () => <UncontrolledClientSideExample />);
+stories.add('Uncontrolled Clientside - Initial', () => (
+  <UncontrolledClientSideExample initialValue="Aberdeen" />
+));
+stories.add('Controlled Clientside', () => <ControlledClientSideExample />);
+stories.add('Controlled Clientside - Initial', () => (
+  <ControlledClientSideExample initialValue="Aberdeen" />
+));