Live code editor for UI docs (#2351)

* Docausaurus code live editor test

* Docusaurus sandpack test

* Fix setup

* Delete files

* Fixes

* Complete work

* Fix config

* Fix config

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

docs/docs/contributor/frontend/ui-components/display/_category_.json

@@ -1,6 +1,6 @@
 {
-  "label": "Forms",
-  "position": 2,
+  "label": "Display",
+  "position": 0,
   "collapsible": true,
   "collapsed": true,
   "customProps": {

docs/docs/contributor/frontend/ui-components/display/checkmark.mdx

@@ -0,0 +1,16 @@
+---
+title: Checkmark
+sidebar_position: 1
+---
+
+import { SandpackEditor} from '@site/src/ui/SandpackEditor'
+
+<SandpackEditor
+  componentPath='@/ui/Checkmark/components/Checkmark'
+  componentCode={`import { Checkmark } from "@/ui/Checkmark/components/Checkmark";
+
+export const MyComponent = () => {
+ return <Checkmark />;
+}
+`} 
+/>

docs/docs/contributor/frontend/ui-components/forms/button.mdx

@@ -1,15 +0,0 @@
----
-title: Button
-sidebar_position: 1
----
-
-import IframeResizer from 'iframe-resizer-react';
-
-<IframeResizer
-  checkOrigin={false}
-  inPageLinks
-  src="https://storybook.twenty.com/iframe.html?id=ui-button-button--docs&viewMode=docs&singleStory=true"
-  style={{ width: '1px', minWidth: '100%'}}
-/>
- 
- 

docs/docs/contributor/frontend/ui-components/ui-components.mdx

@@ -2,6 +2,3 @@
 title: Overview
 sidebar_position: 0
 ---
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />