Feat/creating examples (#404)

* feat: added creation stories

* feat: editing examples

apps/mantine-react-table-docs/example-groups/EditingCRUD.tsx

@@ -5,6 +5,7 @@ import ModalExample from '../examples/editing-crud-modal';
 import InlineRowExample from '../examples/editing-crud-row';
 import InlineCellExample from '../examples/editing-crud-cell';
 import InlineTableExample from '../examples/editing-crud-table';
+import TreeEditingExample from '../examples/editing-crud-tree';
 import Link from 'next/link';
 import { IconExternalLink } from '@tabler/icons-react';
 
@@ -33,6 +34,9 @@ const EditingCRUD = ({ isPage = false }) => {
             <Tabs.Tab value="editing-crud-inline-table">
               Inline Table (All Rows Editable)
             </Tabs.Tab>
+            <Link href="/docs/editing-crud-tree">
+              <Tabs.Tab value="editing-crud-tree">Tree Editing</Tabs.Tab>
+            </Link>
             <Link href="/docs/examples">
               <Tabs.Tab value="more">
                 More Examples <IconExternalLink size="1rem" />
@@ -51,6 +55,9 @@ const EditingCRUD = ({ isPage = false }) => {
           <Tabs.Panel value="editing-crud-inline-table">
             <InlineTableExample />
           </Tabs.Panel>
+          <Tabs.Panel value="editing-crud-tree">
+            <TreeEditingExample />
+          </Tabs.Panel>
         </Tabs>
       </Box>
     </>

apps/mantine-react-table-docs/example-groups/EditingCRUDExamples.tsx

@@ -0,0 +1,77 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Box, Tabs } from '@mantine/core';
+import Link from 'next/link';
+import { IconExternalLink } from '@tabler/icons-react';
+import ModalExample from '../examples/editing-crud-modal';
+import InlineRowExample from '../examples/editing-crud-row';
+import InlineCellExample from '../examples/editing-crud-cell';
+import InlineTableExample from '../examples/editing-crud-table';
+import TreeEditingExample from '../examples/editing-crud-tree';
+
+const EditingCRUDExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'editing-crud',
+  );
+
+  return (
+    <>
+      <Box style={{ borderBottom: '1px solid', borderColor: 'gray.3' }}>
+        <Tabs
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+        >
+          <Tabs.List>
+            <Tabs.Tab value="editing-crud">Modal</Tabs.Tab>
+            <Tabs.Tab value="editing-crud-inline-row">Inline Row</Tabs.Tab>
+            <Tabs.Tab value="editing-crud-inline-cell">Inline Cell</Tabs.Tab>
+            <Tabs.Tab value="editing-crud-inline-table">Inline Table</Tabs.Tab>
+            <Tabs.Tab value="editing-crud-tree">Tree Editing</Tabs.Tab>
+            <Link href="/docs/examples/remote" passHref legacyBehavior>
+              <Tabs.Tab value="more">
+                <Box
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.25rem',
+                  }}
+                >
+                  Non TanStack Query Fetching
+                  <IconExternalLink size="1rem" />
+                </Box>
+              </Tabs.Tab>
+            </Link>
+            <Link href="/docs/examples" passHref legacyBehavior>
+              <Tabs.Tab value="more">
+                <Box
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.25rem',
+                  }}
+                >
+                  More Examples
+                  <IconExternalLink size="1rem" />
+                </Box>
+              </Tabs.Tab>
+            </Link>
+          </Tabs.List>
+        </Tabs>
+      </Box>
+      <Box>
+        {activeTab === 'editing-crud' && <ModalExample />}
+        {activeTab === 'editing-crud-inline-row' && <InlineRowExample />}
+        {activeTab === 'editing-crud-inline-cell' && <InlineCellExample />}
+        {activeTab === 'editing-crud-inline-table' && <InlineTableExample />}
+        {activeTab === 'editing-crud-tree' && <TreeEditingExample />}
+      </Box>
+    </>
+  );
+};
+
+export default EditingCRUDExamples;

apps/mantine-react-table-docs/examples/editing-crud-tree/index.tsx

@@ -0,0 +1,16 @@
+import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
+import Example from './sandbox/src/TS';
+
+const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
+
+const ExampleTable = () => {
+  return (
+    <SourceCodeSnippet
+      Component={Example}
+      typeScriptCode={TS}
+      tableId="editing-crud-tree"
+    />
+  );
+};
+
+export default ExampleTable;

apps/mantine-react-table-docs/examples/editing-crud-tree/sandbox/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

apps/mantine-react-table-docs/examples/editing-crud-tree/sandbox/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`

apps/mantine-react-table-docs/examples/editing-crud-tree/sandbox/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Material React Table Example</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>