Finished switching to styled-components in r3f
This commit is contained in:
Aria Minaei
parent
596b7e9d81
commit
8395e44614
9 changed files with 108 additions and 196086 deletions
|
|
@ -43,7 +43,6 @@
|
|||
"@theatre/core": "workspace:*",
|
||||
"@theatre/studio": "workspace:*",
|
||||
"lodash-es": "^4.17.21",
|
||||
"prism-react-renderer": "1.2.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.2.0",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -6,7 +6,6 @@ import {useEditorStore} from '../store'
|
|||
import {OrbitControls} from '@react-three/drei'
|
||||
import shallow from 'zustand/shallow'
|
||||
import root from 'react-shadow/styled-components'
|
||||
import styles from '../bundle.css.txt'
|
||||
import UI from './UI'
|
||||
import ProxyManager from './ProxyManager'
|
||||
import studio from '@theatre/studio'
|
||||
|
|
@ -131,7 +130,6 @@ const Editor: VFC = () => {
|
|||
</>
|
||||
) : null}
|
||||
</Wrapper>
|
||||
<style type="text/css">{styles}</style>
|
||||
</root.div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,18 @@ import {useEditorStore} from '../store'
|
|||
import shallow from 'zustand/shallow'
|
||||
import type {WebGLRenderer} from 'three'
|
||||
import useMeasure from 'react-use-measure'
|
||||
import styled from 'styled-components'
|
||||
|
||||
interface ReferenceWindowProps {
|
||||
height: number
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
box-shadow: 0 25px 50px -12px gray;
|
||||
overflow: hidden;
|
||||
border-radius: 0.25rem;
|
||||
`
|
||||
|
||||
const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
|
||||
|
|
@ -52,7 +59,7 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
|
|||
}, [gl, height])
|
||||
|
||||
return gl?.domElement ? (
|
||||
<div className="rounded overflow-hidden shadow-2xl">
|
||||
<Container>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={
|
||||
|
|
@ -62,7 +69,7 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
|
|||
}
|
||||
height={height}
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
) : null
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,44 @@ interface OptionButtonProps<Option> {
|
|||
onClick: () => void
|
||||
}
|
||||
|
||||
// const Ro = styled(TooltipReference)``
|
||||
const _TooltipRef = styled(TooltipReference)<{selected: boolean}>`
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 600;
|
||||
height: 1.75rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
border: 0 transparent;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
color: ${({selected}) => (selected ? 'white' : 'rgba(55, 65, 81, 1)')};
|
||||
background-color: ${({selected}) =>
|
||||
selected ? 'rgba(6, 95, 70, 1)' : 'rgba(243, 244, 246, 1);'};
|
||||
|
||||
&:hover {
|
||||
background-color: ${({selected}) =>
|
||||
selected ? 'rgba(6, 78, 59, 1)' : 'rgba(229, 231, 235, 1);'};
|
||||
}
|
||||
`
|
||||
|
||||
function OptionButton<Option>({
|
||||
value,
|
||||
|
|
@ -25,19 +62,15 @@ function OptionButton<Option>({
|
|||
const tooltip = useTooltipState()
|
||||
return (
|
||||
<>
|
||||
<TooltipReference
|
||||
<_TooltipRef
|
||||
{...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'
|
||||
}`}
|
||||
forwardedAs={Button}
|
||||
selected={option === value}
|
||||
aria-label={label}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon}
|
||||
</TooltipReference>
|
||||
</_TooltipRef>
|
||||
<Tooltip {...tooltip}>{label}</Tooltip>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,27 +4,63 @@ import type {ButtonProps} from 'reakit'
|
|||
import {Button} from 'reakit'
|
||||
import type {IconType} from 'react-icons'
|
||||
import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
|
||||
import styled from 'styled-components'
|
||||
|
||||
export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
|
||||
icon: ReactElement<IconType>
|
||||
label: string
|
||||
}
|
||||
|
||||
const _TooltipRef = styled(TooltipReference)`
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 600;
|
||||
height: 1.75rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
color: rgba(55, 65, 81, 1);
|
||||
background-color: rgba(243, 244, 246, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(229, 231, 235, 1);
|
||||
}
|
||||
|
||||
border: 0 transparent;
|
||||
`
|
||||
const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
||||
({label, icon, className, ...props}, ref) => {
|
||||
const tooltip = useTooltipState()
|
||||
return (
|
||||
<>
|
||||
<TooltipReference
|
||||
ref={ref}
|
||||
<_TooltipRef
|
||||
{...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`}
|
||||
forwardedAs={Button}
|
||||
aria-label={label}
|
||||
>
|
||||
{icon}
|
||||
</TooltipReference>
|
||||
</_TooltipRef>
|
||||
<Tooltip {...tooltip}>{label}</Tooltip>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,15 +3,24 @@ import React from 'react'
|
|||
import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
|
||||
|
||||
import type {TooltipProps} from 'reakit'
|
||||
import styled from 'styled-components'
|
||||
|
||||
export {TooltipReference, useTooltipState}
|
||||
|
||||
const Container = styled(TooltipImpl)`
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
border-radius: 0.125rem;
|
||||
background-color: rgba(55, 65, 81, 1);
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
`
|
||||
|
||||
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
|
||||
}
|
||||
/>
|
||||
<Container {...props} className={className as string} />
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
/*
|
||||
Shadow dom base styles
|
||||
========
|
||||
*/
|
||||
|
||||
#react-three-editable-editor-root {
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system,
|
||||
/* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto,
|
||||
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
}
|
||||
|
||||
canvas {
|
||||
outline: none
|
||||
}
|
||||
}
|
||||
|
||||
10
yarn.lock
10
yarn.lock
|
|
@ -3804,7 +3804,6 @@ __metadata:
|
|||
"@types/react": ^17.0.9
|
||||
"@types/styled-components": ^5.1.9
|
||||
lodash-es: ^4.17.21
|
||||
prism-react-renderer: 1.2.1
|
||||
react: ^17.0.2
|
||||
react-dom: ^17.0.2
|
||||
react-icons: ^4.2.0
|
||||
|
|
@ -14880,15 +14879,6 @@ fsevents@^1.2.7:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"prism-react-renderer@npm:1.2.1":
|
||||
version: 1.2.1
|
||||
resolution: "prism-react-renderer@npm:1.2.1"
|
||||
peerDependencies:
|
||||
react: ">=0.14.9"
|
||||
checksum: b27670bd96e4320075f9a2932d440b3025f9ce1ff64ddd8d8e71867701aabd6c9d2914d5deecb7bef7e92ed59baaef538a31559ca71c76efee3711a064f3e8ff
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"private@npm:^0.1.8":
|
||||
version: 0.1.8
|
||||
resolution: "private@npm:0.1.8"
|
||||
|
|
|
|||
Loading…
Reference in a new issue