Adding the possibility to add multiple ui components in the live code editor in the docs (#2381)

* working

* forgot docs folder

* modify according to comments
This commit is contained in:
bosiraphael 2023-11-07 12:33:40 +01:00 committed by GitHub
parent 398a8d732d
commit 7aa6b20418
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 31 deletions

View File

@ -6,11 +6,13 @@ sidebar_position: 1
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
<SandpackEditor
componentPath='@/ui/Checkmark/components/Checkmark'
availableComponentPaths={['@/ui/Checkmark/components/Checkmark', '@/ui/Button/components/Button']}
componentCode={`import { Checkmark } from "@/ui/Checkmark/components/Checkmark";
import { Button } from "@/ui/Button/components/Button";
export const MyComponent = () => {
return <Checkmark />;
return <><Checkmark /><Button title="New task"
variant={'secondary'}
onClick={() => console.log('click')}/></>
}
`}
/>

View File

@ -1,7 +1,27 @@
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
import uiModule from "!!raw-loader!@site/src/ui/generated/index.js";
export const SandpackEditor = ({ componentPath, componentCode}) => {
export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
const fakePackagesJson = availableComponentPaths.reduce((acc, componentPath, index) => {
acc[`/node_modules/${componentPath}/package.json`] = {
hidden: false,
code: JSON.stringify({
name: componentPath,
main: "./index.js",
}),
};
return acc;
}, {});
const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
acc[`/node_modules/${componentPath}/index.js`] = {
hidden: false,
code: uiModule,
};
return acc;
}
, {});
return (
<SandpackProvider
files={{
@ -22,11 +42,14 @@ root.render(
},
"/App.tsx": {
hidden: true,
code: `import { ThemeProvider } from "${componentPath}";
code: `import { ThemeProvider } from "@emotion/react";
import { lightTheme, darkTheme } from "${availableComponentPaths[0]}";
import { MyComponent } from "./MyComponent.tsx";
console.log("lightTheme", lightTheme);
export default function App() {
return (<ThemeProvider>
return (<ThemeProvider theme={lightTheme}>
<MyComponent />
</ThemeProvider>);
};`,
@ -34,17 +57,8 @@ return (<ThemeProvider>
"/MyComponent.tsx": {
code: componentCode,
},
[`/node_modules/${componentPath}/package.json`]: {
hidden: true,
code: JSON.stringify({
name: componentPath,
main: "./index.js",
}),
},
[`/node_modules/${componentPath}/index.js`]: {
hidden: true,
code: uiModule,
},
...fakePackagesJson,
...fakeIndexesJs,
}}
customSetup={{
entry: "/index.js",
@ -52,6 +66,10 @@ return (<ThemeProvider>
react: "latest",
"react-dom": "latest",
"react-scripts": "^5.0.0",
"@emotion/react": "^11.10.6",
'@emotion/styled': "latest",
'@tabler/icons-react': "latest",
'hex-rgb': "latest"
},
}}
>

View File

@ -1,5 +1,6 @@
export { ThemeProvider } from '@emotion/react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';
import React, { FunctionComponent } from 'react';
declare const lightTheme: {
accent: {
@ -276,16 +277,40 @@ declare const lightTheme: {
lastLayerZIndex: number;
};
type ThemeType = typeof lightTheme;
declare const darkTheme: ThemeType;
type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>;
declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element;
declare const ThemeProvider: ({ children }: {
children: any;
}) => react_jsx_runtime.JSX.Element;
type IconComponent = FunctionComponent<{
color?: string;
size?: number;
stroke?: number;
}>;
type ButtonSize = 'medium' | 'small';
type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
type ButtonAccent = 'default' | 'blue' | 'danger';
type ButtonProps = {
className?: string;
Icon?: IconComponent;
title?: string;
fullWidth?: boolean;
variant?: ButtonVariant;
size?: ButtonSize;
position?: ButtonPosition;
accent?: ButtonAccent;
soon?: boolean;
disabled?: boolean;
focus?: boolean;
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
declare const Button: ({ className, Icon, title, fullWidth, variant, size, accent, position, soon, disabled, focus, onClick, }: ButtonProps) => react_jsx_runtime.JSX.Element;
declare module '@emotion/react' {
interface Theme extends ThemeType {
}
}
export { Checkmark, CheckmarkProps, ThemeProvider };
export { Button, ButtonAccent, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkmark, CheckmarkProps, darkTheme, lightTheme };

File diff suppressed because one or more lines are too long

View File

@ -9,6 +9,5 @@ export default defineConfig([
dts: true,
clean: true,
outDir: "../docs/src/ui/generated",
noExternal: ['@emotion/react', '@emotion/styled', '@tabler/icons-react', 'hex-rgb']
},
]);

View File

@ -1,12 +1,8 @@
import { ThemeProvider as EmotionThemProvider } from '@emotion/react';
import { ThemeType } from './src/modules/ui/theme/constants/theme';
import { lightTheme, ThemeType } from './src/modules/ui/theme/constants/theme';
export {ThemeProvider} from '@emotion/react';
export const ThemeProvider = ({ children }: { children: any }) => {
return (
<EmotionThemProvider theme={lightTheme}>{children}</EmotionThemProvider>
);
};
export {lightTheme, darkTheme} from './src/modules/ui/theme/constants/theme';
declare module '@emotion/react' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
@ -14,3 +10,4 @@ declare module '@emotion/react' {
}
export * from './src/modules/ui/display/checkmark/components/Checkmark';
export * from './src/modules/ui/input/button/components/Button';