@stone-js/starters 0.8.3

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

@@ -0,0 +1,61 @@
+import './LayoutHeader.css'
+import { FC, useState } from 'react'
+import { User } from '../../models/User'
+import { Dropdown } from '../Dropdown/Dropdown'
+import { UserBadge } from '../UserBadge/UserBadge'
+import { IContainer, isNotEmpty } from '@stone-js/core'
+import { ISecurityService } from '../../services/contracts/ISecurityService'
+import { IRouter, ReactIncomingEvent, StoneLink } from '@stone-js/use-react'
+
+/**
+ * LayoutHeader options.
+ */
+export interface LayoutHeaderOptions {
+  container: IContainer
+}
+
+/**
+ * LayoutHeader component.
+ */
+export const LayoutHeader: FC<LayoutHeaderOptions> = ({ container }) => {
+  const router = container.make<IRouter>('router')
+  const [showDropdown, setShowDropdown] = useState(false)
+  const securityService = container.make<ISecurityService>('securityService')
+  const user = container.make<ReactIncomingEvent>('event').getUser<User>() ?? {} as unknown as User
+
+  return (
+    <nav className='app-navbar'>
+      <div className='header-left'>
+        <StoneLink to='/' className='logo'>
+          <img src='/logo.png' alt='Stone.js Logo' />
+          <span>Stone.js</span>
+        </StoneLink>
+      </div>
+      {isNotEmpty<User>(user) && (
+        <div className='header-right'>
+          <div className='dropdown-wrapper'>
+            <UserBadge withLink={false} user={user} onClick={() => setShowDropdown(!showDropdown)} />
+            <Dropdown show={showDropdown} onClose={() => setShowDropdown(false)}>
+              <ul className='dropdown-menu'>
+                <li><StoneLink to={`/users/${user.id}`}>Show Profile</StoneLink></li>
+                <li><StoneLink to={`/users/${user.id}/edit`}>Manage Profile</StoneLink></li>
+                <li><button onClick={logout.bind(this, router, securityService)}>Logout</button></li>
+              </ul>
+            </Dropdown>
+          </div>
+        </div>
+      )}
+    </nav>
+  )
+}
+
+/**
+ * Logout the user.
+ */
+export function logout (router: IRouter, securityService: ISecurityService): void {
+  if (window.confirm('Are you sure you want to logout?')) {
+    securityService.logout().then(() => {
+      router.navigate('/', true)
+    }).catch(() => {})
+  }
+}

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

@@ -0,0 +1,25 @@
+.main-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.nav-btn {
+  font-size: 1.1rem;
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 600;
+  border-radius: 9999px;
+  color: #1f2937;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+}
+
+.nav-btn.selected {
+  font-weight: bolder;
+  background-color: #fff;
+}
+
+.nav-btn:hover {
+  background-color: #fdfeff;
+}

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

@@ -0,0 +1,32 @@
+import './LayoutLeftMenu.css'
+import { FC } from 'react'
+import { User } from '../../models/User'
+import { IContainer, isNotEmpty } from '@stone-js/core'
+import { ReactIncomingEvent, StoneLink } from '@stone-js/use-react'
+
+/**
+ * LayoutLeftMenu options.
+ */
+export interface LayoutLeftMenuOptions {
+  container: IContainer
+}
+
+/**
+ * LayoutLeftMenu component.
+ */
+export const LayoutLeftMenu: FC<LayoutLeftMenuOptions> = ({ container }) => {
+  const user = container.make<ReactIncomingEvent>('event').getUser<User>() ?? {} as unknown as User
+
+  return (
+    <nav className='main-nav'>
+      <StoneLink to='/' className='nav-btn'>Home</StoneLink>
+      <StoneLink to='/users' className='nav-btn'>Users</StoneLink>
+      {isNotEmpty<User>(user) && (
+        <>
+          <StoneLink to={`/users/${user.id}`} className='nav-btn'>Profile</StoneLink>
+          <StoneLink to='/settings' className='nav-btn'>Settings</StoneLink>
+        </>
+      )}
+    </nav>
+  )
+}

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

@@ -0,0 +1,41 @@
+.dropdown-menu li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dropdown-menu li.unread {
+  font-weight: 600;
+  background: #eef2ff;
+}
+
+.dropdown-menu li.read {
+  font-weight: 400;
+  background: white;
+}
+
+.notification-time {
+  font-size: 0.7rem;
+  color: #888;
+}
+
+.notification-button {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.notification-count {
+  position: absolute;
+  top: -4px;
+  right: -6px;
+  background-color: #ef4444;
+  color: white;
+  font-size: 0.65rem;
+  padding: 2px 5px;
+  border-radius: 9999px;
+  font-weight: bold;
+}

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

@@ -0,0 +1,63 @@
+import './NotificationBadge.css'
+import { FC, useState } from 'react'
+import { dateTimeFromNow } from '../../utils'
+import { Dropdown } from '../Dropdown/Dropdown'
+import { StoneLink } from '@stone-js/use-react'
+
+interface Notification {
+  id: number
+  message: string
+  link?: string
+  createdAt: number
+  read?: boolean
+}
+
+interface NotificationBadgeOptions {
+  notifications: Notification[]
+}
+
+export const NotificationBadge: FC<NotificationBadgeOptions> = ({ notifications: initial }) => {
+  const [open, setOpen] = useState(false)
+  const [notifications, setNotifications] = useState(initial)
+
+  const handleClick = (id: number): void => {
+    setNotifications(prev =>
+      prev.map(n => (n.id === id ? { ...n, read: true } : n))
+    )
+  }
+
+  const unreadCount = notifications.filter(n => n.read !== undefined).length
+
+  return (
+    <div className='dropdown-wrapper'>
+      <button className='notification-button' onClick={() => setOpen(!open)}>
+        🔔
+        {unreadCount > 0 && (
+          <span className='notification-count'>{unreadCount}</span>
+        )}
+      </button>
+      <Dropdown show={open} onClose={() => setOpen(false)} align='right'>
+        <ul className='dropdown-menu'>
+          {notifications.length === 0
+            ? (
+              <li>No new notifications</li>
+              )
+            : (
+                notifications.map(n => (
+                  <li
+                    key={n.id}
+                    className={n.read !== undefined ? 'read' : 'unread'}
+                    onClick={() => handleClick(n.id)}
+                  >
+                    {n.link !== undefined ? <StoneLink to={n.link}>{n.message}</StoneLink> : n.message}
+                    <span className='notification-time'>
+                      {dateTimeFromNow(n.createdAt)}
+                    </span>
+                  </li>
+                ))
+              )}
+        </ul>
+      </Dropdown>
+    </div>
+  )
+}

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

@@ -0,0 +1,129 @@
+.post-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  padding: 1rem;
+  margin-top: 1.5rem;
+  transition: box-shadow 0.2s ease;
+  max-width: 100%;
+}
+
+.post-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.post-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.post-content p {
+  margin: 0.5rem 0;
+  line-height: 1.5;
+  color: #1c1e21;
+}
+
+.post-image {
+  margin-top: 0.75rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.post-image img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 8px;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .post-card {
+    padding: 0.75rem;
+  }
+
+  .post-avatar {
+    width: 36px;
+    height: 36px;
+  }
+
+  .post-author strong {
+    font-size: 0.875rem;
+  }
+
+  .post-author span {
+    font-size: 0.7rem;
+  }
+}
+
+.post-actions {
+  margin-left: auto;
+  position: relative;
+}
+
+.menu-toggle {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  color: #666;
+}
+
+.post-dropdown {
+  position: absolute;
+  top: 1.5rem;
+  right: 0;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  list-style: none;
+  padding: 0.25rem 0;
+  width: 140px;
+  z-index: 20;
+}
+
+.post-dropdown li {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #333;
+}
+
+.post-dropdown li:hover {
+  background: #f0f2f5;
+}
+
+/* Post Footer Buttons */
+.post-footer {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.post-comments {
+  margin-top: 0.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.post-action {
+  background: none;
+  border: none;
+  color: #555;
+  font-size: 0.9rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.post-action:hover {
+  background-color: #f0f2f5;
+  color: #111;
+}

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

@@ -0,0 +1,65 @@
+import { Post } from '../../models/Post'
+import { User } from '../../models/User'
+import { FC, ReactNode, useState } from 'react'
+import { UserBadge } from '../UserBadge/UserBadge'
+
+/**
+ * PostCard options.
+ */
+interface PostCardOptions {
+  post: Post
+  currentUser?: User
+  children: ReactNode
+  onEdit?: (post: Post) => void
+  onDelete: (post: Post) => Promise<void>
+}
+
+/**
+ * PostCard component.
+ */
+export const PostCard: FC<PostCardOptions> = ({ children, post, currentUser, onEdit, onDelete }) => {
+  const [showMenu, setShowMenu] = useState(false)
+  const [showComment, setShowComment] = useState(post.commentsCount > 0)
+
+  const isOwner = post.authorId === currentUser?.id
+
+  const deletePost = (): void => {
+    void onDelete?.(post).catch(() => {})
+  }
+
+  return (
+    <article className='post-card'>
+      <header className='post-header'>
+        <UserBadge user={post.author} createdAt={post.createdAt} />
+        {isOwner && (
+          <div className='post-actions'>
+            <button className='menu-toggle' onClick={() => setShowMenu(!showMenu)}>⋮</button>
+            {showMenu && (
+              <ul className='post-dropdown'>
+                <li onClick={() => onEdit?.(post)}>✏️ Edit</li>
+                <li onClick={deletePost}>🗑️ Delete</li>
+              </ul>
+            )}
+          </div>
+        )}
+      </header>
+
+      <div className='post-content'>
+        {post.content !== undefined && <p>{post.content}</p>}
+        {post.imagePath !== undefined && (
+          <div className='post-image'>
+            <img src={post.imagePath} alt='Post' />
+          </div>
+        )}
+      </div>
+
+      <footer className='post-footer'>
+        <button className='post-action'>👍 Like</button>
+        <button className='post-action' onClick={() => setShowComment(!showComment)}>💬 Comment</button>
+        <button className='post-action'>🔁 Share</button>
+      </footer>
+
+      {showComment && <div className='post-comments'>{children}</div>}
+    </article>
+  )
+}

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

@@ -0,0 +1,92 @@
+.post-form {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 1rem 1.25rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 100%;
+}
+
+.post-textarea {
+  resize: none;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  width: 100%;
+  min-height: 60px;
+  background: #f9fafb;
+  outline: none;
+}
+
+.post-textarea:focus {
+  border-color: #2563eb;
+  background-color: #ffffff;
+}
+
+.image-preview {
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.image-preview img {
+  max-width: 100%;
+  border-radius: 8px;
+  margin-top: 0.5rem;
+}
+
+.remove-image-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(255, 255, 255, 0.85);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 0.2rem 0.5rem;
+  color: #111;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.post-form-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.upload-btn {
+  cursor: pointer;
+  color: #2563eb;
+  font-weight: 500;
+  font-size: 0.95rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.submit-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+  background: #1e40af;
+}
+
+.submit-btn:disabled {
+  background: #cbd5e1;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,76 @@
+import './PostForm.css'
+import { PostInput } from '../../models/Post'
+import { ChangeEvent, FC, FormEvent, useRef, useState } from 'react'
+
+/**
+ * Post Form Options
+ */
+export interface PostFormOptions {
+  post?: PostInput
+  onSubmit: (post: PostInput) => Promise<void>
+}
+
+export const PostForm: FC<PostFormOptions> = ({ post, onSubmit }) => {
+  const [text, setText] = useState(post?.content ?? '')
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [imagePreview, setImagePreview] = useState<string | undefined>(undefined)
+
+  const handleImageChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const file = e.target.files?.[0]
+    if (file != null) {
+      const reader = new FileReader()
+      reader.onloadend = () => setImagePreview(reader.result as string)
+      reader.readAsDataURL(file)
+    }
+  }
+
+  const handleRemoveImage = (): void => {
+    setImagePreview(undefined)
+    if (fileInputRef.current != null) fileInputRef.current.value = ''
+  }
+
+  const handleSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    // Handle form submission logic here
+    onSubmit({
+      content: text,
+      title: text.substring(0, 32) // Assuming title is the first 32 characters of content
+      // image: imagePreview ? { url: imagePreview } : undefined
+    }).catch(() => {})
+    setText('')
+    handleRemoveImage()
+  }
+
+  return (
+    <form className='post-form' onSubmit={handleSubmit}>
+      <textarea
+        className='post-textarea'
+        placeholder="What's on your mind?"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        rows={3}
+      />
+      {imagePreview !== undefined && (
+        <div className='image-preview'>
+          <img src={imagePreview} alt='Preview' />
+          <button type='button' onClick={handleRemoveImage} className='remove-image-btn'>✕</button>
+        </div>
+      )}
+      <div className='post-form-footer'>
+        <label className='upload-btn'>
+          📷 Photo
+          <input
+            type='file'
+            accept='image/*'
+            onChange={handleImageChange}
+            ref={fileInputRef}
+            hidden
+          />
+        </label>
+        <button className='submit-btn' type='submit' disabled={text.trim().length === 0 && imagePreview === undefined}>
+          Publish
+        </button>
+      </div>
+    </form>
+  )
+}