b1d748f8bd
* ui docs * UI docs for display components * docs for display and feedback components * minor edits * minor changes * cleaned up code * Move telemetry * Revised Feedback/Display UI docs & added input UI docs * Docs for Input components * updated icons * docs for input/components * minor edits based on feedback * add css to ui components * Fixed spacing issue in button groups --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
106 lines
3.0 KiB
JavaScript
106 lines
3.0 KiB
JavaScript
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
|
|
import uiModule from "!!raw-loader!@site/src/ui/generated/index.js";
|
|
import uiComponentsCSS from '!!raw-loader!@site/src/ui/uiComponents.css'
|
|
|
|
export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
|
|
const fakePackagesJson = availableComponentPaths.reduce((acc, componentPath, index) => {
|
|
acc[`/node_modules/${componentPath}/package.json`] = {
|
|
hidden: true,
|
|
code: JSON.stringify({
|
|
name: componentPath,
|
|
main: "./index.js",
|
|
}),
|
|
};
|
|
return acc;
|
|
}, {});
|
|
|
|
const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
|
|
acc[`/node_modules/${componentPath}/index.js`] = {
|
|
hidden: true,
|
|
code: uiModule,
|
|
};
|
|
return acc;
|
|
}
|
|
, {});
|
|
|
|
return (
|
|
<SandpackProvider
|
|
files={{
|
|
"/index.js": {
|
|
hidden: true,
|
|
code: `
|
|
import React, { StrictMode } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
|
|
import App from "./App";
|
|
|
|
const root = createRoot(document.getElementById("root"));
|
|
root.render(
|
|
<StrictMode>
|
|
<App />
|
|
</StrictMode>
|
|
);`,
|
|
},
|
|
"/App.tsx": {
|
|
hidden: true,
|
|
code: `import { ThemeProvider } from "@emotion/react";
|
|
import { lightTheme, darkTheme } from "${availableComponentPaths[0]}";
|
|
import { MyComponent } from "./MyComponent.tsx";
|
|
|
|
import './uiComponents.css'
|
|
|
|
console.log("lightTheme", lightTheme);
|
|
|
|
export default function App() {
|
|
return (<ThemeProvider theme={lightTheme}>
|
|
<MyComponent />
|
|
</ThemeProvider>);
|
|
};`,
|
|
},
|
|
"/MyComponent.tsx": {
|
|
code: componentCode,
|
|
},
|
|
"/uiComponents.css": {
|
|
code: uiComponentsCSS,
|
|
hidden: true,
|
|
},
|
|
...fakePackagesJson,
|
|
...fakeIndexesJs,
|
|
}}
|
|
customSetup={{
|
|
entry: "/index.js",
|
|
dependencies: {
|
|
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",
|
|
"framer-motion": "latest",
|
|
uuid: "latest",
|
|
"react-tooltip": "latest",
|
|
"react-router-dom": "latest",
|
|
"@sniptt/guards": "latest",
|
|
"react-router": "latest",
|
|
"@apollo/client": "latest",
|
|
graphql: "latest",
|
|
"react-textarea-autosize": "latest",
|
|
"react-hotkeys-hook": "latest",
|
|
recoil: "latest",
|
|
"@floating-ui/react": "latest",
|
|
"ts-key-enum": "latest",
|
|
"deep-equal": "latest",
|
|
"lodash.debounce": "latest",
|
|
"react-loading-skeleton": "latest",
|
|
},
|
|
}}
|
|
>
|
|
<SandpackLayout>
|
|
<SandpackCodeEditor style={{ minWidth: "100%", height: "auto" }} />
|
|
<SandpackPreview style={{ minWidth: "100%", height: "auto" }} />
|
|
</SandpackLayout>
|
|
</SandpackProvider>
|
|
);
|
|
};
|