navbar improve & add content

frontend/src/dev/README.md

@@ -0,0 +1,66 @@
+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 };
+};
+```

frontend/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
+}

frontend/src/dev/palette.jsx

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

frontend/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

frontend/src/dev/useInitial.js

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+
+export const useInitial = () => {
+    const [status, setStatus] = useState({
+        loading: false,
+        error: false
+    })
+    /*
+      Implement hook functionality here.
+      If you need to execute async operation, set loading to true and when it's over, set loading to false.
+      If you caught some errors, set error status to true.
+      Initial hook is considered to be successfully completed if it will return {loading: false, error: false}.
+    */
+    return status
+}