From a5d008eb62e216e7139ff26fc67a323bb6e54b32 Mon Sep 17 00:00:00 2001
From: Sutu Sebastian <41998826+SutuSebastian@users.noreply.github.com>
Date: Fri, 21 Jun 2024 16:54:01 +0300
Subject: [PATCH] Docs/guides/adonis js (#1433)
* docs sidebar: cleanup old `isNew` badges
* feat(web): docs/guides - add `AdonisJS`
feat(cli): add `AdonisJS`
* chore(ui): update README
chore(web): add `AdonisJS` integration guide card in `quickstart` page
* fix(docs): Dark mode `ThemeModeScript` render order
* simplify tailwind.config->content
---
.changeset/purple-rocks-divide.md | 6 +
.../quickstart/integration-guides.tsx | 1 +
apps/web/content/docs/guides/adonis-js.mdx | 149 ++++++++++++++++++
apps/web/data/docs-sidebar.ts | 37 ++---
apps/web/public/logos/adonis-js.svg | 1 +
packages/cli/src/data.ts | 1 +
packages/ui/README.md | 1 +
7 files changed, 178 insertions(+), 18 deletions(-)
create mode 100644 .changeset/purple-rocks-divide.md
create mode 100644 apps/web/content/docs/guides/adonis-js.mdx
create mode 100644 apps/web/public/logos/adonis-js.svg
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 @@
+
\ 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)