@stone-js/starters 0.8.3

package/full-react-declarative/app/services/UserService.ts

@@ -0,0 +1,126 @@
+import { Snapshot } from '@stone-js/use-react'
+import { UserEvent } from '../events/UserEvent'
+import { User, UserInput } from '../models/User'
+import { UserClient } from '../clients/UserClient'
+import { UserNotFoundError } from '../errors/UserNotFoundError'
+import { EventEmitter, isEmpty, Service } from '@stone-js/core'
+
+/**
+ * User Service Options
+*/
+export interface UserServiceOptions {
+  userClient: UserClient
+  eventEmitter: EventEmitter
+}
+
+/**
+ * User Service
+ *
+ * @Service() decorator is used to define a new service
+ * @Service() is an alias of @Stone() decorator.
+ * The alias is required to get benefits of desctructuring Dependency Injection.
+ * And because the front-end class will be minified, we need to use alias to keep the class name.
+*/
+@Service({ alias: 'userService' })
+export class UserService {
+  private _currentUser?: User
+  private readonly userClient: UserClient
+  private readonly eventEmitter: EventEmitter
+
+  /**
+   * Create a new User Service
+  */
+  constructor ({ userClient, eventEmitter }: UserServiceOptions) {
+    this.userClient = userClient
+    this.eventEmitter = eventEmitter
+  }
+
+  /**
+   * List users
+   *
+   * @param limit - The limit of users to list
+   */
+  async list (limit: number = 10): Promise<User[]> {
+    return await this.userClient.list(limit)
+  }
+
+  /**
+   * Get the current user
+   */
+  async current (singleton?: boolean): Promise<User> {
+    if (isEmpty(this._currentUser) || singleton !== true) {
+      this._currentUser = await this.userClient.currentUser()
+    }
+
+    return this._currentUser
+  }
+
+  /**
+   * Find a user
+   *
+   * @param conditions - The conditions to find the user
+   * @returns The found user
+   */
+  async find (conditions: Record<string, any>): Promise<User> {
+    try {
+      return await this.userClient.find(conditions.id)
+    } catch (error: any) {
+      if (error.status === 404) {
+        throw new UserNotFoundError(error.message, { cause: error })
+      } else {
+        throw error
+      }
+    }
+  }
+
+  /**
+   * Find a user by key
+   *
+   * @param key - The key to find the user
+   * @param value - The value to find the user
+   * @returns The found user
+   * @throws UserNotFoundError
+   */
+  @Snapshot()
+  async findBy (key: string, value: any): Promise<User | undefined> {
+    return await this.find({ [key]: value })
+  }
+
+  /**
+   * Create a user
+   *
+   * @param user - The user to create
+   */
+  async create (user: UserInput): Promise<void> {
+    await this.eventEmitter.emit(new UserEvent(user))
+    await this.userClient.create(user)
+  }
+
+  /**
+   * Update the current user
+   *
+   * @param user - The user data to update
+   */
+  async updateCurrent (user: UserInput): Promise<User> {
+    return await this.userClient.updateCurrent(user)
+  }
+
+  /**
+   * Update a user
+   *
+   * @param id - The id of the user to update
+   * @param user - The user data to update
+   */
+  async update (id: number, user: UserInput): Promise<User> {
+    return await this.userClient.update(id, user)
+  }
+
+  /**
+   * Delete a user
+   *
+   * @param id - The id of the user to delete
+   */
+  async delete (id: number): Promise<void> {
+    await this.userClient.delete(id)
+  }
+}

package/full-react-declarative/app/utils.ts

@@ -0,0 +1,17 @@
+
+/**
+ * Format date time
+ *
+ * @param date - Date in milliseconds
+ * @returns The formatted date time
+ */
+export const formatDateTime = (date: number): string => {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  }).format(date)
+}

package/full-react-declarative/assets/css/index.css

@@ -0,0 +1,301 @@
+body {
+  margin: 0;
+  padding: 0;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.5;
+  background-color: #fff;
+  font-family: 'Roboto', sans-serif;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: 500;
+}
+.h1 {
+  font-size: 3rem;
+  font-weight: bold;
+}
+.h2 {
+  font-size: 2.5rem;
+  font-weight: 400;
+}
+.h3 {
+  font-size: 2rem;
+}
+.h4 {
+  font-size: 1.5rem;
+}
+.h5 {
+  font-size: 1.25rem;
+}
+.h6 {
+  font-size: 1rem;
+}
+.container {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+.text-center {
+  text-align: center;
+}
+.mt-8 {
+  margin-top: 8px;
+}
+.mt-24 {
+  margin-top: 24px;
+}
+.mt-64 {
+  margin-top: 64px;
+}
+.px-24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.pa-24 {
+  padding: 24px;
+}
+.pa-32 {
+  padding: 32px;
+}
+.logo {
+  width: 64px;
+  height: 64px;
+}
+.panel {
+  padding: 16px;
+  max-width: 600px;
+  border-radius: 6px;
+  background-color: #fff;
+  border: 1px solid #d1d9e0;
+}
+.text-muted {
+  color: #59636e;
+}
+/* Base Button Styles */
+.button {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 12px 20px;
+  border-radius: 8px;
+  align-items: center;
+  display: inline-flex;
+  text-decoration: none;
+  justify-content: center;
+  transition: all 0.3s ease-in-out;
+}
+.button-full {
+  display: block;
+  width: 100%;
+}
+.button-primary {
+  color: white;
+  /* box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3); */
+  background: linear-gradient(135deg, #4F46E5, #9333EA);
+}
+.button-primary:hover {
+  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.4);
+  background: linear-gradient(135deg, #4338CA, #7C3AED);
+}
+.button-primary:active {
+  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5);
+  background: linear-gradient(135deg, #3730A3, #6D28D9);
+}
+.button-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: linear-gradient(135deg, #A5B4FC, #D8B4FE);
+}
+.button-secondary {
+  color: #4F46E5;
+  background: white;
+  border: 2px solid #4F46E5;
+}
+.button-secondary:hover {
+  color: white;
+  background: #4F46E5;
+  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
+}
+.button-secondary:active {
+  color: white;
+  background: #3730A3;
+  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
+}
+.button-secondary:disabled {
+  opacity: 0.6;
+  color: #A5B4FC;
+  background: white;
+  cursor: not-allowed;
+  border-color: #A5B4FC;
+}
+.button-success {
+  color: white;
+  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
+  background: linear-gradient(135deg, #22C55E, #16A34A);
+}
+.button-success:hover {
+  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.4);
+  background: linear-gradient(135deg, #16A34A, #15803D);
+}
+.button-success:active {
+  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
+  background: linear-gradient(135deg, #15803D, #166534);
+}
+.button-success:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: linear-gradient(135deg, #86EFAC, #BBF7D0);
+}
+.button-danger {
+  color: white;
+  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
+  background: linear-gradient(135deg, #EF4444, #DC2626);
+}
+.button-danger:hover {
+  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.4);
+  background: linear-gradient(135deg, #DC2626, #B91C1C);
+}
+.button-danger:active {
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
+  background: linear-gradient(135deg, #B91C1C, #991B1B);
+}
+.button-danger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: linear-gradient(135deg, #FCA5A5, #FECACA);
+}
+.button-outline {
+  color: #4F46E5;
+  background: transparent;
+  border: 2px solid #4F46E5;
+}
+.button-outline:hover {
+  color: white;
+  background: #4F46E5;
+}
+.button-outline:active {
+  color: white;
+  background: #4338CA;
+}
+.button-outline:disabled {
+  opacity: 0.6;
+  color: #A5B4FC;
+  cursor: not-allowed;
+  border-color: #A5B4FC;
+}
+.button-rounded {
+  border-radius: 50px;
+}
+.button-icon {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.button-icon svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+.input, .select, .textarea {
+  outline: none;
+  display: block;
+  font-size: 16px;
+  min-width: 300px;
+  font-weight: 500;
+  color: #1E293B;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background: white;
+  border: 2px solid #CBD5E1;
+  transition: all 0.3s ease-in-out;
+}
+.input:focus, .select:focus, .textarea:focus {
+  border-color: #4F46E5;
+  box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
+}
+.input:disabled, .select:disabled, .textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: #F1F5F9;
+}
+.input::placeholder, .textarea::placeholder {
+  color: #94A3B8;
+  font-weight: 400;
+}
+.input.error, .select.error, .textarea.error {
+  border-color: #EF4444;
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
+}
+.input.error:focus, .select.error:focus, .textarea.error:focus {
+  border-color: #B91C1C;
+  box-shadow: 0 0 8px rgba(185, 28, 28, 0.5);
+}
+.input.success, .select.success, .textarea.success {
+  border-color: #22C55E;
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
+}
+.input.success:focus, .select.success:focus, .textarea.success:focus {
+  border-color: #15803D;
+  box-shadow: 0 0 8px rgba(21, 128, 61, 0.5);
+}
+.input-rounded {
+  border-radius: 50px;
+}
+.select {
+  appearance: none;
+  padding-right: 40px;
+  background-size: 16px;
+  background: white url('data:image/svg+xml;utf8,<svg fill="%23637481" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 12px center;
+}
+.select:focus {
+  background-color: #ffffff;
+}
+.textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+.label {
+  display: block;
+  padding: 6px 0;
+  cursor: pointer;
+  font-size: 16px;
+  color: #59636e;
+  font-weight: 600;
+}
+.alert {
+  gap: 12px;
+  padding: 16px;
+  display: flex;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+  align-items: center;
+}
+.alert-small {
+  padding: 8px;
+  max-width: 316px;
+}
+.alert-info {
+  color: #1E40AF;
+  background: #DBEAFE;
+  border-left: 4px solid #3B82F6;
+}
+.alert-success {
+  color: #065F46;
+  background: #D1FAE5;
+  border-left: 4px solid #10B981;
+}
+.alert-warning {
+  color: #92400E;
+  background: #FEF3C7;
+  border-left: 4px solid #F59E0B;
+}
+.alert-danger {
+  color: #B91C1C;
+  background: #FEE2E2;
+  border-left: 4px solid #EF4444;
+}

package/full-react-declarative/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "full-react-declarative",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Stone.js's full starter to create react app using declarative API.",
+  "author": "Mr. Stone <evensstone@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "stone dev",
+    "build": "stone build",
+    "preview": "stone preview",
+    "build:ssr": "stone build --ssr",
+    "test": "vitest run",
+    "test:cvg": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@stone-js/env": "^0.8.3",
+    "@stone-js/http-core": "^0.8.3",
+    "@stone-js/node-http-adapter": "^0.8.3",
+    "@stone-js/router": "^0.8.3",
+    "@stone-js/filesystem": "^0.8.3",
+    "@stone-js/core": "^0.8.3",
+    "@stone-js/use-react": "^0.8.3",
+    "@stone-js/browser-adapter": "^0.8.3",
+    "@stone-js/node-cli-adapter": "^0.8.3",
+    "axios": "^1.7.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-typescript": "^7.27.0",
+    "@stone-js/cli": "^0.8.3",
+    "@types/axios": "^0.14.4",
+    "@types/node": "^24.0.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@vitest/coverage-v8": "^3.0.9",
+    "vitest": "^3.0.9"
+  }
+}

package/full-react-declarative/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/full-react-declarative/stone.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from '@stone-js/cli'
+
+/**
+ * Stone build configuration.
+ */
+export default defineConfig({
+  dotenv: {
+    private: {
+      path: ['.env', '.env.public'],
+    }
+  }
+})

package/full-react-declarative/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "types": ["node", "vite/client"],
+  },
+  "include": ["app"]
+}

package/full-react-declarative/vitest.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['./tests/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    coverage: {
+      provider: 'v8',
+      include: ['app/**/*.ts', 'app/**/*.tsx'],
+      reporter: ['text', 'html'],
+      reportsDirectory: './coverage',
+      thresholds: {
+        100: true
+      },
+      watermarks: {
+        statements: [60, 80],
+        functions: [60, 80],
+        branches: [60, 80],
+        lines: [60, 80]
+      }
+    },
+  }
+});

package/full-react-imperative/.env.example

@@ -0,0 +1 @@
+BASE_URL=http://localhost:3100

package/full-react-imperative/.env.public.example

@@ -0,0 +1 @@
+API_BASE_URL=http://localhost:8080

package/full-react-imperative/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2026 Stone Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/full-react-imperative/README.md

@@ -0,0 +1,39 @@
+# Stone.js - Full starter
+
+Stone.js's full starter to create web app using declarative API.
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Bundle for Production
+
+```sh
+npm run build
+```
+
+### Run the Production build
+
+```sh
+npm run preview
+```
+
+### Run tests
+
+```sh
+npm run test
+```
+
+### Run tests with coverage
+
+```sh
+npm run test:cvg
+```