Add PostEvent

lib/experimental/Information/Avatars/DateAvatar/index.stories.tsx

@@ -10,9 +10,11 @@ export default meta
 
 type Story = StoryObj<typeof DateAvatar>
 
+// Fixed date for the example stories
+const exampleDate = new Date(2024, 11, 13, 20, 0)
+
 export const Default: Story = {
   args: {
-    month: "January",
-    day: 15,
+    date: exampleDate,
   },
 }

lib/experimental/Information/Avatars/DateAvatar/index.tsx

@@ -1,18 +1,21 @@
+import { formatMonth, getDayOfMonth } from "@/lib/date"
+
 type Props = {
-  month: string
-  day: number
+  date: Date
 }
 
-export const DateAvatar = ({ month, day }: Props) => {
-  const monthName = month.slice(0, 3)
+export const DateAvatar = ({ date }: Props) => {
+  const dateDay = getDayOfMonth(date)
+  const dateMonth = formatMonth(date)
+  const monthName = dateMonth.slice(0, 3)
 
   return (
     <div className="flex h-10 w-10 flex-col items-center justify-center rounded border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary">
       <div className="pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-foreground-critical dark:text-f1-foreground-inverse-secondary">
         {monthName}
       </div>
       <div className="flex items-center justify-center text-lg font-medium leading-tight text-f1-foreground">
-        {day}
+        {dateDay}
       </div>
     </div>
   )

lib/experimental/Information/Communities/Celebration/index.stories.tsx

@@ -12,6 +12,9 @@ export default meta
 
 type Story = StoryObj<typeof Celebration>
 
+// Fixed date for the example stories
+const exampleDate = new Date(2024, 11, 13, 20, 0)
+
 export const Default: Story = {
   decorators: [
     (Story) => (
@@ -30,10 +33,7 @@ export const Default: Story = {
           src="https://github.com/josepjaume.png"
           type="birthday"
           typeLabel="Birthday"
-          date={{
-            day: 29,
-            month: "November",
-          }}
+          date={exampleDate}
         />
       </div>
       <div className="w-48">
@@ -44,10 +44,7 @@ export const Default: Story = {
           src="https://github.com/nlopin.png"
           type="anniversary"
           typeLabel="Anniversary"
-          date={{
-            day: 4,
-            month: "December",
-          }}
+          date={exampleDate}
         />
       </div>
     </>
@@ -69,10 +66,7 @@ export const NoImage: Story = {
     canReact: false,
     type: "first-day",
     typeLabel: "First day very long name",
-    date: {
-      day: 15,
-      month: "December",
-    },
+    date: exampleDate,
   },
 }
 

lib/experimental/Information/Communities/Celebration/index.tsx

@@ -17,10 +17,7 @@ export type CelebrationProps = {
   canReact?: boolean
   type?: "birthday" | "anniversary" | "first-day"
   typeLabel: string
-  date: {
-    day: number
-    month: string
-  }
+  date: Date
 }
 
 export const BaseCelebration = ({
@@ -75,7 +72,7 @@ export const BaseCelebration = ({
           </div>
         </div>
         <div className="shrink-0">
-          <DateAvatar month={date.month} day={date.day} />
+          <DateAvatar date={date} />
         </div>
       </div>
     </Link>

lib/experimental/Information/Communities/Post/PostEvent/index.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { PostEvent } from "."
+
+const meta: Meta<typeof PostEvent> = {
+  component: PostEvent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof PostEvent>
+
+// Fixed date for the example stories
+const eventDate = new Date(2024, 11, 13, 20, 0)
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="max-w-96">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: "End of the Year Dinner!",
+    place: "Poble Espanyol",
+    imageUrl: "https://cataas.com/cat",
+    date: eventDate,
+  },
+}
+
+export const NoImage: Story = {
+  decorators: [
+    (Story) => (
+      <div className="max-w-96">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: "End of the Year Dinner!",
+    place: "Poble Espanyol",
+    date: eventDate,
+  },
+}
+
+export const Skeleton: Story = {
+  decorators: [
+    (Story) => (
+      <div className="max-w-96">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {},
+  render: () => <PostEvent.Skeleton />,
+}

lib/experimental/Information/Communities/Post/PostEvent/index.tsx

@@ -0,0 +1,70 @@
+import { DateAvatar } from "@/experimental/Information/Avatars/DateAvatar"
+import { formatTime } from "@/lib/date"
+import { withSkeleton } from "@/lib/skeleton"
+import { Skeleton } from "@/ui/skeleton"
+
+type PostEventProps = {
+  title: string
+  imageUrl?: string
+  place: string
+  date: Date
+}
+
+export const BasePostEvent = ({
+  title,
+  imageUrl,
+  place,
+  date,
+}: PostEventProps) => {
+  return (
+    <div className="flex w-full flex-col gap-1 rounded-xl border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary p-1 shadow">
+      {imageUrl && (
+        <div className="relative aspect-video w-full">
+          <img
+            src={imageUrl}
+            role="presentation"
+            loading="lazy"
+            className="aspect-video h-full w-full rounded-md object-cover"
+          />
+          <Skeleton className="absolute inset-0 h-full w-full rounded-md" />
+        </div>
+      )}
+      <div className="flex h-full flex-row gap-3 p-2">
+        <div className="w-1 shrink-0 self-stretch rounded-full bg-f1-background-accent-bold" />
+        <div className="flex min-w-0 grow flex-col">
+          <span className="truncate font-medium text-f1-foreground">
+            {title}
+          </span>
+          <span className="flex min-w-0 flex-row gap-1 text-f1-foreground-secondary">
+            {formatTime(date)} · <span className="truncate">{place}</span>
+          </span>
+        </div>
+        <div className="shrink-0">
+          <DateAvatar date={date} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const PostEventSkeleton = () => (
+  <div
+    className="flex w-full flex-col gap-1 rounded-xl border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary p-1"
+    role="status"
+    aria-busy="true"
+    aria-live="polite"
+  >
+    <div>
+      <Skeleton className="aspect-video h-full w-full rounded-lg" />
+    </div>
+    <div className="flex h-full flex-row gap-3 p-2">
+      <Skeleton className="w-1 shrink-0 self-stretch rounded-full" />
+      <div className="flex grow flex-col gap-1.5 py-1">
+        <Skeleton className="mt-px h-3 w-1/2" />
+        <Skeleton className="mb-px h-3 w-1/4" />
+      </div>
+    </div>
+  </div>
+)
+
+export const PostEvent = withSkeleton(BasePostEvent, PostEventSkeleton)

lib/lib/date.ts

@@ -0,0 +1,13 @@
+import { format } from "date-fns"
+
+export function formatTime(date: Date) {
+  return format(date, "HH:mm")
+}
+
+export function formatMonth(date: Date) {
+  return format(date, "MMM")
+}
+
+export function getDayOfMonth(date: Date) {
+  return date.getDate()
+}