@zyncat/ui 0.11.0 → 0.12.0

package/src/components/expressive/youtube/glyphs.tsx

@@ -0,0 +1,235 @@
+import type { ReactElement } from 'react';
+
+export function KebabGlyph(): ReactElement {
+  return (
+    <svg className="youtube__glyph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+      <circle cx="12" cy="6" r="2" />
+      <circle cx="12" cy="12" r="2" />
+      <circle cx="12" cy="18" r="2" />
+    </svg>
+  );
+}
+
+export function VerifiedGlyph(): ReactElement {
+  return (
+    <svg className="youtube__glyph" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <circle cx="12" cy="12" r="12" fill="currentColor" />
+      <path className="youtube__glyph-knockout" d="M10.3 16.7 5.9 12.3l1.6-1.6 2.8 2.8 6.2-6.2 1.6 1.6z" />
+    </svg>
+  );
+}
+
+export function PlayGlyph(): ReactElement {
+  return (
+    <svg className="youtube__glyph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+      <path d="M7.4 4.5 19.6 12 7.4 19.5z" />
+    </svg>
+  );
+}
+
+export function PauseGlyph(): ReactElement {
+  return (
+    <svg className="youtube__glyph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+      <rect x="6.4" y="4.4" width="4" height="15.2" rx="0.5" />
+      <rect x="13.6" y="4.4" width="4" height="15.2" rx="0.5" />
+    </svg>
+  );
+}
+
+export function SpeakerGlyph(): ReactElement {
+  return (
+    <svg className="youtube__glyph" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path d="M3.4 9h3.4l4.8-4.2v14.4L6.8 15H3.4z" fill="currentColor" />
+      <path
+        d="M14.6 9.3a3.6 3.6 0 0 1 0 5.4M17.2 6.9a7.1 7.1 0 0 1 0 10.2"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function ExpandGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M4.4 4.4 11 11M4.4 10.2V4.4h5.8" />
+      <path d="M19.6 19.6 13 13M19.6 13.8v5.8h-5.8" />
+    </svg>
+  );
+}
+
+export function HeartGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 22 22"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M11 20.8 3 11.5a5 5 0 0 1 7-7l1 1 1-1a5 5 0 0 1 7 7z" />
+    </svg>
+  );
+}
+
+export function BubbleGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 22 21"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M2.5 0.9h17c.9 0 1.6.7 1.6 1.6v9.9c0 .9-.7 1.6-1.6 1.6H8l-4.4 6.1V14H2.5c-.9 0-1.6-.7-1.6-1.6V2.5c0-.9.7-1.6 1.6-1.6z" />
+      <path d="M4.6 5h12.8M4.6 9.2h8.2" />
+    </svg>
+  );
+}
+
+export function ShareGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 22 20"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M12.8 1.5 20.9 10l-8.1 8.5v-4.9c-5 .1-8.5 1.8-10.6 5 .5-7.4 4.1-11.3 10.6-11.6z" />
+    </svg>
+  );
+}
+
+export function RemixGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 22 22"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M2.9 8.1A8.4 8.4 0 0 1 17.4 5.4" />
+      <path d="M19.1 13.9A8.4 8.4 0 0 1 4.6 16.6" />
+      <path d="M17.9 1.4v4.3h-4.3M4.1 20.6v-4.3h4.3" />
+      <path d="M11 7.8v6.4M7.8 11h6.4" />
+    </svg>
+  );
+}
+
+export function ThumbUpGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 21 21"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M6 8.6 11.4 1c1.1 0 1.9 1 1.6 2.1L12 7.4h5.4c1.3 0 2.3 1.2 2 2.5l-1.4 6.6c-.2 1-1.1 1.7-2.1 1.7H6z" />
+      <rect x="1" y="8.6" width="4" height="9.6" rx="0.6" />
+    </svg>
+  );
+}
+
+export function ThumbDownGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 21 21"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M6 12.4 11.4 20c1.1 0 1.9-1 1.6-2.1L12 13.6h5.4c1.3 0 2.3-1.2 2-2.5l-1.4-6.6c-.2-1-1.1-1.7-2.1-1.7H6z" />
+      <rect x="1" y="2.8" width="4" height="9.6" rx="0.6" />
+    </svg>
+  );
+}
+
+export function ChevronLeftGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M14.6 5.4 8 12l6.6 6.6" />
+    </svg>
+  );
+}
+
+export function ChevronRightGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M9.4 5.4 16 12l-6.6 6.6" />
+    </svg>
+  );
+}
+
+export function StackGlyph(): ReactElement {
+  return (
+    <svg
+      className="youtube__glyph"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.9"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M8.4 3.6h12v12" />
+      <rect x="3.6" y="8.4" width="12" height="12" rx="1.6" />
+    </svg>
+  );
+}

package/src/components/expressive/youtube/media.tsx

@@ -0,0 +1,18 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import { cx } from '../../internal/utils/cx';
+
+export type YouTubeMedia = string | ReactNode;
+
+/** The surface actions that carry no state of their own. */
+export type YouTubeAction = 'comment' | 'share' | 'remix' | 'menu' | 'expand';
+
+function isEmpty(source: YouTubeMedia): boolean {
+  return source === undefined || source === null || source === false || source === '';
+}
+
+export function Media({ source, className }: { source?: YouTubeMedia; className?: string }): ReactElement {
+  if (typeof source === 'string') return <img className={cx('youtube__media', className)} src={source} alt="" />;
+  if (!isEmpty(source)) return <div className={cx('youtube__media', className)}>{source}</div>;
+  return <div className={cx('youtube__media', 'youtube__placeholder', className)} />;
+}

package/src/components/expressive/youtube/post.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import { useEffect, useRef, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactElement } from 'react';
+
+import { startDrag, type PanInfo } from '../../../engine';
+import { compactCount, groupedCount } from './format';
+import {
+  BubbleGlyph,
+  ChevronLeftGlyph,
+  ChevronRightGlyph,
+  KebabGlyph,
+  ShareGlyph,
+  StackGlyph,
+  ThumbDownGlyph,
+  ThumbUpGlyph,
+} from './glyphs';
+import { Media, type YouTubeAction, type YouTubeMedia } from './media';
+
+const PAGE_PROPERTY = '--youtube-carousel-page';
+const DRAG_PROPERTY = '--youtube-carousel-drag';
+const DRAGGING_ATTRIBUTE = 'data-dragging';
+const NO_DRAG = '0px';
+
+const RUBBER_BAND_DIVISOR = 6;
+const PAGE_COMMIT_RATIO = 0.25;
+const FLICK_DISTANCE_PX = 8;
+const FLICK_VELOCITY_PX_PER_S = 420;
+const FIRST_PAGE = 0;
+const ONE_PAGE = 1;
+const PRIMARY_BUTTON = 0;
+
+const CAROUSEL_LABEL = 'Post images';
+const CAROUSEL_ROLE_DESCRIPTION = 'carousel';
+const SLIDE_ROLE_DESCRIPTION = 'slide';
+const PREVIOUS_LABEL = 'Previous image';
+const NEXT_LABEL = 'Next image';
+const LIKES_LABEL = 'Likes';
+const COMMENTS_LABEL = 'Comments';
+const LIKE_LABEL = 'Like';
+const DISLIKE_LABEL = 'Dislike';
+const COMMENT_LABEL = 'Comment';
+const SHARE_LABEL = 'Share';
+const MENU_LABEL = 'More options';
+const PREVIOUS_KEY = 'ArrowLeft';
+const NEXT_KEY = 'ArrowRight';
+
+function slideLabel(index: number, total: number): string {
+  return String(index + ONE_PAGE) + ' of ' + String(total);
+}
+
+function pageStyle(page: number): CSSProperties {
+  return { [PAGE_PROPERTY]: page } as CSSProperties;
+}
+
+function bandedTravel(travel: number, page: number, lastPage: number): number {
+  const pullsBeforeStart = travel > 0 && page === FIRST_PAGE;
+  const pullsPastEnd = travel < 0 && page === lastPage;
+  return pullsBeforeStart || pullsPastEnd ? travel / RUBBER_BAND_DIVISOR : travel;
+}
+
+function settledPage(page: number, lastPage: number, travel: number, velocity: number, span: number): number {
+  const distance = Math.abs(travel);
+  const flicked = distance >= FLICK_DISTANCE_PX && Math.abs(velocity) >= FLICK_VELOCITY_PX_PER_S;
+  if (!flicked && distance < span * PAGE_COMMIT_RATIO) return page;
+  const step = travel < 0 ? ONE_PAGE : -ONE_PAGE;
+  return Math.min(lastPage, Math.max(FIRST_PAGE, page + step));
+}
+
+export interface PostSurfaceProps {
+  channel: string;
+  age: string;
+  text: string;
+  likes: number;
+  comments: number;
+  slides: YouTubeMedia[];
+  avatar?: YouTubeMedia;
+  page: number;
+  onPage: (next: number) => void;
+  liked: boolean;
+  onLikedChange: (liked: boolean) => void;
+  disliked: boolean;
+  onDislikedChange: (disliked: boolean) => void;
+  onAction?: (action: YouTubeAction) => void;
+}
+
+export function PostSurface({
+  channel,
+  age,
+  text,
+  likes,
+  comments,
+  slides,
+  avatar,
+  page,
+  onPage,
+  liked,
+  onLikedChange,
+  disliked,
+  onDislikedChange,
+  onAction,
+}: PostSurfaceProps): ReactElement {
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const detach = useRef<(() => void) | null>(null);
+  const lastPage = Math.max(FIRST_PAGE, slides.length - ONE_PAGE);
+  const paged = slides.length > ONE_PAGE;
+
+  useEffect(
+    () => () => {
+      detach.current?.();
+      detach.current = null;
+    },
+    [],
+  );
+
+  const goTo = (next: number) => {
+    const clamped = Math.min(lastPage, Math.max(FIRST_PAGE, next));
+    if (clamped !== page) onPage(clamped);
+  };
+
+  const onGrab = (event: PointerEvent<HTMLDivElement>) => {
+    const root = carouselRef.current;
+    const viewport = viewportRef.current;
+    if (!paged || !root || !viewport || event.button !== PRIMARY_BUTTON || !event.isPrimary) return;
+    const span = viewport.clientWidth;
+    detach.current?.();
+    root.setAttribute(DRAGGING_ATTRIBUTE, '');
+    detach.current = startDrag(event, {
+      onMove: (info: PanInfo) =>
+        root.style.setProperty(DRAG_PROPERTY, bandedTravel(info.offset.x, page, lastPage) + 'px'),
+      onEnd: (info: PanInfo) => {
+        detach.current = null;
+        root.style.setProperty(DRAG_PROPERTY, NO_DRAG);
+        root.removeAttribute(DRAGGING_ATTRIBUTE);
+        goTo(settledPage(page, lastPage, info.offset.x, info.velocity.x, span));
+      },
+    });
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!paged) return;
+    if (event.key === PREVIOUS_KEY) {
+      event.preventDefault();
+      goTo(page - ONE_PAGE);
+    } else if (event.key === NEXT_KEY) {
+      event.preventDefault();
+      goTo(page + ONE_PAGE);
+    }
+  };
+
+  return (
+    <>
+      <div className="youtube-post__avatar">
+        <Media source={avatar} className="youtube__avatar-media" />
+      </div>
+
+      <div className="youtube-post__body">
+        <p className="youtube-post__head">
+          <span className="youtube-post__name">{channel}</span>
+          <span className="youtube-post__time">{age}</span>
+        </p>
+
+        <p className="youtube-post__text">{text}</p>
+
+        <div className="youtube-post__carousel" ref={carouselRef} style={pageStyle(page)}>
+          <div
+            className="youtube-post__viewport"
+            ref={viewportRef}
+            role="group"
+            aria-roledescription={paged ? CAROUSEL_ROLE_DESCRIPTION : undefined}
+            aria-label={CAROUSEL_LABEL}
+            tabIndex={paged ? FIRST_PAGE : undefined}
+            onPointerDown={onGrab}
+            onKeyDown={onKeyDown}
+          >
+            <div className="youtube-post__strip">
+              {slides.map((slide, index) => (
+                <div
+                  className="youtube-post__slide"
+                  key={index}
+                  role={paged ? 'group' : undefined}
+                  aria-roledescription={paged ? SLIDE_ROLE_DESCRIPTION : undefined}
+                  aria-label={paged ? slideLabel(index, slides.length) : undefined}
+                >
+                  <Media source={slide} />
+                </div>
+              ))}
+            </div>
+            {paged && (
+              <span className="youtube-post__stack" aria-hidden="true">
+                <StackGlyph />
+              </span>
+            )}
+          </div>
+
+          {paged && page > FIRST_PAGE && (
+            <button
+              type="button"
+              className="youtube-post__arrow youtube-post__arrow--prev"
+              aria-label={PREVIOUS_LABEL}
+              onClick={() => goTo(page - ONE_PAGE)}
+            >
+              <ChevronLeftGlyph />
+            </button>
+          )}
+          {paged && page < lastPage && (
+            <button
+              type="button"
+              className="youtube-post__arrow youtube-post__arrow--next"
+              aria-label={NEXT_LABEL}
+              onClick={() => goTo(page + ONE_PAGE)}
+            >
+              <ChevronRightGlyph />
+            </button>
+          )}
+        </div>
+
+        <p className="youtube-post__actions">
+          <span className="youtube-post__action">
+            <button
+              type="button"
+              className="youtube-button youtube-post__action-glyph youtube-post__action-glyph--thumb"
+              aria-label={LIKE_LABEL}
+              aria-pressed={liked}
+              onClick={() => onLikedChange(!liked)}
+            >
+              <ThumbUpGlyph />
+            </button>
+            <span className="youtube-post__action-count">
+              <span className="youtube__sr">{LIKES_LABEL} </span>
+              {compactCount(likes + (liked ? 1 : 0))}
+            </span>
+          </span>
+          <span className="youtube-post__action youtube-post__action--dislike">
+            <button
+              type="button"
+              className="youtube-button youtube-post__action-glyph youtube-post__action-glyph--thumb"
+              aria-label={DISLIKE_LABEL}
+              aria-pressed={disliked}
+              onClick={() => onDislikedChange(!disliked)}
+            >
+              <ThumbDownGlyph />
+            </button>
+          </span>
+          <span className="youtube-post__action youtube-post__action--share">
+            <button
+              type="button"
+              className="youtube-button youtube-post__action-glyph youtube-post__action-glyph--share"
+              aria-label={SHARE_LABEL}
+              onClick={() => onAction?.('share')}
+            >
+              <ShareGlyph />
+            </button>
+          </span>
+          <span className="youtube-post__action youtube-post__action--comment">
+            <button
+              type="button"
+              className="youtube-button youtube-post__action-glyph youtube-post__action-glyph--bubble"
+              aria-label={COMMENT_LABEL}
+              onClick={() => onAction?.('comment')}
+            >
+              <BubbleGlyph />
+            </button>
+            <span className="youtube-post__action-count">
+              <span className="youtube__sr">{COMMENTS_LABEL} </span>
+              {groupedCount(comments)}
+            </span>
+          </span>
+        </p>
+      </div>
+
+      <button
+        type="button"
+        className="youtube-button youtube-post__more"
+        aria-label={MENU_LABEL}
+        onClick={() => onAction?.('menu')}
+      >
+        <KebabGlyph />
+      </button>
+    </>
+  );
+}