From 02cb68aef79b9fdd5e10cd7d1092e6a86f2aa8d1 Mon Sep 17 00:00:00 2001 From: Philipp Karlsson Date: Wed, 15 Feb 2023 09:52:27 +0100 Subject: [PATCH] Updating showcase, menus in sidebar with scroll and highligh content, sidebar footer --- showcase/src/App.tsx | 1 + .../src/components/ShowcaseLeftSidebar.tsx | 43 ++++++- .../src/components/ShowcaseWrapperItem.tsx | 2 +- showcase/src/custom.css | 8 ++ showcase/src/page/IntroPage.tsx | 9 ++ showcase/src/page/NotFoundPage.tsx | 10 +- showcase/src/page/ReactQueryPage.tsx | 95 +++++++++------- showcase/src/page/ReduxPage.tsx | 105 +++++++++++------- showcase/src/page/WrappersPage.tsx | 5 + showcase/src/state/appStore.ts | 4 +- showcase/src/state/reducers/menuReducer.ts | 33 ++++++ 11 files changed, 227 insertions(+), 88 deletions(-) create mode 100644 showcase/src/state/reducers/menuReducer.ts diff --git a/showcase/src/App.tsx b/showcase/src/App.tsx index 712aed97..067ca9c9 100644 --- a/showcase/src/App.tsx +++ b/showcase/src/App.tsx @@ -60,6 +60,7 @@ function App() { element={} /> } /> diff --git a/showcase/src/components/ShowcaseLeftSidebar.tsx b/showcase/src/components/ShowcaseLeftSidebar.tsx index e7b67ea6..c43dca85 100644 --- 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 ( @@ -19,10 +38,26 @@ function ShowcaseLeftSidebar() { -
- Menu item -
+ { + menuIds.map((item) => { + return ( + scrollAndHighlightElement(item.id) + }>{item.menuName} + ) + }) + } + + + + + ) diff --git a/showcase/src/components/ShowcaseWrapperItem.tsx b/showcase/src/components/ShowcaseWrapperItem.tsx index a0b56572..76ac93ee 100644 --- 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 ( -
+

{props.name}

Packages: diff --git a/showcase/src/custom.css b/showcase/src/custom.css index c0bd9a09..14e308e3 100644 --- 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 index b8cb8276..26bb33dd 100644 --- 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 (

Welcome to UI-Kit-TS

diff --git a/showcase/src/page/NotFoundPage.tsx b/showcase/src/page/NotFoundPage.tsx index b70d32e0..bc642aea 100644 --- 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 ( ` @@ -35,46 +38,62 @@ return ( ... )` + useEffect(() => { + dispatch({ + type: "SET_MENU" + }) + }, []) + return (

React-Query

React-Query is for fetching data from REST and use it as states inside the application

-
Install React-Query
-

Not needed if you use this library. It is already included

-
- - -
Create queryClient
-
- - -
Integrate queryClient
-
- - -
Create Query
-
- - -
Use react query data
-
- +
+
Dependencies
+

This library uses the following dependencies:

+
+ +
+ +
+
Create queryClient
+
+ +
+ +
+
Integrate queryClient
+
+ +
+ +
+
Create Query
+
+ +
+ +
+
Use react query data
+
+ +
) } diff --git a/showcase/src/page/ReduxPage.tsx b/showcase/src/page/ReduxPage.tsx index 7d0b3894..3c25e963 100644 --- 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` - const reduxRegister =`// index.tsx + const reduxRegister = `// index.tsx ` - 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 (

Redux

-

Redux is used for global stack handling. For example for handling notifications

- -
Install Redux
-

Not needed if you use this library. It is already included

-
- - -
Init appStore
-
- - -
Integrate appStore
-
- - -
Create reducer
-
- - -
Use and change redux states
-
- +

Redux is used for global state handling. For example for handling notifications.

+ +
+
Dependencies
+

This library uses the following dependencies:

+
+ +
+ +
+
Init appStore
+
+ +
+ +
+
Integrate appStore
+
+ +
+ +
+
Create reducer
+
+ +
+ +
+
Use and change redux states
+
+ +
) } diff --git a/showcase/src/page/WrappersPage.tsx b/showcase/src/page/WrappersPage.tsx index 7dc307a8..149b54ac 100644 --- a/showcase/src/page/WrappersPage.tsx +++ b/showcase/src/page/WrappersPage.tsx @@ -30,9 +30,11 @@ import TextAreaShowcase from "../components/showcase/wrapper/TextAreaShowcase"; import TextFieldShowcase from "../components/showcase/wrapper/TextFieldShowcase"; import ToggleShowcase from "../components/showcase/wrapper/ToggleShowcase"; import TooltipShowcase from "../components/showcase/wrapper/TooltipShowcase"; +import {useDispatch} from "react-redux" function WrappersPage() { + const dispatch = useDispatch() const [overallSourceCode, setOverallSourceCode] = useState("") // retrieve source code @@ -43,6 +45,9 @@ function WrappersPage() { console.info("Loaded SourceCode:", sourceCode); setOverallSourceCode(sourceCode); }); + dispatch({ + type: "SET_MENU" + }) }, []) return ( diff --git a/showcase/src/state/appStore.ts b/showcase/src/state/appStore.ts index 01a23c13..34a74e81 100644 --- a/showcase/src/state/appStore.ts +++ b/showcase/src/state/appStore.ts @@ -1,11 +1,13 @@ import notificationReducer from "./reducers/notificationReducer"; import {configureStore} from "@reduxjs/toolkit"; import stackReducer from "./reducers/stackReducer"; +import menuReducer from "./reducers/menuReducer"; export const appStore = configureStore({ reducer: { notifications: notificationReducer, - stack: stackReducer + stack: stackReducer, + menu: menuReducer } }) diff --git a/showcase/src/state/reducers/menuReducer.ts b/showcase/src/state/reducers/menuReducer.ts new file mode 100644 index 00000000..8d5f5214 --- /dev/null +++ b/showcase/src/state/reducers/menuReducer.ts @@ -0,0 +1,33 @@ + +const initialState: MenuItem[] = [] + +export interface MenuItem { + id: string + menuName: string | null +} + +export interface SetMenu { + type: "SET_MENU" +} + +export interface ClearMenu { + type: "CLEAR_MENU" +} + +export type Action = SetMenu | ClearMenu + +const menuReducer = (state: MenuItem[] = initialState, action: Action) => { + switch (action.type) { + case "SET_MENU": + const ids = Array.from(document.getElementsByClassName("menu")).map((item) => { + return { id: item.id, menuName: item.getAttribute("menu-name")} + }) + return [...ids] + case "CLEAR_MENU": + return [] + default: + return [...state] + } +} + +export default menuReducer \ No newline at end of file