Skip to content

Commit 8e1b666

Browse files
codinsonncodinsonn
committed
feat: Revamp demo screens
1 parent a6aaf4a commit 8e1b666

File tree

18 files changed

+415
-192
lines changed

18 files changed

+415
-192
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ Now, I'm glad to share my learnings to help others build their own universal app
197197

198198
## 🛠 Getting Started
199199

200-
Use **`git clone`**, or the GitHub UI to ❇️ **[generate a new project](https://github.com/new?template_name=green-stack-starter-demo&template_owner=FullProduct-dev)** from our **[template repo](https://github.com/FullProduct-dev/green-stack-starter-demo)**, then run:
200+
Use **`git clone`**, or the GitHub UI to ❇️ **[generate a new project](https://github.com/new?template_name=green-stack-starter-demo&template_owner=FullProduct-dev&visibility=private&use_v2_form=true&description=🚧%20Make%20sure%20to%20run%20`npx%20@fullproduct/universal-app%20sync`%20to%20attach%20the%20starterkit%27s%20git%20history%20💡%20Run%20`npx%20@fullproduct/universal-app%20install%20plugins`%20afterwards%20to%20expand%20your%20setup)** from our **[template repo](https://github.com/FullProduct-dev/green-stack-starter-demo)**, then run:
201201

202202
```bash
203203
npm install

‎apps/next/app/Document.tsx‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,43 @@ import '../global.css'
1111
/* --- <Document> ------------------------------------------------------------------------------ */
1212

1313
const Document = (props: { children: ReactNode }) => {
14-
// Props
15-
const { children } = props
16-
17-
// -- Render --
18-
19-
return (
20-
<html lang="en" suppressHydrationWarning>
21-
<head>
22-
{/* - Title & Keywords - */}
23-
<title>Universal App Starter</title>
24-
<meta property="description" content="Universal App Starter by FullProduct.dev" />
25-
<meta property="og:title" content="Universal App Starter" />
26-
<meta property="og:description" content="Universal App Starter by FullProduct.dev" />
27-
<meta property="og:site_name" content="FullProduct.dev" />
28-
{/* - Image Previews - */}
29-
<meta property="og:image" content="https://github.com/user-attachments/assets/a2eecfd2-7889-4079-944b-1b5af6cf5ddf" />
30-
<meta property="og:image:type" content="image/png" />
31-
<meta property="og:image:alt" content="A screenshot of the fullproduct.dev universal app starterkit demo" />
32-
<meta property="og:image:width" content="2866" />
33-
<meta property="og:image:height" content="1562" />
34-
<meta property="twitter:image" content="https://github.com/user-attachments/assets/a2eecfd2-7889-4079-944b-1b5af6cf5ddf" />
35-
<meta property="twitter:card" content="summary_large_image" />
36-
<meta property="twitter:title" content="Full-Product Universal App Starter" />
37-
<meta property="twitter:description" content="Universal App Starter by FullProduct.dev" />
38-
{/* - Other - */}
39-
<meta name="viewport" content="width=device-width, initial-scale=1" />
40-
</head>
41-
<body suppressHydrationWarning>
42-
<ServerStylesProvider>
43-
<UniversalRootLayout>
44-
<main className="flex min-w-screen min-h-screen">{children}</main>
45-
</UniversalRootLayout>
46-
</ServerStylesProvider>
47-
</body>
48-
</html>
49-
)
14+
15+
// Props
16+
const { children } = props
17+
18+
// -- Render --
19+
20+
return (
21+
<html lang="en" suppressHydrationWarning>
22+
<head>
23+
{/* - Title & Keywords - */}
24+
<title>Universal App Starter</title>
25+
<meta property="description" content="Universal App Starter by FullProduct.dev" />
26+
<meta property="og:title" content="Universal App Starter" />
27+
<meta property="og:description" content="Universal App Starter by FullProduct.dev" />
28+
<meta property="og:site_name" content="FullProduct.dev" />
29+
{/* - Image Previews - */}
30+
<meta property="og:image" content="https://github.com/user-attachments/assets/a2eecfd2-7889-4079-944b-1b5af6cf5ddf" />
31+
<meta property="og:image:type" content="image/png" />
32+
<meta property="og:image:alt" content="A screenshot of the fullproduct.dev universal app starterkit demo" />
33+
<meta property="og:image:width" content="2866" />
34+
<meta property="og:image:height" content="1562" />
35+
<meta property="twitter:image" content="https://github.com/user-attachments/assets/a2eecfd2-7889-4079-944b-1b5af6cf5ddf" />
36+
<meta property="twitter:card" content="summary_large_image" />
37+
<meta property="twitter:title" content="Full-Product Universal App Starter" />
38+
<meta property="twitter:description" content="Universal App Starter by FullProduct.dev" />
39+
{/* - Other - */}
40+
<meta name="viewport" content="width=device-width, initial-scale=1" />
41+
</head>
42+
<body suppressHydrationWarning>
43+
<ServerStylesProvider>
44+
<UniversalRootLayout>
45+
<main className="flex min-w-screen min-h-screen">{children}</main>
46+
</UniversalRootLayout>
47+
</ServerStylesProvider>
48+
</body>
49+
</html>
50+
)
5051
}
5152

5253
/* --- Exports --------------------------------------------------------------------------------- */

‎apps/next/app/NextClientRootLayout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ type NextClientRootLayoutProps = {
2323
/* --- <NextClientRootLayout/> ---------------------------------------------------------------- */
2424

2525
const NextClientRootLayout = ({ children, requestContext }: NextClientRootLayoutProps) => {
26+
2627
// Navigation
2728
const nextContextRouter = useNextContextRouter()
2829

‎features/@app-core/components/BackButton.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,12 @@ const BackButton = (props: BackButtonProps) => {
3535
// -- Prerender --
3636

3737
const innerBackButton = (
38-
<View className="flex flex-row p-4 items-center">
38+
<View className="flex flex-row bg-stone-900 p-2 items-center pointer-events-none rounded-md border border-muted opacity-90 hover:opacity-100 z-0">
3939
<Icon name="ArrowLeftFilled" color={color} size={iconSize} />
4040
{!!backText && (
4141
<>
4242
<View className="w-[5px]" />
43-
<Text
44-
className={`text-xl text-[${color}]`}
45-
style={{ color }}
46-
>
43+
<Text className={`text-xl text-[${color}]`} style={{ color }}>
4744
{`Back`}
4845
</Text>
4946
</>
@@ -55,14 +52,14 @@ const BackButton = (props: BackButtonProps) => {
5552

5653
return showBackButton ? (
5754
<Pressable
58-
className={`absolute top-8 web:top-0 left-0`} // @ts-ignore
55+
className="absolute top-12 web:top-5 left-5 pointer-events-box-only" // @ts-ignore
5956
onPress={back}
6057
>
6158
{innerBackButton}
6259
</Pressable>
6360
) : (
6461
<Link
65-
className={`absolute top-8 web:top-0 left-0 text-[${color}] no-underline`}
62+
className={`absolute top-12 web:top-5 left-5 text-[${color}] no-underline`}
6663
href={backLink}
6764
>
6865
{innerBackButton}

‎features/@app-core/components/styled.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,19 @@ export const P = styled(RNText, 'text-primary text-base')
5353
/* --- Fix for Next Link ----------------------------------------------------------------------- */
5454

5555
export const Link = <HREF extends KnownRoutes>(props: UniversalLinkProps<HREF>) => {
56-
const StyledLink = styled(UniversalLink, 'text-link underline') // @ts-ignore
56+
const StyledLink = styled(UniversalLink, '') // @ts-ignore
5757
return <StyledLink {...props} />
5858
}
5959

6060
export const LinkText = styled(RNText, 'text-link underline')
6161

62-
export const TextLink = (props: Omit<React.ComponentProps<typeof UniversalLink>, 'className'> & { className?: string }) => {
62+
/* --- Text Links ------------------------------------------------------------------------------ */
63+
64+
export type TextLinkProps = Omit<React.ComponentProps<typeof UniversalLink<string>>, 'className'> & {
65+
className?: string
66+
}
67+
68+
export const TextLink = (props: TextLinkProps) => {
6369
const { className, style, children, ...universalLinkProps } = props
6470
return (
6571
<LinkText className={className} style={style}>

‎features/@app-core/constants/testableFeatures.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
export const testableFeatures = [
33
{
44
title: 'Test Images?',
5-
link: '/demos/images'
5+
description: 'Universal Images, platform optimized',
6+
link: '/demos/images',
7+
icon: '📷',
68
},
79
{
810
title: 'Test Forms?',
9-
link: '/demos/forms'
11+
description: 'Zod based Form Management',
12+
link: '/demos/forms',
13+
icon: '📝',
1014
},
1115
]

‎features/@app-core/icons/CopyIcon.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
2+
3+
/* --- Types ----------------------------------------------------------------------------------- */
4+
5+
export const CopyIconProps = iconProps('CopyIcon', {
6+
color: z.string().default(getThemeColor('--primary', 'light')),
7+
})
8+
9+
export type CopyIconProps = IconProps<typeof CopyIconProps>
10+
11+
/* --- <CopyIcon/> -------------------------------------------------------------------------- */
12+
13+
export const CopyIcon = (rawProps: CopyIconProps) => {
14+
// Props
15+
const props = CopyIconProps.applyDefaults(rawProps)
16+
const color = CopyIconProps.getIconColor(props, true)
17+
// Render
18+
return (
19+
<Svg
20+
width={props.size}
21+
height={props.size}
22+
fill="none"
23+
viewBox="0 0 24 24"
24+
{...props}
25+
>
26+
<Path
27+
stroke={color}
28+
fill="none"
29+
d="M8 6V3C8 2.45 8.45 2 9 2H20C20.55 2 21 2.45 21 3V17C21 17.55 20.55 18 20 18H16V7C16 6.45 15.55 6 15 6H8Z"
30+
clipRule="evenodd"
31+
fillRule="evenodd"
32+
/>
33+
<Path
34+
stroke={color}
35+
fill="none"
36+
d="M15 22H4C3.45 22 3 21.55 3 21V7C3 6.45 3.45 6 4 6H15C15.55 6 16 6.45 16 7V21C16 21.55 15.55 22 15 22Z"
37+
clipRule="evenodd"
38+
fillRule="evenodd"
39+
/>
40+
</Svg>
41+
)
42+
}

‎features/@app-core/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export { ChevronDownFilled } from './ChevronDownFilled'
66
export { ChevronUpFilled } from './ChevronUpFilled'
77
export { RemoveFilled } from './RemoveFilled'
88
export { UndoFilled } from './UndoFilled'
9+
export { CopyIcon } from './CopyIcon'

‎features/@app-core/middleware/createRequestContext.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export type RequestContext = {
1818
info?: unknown,
1919
// -i- Anything else you might want to attach as context through middleware, e.g.
2020
userId?: string,
21+
orgId?: string,
2122
sessionId?: string,
2223
authToken?: string,
2324
// ...

‎features/@app-core/routes/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { UniversalRouteScreen } from '@green-stack/core/navigation/UniversalRouteScreen'
2-
import HomeScreen, { queryBridge } from '../screens/HomeScreen'
2+
import DemoScreen, { queryBridge } from '../screens/DemoScreen'
33

44
/* --- / --------------------------------------------------------------------------------------- */
55

66
export default (props: any) => (
77
<UniversalRouteScreen
88
{...props}
9-
routeScreen={HomeScreen}
9+
routeScreen={DemoScreen}
1010
queryBridge={queryBridge}
1111
/>
1212
)

0 commit comments

Comments
 (0)