plugin: Automatic MDX docs

apps/docs/.env.example

@@ -0,0 +1,51 @@
+## --- Notes ----------------------------------------------------------------------------------- */
+
+## -i- The `.env.example` file can be copied into `.env.local` using `npx turbo env:local`
+## -i- For development, staging & production environments, check the next.js docs:
+## -i- https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
+
+## -i- Note that you should treat environment variables as if they could be inlined in your bundle during builds & deployments
+## -i- This means dynamically retrieving environment variables from e.g. `process.env[someKey]` might not work
+## -i- It also means that you should never prefix with `NEXT_PUBLIC_` for sensitive / private keys
+
+## -i- We suggest that for each environment variable you add here, you also add an entry in `appConfig.ts`
+## -i- There, you can add logic like ```envValue: process.env.NEXT_PUBLIC_ENV_KEY || process.env.EXPO_PUBLIC_ENV_KEY```
+## -i- Where you would only define the NEXT_PUBLIC_ prefixed versions here in `.env.local` locally and using Next.js UI for deployed envs
+## -i- For environment variables you only be available server-side, you can omit `NEXT_PUBLIC_`
+
+NEXT_PUBLIC_APP_ENV=next
+
+## --- General --------------------------------------------------------------------------------- */
+## -i- Env vars that should always be present & the same locally, independent of the simulated environment
+## --------------------------------------------------------------------------------------------- */
+
+APP_SECRET="your-secret-here" # used for signing header context, generate a random string
+
+## --- LOCAL ----------------------------------------------------------------------------------- */
+## -i- Defaults you might want to switch out for local development by commenting / uncommenting
+## --------------------------------------------------------------------------------------------- */
+
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_BACKEND_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
+NEXT_PUBLIC_GRAPH_URL=http://localhost:3000/api/graphql
+
+# DB_URL= # TODO: Add DB layer connection for full local dev...
+
+## --- DEV ------------------------------------------------------------------------------------- */
+# -i- Uncomment while on development branch to simulate the dev environment
+## --------------------------------------------------------------------------------------------- */
+
+# DB_URL= # TODO: Add DB layer connection for the dev environment...
+
+## --- STAGE ----------------------------------------------------------------------------------- */
+# -i- Uncomment while on staging branch to simulate the stage environment
+## --------------------------------------------------------------------------------------------- */
+
+# DB_URL= # TODO: Add DB layer connection for the stage environment...
+
+## --- PROD ------------------------------------------------------------------------------------ */
+# -i- Uncomment while on main branch to simulate the production environment
+## --------------------------------------------------------------------------------------------- */
+
+# DB_URL= # TODO: Add DB layer connection for the production environment...

apps/docs/babel.config.js

@@ -0,0 +1,14 @@
+// babel.config.js
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ["babel-preset-expo"],
+        plugins: [
+            ['@babel.plugin-transform-react-jsx', {
+                runtime: 'automatic',
+                importSource: 'nativewind',
+                jsxImportSource: 'nativewind',
+            }]
+        ]
+    }
+}

apps/docs/components/Button.docs.tsx

@@ -0,0 +1,8 @@
+import * as AppButton from '@app/components/Button'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const Button = AppButton.Button
+export const ButtonProps = AppButton.ButtonProps

apps/docs/components/Checkbox.docs.tsx

@@ -0,0 +1,8 @@
+import * as AppCheckbox from '@app/core/forms/Checkbox.styled'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const Checkbox = AppCheckbox.Checkbox
+export const CheckboxProps = AppCheckbox.CheckboxProps

apps/docs/components/Checklist.docs.tsx

@@ -0,0 +1,8 @@
+import * as AppCheckList from '@app/core/forms/CheckList.styled'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const CheckList = AppCheckList.CheckList
+export const CheckListProps = AppCheckList.CheckListProps

apps/docs/components/NumberStepper.docs.tsx

@@ -0,0 +1,12 @@
+import * as AppNumberStepper from '@app/core/forms/NumberStepper.styled'
+import { styled } from '@app/primitives'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const NumberStepper = styled(AppNumberStepper.NumberStepper, '', {
+    textInputClassName: 'bg-transparent',
+})
+
+export const NumberStepperProps = AppNumberStepper.NumberStepperProps

apps/docs/components/RadioGroup.docs.tsx

@@ -0,0 +1,14 @@
+import * as AppRadioGroup from '@app/core/forms/RadioGroup.styled'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const RadioGroup = AppRadioGroup.RadioGroup
+export const RadioGroupProps = AppRadioGroup.RadioGroupProps
+
+export const RadioGroupContext = AppRadioGroup.RadioGroupContext
+export const useRadioGroupContext = AppRadioGroup.useRadioGroupContext
+
+export const RadioButton = AppRadioGroup.RadioButton
+export const RadioButtonProps = AppRadioGroup.RadioButtonProps

apps/docs/components/Select.docs.tsx

@@ -0,0 +1,40 @@
+import * as AppSelect from '@app/core/forms/Select.styled'
+import { styled } from '@app/primitives'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const SelectContext = AppSelect.SelectContext
+export const useSelectContext = AppSelect.useSelectContext
+
+export const SelectTrigger = AppSelect.SelectTrigger
+export const SelectTriggerProps = AppSelect.SelectTriggerProps
+
+export const SelectScrollButton = AppSelect.SelectScrollButton
+export const SelectScrollButtonProps = AppSelect.SelectScrollButtonProps
+
+export const SelectContent = AppSelect.SelectContent
+export const SelectContentProps = AppSelect.SelectContentProps
+
+export const SelectLabel = AppSelect.SelectLabel
+export const SelectLabelProps = AppSelect.SelectLabelProps
+
+export const SelectItem = AppSelect.SelectItem
+export const SelectItemProps = AppSelect.SelectItemProps
+
+export const SelectSeparator = AppSelect.SelectSeparator
+export const SelectSeparatorProps = AppSelect.SelectSeparatorProps
+
+export const SelectProps = AppSelect.SelectProps
+export const Select = Object.assign(styled(AppSelect.Select, 'bg-transparent', {
+    triggerClassName: 'bg-transparent',
+}), {
+    displayName: 'Select',
+    Option: SelectItem,
+    Item: SelectItem,
+    Separator: SelectSeparator,
+    Group: AppSelect.Select.Group,
+    Label: SelectLabel,
+    Content: SelectContent,
+})

apps/docs/components/Switch.docs.tsx

@@ -0,0 +1,8 @@
+import * as AppSwitch from '@app/core/forms/Switch.styled'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const Switch = AppSwitch.Switch
+export const SwitchProps = AppSwitch.SwitchProps

apps/docs/components/TextArea.docs.tsx

@@ -0,0 +1,9 @@
+import * as AppTextArea from '@app/core/forms/TextArea.styled'
+import { styled } from '@app/primitives'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const TextArea = styled(AppTextArea.TextArea, 'bg-transparent')
+export const TextAreaProps = AppTextArea.TextAreaProps

apps/docs/components/TextInput.docs.tsx

@@ -0,0 +1,9 @@
+import * as AppTextInput from '@app/core/forms/TextInput.styled'
+import { styled } from '@app/primitives'
+
+/* --- Documentation overrides? ---------------------------------------------------------------- */
+
+// -i- Optionally wrap and edit these to restyle the component for the docs
+
+export const TextInput = styled(AppTextInput.TextInput, 'bg-transparent')
+export const TextInputProps = AppTextInput.TextInputProps

apps/docs/docs.theme.jsx

@@ -0,0 +1,203 @@
+import { useRouter } from 'next/router'
+
+/* --- Theme ----------------------------------------------------------------------------------- */
+
+/** @type {import('nextra-theme-docs').DocsThemeConfig} */
+export default {
+    logo: (
+        <div className="relative flex flex-row items-center">
+            <img
+                className="rounded-md"
+                src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgreen-stack-logo.b8051d21.png&w=128&q=75"
+                width="30"
+                height="30"
+            />
+            <div className="w-3"></div>
+            <span><strong>FullProduct.dev</strong> ⚡️ Universal App Starter</span>
+        </div>
+    ),
+    logoLink: 'https://fullproduct.dev',
+    project: {
+        link: 'https://github.com/Aetherspace/green-stack-starter-demo?tab=readme-ov-file#:Rr9ab:',
+    },
+    navigation: true,
+    sidebar: {
+        autoCollapse: true,
+        defaultMenuCollapseLevel: 3,
+        toggleButton: true,
+    },
+    docsRepositoryBase: 'https://github.com/Aetherspace/green-stack-starter-demo',
+    editLink: {
+        component: null,
+    },
+    darkMode: true,
+    footer: {
+        content: (
+            <div className="flex w-full justify-center items-center bg-transparent">
+                <div className="flex flex-col md:flex-row w-full max-w-[90rem] px-0 lg:px-8 justify-between">
+                    <div className="flex flex-col max-w-[364px]">
+                        <a 
+                            className="text-link flex flex-row no-underline"
+                            href="https://fullproduct.dev"
+                        >
+                            <div className="w-12 h-12">
+                                <img
+                                    alt="FullProduct.dev Starterkit Logo"
+                                    loading="lazy"
+                                    decoding="async"
+                                    data-nimg="fill"
+                                    className="w-full h-full"
+                                    sizes="100vw"
+                                    src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgreen-stack-logo.b8051d21.png&amp;w=3840&amp;q=75"
+                                    style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        inset: '0px',
+                                        objectFit: 'cover',
+                                        color: 'transparent',
+                                    }}
+                                />
+                            </div>
+                            <div className="w-3" />
+                            <div className="flex flex-col justify-center h-12">
+                                <div dir="auto" className="flex font-bold text-left text-primary text-lg">
+                                    FullProduct.dev 🚀
+                                </div>
+                                <div dir="auto" className="flex text-left font-medium text-muted text-sm mt-[-3px]">
+                                    Universal Base Starterkit
+                                </div>
+                            </div>
+                        </a>
+                        <div className="w-4 h-4" />
+                        <a
+                            className="text-link flex flex-row items-center no-underline h-10 bg-secondary-foreground max-w-[258px] px-4 rounded-lg"
+                            target="_blank"
+                            href="https://codinsonn.dev"
+                        >
+                            <div className="flex flex-row items-center">
+                                <div className="flex flex-row h-10 items-center">
+                                    <div dir="auto" className="flex text-sm text-secondary">
+                                        By
+                                    </div>
+                                </div>
+                                <div className="w-2" />
+                                <div className="flex w-7 h-7" style={{ width: '28px', height: '28px' }}>
+                                    <img
+                                        alt="Thorr / codinsonn's Profile Picture"
+                                        loading="lazy"
+                                        decoding="async"
+                                        className="flex rounded-full w-full h-full"
+                                        src="https://codinsonn.dev/_next/image?url=%2Fimg%2FCodelyFansLogoPic160x160.jpeg&amp;w=256&amp;q=75"
+                                        style={{
+                                            height: '100%',
+                                            width: '100%',
+                                            inset: '0px',
+                                            objectFit: 'cover',
+                                            color: 'transparent',
+                                        }}
+                                    />
+                                </div>
+                                <div className="w-2" />
+                                <div className="flex flex-row h-10 items-center">
+                                    <div dir="auto" className="css-text-146c3p1 text-sm text-secondary font-bold">
+                                        Thorr ⚡️ codinsonn.dev
+                                    </div>
+                                </div>
+                            </div>
+                        </a>
+                        <div className="w-4 h-4" />
+                        <div dir="auto" className="css-text-146c3p1 text-muted">
+                            FullProduct.dev is a product of 'Aetherspace Digital' (registered in Belgium under 0757.590.784)
+                        </div>
+                        <div className="w-2 h-2" />
+                        <div dir="auto" className="css-text-146c3p1 text-muted italic">
+                            For support or inquiries, please <a className="text-link underline" href="mailto:[email protected]">contact us</a>
+                        </div>
+                    </div>
+                    <div className="h-12 md:h-0" />
+                    <div className="flex flex-row">
+                        <div className="flex flex-col">
+                            <div dir="auto" className="css-text-146c3p1 text-primary font-bold text-lg">
+                                The GREEN stack
+                            </div>
+                            <div className="h-2" />
+                            <a className="underline text-muted" target="_blank" href="https://graphql.org/learn/">
+                                GraphQL
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" target="_blank" href="https://18.react.dev/">
+                                React
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" target="_blank" href="https://docs.expo.dev/">
+                                Expo
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" target="_blank" href="https://nextjs.org/docs">
+                                Next.js 
+                            </a>
+                            <div className="h-1" />
+                        </div>
+                        <div className="w-12" />
+                        <div className="flex flex-col">
+                            <div dir="auto" className="css-text-146c3p1 text-primary font-bold text-lg">
+                                Product
+                            </div>
+                            <div className="h-2" />
+                            <a className="underline text-muted" target="_blank" href="https://fullproduct.dev/docs">
+                                Starterkit Docs
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" href="https://fullproduct.dev/sign-up">
+                                Sign-Up
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" href="https://fullproduct.dev/sign-in">
+                                Sign-In
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" href="https://fullproduct.dev/demos">
+                                Demo
+                            </a>
+                            <div className="h-1" />
+                        </div>
+                        <div className="w-12" />
+                        <div className="flex flex-col">
+                            <div dir="auto" className="css-text-146c3p1 text-primary font-bold text-lg">
+                                Legal
+                            </div>
+                            <div className="h-2" />
+                            <a className="underline text-muted" href="https://fullproduct.dev/eula">
+                                License Terms (EULA)
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" href="https://fullproduct.dev/privacy-policy">
+                                Privacy Policy
+                            </a>
+                            <div className="h-1" />
+                            <a className="underline text-muted" href="https://fullproduct.dev/cookie-policy">
+                                Cookie Policy
+                            </a>
+                            <div className="h-1" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+    useNextSeoProps() {
+        const { asPath } = useRouter()
+        if (asPath === '/') {
+            return {
+                title: 'FullProduct.dev ⚡️ Universal Base Starter',
+            }
+        } else if (asPath.includes('plugins')) {
+            return {
+                titleTemplate: 'FullProduct.dev ⚡️ %s Plugin - Universal Base Starter Docs',
+            }
+        }
+        return {
+            titleTemplate: 'FullProduct.dev | %s - Universal Base Starter Docs',
+        }
+    }
+}