Initial OSS commit

packages/plugin-r3f/src/components/elements/Button.tsx

@@ -0,0 +1,18 @@
+import React, {forwardRef} from 'react'
+import type {ButtonProps} from 'reakit'
+import {Button as ButtonImpl} from 'reakit'
+
+export type {ButtonProps}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  return (
+    <ButtonImpl
+      // @ts-ignore
+      ref={ref}
+      {...props}
+      className={`${props.className} inline-flex justify-center rounded-md px-4 py-2 font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300`}
+    />
+  )
+})
+
+export default Button

packages/plugin-r3f/src/components/elements/Checkbox.tsx

@@ -0,0 +1,33 @@
+import React, {forwardRef} from 'react'
+import type {CheckboxProps} from 'reakit'
+import {Checkbox as CheckboxImpl} from 'reakit'
+import {useFormControlContext} from './FormControl'
+
+export type {CheckboxProps}
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({children, ...props}, ref) => {
+    const id = useFormControlContext()
+
+    return (
+      <div className="flex items-start">
+        <div className="flex items-center h-5">
+          <CheckboxImpl
+            // @ts-ignore
+            {...props}
+            id={props.id ?? id}
+            ref={ref}
+            className="focus:ring focus:ring-opacity-50 focus:ring-blue-500 focus:ring-offset-0 h-4 w-4 text-green-800 border-gray-300 hover:border-gray-400 rounded"
+          />
+        </div>
+        <div className="ml-3 text-sm">
+          <label htmlFor={props.id ?? id} className="font-medium text-gray-700">
+            {children}
+          </label>
+        </div>
+      </div>
+    )
+  },
+)
+
+export default Checkbox

packages/plugin-r3f/src/components/elements/Code.tsx

@@ -0,0 +1,36 @@
+import type {VFC} from 'react'
+import React from 'react'
+import Highlight, {defaultProps} from 'prism-react-renderer'
+import theme from 'prism-react-renderer/themes/github'
+
+export interface CodeProps {
+  children: string
+  block?: boolean
+}
+
+const Code: VFC<CodeProps> = ({children, block}) => {
+  return (
+    <Highlight {...defaultProps} theme={theme} code={children} language="tsx">
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <code
+          className={`${className} font-mono whitespace-pre rounded ${
+            block ? 'block p-4' : 'inline p-1'
+          }`}
+          style={style}
+        >
+          {tokens.map((line, i) => (
+            <div
+              {...getLineProps({line, key: i})}
+              className={block ? 'block' : 'inline'}
+            >
+              {line.map((token, key) => (
+                <span {...getTokenProps({token, key})} />
+              ))}
+            </div>
+          ))}
+        </code>
+      )}
+    </Highlight>
+  )
+}
+export default Code

packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx

@@ -0,0 +1,125 @@
+import type {ReactElement, ReactNode, VFC} from 'react'
+import React from 'react'
+import type {IconType} from 'react-icons'
+import {Group, Button} from 'reakit'
+import {
+  Tooltip,
+  TooltipReference,
+  usePopoverState,
+  useTooltipState,
+  PopoverDisclosure,
+  Popover,
+} from '.'
+import {FiChevronDown} from 'react-icons/all'
+
+interface OptionButtonProps<Option> {
+  value: Option
+  option: Option
+  label: string
+  icon: ReactElement<IconType>
+  onClick: () => void
+}
+
+function OptionButton<Option>({
+  value,
+  option,
+  label,
+  icon,
+  onClick,
+}: OptionButtonProps<Option>) {
+  const tooltip = useTooltipState()
+  return (
+    <>
+      <TooltipReference
+        {...tooltip}
+        as={Button}
+        className={`flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 first:rounded-l last:rounded-r focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset ${
+          option === value
+            ? 'bg-green-800 hover:bg-green-900 text-white'
+            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+        }`}
+        aria-label={label}
+        onClick={onClick}
+      >
+        {icon}
+      </TooltipReference>
+      <Tooltip {...tooltip}>{label}</Tooltip>
+    </>
+  )
+}
+
+interface SettingsProps {
+  children: ReactNode
+}
+
+const Settings: VFC<SettingsProps> = ({children}) => {
+  const tooltip = useTooltipState()
+  const popover = usePopoverState()
+
+  return (
+    <>
+      <TooltipReference
+        {...tooltip}
+        as={'div'}
+        tabIndex={-1}
+        className="focus:outline-none"
+      >
+        <PopoverDisclosure
+          // @ts-ignore
+          {...popover}
+          className={`flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-1 rounded-r bg-gray-800 text-white hover:bg-gray-900 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
+        >
+          <FiChevronDown />
+        </PopoverDisclosure>
+      </TooltipReference>
+      <Tooltip {...tooltip}>Settings</Tooltip>
+      <Popover
+        {...popover}
+        // this seems to be necessary to prevent the popup from forever being closed after the first opening
+        hideOnClickOutside={false}
+        aria-label="More options"
+      >
+        {children}
+      </Popover>
+    </>
+  )
+}
+
+export interface CompactModeSelectProps<Option> {
+  value: Option
+  onChange: (value: Option) => void
+  options: {
+    option: Option
+    label: string
+    icon: ReactElement<IconType>
+  }[]
+  settingsPanel?: ReactNode
+}
+
+const CompactModeSelect = <Option extends string | number>({
+  value,
+  onChange,
+  options,
+  settingsPanel,
+}: CompactModeSelectProps<Option>) => {
+  return (
+    <Group
+      // @ts-ignore
+      className="flex"
+    >
+      {options.map(({label, icon, option}) => (
+        <OptionButton
+          key={option}
+          value={value}
+          option={option}
+          label={label}
+          icon={icon}
+          onClick={() => onChange(option)}
+        />
+      ))}
+      {settingsPanel && <Settings>{settingsPanel}</Settings>}
+    </Group>
+  )
+}
+
+export default CompactModeSelect

packages/plugin-r3f/src/components/elements/FormControl.tsx

@@ -0,0 +1,22 @@
+import type {ReactNode, VFC} from 'react'
+import React, {createContext, useContext} from 'react'
+import {useId} from '.'
+
+const FormControlContext = createContext<string | undefined>(undefined)
+
+interface FormControlProps {
+  id?: string
+  children: ReactNode
+}
+
+export const FormControl: VFC<FormControlProps> = ({children, ...props}) => {
+  const {id} = useId(props)
+
+  return (
+    <FormControlContext.Provider value={id}>
+      {children}
+    </FormControlContext.Provider>
+  )
+}
+
+export const useFormControlContext = () => useContext(FormControlContext)

packages/plugin-r3f/src/components/elements/FormLabel.tsx

@@ -0,0 +1,20 @@
+import type {ComponentProps} from 'react'
+import React, {forwardRef} from 'react'
+import {useFormControlContext} from './FormControl'
+
+export type FormLabelProps = ComponentProps<'label'>
+
+const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>((props, ref) => {
+  const id = useFormControlContext()
+
+  return (
+    <label
+      ref={ref}
+      {...props}
+      id={props.id ?? id}
+      className={`${props.className} font-medium mb-2`}
+    />
+  )
+})
+
+export default FormLabel

packages/plugin-r3f/src/components/elements/Heading.tsx

@@ -0,0 +1,10 @@
+import type {ComponentProps} from 'react'
+import React, {forwardRef} from 'react'
+
+export type HeadingProps = ComponentProps<'h1'>
+
+const Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
+  return <h1 ref={ref} {...props} className={`${props.className} font-bold`} />
+})
+
+export default Heading

packages/plugin-r3f/src/components/elements/IconButton.tsx

@@ -0,0 +1,34 @@
+import type {ReactElement} from 'react'
+import React, {forwardRef} from 'react'
+import type {ButtonProps} from 'reakit'
+import {Button} from 'reakit'
+import type {IconType} from 'react-icons'
+import {Tooltip, TooltipReference, useTooltipState} from './index'
+
+export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
+  icon: ReactElement<IconType>
+  label: string
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({label, icon, className, ...props}, ref) => {
+    const tooltip = useTooltipState()
+    return (
+      <>
+        <TooltipReference
+          ref={ref}
+          {...props}
+          {...tooltip}
+          as={Button}
+          className={`${className} flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 first:rounded-l last:rounded-r bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
+          aria-label={label}
+        >
+          {icon}
+        </TooltipReference>
+        <Tooltip {...tooltip}>{label}</Tooltip>
+      </>
+    )
+  },
+)
+
+export default IconButton

packages/plugin-r3f/src/components/elements/IdProvider.ts

@@ -0,0 +1,6 @@
+export {
+  unstable_IdProvider as IdProvider,
+  unstable_useId as useId,
+} from 'reakit'
+
+export type {unstable_IdProviderProps as IdProviderProps} from 'reakit'

packages/plugin-r3f/src/components/elements/Input.tsx

@@ -0,0 +1,22 @@
+import React, {forwardRef} from 'react'
+import {Input as InputImpl} from 'reakit'
+import type {InputProps} from 'reakit'
+import {useFormControlContext} from './FormControl'
+
+export type {InputProps}
+
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const id = useFormControlContext()
+
+  return (
+    <InputImpl
+      // @ts-ignore
+      ref={ref}
+      {...props}
+      id={props.id ?? id}
+      className={`${props.className} w-full h-8 px-3 border rounded-sm focus:outline-none focus:ring focus:ring-blue-300`}
+    />
+  )
+})
+
+export default Input

packages/plugin-r3f/src/components/elements/Legend.tsx

@@ -0,0 +1,16 @@
+import type {ComponentProps} from 'react'
+import React, {forwardRef} from 'react'
+
+export type LegendProps = ComponentProps<'legend'>
+
+const Input = forwardRef<HTMLLegendElement, LegendProps>((props, ref) => {
+  return (
+    <legend
+      ref={ref}
+      {...props}
+      className={`${props.className} font-medium mb-2`}
+    />
+  )
+})
+
+export default Input

packages/plugin-r3f/src/components/elements/Modal.tsx

@@ -0,0 +1,72 @@
+import type {ComponentProps, VFC} from 'react'
+import React, {forwardRef} from 'react'
+import type {DialogProps} from 'reakit'
+import {Dialog, DialogBackdrop, useDialogState} from 'reakit'
+
+// we are abstracting away stuff like baseId because we are not going to use DialogDisclosure
+export type ModalProps = Pick<DialogProps, 'children' | 'visible' | 'hide'>
+
+export const Modal: VFC<ModalProps> = ({children, ...props}) => {
+  const dialog = {...useDialogState(), ...props}
+
+  return (
+    <DialogBackdrop
+      // @ts-ignore
+      {...dialog}
+      className="fixed inset-0 bg-black bg-opacity-40 z-50 flex justify-center items-start"
+    >
+      <Dialog
+        // @ts-ignore
+        {...dialog}
+        className="flex flex-col my-14 max-w-md w-full bg-white rounded-md shadow-lg focus:outline-none"
+        aria-label="Dialog"
+      >
+        {children}
+      </Dialog>
+    </DialogBackdrop>
+  )
+}
+
+export const useModal = () => {
+  const {show, hide, visible} = useDialogState()
+
+  return {show, hide, visible}
+}
+
+export type ModalHeaderProps = ComponentProps<'header'>
+
+export const ModalHeader = forwardRef<HTMLElement, ModalHeaderProps>(
+  ({className, ...props}, ref) => {
+    return (
+      <header
+        ref={ref}
+        {...props}
+        className={`${className} flex-0 px-6 py-4 text-xl font-semibold`}
+      />
+    )
+  },
+)
+
+export type ModalBodyProps = ComponentProps<'div'>
+
+export const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
+  ({className, ...props}, ref) => {
+    return (
+      <div ref={ref} {...props} className={`${className} flex-1 px-6 py-2`} />
+    )
+  },
+)
+
+export type ModalFooterProps = ComponentProps<'footer'>
+
+export const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(
+  ({className, ...props}, ref) => {
+    return (
+      <footer
+        ref={ref}
+        {...props}
+        className={`${className} flex px-6 py-4 justify-end gap-3`}
+      />
+    )
+  },
+)

packages/plugin-r3f/src/components/elements/Popover.tsx

@@ -0,0 +1,29 @@
+import type {VFC} from 'react'
+import React from 'react'
+
+import {
+  usePopoverState,
+  Popover as PopoverImpl,
+  PopoverDisclosure,
+} from 'reakit'
+
+import type {PopoverProps} from 'reakit'
+
+export type {PopoverProps}
+
+export {PopoverDisclosure, usePopoverState}
+
+export const Popover: VFC<PopoverProps> = ({className, children, ...props}) => {
+  return (
+    <>
+      <PopoverImpl
+        // @ts-ignore
+        {...props}
+        className="flex p-4 w-80 rounded overflow-hidden shadow-2xl focus:outline-none bg-white"
+      >
+        {/* it seems that rendering Canvas in a display: none element permanently breaks its sizing, so we don't */}
+        {props.visible && children}
+      </PopoverImpl>
+    </>
+  )
+}

packages/plugin-r3f/src/components/elements/PortalManager.tsx

@@ -0,0 +1,26 @@
+import type {ReactNode} from 'react'
+import React, {useLayoutEffect, useState} from 'react'
+import {PortalContext} from 'reakit'
+
+export interface PortalManagerProps {
+  children: ReactNode
+}
+
+const PortalManager: React.VFC<PortalManagerProps> = ({children}) => {
+  const wrapperRef = React.useRef<HTMLDivElement>(null)
+
+  // force update on initial render
+  const [, forceUpdate] = useState(false)
+  useLayoutEffect(() => {
+    forceUpdate((i) => !i)
+  }, [])
+
+  return (
+    <PortalContext.Provider value={wrapperRef.current}>
+      {children}
+      <div ref={wrapperRef} className="relative z-50" />
+    </PortalContext.Provider>
+  )
+}
+
+export default PortalManager

packages/plugin-r3f/src/components/elements/SettingsButton.tsx

@@ -0,0 +1,54 @@
+import type {ReactElement, ReactNode, VFC} from 'react'
+import React from 'react'
+import {
+  Popover,
+  PopoverDisclosure,
+  Tooltip,
+  TooltipReference,
+  usePopoverState,
+  useTooltipState,
+} from './index'
+import {FiChevronDown} from 'react-icons/all'
+import type {IconType} from 'react-icons'
+
+export interface SettingsButtonProps {
+  icon: ReactElement<IconType>
+  label: string
+  children: ReactNode
+}
+
+const SettingsButton: VFC<SettingsButtonProps> = ({children, icon, label}) => {
+  const tooltip = useTooltipState()
+  const popover = usePopoverState()
+
+  return (
+    <>
+      <TooltipReference
+        {...tooltip}
+        as={'div'}
+        tabIndex={-1}
+        className="inline-block focus:outline-none"
+      >
+        <PopoverDisclosure
+          // @ts-ignore
+          {...popover}
+          className={`flex gap-1 relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
+        >
+          {icon}
+          <FiChevronDown />
+        </PopoverDisclosure>
+      </TooltipReference>
+      <Tooltip {...tooltip}>{label}</Tooltip>
+      <Popover
+        {...popover}
+        // this seems to be necessary to prevent the popup from forever being closed after the first opening
+        hideOnClickOutside={false}
+        aria-label={label}
+      >
+        {children}
+      </Popover>
+    </>
+  )
+}
+
+export default SettingsButton

packages/plugin-r3f/src/components/elements/Slider.tsx

@@ -0,0 +1,21 @@
+import type {ComponentProps} from 'react'
+import React, {forwardRef} from 'react'
+import {useFormControlContext} from './FormControl'
+
+export type SliderProps = ComponentProps<'input'>
+
+const Slider = forwardRef<HTMLInputElement, SliderProps>((props, ref) => {
+  const id = useFormControlContext()
+
+  return (
+    <input
+      type="range"
+      ref={ref}
+      {...props}
+      id={props.id ?? id}
+      className={`${props.className}`}
+    />
+  )
+})
+
+export default Slider

packages/plugin-r3f/src/components/elements/Tooltip.tsx

@@ -0,0 +1,19 @@
+import type {VFC} from 'react'
+import React from 'react'
+import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
+
+import type {TooltipProps, TooltipReferenceProps} from 'reakit'
+
+export type {TooltipProps, TooltipReferenceProps}
+
+export {TooltipReference, useTooltipState}
+
+export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => (
+  <TooltipImpl
+    // @ts-ignore
+    {...props}
+    className={
+      `${className} px-2 py-1  text-white bg-gray-700 rounded-sm text-sm pointer-events-none shadow-md` as string
+    }
+  />
+)

packages/plugin-r3f/src/components/elements/UnstyledFormLabel.tsx

@@ -0,0 +1,15 @@
+import type {ComponentProps} from 'react'
+import React, {forwardRef} from 'react'
+import {useFormControlContext} from './FormControl'
+
+export type FormLabelProps = ComponentProps<'label'>
+
+const UnstyledFormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
+  (props, ref) => {
+    const id = useFormControlContext()
+
+    return <label ref={ref} {...props} id={props.id ?? id} />
+  },
+)
+
+export default UnstyledFormLabel

packages/plugin-r3f/src/components/elements/VisuallyHidden.ts

@@ -0,0 +1 @@
+export {VisuallyHidden} from 'reakit'

packages/plugin-r3f/src/components/elements/index.ts

@@ -0,0 +1,30 @@
+export {default as Button} from './Button'
+export type {ButtonProps} from './Button'
+export {default as Heading} from './Heading'
+export type {HeadingProps} from './Heading'
+export {default as Code} from './Code'
+export type {CodeProps} from './Code'
+export * from './Modal'
+export {default as PortalManager} from './PortalManager'
+export type {PortalManagerProps} from './PortalManager'
+export {default as CompactModeSelect} from './CompactModeSelect'
+export type {CompactModeSelectProps} from './CompactModeSelect'
+export * from './Tooltip'
+export {default as IconButton} from './IconButton'
+export type {IconButtonProps} from './IconButton'
+export {default as Input} from './Input'
+export {default as Legend} from './Legend'
+export type {LegendProps} from './Legend'
+export {FormControl, useFormControlContext} from './FormControl'
+export {default as FormLabel} from './FormLabel'
+export type {FormLabelProps} from './FormLabel'
+export * from './IdProvider'
+export * from './VisuallyHidden'
+export {Popover, usePopoverState, PopoverDisclosure} from './Popover'
+export type {PopoverProps} from './Popover'
+export {default as SettingsButton} from './SettingsButton'
+export type {SettingsButtonProps} from './SettingsButton'
+export {default as Checkbox} from './Checkbox'
+export type {CheckboxProps} from './Checkbox'
+export {default as Slider} from './Slider'
+export type {SliderProps} from './Slider'