mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UI Component docs (Display & Feedback components) (#2453)

Browse Source 
* 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>
This commit is contained in:
Nimra Ahmed
2023-11-23 02:35:34 +05:00
committed by GitHub
parent ec3cfe6fdb
commit b1d748f8bd
66 changed files with 3394 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/src/ui/SandpackEditor.js
View File

@ -1,10 +1,11 @@
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: false,
hidden: true,
code: JSON.stringify({
name: componentPath,
main: "./index.js",
@ -15,7 +16,7 @@ export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
acc[`/node_modules/${componentPath}/index.js`] = {
hidden: false,
hidden: true,
code: uiModule,
};
return acc;
@ -46,6 +47,10 @@ root.render(
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 />
@ -55,6 +60,10 @@ return (<ThemeProvider theme={lightTheme}>
"/MyComponent.tsx": {
code: componentCode,
},
"/uiComponents.css": {
code: uiComponentsCSS,
hidden: true,
},
...fakePackagesJson,
...fakeIndexesJs,
}}
@ -65,19 +74,31 @@ return (<ThemeProvider theme={lightTheme}>
"react-dom": "latest",
"react-scripts": "^5.0.0",
"@emotion/react": "^11.10.6",
'@emotion/styled': "latest",
'@tabler/icons-react': "latest",
'hex-rgb': "latest"
"@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>
<SandpackCodeEditor style={{ minWidth: "100%", height: "auto" }} />
<SandpackPreview style={{ minWidth: "100%", height: "auto" }} />
</SandpackLayout>
</SandpackProvider>
);