@stone-js/starters 0.8.3

package/full-react-declarative/app/components/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,110 @@
+import { FC, useState } from 'react'
+import { isNotEmpty } from '@stone-js/core'
+import { StoneLink } from '@stone-js/use-react'
+import { UserRegister, UserRegisterErrors } from '../../models/User'
+
+/**
+ * Register Form Options
+ */
+export interface RegisterFormOptions {
+  done: boolean
+  error?: UserRegisterErrors
+  onSubmit: (user: UserRegister) => Promise<void>
+}
+
+/**
+ * Register Form component.
+ *
+ * @param options - The options to create the Register Form component.
+ */
+export const RegisterForm: FC<RegisterFormOptions> = ({ onSubmit, error, done }) => {
+  // Create a reference to the user
+  const [user, setUser] = useState<UserRegister>({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  })
+
+  // Handle the form submit
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    isValid() && onSubmit(user).catch(() => {})
+  }
+
+  const isValid = (): boolean => isNotEmpty(user.name) && isNotEmpty(user.email) && isNotEmpty(user.password) && user.password === user.confirmPassword
+
+  // Handle the field change
+  const onChange = (field: keyof UserRegister) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setUser({ ...user, [field]: event.target.value })
+  }
+
+  // Create the form component
+  const formComponent = (
+    <form onSubmit={handleSubmit} className='panel'>
+      {error?.message !== undefined && <p className='alert alert-danger alert-small'>{error?.message}</p>}
+
+      <div>
+        <label htmlFor='name' className='label'>Name:</label>
+        <input
+          id='name'
+          type='text'
+          className='input'
+          placeholder='Enter your name'
+          onChange={onChange('name')} defaultValue={user.name}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='email' className='label'>Email:</label>
+        <input
+          id='email'
+          type='email'
+          className='input'
+          placeholder='Enter your email'
+          onChange={onChange('email')} defaultValue={user.email}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='password' className='label'>Password:</label>
+        <input
+          id='password'
+          type='password'
+          className='input'
+          placeholder='Enter your password'
+          onChange={onChange('password')} defaultValue={user.password}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='confirmPassword' className='label'>Confirm password:</label>
+        <input
+          id='confirmPassword'
+          type='password'
+          className='input'
+          placeholder='Confirm your password'
+          onChange={onChange('confirmPassword')} defaultValue={user.confirmPassword}
+        />
+      </div>
+
+      <button type='submit' className='button button-secondary button-full mt-24' disabled={!isValid()}>Register</button>
+    </form>
+  )
+
+  // Create the done component
+  const doneComponent = <div className='panel'><p className='alert alert-success'>Registration successful! 🎉 You can now login</p></div>
+
+  // Get the component
+  const component = done ? doneComponent : formComponent
+
+  // Render the component
+  return (
+    <div>
+      {component}
+      <p className='mt-24 text-center'>
+        <StoneLink to='/login' className='button button-primary'>Login</StoneLink>
+      </p>
+    </div>
+  )
+}

package/full-react-declarative/app/components/UserForm/UserForm.tsx

@@ -0,0 +1,47 @@
+import { FC, useRef } from 'react'
+import { UserInput } from '../../models/User'
+
+/**
+ * User Form Options
+ */
+export interface UserFormOptions {
+  user?: UserInput
+  onSubmit: (user: UserInput) => Promise<void>
+}
+
+/**
+ * User Form component.
+ *
+ * @param options - The options to create the User Form component.
+ */
+export const UserForm: FC<UserFormOptions> = ({ user, onSubmit }) => {
+  // Create a reference to the user
+  const userRef = useRef<UserInput>({
+    name: user?.name ?? '',
+    email: user?.email ?? ''
+  })
+
+  // Handle the form submit
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    void onSubmit(userRef.current).catch(() => {})
+  }
+
+  // Handle the field change
+  const onChange = (field: keyof UserInput) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    userRef.current[field] = event.target.value
+  }
+
+  // Render the component
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor='name'>Name:</label>
+      <input id='name' type='text' onChange={onChange('name')} defaultValue={userRef.current.name} />
+
+      <label htmlFor='email'>Email:</label>
+      <input id='email' type='email' onChange={onChange('email')} defaultValue={userRef.current.email} />
+
+      <button type='submit'>Save</button>
+    </form>
+  )
+}

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

@@ -0,0 +1,17 @@
+import { getString } from '@stone-js/env'
+import { Configuration, IBlueprint, IConfiguration, Promiseable } from '@stone-js/core'
+
+/**
+ * App Configuration
+ */
+@Configuration()
+export class AppConfiguration implements IConfiguration {
+  /**
+   * Configure the application.
+   */
+  configure (blueprint: IBlueprint): Promiseable<void> {
+    blueprint
+      .set('stone.kernel.skipMiddleware', false)
+      .set('app.api.baseURL', getString('API_BASE_URL', 'http://localhost:8080'))
+  }
+}

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

@@ -0,0 +1,52 @@
+import './DefaultErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { ErrorPage, IErrorPage, PageStatus, ReactIncomingEvent, ErrorPageRenderContext } from '@stone-js/use-react'
+
+/**
+ * Forbidden Error Handler component.
+ */
+@ErrorPage({
+  layout: 'error',
+  error: 'default'
+})
+export class DefaultErrorPage implements IErrorPage<ReactIncomingEvent> {
+  private readonly logger: ILogger
+
+  /**
+   * Create an DefaultErrorPage.
+   *
+   * @param logger - The logger.
+   */
+  constructor ({ logger }: { logger: ILogger }) {
+    this.logger = logger
+  }
+
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @returns The response.
+   */
+  @PageStatus(500)
+  handle (error: any): { message: string } {
+    this.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>
+    )
+  }
+}

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

@@ -0,0 +1,53 @@
+import './ForbiddenErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { ForbiddenError } from '../../errors/ForbiddenError'
+import { ErrorPage, IErrorPage, PageStatus, ReactIncomingEvent, ErrorPageRenderContext } from '@stone-js/use-react'
+
+/**
+ * Forbidden Error Handler component.
+ */
+@ErrorPage({
+  layout: 'error',
+  error: 'ForbiddenError'
+})
+export class ForbiddenErrorPage implements IErrorPage<ReactIncomingEvent> {
+  private readonly logger: ILogger
+
+  /**
+   * Create an ForbiddenErrorPage.
+   *
+   * @param logger - The logger.
+   */
+  constructor ({ logger }: { logger: ILogger }) {
+    this.logger = logger
+  }
+
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @returns The response.
+   */
+  @PageStatus(403)
+  handle (error: ForbiddenError): { message: string } {
+    this.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>
+    )
+  }
+}

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

@@ -0,0 +1,54 @@
+import './NotFoundErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { RouteNotFoundError } from '@stone-js/router'
+import { ErrorPage, IErrorPage, PageStatus, ReactIncomingEvent, ErrorPageRenderContext } from '@stone-js/use-react'
+
+/**
+ * NotFound Error Handler component.
+ */
+@ErrorPage({
+  layout: 'error',
+  error: ['RouteNotFoundError', 'PostNotFoundError', 'UserNotFoundError']
+})
+export class NotFoundErrorPage implements IErrorPage<ReactIncomingEvent> {
+  private readonly logger: ILogger
+
+  /**
+   * Create an NotFoundErrorPage.
+   *
+   * @param logger - The logger.
+   */
+  constructor ({ logger }: { logger: ILogger }) {
+    this.logger = logger
+  }
+
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @param event - The incoming event.
+   * @returns The response.
+   */
+  @PageStatus(404)
+  handle (error: RouteNotFoundError, event: ReactIncomingEvent): { message: string } {
+    this.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>
+    )
+  }
+}

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

@@ -0,0 +1,53 @@
+import './UnauthorizedErrorPage.css'
+import { JSX } from 'react'
+import { ILogger } from '@stone-js/core'
+import { UnauthorizedError } from '../../errors/UnauthorizedError'
+import { ErrorPage, IErrorPage, PageStatus, ReactIncomingEvent, ErrorPageRenderContext } from '@stone-js/use-react'
+
+/**
+ * Unauthorized Error Handler component.
+ */
+@ErrorPage({
+  layout: 'error',
+  error: 'UnauthorizedError'
+})
+export class UnauthorizedErrorPage implements IErrorPage<ReactIncomingEvent> {
+  private readonly logger: ILogger
+
+  /**
+   * Create an UnauthorizedErrorPage.
+   *
+   * @param logger - The logger.
+   */
+  constructor ({ logger }: { logger: ILogger }) {
+    this.logger = logger
+  }
+
+  /**
+   * Handle the error.
+   *
+   * @param error - The error to handle.
+   * @returns The response.
+   */
+  @PageStatus(403)
+  handle (error: UnauthorizedError): { message: string } {
+    this.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>
+    )
+  }
+}

package/full-react-declarative/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-declarative/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-declarative/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-declarative/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-declarative/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 })
+  }
+}

package/full-react-declarative/app/layout/AppLayout/AppLayout.css

@@ -0,0 +1,20 @@
+.app-layout .logo {
+  margin: 0;
+  border: none;
+  display: flex;
+  width: 300px;
+  align-items: center;
+  background: none;
+  text-align: center;
+}
+.app-layout .logo:hover {
+  cursor: pointer;
+}
+.app-layout .logo img {
+  width: 24px;
+}
+.app-layout .logo span {
+  font-size: 1.5em;
+  margin-left: 8px;
+  font-weight: bold;
+}

package/full-react-declarative/app/layout/AppLayout/AppLayout.tsx

@@ -0,0 +1,101 @@
+import './AppLayout.css'
+import { JSX } from 'react'
+import { User } from '../../models/User'
+import { IBlueprint, isNotEmpty } from '@stone-js/core'
+import { SecurityService } from '../../services/SecurityService'
+import { IPageLayout, IRouter, PageLayout, PageLayoutRenderContext, ReactIncomingEvent, StoneLink, StoneOutlet } from '@stone-js/use-react'
+
+/**
+ * App Layout options.
+ */
+export interface AppLayoutOptions {
+  router: IRouter
+  blueprint: IBlueprint
+  securityService: SecurityService
+}
+
+/**
+ * App Layout component.
+ */
+@PageLayout({ name: 'default' })
+export class AppLayout implements IPageLayout {
+  private readonly router: IRouter
+  private readonly blueprint: IBlueprint
+  private readonly securityService: SecurityService
+
+  /**
+   * Create a new App Layout component.
+   *
+   * @param options - The options to create the App Layout component.
+   */
+  constructor ({ router, blueprint, securityService }: AppLayoutOptions) {
+    this.router = router
+    this.blueprint = blueprint
+    this.securityService = securityService
+  }
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ container, children }: PageLayoutRenderContext): JSX.Element {
+    const user = container.make<ReactIncomingEvent>('event').getUser<User>() ?? {} as unknown as User
+
+    return (
+      <div className='app-layout'>
+        <header>
+          <p>
+            <StoneLink to='/' className='logo'>
+              <img src='/logo.png' alt='Stone.js Logo' />
+              <span>Stone.js</span>
+            </StoneLink>
+          </p>
+          {isNotEmpty<User>(user) && (
+            <p>
+              <span>
+                <img src={this.getUserAvatar(user)} alt='Stone.js Logo' />
+              </span>
+              <span>
+                <span>{user.name}</span>
+                <span>{user.email}</span>
+              </span>
+            </p>
+          )}
+          <p>
+            {isNotEmpty<User>(user)
+              ? <button onClick={() => this.logout()}>Logout</button>
+              : <StoneLink to='/login'>Login</StoneLink>}
+          </p>
+        </header>
+        <main>
+          <StoneOutlet>{children}</StoneOutlet>
+        </main>
+        <footer>&copy; 2025 Stone.js</footer>
+      </div>
+    )
+  }
+
+  /**
+   * Logout the user.
+   */
+  logout (): void {
+    if (window.confirm('Are you sure you want to logout?')) {
+      void this.securityService.logout().then(() => {
+        this.router.navigate('/', true)
+      })
+    }
+  }
+
+  /**
+   * Get the user avatar.
+   *
+   * @param user - The user to get the avatar.
+   * @returns The user avatar.
+   */
+  private getUserAvatar (user: User): string {
+    const baseUrl = this.blueprint.get<string>('app.api.baseURL', '')
+    return isNotEmpty<string>(user.avatar) ? `${baseUrl}/users/${user.id}/avatar` : '/assets/avatar.png'
+  }
+}

package/full-react-declarative/app/layout/ErrorLayout/ErrorLayout.tsx

@@ -0,0 +1,41 @@
+import './ErrorLayout.css'
+import { JSX } from 'react'
+import { PageLayout, IPageLayout, StoneOutlet, PageLayoutRenderContext } from '@stone-js/use-react'
+
+/**
+ * Error Layout component.
+ */
+@PageLayout({ name: 'error' })
+export class ErrorLayout implements IPageLayout {
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ children }: PageLayoutRenderContext): JSX.Element {
+    return (
+      <>
+        <header className='mt-64'>
+          <div className='container'>
+            <p className='pa-24'>
+              <img src='/logo.png' className='logo' alt='Stone.js Logo' />
+            </p>
+          </div>
+        </header>
+        <main>
+          <div className='container'>
+            <div className='panel'>
+              <StoneOutlet>{children}</StoneOutlet>
+            </div>
+          </div>
+        </main>
+        <footer className='mt-24'>
+          <div className='container'>
+            <p className='px-24 text-muted'>2025 Stone.js &copy; Noowow Labs</p>
+          </div>
+        </footer>
+      </>
+    )
+  }
+}

package/full-react-declarative/app/layout/SecurityLayout/SecurityLayout.tsx

@@ -0,0 +1,39 @@
+import './SecurityLayout.css'
+import { JSX } from 'react'
+import { PageLayout, IPageLayout, PageLayoutRenderContext, StoneOutlet } from '@stone-js/use-react'
+
+/**
+ * Security Layout component.
+ */
+@PageLayout({ name: 'security' })
+export class SecurityLayout implements IPageLayout {
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ children }: PageLayoutRenderContext): JSX.Element {
+    return (
+      <>
+        <header className='mt-64'>
+          <div className='container'>
+            <p className='pa-24'>
+              <img src='/logo.png' className='logo' alt='Stone.js Logo' />
+            </p>
+          </div>
+        </header>
+        <main>
+          <div className='container'>
+            <StoneOutlet>{children}</StoneOutlet>
+          </div>
+        </main>
+        <footer className='mt-24'>
+          <div className='container'>
+            <p className='px-24 text-muted'>2025 Stone.js &copy; Noowow Labs</p>
+          </div>
+        </footer>
+      </>
+    )
+  }
+}