Skip to content

Commit affa819

Browse files
malcolm-keemalcolm-kee
committed
migrate more
1 parent af69811 commit affa819

File tree

5 files changed

+160
-286
lines changed

5 files changed

+160
-286
lines changed

‎packages/react-showroom/client/components/a11y-result-panel-for-frames.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface A11yResultPanelForFramesProps {
1616
selectors: Array<string>;
1717
color: string;
1818
}) => void;
19-
resetHiglights: () => void;
19+
resetHighlights: () => void;
2020
scrollToFrameWhenSelect?: boolean;
2121
}
2222

@@ -77,7 +77,7 @@ export const A11yResultPanelForFrames = (
7777
}
7878
}
7979
: undefined,
80-
props.resetHiglights
80+
props.resetHighlights
8181
)}
8282
>
8383
<Tabs.List>

‎packages/react-showroom/client/components/radio-dropdown.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CheckIcon } from '@heroicons/react/20/solid';
2-
import { DropdownMenu, DropdownMenuContentProps } from '@showroomjs/ui';
2+
import { DropdownMenu, DropdownMenuContentProps, tw } from '@showroomjs/ui';
33

44
export interface RadioDropdownProps<Value extends string>
55
extends DropdownMenuContentProps {
@@ -27,13 +27,7 @@ export const RadioDropdown = <Value extends string>({
2727
{options.map((option, i) => (
2828
<DropdownMenu.RadioItem
2929
value={option.value}
30-
css={{
31-
paddingLeft: '$8',
32-
'@md': {
33-
fontSize: '$sm',
34-
lineHeight: '$sm',
35-
},
36-
}}
30+
className={tw(['!pl-8 md:!text-sm'])}
3731
key={i}
3832
>
3933
<DropdownMenu.ItemIndicator>

‎packages/react-showroom/client/components/standalone-code-live-editor-comment.tsx

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,47 @@
1-
import { styled, tw } from '@showroomjs/ui';
2-
import * as React from 'react';
31
import { XMarkIcon } from '@heroicons/react/20/solid';
2+
import { tw } from '@showroomjs/ui';
3+
import * as React from 'react';
44

5-
const CommentListImpl = styled('ul', {
6-
display: 'grid',
7-
gap: '$3',
8-
padding: '$3',
9-
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
5+
const CommentListImpl = React.forwardRef<
6+
HTMLUListElement,
7+
React.ComponentPropsWithoutRef<'ul'>
8+
>(function CommentList(props, forwardedRef) {
9+
return (
10+
<ul
11+
{...props}
12+
ref={forwardedRef}
13+
className={tw(['grid gap-3 p-3'], [props.className])}
14+
style={{
15+
gridTemplateColumns: 'repeat(auto-fill, minmax(300px,1fr))', // not working with tailwind
16+
...(props.style || {}),
17+
}}
18+
/>
19+
);
1020
});
1121

1222
interface CommentItemProps extends React.ComponentPropsWithoutRef<'li'> {
1323
onDismiss: () => void;
24+
active?: boolean;
1425
}
1526

16-
function CommentItemImpl({ children, onDismiss, ...props }: CommentItemProps) {
27+
function CommentItem({
28+
children,
29+
onDismiss,
30+
className,
31+
active,
32+
...props
33+
}: CommentItemProps) {
1734
return (
18-
<li {...props}>
35+
<li
36+
{...props}
37+
className={tw(
38+
[
39+
'relative text-sm px-6 py-3 whitespace-pre-wrap cursor-pointer',
40+
active ? 'bg-yellow-200 shadow-lg' : 'bg-white',
41+
],
42+
[className]
43+
)}
44+
>
1945
<button
2046
onClick={onDismiss}
2147
type="button"
@@ -32,25 +58,6 @@ function CommentItemImpl({ children, onDismiss, ...props }: CommentItemProps) {
3258
);
3359
}
3460

35-
const CommentItem = styled(CommentItemImpl, {
36-
px: '$6',
37-
py: '$3',
38-
cursor: 'pointer',
39-
backgroundColor: 'White',
40-
fontSize: '$sm',
41-
lineHeight: '$sm',
42-
position: 'relative',
43-
whiteSpace: 'pre-wrap',
44-
variants: {
45-
active: {
46-
true: {
47-
backgroundColor: '$yellow-200',
48-
shadow: 'lg',
49-
},
50-
},
51-
},
52-
});
53-
5461
export const CommentList = Object.assign(CommentListImpl, {
5562
Item: CommentItem,
5663
});

‎packages/react-showroom/client/components/standalone-code-live-editor-preview.tsx

Lines changed: 57 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { isFunction, isNumber, SupportedLanguage } from '@showroomjs/core';
2-
import { css, styled, tw, useConstant, useQueryParams } from '@showroomjs/ui';
3-
import { Enable as ResizeEnable, Resizable } from 're-resizable';
2+
import { tw, useConstant, useQueryParams } from '@showroomjs/ui';
3+
import { Resizable, Enable as ResizeEnable } from 're-resizable';
44
import * as React from 'react';
55
import { useCodeFrameContext } from '../lib/code-frame-context';
66
import { safeCompress, safeDecompress } from '../lib/compress';
@@ -166,18 +166,25 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
166166
onResultChange={(result) => setResult(dimension.name, result)}
167167
key={dimension.name}
168168
>
169-
<ScreenWrapper isCommenting={props.isCommenting}>
169+
<div
170+
className={tw([
171+
'group/wrapper mb-6',
172+
props.isCommenting && 'pointer-events-none',
173+
])}
174+
>
170175
<DeviceFrame dimension={dimension} showFrame={props.showFrame}>
171-
<Screen
172-
css={
176+
<div
177+
className={tw([
178+
'h-full overflow-hidden transition-shadow bg-white shadow-sm',
179+
'group-hover/wrapper:shadow-lg',
180+
])}
181+
style={
173182
props.showFrame
174183
? {
175184
width: '100%',
176-
height: '100%',
177185
}
178186
: {
179187
width: `${dimension.width}px`,
180-
height: '100%',
181188
}
182189
}
183190
>
@@ -259,11 +266,15 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
259266
}}
260267
data-frame-id={getFrameId(dimension)}
261268
/>
262-
</Screen>
269+
</div>
263270
</DeviceFrame>
264-
<ScreenSize>
265-
<ScreenSizeText
266-
css={
271+
<div className={tw(['px-2 py-1'])}>
272+
<span
273+
className={tw([
274+
'inline-flex flex-col items-start text-sm',
275+
'text-zinc-500 group-hover/wrapper:text-black',
276+
])}
277+
style={
267278
shouldAdjustZoom
268279
? {
269280
transform: `scale(${100 / zoomValue})`,
@@ -276,17 +287,31 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
276287
<A11ySummary
277288
onClick={() => props.onA11ySummaryClick(dimension.name)}
278289
/>
279-
</ScreenSizeText>
280-
</ScreenSize>
281-
</ScreenWrapper>
290+
</span>
291+
</div>
292+
</div>
282293
</A11yResultContextProvider>
283294
);
284295
});
285296

286297
const rootProps = {
287-
className: resizeStyle({
288-
isCommenting: props.isCommenting,
289-
}),
298+
className: tw([
299+
'relative pt-3 pb-6 px-3 bg-zinc-200 overflow-x-auto overflow-y-hidden',
300+
props.isCommenting && 'text-zinc-300',
301+
screenListSize ? 'flex-none' : 'flex-1',
302+
]),
303+
style: {
304+
...(props.isCommenting
305+
? {
306+
cursor: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E"), auto`,
307+
}
308+
: {}),
309+
...(screenListSize
310+
? {
311+
height: screenListSize.height + 36,
312+
}
313+
: {}),
314+
},
290315
onClick: props.isCommenting
291316
? (ev: React.MouseEvent<HTMLElement, MouseEvent>) => {
292317
props.onClickCommentPoint({
@@ -298,20 +323,9 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
298323
};
299324

300325
return props.fitHeight ? (
301-
<Root
302-
{...rootProps}
303-
css={
304-
screenListSize
305-
? {
306-
height: screenListSize.height + 36,
307-
flex: 'none',
308-
}
309-
: {}
310-
}
311-
ref={forwardedRef}
312-
>
326+
<div {...rootProps} ref={forwardedRef}>
313327
<ScreenList
314-
css={
328+
style={
315329
shouldAdjustZoom
316330
? {
317331
transform: `scale(${zoomValue / 100})`,
@@ -330,7 +344,7 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
330344
{content}
331345
</ScreenList>
332346
{props.children}
333-
</Root>
347+
</div>
334348
) : (
335349
<Resizable
336350
enable={resizeEnable}
@@ -353,7 +367,7 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
353367
{...rootProps}
354368
>
355369
<ScreenList
356-
css={
370+
style={
357371
shouldAdjustZoom
358372
? {
359373
transform: `scale(${zoomValue / 100})`,
@@ -387,79 +401,17 @@ const resizeEnable: ResizeEnable = {
387401
topLeft: false,
388402
};
389403

390-
const Root = styled('div', {
391-
flex: 1,
392-
});
393-
394-
const ScreenList = styled('div', {
395-
display: 'flex',
396-
gap: '$6',
397-
variants: {
398-
wrap: {
399-
true: {
400-
flexWrap: 'wrap',
401-
},
402-
},
403-
},
404-
});
405-
406-
const resizeStyle = css({
407-
overflowX: 'auto',
408-
overflowY: 'hidden',
409-
paddingTop: '$3',
410-
paddingBottom: '$6',
411-
px: '$3',
412-
backgroundColor: '$gray-200',
413-
position: 'relative',
414-
variants: {
415-
isCommenting: {
416-
true: {
417-
color: '$gray-300',
418-
cursor: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E"), auto`,
419-
},
420-
},
421-
},
422-
});
423-
424-
const ScreenSize = styled('div', {
425-
gap: '$1',
426-
px: '$2',
427-
py: '$1',
428-
});
429-
430-
const ScreenSizeText = styled('span', {
431-
display: 'inline-flex',
432-
flexDirection: 'column',
433-
alignItems: 'flex-start',
434-
fontSize: '$sm',
435-
lineHeight: '$sm',
436-
color: '$gray-500',
437-
});
438-
439-
const Screen = styled('div', {
440-
shadow: 'sm',
441-
backgroundColor: 'White',
442-
transition: 'box-shadow 100ms ease-in-out',
443-
height: '100%',
444-
overflow: 'hidden',
445-
});
446-
447-
const ScreenWrapper = styled('div', {
448-
[`&:hover ${ScreenSize}`]: {
449-
color: 'Black',
450-
fontWeight: '500',
451-
},
452-
[`&:hover ${Screen}`]: {
453-
shadow: 'lg',
454-
},
455-
marginBottom: '$6',
456-
variants: {
457-
isCommenting: {
458-
true: {
459-
pointerEvents: 'none',
460-
},
461-
},
462-
},
404+
const ScreenList = React.forwardRef<
405+
HTMLDivElement,
406+
React.ComponentPropsWithoutRef<'div'> & { wrap?: boolean }
407+
>(function ScreenList({ wrap, className, ...props }, forwardedRef) {
408+
return (
409+
<div
410+
{...props}
411+
ref={forwardedRef}
412+
className={tw(['flex gap-6', wrap && 'flex-wrap'], [className])}
413+
/>
414+
);
463415
});
464416

465417
const serializeStateMaps = (stateMaps: StateMaps): string => {

0 commit comments

Comments
 (0)