diff --git a/.changeset/purple-rocks-divide.md b/.changeset/purple-rocks-divide.md new file mode 100644 index 000000000..d3950bc76 --- /dev/null +++ b/.changeset/purple-rocks-divide.md @@ -0,0 +1,6 @@ +--- +"create-flowbite-react": patch +"flowbite-react": patch +--- + +add `AdonisJS` integration guide diff --git a/apps/web/components/quickstart/integration-guides.tsx b/apps/web/components/quickstart/integration-guides.tsx index 42946b0f7..b5934f6c4 100644 --- a/apps/web/components/quickstart/integration-guides.tsx +++ b/apps/web/components/quickstart/integration-guides.tsx @@ -16,6 +16,7 @@ const GUIDES: Guide[] = [ { name: "Remix", slug: "/docs/guides/remix", logo: "remix.svg", invert: true }, { name: "Astro", slug: "/docs/guides/astro", logo: "astro.svg", invert: true }, { name: "Gatsby", slug: "/docs/guides/gatsby", logo: "gatsby.svg" }, + { name: "AdonisJS", slug: "/docs/guides/adonis-js", logo: "adonis-js.svg", className: "p-2", invert: true }, { name: "RedwoodJS", slug: "/docs/guides/redwood-js", logo: "redwood-js.svg", className: "p-2" }, { name: "Laravel", slug: "/docs/guides/laravel", logo: "laravel.svg" }, { name: "Vite", slug: "/docs/guides/vite", logo: "vite.svg" }, diff --git a/apps/web/content/docs/guides/adonis-js.mdx b/apps/web/content/docs/guides/adonis-js.mdx new file mode 100644 index 000000000..ce8b9017d --- /dev/null +++ b/apps/web/content/docs/guides/adonis-js.mdx @@ -0,0 +1,149 @@ +--- +title: Use with AdonisJS - Flowbite React +description: Learn how to install Flowbite React for your AdonisJS project and start developing modern full-stack web applications +--- + +## Using the CLI + +Run the following command to scaffold a new `Flowbite React` project using `AdonisJS`: + +```bash +# npm +npm create flowbite-react@latest -- --template adonisjs + +# yarn +yarn create flowbite-react --template adonisjs + +# pnpm +pnpm create flowbite-react@latest --template adonisjs + +# bun +bun create flowbite-react@latest --template adonisjs +``` + +Manual Installation + +## Create project + +Run the following command to create a new AdonisJS project using the CLI: + +```bash +npm init adonisjs@latest -- -K=inertia --adapter=react --ssr --install +``` + +## Setup Tailwind CSS + +1. Install `tailwindcss` and its peer dependencies: + +```bash +npm i -D tailwindcss postcss autoprefixer +``` + +2. Generate `tailwind.config.js` and `postcss.config.js` files: + +```bash +npx tailwindcss init -p +``` + +3. Add the paths to all of your template files in your `tailwind.config.js` file: + +```js {3} +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./inertia/**/*.{js,ts,jsx,tsx}", "./resources/**/*.{edge,js,ts,jsx,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +}; +``` + +4. Add the `@tailwind` directives for each of Tailwind's layers to your `./inertia/css/app.css` file: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +## Install Flowbite React + +1. Run the following command to install `flowbite-react`: + +```bash +npm i flowbite-react +``` + +2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`: + +```js {1,7,11} +import flowbite from "flowbite-react/tailwind"; + +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + // ... + flowbite.content(), + ], + plugins: [ + // ... + flowbite.plugin(), + ], +}; +``` + +## Dark mode + +In server side rendered applications, such as AdonisJS, to avoid page flicker (if `dark` mode is set) before AdonisJS hydrates the content, `ThemeModeScript` component must be rendered (see implementation below). + +`ThemeModeScript` renders a script tag that sets `dark` or removes `dark` from `` element before hydration occurs. + +### Configure + +1. Import and render `ThemeModeScript` in the return body of `setup` function: + +```tsx {4,15-20} +// inertia/app/ssr.tsx + +import { createInertiaApp } from "@inertiajs/react"; +import { ThemeModeScript } from "flowbite-react"; +import ReactDOMServer from "react-dom/server"; + +export default function render(page: any) { + return createInertiaApp({ + page, + render: ReactDOMServer.renderToString, + resolve: (name) => { + const pages = import.meta.glob("../pages/**/*.tsx", { eager: true }); + return pages[`../pages/${name}.tsx`]; + }, + setup: ({ App, props }) => ( + <> + + + + ), + }); +} +``` + +## Try it out + +Now that you have successfully installed Flowbite React you can start using the components from the library. + +```tsx +// inertia/pages/home.tsx + +import { Button } from "flowbite-react"; + +export default function Home() { + return ; +} +``` + +
+ +## Templates + +- [Github](https://github.com/themesberg/flowbite-react-template-adonisjs) +- [StackBlitz](https://stackblitz.com/edit/flowbite-react-template-adonisjs) diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts index 36049fb6a..0fbeb4030 100644 --- a/apps/web/data/docs-sidebar.ts +++ b/apps/web/data/docs-sidebar.ts @@ -18,9 +18,9 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ items: [ { title: "Introduction", href: "/docs/getting-started/introduction" }, { title: "Quickstart", href: "/docs/getting-started/quickstart" }, - { title: "CLI", href: "/docs/getting-started/cli", isNew: true }, - { title: "Editor Setup", href: "/docs/getting-started/editor-setup", isNew: true }, - { title: "Server Components", href: "/docs/getting-started/server-components", isNew: true }, + { title: "CLI", href: "/docs/getting-started/cli" }, + { title: "Editor Setup", href: "/docs/getting-started/editor-setup" }, + { title: "Server Components", href: "/docs/getting-started/server-components" }, { title: "License", href: "/docs/getting-started/license" }, { title: "Changelog", href: "https://github.com/themesberg/flowbite-react/releases", isExternal: true }, { title: "Contributing", href: "/docs/getting-started/contributing" }, @@ -30,15 +30,16 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ title: "integration guides", href: "/guides/", items: [ - { title: "Next.js", href: "/docs/guides/next-js", isNew: true }, - { title: "Remix", href: "/docs/guides/remix", isNew: true }, - { title: "Astro", href: "/docs/guides/astro", isNew: true }, - { title: "Gatsby", href: "/docs/guides/gatsby", isNew: true }, - { title: "RedwoodJS", href: "/docs/guides/redwood-js", isNew: true }, - { title: "Laravel", href: "/docs/guides/laravel", isNew: true }, - { title: "Vite", href: "/docs/guides/vite", isNew: true }, - { title: "Parcel", href: "/docs/guides/parcel", isNew: true }, - { title: "Create React App", href: "/docs/guides/create-react-app", isNew: true }, + { title: "Next.js", href: "/docs/guides/next-js" }, + { title: "Remix", href: "/docs/guides/remix" }, + { title: "Astro", href: "/docs/guides/astro" }, + { title: "Gatsby", href: "/docs/guides/gatsby" }, + { title: "AdonisJS", href: "/docs/guides/adonis-js", isNew: true }, + { title: "RedwoodJS", href: "/docs/guides/redwood-js" }, + { title: "Laravel", href: "/docs/guides/laravel" }, + { title: "Vite", href: "/docs/guides/vite" }, + { title: "Parcel", href: "/docs/guides/parcel" }, + { title: "Create React App", href: "/docs/guides/create-react-app" }, ], }, { @@ -57,19 +58,19 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ { title: "Alert", href: "/docs/components/alert" }, { title: "Avatar", href: "/docs/components/avatar" }, { title: "Badge", href: "/docs/components/badge" }, - { title: "Banner", href: "/docs/components/banner", isNew: true }, + { title: "Banner", href: "/docs/components/banner" }, { title: "Breadcrumb", href: "/docs/components/breadcrumb" }, { title: "Button", href: "/docs/components/button" }, { title: "Button group", href: "/docs/components/button-group" }, { title: "Card", href: "/docs/components/card" }, { title: "Carousel", href: "/docs/components/carousel" }, { title: "Clipboard", href: "/docs/components/clipboard", isNew: true }, - { title: "Datepicker", href: "/docs/components/datepicker", isNew: true }, + { title: "Datepicker", href: "/docs/components/datepicker" }, { title: "Drawer", href: "/docs/components/drawer", isNew: true }, { title: "Dropdown", href: "/docs/components/dropdown" }, { title: "Footer", href: "/docs/components/footer" }, { title: "Forms", href: "/docs/components/forms" }, - { title: "KBD", href: "/docs/components/kbd", isNew: true }, + { title: "KBD", href: "/docs/components/kbd" }, { title: "List group", href: "/docs/components/list-group" }, { title: "Mega menu", href: "/docs/components/mega-menu", isNew: true }, { title: "Modal", href: "/docs/components/modal" }, @@ -92,15 +93,15 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ href: "/forms/", items: [ { title: "File Input", href: "/docs/forms/file-input" }, - { title: "Floating Label", href: "/docs/forms/floating-label", isNew: true }, + { title: "Floating Label", href: "/docs/forms/floating-label" }, ], }, { title: "typography", href: "/typography/", items: [ - { title: "Blockquote", href: "/docs/typography/blockquote", isNew: true }, - { title: "List", href: "/docs/typography/list", isNew: true }, + { title: "Blockquote", href: "/docs/typography/blockquote" }, + { title: "List", href: "/docs/typography/list" }, { title: "HR", href: "/docs/typography/hr", isNew: true }, ], }, diff --git a/apps/web/public/logos/adonis-js.svg b/apps/web/public/logos/adonis-js.svg new file mode 100644 index 000000000..ef489fcb5 --- /dev/null +++ b/apps/web/public/logos/adonis-js.svg @@ -0,0 +1 @@ +AdonisJS \ No newline at end of file diff --git a/packages/cli/src/data.ts b/packages/cli/src/data.ts index a0921c000..bde9721db 100644 --- a/packages/cli/src/data.ts +++ b/packages/cli/src/data.ts @@ -5,6 +5,7 @@ export const REPOS: { key: string; name: string; url: string }[] = [ { key: "remix", name: "Remix", url: "https://github.com/themesberg/flowbite-react-template-remix.git" }, { key: "astro", name: "Astro", url: "https://github.com/themesberg/flowbite-react-template-astro.git" }, { key: "gatsby", name: "Gatsby", url: "https://github.com/themesberg/flowbite-react-template-gatsby.git" }, + { key: "adonisjs", name: "AdonisJS", url: "https://github.com/themesberg/flowbite-react-template-adonisjs.git" }, { key: "redwoodjs", name: "RedwoodJS", url: "https://github.com/themesberg/flowbite-react-template-redwoodjs.git" }, { key: "laravel", name: "Laravel", url: "https://github.com/themesberg/flowbite-react-template-laravel.git" }, { key: "vite", name: "Vite", url: "https://github.com/themesberg/flowbite-react-template-vite.git" }, diff --git a/packages/ui/README.md b/packages/ui/README.md index b7e81c3d1..2eabe9143 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -84,6 +84,7 @@ To manually install `flowbite-react` into your application, here is a list of th - [Remix](https://www.flowbite-react.com/docs/guides/remix) - [Astro](https://www.flowbite-react.com/docs/guides/astro) - [Gatsby](https://www.flowbite-react.com/docs/guides/gatsby) +- [AdonisJS](https://www.flowbite-react.com/docs/guides/adonis-js) - [RedwoodJS](https://www.flowbite-react.com/docs/guides/redwood-js) - [Laravel](https://www.flowbite-react.com/docs/guides/laravel) - [Vite](https://www.flowbite-react.com/docs/guides/vite)