Integrate shadcn (#156)

* chore: update dependencies and version; refactor styles and components

- Bump version to 1.4.0-alpha.1 in package.json
- Add new dependencies: @fontsource-variable/noto-sans, lucide-react, radix-ui, shadcn, and tw-animate-css
- Refactor Breadcrumbs, ThemeToggle, Dialog, Header, MenuButton, and Theme components for improved styling and consistency
- Update CSS variables for light and dark themes in index.css
- Enhance utility functions in css.ts for better class name handling

* feat: integrate theme management with system preferences and update default settings

* refactor: update theme type to use ThemeValue for consistency

* docs: enhance documentation for ThemeValue type in Theme component

* feat: integrate shadcn/ui component library into documentation

* feat: add shadcn Components Guide to documentation

* feat: update iconography section to include Lucide alongside Font Awesome

Author: mwarman

README.md

@@ -41,12 +41,13 @@ The application production technology stack includes:
 
 - React - core web user interface library
 - React Router Dom - declarative component routing
+- shadcn/ui - common component library
 - TanStack Query - asynchronous state management, caching, and data fetching
 - Axios - http client
 - React Hook Form - form management, validation, error handling, custom fields, etc.
 - TailwindCSS - utility first CSS framework
 - React Spring - animations
-- Font Awesome - iconography
+- Font Awesome + Lucide - iconography
 - Google Fonts - typography
 - React i18next - internationalization
 - Zod - schema based validation
@@ -208,13 +209,15 @@ Build a static version the [Storybook][storybook] UI which may be deployed to a
 - [Vite][vite]
 - [React][react]
 - [React Router][reactrouter]
+- [shadcn/ui][shadcn]
 - [TanStack][tanstack]
 - [Axios][axios]
 - [React Hook Form][reacthookform]
 - [Zod][zod]
 - [Tailwind CSS][tailwind]
 - [Class Variance Authority][cva]
 - [Font Awesome][fontawesome]
+- [Lucide][lucide]
 - [React Spring][reactspring]
 - [React i18next][reacti18next]
 - [Recharts][recharts]
@@ -228,11 +231,13 @@ Build a static version the [Storybook][storybook] UI which may be deployed to a
 [react]: https://react.dev 'React'
 [reactrouter]: https://reactrouter.com/ 'React Router'
 [vite]: https://vitejs.dev/ 'Vite'
+[shadcn]: https://ui.shadcn.com/ 'shadcn/ui'
 [axios]: https://axios-http.com/ 'Axios'
 [reacthookform]: https://www.react-hook-form.com/ 'React Hook Form'
 [tailwind]: https://tailwindcss.com/ 'Tailwind CSS'
 [cva]: https://cva.style/ 'Class Variance Authority'
 [fontawesome]: https://fontawesome.com/ 'Font Awesome'
+[lucide]: https://lucide.dev/icons/ 'Lucide'
 [tanstack]: https://tanstack.com/ 'TanStack'
 [testing-library]: https://testing-library.com/ 'Testing Library'
 [ghactions]: https://docs.github.com/en/actions 'GitHub Actions'

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "src/common/components",
+    "utils": "src/common/utils/css",
+    "ui": "src/common/components/shadcn",
+    "lib": "src/common/utils",
+    "hooks": "src/common/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

docs/README.md

@@ -7,6 +7,7 @@ Welcome to the project documentation for the React Starter project. This directo
 - [DevOps Guide](./DEVOPS_GUIDE.md): GitHub Actions workflows, CI/CD, and automation.
 - [Configuration Guide](./CONFIGURATION_GUIDE.md): Application and infrastructure configuration, environment variables, and validation.
 - [Infrastructure Guide](./INFRASTRUCTURE_GUIDE.md): AWS CDK Infrastructure as Code.
+- [shadcn Components Guide](./SHADCN_GUIDE.md): Using and configuring shadcn/ui components.
 
 <br/>