added dev stuff

src/components/Timeline/TimelineCard.jsx

@@ -3,7 +3,7 @@ import TimelineSeparator from "@mui/lab/TimelineSeparator";
 import TimelineDot from "@mui/lab/TimelineDot";
 import TimelineConnector from "@mui/lab/TimelineConnector";
 import TimelineContent from "@mui/lab/TimelineContent";
-import { useContext, useCallback } from "react";
+import { useContext } from "react";
 import { TimelineOppositeContent } from "@mui/lab";
 import { Paper, Typography } from "@mui/material";
 import Button from "@mui/material/Button";

src/dev/README.md

@@ -0,0 +1,70 @@
+This directory contains utility files which enable some visual features of the
+[React Buddy](https://plugins.jetbrains.com/plugin/17467-react-buddy/) plugin.
+Files in the directory should be committed to source control.
+
+React Buddy palettes describe reusable components and building blocks. `React Palette` tool window becomes available
+when an editor with React components is active. You can drag and drop items from the tool window to the code editor or
+JSX Outline. Alternatively, you can insert components from the palette using code generation
+action (`alt+insert` / `⌘ N`).
+
+Add components to the palette using `Add to React Palette` intention or via palette editor (look for the corresponding
+link in `palette.tsx`). There are some ready-to-use palettes for popular React libraries which are published as npm
+packages and can be added as a dependency:
+
+```jsx
+import AntdPalette from "@react-buddy/palette-antd";
+import ReactIntlPalette from "@react-buddy/palette-react-intl";
+
+export const PaletteTree = () => (
+  <Palette>
+    <AntdPalette/> 
+    <ReactIntlPalette/>
+    <Category name="App templates">
+      <Component name="Card">
+        <Variant name="Loading">
+          <Card title="Card title">
+            <Skeleton loading={true} avatar active>
+                Card content
+            </Skeleton>
+          </Card>
+        </Variant>
+      </Component>
+      <Component name="Form">
+        <Variant proto={FormTemplate}/>
+      </Component>
+    </Category>
+  </Palette>
+)
+```
+
+React Buddy explicitly registers any previewed component in the `previews.tsx` file so that you can specify required
+props.
+
+```jsx
+<ComponentPreview path="/Page">
+    <Page title={'Hello'}/>
+</ComponentPreview>
+```
+
+You can add some global initialization logic for the preview mode in `useInitital.ts`,
+e.g. implicitly obtain user session:
+
+```typescript
+export const useInitial: () => InitialHookStatus = () => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [error, setError] = useState<boolean>(false);
+
+    useEffect(() => {
+        setLoading(true);
+        async function login() {
+            const response = await loginRequest(DEV_LOGIN, DEV_PASSWORD);
+            if (response?.status !== 200) {
+                setError(true);
+            }
+            setLoading(false);
+        }
+        login();
+    }, []);
+    return { loading, error };
+};
+```

src/dev/index.js

@@ -0,0 +1,9 @@
+import React from "react"
+import {useInitial} from "./useInitial"
+
+const ComponentPreviews = React.lazy(() => import("./previews"))
+
+export {
+    ComponentPreviews,
+    useInitial
+}

src/dev/palette.jsx

@@ -0,0 +1,27 @@
+import {Fragment} from "react"
+import {
+    Category,
+    Component,
+    Variant,
+    Palette,
+} from "@react-buddy/ide-toolbox"
+import MUIPalette from "@react-buddy/palette-mui";
+
+export const PaletteTree = () => (
+    <Palette>
+        <Category name="App">
+            <Component name="Loader">
+                <Variant>
+                    <ExampleLoaderComponent/>
+                </Variant>
+            </Component>
+        </Category>
+        <MUIPalette/>
+    </Palette>
+)
+
+export function ExampleLoaderComponent() {
+    return (
+        <Fragment>Loading...</Fragment>
+    )
+}

src/dev/previews.jsx

@@ -0,0 +1,11 @@
+import {Previews} from '@react-buddy/ide-toolbox'
+import {PaletteTree} from './palette'
+
+const ComponentPreviews = () => {
+    return (
+        <Previews palette={<PaletteTree/>}>
+        </Previews>
+    )
+}
+
+export default ComponentPreviews

src/index.jsx

@@ -1,7 +1,13 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import {createRoot} from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import {DevSupport} from "@react-buddy/ide-toolbox";
+import {ComponentPreviews, useInitial} from "./dev/index.js";
 
 const root = createRoot(document.getElementById("root"));
-root.render(<App />);
+root.render(<DevSupport ComponentPreviews={ComponentPreviews}
+                        useInitialHook={useInitial}
+>
+    <App/>
+</DevSupport>);