Updating showcase, menus in sidebar with scroll and highligh content,…

… sidebar footer
linked-planet · Feb 15, 2023 · 02cb68a · 02cb68a
1 parent 2ab6819
commit 02cb68a
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 88 deletions.
diff --git a/showcase/src/App.tsx b/showcase/src/App.tsx
@@ -60,6 +60,7 @@ function App() {
                                                 element={<ReactQueryPage/>}
                                             />
                                             <Route
+                                                path="*"
                                                 element={<NotFoundPage/>}
                                             />
                                         </Routes>

diff --git a/showcase/src/components/ShowcaseLeftSidebar.tsx b/showcase/src/components/ShowcaseLeftSidebar.tsx
@@ -2,15 +2,34 @@ import React from "react";
 import {LeftSidebar} from "@atlaskit/page-layout";
 import {
     ButtonItem,
+    Footer,
     Header,
+    NavigationFooter,
     NavigationHeader,
     NestableNavigationContent,
-    Section,
     SideNavigation
 } from "@atlaskit/side-navigation";
+import {State} from "../state/appStore";
+import {useSelector} from "react-redux"
+
+export function scrollAndHighlightElement(id: string) {
+    const element = document.getElementById(id)
+    if (element) {
+        element.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+        } as ScrollIntoViewOptions)
+        element.classList.add("focus")
+        setTimeout(() => {
+            element.classList.remove("focus")
+        }, 1500)
+    }
+}
 
 function ShowcaseLeftSidebar() {
 
+    const menuIds = useSelector((state: State) => state.menu)
+
     return (
         <LeftSidebar>
             <SideNavigation label="">
@@ -19,10 +38,26 @@ function ShowcaseLeftSidebar() {
                 </NavigationHeader>
 
                 <NestableNavigationContent>
-                    <Section>
-                        <ButtonItem>Menu item</ButtonItem>
-                    </Section>
+                    {
+                        menuIds.map((item) => {
+                            return (
+                                <ButtonItem onClick={() => scrollAndHighlightElement(item.id)
+                                }>{item.menuName}</ButtonItem>
+                            )
+                        })
+                    }
                 </NestableNavigationContent>
+
+                <NavigationFooter>
+                    <Footer>
+                        Made with ❤ by
+                        <a href="https://www.linked-planet.com/"> linked-planet</a>
+                    </Footer>
+                    <Footer>
+                        Licensed under
+                        <a href="http://www.apache.org/licenses/LICENSE-2.0"> Apache License, Version 2.0</a>
+                    </Footer>
+                </NavigationFooter>
             </SideNavigation>
         </LeftSidebar>
     )

diff --git a/showcase/src/components/ShowcaseWrapperItem.tsx b/showcase/src/components/ShowcaseWrapperItem.tsx
@@ -45,7 +45,7 @@ function ShowcaseWrapperItem(props: ShowcaseWrapperItemProps) {
     console.info("ShowCaseWrapperItem Code", code)
 
     return (
-        <div style={{padding: "20px 20px"}}>
+        <div id={props.sourceCodeExampleId} menu-name={props.name} className="menu" style={{padding: "20px 20px"}}>
             <h3>{props.name}</h3>
             <div style={{fontWeight: "lighter", fontSize: "0.8rem"}}>
                 <span>Packages: </span>

diff --git a/showcase/src/custom.css b/showcase/src/custom.css
@@ -10,3 +10,11 @@
 div[data-style="ShowcaseStyles-showcaseCopyrightFooter"] span:after {
   content: "Copyright " attr(data-year) " by linked-planet GmbH";
 }
+
+.focus {
+  border: 3px solid #4c9aff55 !important;
+}
+
+.pd {
+  padding: 20px 20px;
+}
diff --git a/showcase/src/page/IntroPage.tsx b/showcase/src/page/IntroPage.tsx
@@ -1,7 +1,16 @@
 import {CodeBlock} from "@atlaskit/code";
+import {useDispatch} from "react-redux";
+import {useEffect} from "react";
 
 function IntroPage() {
 
+    const dispatch = useDispatch()
+    useEffect(() => {
+        dispatch({
+            type: "SET_MENU"
+        })
+    }, [])
+
     return (
         <div>
             <h1>Welcome to UI-Kit-TS</h1>

diff --git a/showcase/src/page/NotFoundPage.tsx b/showcase/src/page/NotFoundPage.tsx
@@ -1,11 +1,19 @@
-import React from "react";
+import React, {useEffect} from "react";
 import EmptyState from "@atlaskit/empty-state";
 import Button from "@atlaskit/button";
 import {useNavigate} from "react-router";
+import {useDispatch} from "react-redux";
 
 function NotFoundPage() {
     const navigation = useNavigate()
 
+    const dispatch = useDispatch()
+    useEffect(() => {
+        dispatch({
+            type: "SET_MENU"
+        })
+    }, [])
+
     return (
         <EmptyState
             header="404 - Not found"

diff --git a/showcase/src/page/ReactQueryPage.tsx b/showcase/src/page/ReactQueryPage.tsx
@@ -1,17 +1,20 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {CodeBlock} from "@atlaskit/code";
+import {useDispatch} from "react-redux";
 
 function ReactQueryPage() {
 
-    const reactQueryInstall =`npm install -s react-query axios`
+    const dispatch = useDispatch()
+
+    const reactQueryInstall = `npm install -s react-query axios`
 
     const initQueryClient = `// index.tsx
 // init axios client
 export const axiosClient = axios.create({...})
 // init query client
 export const queryClient = new QueryClient()`
 
-    const reactQueryRegister =`// index.tsx
+    const reactQueryRegister = `// index.tsx
 <QueryClientProvider client={queryClient}>
     <App/>
 </QueryClientProvider>`
@@ -35,46 +38,62 @@ return (
 ...
 )`
 
+    useEffect(() => {
+        dispatch({
+            type: "SET_MENU"
+        })
+    }, [])
+
     return (
         <div>
             <h1>React-Query</h1>
             <p>React-Query is for fetching data from REST and use it as states inside the application</p>
 
-            <h5>Install React-Query</h5>
-            <p>Not needed if you use this library. It is already included</p>
-            <br/>
-            <CodeBlock
-                language="bash"
-                text={reactQueryInstall}
-            />
-
-            <h5>Create queryClient</h5>
-            <br/>
-            <CodeBlock
-                language="typescript"
-                text={initQueryClient}
-            />
-
-            <h5>Integrate queryClient</h5>
-            <br/>
-            <CodeBlock
-                language="tsx"
-                text={reactQueryRegister}
-            />
-
-            <h5>Create Query</h5>
-            <br/>
-            <CodeBlock
-                language="typescript"
-                text={reactQueryQuery}
-            />
-
-            <h5>Use react query data</h5>
-            <br/>
-            <CodeBlock
-                language="typescript"
-                text={reactQueryUsage}
-            />
+            <div id="dependencies" menu-name="Dependencies" className="menu pd">
+                <h5>Dependencies</h5>
+                <p>This library uses the following dependencies:</p>
+                <br/>
+                <CodeBlock
+                    language="bash"
+                    text={reactQueryInstall}
+                />
+            </div>
+
+            <div id="create-client" menu-name="Create Client" className="menu pd">
+                <h5>Create queryClient</h5>
+                <br/>
+                <CodeBlock
+                    language="typescript"
+                    text={initQueryClient}
+                />
+            </div>
+
+            <div id="integrate-client" menu-name="Integrate Client" className="menu pd">
+                <h5>Integrate queryClient</h5>
+                <br/>
+                <CodeBlock
+                    language="tsx"
+                    text={reactQueryRegister}
+                />
+            </div>
+
+            <div id="create-query" menu-name="Create Query" className="menu pd">
+                <h5 >Create Query</h5>
+                <br/>
+                <CodeBlock
+                    language="typescript"
+                    text={reactQueryQuery}
+                />
+            </div>
+
+            <div id="use-query" menu-name="Use Query" className="menu pd">
+                <h5>Use react query data</h5>
+                <br/>
+                <CodeBlock
+                    language="typescript"
+                    text={reactQueryUsage}
+                />
+            </div>
         </div>
     )
 }

diff --git a/showcase/src/page/ReduxPage.tsx b/showcase/src/page/ReduxPage.tsx
@@ -1,11 +1,13 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {CodeBlock} from "@atlaskit/code";
+import {useDispatch} from "react-redux";
 
 function ReduxPage() {
 
-    const reduxInstall =`npm install -s react-redux @types/react-redux @reduxjs/toolkit`
+    const reduxInstall = `npm install -s react-redux @types/react-redux @reduxjs/toolkit`
 
-    const reduxAppStore = `import notificationReducer from "./reducers/notificationReducer";
+    const reduxAppStore = `// state/appStore.ts
+import notificationReducer from "./reducers/notificationReducer";
 import {configureStore} from "@reduxjs/toolkit";
 import stackReducer from "./reducers/stackReducer";
 
@@ -18,12 +20,13 @@ export const appStore = configureStore({
 
 export type State = ReturnType<typeof appStore.getState>`
 
-    const reduxRegister =`// index.tsx
+    const reduxRegister = `// index.tsx
 <Provider store={appStore}>
     <App/>
 </Provider>`
 
-    const reduxReducer = `import {Notification} from "../../model/AppModel";
+    const reduxReducer = `// state/reducers/notificationReducer.ts
+import {Notification} from "../../model/AppModel";    
 
 const initialState: Notification[] = []
 
@@ -70,7 +73,7 @@ const notificationReducer = (state: Notification[] = initialState, action: Actio
 
 export default notificationReducer`
 
-    const reduxUsage = `// get updating notifications from stack (reloads on change)
+    const reduxUsage = `// get updating notifications from state (reloads component on state change)
 const notifications = useSelector((appState: State) => appState.notifications)
 
 // update state
@@ -82,47 +85,63 @@ dispatch({
     type: 'ADD_NOTIFICATION',
     notification: notification
 })`
+    const dispatch = useDispatch()
+    useEffect(() => {
+        dispatch({
+            type: "SET_MENU"
+        })
+    }, [])
 
     return (
         <div>
             <h1>Redux</h1>
-            <p>Redux is used for global stack handling. For example for handling notifications</p>
-
-            <h5>Install Redux</h5>
-            <p>Not needed if you use this library. It is already included</p>
-            <br/>
-            <CodeBlock
-                language="bash"
-                text={reduxInstall}
-            />
-
-            <h5>Init appStore</h5>
-            <br/>
-            <CodeBlock
-                language="typescript"
-                text={reduxAppStore}
-            />
-
-            <h5>Integrate appStore</h5>
-            <br/>
-            <CodeBlock
-                language="tsx"
-                text={reduxRegister}
-            />
-
-            <h5>Create reducer</h5>
-            <br/>
-            <CodeBlock
-                language="typescript"
-                text={reduxReducer}
-            />
-
-            <h5>Use and change redux states</h5>
-            <br/>
-            <CodeBlock
-                language="typescript"
-                text={reduxUsage}
-            />
+            <p>Redux is used for global state handling. For example for handling notifications.</p>
+
+            <div id="dependencies" menu-name="Dependencies" className="menu pd">
+                <h5>Dependencies</h5>
+                <p>This library uses the following dependencies:</p>
+                <br/>
+                <CodeBlock
+                    language="bash"
+                    text={reduxInstall}
+                />
+            </div>
+
+            <div id="init-appstore" menu-name="Init AppStore" className="menu pd">
+                <h5>Init appStore</h5>
+                <br/>
+                <CodeBlock
+                    language="typescript"
+                    text={reduxAppStore}
+                />
+            </div>
+
+            <div id="integrate-appstore" menu-name="Integrate AppStore" className="menu pd">
+                <h5>Integrate appStore</h5>
+                <br/>
+                <CodeBlock
+                    language="tsx"
+                    text={reduxRegister}
+                />
+            </div>
+
+            <div id="create-reducer" menu-name="Create Reducer" className="menu pd">
+                <h5>Create reducer</h5>
+                <br/>
+                <CodeBlock
+                    language="typescript"
+                    text={reduxReducer}
+                />
+            </div>
+
+            <div id="use-redux" menu-name="Use Redux States" className="menu pd">
+                <h5>Use and change redux states</h5>
+                <br/>
+                <CodeBlock
+                    language="typescript"
+                    text={reduxUsage}
+                />
+            </div>
         </div>
     )
 }