Skip to content

Commit 54e6c3a

Browse files
codinsonncodinsonn
committed
feat: Add Docs updates from fullproduct.dev docs
1 parent c910748 commit 54e6c3a

File tree

87 files changed

+11708
-4864
lines changed

Some content is hidden

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

87 files changed

+11708
-4864
lines changed

‎apps/docs/components/Hidden.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
/* --- <Hidden/> ------------------------------------------------------------------------------- */
4+
5+
export const Hidden = ({ children }: { children: React.ReactNode }) => {
6+
return (
7+
<div className="h-0 w-0 invisible overflow-hidden">
8+
{children}
9+
</div>
10+
)
11+
}
12+
13+
/* --- Aliases --------------------------------------------------------------------------------- */
14+
15+
export const LLMOptimized = Hidden
16+
export const TitleWrapper = Hidden

‎apps/docs/components/Select.docs.tsx‎

Lines changed: 138 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
import type { ReactNode, ElementRef, Dispatch, SetStateAction, LegacyRef } from 'react'
2+
import { createContext, useContext, useState, useEffect, forwardRef, useRef } from 'react'
3+
import { useSafeAreaInsets } from 'react-native-safe-area-context'
4+
import { Platform, StyleSheet, Dimensions } from 'react-native'
5+
import * as SP from '@green-stack/forms/Select.primitives'
16
import * as AppSelect from '@app/core/forms/Select.styled'
2-
import { styled } from '@app/primitives'
7+
import { cn, styled, View, Text, Pressable, getThemeColor } from '@app/primitives'
38

49
/* --- Documentation overrides? ---------------------------------------------------------------- */
510

@@ -14,7 +19,7 @@ export const SelectTriggerProps = AppSelect.SelectTriggerProps
1419
export const SelectScrollButton = AppSelect.SelectScrollButton
1520
export const SelectScrollButtonProps = AppSelect.SelectScrollButtonProps
1621

17-
export const SelectContent = AppSelect.SelectContent
22+
export const SelectContent = styled(AppSelect.SelectContent, 'bg-popover', { nativeID: 'docsTable' }) as typeof AppSelect.SelectContent
1823
export const SelectContentProps = AppSelect.SelectContentProps
1924

2025
export const SelectLabel = AppSelect.SelectLabel
@@ -27,14 +32,142 @@ export const SelectSeparator = AppSelect.SelectSeparator
2732
export const SelectSeparatorProps = AppSelect.SelectSeparatorProps
2833

2934
export const SelectProps = AppSelect.SelectProps
30-
export const Select = Object.assign(styled(AppSelect.Select, 'bg-transparent', {
31-
triggerClassName: 'bg-transparent',
35+
36+
/* --- Constants ------------------------------------------------------------------------------- */
37+
38+
const isWeb = Platform.OS === 'web'
39+
const isMobile = ['ios', 'android'].includes(Platform.OS)
40+
41+
/** --- createSelect() ------------------------------------------------------------------------- */
42+
/** -i- Create a Universal Select where you can pass a Generic type to narrow the string `value` & `onChange()` params */
43+
export const createSelectComponent = <T extends string = string>() => Object.assign(forwardRef<
44+
ElementRef<typeof SP.SelectRoot>,
45+
AppSelect.SelectProps<T>
46+
>((rawProps, ref) => {
47+
// Props
48+
const props = SelectProps.applyDefaults(rawProps)
49+
const { placeholder, disabled, hasError, children, onChange, ...restProps } = props
50+
51+
// State
52+
const [value, setValue] = useState<string>(props.value)
53+
const [options, setOptions] = useState(props.options)
54+
55+
// Hooks
56+
const insets = useSafeAreaInsets()
57+
const contentInsets = {
58+
top: insets.top,
59+
bottom: insets.bottom,
60+
left: 12,
61+
right: 12,
62+
}
63+
64+
// Vars
65+
const optionsKey = Object.keys(options).join('-')
66+
const hasPropOptions = Object.keys(props.options || {}).length > 0
67+
const selectValueKey = `${optionsKey}-${!!value}-${!!options?.[value]}`
68+
69+
// -- Effects --
70+
71+
useEffect(() => {
72+
const isValidOption = value && Object.keys(options || {})?.includes?.(value)
73+
if (isValidOption) {
74+
onChange(value as T)
75+
} else if (!value && !restProps.required) {
76+
onChange(undefined as unknown as T)
77+
}
78+
}, [value])
79+
80+
useEffect(() => {
81+
if (props.value !== value) setValue(props.value)
82+
}, [props.value])
83+
84+
// -- Render --
85+
86+
return (
87+
<SelectContext.Provider value={{ value, setValue, options, setOptions }}>
88+
<SP.SelectRoot
89+
ref={ref}
90+
key={`select-${selectValueKey}`}
91+
{...restProps}
92+
value={{ value, label: options?.[value] }}
93+
className={cn('w-full relative', 'bg-transparent', props.className)}
94+
onValueChange={(option) => setValue(option!.value!)}
95+
disabled={disabled}
96+
asChild
97+
>
98+
<View>
99+
<SelectTrigger
100+
key={`select-trigger-${selectValueKey}`}
101+
className={cn('w-full', 'bg-transparent', props.triggerClassName)}
102+
disabled={disabled}
103+
hasError={hasError}
104+
>
105+
<Text
106+
key={`select-value-${optionsKey}-${!!value}-${!!options?.[value]}`}
107+
className={cn(
108+
'text-foreground text-sm',
109+
'native:text-lg',
110+
!value && !!placeholder && 'text-muted',
111+
disabled && 'opacity-50',
112+
props.valueClassName,
113+
)}
114+
disabled={disabled}
115+
>
116+
<SP.SelectValue
117+
key={`select-value-${selectValueKey}`}
118+
className={cn(
119+
'text-primary text-sm',
120+
'native:text-lg',
121+
!value && !!placeholder && 'text-muted',
122+
props.valueClassName,
123+
)}
124+
placeholder={placeholder}
125+
asChild={isWeb}
126+
>
127+
{isWeb && (
128+
<Text className={cn(!value && !!placeholder && 'text-muted')}>
129+
{options?.[value] || placeholder}
130+
</Text>
131+
)}
132+
</SP.SelectValue>
133+
</Text>
134+
</SelectTrigger>
135+
<SelectContent
136+
insets={contentInsets}
137+
className={cn(props.contentClassName)}
138+
>
139+
{hasPropOptions && (
140+
<SP.SelectGroup asChild>
141+
<View>
142+
{!!placeholder && <SelectLabel>{placeholder}</SelectLabel>}
143+
{Object.entries(props.options).map(([value, label]) => (
144+
<SelectItem key={value} value={value} label={label}>
145+
{label}
146+
</SelectItem>
147+
))}
148+
</View>
149+
</SP.SelectGroup>
150+
)}
151+
{children}
152+
</SelectContent>
153+
154+
</View>
155+
</SP.SelectRoot>
156+
157+
</SelectContext.Provider>
158+
)
32159
}), {
33160
displayName: 'Select',
34161
Option: SelectItem,
35162
Item: SelectItem,
36163
Separator: SelectSeparator,
37-
Group: AppSelect.Select.Group,
164+
Group: SP.SelectGroup,
38165
Label: SelectLabel,
39166
Content: SelectContent,
167+
/** -i- Create a Universal Select where you can pass a Generic type to narrow the string `value` & `onChange()` params */
168+
create: createSelectComponent,
40169
})
170+
171+
/* --- Select ---------------------------------------------------------------------------------- */
172+
173+
export const Select = createSelectComponent()

‎apps/docs/docs.theme.jsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,23 @@ export default {
1818
),
1919
logoLink: 'https://fullproduct.dev',
2020
project: {
21-
link: 'https://github.com/Aetherspace/green-stack-starter-demo?tab=readme-ov-file#:Rr9ab:',
21+
link: 'https://github.com/FullProduct-dev/green-stack-starter-demo?tab=readme-ov-file#:Rr9ab:',
2222
},
2323
navigation: true,
2424
sidebar: {
2525
autoCollapse: true,
26-
defaultMenuCollapseLevel: 3,
26+
defaultMenuCollapseLevel: 2,
2727
toggleButton: true,
2828
},
29-
docsRepositoryBase: 'https://github.com/Aetherspace/green-stack-starter-demo',
29+
docsRepositoryBase: 'https://github.com/FullProduct-dev/green-stack-starter-demo',
3030
editLink: {
3131
component: null,
3232
},
3333
darkMode: true,
3434
footer: {
3535
content: (
3636
<div className="flex w-full justify-center items-center bg-transparent">
37-
<div className="flex flex-col md:flex-row w-full max-w-[90rem] px-0 lg:px-8 justify-between">
37+
<div className="flex flex-col md:flex-row w-full max-w-[90rem] px-0 lg:px-8 2xl:px-2 flex-wrap justify-between">
3838
<div className="flex flex-col max-w-[364px]">
3939
<a
4040
className="text-link flex flex-row no-underline"
@@ -64,7 +64,7 @@ export default {
6464
FullProduct.dev 🚀
6565
</div>
6666
<div dir="auto" className="flex text-left font-medium text-muted text-sm mt-[-3px]">
67-
Universal Base Starterkit
67+
Universal App Starterkit
6868
</div>
6969
</div>
7070
</a>
@@ -107,18 +107,18 @@ export default {
107107
</a>
108108
<div className="w-4 h-4" />
109109
<div dir="auto" className="css-text-146c3p1 text-muted">
110-
FullProduct.dev is a product of 'Aetherspace Digital' (registered in Belgium under 0757.590.784)
110+
FullProduct.dev is a product of 'Aetherspace Digital' (registered as 0757.590.784 in Belgium)
111111
</div>
112112
<div className="w-2 h-2" />
113113
<div dir="auto" className="css-text-146c3p1 text-muted italic">
114-
For support or inquiries, please <a className="text-link underline" href="mailto:info@fullproduct.dev">contact us</a>
114+
For support or inquiries, please email us at <a className="text-link underline" href="mailto:thorr@fullproduct.dev">thorr@fullproduct.dev</a>
115115
</div>
116116
</div>
117117
<div className="h-12 md:h-0" />
118-
<div className="flex flex-row">
119-
<div className="flex flex-col">
118+
<div className="flex flex-row flex-wrap">
119+
{/* <div className="flex flex-col">
120120
<div dir="auto" className="css-text-146c3p1 text-primary font-bold text-lg">
121-
The GREEN stack
121+
GREEN stack
122122
</div>
123123
<div className="h-2" />
124124
<a className="underline text-muted" target="_blank" href="https://graphql.org/learn/">
@@ -138,8 +138,8 @@ export default {
138138
</a>
139139
<div className="h-1" />
140140
</div>
141-
<div className="w-12" />
142-
<div className="flex flex-col">
141+
<div className="w-12" /> */}
142+
<div className="flex flex-col pt-12 lg:pt-0 pr-12">
143143
<div dir="auto" className="css-text-146c3p1 text-primary font-bold text-lg">
144144
Product
145145
</div>
@@ -161,8 +161,7 @@ export default {
161161
</a>
162162
<div className="h-1" />
163163
</div>
164-
<div className="w-12" />
165-
<div className="flex flex-col">
164+
<div className="flex flex-col pt-12 lg:pt-0 pr-12">
166165
<div dir="auto" className="css-text-146c3p1 text-primary font-bold text-lg">
167166
Legal
168167
</div>
@@ -189,15 +188,15 @@ export default {
189188
const { asPath } = useRouter()
190189
if (asPath === '/') {
191190
return {
192-
title: 'FullProduct.dev ⚡️ Universal Base Starter',
191+
title: 'FullProduct.dev ⚡️ Universal App Starter',
193192
}
194193
} else if (asPath.includes('plugins')) {
195194
return {
196-
titleTemplate: 'FullProduct.dev ⚡️ %s Plugin - Universal Base Starter Docs',
195+
titleTemplate: 'FullProduct.dev ⚡️ %s Plugin - Universal App Starter Docs',
197196
}
198197
}
199198
return {
200-
titleTemplate: 'FullProduct.dev | %s - Universal Base Starter Docs',
199+
titleTemplate: 'FullProduct.dev | %s - Universal App Starter Docs',
201200
}
202201
}
203202
}

‎apps/docs/next.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import nextra from 'nextra'
44
const withNextra = nextra({
55
theme: "nextra-theme-docs",
66
themeConfig: "./docs.theme.jsx",
7-
});
7+
})
88

99
import mainNextConfig from '@app/next/next.config.base.cjs'
1010

‎apps/docs/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
"@next/mdx": "~15.0.4",
99
"@types/mdx": "^2.0.13",
1010
"next": "~15.0.4",
11-
"nextra": "^3.2.4",
12-
"nextra-theme-docs": "^3.2.4"
11+
"nextra": "^3.3.1",
12+
"nextra-theme-docs": "^3.3.1"
1313
},
1414
"scripts": {
15-
"dev": "next -p 4000",
16-
"build": "node -v && next build",
17-
"start": "next start -p 4000",
15+
"dev": "NEXT_PUBLIC_APP_ENV=docs next -p 4000",
16+
"build": "node -v && NEXT_PUBLIC_APP_ENV=docs next build",
17+
"start": "NEXT_PUBLIC_APP_ENV=docs next start -p 4000",
1818
"env:local": "cp .env.example .env.local",
1919
"regenerate:docs": "npm -w @green-stack/core run run:script ../../apps/docs/scripts/regenerate-docs.ts"
2020
}

0 commit comments

Comments
 (0)