Removed a bunch of unused code from r3f

packages/plugin-r3f/src/components/Editor.tsx

@@ -9,9 +9,11 @@ import root from 'react-shadow'
 import styles from '../bundle.css.txt'
 import UI from './UI'
 import ProxyManager from './ProxyManager'
-import {Button, PortalManager, IdProvider} from './elements'
 import studio from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
+import {IdProvider} from './elements/IdProvider'
+import PortalManager from './elements/PortalManager'
+import Button from './elements/Button'
 
 const EditorScene = () => {
   const orbitControlsRef = useRef<typeof OrbitControls>()

packages/plugin-r3f/src/components/EnvironmentPreview.tsx

@@ -1,63 +0,0 @@
-import type {VFC} from 'react'
-import React, {Suspense} from 'react'
-import {Canvas} from '@react-three/fiber'
-import {Environment, OrbitControls, TorusKnot} from '@react-three/drei'
-import type {ClickableProps} from 'reakit'
-import {Clickable} from 'reakit'
-import {IoIosClose} from 'react-icons/all'
-
-export interface EnvironmentPreviewProps extends ClickableProps {
-  url: string | null
-  selected: boolean
-}
-
-const EnvironmentPreview: VFC<EnvironmentPreviewProps> = ({
-  url,
-  selected,
-  ...props
-}) => {
-  return (
-    <Clickable
-      {...props}
-      as="div"
-      className={`${
-        selected
-          ? 'ring-4 ring-green-800 hover:ring-green-900'
-          : 'hover:ring-4 hover:ring-gray-200'
-      } focus:outline-none focus:ring-4 rounded overflow-hidden`}
-    >
-      <div className="h-full relative">
-        {url ? (
-          <>
-            <Canvas>
-              <Suspense fallback={null}>
-                {/* @ts-ignore */}
-                <OrbitControls enableZoom={false} enablePan={false} />
-                <Environment
-                  // @ts-ignore
-                  files={url}
-                  path=""
-                  background={true}
-                />
-              </Suspense>
-              <TorusKnot>
-                <meshStandardMaterial metalness={1} roughness={0} />
-              </TorusKnot>
-            </Canvas>
-            <div className="absolute inset-1 pointer-events-none flex flex-col justify-end items-center">
-              <div className="bg-white p-0.5 text-xxs rounded shadow">
-                {url ?? 'None'}
-              </div>
-            </div>
-          </>
-        ) : (
-          <div className="flex justify-center items-center h-full bg-gray-100">
-            <IoIosClose size="3em" />
-          </div>
-        )}
-      </div>
-    </Clickable>
-  )
-}
-
-export default EnvironmentPreview

packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx

@@ -2,7 +2,7 @@ import type {VFC} from 'react'
 import React from 'react'
 import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/all'
 import type {TransformControlsMode} from '../store'
-import {CompactModeSelect} from './elements'
+import CompactModeSelect from './elements/CompactModeSelect'
 
 export interface TransformControlsModeSelectProps {
   value: TransformControlsMode

packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx

@@ -2,7 +2,7 @@ import type {VFC} from 'react'
 import React from 'react'
 import type {TransformControlsSpace} from '../store'
 import {BiCube, BiGlobe} from 'react-icons/all'
-import {CompactModeSelect} from './elements'
+import CompactModeSelect from './elements/CompactModeSelect'
 
 export interface TransformControlsSpaceSelectProps {
   value: TransformControlsSpace

packages/plugin-r3f/src/components/UI.tsx

@@ -6,14 +6,14 @@ import shallow from 'zustand/shallow'
 import ReferenceWindow from './ReferenceWindow'
 import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
 import ViewportShadingSelect from './ViewportShadingSelect'
-import {AiFillEye, GiPocketBow, RiFocus3Line} from 'react-icons/all'
+import {GiPocketBow, RiFocus3Line} from 'react-icons/all'
 import {Vector3} from 'three'
-import {IconButton, Button, SettingsButton} from './elements'
-import ViewportSettings from './ViewportSettings'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import studio from '@theatre/studio'
 import {getSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
+import IconButton from './elements/IconButton'
+import Button from './elements/Button'
 
 const UI: VFC = () => {
   const [editorObject] = useEditorStore(
@@ -130,11 +130,6 @@ const UI: VFC = () => {
                   }}
                 />
               </div>
-              <div className="pointer-events-auto">
-                <SettingsButton icon={<AiFillEye />} label="Viewport settings">
-                  <ViewportSettings />
-                </SettingsButton>
-              </div>
             </div>
             <div className="absolute right-0 top-0 -z-10">
               <ReferenceWindow height={referenceWindowSize} />

packages/plugin-r3f/src/components/ViewportSettings.tsx

@@ -1,91 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import {useEditorStore} from '../store'
-import shallow from 'zustand/shallow'
-import {Checkbox, FormControl, Slider} from './elements'
-import UnstyledFormLabel from './elements/UnstyledFormLabel'
-import {useVal} from '@theatre/dataverse-react'
-import studio from '@theatre/studio'
-
-const ViewportShadingSettings: VFC = () => {
-  const [editorObject] = useEditorStore(
-    (state) => [state.editorObject],
-    shallow,
-  )
-
-  const showAxes = useVal(editorObject?.props.showAxes) ?? true
-  const showGrid = useVal(editorObject?.props.showGrid) ?? true
-  const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
-  const referenceWindowSize =
-    useVal(editorObject?.props.referenceWindowSize) ?? 120
-
-  return (
-    <div className="flex flex-col gap-3">
-      <FormControl>
-        <Checkbox
-          // @ts-ignore
-          checked={showOverlayIcons}
-          onChange={() =>
-            studio.transaction(({set}) => {
-              set(editorObject!.props.showOverlayIcons, !showOverlayIcons)
-            })
-          }
-        >
-          Show overlay icons
-        </Checkbox>
-      </FormControl>
-      <FormControl>
-        <Checkbox
-          // @ts-ignore
-          checked={showGrid}
-          onChange={() =>
-            studio.transaction(({set}) => {
-              set(editorObject!.props.showGrid, !showGrid)
-            })
-          }
-        >
-          Show grid
-        </Checkbox>
-      </FormControl>
-      <FormControl>
-        <Checkbox
-          // @ts-ignore
-          checked={showAxes}
-          onChange={() =>
-            studio.transaction(({set}) => {
-              set(editorObject!.props.showAxes, !showAxes)
-            })
-          }
-        >
-          Show axes
-        </Checkbox>
-      </FormControl>
-      <FormControl>
-        <div className="flex items-start">
-          <div className="text-sm">
-            <UnstyledFormLabel className="font-medium text-gray-700">
-              Preview size:
-            </UnstyledFormLabel>
-          </div>
-          <div className="ml-3 flex items-center h-5">
-            <Slider
-              value={referenceWindowSize}
-              min={120}
-              max={400}
-              onChange={(event) =>
-                studio.transaction(({set}) => {
-                  set(
-                    editorObject!.props.referenceWindowSize,
-                    Number(event.target.value),
-                  )
-                })
-              }
-            />
-          </div>
-        </div>
-      </FormControl>
-    </div>
-  )
-}
-
-export default ViewportShadingSettings

packages/plugin-r3f/src/components/ViewportShadingSelect.tsx

@@ -2,7 +2,7 @@ import type {VFC} from 'react'
 import React from 'react'
 import type {ViewportShading} from '../store'
 import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all'
-import {CompactModeSelect} from './elements'
+import CompactModeSelect from './elements/CompactModeSelect'
 
 export interface ViewportShadingSelectProps {
   value: ViewportShading

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

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

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

@@ -2,14 +2,8 @@ import type {ReactElement, ReactNode, VFC} from 'react'
 import React from 'react'
 import type {IconType} from 'react-icons'
 import {Group, Button} from 'reakit'
-import {
+import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
-  Tooltip,
+import {usePopoverState, PopoverDisclosure, Popover} from './Popover'
-  TooltipReference,
-  usePopoverState,
-  useTooltipState,
-  PopoverDisclosure,
-  Popover,
-} from '.'
 import {FiChevronDown} from 'react-icons/all'
 
 interface OptionButtonProps<Option> {

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

@@ -1,6 +1,6 @@
 import type {ReactNode, VFC} from 'react'
 import React, {createContext, useContext} from 'react'
-import {useId} from '.'
+import {useId} from './IdProvider'
 
 const FormControlContext = createContext<string | undefined>(undefined)
 

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

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

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

@@ -3,7 +3,7 @@ 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'
+import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
 
 export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
   icon: ReactElement<IconType>

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

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

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

@@ -1,72 +0,0 @@
-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/SettingsButton.tsx

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

@@ -1,21 +0,0 @@
-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/UnstyledFormLabel.tsx

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

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

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

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