Merge pull request #4 from riipandi/feat/react-router-v7

Feat: React Router v7

.dockerignore

@@ -1,25 +1,39 @@
-/public/build
-/build
-/dist
+build/
+dist/
+_data/
+.data
+.dist
+.build
+.output
+.react-router
+.wrangler
 .cache
+.github
 .husky
+.temp
+.unikraft
+.vscode
 .DS_Store
 .DS_Store?
 .dockerignore
 .sentryclirc
 Dockerfile
+compose.env*
 node_modules
 npm-debug.log
 slim.report.json
 playwright-report/
 tests-results/
+/public/build
 .playwright/
 .git
 .gitignore
 *.sqlite*
 *.sqlite3*
-*.libsql*
-*.db
+*.db*
 *.log
 *.md
 .env*
+.meta
+.data
+.client

.editorconfig

@@ -13,7 +13,10 @@ max_line_length = 100
 [*.{json,jsonc,plist}]
 max_line_length = off
 
-[*.{js,cjs,mjs,jsx,ts,tsx,css,html,txt,toml,yml,yaml}]
+[*.{js,cjs,mjs,jsx,ts,tsx,html,txt}]
+indent_size = 2
+
+[{justfile,*.{just,toml,yml,yaml}}]
 indent_size = 2
 
 [*.txt]

.gitignore

@@ -1,10 +1,13 @@
 /node_modules
+/.rollup.cache
 /.fleet
 /.idea
 /.pnp
 /.cache
 /.output
 /.husky
+/.temp
+/.unikraft
 .pnp.js
 .DS_Store
 .DS_Store?
@@ -18,25 +21,39 @@ $RECYCLE.BIN/
 !.vscode/extensions.json
 !.vscode/settings.json
 !.vscode/launch.json
-
 *.bak
 
 # SQLite
 *.sqlite*
 *.sqlite3*
-*.libsql
 *.db
 
-# Remix
-/public/build
-/public/entry.worker.js
-/build
-/dist
-/tmp
+# Projects
+_data/
+build/
+dist/
+.data
+.dist
+.cache
+.output
+.client
+.build
+.react-router
+.wrangler
+
+# Vite & Vitest config
+vite.config.*
+!vite.config.ts
+vitest.config.*
+!vitest.config.ts
+vitest.workspace.*
+!vitest.workspace.ts
 
 # envars
 .env.*
 !.env.example
+compose.env*
+!compose.env.example
 
 # Disable this line in your real app
 /playwright/.cache/
@@ -50,18 +67,16 @@ $RECYCLE.BIN/
 
 # Storybook
 *storybook.log
-/storybook-static/
+storybook-static/
 
-# fly.toml
+# fly.io
 fly*.toml*
 !fly*.example.toml
 
 # Miscellaneous
-vite.config.ts.*
-RELEASE_NOTE.md
-.unikraft/
+pnpm-exec-summary.json
 slim.report.json
-stats.html
+RELEASE_NOTE.md
 
 # Terraform
 .terraform/

.lefthook.yaml

@@ -0,0 +1,68 @@
+# Refer for explanation to following link:
+# https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md
+
+assert_lefthook_installed: true
+skip_lfs: true
+
+output:
+  - success        # Print successful steps
+  - failure        # Print failed steps printing
+  - execution      # Print any execution logs
+  - execution_out  # Print execution output
+  # - meta           # Print lefthook version
+  # - summary        # Print summary block (successful and failed steps)
+  # - empty_summary  # Print summary heading when there are no steps to run
+  # - execution_info # Print `EXECUTE > ...` logging
+  - skips          # Print "skip" (i.e. no files matched)
+
+pre-commit:
+  parallel: true
+  commands:
+    format:
+      glob: "*.{js,ts,jsx,tsx,json}"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm --silent exec biome format {all_files} --write
+    check:
+      glob: "*.{js,ts,jsx,tsx,json}"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm --silent exec biome check {staged_files} --write
+    lint:
+      files: git diff --name-only main
+      glob: "*.{js,ts,jsx,tsx,json}"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm --silent exec biome lint {staged_files} --write
+    typecheck:
+      files: git diff --name-only main
+      glob: "*.{js,ts,jsx,tsx,json}"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm --silent exec tsc --noEmit --extendedDiagnostics
+    # test-unit:
+    #   glob: "*.{js,ts,jsx,tsx,json}"
+    #   exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+    #   run: pnpm --silent test
+    # test-coverage:
+    #   glob: "*.{js,ts,jsx,tsx,json}"
+    #   exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+    #   run: pnpm --silent test:coverage
+    # test-e2e:
+    #   glob: "*.{js,ts,jsx,tsx,json}"
+    #   exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+    #   run: pnpm --silent e2e-test:chrome
+    # check-links:
+    #   glob: '*.md'
+    #   run: lychee --max-concurrency 3 {all_files}
+    #   exclude: [CHANGELOG.md, CONTRIBUTING.md]
+
+pre-push:
+  commands:
+    npm-audit:
+      tags: frontend security
+      run: pnpm --silent audit --prod
+
+pre-deploy:
+  parallel: false
+  commands:
+    docker-build:
+      run: |
+        pnpm docker:build
+        pnpm docker:images

.ncurc.json

@@ -4,9 +4,9 @@
     "upgrade": true,
     "color": true,
     "root": true,
-    "deep": false,
-    "silent": false,
+    "deep": true,
     "install": "always",
     "packageManager": "pnpm",
+    "silent": false,
     "reject": []
 }

.npmrc

@@ -1 +1,3 @@
-update-notifier = false
+shamefully-hoist=true
+strict-peer-dependencies=false
+update-notifier=false

.storybook/_docs/changelog.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta
+  title="Changelog"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+# Changelog

.storybook/_docs/getting-started.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta
+  title="Getting Started"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+# Getting Started

.storybook/_docs/introduction.mdx

@@ -0,0 +1,64 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta
+  title="Introduction"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+# Introduction
+
+Welcome to our UI Components Library, a comprehensive collection of React components built with
+modern web development best practices. Under the hood, it uses Tailwind CSS, Radix UI, and TypeScript
+to deliver accessible, type-safe, and customizable components. The design is based on shadcn/ui.
+
+## Key Features
+
+- 🎨 Modern styling with Tailwind CSS and Tailwind Variants
+- ♿️ Accessible components with Radix UI
+- 🔒 Type-safe implementation with TypeScript
+- 🌓 Seamless dark mode integration
+- 📱 Responsive design patterns
+- 🚀 Production-ready components
+
+## Component Categories
+
+### Core Elements
+Fundamental building blocks that form the foundation of the UI system, including text, headings, buttons, and basic display elements.
+
+### Form Controls
+Comprehensive form elements and input components with built-in validation support and accessibility features.
+
+### Layout Components
+Structural components that help organize and present content in clear, logical ways.
+
+### Interactive Features
+Enhanced components that provide rich interactions and dynamic user experiences.
+
+## Design Philosophy
+
+Our components follow these key principles:
+- Atomic Design: Building from simple elements to complex patterns
+- Composition: Flexible component combinations and extensions
+- Progressive Enhancement: Core functionality with optional rich features
+- Logical Organization: Clear component relationships and dependencies
+
+## Theme Customization
+
+Components support both light and dark themes through CSS variables and Tailwind configuration. Colors, spacing, and other design tokens can be customized to match your brand.
+
+## Best Practices
+
+- Use semantic HTML elements
+- Follow accessibility guidelines
+- Maintain consistent styling
+- Leverage TypeScript for type safety
+- Use composition for complex UIs
+
+## Contributing
+
+Components are built with maintainability and reusability in mind. Contributions should follow the established patterns and include proper documentation.

.storybook/components/docs-container.tsx

@@ -0,0 +1,24 @@
+import { DocsContainer as BaseContainer } from '@storybook/blocks'
+import * as React from 'react'
+import { dark, light, listenToColorScheme } from '../themes'
+
+const themes = { light, dark }
+
+/**
+ * Switch color scheme based on the global types or system preferences
+ */
+export const DocsContainer: typeof BaseContainer = ({ children, context }) => {
+  const [theme, setTheme] = React.useState('light')
+
+  React.useEffect(() => listenToColorScheme(context.channel, setTheme), [context.channel])
+
+  React.useEffect(() => {
+    document.documentElement.dataset.theme = theme
+  }, [theme])
+
+  return (
+    <BaseContainer context={context} theme={themes[theme]}>
+      {children}
+    </BaseContainer>
+  )
+}

.storybook/components/link.tsx

@@ -0,0 +1,33 @@
+import LinkTo from '@storybook/addon-links/react'
+import * as React from 'react'
+import type { AnchorHTMLAttributes } from 'react'
+
+const LINK_PREFIXES = ['/', 'http', 'mailto', '#', 'tel']
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string
+}
+
+export function Link({ children, href, ...props }: LinkProps) {
+  const storyName = decodeURIComponent(href)
+
+  const isStoryName = !LINK_PREFIXES.some((prefix) => storyName.startsWith(prefix))
+
+  if (isStoryName) {
+    const parts = storyName.split('/')
+    const name = parts.length > 2 ? parts[parts.length - 1] : 'base'
+    const components = parts.slice(0, parts.length - 1)
+    const kind = components.join('/')
+    return (
+      <LinkTo {...props} kind={kind} story={name}>
+        {children}
+      </LinkTo>
+    )
+  }
+
+  return (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  )
+}