@stone-js/starters 0.8.3

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

@@ -0,0 +1,106 @@
+/* Reset and Global */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  color: #1c1e21;
+  background-color: #f5f6f8;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+button {
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+}
+
+/* Layout Container */
+.app-layout {
+  min-height: 100vh;
+}
+
+/* Header */
+.app-header {
+  top: 0;
+  z-index: 10;
+  position: sticky;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+/* Main Layout */
+.app-main {
+  gap: 2rem;
+  display: grid;
+  margin: 0 auto;
+  max-width: 1280px;
+  padding: 2rem 1rem;
+  padding: 2rem 1rem;
+  background-color: #f5f6f8;
+  grid-template-columns: 240px 1fr 300px;
+}
+
+/* Left menu */
+.main-left {
+  position: sticky;
+  top: 72px;
+  align-self: start;
+}
+
+/* Center feed */
+.main-center {
+  min-width: 0;
+}
+
+/* Right panel */
+.main-right {
+  position: sticky;
+  top: 72px;
+  align-self: start;
+}
+
+/* Footer */
+.app-footer {
+  padding: 1rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  /* background-color: #ffffff;
+  border-top: 1px solid #e5e7eb; */
+  font-size: 0.875rem;
+  color: #777;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .main-left {
+    display: none;
+  }
+
+  .app-main {
+    flex-direction: column;
+  }
+
+  .content {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .header-right {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .user-details {
+    display: none;
+  }
+
+  .dropdown-toggle {
+    font-size: 1.25rem;
+  }
+}

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

@@ -0,0 +1,48 @@
+import './AppLayout.css'
+import { JSX } from 'react'
+import { LayoutHeader } from '../../components/LayoutHeader/LayoutHeader'
+import { LayoutLeftMenu } from '../../components/LayoutLeftMenu/LayoutLeftMenu'
+import { RightAsidePanel } from '../../components/RightAsidePanel/RightAsidePanel'
+import { definePageLayout, IPageLayout, PageLayoutRenderContext, StoneOutlet } from '@stone-js/use-react'
+
+/**
+ * App Layout component.
+ */
+export const AppLayout = (): IPageLayout => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ container, children }: PageLayoutRenderContext): JSX.Element {
+    return (
+      <div className='app-layout'>
+        <header className='app-header'>
+          <LayoutHeader container={container} />
+        </header>
+
+        <div className='app-main'>
+          <aside className='main-left'>
+            <LayoutLeftMenu container={container} />
+          </aside>
+          <main className='main-center'>
+            <StoneOutlet>{children}</StoneOutlet>
+          </main>
+          <aside className='main-right'>
+            <RightAsidePanel container={container} />
+          </aside>
+        </div>
+
+        <footer className='app-footer'>
+          Stone.js &copy; 2025 Stone Foundation
+        </footer>
+      </div>
+    )
+  }
+})
+
+/**
+ * App Layout blueprint.
+ */
+export const AppLayoutBlueprint = definePageLayout(AppLayout, { name: 'default' })

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

@@ -0,0 +1,45 @@
+import './ErrorLayout.css'
+import { JSX } from 'react'
+import { IPageLayout, StoneOutlet, PageLayoutRenderContext, definePageLayout } from '@stone-js/use-react'
+
+/**
+ * Error Page Layout.
+ */
+export const ErrorLayout = (): 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>
+      </>
+    )
+  }
+})
+
+/**
+ * Error Page Layout Blueprint.
+ */
+export const ErrorLayoutBlueprint = definePageLayout(ErrorLayout, { name: 'error' })

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

@@ -0,0 +1,43 @@
+import './SecurityLayout.css'
+import { JSX } from 'react'
+import { IPageLayout, PageLayoutRenderContext, StoneOutlet, definePageLayout } from '@stone-js/use-react'
+
+/**
+ * Security Layout component.
+ */
+export const SecurityLayout = (): 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>
+      </>
+    )
+  }
+})
+
+/**
+ * Security Layout Blueprint.
+ */
+export const SecurityLayoutBlueprint = definePageLayout(SecurityLayout, { name: 'security' })

package/full-react-imperative/app/layout/SettingsLayout/SettingsLayout.css

@@ -0,0 +1,99 @@
+/* Reset and Global */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  color: #1c1e21;
+  background-color: #f5f6f8;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+button {
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+}
+
+/* Layout Container */
+.app-layout {
+  min-height: 100vh;
+}
+
+/* Header */
+.app-header {
+  top: 0;
+  z-index: 10;
+  position: sticky;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+/* Main Layout */
+.app-main {
+  gap: 2rem;
+  display: grid;
+  margin: 0 auto;
+  max-width: 1280px;
+  padding: 2rem 1rem;
+  padding: 2rem 1rem;
+  background-color: #f5f6f8;
+  grid-template-columns: 240px 1fr 300px;
+}
+
+/* Left menu */
+.main-left {
+  position: sticky;
+  top: 72px;
+  align-self: start;
+}
+
+/* Center feed */
+.main-center {
+  min-width: 0;
+}
+
+/* Footer */
+.app-footer {
+  padding: 1rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  /* background-color: #ffffff;
+  border-top: 1px solid #e5e7eb; */
+  font-size: 0.875rem;
+  color: #777;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .main-left {
+    display: none;
+  }
+
+  .app-main {
+    flex-direction: column;
+  }
+
+  .content {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .header-right {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .user-details {
+    display: none;
+  }
+
+  .dropdown-toggle {
+    font-size: 1.25rem;
+  }
+}

package/full-react-imperative/app/layout/SettingsLayout/SettingsLayout.tsx

@@ -0,0 +1,44 @@
+import './SettingsLayout.css'
+import { JSX } from 'react'
+import { LayoutHeader } from '../../components/LayoutHeader/LayoutHeader'
+import { LayoutLeftMenu } from '../../components/LayoutLeftMenu/LayoutLeftMenu'
+import { definePageLayout, IPageLayout, PageLayoutRenderContext, StoneOutlet } from '@stone-js/use-react'
+
+/**
+ * App Layout component.
+ */
+export const SettingsLayout = (): IPageLayout => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ container, children }: PageLayoutRenderContext): JSX.Element {
+    return (
+      <div className='app-layout'>
+        <header className='app-header'>
+          <LayoutHeader container={container} />
+        </header>
+
+        <div className='app-main'>
+          <aside className='main-left'>
+            <LayoutLeftMenu container={container} />
+          </aside>
+          <main className='main-center'>
+            <StoneOutlet>{children}</StoneOutlet>
+          </main>
+        </div>
+
+        <footer className='app-footer'>
+          Stone.js &copy; 2025 Stone Foundation
+        </footer>
+      </div>
+    )
+  }
+})
+
+/**
+ * App Layout blueprint.
+ */
+export const SettingsLayoutBlueprint = definePageLayout(SettingsLayout, { name: 'settings' })

package/full-react-imperative/app/middleware/AuthMiddleware.ts

@@ -0,0 +1,56 @@
+import { IUserService } from '../services/contracts/IUserService'
+import { ISecurityService } from '../services/contracts/ISecurityService'
+import { defineMiddleware, FunctionalMiddleware, IBlueprint, NextMiddleware } from '@stone-js/core'
+import { ReactIncomingEvent, ReactOutgoingResponse, reactRedirectResponse, ReactRuntime } from '@stone-js/use-react'
+
+/**
+ * AuthMiddleware Options
+*/
+export interface AuthMiddlewareOptions {
+  blueprint: IBlueprint
+  userService: IUserService
+  reactRuntime: ReactRuntime
+  securityService: ISecurityService
+}
+
+/**
+ * Set current user middleware
+ */
+export const AuthMiddleware = ({
+  blueprint,
+  userService,
+  reactRuntime,
+  securityService
+}: AuthMiddlewareOptions): FunctionalMiddleware<ReactIncomingEvent, ReactOutgoingResponse> => {
+  /**
+   * Handle the incoming event
+   *
+   * @param event - The incoming event
+   * @param next - The next middleware
+   * @returns The response
+   */
+  return async (
+    event: ReactIncomingEvent,
+    next: NextMiddleware<ReactIncomingEvent, ReactOutgoingResponse>,
+    excludes: string[] = []
+  ): Promise<ReactOutgoingResponse> => {
+    if (!excludes.includes(event.pathname)) {
+      if (!securityService.isAuthenticated()) {
+        blueprint.set('app.requestedUrl', event.pathname)
+        return reactRedirectResponse({ url: '/login' })
+      }
+      const user = await reactRuntime.snapshot('currentUser', async () => await userService.current())
+      event.setUserResolver(() => user)
+    }
+
+    return await next(event)
+  }
+}
+
+/**
+ * AuthMiddleware Blueprint
+ */
+export const AuthMiddlewareBlueprint = defineMiddleware(
+  AuthMiddleware,
+  { global: true, params: [['/login', '/register']], isFactory: true }
+)

package/full-react-imperative/app/models/Comment.ts

@@ -0,0 +1,35 @@
+import { User } from './User'
+
+/**
+ * Comment Interface
+*/
+export interface Comment {
+  id: number
+  author: User
+  content: string
+  authorId: number
+  postId: number
+  createdAt: number
+  likesCount: number
+  likedByCurrentUser: boolean
+}
+
+/**
+ * New Comment Interface
+*/
+export interface CommentInput {
+  id: number
+  content: string
+  postId: number
+  likesCount: number
+  likedByCurrentUser: boolean
+}
+
+/**
+ * Comment View Interface
+*/
+export interface CommentView extends CommentInput {
+  author: User
+  createdAt: number
+  status?: 'idle' | 'saving' | 'error'
+}

package/full-react-imperative/app/models/Post.ts

@@ -0,0 +1,27 @@
+import { User } from './User'
+
+/**
+ * Post Interface
+*/
+export interface Post {
+  id: number
+  author: User
+  title: string
+  content: string
+  authorId: number
+  createdAt: number
+  updatedAt: number
+  imagePath?: string
+  likesCount: number
+  sharesCount: number
+  commentsCount: number
+  likedByCurrentUser: boolean
+}
+
+/**
+ * New Post Interface
+*/
+export interface PostInput {
+  title: string
+  content: string
+}

package/full-react-imperative/app/models/User.ts

@@ -0,0 +1,68 @@
+/**
+ * User Interface
+*/
+export interface User {
+  id: number
+  name: string
+  bio?: string
+  email: string
+  avatar: string
+  coverImage: string
+  postCount: number
+  commentCount: number
+  isOnline: boolean
+  lastSeen: number
+  createdAt: number
+}
+
+/**
+ * New User Interface
+*/
+export interface UserInput {
+  name: string
+  email: string
+}
+
+/**
+ * User Login Interface
+*/
+export interface UserLogin {
+  email: string
+  password: string
+}
+
+/**
+ * User Register Interface
+*/
+export interface UserRegister {
+  name: string
+  email: string
+  password: string
+  confirmPassword: string
+}
+
+/**
+ * User Register Errors Type
+*/
+export type UserRegisterErrors = Record<string, string>
+
+/**
+ * User Change Password Interface
+*/
+export interface UserChangePassword {
+  password: string
+  newPassword: string
+  confirmPassword: string
+}
+
+/**
+ * User Token Interface
+*/
+export interface UserToken {
+  scope: string
+  stage: string
+  createdAt: number
+  expiresIn: number
+  tokenType: string
+  accessToken: string
+}

package/full-react-imperative/app/pages/Settings/SettingsPage.tsx

@@ -0,0 +1,23 @@
+import { JSX } from 'react'
+import { SettingsForm } from '../../components/SettingsForm/SettingsForm'
+import { IPage, ReactIncomingEvent, definePage } from '@stone-js/use-react'
+
+/**
+ * SettingsPage component.
+ */
+export const SettingsPage = (): IPage<ReactIncomingEvent> => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    return <SettingsForm />
+  }
+})
+
+/**
+ * SettingsPage Blueprint.
+ */
+export const SettingsPageBlueprint = definePage(SettingsPage, { path: '/settings', layout: 'settings' })

package/full-react-imperative/app/pages/home/HomePage.tsx

@@ -0,0 +1,58 @@
+import { JSX } from 'react'
+import { createPost } from '../utils'
+import { Post } from '../../models/Post'
+import { ILogger } from '@stone-js/core'
+import { PostForm } from '../../components/PostForm/PostForm'
+import { PostWidget } from '../../components/PostWidget/PostWidget'
+import { IPostService } from '../../services/contracts/IPostService'
+import { IPage, ReactIncomingEvent, HeadContext, definePage, IRouter, PageRenderContext } from '@stone-js/use-react'
+
+/**
+ * HomePage options.
+ */
+export interface HomePageOptions {
+  router: IRouter
+  logger: ILogger
+  postService: IPostService
+}
+
+/**
+ * Home Page.
+ */
+export const HomePage = ({ router, logger, postService }: HomePageOptions): IPage<ReactIncomingEvent> => ({
+  head (): HeadContext {
+    return {
+      title: 'Home',
+      description: 'Welcome to the Stone.js timeline'
+    }
+  },
+
+  /**
+   * Handle the incoming event.
+   *
+   * @param event - The incoming event.
+   * @returns List of posts.
+   */
+  async handle (event: ReactIncomingEvent): Promise<Post[]> {
+    return await postService.list(event.get<number>('limit', 10))
+  },
+
+  /**
+   * Render the component.
+   *
+   * @returns The rendered component.
+   */
+  render ({ data = [], event, container }: PageRenderContext<Post[]>): JSX.Element {
+    return (
+      <section>
+        <PostForm onSubmit={createPost.bind(this, router, logger, postService)} />
+        <PostWidget items={data} event={event} container={container} />
+      </section>
+    )
+  }
+})
+
+/**
+ * Home Page Blueprint.
+ */
+export const HomePageBlueprint = definePage(HomePage, { path: '/' })