Skip to content

Commit

Permalink
lfg
Browse files Browse the repository at this point in the history
  • Loading branch information
irsyadadl committed Oct 17, 2024
1 parent 14ff26a commit 2b858bc
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 52 deletions.
36 changes: 36 additions & 0 deletions app/(app)/components/partials/thumbnail-wrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,42 @@ const thumbnailMap: { [key: string]: React.ReactNode } = {
/>
</svg>
),
'color-picker': (
<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="200"
fill="none"
viewBox="0 0 300 200"
>
<rect width="20" height="20.001" x="100" y="35" fill="#A1A1AA" rx="4" />
<path
fill="#A1A1AA"
d="M109.134 61.5a1 1 0 0 1 1.732 0l6.062 10.5a1 1 0 0 1-.866 1.5h-12.124a1 1 0 0 1-.866-1.5z"
/>
<rect width="100" height="100" x="100" y="66" fill="#A1A1AA" rx="5" />
<rect width="90" height="72" x="105" y="71" fill="#E4E4E7" rx="5" />
<rect width="90" height="12" x="105" y="147" fill="#E4E4E7" rx="4" />
<rect width="11" height="11" x="164.5" y="86.5" stroke="#000" rx="5.5" />
<rect
width="6.5"
height="6.5"
x="114.25"
y="149.25"
stroke="#000"
rx="3.25"
strokeWidth=".5"
/>
</svg>
),
'color-field': <></>,
'color-area': <></>,
'color-slider': <></>,
'color-swatch-picker': <></>,
'color-swatch': <></>,
'color-wheel': <></>,
'color-thumb': <></>,

'combo-box': (
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
144 changes: 92 additions & 52 deletions resources/content/docs/getting-started/client-side-routing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,41 +35,31 @@ export default function Layout() {
To integrate with Inertia.js, you must first declare it in your `.d.ts` file, such as in `global.d.ts`.

```tsx
import type { FormDataConvertible, Method, PreserveStateOption, Progress } from "@inertiajs/core"
import { PageProps as InertiaPageProps } from "@inertiajs/core"
import { PageProps as AppPageProps } from "./"
import { VisitOptions } from '@inertiajs/core'
import { type AxiosInstance } from 'axios'
import { type route as routeFn } from 'ziggy-js'

declare module 'react-aria-components' {
interface RouterConfig {
routerOptions: {
method?: Method
data?: Record<string, FormDataConvertible>
replace?: boolean
preserveState?: PreserveStateOption
preserveScroll?: PreserveStateOption
forceFormData?: boolean
only?: string[]
onBefore?: () => void
onStart?: () => void
onProgress?: (progress: Progress) => void
onCancel?: () => void
onSuccess?: () => void
onError?: () => void
onFinish?: () => void
declare global {
interface Window {
axios: AxiosInstance
}
}

let route: typeof routeFn
}

declare module "@inertiajs/core" {
interface PageProps extends InertiaPageProps, AppPageProps {
declare module 'react-aria-components' {
interface RouterConfig {
routerOptions: VisitOptions
}
}

```
Next, execute `php artisan ziggy:generate` to generate the Ziggy routes.
Next, execute `ziggy:generate` to generate the Ziggy routes in your terminal.
```bash
php artisan ziggy:generate
```

Then, proceed to alias 'ziggy-js' in your `vite.config.ts` file.
```js {4} {15-19}
```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
Expand All @@ -78,62 +68,111 @@ import { resolve } from 'path';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.tsx',
ssr: 'resources/js/ssr.tsx',
refresh: true,
input: 'resources/js/app.tsx',
ssr: 'resources/js/ssr.tsx',
refresh: true,
}),
react(),
],
resolve: {
alias: {
'ziggy-js': resolve('vendor/tightenco/ziggy'),
ui: resolve('resources/js/components/ui/index.ts'), // optional if you want to use simple imports
}
}
});
```

Next, in your `resources/js/app.tsx` you can encapsulate `<App/>` within `RouterProvider` as follows:
```tsx {7} {9-10} {18-30}
import './bootstrap';
import '../css/app.css';

import { createRoot, hydrateRoot } from 'react-dom/client';
import { createInertiaApp, router } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
Now, create the provider file in `resources/js/components/providers.tsx` and add the following code:
```
import { router } from '@inertiajs/react'
import React from 'react'
import { RouterProvider } from 'react-aria-components'
import { ThemeProvider } from './theme-provider'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<RouterProvider navigate={(to, options) => router.visit(to, options as any)}>
<ThemeProvider defaultTheme="system" storageKey="irsyad-theme">
{children}
</ThemeProvider>
</RouterProvider>
)
}
```

If you're not sure what is theme-provider, refer to the [Theme Provider](/docs/dark-mode/inertia-js) section. After that, go to your `resources/js/app.tsx` you can encapsulate `<App/>` within `Providers` as follows:
```
import '../css/app.css'
import './bootstrap'
import { Ziggy } from '@/ziggy'
import { createInertiaApp } from '@inertiajs/react'
import { Providers } from 'components/providers'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { createRoot, hydrateRoot } from 'react-dom/client'
import { useRoute } from 'ziggy-js'
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel'
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
title: (title) => (title ? `${title} / ${appName}` : appName),
resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
setup({ el, App, props }) {
// @ts-expect-error
window.route = useRoute(Ziggy as any)
const appElement = (
<RouterProvider navigate={(to, options) => router.visit(to, options as any)}>
<Providers>
<App {...props} />
</RouterProvider>
</Providers>
)

if (import.meta.env.DEV) {
createRoot(el).render(appElement);
if (import.meta.env.SSR) {
hydrateRoot(el, appElement)
return
}
hydrateRoot(el, appElement);
createRoot(el).render(appElement)
},
progress: {
color: '#4B5563',
},
});
progress: false
})
```

I don't know if you need this or not, but if you care about `ssr.tsx`, you can add the following code:

```
import { Ziggy as ziggy } from '@/ziggy'
import { createInertiaApp } from '@inertiajs/react'
import createServer from '@inertiajs/react/server'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import ReactDOMServer from 'react-dom/server'
import { route, type RouteName } from 'ziggy-js'
createServer(
(page) =>
createInertiaApp({
page,
render: ReactDOMServer.renderToString,
title: (title) => (title ? `${title} / Irsyad` : 'Irsyad'),
resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
setup: ({ App, props }) => {
// @ts-expect-error
global.route<RouteName> = (name, params, absolute) =>
// @ts-expect-error
route(name, params as any, absolute, {
...ziggy,
// @ts-expect-error
location: new URL(page.props.ziggy.location)
})
return <App {...props} />
}
})
)
```

### Next.js
The `useRouter` hook from `next/navigation` provides a router object for navigation purposes. The `RouterProvider` should be implemented in a client component at the root of each page or layout that contains React Aria links. Create a new client component in the `app` folder named `provider.tsx` for this purpose or combine it with other top-level providers as outlined in the Next.js documentation.
```tsx
```
'use client';
import { useRouter } from 'next/navigation';
Expand All @@ -159,7 +198,8 @@ export function RouteProvider({ children }) {
```

Then, in `app/layout.tsx` or your main layout file, enclose the children components within the `ClientProviders` component.
```tsx {1} {6}

```
import { RouteProvider } from './provider';
export default function RootLayout({children}) {
return (
Expand Down

0 comments on commit 2b858bc

Please sign in to comment.