diff --git a/packages/react-showroom/client/components/code-preview-frame.tsx b/packages/react-showroom/client/components/code-preview-frame.tsx
index f90102d..9c0588a 100644
--- a/packages/react-showroom/client/components/code-preview-frame.tsx
+++ b/packages/react-showroom/client/components/code-preview-frame.tsx
@@ -1,11 +1,10 @@
import { CommandLineIcon } from '@heroicons/react/20/solid';
import { SupportedLanguage } from '@showroomjs/core';
-import { Alert, icons, tw } from '@showroomjs/ui';
+import { Alert, iconClass, tw } from '@showroomjs/ui';
import * as React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { useStableCallback } from '../lib/callback';
import { useCodeCompilation } from '../lib/use-code-compilation';
-import { Div } from './base';
import { CodePreview } from './code-preview';
import { ErrorFallback } from './error-fallback';
@@ -40,14 +39,12 @@ export const CodePreviewFrame = React.forwardRef<
}, [code]);
return (
-
{isError ? (
@@ -71,25 +68,16 @@ export const CodePreviewFrame = React.forwardRef<
))
)}
{isCompiling && !nonVisual && (
-
-
+
Compiling...
-
+
)}
-
+
);
});
diff --git a/packages/react-showroom/client/components/code-preview-iframe.tsx b/packages/react-showroom/client/components/code-preview-iframe.tsx
index 5abc397..4bed03e 100644
--- a/packages/react-showroom/client/components/code-preview-iframe.tsx
+++ b/packages/react-showroom/client/components/code-preview-iframe.tsx
@@ -1,12 +1,10 @@
import { SupportedLanguage } from '@showroomjs/core';
import {
- css,
ResizeIcon,
- styled,
+ tw,
useDebouncedCallback,
useStableCallback,
} from '@showroomjs/ui';
-import cx from 'classnames';
import { Resizable, Enable as ResizeEnable } from 're-resizable';
import * as React from 'react';
import { useComponentMeta } from '../lib/component-props-context';
@@ -16,7 +14,7 @@ import { getScrollFn } from '../lib/scroll-into-view';
import { useA11yResult } from '../lib/use-a11y-result';
import { useConsole } from '../lib/use-preview-console';
import { PropsEditorContext } from '../lib/use-props-editor';
-import { useActiveWidth, WidthMarkers } from './width-markers';
+import { WidthMarkers, useActiveWidth } from './width-markers';
export interface CodePreviewIframeImperative {
sendToChild: (msg: Message) => void;
@@ -39,11 +37,12 @@ export interface CodePreviewIframeProps {
height?: number;
initialWidth?: number;
'data-frame-id'?: string;
+ style?: React.CSSProperties;
}
const initialHeightMap = new Map();
-export const CodePreviewIframe = styled(function CodePreviewIframe({
+export function CodePreviewIframe({
code,
codeHash,
lang,
@@ -58,6 +57,7 @@ export const CodePreviewIframe = styled(function CodePreviewIframe({
initialHeight = 100,
height: providedHeight,
initialWidth,
+ style,
'data-frame-id': frameId,
}: CodePreviewIframeProps) {
const [frameHeight, setFrameHeight] = React.useState(
@@ -174,14 +174,21 @@ export const CodePreviewIframe = styled(function CodePreviewIframe({
// }, []);
const content = codeHash ? (
-
) : null;
@@ -198,11 +205,13 @@ export const CodePreviewIframe = styled(function CodePreviewIframe({
}}
>
{content}
-
-
-
- {isResizing && }
+
+
+
+ {isResizing && (
+
+ )}
) : (
content
);
-});
+}
const handleWidth = 16;
-const resizableStyle = css({
- overflow: 'hidden',
- display: 'flex',
- border: '1px solid',
- borderColor: '$gray-300',
- borderTopRightRadius: '$base',
- borderBottomRightRadius: '$base',
- backgroundColor: 'White',
- variants: {
- animate: {
- true: {
- transition: 'max-height 300ms ease-in-out',
- },
- },
- },
-});
-
const resizeEnable: ResizeEnable = {
top: false,
right: true,
@@ -277,39 +286,3 @@ const resizeEnable: ResizeEnable = {
bottomLeft: false,
topLeft: false,
};
-
-const SizeDisplay = styled('div', {
- position: 'absolute',
- top: 1,
- right: 16,
- backgroundColor: 'rgba(255, 255, 255, 0.7)',
- fontSize: '$xs',
- lineHeight: '$xs',
- px: '$3',
- py: '$1',
-});
-
-const ResizeHandle = styled('div', {
- flexShrink: 0,
- width: handleWidth,
- backgroundColor: '$gray-200',
- display: 'flex',
- alignItems: 'center',
-});
-
-const HandleIcon = styled(ResizeIcon, {
- color: '$gray-500',
-});
-
-const Frame = styled('iframe', {
- width: '100%',
- flex: 1,
- border: 0,
- variants: {
- animate: {
- true: {
- transition: 'height 300ms ease-in-out',
- },
- },
- },
-});
diff --git a/packages/react-showroom/client/components/link-to-standalone-view.tsx b/packages/react-showroom/client/components/link-to-standalone-view.tsx
index c81bce6..d757ecf 100644
--- a/packages/react-showroom/client/components/link-to-standalone-view.tsx
+++ b/packages/react-showroom/client/components/link-to-standalone-view.tsx
@@ -1,5 +1,5 @@
import { ArrowsPointingOutIcon } from '@heroicons/react/20/solid';
-import { icons, TextTooltip, tw } from '@showroomjs/ui';
+import { iconClass, TextTooltip, tw } from '@showroomjs/ui';
import { Link } from '../lib/routing';
export const LinkToStandaloneView = (props: {
@@ -17,7 +17,7 @@ export const LinkToStandaloneView = (props: {
'inline-flex items-center gap-1 text-sm text-zinc-500 no-underline px-1 hover:text-zinc-700 hover:bg-zinc-100',
])}
>
-
+
) : null;
diff --git a/packages/react-showroom/client/components/sidebar.tsx b/packages/react-showroom/client/components/sidebar.tsx
index e267b75..7e06cee 100644
--- a/packages/react-showroom/client/components/sidebar.tsx
+++ b/packages/react-showroom/client/components/sidebar.tsx
@@ -6,7 +6,7 @@ import {
DropdownMenu,
IconButton,
Portal,
- icons,
+ iconClass,
tw,
useIsClient,
} from '@showroomjs/ui';
@@ -169,7 +169,7 @@ const DropdownSection = (props: {
>
{section.title}
{isExternalLink(section.href) && (
-
+
)}
@@ -279,7 +279,7 @@ const SidebarSection = ({
{section.title}
{isExternalLink(section.href) && (
-
+
)}
diff --git a/packages/react-showroom/client/components/standalone-code-live-editor-preview.tsx b/packages/react-showroom/client/components/standalone-code-live-editor-preview.tsx
index a7098f3..731dbc4 100644
--- a/packages/react-showroom/client/components/standalone-code-live-editor-preview.tsx
+++ b/packages/react-showroom/client/components/standalone-code-live-editor-preview.tsx
@@ -1,5 +1,5 @@
import { isFunction, isNumber, SupportedLanguage } from '@showroomjs/core';
-import { css, styled, useConstant, useQueryParams } from '@showroomjs/ui';
+import { css, styled, tw, useConstant, useQueryParams } from '@showroomjs/ui';
import { Enable as ResizeEnable, Resizable } from 're-resizable';
import * as React from 'react';
import { useCodeFrameContext } from '../lib/code-frame-context';
@@ -185,9 +185,9 @@ export const StandaloneCodeLiveEditorPreviewList = React.forwardRef<
code={props.code}
lang={props.lang}
codeHash={props.codeHash}
- css={{
+ className={tw(['h-full'])}
+ style={{
width: `${dimension.width}px`,
- height: '100%',
}}
imperativeRef={(ref) => {
if (ref) {
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 5531704..886f908 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -1,7 +1,8 @@
import { XMarkIcon } from '@heroicons/react/24/outline';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as React from 'react';
-import { icons, styled, keyframes } from '../stitches.config';
+import { iconClass } from '../shared-styles';
+import { keyframes, styled } from '../stitches.config';
const overlayShow = keyframes({
'0%': { opacity: 0 },
@@ -85,7 +86,7 @@ const DialogContent = styled(
{children}
{showCloseBtn && (
-
+
)}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index b94ab50..cf9f986 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -46,4 +46,5 @@ export { usePersistedState } from './lib/use-persisted-state';
export { searchParamsToObject, useQueryParams } from './lib/use-query-params';
export { useStableCallback } from './lib/use-stable-callback';
export { useTransientState } from './lib/use-transient-state';
+export { iconClass } from './shared-styles';
export * from './stitches.config';
diff --git a/packages/ui/src/shared-styles.ts b/packages/ui/src/shared-styles.ts
new file mode 100644
index 0000000..77734fa
--- /dev/null
+++ b/packages/ui/src/shared-styles.ts
@@ -0,0 +1,3 @@
+import { tw } from './lib/tw';
+
+export const iconClass = tw(['text-zinc-400']);
diff --git a/packages/ui/src/stitches.config.ts b/packages/ui/src/stitches.config.ts
index 22094bf..9d01db7 100644
--- a/packages/ui/src/stitches.config.ts
+++ b/packages/ui/src/stitches.config.ts
@@ -224,10 +224,6 @@ export const {
config,
} = result;
-export const icons = css({
- color: '$gray-400',
-});
-
export const text = css({
variants: {
variant: {