@stone-js/starters 0.8.3

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

@@ -0,0 +1,65 @@
+/* Base skeleton style */
+.skeleton {
+  pointer-events: none;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    background-color: #f0f0f0;
+  }
+  50% {
+    background-color: #e4e4e7;
+  }
+  100% {
+    background-color: #f0f0f0;
+  }
+}
+
+.skeleton-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background-color: #e5e7eb;
+}
+
+.skeleton-meta {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-left: 0.75rem;
+}
+
+.skeleton-line {
+  height: 12px;
+  background-color: #e5e7eb;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.skeleton-line.short {
+  width: 40%;
+}
+
+.skeleton-line.tiny {
+  width: 25%;
+}
+
+.skeleton-line.half {
+  width: 70%;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.skeleton-image {
+  height: 200px;
+  background-color: #e5e7eb;
+  border-radius: 8px;
+  margin-top: 1rem;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import './PostSkeleton.css'
+
+/**
+ * PostSkeleton component.
+ */
+export const PostSkeleton: React.FC = () => {
+  return (
+    <div className='post-card skeleton'>
+      <div className='post-header'>
+        <div className='skeleton-avatar' />
+        <div className='skeleton-meta'>
+          <div className='skeleton-line short' />
+          <div className='skeleton-line tiny' />
+        </div>
+      </div>
+      <div className='skeleton-content'>
+        <div className='skeleton-line' />
+        <div className='skeleton-line' />
+        <div className='skeleton-line half' />
+      </div>
+      <div className='skeleton-image' />
+    </div>
+  )
+}

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

@@ -0,0 +1,95 @@
+import { User } from '../../models/User'
+import { Post } from '../../models/Post'
+import { deletePost } from '../../pages/utils'
+import { PostCard } from '../PostCard/PostCard'
+import PullToRefresh from 'react-pull-to-refresh'
+import { IContainer, ILogger } from '@stone-js/core'
+import { FC, useEffect, useRef, useState } from 'react'
+import { PostSkeleton } from '../PostSkeleton/PostSkeleton'
+import { CommentWidget } from '../CommentWidget/CommentWidget'
+import { IRouter, ReactIncomingEvent } from '@stone-js/use-react'
+import { IPostService } from '../../services/contracts/IPostService'
+import { ICommentService } from '../../services/contracts/ICommentService'
+
+/**
+ * PostWidget options.
+ */
+export interface PostWidgetOptions {
+  items: Post[]
+  container: IContainer
+  event: ReactIncomingEvent
+}
+
+/**
+ * PostWidget component.
+ */
+export const PostWidget: FC<PostWidgetOptions> = ({ items, event, container }) => {
+  const limit = useRef(10)
+  const isLoading = useRef(false)
+  const loadMoreRef = useRef(null)
+  const [posts, setPosts] = useState<Post[]>(items)
+
+  const logger = container.make<ILogger>('logger')
+  const router = container.make<IRouter>('router')
+  const postService = container.make<IPostService>('postService')
+  const commentService = container.make<ICommentService>('commentService')
+
+  const handleRefresh = async (): Promise<void> => {
+    const value = await postService.list(limit.current)
+    setPosts(value)
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          limit.current += 10
+          postService
+            .list(limit.current)
+            .then(newPosts => {
+              setPosts([...posts ?? [], ...newPosts])
+              if (newPosts.length < 10) {
+                if (loadMoreRef.current !== null) observer.unobserve(loadMoreRef.current)
+              }
+            })
+            .catch(error => {
+              logger.error(error.message, { error })
+            })
+        }
+      },
+      { threshold: 1 }
+    )
+
+    if (loadMoreRef.current !== null) observer.observe(loadMoreRef.current)
+
+    return () => {
+      if (loadMoreRef.current !== null) observer.unobserve(loadMoreRef.current)
+    }
+  }, [loadMoreRef.current])
+
+  const pullTorefresh = (
+    <>
+      <PullToRefresh onRefresh={handleRefresh}>
+        {posts?.map(post =>
+          <PostCard
+            key={post.id}
+            post={post}
+            currentUser={event.getUser<User>()}
+            onEdit={() => router.navigate(`/posts/${post.id}/edit`)}
+            onDelete={deletePost.bind(this, router, logger, postService, post)}
+          >
+            <CommentWidget post={post} currentUser={event.getUser<User>() ?? {} as any} commentService={commentService} />
+          </PostCard>
+        )}
+      </PullToRefresh>
+      <div ref={loadMoreRef} style={{ height: '1px' }} />
+    </>
+  )
+
+  return (
+    <section>
+      {posts?.length === 0 && <p>No posts found.</p>}
+      {isLoading.current ? Array.from({ length: 3 }).map((_, i) => <PostSkeleton key={i} />) : pullTorefresh}
+    </section>
+  )
+}

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

@@ -0,0 +1,84 @@
+.edit-profile-page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+}
+
+.cover-preview {
+  height: 200px;
+  background: #f3f4f6;
+  border-radius: 12px 12px 0 0;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
+  color: #6b7280;
+  text-align: center;
+}
+
+.cover-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-preview {
+  margin-top: -48px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.form-group label {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #374151;
+}
+
+.form-group input,
+.form-group textarea {
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  background: #f9fafb;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  border-color: #3b82f6;
+  background: #ffffff;
+}
+
+.save-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 0.75rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.save-btn:hover {
+  background: #1e3a8a;
+}

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

@@ -0,0 +1,79 @@
+import './ProfileForm.css'
+import { User } from '../../models/User'
+import { UserAvatar } from '../UserAvatar/UserAvatar'
+import { useState, useRef, ChangeEvent, FC, FormEvent } from 'react'
+
+interface ProfileFormOptions {
+  user: User
+  onSave: (updated: {
+    name: string
+    bio?: string
+    avatarFile?: File
+    coverFile?: File
+  }) => void
+}
+
+export const ProfileForm: FC<ProfileFormOptions> = ({ user, onSave }) => {
+  const [name, setName] = useState(user.name)
+  const [bio, setBio] = useState(user.bio ?? '')
+  const [, setAvatarPreview] = useState(user.avatar ?? '')
+  const [coverPreview, setCoverPreview] = useState(user.coverImage ?? '')
+
+  const avatarInputRef = useRef<HTMLInputElement>(null)
+  const coverInputRef = useRef<HTMLInputElement>(null)
+
+  const [avatarFile, setAvatarFile] = useState<File>()
+  const [coverFile, setCoverFile] = useState<File>()
+
+  const handleAvatarChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const file = e.target.files?.[0]
+    if (file != null) {
+      setAvatarFile(file)
+      setAvatarPreview(URL.createObjectURL(file))
+    }
+  }
+
+  const handleCoverChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const file = e.target.files?.[0]
+    if (file != null) {
+      setCoverFile(file)
+      setCoverPreview(URL.createObjectURL(file))
+    }
+  }
+
+  const handleSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    onSave({ name, bio, avatarFile, coverFile })
+  }
+
+  return (
+    <form className='edit-profile-page' onSubmit={handleSubmit}>
+      <div className='cover-preview' onClick={() => coverInputRef.current?.click()}>
+        {coverPreview !== undefined ? <img src={coverPreview} alt='Cover' /> : <span>Click to add cover image</span>}
+        <input type='file' hidden ref={coverInputRef} onChange={handleCoverChange} accept='image/*' />
+      </div>
+
+      <div className='avatar-preview' onClick={() => avatarInputRef.current?.click()}>
+        <UserAvatar user={user} size={96} />
+        <input type='file' hidden ref={avatarInputRef} onChange={handleAvatarChange} accept='image/*' />
+      </div>
+
+      <div className='form-group'>
+        <label>Name</label>
+        <input value={name} onChange={(e) => setName(e.target.value)} required />
+      </div>
+
+      <div className='form-group'>
+        <label>Email</label>
+        <input value={user.email} disabled />
+      </div>
+
+      <div className='form-group'>
+        <label>Bio</label>
+        <textarea value={bio} onChange={(e) => setBio(e.target.value)} rows={4} />
+      </div>
+
+      <button type='submit' className='save-btn'>Save Changes</button>
+    </form>
+  )
+}

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

@@ -0,0 +1,110 @@
+import { FC, useState } from 'react'
+import { isNotEmpty } from '@stone-js/core'
+import { StoneLink } from '@stone-js/use-react'
+import { UserRegister, UserRegisterErrors } from '../../models/User'
+
+/**
+ * Register Form Options
+ */
+export interface RegisterFormOptions {
+  done: boolean
+  error?: UserRegisterErrors
+  onSubmit: (user: UserRegister) => Promise<void>
+}
+
+/**
+ * Register Form component.
+ *
+ * @param options - The options to create the Register Form component.
+ */
+export const RegisterForm: FC<RegisterFormOptions> = ({ onSubmit, error, done }) => {
+  // Create a reference to the user
+  const [user, setUser] = useState<UserRegister>({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  })
+
+  // Handle the form submit
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    isValid() && onSubmit(user).catch(() => {})
+  }
+
+  const isValid = (): boolean => isNotEmpty(user.name) && isNotEmpty(user.email) && isNotEmpty(user.password) && user.password === user.confirmPassword
+
+  // Handle the field change
+  const onChange = (field: keyof UserRegister) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setUser({ ...user, [field]: event.target.value })
+  }
+
+  // Create the form component
+  const formComponent = (
+    <form onSubmit={handleSubmit} className='panel'>
+      {error?.message !== undefined && <p className='alert alert-danger alert-small'>{error?.message}</p>}
+
+      <div>
+        <label htmlFor='name' className='label'>Name:</label>
+        <input
+          id='name'
+          type='text'
+          className='input'
+          placeholder='Enter your name'
+          onChange={onChange('name')} defaultValue={user.name}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='email' className='label'>Email:</label>
+        <input
+          id='email'
+          type='email'
+          className='input'
+          placeholder='Enter your email'
+          onChange={onChange('email')} defaultValue={user.email}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='password' className='label'>Password:</label>
+        <input
+          id='password'
+          type='password'
+          className='input'
+          placeholder='Enter your password'
+          onChange={onChange('password')} defaultValue={user.password}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='confirmPassword' className='label'>Confirm password:</label>
+        <input
+          id='confirmPassword'
+          type='password'
+          className='input'
+          placeholder='Confirm your password'
+          onChange={onChange('confirmPassword')} defaultValue={user.confirmPassword}
+        />
+      </div>
+
+      <button type='submit' className='button button-secondary button-full mt-24' disabled={!isValid()}>Register</button>
+    </form>
+  )
+
+  // Create the done component
+  const doneComponent = <div className='panel'><p className='alert alert-success'>Registration successful! 🎉 You can now login</p></div>
+
+  // Get the component
+  const component = done ? doneComponent : formComponent
+
+  // Render the component
+  return (
+    <div>
+      {component}
+      <p className='mt-24 text-center'>
+        <StoneLink to='/login' className='button button-primary'>Login</StoneLink>
+      </p>
+    </div>
+  )
+}

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

@@ -0,0 +1,32 @@
+.right-aside-panel {
+  position: sticky;
+  top: 72px;
+  align-self: start;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+.aside-section {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 1rem 1rem 1.5rem;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
+}
+
+.aside-section h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 1.2rem;
+}
+
+.aside-section ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+  padding: 0;
+  margin: 0;
+}

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

@@ -0,0 +1,62 @@
+import './RightAsidePanel.css'
+import { User } from '../../models/User'
+import { IContainer } from '@stone-js/core'
+import { FC, useEffect, useState } from 'react'
+import { UserBadge } from '../UserBadge/UserBadge'
+import { IUserService } from '../../services/contracts/IUserService'
+
+interface RightAsidePanelProps {
+  container: IContainer
+}
+
+export const RightAsidePanel: FC<RightAsidePanelProps> = ({ container }) => {
+  const [online, setOnline] = useState<User[]>([])
+  const [newbies, setNewbies] = useState<User[]>([])
+  const [popular, setPopular] = useState<User[]>([])
+  const userService = container.make<IUserService>('userService')
+
+  useEffect(() => {
+    userService.list(5).then(users => {
+      setOnline(users.slice(0, 5))
+      setNewbies(users.slice(0, 5))
+      setPopular(users.slice(0, 5))
+    }).catch(() => {})
+  }, [userService])
+
+  return (
+    <aside className='right-aside-panel'>
+      <div className='aside-section'>
+        <h3>New Users</h3>
+        <ul>
+          {newbies.map((user) => (
+            <li key={user.id}>
+              <UserBadge user={user} size='sm' />
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className='aside-section'>
+        <h3>Most Popular</h3>
+        <ul>
+          {popular.map((user) => (
+            <li key={user.id}>
+              <UserBadge user={user} size='sm' />
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className='aside-section'>
+        <h3>Online Now</h3>
+        <ul>
+          {online.map((user) => (
+            <li key={user.id}>
+              <UserBadge user={user} size='sm' />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </aside>
+  )
+}

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

@@ -0,0 +1,126 @@
+.settings-page {
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+  background: white;
+  border-radius: 0.75rem
+}
+
+.settings-page h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  color: #111827;
+}
+
+.settings-section {
+  margin-bottom: 2.5rem;
+}
+
+.settings-section h2 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: #1f2937;
+}
+
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 400px;
+}
+
+.settings-form input {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  background: #f9fafb;
+}
+
+.settings-form input:focus {
+  border-color: #2563eb;
+  background: #fff;
+}
+
+.settings-form button {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 0.75rem;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.settings-form button:hover {
+  background: #1e3a8a;
+}
+
+.current-email {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #6b7280;
+}
+
+.sessions-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f9fafb;
+}
+
+.sessions-list li {
+  padding: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sessions-list li:last-child {
+  border-bottom: none;
+}
+
+.session-status {
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0.3rem 0.5rem;
+  border-radius: 6px;
+  text-transform: uppercase;
+}
+
+.session-status.active {
+  color: #10b981;
+  background: #d1fae5;
+}
+
+.session-status.inactive {
+  color: #9ca3af;
+  background: #f3f4f6;
+}
+
+/* Danger zone */
+.danger-zone h2 {
+  color: #b91c1c;
+}
+
+.delete-account-btn {
+  background: #dc2626;
+  color: white;
+  border: none;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  font-weight: 600;
+  margin-top: 0.5rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.delete-account-btn:hover {
+  background: #991b1b;
+}