Remove Antd and replace with Tailwind and Shadcnui

.eslintrc.cjs

@@ -15,7 +15,6 @@ module.exports = {
     'plugin:@tanstack/eslint-plugin-query/recommended',
     'prettier',
   ],
-  plugins: ['@emotion'],
   env: {
     browser: true,
     es2024: true,
@@ -82,10 +81,6 @@ module.exports = {
     'react/style-prop-object': 'error',
 
     'import/first': 'error',
-
-    // Emotion
-    'react/no-unknown-property': ['error', { ignore: ['css'] }],
-    '@emotion/syntax-preference': ['error', 'object'],
   },
   overrides: [
     {
@@ -94,6 +89,7 @@ module.exports = {
         'plugin:@typescript-eslint/strict-type-checked',
         'plugin:@typescript-eslint/stylistic-type-checked',
         'plugin:import/typescript',
+        'plugin:tailwindcss/recommended',
         'prettier',
       ],
       parser: '@typescript-eslint/parser',
@@ -107,10 +103,21 @@ module.exports = {
             alwaysTryTypes: true,
           },
         },
+        tailwindcss: {
+          callees: ['clsx', 'cva', 'cn'],
+          config: 'tailwind.config.js',
+        },
       },
       rules: {
         curly: 'error', // Prettier disables this https://github.com/prettier/eslint-config-prettier/tree/main?tab=readme-ov-file#curly
 
+        /**
+         * Turn-off recommended rules
+         */
+        'tailwindcss/classnames-order': 'off', // covered by prettier-plugin-tailwindcss
+        'tailwindcss/migration-from-tailwind-2': 'off',
+        'tailwindcss/no-custom-classname': 'off',
+
         /**
          * 'tsc' already handles this (https://typescript-eslint.io/linting/troubleshooting/performance-troubleshooting#eslint-plugin-import)
          */
@@ -150,6 +157,15 @@ module.exports = {
         '@typescript-eslint/consistent-type-imports': 'error', // Vite https://vitejs.dev/guide/features#transpile-only
       },
     },
+    {
+      // Shadcn-UI
+      files: ['src/common/components/ui/**/*.ts?(x)'],
+      rules: {
+        'react/prop-types': 'off',
+        '@typescript-eslint/consistent-type-definitions': 'off',
+        '@typescript-eslint/no-empty-interface': 'off',
+      },
+    },
     {
       files: ['**/__tests__/**/*', '**/*.{spec,test}.*'],
       extends: [

.prettierrc

@@ -1,5 +1,6 @@
 {
-  "plugins": ["prettier-plugin-packagejson"],
+  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx", "cva", "cn"],
   "printWidth": 100,
   "singleQuote": true
 }

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
+    "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",

.vscode/settings.json

@@ -1,6 +1,19 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    // https://www.npmjs.com/package/clsx#tailwind-support
+    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    // https://cva.style/docs/getting-started/installation#intellisense
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
   "typescript.tsdk": "node_modules/typescript/lib"
 }

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 Martin Litvaj
+Copyright (c) 2024 Martin Litvaj
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -4,47 +4,67 @@
 
 ### 🔥 [Live Demo](https://react-starter-delta-one.vercel.app/) 🔥
 
-## Documentation
-
-There is a more extensive documentation at [DOCS.md](./DOCS.md).
-
-## Branches
-
-There are multiple alternative versions of this starter project commited to different branches:
-
-- [main branch](https://github.com/Kamahl19/react-starter) - the most general version of this starter
-- [Supabase branch](https://github.com/Kamahl19/react-starter/tree/supabase) - using Supabase (Firebase alternative) which provides a Postgres database, authentication, instant APIs, edge functions, realtime subscriptions, storage, etc... See the [diff here](https://github.com/Kamahl19/react-starter/compare/main...supabase).
-
-## Features
-
-- [TypeScript](https://www.typescriptlang.org/) - typed superset of JavaScript
-- [Vite](https://vitejs.dev/) - next generation frontend tooling
-- [Ant.Design](https://ant.design/) - UI library
-  - [Emotion](https://emotion.sh/) - CSS in JS library
-  - Light and Dark themes
-- [JWT](https://jwt.io/) Authentication - including all the common features such as Sign-up, Sign-in, Sign-out, Reset password, Email confirmation
+## What's Included
+
+- [React](https://react.dev/) - library to build user interfaces
+- [Tailwind CSS](https://tailwindcss.com/docs) - utility-first CSS framework
+  - [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) - Tailwind plugin for creating animations
+  - [tailwind-merge](https://github.com/dcastil/tailwind-merge) - merge Tailwind classes without conflicts
+  - [clsx](https://github.com/lukeed/clsx) - utility to construct classNames conditionally
+  - [cva](https://github.com/joe-bell/cva) - utility to create style variants
+  - [TW Config Viewer](https://github.com/rogden/tailwind-config-viewer) - UI tool for visualizing Tailwind config
+- [Radix UI](https://www.radix-ui.com/primitives) - low-level UI component library with a focus on a11y
+  - [shadcn/ui](https://ui.shadcn.com/) - collection of designed components mostly based on Radix UI with focus on a11y
+- [lucide icons](https://lucide.dev/) - icons set
+- [Postcss](https://github.com/postcss/postcss)
+  - [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) - supports nesting CSS, following the [CSS Nesting specification](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting)
+  - [autoprefixer](https://github.com/postcss/autoprefixer) - parse CSS and add vendor prefixes to rules by (caniuse.com)[https://caniuse.com/]
+- [Theme Provider](./src/app/providers/Theme.tsx) - supports Light, Dark and System themes
+- [TanStack Query](https://tanstack.com/query/) - asynchronous state management with declarative, always-up-to-date auto-managed queries and mutations
 - [Zod](https://github.com/colinhacks/zod) - TypeScript-first schema validation with static type inference
 - [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) based API client
   - [zod-fetch](https://github.com/mattpocock/zod-fetch) - to make API client type-safe
-- [react-query](https://tanstack.com/query/) - asynchronous state management with declarative, always-up-to-date auto-managed queries and mutations
 - [i18next](https://www.i18next.com/) - internationalization framework
   - [i18next-browser-languagedetector](https://github.com/i18next/i18next-browser-languageDetector) - language detection plugin
   - [i18next-parser](https://github.com/i18next/i18next-parser) - parses the code, extracts translation keys and produces i18n resource file
 - [Jotai](https://jotai.org/) - state management library
 - [React Router](https://reactrouter.com/) - declarative routing
-  - [use-react-router-breadcrumbs](https://github.com/icd2k3/use-react-router-breadcrumbs) - hook for generating route breadcrumbs
 - [react-error-boundary](https://github.com/bvaughn/react-error-boundary) - simple reusable React error boundary component
+- [JWT](https://jwt.io/) Authentication - including all the common features such as Sign-up, Sign-in, Sign-out, Reset password, Email confirmation
+- [TypeScript](https://www.typescriptlang.org/) - typed superset of JavaScript
+  - [@tsconfig/bases](https://github.com/tsconfig/bases) - strictest & Vite-React
+  - [ts-reset](https://github.com/total-typescript/ts-reset) - a 'CSS reset' for TypeScript, improving types for common JavaScript API's
+- [Vite](https://vitejs.dev/) - next generation frontend tooling
+  - [React SWC plugin](https://github.com/vitejs/vite-plugin-react-swc) - speed up Vite dev server with SWC
+  - [SVG plugin](https://github.com/pd4d10/vite-plugin-svgr) - transform SVGs into React components
+  - [TypeScript & ESLint check plugin](https://vite-plugin-checker.netlify.app)
+  - [TSConfig paths plugin](https://github.com/aleclarson/vite-tsconfig-paths) - support for TypeScript's path mapping in Vite
+  - [Validate ENV vars plugin](https://github.com/Julien-R44/vite-plugin-validate-env)
 - [Vitest](https://vitest.dev/) - blazing fast Vite-native unit test framework
   - [Testing Library](https://testing-library.com/) - simple and complete testing utilities that encourage good testing practices
-  - [MSW](https://mswjs.io/) - API mocking library for browser and Node.js
-  - [@mswjs/data](https://github.com/mswjs/data) - data modeling and relation library for testing
+    - [user-event](https://testing-library.com/docs/user-event/intro/) - simulates user interactions
+    - [jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/) - provides [custom DOM element matchers](https://github.com/testing-library/jest-dom#custom-matchers)
   - [jsdom-testing-mocks](https://github.com/trurl-master/jsdom-testing-mocks) - a set of tools for emulating browser behavior in jsdom environment
+  - [MSW](https://mswjs.io/) - API mocking library for browser and Node.js
+    - [@mswjs/data](https://github.com/mswjs/data) - data modeling and relation library for testing
 - [Prettier](https://prettier.io/) - opinionated code formatter
+  - [package.json plugin](https://github.com/matzkoh/prettier-plugin-packagejson) - to sort the keys of a `package.json` file
+  - [TW plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - to sort Tailwind classes
 - [ESLint](https://eslint.org/) - pluggable linting utility
 - [Husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged) - run ESLint & Prettier before commiting new code
 - [CI/CD](https://github.com/features/actions) - Github Actions to run integration tests on each PR & Main branch
 - [source-map-explorer](https://github.com/danvk/source-map-explorer) - analyze and debug space usage through source maps
-- [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) - visualize and analyze your bundle
+- [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) - visualize and analyze the production bundle
+
+### Built-in Authentication
+
+A token-based API agnostic authentication is already included in this project. It resides in [src/common/auth](./src/common/auth) and provides a `useAuth` hook. This hook returns current auth state (`token`, `userId`, `isLoggedIn`, and loading indicators), `signIn` method to perform a Sign-in operation, `relogin` method to renew the token, and `signOut` method to perform a Sign-out operation.
+
+It also provides 2 guard components, [RequireIsLoggedIn](./src/common/auth/RequireIsLoggedIn.tsx) and [RequireIsAnonymous](./src/common/auth/RequireIsAnonymous.tsx), to [wrap routes](./src/app/App.tsx).
+
+Internally, all auth state is stored by Jotai in [src/common/auth/state.ts](./src/common/auth/state.ts). The JWT token is persisted in `localStorage`.
+
+There is also a [src/app/PersistAuthGate.tsx](./src/app/PersistAuthGate.tsx) to automatically relogin a user after the page reloads if token is present in `localStorage`.
 
 ## Installation
 
@@ -85,11 +105,11 @@ Build the app for production
 npm run build
 ```
 
-Your app is then ready to be deployed from the `/dist` folder. See the [Building for Production](https://vitejs.dev/guide/build.html#browser-compatibility) and [Deploying a Static Site](https://vitejs.dev/guide/static-deploy.html) for more information.
+The app is then ready to be deployed from the `/dist` folder. See the [Building for Production](https://vitejs.dev/guide/build.html#browser-compatibility) and [Deploying a Static Site](https://vitejs.dev/guide/static-deploy.html) for more information.
 
 ## Deploying to Vercel
 
-You can read more about [how to deploy to Vercel here](https://vercel.com/docs/getting-started-with-vercel). In short, these are the necessary steps:
+Read more about [how to deploy to Vercel here](https://vercel.com/docs/getting-started-with-vercel). In short, these are the necessary steps:
 
 0. Confugiration file [vercel.json](./vercel.json) is already created in this project
 1. Create new Vercel Project
@@ -127,22 +147,36 @@ Launch the test runner in the interactive watch mode
 npm run test
 ```
 
+Vitest also provides a [neat UI](https://vitest.dev/guide/ui.html) to view and interact with the tests. Open it by running `npm run test:ui`.
+
 See [Vitest docs](https://vitest.dev/) for more information.
 
 ## Prettier
 
-This project uses [Prettier](https://prettier.io/), an opinionated code formatter. In order to format code manually, run `npm run format` in app root directory. All the code is also formatted automatically on `pre-commit` hook. There is also `npm run format-check` for CI purposes to check if code is formatted properly.
+This project uses [Prettier](https://prettier.io/), an opinionated code formatter, to ensure that the whole codebase conforms to a consistent style.
+
+Prettier runs when:
+
+- developer manually executes `npm run format` command
+- in IDE on file-save if configured ([VSCode](https://github.com/prettier/prettier-vscode), [IntelliJ IDEA](https://prettier.io/docs/en/webstorm.html))
+- automatically on `pre-commit` hook, right before code is committed
+- during CI
 
 ## ESLint
 
-Project comes with ESLint configured. It helps you prevent common errors.
+Project comes with ESLint configured. It helps us prevent common errors.
 
-There are multiple ways how to run ESLint.
+Code quality concerns, best practices, possible logical issues etc. are checked by [ESLint](https://eslint.org/docs/latest/user-guide/). Our custom ESLint configuration [.eslintrc.cjs](./.eslintrc.cjs) includes these rules and plugins:
 
-- CLI: `npm run lint`
-- in terminal while developing (after running `npm start`)
-- it runs automatically on `pre-commit` hook
-- in IDE if supported
+ESLint runs when:
+
+- developer manually executes `npm run lint` command
+- developer starts Vite dev server by `npm start` command
+- in IDE on background if supported ([VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), [IntelliJ IDEA](https://www.jetbrains.com/help/webstorm/eslint.html))
+- automatically on `pre-commit` hook, right before code is committed
+  - defining actions ([.husky/pre-commit](./.husky/pre-commit)) for git hooks is enabled by [Husky](https://github.com/typicode/husky)
+  - linting only the files and changes being committed enables [lint-staged](https://github.com/lint-staged/lint-staged)
+- during continuous integration defined in [.github/workflows/test.yml](./.github/workflows/test.yml)
 
 ## i18n
 
@@ -162,10 +196,6 @@ If you don't use GitHub you can remove the `.github` folder, otherwise follow th
    - Select build checks being run in test.yml
 2. Update path to your repository (eg. `Kamahl19/react-starter`) and name of the branch for CI badge in `README.md`
 
-## More Docs & Guides
-
-Please read [DOCS.md](./DOCS.md) for more useful guides and documentation.
-
 ## Keeping up with updates
 
 Once you start building your own app on top of React Starter you will probably want to keep up-to-date with the new updates of React Starter. This can be easily achieved using GitHub's compare feature. We suggest this process:

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/common/components",
+    "utils": "@/common/styleUtils"
+  }
+}