@stone-js/starters 0.8.3

package/full-react-imperative/app/clients/contracts/ISecurityClient.ts

@@ -0,0 +1,33 @@
+import { UserLogin, UserToken, UserRegister, UserChangePassword } from '../../models/User'
+
+/**
+ * Security Client contract
+ */
+export interface ISecurityClient {
+  /**
+   * Login a user.
+   *
+   * @param user - The user login credentials.
+   * @returns The access token.
+   */
+  login: (user: UserLogin) => Promise<UserToken>
+
+  /**
+   * Logout the currently authenticated user.
+   */
+  logout: () => Promise<void>
+
+  /**
+   * Register a new user.
+   *
+   * @param user - The user registration data.
+   */
+  register: (user: UserRegister) => Promise<void>
+
+  /**
+   * Change the password of the current user.
+   *
+   * @param password - The current and new password.
+   */
+  changePassword: (password: UserChangePassword) => Promise<void>
+}

package/full-react-imperative/app/clients/contracts/IUserClient.ts

@@ -0,0 +1,61 @@
+import { User, UserInput } from '../../models/User'
+
+/**
+ * User Client contract
+ */
+export interface IUserClient {
+  /**
+   * List users.
+   *
+   * @param limit - The limit of users to list (default: 10).
+   * @returns The list of users.
+   */
+  list: (limit?: number) => Promise<User[]>
+
+  /**
+   * Get the currently authenticated user.
+   *
+   * @returns The current user.
+   */
+  currentUser: () => Promise<User>
+
+  /**
+   * Find a user by ID.
+   *
+   * @param id - The ID of the user to find.
+   * @returns The found user.
+   */
+  find: (id: number) => Promise<User>
+
+  /**
+   * Create a new user.
+   *
+   * @param user - The user data to create.
+   * @returns The created user.
+   */
+  create: (user: UserInput) => Promise<User>
+
+  /**
+   * Update the currently authenticated user.
+   *
+   * @param user - The updated user data.
+   * @returns The updated user.
+   */
+  updateCurrent: (user: UserInput) => Promise<User>
+
+  /**
+   * Update a user by ID.
+   *
+   * @param id - The ID of the user to update.
+   * @param user - The updated user data.
+   * @returns The updated user.
+   */
+  update: (id: number, user: UserInput) => Promise<User>
+
+  /**
+   * Delete a user by ID.
+   *
+   * @param id - The ID of the user to delete.
+   */
+  delete: (id: number) => Promise<void>
+}

package/full-react-imperative/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-imperative/app/components/CommentForm/CommentForm.css

@@ -0,0 +1,35 @@
+.comment-form {
+  gap: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.comment-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border-radius: 20px;
+  border: 1px solid #d1d5db;
+  background: #f9fafb;
+  font-size: 0.9rem;
+  outline: none;
+}
+
+.comment-input:focus {
+  border-color: #2563eb;
+  background-color: #fff;
+}
+
+.comment-submit {
+  background-color: #2563eb;
+  color: #fff;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: background-color 0.2s ease;
+}
+
+.comment-submit:hover {
+  background-color: #1e3a8a;
+}

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

@@ -0,0 +1,45 @@
+import './CommentForm.css'
+import { User } from '../../models/User'
+import { FC, useRef, FormEvent } from 'react'
+import { UserAvatar } from '../UserAvatar/UserAvatar'
+
+/**
+ * CommentForm options.
+ */
+export interface CommentFormOptions {
+  currentUser: User
+  onSubmit: (content: string) => Promise<void>
+}
+
+/**
+ * CommentForm component.
+ */
+export const CommentForm: FC<CommentFormOptions> = ({ currentUser, onSubmit }) => {
+  const contentRef = useRef<HTMLInputElement>(null)
+
+  // Handle the form submit
+  const handleSubmit = (event: 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
+    void onSubmit(content).catch(() => {})
+  }
+
+  // Render the component
+  return (
+    <form className='comment-form' onSubmit={handleSubmit}>
+      <UserAvatar user={currentUser} />
+      <input
+        type='text'
+        ref={contentRef}
+        className='comment-input'
+        placeholder='Write a comment...'
+      />
+      <button className='comment-submit' type='submit'>Add Comment</button>
+    </form>
+  )
+}

package/full-react-imperative/app/components/CommentItem/CommentItem.css

@@ -0,0 +1,74 @@
+.comment-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.comment-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  background-color: #f0f0f0;
+}
+
+.comment-bubble {
+  background: #f0f2f5;
+  border-radius: 12px;
+  padding: 0.5rem 0.75rem;
+  position: relative;
+  flex: 1;
+}
+
+.comment-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: #666;
+  margin-bottom: 0.25rem;
+}
+
+.comment-text {
+  font-size: 0.9rem;
+  color: #1c1e21;
+  line-height: 1.4;
+}
+
+.comment-delete {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: transparent;
+  border: none;
+  font-size: 0.9rem;
+  color: #999;
+  cursor: pointer;
+}
+
+.comment-delete:hover {
+  color: #e11d48;
+}
+
+.comment-reactions {
+  margin-top: 0.25rem;
+}
+
+.like-button {
+  background: none;
+  border: none;
+  color: #555;
+  font-size: 0.8rem;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.like-button:hover {
+  background: #e5e7eb;
+}
+
+.like-button.liked {
+  color: #2563eb;
+  font-weight: 600;
+}

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

@@ -0,0 +1,62 @@
+import './CommentItem.css'
+import { FC, useState } from 'react'
+import { User } from '../../models/User'
+import { dateTimeFromNow } from '../../utils'
+import { CommentView } from '../../models/Comment'
+import { UserAvatar } from '../UserAvatar/UserAvatar'
+
+/**
+ * Comment Item Props
+ */
+export interface CommentItemProps {
+  currentUser: User
+  commentView: CommentView
+  onToggleLike?: (comment: CommentView) => void
+  onDeleteComment?: (comment: CommentView) => void
+  onRetry: (commentView: CommentView) => Promise<void>
+}
+
+/**
+ * Comment Item component.
+ */
+export const CommentItem: FC<CommentItemProps> = ({ currentUser, commentView, onRetry, onDeleteComment, onToggleLike }) => {
+  const [comment, setComment] = useState<CommentView>(commentView)
+
+  // Handle the retry
+  const handleOnClick = (): void => {
+    setComment({ ...comment, status: 'saving' })
+    void onRetry(comment).catch(() => {})
+  }
+
+  // Render the component
+  return (
+    <li key={comment.id} className='comment-item'>
+      <UserAvatar user={comment.author} size='sm' />
+      <div className='comment-bubble'>
+        <div className='comment-meta'>
+          <strong>{comment.author.name}</strong>
+          <span>{dateTimeFromNow(comment.createdAt)}</span>
+        </div>
+        <p className='comment-text'>{comment.content}</p>
+        {comment.author.id === currentUser.id && (onDeleteComment != null) && (
+          <button className='comment-delete' onClick={() => onDeleteComment(comment)}>✕</button>
+        )}
+        <div className='comment-reactions'>
+          <button
+            className={`like-button ${comment.likedByCurrentUser ? 'liked' : ''}`}
+            onClick={() => onToggleLike?.(comment)}
+          >
+            👍 {comment.likesCount > 0 && <span>{comment.likesCount}</span>}
+          </button>
+        </div>
+      </div>
+      {comment.status === 'saving' && <p>Saving...</p>}
+      {comment.status === 'error' && (
+        <p>
+          <span>Error adding the comment!</span>
+          <button onClick={handleOnClick}>Retry</button>
+        </p>
+      )}
+    </li>
+  )
+}

package/full-react-imperative/app/components/CommentWidget/CommentWidget.css

@@ -0,0 +1,25 @@
+.comment-section {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.comment-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0;
+}
+
+.show-more-comments {
+  background: none;
+  border: none;
+  color: #2563eb;
+  font-size: 0.85rem;
+  cursor: pointer;
+  margin-left: 2.5rem;
+  padding: 4px 8px;
+}

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

@@ -0,0 +1,119 @@
+import './CommentWidget.css'
+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 { CommentInput, CommentView } from '../../models/Comment'
+import { ICommentService } from '../../services/contracts/ICommentService'
+
+/**
+ * Comment Widget Options
+ */
+export interface CommentWidgetOptions {
+  post: Post
+  currentUser: User
+  commentService: ICommentService
+}
+
+/**
+ * Comment Items component.
+ */
+export const CommentWidget: FC<CommentWidgetOptions> = ({ post, currentUser, commentService }) => {
+  const [limit, setLimit] = useState(10)
+  const [comments, setComments] = useState<CommentView[]>([])
+  const [showMoreComments, setShowMoreComments] = useState(false)
+  const [fetchingStatus, setFetchingStatus] = useState<'idle' | 'loading' | 'error'>('idle')
+
+  // Fetch comments
+  const fetchComments = async (): Promise<void> => {
+    try {
+      setFetchingStatus('loading')
+      const comments = await commentService.list(post.id, limit)
+      setFetchingStatus('idle')
+      setComments(comments)
+      setShowMoreComments(comments.length < post.commentsCount)
+    } catch (_: any) {
+      setFetchingStatus('error')
+    }
+  }
+
+  const fetchMoreComments = (): void => {
+    setLimit(limit + 10)
+    setShowMoreComments(false)
+    void fetchComments().catch(() => {})
+  }
+
+  // Save comment
+  const saveComment = async (commentInput: CommentInput): Promise<void> => {
+    try {
+      await commentService.create(post.id, commentInput)
+      await fetchComments()
+    } catch (_: any) {
+      setComments(comments.map(comment => ({
+        ...comment,
+        status: comment.id === commentInput.id ? 'error' : comment.status
+      })))
+    }
+  }
+
+  // Handle save
+  const handleOnSubmit = async (content: string): Promise<void> => {
+    const id = Math.random()
+    const commentInput: CommentInput = {
+      id,
+      content,
+      likesCount: 0,
+      postId: post.id,
+      likedByCurrentUser: false
+    }
+
+    const commentView: CommentView = {
+      ...commentInput,
+      author: currentUser,
+      status: 'saving',
+      createdAt: Date.now()
+    }
+
+    setComments([...comments, commentView])
+
+    await saveComment(commentInput)
+  }
+
+  // Fetch comments on mount
+  useEffect(() => { fetchComments().then(() => {}).catch(() => {}) }, [post.id])
+
+  // Render
+  if (comments.length === 0 && fetchingStatus === 'loading') {
+    return <p className='comment-loading'>Loading comments...</p>
+  } else if (comments.length === 0 && fetchingStatus === 'error') {
+    return <p className='comment-error'>Error fetching comments</p>
+  } else {
+    return (
+      <div className='comment-section'>
+        <CommentForm
+          currentUser={currentUser}
+          onSubmit={handleOnSubmit}
+        />
+        <ul className='comment-list'>
+          {comments.map((comment) => (
+            <CommentItem
+              key={comment.id}
+              currentUser={currentUser}
+              commentView={comment}
+              onRetry={saveComment}
+            />
+          ))}
+        </ul>
+        {showMoreComments && (
+          <button
+            className='show-more-comments'
+            onClick={() => fetchMoreComments()}
+          >
+            Show more comments
+          </button>
+        )}
+      </div>
+    )
+  }
+}

package/full-react-imperative/app/components/Dropdown/Dropdown.css

@@ -0,0 +1,52 @@
+.dropdown-wrapper {
+  position: relative;
+}
+
+.dropdown-container {
+  top: 100%;
+  opacity: 0;
+  z-index: 100;
+  min-width: 180px;
+  position: absolute;
+  margin-top: 0.5rem;
+  border-radius: 8px;
+  background: white;
+  pointer-events: none;
+  transform: scale(0.98);
+  transition: all 0.2s ease;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+}
+
+.dropdown-container.open {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+.dropdown-container.closed {
+  display: none;
+}
+
+.dropdown-container.right {
+  right: 0;
+}
+
+.dropdown-container.left {
+  left: 0;
+}
+
+.dropdown-container ul {
+  list-style: none;
+  padding: 0.25rem 0;
+}
+
+.dropdown-container li {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.dropdown-container li:hover {
+  background: #f3f4f6;
+}

package/full-react-imperative/app/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,40 @@
+import './Dropdown.css'
+import { FC, ReactNode, useEffect, useRef } from 'react'
+
+interface DropdownOptions {
+  show: boolean
+  className?: string
+  children: ReactNode
+  onClose: () => void
+  align?: 'left' | 'right'
+}
+
+export const Dropdown: FC<DropdownOptions> = ({
+  show,
+  onClose,
+  children,
+  align = 'right',
+  className = ''
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement
+      if (ref.current?.contains(target) !== true && (target.closest('.dropdown-wrapper') == null)) {
+        onClose()
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [onClose])
+
+  return (
+    <div
+      ref={ref}
+      className={`dropdown-container ${align} ${show ? 'open' : 'closed'} ${className}`}
+    >
+      {children}
+    </div>
+  )
+}

package/full-react-imperative/app/components/LayoutHeader/LayoutHeader.css

@@ -0,0 +1,62 @@
+.app-header .app-navbar {
+  display: flex;
+  margin: 0 auto;
+  max-width: 1280px;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  justify-content: space-between;
+}
+
+.header-left .logo {
+  margin: 0;
+  gap: 0.5rem;
+  border: none;
+  display: flex;
+  color: #1c1e21;
+  background: none;
+  font-weight: bold;
+  font-size: 1.25rem;
+  align-items: center;
+  text-decoration: none;
+}
+
+.header-left .logo:hover {
+  cursor: pointer;
+}
+
+.header-left img {
+  height: 36px;
+  width: 36px;
+}
+
+.header-left .logo span {
+  font-size: 1.1em;
+  margin-left: 8px;
+  font-weight: bold;
+}
+
+.header-right {
+  gap: 3rem;
+  display: flex;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  color: #555;
+}