Skip to content

Commit fde88c8

Browse files
mfbzchasefleming
mfbz
and
chasefleming
authored
Complete refactoring of demo playground (#2643)
* Added major playground refactor * Ordering improvements * Minor text fix * Updated index with favicon and title * Added code viewer * Added props visualization for components * Fixed footer text * Added docs link button to each card * Minor typo fixes * Added imports to implementation examples * Fixed footer visualization * Implemented copilot suggestions improved * Added improved title for components * Improved sidebar items ids * Updated docs links * Updated github links to point to react-sdk package * Improved revertible random text * Fixed wrong docs link * Added installation section * Added advanced section with theming and dark mode * Prettier format * Added code syntax highlight * Update packages/demo/src/components/hook-cards/use-flow-transaction-status-card.tsx Co-authored-by: Chase Fleming <[email protected]> * Update packages/demo/src/components/hook-cards/use-flow-chain-id-card.tsx Co-authored-by: Chase Fleming <[email protected]> * Update packages/demo/src/components/hook-cards/use-flow-events-card.tsx Co-authored-by: Chase Fleming <[email protected]> * Implemented PR suggested fixes --------- Co-authored-by: mfbz <[email protected]> Co-authored-by: Chase Fleming <[email protected]>
1 parent 02bb4b1 commit fde88c8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+6924
-2043
lines changed

‎package-lock.json‎

Lines changed: 279 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/demo/flow.json‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎packages/demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/png" href="/assets/icon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Demo App</title>
7+
<title>Flow React SDK</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎packages/demo/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@
2222
"@react-aria/utils": "^3.25.3",
2323
"@react-stately/flags": "^3.0.4",
2424
"@react-stately/utils": "^3.10.4",
25+
"@types/react-syntax-highlighter": "^15.5.13",
2526
"react": "^19.0.0",
26-
"react-dom": "^19.0.0"
27+
"react-dom": "^19.0.0",
28+
"react-syntax-highlighter": "^15.6.6"
2729
},
2830
"devDependencies": {
2931
"@eslint/js": "^9.25.0",

‎packages/demo/public/assets/icon.png‎

923 Bytes
Loading

‎packages/demo/public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/demo/src/app.css‎

Lines changed: 100 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,109 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
2+
13
@tailwind base;
24
@tailwind components;
35
@tailwind utilities;
46

5-
html {
6-
color-scheme: light dark;
7-
font-family: system-ui;
8-
background-color: #ffffff;
9-
color: #000000;
10-
margin: 0;
11-
padding: 0;
12-
height: 100%;
7+
@layer utilities {
8+
.scrollbar-hide {
9+
-ms-overflow-style: none !important; /* IE and Edge */
10+
scrollbar-width: none !important; /* Firefox */
11+
}
12+
.scrollbar-hide::-webkit-scrollbar {
13+
display: none !important; /* Chrome, Safari and Opera */
14+
}
15+
16+
/* Also hide scrollbar for all children */
17+
.scrollbar-hide * {
18+
-ms-overflow-style: none !important;
19+
scrollbar-width: none !important;
20+
}
21+
.scrollbar-hide *::-webkit-scrollbar {
22+
display: none !important;
23+
}
24+
25+
.text-balance {
26+
text-wrap: balance;
27+
}
28+
}
29+
30+
@layer base {
31+
html {
32+
font-family: "Inter", system-ui, sans-serif;
33+
scroll-behavior: smooth;
34+
scroll-padding-top: 6rem; /* Account for sticky header */
35+
}
36+
37+
body {
38+
margin: 0;
39+
padding: 0;
40+
overflow-x: hidden;
41+
-webkit-font-smoothing: antialiased;
42+
-moz-osx-font-smoothing: grayscale;
43+
}
44+
45+
/* Smooth transitions for all interactive elements */
46+
* {
47+
transition-property:
48+
color, background-color, border-color, text-decoration-color, fill, stroke;
49+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
50+
transition-duration: 150ms;
51+
}
52+
}
53+
54+
@layer components {
55+
.flow-gradient-text {
56+
@apply from-flow-primary via-flow-500 to-flow-600 bg-gradient-to-r bg-clip-text text-transparent;
57+
}
58+
59+
.flow-glow {
60+
box-shadow: 0 0 20px rgba(0, 239, 139, 0.3);
61+
}
62+
63+
.dark .flow-glow {
64+
box-shadow: 0 0 30px rgba(0, 239, 139, 0.5);
65+
}
66+
67+
.sketch-border {
68+
position: relative;
69+
}
70+
71+
.sketch-border::before {
72+
content: "";
73+
position: absolute;
74+
top: -1px;
75+
left: -1px;
76+
right: -1px;
77+
bottom: -1px;
78+
background: linear-gradient(
79+
45deg,
80+
transparent,
81+
rgba(0, 239, 139, 0.1),
82+
transparent
83+
);
84+
border-radius: inherit;
85+
z-index: -1;
86+
}
87+
}
88+
89+
/* Custom scrollbar for webkit browsers */
90+
::-webkit-scrollbar {
91+
width: 6px;
92+
}
93+
94+
::-webkit-scrollbar-track {
95+
@apply bg-gray-100 dark:bg-gray-800;
96+
}
97+
98+
::-webkit-scrollbar-thumb {
99+
@apply rounded-full bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500;
13100
}
14101

15-
body {
16-
margin: 0;
17-
padding: 0;
18-
background-color: #ffffff;
19-
color: #000000;
20-
height: 100%;
21-
overflow-x: hidden;
102+
/* Selection colors */
103+
::selection {
104+
@apply bg-flow-primary/20 text-flow-900;
22105
}
23106

24-
#root {
25-
height: 100vh;
26-
background-color: #ffffff;
107+
.dark ::selection {
108+
@apply bg-flow-primary/30 text-flow-100;
27109
}

‎packages/demo/src/app.tsx‎

Lines changed: 72 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,88 @@
11
import "./app.css"
2-
import {Container} from "./components/container"
32
import FlowProviderWrapper, {
43
useDarkMode,
54
} from "./components/flow-provider-wrapper"
6-
import {Navbar} from "./components/navbar"
7-
import {Sidebar} from "./components/sidebar"
5+
import {Header} from "./components/header"
6+
import {ContentSidebar} from "./components/content-sidebar"
7+
import {ContentSection} from "./components/content-section"
8+
import {Footer} from "./components/footer"
9+
import {useState} from "react"
810

911
function AppContent() {
10-
const {darkMode} = useDarkMode()
12+
// Move dark mode state outside FlowProvider to prevent sidebar reset on network change
13+
const [darkMode, setDarkMode] = useState(() => {
14+
if (typeof window !== "undefined") {
15+
const saved = localStorage.getItem("darkMode")
16+
return saved ? JSON.parse(saved) : false
17+
}
18+
return false
19+
})
20+
21+
const toggleDarkMode = () => {
22+
setDarkMode((prev: boolean) => {
23+
const newValue = !prev
24+
if (typeof window !== "undefined") {
25+
localStorage.setItem("darkMode", JSON.stringify(newValue))
26+
}
27+
return newValue
28+
})
29+
}
1130

1231
return (
1332
<div
14-
className={`min-h-screen flex flex-col ${
15-
darkMode ? "bg-gray-900 text-white" : "bg-white text-black" }`}
33+
className={`font-flow transition-colors duration-200 ${
34+
darkMode ? "dark bg-gray-900 text-white" : "bg-white text-gray-900" }`}
1635
>
17-
<Navbar />
18-
19-
<div className="flex flex-1">
20-
<Sidebar />
21-
22-
<main
23-
id="main-content"
24-
className={`flex-1 overflow-y-auto p-8 ${darkMode ? "bg-gray-900" : "bg-gray-50"}`}
25-
style={{height: "calc(100vh - 88px)"}}
26-
>
27-
<Container />
28-
</main>
29-
</div>
36+
<a
37+
href="#main-content"
38+
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 px-4 py-2
39+
bg-flow-primary text-black rounded-lg font-medium transition-all"
40+
>
41+
Skip to main content
42+
</a>
43+
44+
<FlowProviderWrapper darkMode={darkMode} toggleDarkMode={toggleDarkMode}>
45+
<Header />
46+
47+
<div className="relative">
48+
<div className="flex min-h-screen">
49+
<div className="relative w-80 flex-shrink-0 hidden lg:block">
50+
<svg
51+
viewBox="0 0 15 15"
52+
className={`absolute -top-2 -right-2 size-[15px] z-10 ${
53+
darkMode ? "fill-white/20" : "fill-black/10" }`}
54+
>
55+
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z" />
56+
</svg>
57+
58+
<div className="sticky top-0 h-screen overflow-y-auto p-6 scrollbar-hide">
59+
<ContentSidebar darkMode={darkMode} />
60+
</div>
61+
</div>
62+
63+
<div className="relative flex-1">
64+
<svg
65+
viewBox="0 0 15 15"
66+
className={`absolute -top-2 -left-2 size-[15px] z-10 ${
67+
darkMode ? "fill-white/20" : "fill-black/10" }`}
68+
>
69+
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z" />
70+
</svg>
71+
72+
<div className="p-4 lg:p-6">
73+
<main id="main-content" role="main" aria-label="Main content">
74+
<ContentSection />
75+
</main>
76+
<Footer />
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</FlowProviderWrapper>
3082
</div>
3183
)
3284
}
3385

3486
export function App() {
35-
return (
36-
<FlowProviderWrapper>
37-
<AppContent />
38-
</FlowProviderWrapper>
39-
)
87+
return <AppContent />
4088
}

‎packages/demo/src/assets/icon.png‎

923 Bytes
Loading

‎packages/demo/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)