@stone-js/starters 0.8.3

package/full-react-imperative/app/pages/login/LoginPage.tsx

@@ -0,0 +1,65 @@
+import './LoginPage.css'
+import { IBlueprint } from '@stone-js/core'
+import { UserLogin } from '../../models/User'
+import { Dispatch, JSX, SetStateAction, useState } from 'react'
+import { LoginForm } from '../../components/LoginForm/LoginForm'
+import { ISecurityService } from '../../services/contracts/ISecurityService'
+import { definePage, IPage, IRouter, ReactIncomingEvent } from '@stone-js/use-react'
+
+/**
+ * Login Page options.
+ */
+interface LoginPageOptions {
+  router: IRouter
+  blueprint: IBlueprint
+  securityService: ISecurityService
+}
+
+/**
+ * Login Page component.
+ */
+export const LoginPage = ({ router, blueprint, securityService }: LoginPageOptions): IPage<ReactIncomingEvent> => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    const [error, setError] = useState<boolean>(false)
+
+    return (
+      <div>
+        <LoginForm
+          error={error}
+          onSubmit={async (user: UserLogin) => await login(router, blueprint, securityService, user, setError)}
+        />
+      </div>
+    )
+  }
+})
+
+/**
+ * Login the user.
+ *
+ * @param user - The user to login.
+ */
+export async function login (
+  router: IRouter,
+  blueprint: IBlueprint,
+  securityService: ISecurityService,
+  user: UserLogin,
+  setError: Dispatch<SetStateAction<boolean>>
+): Promise<void> {
+  try {
+    await securityService.login(user)
+    router.navigate(blueprint.get('app.requestedUrl', '/'), true)
+  } catch (_: any) {
+    setError(true)
+  }
+}
+
+/**
+ * Login Page Blueprint.
+ */
+export const LoginPageBlueprint = definePage(LoginPage, { path: '/login', layout: 'security' })

package/full-react-imperative/app/pages/posts/ShowPostPage/ShowPostPage.tsx

@@ -0,0 +1,64 @@
+import { JSX } from 'react'
+import { deletePost } from '../../utils'
+import { Post } from '../../../models/Post'
+import { User } from '../../../models/User'
+import { ILogger, isNotEmpty } from '@stone-js/core'
+import { PostCard } from '../../../components/PostCard/PostCard'
+import { IPostService } from '../../../services/contracts/IPostService'
+import { ICommentService } from '../../../services/contracts/ICommentService'
+import { CommentWidget } from '../../../components/CommentWidget/CommentWidget'
+import { definePage, IPage, IRouter, PageRenderContext, ReactIncomingEvent } from '@stone-js/use-react'
+
+/**
+ * Show Post Page options.
+ */
+export interface ShowPostPageOptions {
+  router: IRouter
+  logger: ILogger
+  postService: IPostService
+  commentService: ICommentService
+}
+
+/**
+ * Show Post Page component.
+ */
+export const ShowPostPage = ({ router, logger, postService, commentService }: ShowPostPageOptions): IPage<ReactIncomingEvent> => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ event }: PageRenderContext<Post>): JSX.Element {
+    const post = event.get<Post>('post')
+    const user = event.getUser<User>() ?? {} as unknown as User
+
+    // Render the component
+    if (isNotEmpty<Post>(post)) {
+      return (
+        <PostCard
+          key={post.id}
+          post={post}
+          currentUser={user}
+          onEdit={() => router.navigate(`/posts/${post.id}/edit`)}
+          onDelete={deletePost.bind(this, router, logger, postService, post)}
+        >
+          <CommentWidget post={post} currentUser={user} commentService={commentService} />
+        </PostCard>
+      )
+    }
+
+    return <article><h1>Post not found</h1></article>
+  }
+})
+
+/**
+ * Show Post Page Blueprint.
+ */
+export const ShowPostPageBlueprint = definePage(
+  ShowPostPage,
+  {
+    path: '/posts/:post@id(\\d+)',
+    bindings: { post: 'postService@findBy' }
+  }
+)

package/full-react-imperative/app/pages/posts/UpdatePostPage/UpdatePostPage.tsx

@@ -0,0 +1,56 @@
+import { JSX } from 'react'
+import { updatePost } from '../../utils'
+import { Post } from '../../../models/Post'
+import { ILogger, isNotEmpty } from '@stone-js/core'
+import { PostForm } from '../../../components/PostForm/PostForm'
+import { IPostService } from '../../../services/contracts/IPostService'
+import { IPage, ReactIncomingEvent, PageRenderContext, definePage } from '@stone-js/use-react'
+
+/**
+ * Update Post Page options.
+ */
+export interface UpdatePostPageOptions {
+  logger: ILogger
+  postService: IPostService
+}
+
+/**
+ * Update Post Page component.
+ */
+export const UpdatePostPage = ({ logger, postService }: UpdatePostPageOptions): IPage<ReactIncomingEvent> => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ event }: PageRenderContext<Post>): JSX.Element {
+    const post = event.get<Post>('post')
+
+    if (isNotEmpty<Post>(post)) {
+      return (
+        <PostForm
+          post={post}
+          onSubmit={async (postInput) => await updatePost(logger, postService, post.id, postInput)}
+        />
+      )
+    }
+
+    return (
+      <article>
+        <h1>Post not found</h1>
+      </article>
+    )
+  }
+})
+
+/**
+ * Update Post Page Blueprint.
+ */
+export const UpdatePostPageBlueprint = definePage(
+  UpdatePostPage,
+  {
+    path: '/posts/:post@id(\\d+)/edit',
+    bindings: { post: 'postService@findBy' }
+  }
+)

package/full-react-imperative/app/pages/register/RegisterPage.tsx

@@ -0,0 +1,71 @@
+import { Dispatch, JSX, SetStateAction, useState } from 'react'
+import { UserRegister, UserRegisterErrors } from '../../models/User'
+import { RegisterForm } from '../../components/RegisterForm/RegisterForm'
+import { definePage, IPage, ReactIncomingEvent } from '@stone-js/use-react'
+import { ISecurityService } from '../../services/contracts/ISecurityService'
+
+/**
+ * Register Page options.
+ */
+interface RegisterPageOptions {
+  securityService: ISecurityService
+}
+
+/**
+ * Register Page component.
+ */
+export const RegisterPage = ({ securityService }: RegisterPageOptions): IPage<ReactIncomingEvent> => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    const [done, setDone] = useState<boolean>(false)
+    const [error, setError] = useState<UserRegisterErrors>({})
+
+    return (
+      <div>
+        <RegisterForm
+          done={done}
+          error={error}
+          onSubmit={async (user: UserRegister) => await register(securityService, user, setDone, setError)}
+        />
+      </div>
+    )
+  }
+})
+
+/**
+ * Register the user.
+ *
+ * @param securityService - The security service.
+ * @param user - The user to register.
+ * @param setDone - The function to set the done state.
+ * @param setError - The function to set the error state.
+ */
+export async function register (
+  securityService: ISecurityService,
+  user: UserRegister,
+  setDone: Dispatch<SetStateAction<boolean>>,
+  setError: Dispatch<SetStateAction<UserRegisterErrors>>
+): Promise<void> {
+  try {
+    await securityService.register(user)
+    setDone(true)
+  } catch (error: any) {
+    setError(error.response?.data?.errors ?? {})
+  }
+}
+
+/**
+ * Register Page Blueprint.
+ */
+export const RegisterPageBlueprint = definePage(
+  RegisterPage,
+  {
+    path: '/register',
+    layout: 'security'
+  }
+)

package/full-react-imperative/app/pages/users/ShowUserPage/ShowUserPage.css

@@ -0,0 +1,64 @@
+.user-profile-page {
+  max-width: 768px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  position: relative;
+}
+
+/* Cover Banner */
+.profile-cover {
+  width: 100%;
+  height: 200px;
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(to right, #3b82f6, #6366f1);
+}
+
+/* Header with avatar */
+.profile-header {
+  background: white;
+  margin-top: -48px;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.profile-avatar {
+  margin-top: -24px;
+}
+
+.profile-info h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.profile-info .email {
+  font-size: 0.9rem;
+  color: #6b7280;
+}
+
+.profile-info .bio {
+  font-size: 1rem;
+  color: #374151;
+  margin-top: 0.5rem;
+}
+
+.profile-info .status {
+  font-size: 0.85rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+}
+
+.profile-info .online {
+  color: #10b981;
+  font-weight: 600;
+}
+
+/* Timeline Section */
+.profile-timeline {
+  margin-top: 2rem;
+}

package/full-react-imperative/app/pages/users/ShowUserPage/ShowUserPage.tsx

@@ -0,0 +1,104 @@
+import { JSX } from 'react'
+import { createPost } from '../../utils'
+import { User } from '../../../models/User'
+import { Post } from '../../../models/Post'
+import { dateTimeFromNow } from '../../../utils'
+import { ILogger, isNotEmpty } from '@stone-js/core'
+import { PostForm } from '../../../components/PostForm/PostForm'
+import { UserAvatar } from '../../../components/UserAvatar/UserAvatar'
+import { PostWidget } from '../../../components/PostWidget/PostWidget'
+import { IPostService } from '../../../services/contracts/IPostService'
+import { IUserService } from '../../../services/contracts/IUserService'
+import { IPage, ReactIncomingEvent, PageRenderContext, definePage, HeadContext, IRouter } from '@stone-js/use-react'
+
+/**
+ * Show User Page options.
+ */
+export interface ShowUserPageOptions {
+  router: IRouter
+  logger: ILogger
+  postService: IPostService
+  userService: IUserService
+}
+
+/**
+ * Show User Page component.
+ */
+export const ShowUserPage = ({ router, logger, postService }: ShowUserPageOptions): IPage<ReactIncomingEvent> => ({
+  head (): HeadContext {
+    return {
+      title: 'User Profile',
+      description: 'Welcome to the user profile page'
+    }
+  },
+
+  /**
+   * 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.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ data, event, container }: PageRenderContext): JSX.Element {
+    const user = event.get<User>('user') ?? {} as unknown as User
+
+    return (
+      <div className='user-profile-page'>
+        <div className='profile-cover' />
+
+        <div className='profile-header'>
+          <div className='profile-avatar'>
+            <UserAvatar user={user} size={96} />
+          </div>
+          <div className='profile-info'>
+            <h1>{user.name}</h1>
+            <p className='email'>{user.email}</p>
+            {user.bio !== undefined && <p className='bio'>{user.bio}</p>}
+            <p className='status'>
+              {user.isOnline
+                ? <span className='online'>🟢 Online</span>
+                : `Last seen ${dateTimeFromNow(user.lastSeen)}`}
+            </p>
+          </div>
+        </div>
+
+        <section className='profile-timeline'>
+          <PostForm onSubmit={createPost.bind(this, router, logger, postService)} />
+          <PostWidget items={data ?? []} event={event} container={container} />
+        </section>
+      </div>
+    )
+  }
+})
+
+/**
+ * Delete the user.
+ *
+ * @param container - The container.
+ * @param user - The user
+ */
+export async function deleteUser (userService: IUserService, user?: User): Promise<void> {
+  if (isNotEmpty<User>(user) && window.confirm('Are you sure you want to delete this user?')) {
+    await userService.delete(user.id)
+  }
+}
+
+/**
+ * Show User Page Blueprint.
+ */
+export const ShowUserPageBlueprint = definePage(
+  ShowUserPage,
+  {
+    path: '/users/:user@id(\\d+)',
+    bindings: { user: 'userService@findBy' }
+  }
+)

package/full-react-imperative/app/pages/users/UpdateUserPage/UpdateUserPage.tsx

@@ -0,0 +1,43 @@
+import { JSX } from 'react'
+import { User, UserInput } from '../../../models/User'
+import { IUserService } from '../../../services/contracts/IUserService'
+import { ProfileForm } from '../../../components/ProfileForm/ProfileForm'
+import { IPage, ReactIncomingEvent, PageRenderContext, definePage } from '@stone-js/use-react'
+
+/**
+ * Update User Page options.
+ */
+export interface UpdateUserPageOptions {
+  userService: IUserService
+}
+
+/**
+ * Update User Page component.
+ */
+export const UpdateUserPage = (): IPage<ReactIncomingEvent> => ({
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ event }: PageRenderContext): JSX.Element {
+    const user = event.get<User>('user') ?? {} as unknown as User
+
+    return <ProfileForm user={user} onSave={() => {}} />
+  }
+})
+
+/**
+ * Save the user.
+ *
+ * @param user - The user
+ */
+export async function saveUser (userService: IUserService, id: number, user: UserInput): Promise<void> {
+  await userService.update(id, user)
+}
+
+/**
+ * Update User Page Blueprint.
+ */
+export const UpdateUserPageBlueprint = definePage(UpdateUserPage, { path: '/users/:user@id(\\d+)/edit' })

package/full-react-imperative/app/pages/users/UserPage/UserPage.css

@@ -0,0 +1,31 @@
+.users-page .users-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 2rem;
+  text-align: left;
+}
+
+.users-search {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+  border-radius: 9999px;
+  border: 1px solid #d1d5db;
+  background-color: #f9fafb;
+  margin-bottom: 2rem;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.users-search:focus {
+  border-color: #3b82f6;
+  background-color: #ffffff;
+}
+
+.users-page .user-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}

package/full-react-imperative/app/pages/users/UserPage/UserPage.tsx

@@ -0,0 +1,59 @@
+import './UserPage.css'
+import { JSX, useState } from 'react'
+import { User } from '../../../models/User'
+import { UserCard } from '../../../components/UserCard/UserCard'
+import { IUserService } from '../../../services/contracts/IUserService'
+import { IPage, definePage, ReactIncomingEvent, PageRenderContext } from '@stone-js/use-react'
+
+/**
+ * User Page options.
+ */
+export interface UserPageOptions {
+  userService: IUserService
+}
+
+/**
+ * User Page component.
+ */
+export const UserPage = ({ userService }: { userService: IUserService }): IPage<ReactIncomingEvent> => ({
+  /**
+   * Handle the incoming event.
+   *
+   * @param event - The incoming event.
+   * @returns The event data.
+   */
+  async handle (event: ReactIncomingEvent): Promise<User[]> {
+    return await userService.list(event.get<number>('limit', 10))
+  },
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render ({ data }: PageRenderContext<User[]>): JSX.Element {
+    const [query, setQuery] = useState('')
+
+    return (
+      <div className='users-page'>
+        <h1 className='users-title'>Users</h1>
+        <input
+          type='text'
+          placeholder='Search by name or email...'
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className='users-search'
+        />
+        <div className='user-grid'>
+          {data?.map(user => (<UserCard key={user.id} user={user} />))}
+        </div>
+      </div>
+    )
+  }
+})
+
+/**
+ * User Page Blueprint.
+ */
+export const UserPageBlueprint = definePage(UserPage, { path: '/users' })

package/full-react-imperative/app/pages/utils.ts

@@ -0,0 +1,67 @@
+import { ILogger } from '@stone-js/core'
+import { IRouter } from '@stone-js/use-react'
+import { PostInput, Post } from '../models/Post'
+import { IPostService } from '../services/contracts/IPostService'
+
+/**
+ * Create the post.
+ *
+ * @param post - The post to save.
+ */
+export async function createPost (
+  router: IRouter,
+  logger: ILogger,
+  postService: IPostService,
+  postInput: PostInput
+): Promise<void> {
+  try {
+    const post = await postService.create(postInput)
+    router.navigate(`/posts/${post.id}`)
+  } catch (error: any) {
+    console.error(error)
+    window.alert('Error creating the post')
+    logger.error(error.message, { error })
+  }
+}
+
+/**
+ * Delete the post.
+ *
+ * @param post - The post to delete.
+ */
+export async function deletePost (
+  router: IRouter,
+  logger: ILogger,
+  postService: IPostService,
+  post: Post
+): Promise<void> {
+  if (window.confirm('Are you sure you want to delete this post?')) {
+    try {
+      await postService.delete(post.id)
+      router.navigate('/posts')
+    } catch (error: any) {
+      window.alert('Error deleting the post')
+      logger.error(error.message, { error })
+    }
+  }
+}
+
+/**
+ * Update the post.
+ *
+ * @param post - The post to update.
+ */
+export async function updatePost (
+  logger: ILogger,
+  postService: IPostService,
+  id: number,
+  post: PostInput
+): Promise<void> {
+  try {
+    await postService.update(id, post)
+    window.alert('Post updated successfully')
+  } catch (error: any) {
+    window.alert('Error updating the post')
+    logger.error(error.message, { error })
+  }
+}

package/full-react-imperative/app/providers/AppServiceProvider.ts

@@ -0,0 +1,40 @@
+import axios, { AxiosInstance } from 'axios'
+import { AxiosClient } from '../clients/AxiosClient'
+import { defineServiceProvider, IBlueprint, IContainer, IServiceProvider } from '@stone-js/core'
+
+/**
+ * Get Axios instance
+ *
+ * @param container - The container
+ * @returns The Axios instance
+ */
+export function getAxiosInstance (container: IContainer): AxiosInstance {
+  const baseURL = container.make<IBlueprint>('blueprint').get<string>('app.api.baseURL', 'http://localhost:8080')
+  return axios.create({ baseURL })
+}
+
+/**
+ * App Service Provider
+ */
+export const AppServiceProvider = (container: IContainer): IServiceProvider => ({
+  /**
+   * Register services to the container
+   */
+  register (): void {
+    container
+      .instanceIf('axios', getAxiosInstance(container))
+      .singletonIf(AxiosClient, (container) => {
+        return AxiosClient({
+          axios: container.make('axios'),
+          event: container.make('event'),
+          tokenService: container.make('tokenService')
+        })
+      })
+      .alias(AxiosClient, ['axiosClient', 'httpClient'])
+  }
+})
+
+/**
+ * App Service Provider Blueprint
+ */
+export const AppServiceProviderBlueprint = defineServiceProvider(AppServiceProvider)