@stone-js/starters 0.8.3

package/full-react-declarative/app/clients/PostClient.ts

@@ -0,0 +1,90 @@
+import { Stone } from '@stone-js/core'
+import { AxiosClient } from './AxiosClient'
+import { Post, PostInput } from '../models/Post'
+
+/**
+ * Post Client Options
+*/
+export interface PostClientOptions {
+  httpClient: AxiosClient
+}
+
+/**
+ * Post Client
+ */
+@Stone({ alias: 'postClient' })
+export class PostClient {
+  private readonly path: string
+  private readonly client: AxiosClient
+
+  /**
+   * Create a new Post Client
+   *
+   * @param options - The options to create the Post Client.
+   */
+  constructor ({ httpClient }: PostClientOptions) {
+    this.client = httpClient
+    this.path = '/posts'
+  }
+
+  /**
+   * List posts
+   *
+   * @param limit - The limit of posts to list
+   * @returns The list of posts
+   */
+  async list (limit: number = 10): Promise<Post[]> {
+    return await this.client.get<Post[]>(`${this.path}?limit=${limit}`)
+  }
+
+  /**
+   * List posts by author
+   *
+   * @param id - The id of the author to list posts
+   * @param limit - The limit of posts to list
+   * @returns The list of posts
+   */
+  async listByAuthor (id: number, limit: number = 10): Promise<Post[]> {
+    return await this.client.get<Post[]>(`${this.path}/authors/${id}?limit=${limit}`)
+  }
+
+  /**
+   * Find an post
+   *
+   * @param id - The id of the post to find
+   * @returns The found post
+   */
+  async find (id: number): Promise<Post> {
+    return await this.client.get<Post>(`${this.path}/${id}`)
+  }
+
+  /**
+   * Create an post
+   *
+   * @param post - The post to create
+   * @returns The created post
+   */
+  async create (post: PostInput): Promise<Post> {
+    return await this.client.post(this.path, post)
+  }
+
+  /**
+   * Update an post
+   *
+   * @param id - The id of the post to update
+   * @param post - The post to update
+   * @returns The updated post
+   */
+  async update (id: number, post: PostInput): Promise<Post> {
+    return await this.client.patch(`${this.path}/${id}`, post)
+  }
+
+  /**
+   * Delete an post
+   *
+   * @param id - The id of the post to delete
+   */
+  async delete (id: number): Promise<unknown> {
+    return await this.client.delete(`${this.path}/${id}`)
+  }
+}

package/full-react-declarative/app/clients/SecurityClient.ts

@@ -0,0 +1,66 @@
+
+import { Axios } from 'axios'
+import { Stone } from '@stone-js/core'
+import { AxiosClient } from './AxiosClient'
+import { UserChangePassword, UserLogin, UserRegister, UserToken } from '../models/User'
+
+/**
+ * Security Client Options
+*/
+export interface SecurityClientOptions {
+  axios: Axios
+  httpClient: AxiosClient
+}
+
+/**
+ * Security Client
+ */
+@Stone({ alias: 'securityClient' })
+export class SecurityClient {
+  private readonly axios: Axios
+  private readonly client: AxiosClient
+
+  /**
+   * Create a new Security Client
+   *
+   * @param options - The options to create the Security Client.
+   */
+  constructor ({ axios, httpClient }: SecurityClientOptions) {
+    this.axios = axios
+    this.client = httpClient
+  }
+
+  /**
+   * Login a user
+   *
+   * @param user - The user to login
+   */
+  async login (user: UserLogin): Promise<UserToken> {
+    return (await this.axios.post<UserToken>('/login', user)).data
+  }
+
+  /**
+   * Logout a user
+   */
+  async logout (): Promise<void> {
+    await this.client.post<UserToken>('/logout')
+  }
+
+  /**
+   * Register a user
+   *
+   * @param user - The user to register
+   */
+  async register (user: UserRegister): Promise<void> {
+    await this.axios.post('/register', user)
+  }
+
+  /**
+   * Change the user password
+   *
+   * @param password - The password to change
+   */
+  async changePassword (password: UserChangePassword): Promise<void> {
+    await this.client.patch('/change-password', password)
+  }
+}

package/full-react-declarative/app/clients/UserClient.ts

@@ -0,0 +1,97 @@
+import { Stone } from '@stone-js/core'
+import { AxiosClient } from './AxiosClient'
+import { User, UserInput } from '../models/User'
+
+/**
+ * User Client Options
+ */
+export interface UserClientOptions {
+  httpClient: AxiosClient
+}
+
+/**
+ * User Client
+ */
+@Stone({ alias: 'userClient' })
+export class UserClient {
+  private readonly path: string
+  private readonly client: AxiosClient
+
+  /**
+   * Create a new User Client
+   *
+   * @param options - The options to create the User Client.
+   */
+  constructor ({ httpClient }: UserClientOptions) {
+    this.path = '/users'
+    this.client = httpClient
+  }
+
+  /**
+   * List users
+   *
+   * @param limit - The limit of users to list
+   * @returns The list of users
+   */
+  async list (limit: number = 10): Promise<User[]> {
+    return await this.client.get<User[]>(`${this.path}?limit=${limit}`)
+  }
+
+  /**
+   * Get the current user
+   *
+   * @returns The current user
+   */
+  async currentUser (): Promise<User> {
+    return await this.client.get<User>(`${this.path}/me`)
+  }
+
+  /**
+   * Find a user
+   *
+   * @param id - The id of the user to find
+   * @returns The found user
+   */
+  async find (id: number): Promise<User> {
+    return await this.client.get<User>(`${this.path}/${id}`)
+  }
+
+  /**
+   * Create a user
+   *
+   * @param user - The user to create
+   */
+  async create (user: UserInput): Promise<User> {
+    return await this.client.post(this.path, user)
+  }
+
+  /**
+   * Update the current user
+   *
+   * @param user - The current user
+   * @returns The current user
+   */
+  async updateCurrent (user: UserInput): Promise<User> {
+    return await this.client.patch(`${this.path}/me`, user)
+  }
+
+  /**
+   * Update a user
+   *
+   * @param id - The id of the user to update
+   * @param user - The user to update
+   * @returns The updated user
+   */
+  async update (id: number, user: UserInput): Promise<User> {
+    return await this.client.patch(`${this.path}/${id}`, user)
+  }
+
+  /**
+   * Delete a user
+   *
+   * @param id - The id of the user to delete
+   */
+  async delete (id: number): Promise<unknown> {
+    return await this.client.delete(`${this.path}/${id}`)
+  }
+}

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

@@ -0,0 +1,50 @@
+import { FC, useRef } from 'react'
+import { UserChangePassword } from '../../models/User'
+
+/**
+ * Change Password Form Options
+ */
+export interface ChangePasswordFormOptions {
+  onSubmit: (user: UserChangePassword) => Promise<void>
+}
+
+/**
+ * Change Password Form component.
+ *
+ * @param options - The options to create the Change Password Form component.
+ */
+export const ChangePasswordForm: FC<ChangePasswordFormOptions> = ({ onSubmit }) => {
+  // Create a reference to the user
+  const userRef = useRef<UserChangePassword>({
+    password: '',
+    newPassword: '',
+    confirmPassword: ''
+  })
+
+  // 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 UserChangePassword) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    userRef.current[field] = event.target.value
+  }
+
+  // Render the component
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor='password'>Current Password:</label>
+      <input id='password' type='password' onChange={onChange('password')} defaultValue={userRef.current.password} />
+
+      <label htmlFor='newPassword'>New Password:</label>
+      <input id='newPassword' type='password' onChange={onChange('newPassword')} defaultValue={userRef.current.newPassword} />
+
+      <label htmlFor='confirmPassword'>Confirm password:</label>
+      <input id='confirmPassword' type='password' onChange={onChange('confirmPassword')} defaultValue={userRef.current.confirmPassword} />
+
+      <button type='submit'>ChangePassword</button>
+    </form>
+  )
+}

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

@@ -0,0 +1,37 @@
+import { FC, useRef } from 'react'
+
+/**
+ * Comment Form Props
+ */
+export interface CommentFormOptions {
+  onSubmit: (content: string) => void
+}
+
+/**
+ * Comment Form component.
+ */
+export const CommentForm: FC<CommentFormOptions> = ({ onSubmit }) => {
+  const contentRef = useRef<HTMLInputElement>(null)
+
+  // Handle the form submit
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    if (contentRef.current === null) return
+
+    const content = contentRef.current.value.trim()
+    if (content.length === 0) return // Prevent empty submissions
+
+    contentRef.current.value = '' // Clear input field
+    onSubmit(content)
+  }
+
+  // Render the component
+  return (
+    <form onSubmit={handleSubmit}>
+      <p>
+        <input ref={contentRef} type='text' placeholder='Write a comment...' />
+        <button type='submit'>Add Comment</button>
+      </p>
+    </form>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { FC, useState } from 'react'
+import { formatDateTime } from '../../utils'
+import { CommentView } from '../../models/Comment'
+
+/**
+ * Comment Item Props
+ */
+export interface CommentItemProps {
+  commentView: CommentView
+  onRetry: (commentView: CommentView) => void
+}
+
+/**
+ * Comment Item component.
+ */
+export const CommentItem: FC<CommentItemProps> = ({ commentView, onRetry }) => {
+  const [comment, setComment] = useState<CommentView>(commentView)
+
+  // Handle the retry
+  const handleOnClick = (): void => {
+    setComment({ ...comment, status: 'saving' })
+    onRetry(comment)
+  }
+
+  // Render the component
+  return (
+    <div>
+      <p>{comment.content}</p>
+      <p>
+        <span>{comment.author.name}</span>
+        <span>{formatDateTime(comment.createdAt)}</span>
+      </p>
+      {comment.status === 'saving' && <p>Saving...</p>}
+      {comment.status === 'error' && (
+        <p>
+          <span>Error adding the comment!</span>
+          <button onClick={handleOnClick}>Retry</button>
+        </p>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,95 @@
+import { User } from '../../models/User'
+import { Post } from '../../models/Post'
+import { FC, useEffect, useState } from 'react'
+import { CommentItem } from '../CommentItem/CommentItem'
+import { CommentForm } from '../CommentForm/CommentForm'
+import { CommentService } from '../../services/CommentService'
+import { CommentInput, CommentView } from '../../models/Comment'
+
+/**
+ * Comment Widget Options
+ */
+export interface CommentWidgetOptions {
+  post: Post
+  user: User
+  commentService: CommentService
+}
+
+/**
+ * Comment Items component.
+ */
+export const CommentWidget: FC<CommentWidgetOptions> = ({ post, user, commentService }) => {
+  const [comments, setComments] = useState<CommentView[]>([])
+  const [fetchingStatus, setFetchingStatus] = useState<'idle' | 'loading' | 'error'>('idle')
+
+  // Fetch comments
+  const fetchComments = (): void => {
+    setFetchingStatus('loading')
+    commentService
+      .list(post.id)
+      .then(comments => {
+        setComments(comments)
+        setFetchingStatus('idle')
+      })
+      .catch(() => {
+        setFetchingStatus('error')
+      })
+  }
+
+  // Save comment
+  const saveComment = (commentInput: CommentInput): void => {
+    commentService
+      .create(post.id, commentInput)
+      .then(() => fetchComments())
+      .catch(() => {
+        setComments(comments.map(comment => ({
+          ...comment,
+          status: comment.id === commentInput.id ? 'error' : comment.status
+        })))
+      })
+  }
+
+  // Handle save
+  const handleOnSubmit = (content: string): void => {
+    const id = Math.random()
+    const commentInput: CommentInput = {
+      id,
+      content,
+      postId: post.id
+    }
+
+    const commentView: CommentView = {
+      ...commentInput,
+      author: user,
+      status: 'saving',
+      createdAt: Date.now()
+    }
+
+    setComments([...comments, commentView])
+
+    saveComment(commentInput)
+  }
+
+  // Fetch comments on mount
+  useEffect(() => { fetchComments() }, [post.id])
+
+  // Render
+  if (comments.length === 0 && fetchingStatus === 'loading') {
+    return <p>Loading comments...</p>
+  } else if (comments.length === 0 && fetchingStatus === 'error') {
+    return <p>Error fetching comments</p>
+  } else if (comments.length === 0 && fetchingStatus === 'idle') {
+    return <p>No comments yet</p>
+  } else {
+    return (
+      <div>
+        <CommentForm onSubmit={handleOnSubmit} />
+        <div>
+          {comments.map((comment) => (
+            <CommentItem key={comment.id} commentView={comment} onRetry={saveComment} />
+          ))}
+        </div>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,71 @@
+import './LoginForm.css'
+import { FC, useRef } from 'react'
+import { UserLogin } from '../../models/User'
+import { StoneLink } from '@stone-js/use-react'
+
+/**
+ * Login Form Options
+ */
+export interface LoginFormOptions {
+  error: boolean
+  onSubmit: (user: UserLogin) => Promise<void>
+}
+
+/**
+ * Login Form component.
+ *
+ * @param options - The options to create the Login Form component.
+ */
+export const LoginForm: FC<LoginFormOptions> = ({ error, onSubmit }) => {
+  // Create a reference to the login
+  const loginRef = useRef<UserLogin>({
+    email: '',
+    password: ''
+  })
+
+  // Handle the form submit
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    void onSubmit(loginRef.current).catch(() => {})
+  }
+
+  // Handle the field change
+  const onChange = (field: keyof UserLogin) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    loginRef.current[field] = event.target.value
+  }
+
+  // Render the component
+  return (
+    <>
+      <form onSubmit={handleSubmit} className='panel'>
+        {error && <p className='alert alert-danger alert-small'>Invalid email or password</p>}
+
+        <div>
+          <label htmlFor='email' className='label'>Email:</label>
+          <input
+            id='email'
+            type='email'
+            className='input'
+            placeholder='Enter your email'
+            onChange={onChange('email')} defaultValue={loginRef.current.email}
+          />
+        </div>
+
+        <div className='mt-8'>
+          <label htmlFor='password' className='label'>Password:</label>
+          <input
+            id='password'
+            type='password'
+            className='input'
+            placeholder='Enter your password'
+            onChange={onChange('password')} defaultValue={loginRef.current.password}
+          />
+        </div>
+        <button type='submit' className='button button-secondary button-full mt-24'>Login</button>
+      </form>
+      <p className='mt-24 text-center'>
+        <StoneLink to='/register' className='button button-primary'>Register</StoneLink>
+      </p>
+    </>
+  )
+}

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

@@ -0,0 +1,44 @@
+import { FC } from 'react'
+import { Post } from '../../models/Post'
+import { User } from '../../models/User'
+import { formatDateTime } from '../../utils'
+import { StoneLink } from '@stone-js/use-react'
+import { CommentWidget } from '../CommentWidget/CommentWidget'
+import { CommentService } from '../../services/CommentService'
+
+/**
+ * Post details Options
+ */
+export interface PostDetailsOptions {
+  post: Post
+  user: User
+  commentService: CommentService
+  onDelete: (post: Post) => Promise<void>
+}
+
+/**
+ * Post details component.
+ *
+ * @param options - The options to create the Post details component.
+ */
+export const PostDetails: FC<PostDetailsOptions> = ({ user, onDelete, post, commentService }) => {
+  const deletePost = (): void => {
+    void onDelete(post).catch(() => {})
+  }
+
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <p>
+        <span>{post.author.name}</span>
+        <span>{formatDateTime(post.createdAt)}</span>
+      </p>
+      <p>{post.content}</p>
+      <p>
+        <StoneLink to={`/posts/${post.id}/edit`}>Edit</StoneLink>
+        <button onClick={deletePost}>Delete</button>
+      </p>
+      <CommentWidget user={user} commentService={commentService} post={post} />
+    </article>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { FC, useRef } from 'react'
+import { PostInput } from '../../models/Post'
+
+/**
+ * Post Form Options
+ */
+export interface PostFormOptions {
+  post?: PostInput
+  onSubmit: (post: PostInput) => Promise<void>
+}
+
+/**
+ * Post Form component.
+ *
+ * @param options - The options to create the Post Form component.
+ */
+export const PostForm: FC<PostFormOptions> = ({ post, onSubmit }) => {
+  // Create a reference to the post
+  const postRef = useRef<PostInput>({
+    title: post?.title ?? '',
+    content: post?.content ?? ''
+  })
+
+  // Handle the form submit
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    void onSubmit(postRef.current).catch(() => {})
+  }
+
+  // Handle the field change
+  const onChange = (field: keyof PostInput) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    postRef.current[field] = event.target.value
+  }
+
+  // Render the component
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor='title'>Title:</label>
+      <input id='title' type='text' onChange={onChange('title')} defaultValue={postRef.current.title} />
+
+      <label htmlFor='content'>Content:</label>
+      <input id='content' type='text' onChange={onChange('content')} defaultValue={postRef.current.content} />
+
+      <button type='submit'>Publish</button>
+    </form>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { FC } from 'react'
+import { Post } from '../../models/Post'
+import { StoneLink } from '@stone-js/use-react'
+
+/**
+ * Post Item Options
+ */
+export interface PostItemOptions {
+  post: Post
+}
+
+/**
+ * Post Item component.
+ *
+ * @param options - The options to create the Post Item component.
+ */
+export const PostItem: FC<PostItemOptions> = ({ post }) => {
+  return (
+    <article>
+      <h3>
+        <StoneLink to={`/posts/${post.id}`}>{post.title}</StoneLink>
+      </h3>
+      <p>
+        <span>{post.author.name}</span>
+        <span>{new Date(post.createdAt).toISOString()}</span>
+      </p>
+      <p>{post.content.substring(0, 32)}</p>
+      <p>
+        <StoneLink to={`/posts/${post.id}`}>Show</StoneLink>
+        <StoneLink to={`/posts/${post.id}/edit`}>Edit</StoneLink>
+      </p>
+    </article>
+  )
+}