variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Removed a bunch of unused code from r3f

Browse source
This commit is contained in:
Aria Minaei 2021-07-04 18:06:20 +02:00
parent 6895dab02e
commit d0c4dd4ec7
22 changed files with 13 additions and 506 deletions
Download patch file Download diff file Expand all files Collapse all files

33
packages/plugin-r3f/src/components/elements/Checkbox.tsx
View file

@ -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

36
packages/plugin-r3f/src/components/elements/Code.tsx
View file

@ -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

10
packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx
View file

@ -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 {
Tooltip,
TooltipReference,
usePopoverState,
useTooltipState,
PopoverDisclosure,
Popover,
} from '.'
import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
import {usePopoverState, PopoverDisclosure, Popover} from './Popover'
import {FiChevronDown} from 'react-icons/all'
interface OptionButtonProps<Option> {

2
packages/plugin-r3f/src/components/elements/FormControl.tsx
View file

@ -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)

20
packages/plugin-r3f/src/components/elements/FormLabel.tsx
View file

@ -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

10
packages/plugin-r3f/src/components/elements/Heading.tsx
View file

@ -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

2
packages/plugin-r3f/src/components/elements/IconButton.tsx
View file

@ -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>

22
packages/plugin-r3f/src/components/elements/Input.tsx
View file

@ -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

16
packages/plugin-r3f/src/components/elements/Legend.tsx
View file

@ -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

72
packages/plugin-r3f/src/components/elements/Modal.tsx
View file

@ -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`}
/>
)
},
)

54
packages/plugin-r3f/src/components/elements/SettingsButton.tsx
View file

@ -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

21
packages/plugin-r3f/src/components/elements/Slider.tsx
View file

@ -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

15
packages/plugin-r3f/src/components/elements/UnstyledFormLabel.tsx
View file

@ -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

1
packages/plugin-r3f/src/components/elements/VisuallyHidden.ts
View file

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

30
packages/plugin-r3f/src/components/elements/index.ts
View file

@ -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'