zidane-ui 9.0.4 → 9.1.3

package/src/onboarding/skills/SkillSourceBrowser.tsx

@@ -1,336 +0,0 @@
-/**
- * Finds skills in a repository or a pack, and picks them. A field takes any
- * source the installer takes. Until a source opens, the recommended
- * sources show as rows with their preview image. Once one opens, they turn
- * into chips above it, and the source shows its GitHub card over its
- * skills, as rows to check. The compact version, for a Settings page, keeps
- * the chips at all times and shows no preview image. Picks can span sources: the parent keeps them (a
- * wizard draft, a Settings form) and installs them.
- *
- * A source lists once per mount: switching back to it is instant. A late
- * answer for a source the user left is dropped.
- */
-import { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties, type FormEvent } from 'react';
-import {
-  githubAvatarUrl,
-  githubPreviewImageUrl,
-  RECOMMENDED_SKILL_SOURCES,
-  skillPickOf,
-  type RecommendedSkillSource,
-  type SkillPick,
-  type SkillSourceListing,
-} from 'zidane/chat/pure';
-
-import { buttonClass } from '../../components/button';
-import { ErrorNote, INPUT_CLASS } from '../../components/Form';
-import { EmptyState } from '../../components/Surface';
-import { useOnboardingLabels } from '../OnboardingProvider';
-import type { SkillSourceImages } from '../headless/host';
-import { SkeletonListing, SkillRow, SourceChips, SourceHeader, SourceRows } from './parts';
-
-/** The pictures of GitHub: owner avatars and repository previews. */
-export const GITHUB_SKILL_SOURCE_IMAGES: SkillSourceImages = {
-  avatar: (owner) => githubAvatarUrl(owner),
-  preview: (owner, repo) => githubPreviewImageUrl(owner, repo),
-};
-
-/** Above this many skills, a filter field shows over the list. */
-const FILTER_FROM = 12;
-
-type Opened =
-  | { input: string; kind: 'loading' }
-  | { input: string; kind: 'ready'; listing: SkillSourceListing }
-  | { input: string; kind: 'error'; message: string };
-
-function messageOf(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}
-
-/** Props of {@link SkillSourceBrowser}. */
-export interface SkillSourceBrowserProps {
-  /** Lists a source: `browseSkillSource` in the app, over its IPC when the UI runs elsewhere. */
-  browse: (input: string) => Promise<SkillSourceListing>;
-  /** The skills picked so far, from any source. */
-  picks: readonly SkillPick[];
-  /** Picks or unpicks skills: one row, or a whole source. */
-  onToggle: (picks: readonly SkillPick[], on: boolean) => void;
-  /** Names of the skills already installed: their rows show Installed and stay checked. */
-  installed?: readonly string[];
-  /** The sources to suggest. Defaults to `RECOMMENDED_SKILL_SOURCES`. */
-  sources?: readonly RecommendedSkillSource[];
-  /** Where the avatars and previews come from. Defaults to GitHub. */
-  images?: SkillSourceImages;
-  /** A source to open at once. */
-  initial?: string;
-  /** The small version: the recommended sources as chips, and no preview images. */
-  compact?: boolean;
-  /** Extra classes on the browser. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the skill source browser: a field, the recommended sources, and the skills of the open source.
- *
- * @param props - Component props.
- */
-export function SkillSourceBrowser({
-  browse,
-  picks,
-  onToggle,
-  installed = [],
-  sources = RECOMMENDED_SKILL_SOURCES,
-  images = GITHUB_SKILL_SOURCE_IMAGES,
-  initial,
-  compact = false,
-  className = '',
-  style,
-}: SkillSourceBrowserProps) {
-  const labels = useOnboardingLabels();
-  const id = useId();
-  const [field, setField] = useState('');
-  const [filter, setFilter] = useState('');
-  const [opened, setOpened] = useState<Opened | null>(() =>
-    initial ? { input: initial.trim(), kind: 'loading' } : null,
-  );
-  const listings = useRef(new Map<string, SkillSourceListing>());
-  const seq = useRef(0);
-  const panel = useRef<HTMLDivElement>(null);
-  const toggle = useRef(onToggle);
-  useEffect(() => {
-    toggle.current = onToggle;
-  });
-
-  // Lists a source and shows it, unless the user opened another one meanwhile.
-  const load = useCallback(
-    (text: string, n: number) => {
-      browse(text).then(
-        (listing) => {
-          listings.current.set(text, listing);
-          if (seq.current !== n) return;
-          setOpened({ input: text, kind: 'ready', listing });
-          const named = listing.skills.filter((skill) => listing.preselect?.includes(skill.name));
-          if (named.length > 0)
-            toggle.current(
-              named.map((skill) => skillPickOf(skill, listing)),
-              true,
-            );
-        },
-        (error: unknown) => {
-          if (seq.current === n) setOpened({ input: text, kind: 'error', message: messageOf(error) });
-        },
-      );
-    },
-    [browse],
-  );
-
-  const open = useCallback(
-    (input: string) => {
-      const text = input.trim();
-      if (!text) return;
-      const n = ++seq.current;
-      setFilter('');
-      const known = listings.current.get(text);
-      if (known) {
-        setOpened({ input: text, kind: 'ready', listing: known });
-        return;
-      }
-      setOpened({ input: text, kind: 'loading' });
-      load(text, n);
-    },
-    [load],
-  );
-
-  // Lists the initial source once. A late answer after unmount is dropped.
-  useEffect(() => {
-    const counter = seq;
-    if (initial?.trim()) load(initial.trim(), counter.current);
-    return () => {
-      counter.current++;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const pickKeys = useMemo(() => new Set(picks.map((pick) => pick.key)), [picks]);
-  const pickedIn = (listing: SkillSourceListing) =>
-    listing.skills.filter((skill) => pickKeys.has(skillPickOf(skill, listing).key)).length;
-  const pickedFrom = (source: RecommendedSkillSource) => {
-    const listing = listings.current.get(source.spec);
-    return listing ? pickedIn(listing) : 0;
-  };
-
-  const openSource = (source: RecommendedSkillSource) => {
-    setField('');
-    open(source.spec);
-    panel.current?.scrollIntoView?.({ block: 'nearest' });
-  };
-  const close = () => {
-    seq.current++;
-    setOpened(null);
-  };
-  const submit = (event: FormEvent) => {
-    event.preventDefault();
-    open(field);
-  };
-
-  const listing = opened?.kind === 'ready' ? opened.listing : null;
-  const selectable = listing ? listing.skills.filter((skill) => !installed.includes(skill.name)) : [];
-  const query = filter.trim().toLowerCase();
-  const shown =
-    listing && query
-      ? listing.skills.filter((skill) =>
-          [skill.name, skill.description, skill.path, skill.from ?? ''].some((text) =>
-            text.toLowerCase().includes(query),
-          ),
-        )
-      : (listing?.skills ?? []);
-  const picked = listing ? pickedIn(listing) : 0;
-  const allPicked =
-    selectable.length > 0 && selectable.every((skill) => pickKeys.has(skillPickOf(skill, listing!).key));
-
-  return (
-    <div className={`zg-source flex flex-col gap-3 min-w-0 ${className}`} style={style}>
-      <form onSubmit={submit}>
-        <label htmlFor={`${id}-source`} className="sr-only">
-          {labels.sourceField}
-        </label>
-        <div className="flex items-center gap-2">
-          <span className="relative flex-1 min-w-0">
-            <span
-              aria-hidden
-              className="i-ph-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-zg-label text-[var(--zg-text-muted)] pointer-events-none"
-            />
-            <input
-              id={`${id}-source`}
-              value={field}
-              onChange={(event) => setField(event.target.value)}
-              placeholder={labels.sourcePlaceholder}
-              spellCheck={false}
-              autoComplete="off"
-              className={`${INPUT_CLASS} pl-8 text-ellipsis`}
-            />
-          </span>
-          <button type="submit" disabled={!field.trim()} className={buttonClass({ variant: 'secondary' })}>
-            {labels.browse}
-          </button>
-        </div>
-      </form>
-
-      {opened && !compact ? (
-        <SourceChips
-          sources={sources}
-          images={images}
-          current={opened.input}
-          picked={pickedFrom}
-          onOpen={openSource}
-          onClose={close}
-        />
-      ) : (
-        <div role="group" aria-labelledby={`${id}-recommended`} className="flex flex-col gap-2">
-          <h3 id={`${id}-recommended`} className="zg-section-label m-0 px-1">
-            {labels.recommendedSources}
-          </h3>
-          {compact ? (
-            <SourceChips
-              sources={sources}
-              images={images}
-              current={opened?.input}
-              picked={pickedFrom}
-              onOpen={openSource}
-              {...(opened ? { onClose: close } : {})}
-            />
-          ) : (
-            <div className="zg-tray rounded-zg-xl p-2">
-              <SourceRows sources={sources} images={images} picked={pickedFrom} onOpen={openSource} />
-            </div>
-          )}
-        </div>
-      )}
-
-      {opened && (
-        <div
-          ref={panel}
-          className="zg-tray rounded-zg-xl p-2 flex flex-col gap-1 min-w-0"
-          aria-busy={opened.kind === 'loading'}
-        >
-          {opened.kind === 'loading' && <SkeletonListing label={labels.browsing(opened.input)} preview={!compact} />}
-          {opened.kind === 'error' && (
-            <div className="flex flex-col gap-3 p-3">
-              <ErrorNote>{labels.browseFailed(opened.message)}</ErrorNote>
-              <button
-                type="button"
-                onClick={() => open(opened.input)}
-                className={`${buttonClass({ variant: 'secondary', size: 'sm' })} self-start`}
-              >
-                {labels.retry}
-              </button>
-            </div>
-          )}
-          {listing && (
-            <>
-              <SourceHeader
-                listing={listing}
-                images={images}
-                picked={picked}
-                allPicked={allPicked}
-                preview={!compact}
-                onSelectAll={(on) =>
-                  onToggle(
-                    selectable.map((skill) => skillPickOf(skill, listing)),
-                    on,
-                  )
-                }
-              />
-              {listing.truncated && (
-                <p className="m-0 px-3 pb-2 text-zg-meta text-zg-warn">{labels.listingTruncated}</p>
-              )}
-              {listing.skills.length > FILTER_FROM && (
-                <div className="relative px-1 pb-1">
-                  <span
-                    aria-hidden
-                    className="i-ph-funnel-simple absolute left-3.5 top-1/2 -translate-y-1/2 -mt-0.5 text-zg-label text-[var(--zg-text-muted)] pointer-events-none"
-                  />
-                  <input
-                    value={filter}
-                    onChange={(event) => setFilter(event.target.value)}
-                    placeholder={labels.filterSkills}
-                    aria-label={labels.filterSkills}
-                    spellCheck={false}
-                    className={`${INPUT_CLASS} pl-8`}
-                  />
-                </div>
-              )}
-              {listing.skills.length === 0 ? (
-                <EmptyState
-                  icon="i-ph-folder-dashed"
-                  title={labels.noSkills}
-                  hint={labels.noSkillsHint}
-                  framed={false}
-                  compact
-                />
-              ) : shown.length === 0 ? (
-                <p className="m-0 px-3 py-4 text-zg-label text-[var(--zg-text-muted)]">{labels.noSkillMatch}</p>
-              ) : (
-                <div role="group" aria-label={listing.source.label} className="flex flex-col">
-                  {shown.map((skill) => {
-                    const pick = skillPickOf(skill, listing);
-                    return (
-                      <SkillRow
-                        key={pick.key}
-                        skill={skill}
-                        picked={pickKeys.has(pick.key)}
-                        installed={installed.includes(skill.name)}
-                        onToggle={(on) => onToggle([pick], on)}
-                      />
-                    );
-                  })}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}