Skip to content

Commit 02cb68a

Browse files
author
Philipp Karlsson
committed
Updating showcase, menus in sidebar with scroll and highligh content, sidebar footer
1 parent 2ab6819 commit 02cb68a

File tree

11 files changed

+227
-88
lines changed

11 files changed

+227
-88
lines changed

‎showcase/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ function App() {
6060
element={<ReactQueryPage/>}
6161
/>
6262
<Route
63+
path="*"
6364
element={<NotFoundPage/>}
6465
/>
6566
</Routes>

‎showcase/src/components/ShowcaseLeftSidebar.tsx‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,34 @@ import React from "react";
22
import {LeftSidebar} from "@atlaskit/page-layout";
33
import {
44
ButtonItem,
5+
Footer,
56
Header,
7+
NavigationFooter,
68
NavigationHeader,
79
NestableNavigationContent,
8-
Section,
910
SideNavigation
1011
} from "@atlaskit/side-navigation";
12+
import {State} from "../state/appStore";
13+
import {useSelector} from "react-redux"
14+
15+
export function scrollAndHighlightElement(id: string) {
16+
const element = document.getElementById(id)
17+
if (element) {
18+
element.scrollIntoView({
19+
behavior: "smooth",
20+
block: "center"
21+
} as ScrollIntoViewOptions)
22+
element.classList.add("focus")
23+
setTimeout(() => {
24+
element.classList.remove("focus")
25+
}, 1500)
26+
}
27+
}
1128

1229
function ShowcaseLeftSidebar() {
1330

31+
const menuIds = useSelector((state: State) => state.menu)
32+
1433
return (
1534
<LeftSidebar>
1635
<SideNavigation label="">
@@ -19,10 +38,26 @@ function ShowcaseLeftSidebar() {
1938
</NavigationHeader>
2039

2140
<NestableNavigationContent>
22-
<Section>
23-
<ButtonItem>Menu item</ButtonItem>
24-
</Section>
41+
{
42+
menuIds.map((item) => {
43+
return (
44+
<ButtonItem onClick={() => scrollAndHighlightElement(item.id)
45+
}>{item.menuName}</ButtonItem>
46+
)
47+
})
48+
}
2549
</NestableNavigationContent>
50+
51+
<NavigationFooter>
52+
<Footer>
53+
Made with ❤ by
54+
<a href="https://www.linked-planet.com/"> linked-planet</a>
55+
</Footer>
56+
<Footer>
57+
Licensed under
58+
<a href="http://www.apache.org/licenses/LICENSE-2.0"> Apache License, Version 2.0</a>
59+
</Footer>
60+
</NavigationFooter>
2661
</SideNavigation>
2762
</LeftSidebar>
2863
)

‎showcase/src/components/ShowcaseWrapperItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function ShowcaseWrapperItem(props: ShowcaseWrapperItemProps) {
4545
console.info("ShowCaseWrapperItem Code", code)
4646

4747
return (
48-
<div style={{padding: "20px 20px"}}>
48+
<div id={props.sourceCodeExampleId} menu-name={props.name} className="menu" style={{padding: "20px 20px"}}>
4949
<h3>{props.name}</h3>
5050
<div style={{fontWeight: "lighter", fontSize: "0.8rem"}}>
5151
<span>Packages: </span>

‎showcase/src/custom.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,11 @@
1010
div[data-style="ShowcaseStyles-showcaseCopyrightFooter"] span:after {
1111
content: "Copyright " attr(data-year) " by linked-planet GmbH";
1212
}
13+
14+
.focus {
15+
border: 3px solid #4c9aff55 !important;
16+
}
17+
18+
.pd {
19+
padding: 20px 20px;
20+
}

‎showcase/src/page/IntroPage.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
import {CodeBlock} from "@atlaskit/code";
2+
import {useDispatch} from "react-redux";
3+
import {useEffect} from "react";
24

35
function IntroPage() {
46

7+
const dispatch = useDispatch()
8+
useEffect(() => {
9+
dispatch({
10+
type: "SET_MENU"
11+
})
12+
}, [])
13+
514
return (
615
<div>
716
<h1>Welcome to UI-Kit-TS</h1>

‎showcase/src/page/NotFoundPage.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
import React from "react";
1+
import React, {useEffect} from "react";
22
import EmptyState from "@atlaskit/empty-state";
33
import Button from "@atlaskit/button";
44
import {useNavigate} from "react-router";
5+
import {useDispatch} from "react-redux";
56

67
function NotFoundPage() {
78
const navigation = useNavigate()
89

10+
const dispatch = useDispatch()
11+
useEffect(() => {
12+
dispatch({
13+
type: "SET_MENU"
14+
})
15+
}, [])
16+
917
return (
1018
<EmptyState
1119
header="404 - Not found"

‎showcase/src/page/ReactQueryPage.tsx‎

Lines changed: 57 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import React from "react";
1+
import React, {useEffect} from "react";
22
import {CodeBlock} from "@atlaskit/code";
3+
import {useDispatch} from "react-redux";
34

45
function ReactQueryPage() {
56

6-
const reactQueryInstall =`npm install -s react-query axios`
7+
const dispatch = useDispatch()
8+
9+
const reactQueryInstall = `npm install -s react-query axios`
710

811
const initQueryClient = `// index.tsx
912
// init axios client
1013
export const axiosClient = axios.create({...})
1114
// init query client
1215
export const queryClient = new QueryClient()`
1316

14-
const reactQueryRegister =`// index.tsx
17+
const reactQueryRegister = `// index.tsx
1518
<QueryClientProvider client={queryClient}>
1619
<App/>
1720
</QueryClientProvider>`
@@ -35,46 +38,62 @@ return (
3538
...
3639
)`
3740

41+
useEffect(() => {
42+
dispatch({
43+
type: "SET_MENU"
44+
})
45+
}, [])
46+
3847
return (
3948
<div>
4049
<h1>React-Query</h1>
4150
<p>React-Query is for fetching data from REST and use it as states inside the application</p>
4251

43-
<h5>Install React-Query</h5>
44-
<p>Not needed if you use this library. It is already included</p>
45-
<br/>
46-
<CodeBlock
47-
language="bash"
48-
text={reactQueryInstall}
49-
/>
50-
51-
<h5>Create queryClient</h5>
52-
<br/>
53-
<CodeBlock
54-
language="typescript"
55-
text={initQueryClient}
56-
/>
57-
58-
<h5>Integrate queryClient</h5>
59-
<br/>
60-
<CodeBlock
61-
language="tsx"
62-
text={reactQueryRegister}
63-
/>
64-
65-
<h5>Create Query</h5>
66-
<br/>
67-
<CodeBlock
68-
language="typescript"
69-
text={reactQueryQuery}
70-
/>
71-
72-
<h5>Use react query data</h5>
73-
<br/>
74-
<CodeBlock
75-
language="typescript"
76-
text={reactQueryUsage}
77-
/>
52+
<div id="dependencies" menu-name="Dependencies" className="menu pd">
53+
<h5>Dependencies</h5>
54+
<p>This library uses the following dependencies:</p>
55+
<br/>
56+
<CodeBlock
57+
language="bash"
58+
text={reactQueryInstall}
59+
/>
60+
</div>
61+
62+
<div id="create-client" menu-name="Create Client" className="menu pd">
63+
<h5>Create queryClient</h5>
64+
<br/>
65+
<CodeBlock
66+
language="typescript"
67+
text={initQueryClient}
68+
/>
69+
</div>
70+
71+
<div id="integrate-client" menu-name="Integrate Client" className="menu pd">
72+
<h5>Integrate queryClient</h5>
73+
<br/>
74+
<CodeBlock
75+
language="tsx"
76+
text={reactQueryRegister}
77+
/>
78+
</div>
79+
80+
<div id="create-query" menu-name="Create Query" className="menu pd">
81+
<h5 >Create Query</h5>
82+
<br/>
83+
<CodeBlock
84+
language="typescript"
85+
text={reactQueryQuery}
86+
/>
87+
</div>
88+
89+
<div id="use-query" menu-name="Use Query" className="menu pd">
90+
<h5>Use react query data</h5>
91+
<br/>
92+
<CodeBlock
93+
language="typescript"
94+
text={reactQueryUsage}
95+
/>
96+
</div>
7897
</div>
7998
)
8099
}

‎showcase/src/page/ReduxPage.tsx‎

Lines changed: 62 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React from "react";
1+
import React, {useEffect} from "react";
22
import {CodeBlock} from "@atlaskit/code";
3+
import {useDispatch} from "react-redux";
34

45
function ReduxPage() {
56

6-
const reduxInstall =`npm install -s react-redux @types/react-redux @reduxjs/toolkit`
7+
const reduxInstall = `npm install -s react-redux @types/react-redux @reduxjs/toolkit`
78

8-
const reduxAppStore = `import notificationReducer from "./reducers/notificationReducer";
9+
const reduxAppStore = `// state/appStore.ts
10+
import notificationReducer from "./reducers/notificationReducer";
911
import {configureStore} from "@reduxjs/toolkit";
1012
import stackReducer from "./reducers/stackReducer";
1113
@@ -18,12 +20,13 @@ export const appStore = configureStore({
1820
1921
export type State = ReturnType<typeof appStore.getState>`
2022

21-
const reduxRegister =`// index.tsx
23+
const reduxRegister = `// index.tsx
2224
<Provider store={appStore}>
2325
<App/>
2426
</Provider>`
2527

26-
const reduxReducer = `import {Notification} from "../../model/AppModel";
28+
const reduxReducer = `// state/reducers/notificationReducer.ts
29+
import {Notification} from "../../model/AppModel";
2730
2831
const initialState: Notification[] = []
2932
@@ -70,7 +73,7 @@ const notificationReducer = (state: Notification[] = initialState, action: Actio
7073
7174
export default notificationReducer`
7275

73-
const reduxUsage = `// get updating notifications from stack (reloads on change)
76+
const reduxUsage = `// get updating notifications from state (reloads component on state change)
7477
const notifications = useSelector((appState: State) => appState.notifications)
7578
7679
// update state
@@ -82,47 +85,63 @@ dispatch({
8285
type: 'ADD_NOTIFICATION',
8386
notification: notification
8487
})`
88+
const dispatch = useDispatch()
89+
useEffect(() => {
90+
dispatch({
91+
type: "SET_MENU"
92+
})
93+
}, [])
8594

8695
return (
8796
<div>
8897
<h1>Redux</h1>
89-
<p>Redux is used for global stack handling. For example for handling notifications</p>
90-
91-
<h5>Install Redux</h5>
92-
<p>Not needed if you use this library. It is already included</p>
93-
<br/>
94-
<CodeBlock
95-
language="bash"
96-
text={reduxInstall}
97-
/>
98-
99-
<h5>Init appStore</h5>
100-
<br/>
101-
<CodeBlock
102-
language="typescript"
103-
text={reduxAppStore}
104-
/>
105-
106-
<h5>Integrate appStore</h5>
107-
<br/>
108-
<CodeBlock
109-
language="tsx"
110-
text={reduxRegister}
111-
/>
112-
113-
<h5>Create reducer</h5>
114-
<br/>
115-
<CodeBlock
116-
language="typescript"
117-
text={reduxReducer}
118-
/>
119-
120-
<h5>Use and change redux states</h5>
121-
<br/>
122-
<CodeBlock
123-
language="typescript"
124-
text={reduxUsage}
125-
/>
98+
<p>Redux is used for global state handling. For example for handling notifications.</p>
99+
100+
<div id="dependencies" menu-name="Dependencies" className="menu pd">
101+
<h5>Dependencies</h5>
102+
<p>This library uses the following dependencies:</p>
103+
<br/>
104+
<CodeBlock
105+
language="bash"
106+
text={reduxInstall}
107+
/>
108+
</div>
109+
110+
<div id="init-appstore" menu-name="Init AppStore" className="menu pd">
111+
<h5>Init appStore</h5>
112+
<br/>
113+
<CodeBlock
114+
language="typescript"
115+
text={reduxAppStore}
116+
/>
117+
</div>
118+
119+
<div id="integrate-appstore" menu-name="Integrate AppStore" className="menu pd">
120+
<h5>Integrate appStore</h5>
121+
<br/>
122+
<CodeBlock
123+
language="tsx"
124+
text={reduxRegister}
125+
/>
126+
</div>
127+
128+
<div id="create-reducer" menu-name="Create Reducer" className="menu pd">
129+
<h5>Create reducer</h5>
130+
<br/>
131+
<CodeBlock
132+
language="typescript"
133+
text={reduxReducer}
134+
/>
135+
</div>
136+
137+
<div id="use-redux" menu-name="Use Redux States" className="menu pd">
138+
<h5>Use and change redux states</h5>
139+
<br/>
140+
<CodeBlock
141+
language="typescript"
142+
text={reduxUsage}
143+
/>
144+
</div>
126145
</div>
127146
)
128147
}

0 commit comments

Comments
 (0)