feat: React frontend app scaffoldinga + Shared UI

Author: riipandi

.dockerignore

@@ -0,0 +1,29 @@
+.moon/cache
+build/
+tmp/
+dist/
+docs
+target/
+.next/
+.output/
+.fleet/
+.husky/
+.github/
+.rollup.cache/
+.vite-inspect/
+.vscode/
+.DS_Store
+.DS_Store?
+Dockerfile
+node_modules
+npm-debug.log
+docker-compose*.yml
+compose-*.yml
+*tsbuildinfo*
+degit.json
+*.log
+*.md
+.env*
+_docs/
+backend/public/*
+!backend/public/.gitkeep

.env.example

@@ -0,0 +1,8 @@
+DATABASE_URL=libsql://localhost:8080?tls=0
+
+SMTP_HOST=localhost
+SMTP_PORT=1025
+SMTP_USERNAME=null
+SMTP_PASSWORD=null
+SMTP_USE_SSL=false
+SMTP_EMAIL_FROM="Admin Sistem <[email protected]>"

.moon/tasks.yml

@@ -0,0 +1,31 @@
+# https://moonrepo.dev/docs/config/tasks
+# yaml-language-server: $schema=https://moonrepo.dev/schemas/tasks.json
+$schema: 'https://moonrepo.dev/schemas/tasks.json'
+
+# Global file groups, this will be inherited by all projects.
+# @see: https://moonrepo.dev/docs/config/project#filegroups
+fileGroups:
+  js-configs:
+    - '*.config.{js,cjs,mjs,ts}'
+    - '*.json'
+  js-sources:
+    - 'src/**/*'
+    - 'types/**/*'
+  tests:
+    - 'tests/**/*'
+    - '**/__tests__/**/*'
+  assets:
+    - 'assets/**/*'
+    - 'images/**/*'
+    - 'static/**/*'
+    - 'public/**/*'
+    - '**/*.{scss,css}'
+
+taskOptions:
+  runDepsInParallel: false
+
+# Defines task deps that are implicitly inserted into all inherited tasks within a project.
+# This is extremely useful for pre-building projects that are used extensively throughout
+# the repo, or always building project dependencies.
+# implicitDeps:
+#   - '^:format'

.moon/toolchain.yml

@@ -12,12 +12,21 @@ node:
   version: '20'
   packageManager: 'pnpm'                  # Defines which package manager to utilize.
   addEnginesConstraint: false             # Add `node.version` as a constraint in the root `package.json` `engines`.
-  dedupeOnLockfileChange: true            # Dedupe dependencies after the lockfile has changed.
-  syncPackageManagerField: false          # Sync the currently configured package manager and its version to the packageManager field in the root package.json.
+  dedupeOnLockfileChange: true            # Dedupe dependencies after the lockfile has changed, keep the workspace tree as clean and lean as possible.
+  syncPackageManagerField: true           # Sync the currently configured package manager and its version to the packageManager field in the root package.json.
+  rootPackageOnly: true                   # Single version policy patterns by only allowing dependencies in the root `package.json`.
   syncProjectWorkspaceDependencies: true  # Sync a project's `dependsOn` as dependencies within the project's `package.json`.
   syncVersionManagerConfig: null          # Sync `node.version` to a 3rd-party version manager's config file.
+  # dependencyVersionFormat: link         # Uses link:../relative/path and symlinks package contents.
+  dependencyVersionFormat: workspace      # Uses workspace:*, which resolves to "1.2.3". Requires package workspaces.
   pnpm:
-    version: '9' # The version of the package manager to use.
+    version: '9.7.1'  # The version of the package manager to use.
+
+typescript:
+  includeSharedTypes: false  # The shared types folder must be named types and must exist relative to the root setting
+  # projectConfigFileName: 'tsconfig.build.json'     # Defines the file name of the tsconfig.json found in the project root.
+  # rootConfigFileName: 'tsconfig.workspace.json'    # File name of the config file found in the root that houses shared compiler options.
+  # rootOptionsConfigFileName: 'tsconfig.base.json'  # File name of the config file found in the root that houses shared compiler options.
 
 # Configures Rust within the toolchain.
 # rust:

.moon/workspace.yml

@@ -6,6 +6,11 @@ vcs:
   manager: 'git'
   provider: gitlab
   defaultBranch: 'main'
+  # @see: https://moonrepo.dev/docs/config/workspace#hooks
+  hooks:
+    pre-commit:
+      - 'moon run :lint :format --affected --status=staged'
+      # - 'another-command'
 
 hasher:
   optimization: 'performance'
@@ -24,13 +29,14 @@ runner:
 # path to the project folder as the map value. File paths are relative from the workspace root,
 # and cannot reference projects located outside the workspace boundary.
 projects:
-  - 'apps/*'
-  - 'packages/*'
-
-generator:
-  templates:
-    - './templates'
+  globs:
+    - 'apps/*'
+    - 'packages/*'
 
 # When enabled, will check for a newer moon version and send anonymous usage data to the
 # moonrepo team. This data is used to improve the quality and reliability of the tool.
 telemetry: false
+
+generator:
+  templates:
+    - './templates'

.npmrc

@@ -1 +1,17 @@
-update-notifier = false
+# @see: https://pnpm.io/npmrc#update-notifier
+update-notifier=false
+
+# @see: https://pnpm.io/npmrc#link-workspace-packages
+# @see: https://pnpm.io/npmrc#prefer-workspace-packages
+link-workspace-packages=false
+prefer-workspace-packages=false
+
+# @see: https://pnpm.io/npmrc#hoist
+hoist=true
+hoist-workspace-packages=true
+
+# Use `hoisted` to set a flat node_modules without symlinks is created.
+# Set symlink to false to disable symlinks.
+# https://pnpm.io/npmrc#node-linker
+node-linker=isolated
+symlink=true

README.md

@@ -34,6 +34,9 @@ dependencies, and references are correctly aligned with your project's unique id
 This includes updating any configuration files, package names, and other references
 throughout the codebase where `myorg` is used.
 
+Optinally, you'll need to install [Static Web Server][static-web-server] to preview
+generated websites or Single-Page Applications (SPAs).
+
 ### Golang application
 
 Currently, Go is not supported as an official moonrepo toolchain. You need to manually
@@ -141,3 +144,4 @@ Keeping documentation current helps others understand, use, and contribute to th
 [zog-templates]: https://github.com/zero-one-group/templates
 [moon-toolchain]: https://moonrepo.dev/docs/concepts/toolchain
 [go-docs]: https://go.dev/doc/install
+[static-web-server]: https://static-web-server.net/download-and-install/

apps/vite-react-tailwind/.gitignore

@@ -0,0 +1,4 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+    "extends": ["../../biome.json"]
+}

apps/vite-react-tailwind/README.md

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Moon React SPA Template</title>
+    <title>React Application</title>
   </head>
   <body>
     <div id="root"></div>

apps/vite-react-tailwind/biome.json

@@ -5,24 +5,52 @@ $schema: 'https://moonrepo.dev/schemas/project.json'
 type: application
 language: typescript
 platform: node
-
 stack: frontend
+tags: ['app']
+
+# Overrides the name (identifier) of the project
+id: 'react-app'
 
 project:
   name: vite-react-tailwind
-  description: 'React SPA application'
+  description: 'Frontend application'
+
+dependsOn:
+  - 'shared-ui'
+
+# File groups defined in .moon/tasks.yml will be inherited by all projects.
+# @see: https://moonrepo.dev/docs/config/project#filegroups
+# fileGroups:
 
 tasks:
   dev:
     command: 'pnpm run dev'
-    args: []
+    inputs:
+      - '@group(js-configs)'
+      - '@group(js-sources)'
+      - '@group(assets)'
+    outputs:
+      - 'dist/**/*.js'
+      - 'public/**/*'
+      - '!public/.gitkeep'
+    options:
+      envFile: '/.env'
 
   build:
     command: 'pnpm run build'
-    args: []
+    inputs:
+      - '@group(js-configs)'
+      - '@group(js-sources)'
+      - '@group(assets)'
+    outputs:
+      - 'dist/**/*.js'
+      - 'public/**/*'
+      - '!public/.gitkeep'
 
   start:
     command: 'static-web-server'
-    args: ['-d', 'dist', '--page404', 'index.html', '-a', '127.0.0.1', '-p', '3000']
+    args: ['-d', 'dist', '--page404', 'index.html', '-a', '127.0.0.1', '-p', '8000']
+    env:
+      NODE_ENV: 'production'
     options:
       cache: false

apps/vite-react-tailwind/index.html

@@ -1,25 +1,56 @@
 {
     "name": "vite-react-tailwind",
+    "version": "0.0.1",
+    "description": "Frontend application",
     "private": true,
-    "version": "0.0.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "tsc -b && vite build",
+        "build": "vite build",
         "preview": "vite preview",
-        "lint": "biome lint --write .",
-        "format": "biome check --write . && biome format . --write"
+        "lint": "biome lint . --write",
+        "check": "biome check . --write",
+        "format": "biome format . --write",
+        "cleanup": "pnpm dlx rimraf dist node_modules pnpm-lock.yaml",
+        "analyze-bundle": "pnpm dlx vite-bundle-visualizer"
     },
     "dependencies": {
+        "@modular-forms/react": "^0.8.1",
+        "@myorg/shared-ui": "workspace:*",
+        "@nanostores/persistent": "^0.10.2",
+        "@nanostores/query": "^0.3.4",
+        "@nanostores/react": "^0.7.3",
+        "clsx": "^2.1.1",
+        "consola": "^3.2.3",
+        "nanostores": "^0.11.2",
+        "ofetch": "^1.3.4",
+        "react-cookie": "^7.2.0",
+        "react-dom": "^18.3.1",
+        "react-error-boundary": "^4.0.13",
+        "react-router-dom": "^6.26.1",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "sonner": "^1.5.0",
+        "tailwind-merge": "^2.5.2",
+        "universal-cookie": "^7.2.0",
+        "valibot": "^0.38.0"
     },
     "devDependencies": {
-        "@types/react": "^18.3.3",
+        "@biomejs/biome": "1.8.3",
+        "@tailwindcss/aspect-ratio": "^0.4.2",
+        "@tailwindcss/forms": "^0.5.7",
+        "@tailwindcss/typography": "^0.5.14",
+        "@types/node": "^22.4.0",
         "@types/react-dom": "^18.3.0",
+        "@types/react": "^18.3.3",
         "@vitejs/plugin-react": "^4.3.1",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.41",
+        "tailwind-debug-breakpoints": "^1.0.3",
+        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss": "^3.4.10",
         "typescript": "^5.5.4",
-        "vite": "^5.3.5",
-        "vitest": "^2.0.5"
+        "vite-plugin-inspect": "^0.8.5",
+        "vite-tsconfig-paths": "^5.0.1",
+        "vite": "^5.4.1"
     }
 }

apps/vite-react-tailwind/moon.yml

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/vite-react-tailwind/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "myorg",
+    "icons": [
+        {
+            "src": "/favicon.svg",
+            "sizes": "36x36",
+            "type": "image/svg+xml",
+            "density": "0.75"
+        },
+        {
+            "src": "/favicon.svg",
+            "sizes": "48x48",
+            "type": "image/svg+xml",
+            "density": "1.0"
+        },
+        {
+            "src": "/favicon.svg",
+            "sizes": "72x72",
+            "type": "image/svg+xml",
+            "density": "1.5"
+        },
+        {
+            "src": "/favicon.svg",
+            "sizes": "96x96",
+            "type": "image/svg+xml",
+            "density": "2.0"
+        },
+        {
+            "src": "/favicon.svg",
+            "sizes": "144x144",
+            "type": "image/svg+xml",
+            "density": "3.0"
+        },
+        {
+            "src": "/favicon.svg",
+            "sizes": "192x192",
+            "type": "image/svg+xml",
+            "density": "4.0"
+        }
+    ]
+}

apps/vite-react-tailwind/postcss.config.js

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /