Replace create-react-app development server by Next.js (#642)

* chore(.editorconfig): remove `.editorconfig`

We already use `prettier`.

* chore(package.json): upgrade dependencies to latest

* chore(.gitignore): add `nextjs` ignores to `.gitignore`

* chore(.npmignore): add more files irrelevant to build

* chore(.prettierignore): remove pointless ignore file

We can just provide `.gitignore` to `prettier`.

* build: migrate `create-react-app` -> `next.js`

We currently use `react-app-rewired`, via `create-react-app`, to run the
development server for local testing of the library.

In this step, we migrate config files to appropriate settings for `next.js` and remove dependencies
we no longer need.

* refactor(/lib/components/*): migrate `/src/lib/*` -> `/src/*`

* refactor(/src/docs/*): migrate `/src/docs/*` -> `/pages/*`

* chore(prettier): run `prettier`

* build(husky): remove `husky`

We already run mandatory CI checks on pull requests and indicate in the contributing guide how to
format and run tests. I don't think this is really necessary.

* refactor(/src/lib/helpers): rename `windowExists` -> `isClient`

This is more consistent with the new React Server Components terminology where `"use client"` is a
new explicit requirement for many components.

* refactor(/src/lib/theme): move to `/src/theme`

* chore(package.json): change `flowbite` to normal dependency

* fix(/src/components/modal): fix server/client mismatch with `next.js`, etc

thanks to @multiwebinc - see #606

* refactor: resolve `eslint` errors

* refactor(/pages/*): migrate docs to `/pages/docs/*`

Move the theme documentation to `/pages/docs/theme`, and all components to `/pages/docs/components`.
We'll want to create a new page that's just for `DarkThemeToggle` in the latter folder, as well.

* chore(tsconfig.json): add root `path`: `~` -> `.`

Add a relative path via `tsconfig.json`'s `paths` field. Now, instead of chaining `../../`s in
`import`s, we can just refer to the base directory as `~`, e.g., `~/src/components/Alert`.
Additionally, because we are exporting the contents of the library , the vast majority of imports
can simply be achieved via `import { X } from ` 'src';`

* refactor: use `~` paths where applicable

* feat(/src/components/navbar): allow `<Navbar.Brand as={CustomComponent} ..>`

We needed `Record<string, unknown>` so users can add any additional props their custom component
needs.

* fix(/components/navbar): allow `<Navbar.Link as={CustomComponent} ..>`

* fix(/src/theme): add missing border to `<Navbar>` theme

We provided border colors, but did not actually provide a `border-width` property, for some reason.

* feat(/pages/*): add Inter font from `flowbite` to docs pages

* docs(/pages/*): update logo, docs pages layout

resolve #166 and #165

* docs(/pages/index): add docs page: `/`

* docs(/pages/docs/index): add docs page: `/docs`

* docs(/pages/*): add missing docs links to `<Sidebar>`

* chore(package.json): upgrade `flowbite` -> `1.6.4`

* chore(package.json): upgrade `flowbite` -> `1.6.3`

* revert(/pages/index): remove homepage redesign

We'll get to this later.

* docs(/pages/*): add missing images

* chore(.vscode): add Visual Studio Code settings

* refactor(next.js): migrate to `next.js` `13` `app/` directory

* chore(package.json): upgrade deps to latest

* refactor(/src/components/table): fix broken import on `merge-deep`

* chore(tailwind.config): import Tailwind CSS classes from `app/`

* refactor(/app/docs/components): migrate components' docs pages to `nextjs`

* chore(format): format project with `prettier`

* chore(lint): lint project with `eslint`

* feat(tailwind.config.js): add `primary` color values

* refactor(general): use `primary` instead of `blue` across components and theming settings

* docs(navbar): update style for the menu items

* docs(general): use styled components

* docs(general): use font smoothing across the docs

* docs(navbar): update logo and text size

* docs(layout): add general layout and improve navbar

* docs(styles): set up basic styles for markdown

* docs(footer): update styles

* docs(markdown): setup basic `mdx` content for accordion

* docs(colors): update `primary` to `cyan`

* chore(lock files): remove lock files

* chore: ignore lock files

* docs(config): setup full font family settings and max width class

* docs(homepage): add gallery thumbnail for hero section

* docs(homepage layout): add layout for homepage

* docs(homepage): move navbar and footer to homepage layout

* docs(components layout): add `max-w-4xl` container for content

* docs(config): move maxWidth values to `extend``

* revert(next.config): undo use styled components

* refactor(nextjs): fix `MDX` implementation in `nextjs` `13`

Note: currently, MDX files don't update until `yarn dev` is stopped and started again. Urgently want
to fix.

* chore(prettier): format with `prettier`

* docs(homepage): create separate component for hero section

* docs(homepage): finish "featured in" section with links

* docs(homepage): add components section and update thumbnails

* fix(homepage): component card key prop and string type

* docs(homepage): add contributors section with live GH data

* docs(contributors): improve content

* docs(prettier): add VS code settings json file & format

* docs(layout): add dividers for main content

* chore(next): update to `v13.4.0`

* docs(layout): add root layout with `html` and `body` tags as recommended by Next JS docshttps://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts

* chore(vs code): disable linting on paste

* docs(homepage): fix contributors data by using useEffect instead of SSC fetch

* docs(navbar): make navigation bar sticky

* docs(component cards): fix dark mode size of thumbnails

* docs(feature section): add first homepage feature section

* docs(homepage): rename React section

* docs(homepage): dark mode section content and images

* docs(homepage): add new tailwind css section

* docs(homepage): add Figma section

* docs(homepage): add social proof section with live data from GitHub, NPM, and Discord

* docs(homepage): use live data for number of components in text

* docs(homepage): fix typo for `f` letter

* docs(homepage): React instead of Svelte :)

* docs(homepage): improve copywriting content of the hero section

* chore(.vscode/settings): ignore output folders in VS Code

* build(storybook): fix `storybook` for `nextjs` build system

* refactor(/src/components/floating): update `@floating-ui/react` to
newest API

* perf(next.config): let `nextjs` compile `mdx` with `rust`

* docs(/app/components/code-preview): add syntax highlighting to code previews

* refactor(prismjs): look for `prismjs` code blocks on every page

* docs(/): link Get started `Button` to `/quickstart`

* revert(next.config): revert experimental `mdxRs`

Unfortunately, it looks like the Rust-based MDX generator breaks (some?) Remark plugins, so we can't
use it yet.

* docs(getting-started/contributing): add page, Getting started->Contributing

* docs(getting-started/contributing): update for new dev process

* revert(tailwind.config): undo only look for `.mdx`, `.tsx`

* docs(getting-started/nextjs): add page, Getting started->Next.js

* docs(app/docs.css): sync styles for markdown with `flowbite-svelte.com`

* docs(app/docs/layout): match `Navbar` to `flowbite-svelte.com`

* docs(customize/theme): add page, Customize->Theme

* revert(tailwind.config): undo look in all folders

This was an unintentional oversight caused by the brief use of `mdx-components.tsx`.

* docs(*): refresh syntax highlighter on page loads

* docs(customize/dark-mode): add page, Customize->Dark mode

* docs(getting-started/introduction): add docs, Getting started->Introduction

* docs(getting-started/quickstart): add docs, Getting started->Quickstart

* chore(package.json): upgrade `nextjs` -> `13.4.3.`

* docs(/): change Get started `Button` link to Introduction docs

* docs(app/docs/layout): change color for current page in `Sidebar` links

* docs(getting-started/license): add page, Getting started->License

* docs(getting-started/typescript): add page, Getting started->TypeScript

* docs(sidebar): improve spacing between sidebar items

* docs(content): create content layout component

* docs(general): use `DocsContentLayout` component for main layout

* docs(alert): set up `mdx` files and content for the Alert component

* docs(avatar): setup `mdx` docs content for Avatar

* docs(badge): setup `mdx` file for Badge component

* docs(breadcrumb): setup `mdx` file for Breadcrumb

* docs(buttons): add `mdx` file for Button

* docs(button group): add `mdx` content for Button Group

* docs(cards): add `mdx` files to Card

* docs(carousel): move carousel to `mdx`

* docs(dropdown): move dropdown to `mdx`

* docs(sidebar): add missing sidebar links

* docs(footer): add footer component to `mdx`

* docs(app/docs/layout): fix `Sidebar` on small screens

* build(src/components/*): add `displayName` to components without one

Next.js seems to rename components in production if they do not have an explicit `displayName`.

* docs(/): add `npm i flowbite-react` with copy-to-clipboard action

* docs(app/components/code-preview): only display function's name in code previews, for now

We would like to be able to show function bodies, but that creates an undesirable result for FCs
that are imported inside props, like `icon={<HiInformationCircle />}`, which becomes a mess. Same
with `icon={HiInformationCircle}`.  We should revisit this in the future, but for now, changing the
default to only display the name of the function is sufficient. We can probably attach
`displayName`s to external components we use to get their proper name, but there might be an even
easier solution.

* docs(components/*): add SEO "short descriptions" to components

* docs(components/*): add SEO "long descriptions" for components

These are about a paragraph long, and go into more specific detail about how to use components
(e.g., common use cases like FAQ for Accordion).

* build(next.config): add 301 redirects for old docs pages

* docs(/): fix `Navbar` should be container width

* refactor(app/docs/*): replace absolute paths with `~`

* docs(app/docs/layout): fix more subtle differences to `flowbite-svelte.com`

In the `Navbar` and `Sidebar`.

* refactor(src/components/*): add missing `"use client";` directives

* docs(app/components/navbar): fix `Badge` color for latest semver

* docs(*): fix various hydration errors

* revert(.gitignore): undo ignore lockfiles

Please don't change this! We want the yarn lockfile, just not the npm one. @zoltanszogyenyi

* docs(app/layout): add favicon

* revert(package.json): return `flowbite` -> `peerDependencies`

* fix(src/components/flowbite): set uniform default state for `ThemeContext`

React Server Components don't like it when we dynamically change state based on whether we're in the
server or client. Those should be achieved by `useEffect` once mounted.

* ci(.github/workflows/*): remove `storybook` build step from CI

* chore(flowbite): move `flowbite` from peerDependency to dependency

* docs(styles): fix main content typography style targeting

* docs(sidebar): reduce gap between sidebar category items

* docs(app/components/code-preview): change default code highlighter style to `.tsx`

* ci(.github/workflows/build): remove Github Pages deploy step

* docs(*): add base `<meta/>` tags and `<title>`

* docs(components/*): add `<title>`, `<meta description/>` to component pages

* refactor(src/components/*): remove pointless `'use client';` directives

---------

Co-authored-by: Zoltán Szőgyényi <[email protected]>

.github/workflows/build.yaml

@@ -50,12 +50,3 @@ jobs:
           fail_ci_if_error: false
           files: coverage/coverage-final.json
           verbose: false
-
-      - name: 📖 Build Storybook
-        run: yarn build:storybook
-
-      - name: 🚀 Deploy the website
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          branch: gh-pages
-          folder: build

.github/workflows/ci.yaml

@@ -51,6 +51,3 @@ jobs:
 
       - name: 🧰 Build code
         run: yarn build
-
-      - name: 📖 Build Storybook
-        run: yarn build:storybook

.gitignore

@@ -1,29 +1,13 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
+.next
+.vercel
+build
+coverage
 cypress/screenshots
 cypress/videos
-
-# production
-/build
-/lib
-
-# misc
-.idea
+lib
+node_modules
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 npm-debug.log*
+tsconfig.tsbuildinfo
 yarn-debug.log*
-yarn-error.log*
-
-.eslintcache
+yarn-error.log*

.npmignore

@@ -1,18 +1,20 @@
-.prettierrc
-.prettierignore
-.gitignore
 .github
-.idea
-.storybook
-.husky
-.eslintignore
-.editorconfig
+.vscode
+build
+pages
+public
+styles
+.gitignore
+.prettierrc
 CNAME
+CODE_OF_CONDUCT.md
 codecov.yaml
 cypress.json
-tsconfig.json
-
+LICENSE
+next-env.d.ts
+next.config.mjs
 node_modules
-src
-build
-docs
+README.md
+tsconfig.json
+tsconfig.tsbuildinfo
+vite.config.ts

.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: (config) => {
+    config.resolve!.plugins = [new TsconfigPathsPlugin()];
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import './style.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/style.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: 'Inter';
+    src: url(/public/inter.woff2) format('woff2');
+    font-weight: 100 200 300 400 500 600 700 800 900;
+    font-display: swap;
+  }
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": false,
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "eslint.enable": true,
+  "eslint.format.enable": true,
+  "files.exclude": {
+    ".next/": true,
+    "build/": true,
+    "lib/": true,
+    "node_modules": true,
+    "yarn-error.log": true,
+    "yarn.lock": true
+  },
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.updateImportsOnFileMove.enabled": "always"
+}