From fb96f6fc01d171924cbc8deec645b835a21708d2 Mon Sep 17 00:00:00 2001 From: Conner Davis Date: Wed, 12 Apr 2023 11:24:24 -0700 Subject: [PATCH] refactor(next.js): migrate to `next.js` `13` `app/` directory --- .vscode/settings.json | 15 +- app/components/code-preview.tsx | 28 ++ app/docs/components/accordion/page.tsx | 100 +++++ app/docs/components/alert/page.tsx | 100 +++++ .../docs/components/avatar/page.tsx | 81 ++-- .../docs/components/badge/page.tsx | 0 .../docs/components/breadcrumb/page.tsx | 0 .../docs/components/button-group/page.tsx | 0 .../docs/components/button/page.tsx | 0 .../docs/components/card/page.tsx | 0 .../docs/components/carousel/page.tsx | 0 .../docs/components/dropdown/page.tsx | 0 .../docs/components/footer/page.tsx | 0 .../docs/components/forms/page.tsx | 0 app/docs/components/layout.tsx | 7 + .../docs/components/list-group/page.tsx | 0 .../docs/components/modal/page.tsx | 0 .../docs/components/navbar/page.tsx | 0 .../docs/components/pagination/page.tsx | 0 .../docs/components/progress/page.tsx | 4 +- .../docs/components/rating/page.tsx | 0 .../docs/components/sidebar/page.tsx | 0 .../docs/components/spinner/page.tsx | 0 .../docs/components/table/page.tsx | 0 .../docs/components/tabs/page.tsx | 0 .../docs/components/timeline/page.tsx | 0 .../docs/components/toast/page.tsx | 0 .../docs/components/tooltip/page.tsx | 0 pages/_app.tsx => app/docs/layout.tsx | 72 ++-- app/docs/page.tsx | 7 + {pages => app}/docs/theme.tsx | 0 app/layout.tsx | 23 ++ pages/index.tsx => app/page.tsx | 0 styles/globals.css => app/style.css | 0 next.config.mjs | 4 + pages/_document.tsx | 17 - pages/docs/components/accordion.tsx | 384 ------------------ pages/docs/components/alert.tsx | 128 ------ pages/docs/components/demo.tsx | 34 -- pages/docs/index.tsx | 219 ---------- src/components/Accordion/Accordion.tsx | 2 + src/components/Avatar/Avatar.tsx | 2 + src/components/Avatar/AvatarGroup.tsx | 2 + src/components/Avatar/AvatarGroupCounter.tsx | 2 + src/components/Badge/Badge.tsx | 2 + src/components/Breadcrumb/Breadcrumb.tsx | 2 + src/components/Breadcrumb/BreadcrumbItem.tsx | 2 + src/components/Button/Button.tsx | 2 + src/components/Button/ButtonGroup.tsx | 2 + src/components/Card/Card.tsx | 2 + src/components/Carousel/Carousel.tsx | 2 + src/components/Checkbox/Checkbox.tsx | 2 + .../DarkThemeToggle/DarkThemeToggle.tsx | 2 + src/components/Dropdown/Dropdown.tsx | 2 + src/components/Dropdown/DropdownDivider.tsx | 2 + src/components/Dropdown/DropdownHeader.tsx | 2 + src/components/Dropdown/DropdownItem.tsx | 2 + src/components/FileInput/FileInput.tsx | 2 + src/components/Floating/Floating.tsx | 2 + src/components/Flowbite/Flowbite.tsx | 2 + src/components/Footer/Footer.tsx | 2 + src/components/HelperText/HelperText.tsx | 2 + src/components/Label/Label.tsx | 2 + src/components/ListGroup/ListGroup.tsx | 2 + src/components/Modal/Modal.tsx | 2 + src/components/Navbar/Navbar.tsx | 2 + src/components/Pagination/Pagination.tsx | 2 + src/components/Progress/Progress.tsx | 2 + src/components/Radio/Radio.tsx | 2 + src/components/RangeSlider/RangeSlider.tsx | 2 + src/components/Rating/Rating.tsx | 2 + src/components/Select/Select.tsx | 2 + src/components/Sidebar/Sidebar.tsx | 2 + src/components/Spinner/Spinner.tsx | 2 + src/components/Tab/Tabs.tsx | 2 + src/components/Table/Table.tsx | 2 + src/components/TextInput/TextInput.tsx | 2 + src/components/Textarea/Textarea.tsx | 2 + src/components/Timeline/Timeline.tsx | 2 + src/components/Toast/Toast.tsx | 2 + src/components/index.ts | 2 + tsconfig.json | 9 +- vite.config.ts => vitest.config.ts | 0 yarn.lock | 24 +- 84 files changed, 428 insertions(+), 910 deletions(-) create mode 100644 app/components/code-preview.tsx create mode 100644 app/docs/components/accordion/page.tsx create mode 100644 app/docs/components/alert/page.tsx rename pages/docs/components/avatar.tsx => app/docs/components/avatar/page.tsx (84%) rename pages/docs/components/badge.tsx => app/docs/components/badge/page.tsx (100%) rename pages/docs/components/breadcrumb.tsx => app/docs/components/breadcrumb/page.tsx (100%) rename pages/docs/components/button-group.tsx => app/docs/components/button-group/page.tsx (100%) rename pages/docs/components/button.tsx => app/docs/components/button/page.tsx (100%) rename pages/docs/components/card.tsx => app/docs/components/card/page.tsx (100%) rename pages/docs/components/carousel.tsx => app/docs/components/carousel/page.tsx (100%) rename pages/docs/components/dropdown.tsx => app/docs/components/dropdown/page.tsx (100%) rename pages/docs/components/footer.tsx => app/docs/components/footer/page.tsx (100%) rename pages/docs/components/forms.tsx => app/docs/components/forms/page.tsx (100%) create mode 100644 app/docs/components/layout.tsx rename pages/docs/components/list-group.tsx => app/docs/components/list-group/page.tsx (100%) rename pages/docs/components/modal.tsx => app/docs/components/modal/page.tsx (100%) rename pages/docs/components/navbar.tsx => app/docs/components/navbar/page.tsx (100%) rename pages/docs/components/pagination.tsx => app/docs/components/pagination/page.tsx (100%) rename pages/docs/components/progress.tsx => app/docs/components/progress/page.tsx (95%) rename pages/docs/components/rating.tsx => app/docs/components/rating/page.tsx (100%) rename pages/docs/components/sidebar.tsx => app/docs/components/sidebar/page.tsx (100%) rename pages/docs/components/spinner.tsx => app/docs/components/spinner/page.tsx (100%) rename pages/docs/components/table.tsx => app/docs/components/table/page.tsx (100%) rename pages/docs/components/tabs.tsx => app/docs/components/tabs/page.tsx (100%) rename pages/docs/components/timeline.tsx => app/docs/components/timeline/page.tsx (100%) rename pages/docs/components/toast.tsx => app/docs/components/toast/page.tsx (100%) rename pages/docs/components/tooltip.tsx => app/docs/components/tooltip/page.tsx (100%) rename pages/_app.tsx => app/docs/layout.tsx (87%) create mode 100644 app/docs/page.tsx rename {pages => app}/docs/theme.tsx (100%) create mode 100644 app/layout.tsx rename pages/index.tsx => app/page.tsx (100%) rename styles/globals.css => app/style.css (100%) delete mode 100644 pages/_document.tsx delete mode 100644 pages/docs/components/accordion.tsx delete mode 100644 pages/docs/components/alert.tsx delete mode 100644 pages/docs/components/demo.tsx delete mode 100644 pages/docs/index.tsx rename vite.config.ts => vitest.config.ts (100%) diff --git a/.vscode/settings.json b/.vscode/settings.json index e1af46efd4..be86473896 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,16 +1,15 @@ { "files.exclude": { "**/.git": true, - "**/.svn": true, - "**/.hg": true, - "**/CVS": true, - "**/.DS_Store": true, - "**/Thumbs.db": true, "**/.next": true, "**/.vercel": true, "**/build": true, "**/coverage": true, "**/lib": true, - "**/node_modules": true - } -} + "**/node_modules": true, + "**/.DS_Store": true, + "**/Thumbs.db": true + }, + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true +} \ No newline at end of file diff --git a/app/components/code-preview.tsx b/app/components/code-preview.tsx new file mode 100644 index 0000000000..c382a62739 --- /dev/null +++ b/app/components/code-preview.tsx @@ -0,0 +1,28 @@ +import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import { Card } from '~/src'; + +const CodePreviewContainer: FC = function ({ children }) { + return
{children}
; +}; + +const CodePreviewCard: FC> = function ({ children, className }) { + return ( +
+ {children} +
+ ); +}; + +const CodePreviewContent: FC = function ({ children }) { + return
{children}
; +}; + +const CodePreviewTitle: FC = function ({ children }) { + return {children}; +}; + +export const CodePreview = Object.assign(CodePreviewContainer, { + Card: CodePreviewCard, + Content: CodePreviewContent, + Title: CodePreviewTitle, +}); diff --git a/app/docs/components/accordion/page.tsx b/app/docs/components/accordion/page.tsx new file mode 100644 index 0000000000..0060f0a8ee --- /dev/null +++ b/app/docs/components/accordion/page.tsx @@ -0,0 +1,100 @@ +'use client'; + +import type { FC } from 'react'; +import { CodePreview } from '~/app/components/code-preview'; +import type { AccordionProps } from '~/src'; +import { Accordion } from '~/src'; + +const AccordionPage: FC = () => { + return ( +
+ + Default accordion + + + + + + Collapse all + + + + +
+ ); +}; + +const ExampleAccordion: FC> = (props) => { + return ( + + + What is Flowbite? + +

+ Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, + dropdowns, modals, navbars, and more. +

+

+ Check out this guide to learn how to  + + get started + + and start developing websites even faster with components on top of Tailwind CSS. +

+ + + + Is there a Figma file available? + +

+ Flowbite is first conceptualized and designed using the Figma software so everything you see in the library + has a design equivalent in our Figma file. +

+

+ Check out the + + Figma design system + + based on the utility classes from Tailwind CSS and components from Flowbite. +

+ + + + What are the differences between Flowbite and Tailwind UI? + +

+ The main difference is that the core components from Flowbite are open source under the MIT license, whereas + Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone + components, whereas Tailwind UI offers sections of pages. +

+

+ However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no + technical reason stopping you from using the best of two worlds. +

+

Learn more about these technologies:

+ + + + + ); +}; + +export default AccordionPage; diff --git a/app/docs/components/alert/page.tsx b/app/docs/components/alert/page.tsx new file mode 100644 index 0000000000..ad7b36725f --- /dev/null +++ b/app/docs/components/alert/page.tsx @@ -0,0 +1,100 @@ +'use client'; + +import type { FC } from 'react'; +import { HiEye, HiInformationCircle } from 'react-icons/hi'; +import { CodePreview } from '~/app/components/code-preview'; +import type { AlertProps } from '~/src'; +import { Alert } from '~/src'; + +const AlertPage: FC = () => { + return ( + <> + + Default alert + + + + + + Alert with icon + + + + + + Dismissable alert + + alert('Alert dismissed!')} /> + + + + Rounded + + + + + + Border accent + + + + + + Additional content + + } color="warning" icon={HiInformationCircle} /> + + + + All options + + } + color="success" + icon={HiInformationCircle} + onDismiss={() => alert('Alert dismissed!')} + rounded + /> + + + + ); +}; + +const ExampleAlert: FC = (props) => { + return ( + + + Info alert! Change a few things up and try submitting again. + + + ); +}; + +const ExampleAdditionalContent: FC = () => { + return ( + <> +
+ More info about this info alert goes here. This example text is going to run a bit longer so that you can see + how spacing within an alert works with this kind of content. +
+
+ + +
+ + ); +}; + +export default AlertPage; diff --git a/pages/docs/components/avatar.tsx b/app/docs/components/avatar/page.tsx similarity index 84% rename from pages/docs/components/avatar.tsx rename to app/docs/components/avatar/page.tsx index 783f8f2da5..eac76a8d0c 100644 --- a/pages/docs/components/avatar.tsx +++ b/app/docs/components/avatar/page.tsx @@ -1,41 +1,39 @@ import Image from 'next/image'; import type { FC } from 'react'; -import type { CodeExample } from '~/pages/docs/components/demo'; -import DemoPage from '~/pages/docs/components/demo'; +import { CodePreview } from '~/app/components/code-preview'; import { Avatar, Dropdown } from '~/src'; const AvatarPage: FC = () => { - const examples: CodeExample[] = [ - { - title: 'Default Avatar', - code: ( + return ( + <> + + Default avatar +
- ), - }, - { - title: 'Bordered Avatar', - code: ( + + + + Bordered avatar +
- ), - }, - { - title: 'Colored Avatar', - code: ( - <> -
+ + + + Colored avatar + +
-
@@ -43,12 +41,11 @@ const AvatarPage: FC = () => {
- - ), - }, - { - title: 'Override Image Element', - code: ( + + + + Override image element +
( @@ -72,37 +69,9 @@ const AvatarPage: FC = () => { )} />
- ), - rawCode: `
- ( - - )} - /> - ( - - - - - - )} - /> -
`, - }, + + + { title: 'Placeholder', code: ( diff --git a/pages/docs/components/badge.tsx b/app/docs/components/badge/page.tsx similarity index 100% rename from pages/docs/components/badge.tsx rename to app/docs/components/badge/page.tsx diff --git a/pages/docs/components/breadcrumb.tsx b/app/docs/components/breadcrumb/page.tsx similarity index 100% rename from pages/docs/components/breadcrumb.tsx rename to app/docs/components/breadcrumb/page.tsx diff --git a/pages/docs/components/button-group.tsx b/app/docs/components/button-group/page.tsx similarity index 100% rename from pages/docs/components/button-group.tsx rename to app/docs/components/button-group/page.tsx diff --git a/pages/docs/components/button.tsx b/app/docs/components/button/page.tsx similarity index 100% rename from pages/docs/components/button.tsx rename to app/docs/components/button/page.tsx diff --git a/pages/docs/components/card.tsx b/app/docs/components/card/page.tsx similarity index 100% rename from pages/docs/components/card.tsx rename to app/docs/components/card/page.tsx diff --git a/pages/docs/components/carousel.tsx b/app/docs/components/carousel/page.tsx similarity index 100% rename from pages/docs/components/carousel.tsx rename to app/docs/components/carousel/page.tsx diff --git a/pages/docs/components/dropdown.tsx b/app/docs/components/dropdown/page.tsx similarity index 100% rename from pages/docs/components/dropdown.tsx rename to app/docs/components/dropdown/page.tsx diff --git a/pages/docs/components/footer.tsx b/app/docs/components/footer/page.tsx similarity index 100% rename from pages/docs/components/footer.tsx rename to app/docs/components/footer/page.tsx diff --git a/pages/docs/components/forms.tsx b/app/docs/components/forms/page.tsx similarity index 100% rename from pages/docs/components/forms.tsx rename to app/docs/components/forms/page.tsx diff --git a/app/docs/components/layout.tsx b/app/docs/components/layout.tsx new file mode 100644 index 0000000000..4a36153e36 --- /dev/null +++ b/app/docs/components/layout.tsx @@ -0,0 +1,7 @@ +import type { FC, PropsWithChildren } from 'react'; + +const ComponentDocsLayout: FC = ({ children }) => { + return
{children}
; +}; + +export default ComponentDocsLayout; diff --git a/pages/docs/components/list-group.tsx b/app/docs/components/list-group/page.tsx similarity index 100% rename from pages/docs/components/list-group.tsx rename to app/docs/components/list-group/page.tsx diff --git a/pages/docs/components/modal.tsx b/app/docs/components/modal/page.tsx similarity index 100% rename from pages/docs/components/modal.tsx rename to app/docs/components/modal/page.tsx diff --git a/pages/docs/components/navbar.tsx b/app/docs/components/navbar/page.tsx similarity index 100% rename from pages/docs/components/navbar.tsx rename to app/docs/components/navbar/page.tsx diff --git a/pages/docs/components/pagination.tsx b/app/docs/components/pagination/page.tsx similarity index 100% rename from pages/docs/components/pagination.tsx rename to app/docs/components/pagination/page.tsx diff --git a/pages/docs/components/progress.tsx b/app/docs/components/progress/page.tsx similarity index 95% rename from pages/docs/components/progress.tsx rename to app/docs/components/progress/page.tsx index 5ed9941458..02fe0af337 100644 --- a/pages/docs/components/progress.tsx +++ b/app/docs/components/progress/page.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; +import type { CodeExample } from '~/pages/docs/components/demo'; +import DemoPage from '~/pages/docs/components/demo'; import { Progress } from '~/src'; -import type { CodeExample } from './demo'; -import DemoPage from './demo'; const ProgressPage: FC = () => { const examples: CodeExample[] = [ diff --git a/pages/docs/components/rating.tsx b/app/docs/components/rating/page.tsx similarity index 100% rename from pages/docs/components/rating.tsx rename to app/docs/components/rating/page.tsx diff --git a/pages/docs/components/sidebar.tsx b/app/docs/components/sidebar/page.tsx similarity index 100% rename from pages/docs/components/sidebar.tsx rename to app/docs/components/sidebar/page.tsx diff --git a/pages/docs/components/spinner.tsx b/app/docs/components/spinner/page.tsx similarity index 100% rename from pages/docs/components/spinner.tsx rename to app/docs/components/spinner/page.tsx diff --git a/pages/docs/components/table.tsx b/app/docs/components/table/page.tsx similarity index 100% rename from pages/docs/components/table.tsx rename to app/docs/components/table/page.tsx diff --git a/pages/docs/components/tabs.tsx b/app/docs/components/tabs/page.tsx similarity index 100% rename from pages/docs/components/tabs.tsx rename to app/docs/components/tabs/page.tsx diff --git a/pages/docs/components/timeline.tsx b/app/docs/components/timeline/page.tsx similarity index 100% rename from pages/docs/components/timeline.tsx rename to app/docs/components/timeline/page.tsx diff --git a/pages/docs/components/toast.tsx b/app/docs/components/toast/page.tsx similarity index 100% rename from pages/docs/components/toast.tsx rename to app/docs/components/toast/page.tsx diff --git a/pages/docs/components/tooltip.tsx b/app/docs/components/tooltip/page.tsx similarity index 100% rename from pages/docs/components/tooltip.tsx rename to app/docs/components/tooltip/page.tsx diff --git a/pages/_app.tsx b/app/docs/layout.tsx similarity index 87% rename from pages/_app.tsx rename to app/docs/layout.tsx index 3b3b6a0a5b..f4196550f2 100644 --- a/pages/_app.tsx +++ b/app/docs/layout.tsx @@ -1,62 +1,47 @@ -import type { AppProps } from 'next/app'; -import Head from 'next/head'; +'use client'; + import Image from 'next/image'; import Link from 'next/link'; -import { useRouter } from 'next/router'; import type { NextPage } from 'next/types'; -import type { FC } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { useRef, useState } from 'react'; import { BsDiscord, BsGithub } from 'react-icons/bs'; import { HiMenuAlt1, HiX } from 'react-icons/hi'; import { SiStorybook } from 'react-icons/si'; +import '~/app/style.css'; import { DarkThemeToggle, Flowbite, Footer, Navbar, Sidebar, Tooltip } from '~/src'; -import '~/styles/globals.css'; -interface AppState { +interface LayoutState { collapsed: boolean; setCollapsed: (collapsed: boolean) => void; } -const App: NextPage = function ({ Component, pageProps }) { +const DocsLayout: NextPage = function ({ children }) { const mainRef = useRef(null); - const router = useRouter(); const [collapsed, setCollapsed] = useState(false); - const isHomepage = router.pathname === '/'; - const state: AppState = { + const state: LayoutState = { collapsed, setCollapsed, }; return ( - <> - - - - - - - -
- -
- {!isHomepage && } -
- -
-
- + +
+ +
+ +
+ {children} +
- - + +
+ ); }; -const AppNavbar: FC = function ({ collapsed, setCollapsed }) { - const router = useRouter(); - - const isHomepage = router.pathname === '/'; - +const DocsNavbar: FC = function ({ collapsed, setCollapsed }) { return ( = function ({ collapsed, setCollapsed }) { }} >
- {!isHomepage && collapsed && ( + {collapsed ? ( = function ({ collapsed, setCollapsed }) { onClick={() => setCollapsed(!collapsed)} /> - )} - {!isHomepage && !collapsed && ( + ) : ( = function ({ collapsed, setCollapsed }) {
- {isHomepage && ( - - Docs - - )} = function ({ collapsed, setCollapsed }) { ); }; -const AppSidebar: FC = function ({ collapsed }) { +const DocsSidebar: FC = function ({ collapsed }) { return ( = function ({ collapsed }) { ); }; -const AppFooter: FC = () => { +const DocsFooter: FC = () => { return (