@stone-js/starters 0.8.3

package/full-react-imperative/app/components/SettingsForm/SettingsForm.tsx

@@ -0,0 +1,86 @@
+import './SettingsForm.css'
+import { FC, FormEvent, useState } from 'react'
+
+export const SettingsForm: FC = () => {
+  const [email] = useState('user@example.com')
+  const [newEmail, setNewEmail] = useState('')
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [sessions] = useState([
+    { id: 1, device: 'MacBook Pro', location: 'Canada', active: true },
+    { id: 2, device: 'iPhone 14', location: 'Montreal', active: false }
+  ])
+
+  const handleEmailChange = (e: FormEvent): void => {
+    e.preventDefault()
+    // Call backend to update email
+  }
+
+  const handlePasswordChange = (e: FormEvent): void => {
+    e.preventDefault()
+    // Call backend to update password
+  }
+
+  return (
+    <div className='settings-page'>
+      <h1>Settings</h1>
+
+      <section className='settings-section'>
+        <h2>Change Email</h2>
+        <form onSubmit={handleEmailChange} className='settings-form'>
+          <input
+            type='email'
+            placeholder='New email'
+            value={newEmail}
+            onChange={(e) => setNewEmail(e.target.value)}
+            required
+          />
+          <button type='submit'>Update Email</button>
+        </form>
+        <p className='current-email'>Current email: <strong>{email}</strong></p>
+      </section>
+
+      <section className='settings-section'>
+        <h2>Change Password</h2>
+        <form onSubmit={handlePasswordChange} className='settings-form'>
+          <input
+            type='password'
+            placeholder='Current password'
+            value={currentPassword}
+            onChange={(e) => setCurrentPassword(e.target.value)}
+            required
+          />
+          <input
+            type='password'
+            placeholder='New password'
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            required
+          />
+          <button type='submit'>Update Password</button>
+        </form>
+      </section>
+
+      <section className='settings-section'>
+        <h2>Active Sessions</h2>
+        <ul className='sessions-list'>
+          {sessions.map((s) => (
+            <li key={s.id}>
+              <div>
+                <strong>{s.device}</strong> — {s.location}
+              </div>
+              <span className={`session-status ${s.active ? 'active' : 'inactive'}`}>
+                {s.active ? 'Active' : 'Logged out'}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className='settings-section danger-zone'>
+        <h2>Danger Zone</h2>
+        <button className='delete-account-btn'>Delete My Account</button>
+      </section>
+    </div>
+  )
+}

package/full-react-imperative/app/components/UserAvatar/UserAvatar.css

@@ -0,0 +1,18 @@
+.user-avatar-img {
+  border-radius: 9999px;
+  object-fit: cover;
+  background-color: #e5e7eb;
+  display: inline-block;
+}
+
+.user-avatar-fallback {
+  border-radius: 9999px;
+  background-color: #6366f1; /* Indigo */
+  color: white;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  user-select: none;
+}

package/full-react-imperative/app/components/UserAvatar/UserAvatar.tsx

@@ -0,0 +1,60 @@
+import './UserAvatar.css'
+import { FC, useState } from 'react'
+import { User } from '../../models/User'
+import { StoneLink } from '@stone-js/use-react'
+
+/**
+ * UserAvatar options.
+ */
+interface UserAvatarOptions {
+  user: User
+  withLink?: boolean
+  className?: string
+  size?: 'sm' | 'md' | 'lg' | number
+}
+
+/**
+ * UserAvatar component.
+ */
+export const UserAvatar: FC<UserAvatarOptions> = ({
+  user,
+  size = 'md',
+  className = '',
+  withLink = true
+}) => {
+  const [imgError, setImgError] = useState(false)
+  const fallback = user.name?.charAt(0).toUpperCase() ?? '?'
+
+  const getSize = (): number => {
+    if (typeof size === 'number') return size
+    const sizes = { sm: 28, md: 36, lg: 48 }
+    return sizes[size] ?? 36
+  }
+
+  const dimension = getSize()
+
+  const shouldShowFallback = user.avatar === undefined || imgError
+
+  return shouldShowFallback
+    ? (
+      <StoneLink to={withLink ? `/users/${user.id}` : undefined} href='#'>
+        <div
+          className={`user-avatar-fallback ${className}`}
+          style={{ width: dimension, height: dimension, fontSize: dimension / 2.2 }}
+        >
+          {fallback}
+        </div>
+      </StoneLink>
+      )
+    : (
+      <StoneLink to={withLink ? `/users/${user.id}` : undefined} href='#'>
+        <img
+          src={user.avatar}
+          alt={user.name}
+          className={`user-avatar-img ${className}`}
+          style={{ width: dimension, height: dimension }}
+          onError={() => setImgError(true)}
+        />
+      </StoneLink>
+      )
+}

package/full-react-imperative/app/components/UserBadge/UserBadge.css

@@ -0,0 +1,33 @@
+.user-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.user-badge button {
+  text-align: left;
+}
+
+.user-badge.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.user-badge-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1.2;
+}
+
+.user-badge-name {
+  font-weight: 600;
+  color: #111827;
+  font-size: 0.95rem;
+}
+
+.user-badge-details {
+  margin-top: 4px;
+  font-size: 0.75rem;
+  color: #6b7280;
+}

package/full-react-imperative/app/components/UserBadge/UserBadge.tsx

@@ -0,0 +1,49 @@
+import './UserBadge.css'
+import { FC } from 'react'
+import { User } from '../../models/User'
+import { dateTimeFromNow } from '../../utils'
+import { StoneLink } from '@stone-js/use-react'
+import { UserAvatar } from '../UserAvatar/UserAvatar'
+
+/**
+ * UserBadge options.
+ */
+interface UserBadgeOptions {
+  user: User
+  withLink?: boolean
+  createdAt?: number
+  className?: string
+  onClick?: () => void
+  size?: 'sm' | 'md' | 'lg' | number
+  direction?: 'horizontal' | 'vertical'
+}
+
+/**
+ * UserBadge component.
+ */
+export const UserBadge: FC<UserBadgeOptions> = ({
+  user,
+  createdAt,
+  size = 'md',
+  direction = 'horizontal',
+  onClick,
+  withLink = true,
+  className = ''
+}) => {
+  return (
+    <div
+      className={`user-badge ${direction} ${className}`}
+      onClick={onClick}
+      style={{ cursor: (onClick != null) ? 'pointer' : 'default' }}
+    >
+      <UserAvatar withLink={withLink} user={user} size={size} />
+      <div className='user-badge-info'>
+        <StoneLink to={withLink ? `/users/${user.id}` : undefined} href='#' className='user-badge-name'>
+          {user.name}
+        </StoneLink>
+        {createdAt !== undefined && <span className='user-badge-details'>{dateTimeFromNow(createdAt)}</span>}
+        {createdAt === undefined && user.email !== undefined && <span className='user-badge-details'>{user.email}</span>}
+      </div>
+    </div>
+  )
+}

package/full-react-imperative/app/components/UserCard/UserCard.css

@@ -0,0 +1,70 @@
+.user-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  transition: box-shadow 0.2s ease;
+}
+
+.user-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.user-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  position: relative;
+}
+
+.user-card-info {
+  flex: 1;
+}
+
+.user-card-name {
+  display: block;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.user-card-email {
+  display: block;
+  margin-top: 4px;
+  font-size: 0.85rem;
+  color: #6b7280;
+}
+
+.user-status {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.user-status.online {
+  background: #10b981;
+}
+
+.user-status.offline {
+  background: #d1d5db;
+}
+
+.user-card-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: #4b5563;
+}
+
+.user-last-seen {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  text-align: right;
+}

package/full-react-imperative/app/components/UserCard/UserCard.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react'
+import { User } from '../../models/User'
+import { dateTimeFromNow } from '../../utils'
+import { StoneLink } from '@stone-js/use-react'
+import { UserAvatar } from '../UserAvatar/UserAvatar'
+
+/**
+ * UserCard options.
+ */
+interface UserCardOptions {
+  user: User
+}
+
+/**
+ * UserCard component.
+ */
+export const UserCard: FC<UserCardOptions> = ({ user }) => {
+  return (
+    <div className='user-card'>
+      <div className='user-card-header'>
+        <StoneLink to={`/users/${user.id}`} className='user-card-link'>
+          <UserAvatar user={user} size='lg' />
+        </StoneLink>
+        <div className='user-card-info'>
+          <StoneLink to={`/users/${user.id}`} className='user-card-name'>{user.name}</StoneLink>
+          <StoneLink to={`/users/${user.id}`} className='user-card-email'>{user.email}</StoneLink>
+        </div>
+        <span className={`user-status ${user.isOnline ? 'online' : 'offline'}`} />
+      </div>
+
+      <div className='user-card-meta'>
+        <span>📝 {user.postCount} Posts</span>
+        <span>💬 {user.commentCount} Comments</span>
+      </div>
+
+      {!user.isOnline && (
+        <div className='user-last-seen'>
+          Last seen {dateTimeFromNow(user.lastSeen)}
+        </div>
+      )}
+    </div>
+  )
+}

package/full-react-imperative/app/configurations/AppConfiguration.ts

@@ -0,0 +1,19 @@
+import { getString } from '@stone-js/env'
+import { NODE_HTTP_PLATFORM } from '@stone-js/node-http-adapter'
+import { defineConfig, IBlueprint, Promiseable } from '@stone-js/core'
+
+/**
+ * App Configuration
+ */
+export const AppConfig = defineConfig({
+  configure (blueprint: IBlueprint): Promiseable<void> {
+    blueprint
+      .set('stone.kernel.skipMiddleware', false)
+      .set('app.api.baseURL', getString('API_BASE_URL', 'http://localhost:8080'))
+  },
+  afterConfigure (blueprint: IBlueprint): Promiseable<void> {
+    if (blueprint.is('stone.adapter.platform', NODE_HTTP_PLATFORM)) {
+      blueprint.set('stone.adapter.url', 'http://localhost:3100')
+    }
+  }
+})

package/full-react-imperative/app/error-pages/DefaultErrorPage/DefaultErrorPage.tsx

@@ -0,0 +1,41 @@
+import './DefaultErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { IErrorPage, ReactIncomingEvent, ErrorPageRenderContext, defineErrorPage } from '@stone-js/use-react'
+
+/**
+ * Default Error Page.
+ */
+export const DefaultErrorPage = ({ logger }: { logger: ILogger }): IErrorPage<ReactIncomingEvent> => ({
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @returns The response.
+   */
+  handle (error: any): { message: string } {
+    logger.error(error.message, { error })
+    return { message: 'Oops! Something went wrong!' }
+  },
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ data, statusCode }: ErrorPageRenderContext<Error>): JSX.Element {
+    return (
+      <div className='text-center'>
+        <h1 className='h1'>{statusCode}</h1>
+        <h2 className='h4'>An Error occured!</h2>
+        <p className='text-muted mt-24'>{data?.message}</p>
+      </div>
+    )
+  }
+})
+
+/**
+ * Default Error Page Blueprint.
+ */
+export const DefaultErrorPageBlueprint = defineErrorPage(DefaultErrorPage, { layout: 'error', error: 'default' })

package/full-react-imperative/app/error-pages/ForbiddenErrorPage/ForbiddenErrorPage.tsx

@@ -0,0 +1,42 @@
+import './ForbiddenErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { ForbiddenError } from '../../errors/ForbiddenError'
+import { IErrorPage, ReactIncomingEvent, ErrorPageRenderContext, defineErrorPage } from '@stone-js/use-react'
+
+/**
+ * Forbidden Error Page.
+ */
+export const ForbiddenErrorPage = ({ logger }: { logger: ILogger }): IErrorPage<ReactIncomingEvent> => ({
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @returns The response.
+   */
+  handle (error: ForbiddenError): { message: string } {
+    logger.error(error.message, { error })
+    return { message: "I think you're not supposed to be here! Eh ?" }
+  },
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ data, statusCode }: ErrorPageRenderContext<ForbiddenError>): JSX.Element {
+    return (
+      <div className='text-center'>
+        <h1 className='h1'>{statusCode}</h1>
+        <h2 className='h4'>Are you in the right place?</h2>
+        <p className='text-muted mt-24'>{data?.message}</p>
+      </div>
+    )
+  }
+})
+
+/**
+ * Forbidden Error Page Blueprint.
+ */
+export const ForbiddenErrorPageBlueprint = defineErrorPage(ForbiddenErrorPage, { layout: 'error', error: 'ForbiddenError' })

package/full-react-imperative/app/error-pages/NotFoundErrorPage/NotFoundErrorPage.tsx

@@ -0,0 +1,49 @@
+import './NotFoundErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { RouteNotFoundError } from '@stone-js/router'
+import { IErrorPage, ReactIncomingEvent, ErrorPageRenderContext, defineErrorPage } from '@stone-js/use-react'
+
+/**
+ * NotFound Error Page.
+ */
+export const NotFoundErrorPage = ({ logger }: { logger: ILogger }): IErrorPage<ReactIncomingEvent> => ({
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @param event - The incoming event.
+   * @returns The response.
+   */
+  handle (error: RouteNotFoundError, event: ReactIncomingEvent): { message: string } {
+    logger.error(error.message, { error })
+    return { message: `Page not found: ${event.pathname}` }
+  },
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ data, statusCode }: ErrorPageRenderContext<RouteNotFoundError>): JSX.Element {
+    return (
+      <div className='text-center'>
+        <h1 className='h1'>{statusCode}</h1>
+        <h2 className='h4'>OOps! It seems you are lost?</h2>
+        <p className='text-muted mt-24'>{data?.message}</p>
+      </div>
+    )
+  }
+})
+
+/**
+ * NotFound Error Page Blueprint.
+ */
+export const NotFoundErrorPageBlueprint = defineErrorPage(
+  NotFoundErrorPage,
+  {
+    layout: 'error',
+    error: ['RouteNotFoundError', 'PostNotFoundError', 'UserNotFoundError']
+  }
+)

package/full-react-imperative/app/error-pages/UnauthorizedErrorPage/UnauthorizedErrorPage.tsx

@@ -0,0 +1,42 @@
+import './UnauthorizedErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { UnauthorizedError } from '../../errors/UnauthorizedError'
+import { IErrorPage, ReactIncomingEvent, ErrorPageRenderContext, defineErrorPage } from '@stone-js/use-react'
+
+/**
+ * Unauthorized Error Handler component.
+ */
+export const UnauthorizedErrorPage = ({ logger }: { logger: ILogger }): IErrorPage<ReactIncomingEvent> => ({
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @returns The response.
+   */
+  handle (error: UnauthorizedError) {
+    logger.error(error.message, { error })
+    return { message: "I think you're an alien! Eh ?" }
+  },
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ data, statusCode }: ErrorPageRenderContext<UnauthorizedError>): JSX.Element {
+    return (
+      <div className='text-center'>
+        <h1 className='h1'>{statusCode}</h1>
+        <h2 className='h4'>Are you in the right place?</h2>
+        <p className='text-muted mt-24'>{data?.message}</p>
+      </div>
+    )
+  }
+})
+
+/**
+ * Unauthorized Error Page Blueprint.
+ */
+export const UnauthorizedErrorPageBlueprint = defineErrorPage(UnauthorizedErrorPage, { layout: 'error', error: 'UnauthorizedError' })

package/full-react-imperative/app/errors/ForbiddenError.ts

@@ -0,0 +1,11 @@
+import { ErrorOptions, RuntimeError } from '@stone-js/core'
+
+/**
+ * Not Forbidden Error
+ */
+export class ForbiddenError extends RuntimeError {
+  constructor (message: string, options?: ErrorOptions) {
+    super(message, options)
+    this.name = 'ForbiddenError'
+  }
+}

package/full-react-imperative/app/errors/PostNotFoundError.ts

@@ -0,0 +1,11 @@
+import { ErrorOptions, RuntimeError } from '@stone-js/core'
+
+/**
+ * Post Not found Error
+ */
+export class PostNotFoundError extends RuntimeError {
+  constructor (message: string, options: ErrorOptions = {}) {
+    super(message, options)
+    this.name = 'PostNotFoundError'
+  }
+}

package/full-react-imperative/app/errors/UnauthorizedError.ts

@@ -0,0 +1,11 @@
+import { ErrorOptions, RuntimeError } from '@stone-js/core'
+
+/**
+ * Unauthorized Error
+ */
+export class UnauthorizedError extends RuntimeError {
+  constructor (message: string, options?: ErrorOptions) {
+    super(message, options)
+    this.name = 'UnauthorizedError'
+  }
+}

package/full-react-imperative/app/errors/UserNotFoundError.ts

@@ -0,0 +1,11 @@
+import { ErrorOptions, RuntimeError } from '@stone-js/core'
+
+/**
+ * User Not found Error
+ */
+export class UserNotFoundError extends RuntimeError {
+  constructor (message: string, options: ErrorOptions = {}) {
+    super(message, options)
+    this.name = 'UserNotFoundError'
+  }
+}

package/full-react-imperative/app/events/UserEvent.ts

@@ -0,0 +1,18 @@
+import { User } from '../models/User'
+import { Event } from '@stone-js/core'
+
+/**
+ * User Event
+ */
+export class UserEvent extends Event {
+  /**
+   * USER_CREATED Event name, fires after a user have been created.
+   *
+   * @event UserEvent#USER_CREATED
+   */
+  static USER_CREATED: string = 'user.created'
+
+  constructor (public readonly user: Partial<User>) {
+    super({ type: UserEvent.USER_CREATED })
+  }
+}