Moved all of r3f's UI elements to Studio

packages/plugin-r3f/src/components/Toolbar/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 './utils/CompactModeSelect'
+import {ToolbarSwitchSelect} from '@theatre/studio'
 
 export interface TransformControlsSpaceSelectProps {
   value: TransformControlsSpace
@@ -13,17 +13,17 @@ const TransformControlsSpaceSelect: VFC<TransformControlsSpaceSelectProps> = ({
   value,
   onChange,
 }) => (
-  <CompactModeSelect
+  <ToolbarSwitchSelect
     value={value}
     onChange={onChange}
     options={[
       {
-        option: 'world',
+        value: 'world',
         label: 'Space: World',
         icon: <BiGlobe />,
       },
       {
-        option: 'local',
+        value: 'local',
         label: 'Space: Local',
         icon: <BiCube />,
       },

packages/plugin-r3f/src/components/Toolbar/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 './utils/CompactModeSelect'
+import {ToolbarSwitchSelect} from '@theatre/studio'
 
 export interface ViewportShadingSelectProps {
   value: ViewportShading
@@ -13,27 +13,27 @@ const ViewportShadingSelect: VFC<ViewportShadingSelectProps> = ({
   value,
   onChange,
 }) => (
-  <CompactModeSelect
+  <ToolbarSwitchSelect
     value={value}
     onChange={onChange}
     options={[
       {
-        option: 'wireframe',
+        value: 'wireframe',
         label: 'Display: Wireframe',
         icon: <BiCube />,
       },
       {
-        option: 'flat',
+        value: 'flat',
         label: 'Display: Flat',
         icon: <GiCube />,
       },
       {
-        option: 'solid',
+        value: 'solid',
         label: 'Display: Solid',
         icon: <FaCube />,
       },
       {
-        option: 'rendered',
+        value: 'rendered',
         label: 'Display: Rendered',
         icon: <GiIceCube />,
       },

packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx

@@ -1,115 +0,0 @@
-import type {ReactElement, ReactNode} from 'react'
-import React from 'react'
-import type {IconType} from 'react-icons'
-import {Group, Button} from 'reakit'
-import styled from 'styled-components'
-import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
-
-interface OptionButtonProps<Option> {
-  value: Option
-  option: Option
-  label: string
-  icon: ReactElement<IconType>
-  onClick: () => void
-}
-
-const TheButton = styled(TooltipReference)<{selected: boolean}>`
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  font-size: 11px;
-  line-height: 1.25em;
-  font-weight: 600;
-  height: 24px;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  border: 1px solid #22222238;
-
-  border-radius: 2px;
-
-  &:focus {
-    outline: none;
-  }
-
-  color: #e6e6e5;
-  background-color: rgba(0, 0, 0, 0.1);
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-  }
-
-  &.selected,
-  &.selected:hover {
-    color: white;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-`
-
-function OptionButton<Option>({
-  value,
-  option,
-  label,
-  icon,
-  onClick,
-}: OptionButtonProps<Option>) {
-  console.log('deprecate CompactModeSelect')
-
-  const tooltip = useTooltipState()
-  return (
-    <>
-      <TheButton
-        {...tooltip}
-        forwardedAs={Button}
-        selected={option === value}
-        className={option === value ? 'selected' : undefined}
-        aria-label={label}
-        onClick={onClick}
-      >
-        {icon}
-      </TheButton>
-      <Tooltip {...tooltip}>{label}</Tooltip>
-    </>
-  )
-}
-
-interface CompactModeSelectProps<Option> {
-  value: Option
-  onChange: (value: Option) => void
-  options: {
-    option: Option
-    label: string
-    icon: ReactElement<IconType>
-  }[]
-  settingsPanel?: ReactNode
-}
-
-const Container = styled(Group)`
-  display: flex;
-  gap: 2px;
-`
-
-const CompactModeSelect = <Option extends string | number>({
-  value,
-  onChange,
-  options,
-}: CompactModeSelectProps<Option>) => {
-  return (
-    <Container>
-      {options.map(({label, icon, option}) => (
-        <OptionButton
-          key={option}
-          value={value}
-          option={option}
-          label={label}
-          icon={icon}
-          onClick={() => onChange(option)}
-        />
-      ))}
-    </Container>
-  )
-}
-
-export default CompactModeSelect

packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx

@@ -1,26 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
-import {transparentize} from 'polished'
-import type {TooltipProps} from 'reakit'
-import styled from 'styled-components'
-
-export {TooltipReference, useTooltipState}
-
-const Container = styled(TooltipImpl)`
-  padding: 3px 5px;
-
-  font-size: 11px;
-  line-height: 1.25em;
-  border-radius: 2px;
-  background-color: ${transparentize(0.5, '#313131')};
-  color: white;
-  pointer-events: none;
-  font-weight: 500;
-`
-
-export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => {
-  console.log('deprecate tooltip')
-
-  return <Container {...props} className={className as string} />
-}