@stone-js/starters 0.8.3

package/full-react-declarative/app/pages/users/CreateUserPage.tsx

@@ -0,0 +1,48 @@
+import { JSX } from 'react'
+import { UserInput } from '../../models/User'
+import { UserService } from '../../services/UserService'
+import { UserForm } from '../../components/UserForm/UserForm'
+import { IPage, Page, ReactIncomingEvent, StoneLink } from '@stone-js/use-react'
+
+/**
+ * Create User Page component.
+ */
+@Page('/users/create')
+export class CreateUserPage implements IPage<ReactIncomingEvent> {
+  private readonly userService: UserService
+
+  /**
+   * Create a new Update User Page component.
+   *
+   * @param userService - The user service.
+   */
+  constructor ({ userService }: { userService: UserService }) {
+    this.userService = userService
+  }
+
+  /**
+   * Render the component.
+   *
+   * @param options - The options for rendering the component.
+   * @returns The rendered component.
+   */
+  render (): JSX.Element {
+    return (
+      <>
+        <h1>User form</h1>
+        <UserForm onSubmit={this.saveUser.bind(this)} />
+        <StoneLink to='/users'>Go to users</StoneLink>
+      </>
+    )
+  }
+
+  /**
+   * Save the user.
+   *
+   * @param user - The user
+   */
+  private async saveUser (user: UserInput): Promise<void> {
+    console.log('user saved', user)
+    await this.userService.create(user)
+  }
+}

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

@@ -0,0 +1,62 @@
+import { JSX } from 'react'
+import { User } from '../../models/User'
+import { isNotEmpty } from '@stone-js/core'
+import { UserService } from '../../services/UserService'
+import { IPage, Page, ReactIncomingEvent, PageRenderContext, StoneLink } from '@stone-js/use-react'
+
+/**
+ * Show User Page options.
+ */
+export interface ShowUserPageOptions {
+  userService: UserService
+}
+
+/**
+ * Show User Page component.
+ */
+@Page('/users/:user@id(\\d+)', { bindings: { user: 'userService@findBy' } })
+export class ShowUserPage implements IPage<ReactIncomingEvent> {
+  private readonly userService: UserService
+
+  /**
+   * Create a new Show User Page component.
+   *
+   * @param options - The options to create the Show User Page component.
+   */
+  constructor ({ userService }: ShowUserPageOptions) {
+    this.userService = userService
+  }
+
+  /**
+   * 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')
+
+    return (
+      <>
+        <h1>Show user</h1>
+        <p>Name: {user?.name}</p>
+        <p>Email: {user?.email}</p>
+        <StoneLink to={`/users/${String(user?.id)}/edit`}>Edit</StoneLink>
+        <button onClick={() => this.deleteUser(user)}>Delete</button>
+        <StoneLink to='/users'>Go to users</StoneLink>
+      </>
+    )
+  }
+
+  /**
+   * Delete the user.
+   *
+   * @param container - The container.
+   * @param user - The user
+   */
+  private deleteUser (user?: User): void {
+    if (isNotEmpty<User>(user) && window.confirm('Are you sure you want to delete this user?')) {
+      void this.userService.delete(user.id).catch(() => {})
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import { JSX } from 'react'
+import { User, UserInput } from '../../models/User'
+import { UserService } from '../../services/UserService'
+import { UserForm } from '../../components/UserForm/UserForm'
+import { IPage, Page, ReactIncomingEvent, PageRenderContext, StoneLink } from '@stone-js/use-react'
+
+/**
+ * Update User Page options.
+ */
+export interface UpdateUserPageOptions {
+  userService: UserService
+}
+
+/**
+ * Update User Page component.
+ */
+@Page('/users/:user@id(\\d+)/edit', { bindings: { user: 'userService@findBy' } })
+export class UpdateUserPage implements IPage<ReactIncomingEvent> {
+  private readonly userService: UserService
+
+  /**
+   * Create a new Update User Page component.
+   *
+   * @param userService - The user service.
+   */
+  constructor ({ userService }: UpdateUserPageOptions) {
+    this.userService = userService
+  }
+
+  /**
+   * 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')
+
+    return (
+      <>
+        <h1>Update user</h1>
+        <UserForm user={user} onSubmit={async (userInput) => await this.saveUser(user?.id ?? 0, userInput)} />
+        <StoneLink to={`/users/${String(user?.id)}`}>Back to user</StoneLink>
+        <StoneLink to='/users'>Go to users</StoneLink>
+      </>
+    )
+  }
+
+  /**
+   * Save the user.
+   *
+   * @param user - The user
+   */
+  private async saveUser (id: number, user: UserInput): Promise<void> {
+    await this.userService.update(id, user)
+  }
+}

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

@@ -0,0 +1,57 @@
+import { JSX } from 'react'
+import { User } from '../../models/User'
+import { UserService } from '../../services/UserService'
+import { IPage, Page, ReactIncomingEvent, PageRenderContext, StoneLink } from '@stone-js/use-react'
+
+export interface UserPageOptions {
+  userService: UserService
+}
+
+/**
+ * User Page component.
+ */
+@Page('/users')
+export class UserPage implements IPage<ReactIncomingEvent> {
+  private readonly userService: UserService
+
+  /**
+   * Create a new Update User Page component.
+   *
+   * @param userService - The user service.
+   */
+  constructor ({ userService }: UserPageOptions) {
+    this.userService = userService
+  }
+
+  /**
+   * Handle the incoming event.
+   *
+   * @param event - The incoming event.
+   * @returns The event data.
+   */
+  async handle (event: ReactIncomingEvent): Promise<User[]> {
+    return await this.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 {
+    return (
+      <>
+        <h1>Users</h1>
+        <ul>
+          {data?.map(user => (
+            <li key={user.id}>
+              <StoneLink to={`/users/${user.id}`}>{user.name}</StoneLink>
+            </li>
+          ))}
+        </ul>
+        <p><StoneLink to='/users/create'>New User</StoneLink></p>
+      </>
+    )
+  }
+}

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

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

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

@@ -0,0 +1,59 @@
+import { Service } from '@stone-js/core'
+import { CommentClient } from '../clients/CommentClient'
+import { Comment, CommentInput } from '../models/Comment'
+
+/**
+ * Comment Service Options
+*/
+export interface CommentServiceOptions {
+  commentClient: CommentClient
+}
+
+/**
+ * Comment 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: 'commentService' })
+export class CommentService {
+  private readonly commentClient: CommentClient
+
+  /**
+   * Create a new Comment Service
+  */
+  constructor ({ commentClient }: CommentServiceOptions) {
+    this.commentClient = commentClient
+  }
+
+  /**
+   * List comments
+   *
+   * @param postId - The id of the post to list comments
+   * @param limit - The limit of comments to list
+   */
+  async list (postId: number, limit: number = 10): Promise<Comment[]> {
+    return await this.commentClient.list(postId, limit)
+  }
+
+  /**
+   * Create a comment
+   *
+   * @param postId - The id of the post to create the comment for
+   * @param comment - The comment to create
+   */
+  async create (postId: number, comment: CommentInput): Promise<void> {
+    await this.commentClient.create(postId, comment)
+  }
+
+  /**
+   * Delete a comment
+   *
+   * @param id - The id of the comment to delete
+   */
+  async delete (id: number): Promise<void> {
+    await this.commentClient.delete(id)
+  }
+}

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

@@ -0,0 +1,108 @@
+import { Service } from '@stone-js/core'
+import { Post, PostInput } from '../models/Post'
+import { PostClient } from '../clients/PostClient'
+import { PostNotFoundError } from '../errors/PostNotFoundError'
+
+/**
+ * Post Service Options
+*/
+export interface PostServiceOptions {
+  postClient: PostClient
+}
+
+/**
+ * Post 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: 'postService' })
+export class PostService {
+  private readonly postClient: PostClient
+
+  /**
+   * Create a new Post Service
+  */
+  constructor ({ postClient }: PostServiceOptions) {
+    this.postClient = postClient
+  }
+
+  /**
+   * List posts
+   *
+   * @param limit - The limit of posts to list
+   */
+  async list (limit: number = 10): Promise<Post[]> {
+    return await this.postClient.list(limit)
+  }
+
+  /**
+   * List posts by author
+   *
+   * @param id - The id of the author to list posts
+   * @param limit - The limit of posts to list
+   */
+  async listbyAuthor (id: number, limit: number = 10): Promise<Post[]> {
+    return await this.postClient.listByAuthor(id, limit)
+  }
+
+  /**
+   * Find a post
+   *
+   * @param conditions - The conditions to find the post
+   * @returns The found post
+   */
+  async find (conditions: Record<string, any>): Promise<Post> {
+    try {
+      return await this.postClient.find(conditions.id)
+    } catch (error: any) {
+      if (error.status === 404) {
+        throw new PostNotFoundError(error.message, { cause: error })
+      } else {
+        throw error
+      }
+    }
+  }
+
+  /**
+   * Find a post by key
+   *
+   * @param key - The key to find the post
+   * @param value - The value to find the post
+   * @returns The found post
+   * @throws PostNotFoundError
+   */
+  async findBy (key: string, value: string): Promise<Post | undefined> {
+    return await this.find({ [key]: value })
+  }
+
+  /**
+   * Create a post
+   *
+   * @param post - The post to create
+   */
+  async create (post: PostInput): Promise<Post> {
+    return await this.postClient.create(post)
+  }
+
+  /**
+   * Update a post
+   *
+   * @param id - The id of the post to update
+   * @param post - The post data to update
+   */
+  async update (id: number, post: PostInput): Promise<Post> {
+    return await this.postClient.update(id, post)
+  }
+
+  /**
+   * Delete a post
+   *
+   * @param id - The id of the post to delete
+   */
+  async delete (id: number): Promise<void> {
+    await this.postClient.delete(id)
+  }
+}

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

@@ -0,0 +1,80 @@
+import { Service } from '@stone-js/core'
+import { TokenService } from './TokenService'
+import { SecurityClient } from '../clients/SecurityClient'
+import { UserChangePassword, UserLogin, UserRegister } from '../models/User'
+
+/**
+ * Security Service Options
+*/
+export interface SecurityServiceOptions {
+  tokenService: TokenService
+  securityClient: SecurityClient
+}
+
+/**
+ * Security 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: 'securityService' })
+export class SecurityService {
+  private readonly tokenService: TokenService
+  private readonly securityClient: SecurityClient
+
+  /**
+   * Create a new Security Service
+  */
+  constructor ({ tokenService, securityClient }: SecurityServiceOptions) {
+    this.tokenService = tokenService
+    this.securityClient = securityClient
+  }
+
+  /**
+   * Login a user
+   *
+   * @param user - The user to login
+   * @returns The user token
+  */
+  async login (user: UserLogin): Promise<void> {
+    const token = await this.securityClient.login(user)
+    this.tokenService.saveToken(token)
+  }
+
+  /**
+   * Logout a user
+  */
+  async logout (): Promise<void> {
+    await this.securityClient.logout()
+    this.tokenService.removeToken()
+  }
+
+  /**
+   * Register a user
+   *
+   * @param user - The user to register
+  */
+  async register (user: UserRegister): Promise<void> {
+    await this.securityClient.register(user)
+  }
+
+  /**
+   * Change the user password
+   *
+   * @param password - The password to change
+  */
+  async changePassword (password: UserChangePassword): Promise<void> {
+    await this.securityClient.changePassword(password)
+  }
+
+  /**
+   * Check if the user is authenticated
+   *
+   * @returns True if the user is authenticated, false otherwise
+   */
+  isAuthenticated (): boolean {
+    return this.tokenService.isAuthenticated()
+  }
+}

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

@@ -0,0 +1,116 @@
+import { Axios } from 'axios'
+import { UserToken } from '../models/User'
+import { ReactIncomingEvent } from '@stone-js/use-react'
+import { IContainer, isNotEmpty, Service } from '@stone-js/core'
+
+/**
+ * Token Service Options
+*/
+export interface TokenServiceOptions {
+  axios: Axios
+  container: IContainer
+}
+
+/**
+ * Token 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: 'tokenService' })
+export class TokenService {
+  private readonly axios: Axios
+  private readonly container: IContainer
+
+  /**
+   * Create a new Token Service
+  */
+  constructor ({ container, axios }: TokenServiceOptions) {
+    this.axios = axios
+    this.container = container
+  }
+
+  /**
+   * Refresh the user token
+  */
+  async refresh (): Promise<void> {
+    const headers = {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${String(this.getAccessToken())}`
+    }
+    const response = await this.axios.post<UserToken>('/refresh', {}, { headers })
+
+    this.saveToken(response.data)
+  }
+
+  /**
+   * Set the token
+   *
+   * The event must be resolved on demand
+   * because the event is not available at the time of service creation.
+   * The event is available only when the request is made.
+   *
+   * @param token - The token to set
+  */
+  saveToken (token: UserToken): void {
+    this.container.make<ReactIncomingEvent>('event').cookies.add(
+      'token',
+      { ...token, createdAt: Date.now() },
+      {
+        path: '/',
+        secure: true,
+        httpOnly: false,
+        maxAge: token.expiresIn
+      }
+    )
+  }
+
+  /**
+   * Remove the token
+  */
+  removeToken (): void {
+    this.container.make<ReactIncomingEvent>('event').cookies.remove(
+      'token',
+      {
+        path: '/',
+        secure: true,
+        httpOnly: false
+      }
+    )
+  }
+
+  /**
+   * Get the token
+   *
+   * The event must be resolved on demand
+   * because the event is not available at the time of service creation.
+   * The event is available only when the request is made.
+   *
+   * @returns The token
+  */
+  getToken (): UserToken | undefined {
+    return this.container.make<ReactIncomingEvent>('event').cookies.getValue('token')
+  }
+
+  /**
+   * Get the access token
+   *
+   * @returns The access token
+   */
+  getAccessToken (): string | undefined {
+    return this.getToken()?.accessToken
+  }
+
+  /**
+   * Check if the user is authenticated
+   *
+   * @returns True if the user is authenticated, false otherwise
+   */
+  isAuthenticated (): boolean {
+    const token = this.getToken()
+    return isNotEmpty<UserToken>(token) && (token.createdAt + (token.expiresIn * 1000)) > Date.now()
+  }
+}