@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/people/EntityPortrait.tsx

@@ -1,64 +1,64 @@
-import type { ReactElement } from 'react'
-import { styled } from 'styled-components'
-
-export interface EntityPortraitProps {
-  name: string
-  imageUrl?: string
-  kind?: 'person' | 'org'
-  size?: 'sm' | 'lg'
-  className?: string
-}
-
-const Wrap = styled.div<{ $size: 'sm' | 'lg' }>`
-  display: inline-grid;
-  place-items: center;
-  width: ${({ $size }) => ($size === 'lg' ? '72px' : '28px')};
-  height: ${({ $size }) => ($size === 'lg' ? '72px' : '28px')};
-  overflow: hidden;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: ${({ $size }) => ($size === 'lg' ? '18px' : '8px')};
-  background: color-mix(
-    in srgb,
-    var(--platform-colors-surface-hover) 74%,
-    transparent
-  );
-  color: var(--platform-colors-text-secondary);
-  font-size: ${({ $size }) => ($size === 'lg' ? '24px' : '11px')};
-  font-weight: 760;
-  letter-spacing: 0.01em;
-`
-
-const Image = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`
-
-export function EntityPortrait({
-  name,
-  imageUrl,
-  kind = 'person',
-  size = 'sm',
-  className,
-}: EntityPortraitProps): ReactElement {
-  return (
-    <Wrap
-      className={className}
-      $size={size}
-      aria-label={`${kind} image for ${name}`}
-    >
-      {imageUrl ? (
-        <Image src={imageUrl} alt="" loading="lazy" referrerPolicy="no-referrer" />
-      ) : (
-        initials(name)
-      )}
-    </Wrap>
-  )
-}
-
-function initials(name: string): string {
-  const parts = name.trim().split(/\s+/).filter(Boolean)
-  if (!parts.length) return '?'
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
-  return `${parts[0][0] ?? ''}${parts[parts.length - 1][0] ?? ''}`.toUpperCase()
-}
+import type { ReactElement } from 'react'
+import { styled } from 'styled-components'
+
+export interface EntityPortraitProps {
+  name: string
+  imageUrl?: string
+  kind?: 'person' | 'org'
+  size?: 'sm' | 'lg'
+  className?: string
+}
+
+const Wrap = styled.div<{ $size: 'sm' | 'lg' }>`
+  display: inline-grid;
+  place-items: center;
+  width: ${({ $size }) => ($size === 'lg' ? '72px' : '28px')};
+  height: ${({ $size }) => ($size === 'lg' ? '72px' : '28px')};
+  overflow: hidden;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: ${({ $size }) => ($size === 'lg' ? '18px' : '8px')};
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface-hover) 74%,
+    transparent
+  );
+  color: var(--platform-colors-text-secondary);
+  font-size: ${({ $size }) => ($size === 'lg' ? '24px' : '11px')};
+  font-weight: 760;
+  letter-spacing: 0.01em;
+`
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`
+
+export function EntityPortrait({
+  name,
+  imageUrl,
+  kind = 'person',
+  size = 'sm',
+  className,
+}: EntityPortraitProps): ReactElement {
+  return (
+    <Wrap
+      className={className}
+      $size={size}
+      aria-label={`${kind} image for ${name}`}
+    >
+      {imageUrl ? (
+        <Image src={imageUrl} alt="" loading="lazy" referrerPolicy="no-referrer" />
+      ) : (
+        initials(name)
+      )}
+    </Wrap>
+  )
+}
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (!parts.length) return '?'
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return `${parts[0][0] ?? ''}${parts[parts.length - 1][0] ?? ''}`.toUpperCase()
+}

package/src/components/common/people/LinkedDossierList.tsx

@@ -1,99 +1,99 @@
-import type { ReactElement } from 'react'
-import { styled } from 'styled-components'
-
-export interface LinkedDossierListItem {
-  id: string
-  title: string
-  summary?: string
-  appSlug: string
-  updatedAt?: string
-}
-
-export interface LinkedDossierListProps {
-  dossiers: LinkedDossierListItem[]
-  emptyMessage?: string
-}
-
-const List = styled.div`
-  display: grid;
-  gap: 0;
-`
-
-const Item = styled.div`
-  display: grid;
-  gap: 5px;
-  padding: 13px 0;
-  border-bottom: 1px solid var(--platform-colors-border);
-
-  &:last-child {
-    border-bottom: 0;
-  }
-`
-
-const Head = styled.div`
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 16px;
-`
-
-const Title = styled.div`
-  min-width: 0;
-  color: var(--platform-colors-text);
-  font-size: 15px;
-  font-weight: 720;
-  line-height: 1.35;
-`
-
-const Summary = styled.div`
-  color: var(--platform-colors-text-secondary);
-  font-size: 13px;
-  line-height: 1.5;
-`
-
-const Meta = styled.div`
-  color: var(--platform-colors-text-tertiary);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-`
-
-const Empty = styled.div`
-  color: var(--platform-colors-text-secondary);
-  font-size: 14px;
-  line-height: 1.5;
-`
-
-export function LinkedDossierList({
-  dossiers,
-  emptyMessage = 'No linked dossiers yet.',
-}: LinkedDossierListProps): ReactElement {
-  if (!dossiers.length) return <Empty>{emptyMessage}</Empty>
-
-  return (
-    <List>
-      {dossiers.map(dossier => (
-        <Item key={`${dossier.appSlug}:${dossier.id}`}>
-          <Head>
-            <Title>{dossier.title}</Title>
-            <Meta>{dossier.appSlug}</Meta>
-          </Head>
-          {dossier.summary ? <Summary>{dossier.summary}</Summary> : null}
-          {dossier.updatedAt ? <Meta>{formatDate(dossier.updatedAt)}</Meta> : null}
-        </Item>
-      ))}
-    </List>
-  )
-}
-
-function formatDate(iso: string): string {
-  const date = new Date(iso)
-  if (Number.isNaN(date.getTime())) return ''
-  return date.toLocaleDateString(undefined, {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  })
-}
+import type { ReactElement } from 'react'
+import { styled } from 'styled-components'
+
+export interface LinkedDossierListItem {
+  id: string
+  title: string
+  summary?: string
+  appSlug: string
+  updatedAt?: string
+}
+
+export interface LinkedDossierListProps {
+  dossiers: LinkedDossierListItem[]
+  emptyMessage?: string
+}
+
+const List = styled.div`
+  display: grid;
+  gap: 0;
+`
+
+const Item = styled.div`
+  display: grid;
+  gap: 5px;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`
+
+const Head = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+`
+
+const Title = styled.div`
+  min-width: 0;
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1.35;
+`
+
+const Summary = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+`
+
+const Meta = styled.div`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+
+const Empty = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+`
+
+export function LinkedDossierList({
+  dossiers,
+  emptyMessage = 'No linked dossiers yet.',
+}: LinkedDossierListProps): ReactElement {
+  if (!dossiers.length) return <Empty>{emptyMessage}</Empty>
+
+  return (
+    <List>
+      {dossiers.map(dossier => (
+        <Item key={`${dossier.appSlug}:${dossier.id}`}>
+          <Head>
+            <Title>{dossier.title}</Title>
+            <Meta>{dossier.appSlug}</Meta>
+          </Head>
+          {dossier.summary ? <Summary>{dossier.summary}</Summary> : null}
+          {dossier.updatedAt ? <Meta>{formatDate(dossier.updatedAt)}</Meta> : null}
+        </Item>
+      ))}
+    </List>
+  )
+}
+
+function formatDate(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}

package/src/components/common/people/OpportunityList.tsx

@@ -1,94 +1,94 @@
-import type { ReactElement } from 'react'
-import { styled } from 'styled-components'
-
-export type RelationshipOpportunityKind =
-  | 'follow-up'
-  | 'strengthen'
-  | 'focus'
-  | 'timing'
-  | 'context'
-
-export interface RelationshipOpportunity {
-  id: string
-  kind: RelationshipOpportunityKind
-  title: string
-  body: string
-}
-
-export interface OpportunityListProps {
-  opportunities: RelationshipOpportunity[]
-  emptyMessage?: string
-}
-
-const List = styled.div`
-  display: grid;
-  gap: 0;
-`
-
-const Item = styled.div`
-  display: grid;
-  gap: 5px;
-  padding: 13px 0;
-  border-bottom: 1px solid var(--platform-colors-border);
-
-  &:last-child {
-    border-bottom: 0;
-  }
-`
-
-const Head = styled.div`
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 16px;
-`
-
-const Title = styled.div`
-  min-width: 0;
-  color: var(--platform-colors-text);
-  font-size: 15px;
-  font-weight: 720;
-  line-height: 1.35;
-`
-
-const Kind = styled.div`
-  color: var(--platform-colors-text-tertiary);
-  font-size: 10px;
-  font-weight: 760;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  white-space: nowrap;
-`
-
-const Body = styled.div`
-  color: var(--platform-colors-text-secondary);
-  font-size: 13px;
-  line-height: 1.55;
-`
-
-const Empty = styled.div`
-  color: var(--platform-colors-text-secondary);
-  font-size: 14px;
-  line-height: 1.5;
-`
-
-export function OpportunityList({
-  opportunities,
-  emptyMessage = 'No relationship opportunities yet.',
-}: OpportunityListProps): ReactElement {
-  if (!opportunities.length) return <Empty>{emptyMessage}</Empty>
-
-  return (
-    <List>
-      {opportunities.map(opportunity => (
-        <Item key={opportunity.id}>
-          <Head>
-            <Title>{opportunity.title}</Title>
-            <Kind>{opportunity.kind}</Kind>
-          </Head>
-          <Body>{opportunity.body}</Body>
-        </Item>
-      ))}
-    </List>
-  )
-}
+import type { ReactElement } from 'react'
+import { styled } from 'styled-components'
+
+export type RelationshipOpportunityKind =
+  | 'follow-up'
+  | 'strengthen'
+  | 'focus'
+  | 'timing'
+  | 'context'
+
+export interface RelationshipOpportunity {
+  id: string
+  kind: RelationshipOpportunityKind
+  title: string
+  body: string
+}
+
+export interface OpportunityListProps {
+  opportunities: RelationshipOpportunity[]
+  emptyMessage?: string
+}
+
+const List = styled.div`
+  display: grid;
+  gap: 0;
+`
+
+const Item = styled.div`
+  display: grid;
+  gap: 5px;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`
+
+const Head = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+`
+
+const Title = styled.div`
+  min-width: 0;
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1.35;
+`
+
+const Kind = styled.div`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+
+const Body = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.55;
+`
+
+const Empty = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+`
+
+export function OpportunityList({
+  opportunities,
+  emptyMessage = 'No relationship opportunities yet.',
+}: OpportunityListProps): ReactElement {
+  if (!opportunities.length) return <Empty>{emptyMessage}</Empty>
+
+  return (
+    <List>
+      {opportunities.map(opportunity => (
+        <Item key={opportunity.id}>
+          <Head>
+            <Title>{opportunity.title}</Title>
+            <Kind>{opportunity.kind}</Kind>
+          </Head>
+          <Body>{opportunity.body}</Body>
+        </Item>
+      ))}
+    </List>
+  )
+}