update icons and types

berezinant · berezinant · commit f1aff6031933 · 2025-09-29T13:04:41.000+02:00
diff --git a/blocks/case-studies/card/case-studies-card.tsx b/blocks/case-studies/card/case-studies-card.tsx
@@ -1,41 +1,9 @@
-// TypeScript React
 import React from 'react';
 import cn from 'classnames';
 import styles from './case-studies-card.module.css';
+import { AndroidIcon, AppleIcon, ServerIcon, ComputerIcon, GlobusIcon } from '@rescui/icons';
+import { CaseStudyItem, CaseStudyType, isExternalCaseStudy, Platform } from '../case-studies';
 
-type Platform =
-    | 'android'
-    | 'ios'
-    | 'desktop'
-    | 'frontend'
-    | 'backend'
-    | 'compose-multi-platform';
-
-type CaseType = 'multiplatform' | 'server-side';
-
-type Media =
-    | { type: 'youtube'; url: string }
-    | { type: 'image'; path: string };
-
-interface Signature {
-    // markdown allowed (e.g., **Name Surname**, Role)
-    line1: string;
-    // plain text
-    line2: string;
-}
-
-export interface CaseCardItem {
-    logos?: [string] | [string, string]; // 0–2 logos, local paths or filenames
-    description: string;                 // markdown-enabled text
-    signature?: Signature;
-    readMoreUrl?: string;                // "Read the full story →"
-    exploreUrl?: string;                 // "Explore the stories"
-    type: CaseType;
-    platforms?: Platform[];              // platform icons row
-    media?: Media;                       // youtube or local image
-    /** Optional: mark case as selected for the home page */
-    featuredOnHome?: boolean;
-}
 
 /**
  * Resolve asset path from YAML:
@@ -44,8 +12,6 @@ export interface CaseCardItem {
  */
 const resolveAssetPath = (v?: string) => {
     if (!v) return '';
-    const lower = v.toLowerCase();
-    if (lower.startsWith('http://') || lower.startsWith('https://') || v.startsWith('/')) return v;
     return `/images/case-studies/${v}`;
 };
 
@@ -72,27 +38,46 @@ const mdToHtml = (md: string) => {
     return withLinks;
 };
 
-const badgeText: Record<CaseType, string> = {
+const badgeText: Record<CaseStudyType, string> = {
     'multiplatform': 'Kotlin Multiplatform',
-    'server-side': 'Server-side',
+    'server-side': 'Server-side'
 };
 
-const badgeClass: Record<CaseType, string> = {
+const badgeClass: Record<CaseStudyType, string> = {
     'multiplatform': 'badgeMultiplatform',
-    'server-side': 'badgeServerSide',
+    'server-side': 'badgeServerSide'
 };
 
 // Platform icon path builder. If you keep icons in (for example) /images/platforms/*.svg,
 // they’ll be resolved automatically by key. If an icon is missing, we still render the label.
-const platformIconPath = (p: Platform) => `/images/platforms/${p}.svg`;
+const getPlatformIcon = (p: Platform) => {
+    switch (p) {
+        case 'android':
+            return <AndroidIcon/>;
+        case 'ios':
+            return <AppleIcon/>;
+        case 'desktop':
+            return <ComputerIcon/>;
+        case 'frontend':
+            return <GlobusIcon/>;
+        case 'backend':
+            return <ServerIcon/>;
+        case 'compose-multiplatform':
+            return <img className={styles.platformIcon} src={'/images/platforms/compose-multiplatform.svg'}
+                        alt="Compose Multiplatform icon"
+                        onError={(e) => hideBrokenIcon(e.currentTarget)} />;
+        default:
+            return null;
+    }
+};
 
 type Props = {
-    item: CaseCardItem;
+    item: CaseStudyItem;
     className?: string;
 };
 
 export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
-    const logos = item.logos ?? [];
+    const logos = item.logo ?? [];
     const logoSrc1 = resolveAssetPath(logos[0]);
     const logoSrc2 = resolveAssetPath(logos[1]);
 
@@ -142,13 +127,11 @@ export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
                 </div>
             )}
 
-            {/* Description (markdown) */}
             <div
                 className={styles.description}
                 dangerouslySetInnerHTML={{ __html: mdToHtml(item.description) }}
             />
 
-            {/* Signature (optional) */}
             {item.signature && (
                 <div className={styles.signature}>
                     <div
@@ -163,43 +146,33 @@ export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
             {item.platforms && item.platforms.length > 0 && (
                 <div className={styles.platforms} aria-label="Platforms">
                     {item.platforms.map((p) => {
-                        const iconSrc = platformIconPath(p);
+                        const iconSrc = getPlatformIcon(p);
                         // We render icon + label; if icon path 404s, the label remains visible
                         return (
                             <span key={p} className={styles.platform}>
-                <img className={styles.platformIcon} src={iconSrc} alt={`${p} icon`} onError={(e) => hideBrokenIcon(e.currentTarget)} />
+                                <>
+                {getPlatformIcon(p)}
+                                    </>
                 <span className={styles.platformLabel}>{humanizePlatform(p)}</span>
               </span>
                         );
                     })}
                 </div>
             )}
-
-            {/* Actions */}
-            {(item.readMoreUrl || item.exploreUrl) && (
+            {(isExternalCaseStudy(item)) ? (
                 <div className={styles.actions}>
-                    {item.readMoreUrl && (
-                        <a
-                            className={styles.link}
-                            href={item.readMoreUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            Read the full story →
-                        </a>
-                    )}
-                    {item.exploreUrl && (
+                    {item.externalLink && (
                         <a
                             className={styles.button}
-                            href={item.exploreUrl}
+                            href={item.externalLink}
                             target="_blank"
                             rel="noopener noreferrer"
                         >
-                            Explore the stories
+                            {item.externalLinkText || 'Read the full story'}
                         </a>
                     )}
                 </div>
-            )}
+            ) : null}
         </article>
     );
 };
@@ -247,7 +220,7 @@ function hideBrokenIcon(img: HTMLImageElement) {
  */
 function humanizePlatform(p: Platform): string {
     switch (p) {
-        case 'compose-multi-platform':
+        case 'compose-multiplatform':
             return 'Compose Multiplatform';
         case 'frontend':
             return 'Frontend';
diff --git a/blocks/case-studies/case-studies.ts b/blocks/case-studies/case-studies.ts
@@ -1,37 +1,62 @@
+export type CaseStudyType = 'multiplatform' | 'server-side';
+
+type CaseStudyDestination = 'internal' | 'external';
+
 export type Platform =
     | 'android'
     | 'ios'
     | 'desktop'
     | 'frontend'
     | 'backend'
-    | 'compose-multi-platform';
-
-type CaseType = 'multiplatform' | 'server-side';
-
-type Media =
-    | { type: 'youtube'; url: string }
-    | { type: 'image'; path: string };
+    | 'compose-multiplatform';
 
-interface Signature {
-    // line1 — markdown (e.g., **Name Surname**, Role)
+type Signature = {
     line1: string;
-    // line2 — plain text
     line2: string;
 }
 
-interface CaseCardItem {
-    // 0–2 logos: single or pair (for KMP + Compose special card)
-    logos?: [string] | [string, string];
-    // markdown-enabled description
+type YoutubeMedia = {
+    type: 'youtube';
+    url: string;
+};
+
+type ImageMedia = {
+    type: 'image';
+    path: string;
+};
+
+type Media = YoutubeMedia | ImageMedia;
+
+interface CaseStudyItemBase {
+    id: string;
+    type: CaseStudyType;
     description: string;
+    destination: CaseStudyDestination;
+    logo?: string[];
     signature?: Signature;
-    // "Read the full story →"
-    readMoreUrl?: string;
-    // "Explore the stories"
-    exploreUrl?: string;
-    caseType: CaseType;
     platforms?: Platform[];
     media?: Media;
-    /** Optional: selected for the home page */
-    featuredOnHome?: boolean;
+    featuredOnMainPage?: boolean;
+    slug?: string;
+    externalLinkText?: string;
+}
+
+export interface ExternalDestinationCaseStudyItem extends CaseStudyItemBase {
+    destination: 'external';
+    // required when destination === 'external'
+    externalLink: string;
+}
+
+export interface InternalDestinationCaseStudyItem extends CaseStudyItemBase {
+    destination: 'internal';
+    // required when destination === 'internal'
+    pageContentPath: string;
+}
+
+export type CaseStudyItem =
+    | ExternalDestinationCaseStudyItem
+    | InternalDestinationCaseStudyItem;
+
+export function isExternalCaseStudy(item: CaseStudyItem): item is ExternalDestinationCaseStudyItem {
+    return item.destination === 'external';
 }
diff --git a/blocks/case-studies/filter/case-studies-filter.tsx b/blocks/case-studies/filter/case-studies-filter.tsx
@@ -78,7 +78,9 @@ export const CaseStudiesFilter: React.FC = () => {
                                         onChange={() => toggleCodeShared(opt.id)}
                                         mode="classic"
                                         size="m"
-                                    />
+                                    >
+                                        {opt.label}
+                                    </Checkbox>
                                 );
                             })}
                         </div>
@@ -98,7 +100,9 @@ export const CaseStudiesFilter: React.FC = () => {
                                         onChange={() => toggleUiTech(opt.id)}
                                         mode="classic"
                                         size="m"
-                                    />
+                                    >
+                                        {opt.label}
+                                    </Checkbox>
                                 );
                             })}
                         </div>
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "@rescui/colors": "^0.1.6",
     "@rescui/dropdown-menu": "^0.6.1",
     "@rescui/focus-manager": "^0.1.4",
-    "@rescui/icons": "^0.16.13",
+    "@rescui/icons": "^1.5.0",
     "@rescui/input": "^0.8.2",
     "@rescui/menu": "0.9.4",
     "@rescui/switcher": "^0.5.1",
diff --git a/yarn.lock b/yarn.lock
@@ -1840,10 +1840,10 @@
     classnames "^2.2.6"
     core-js "^3.9.1"
 
-"@rescui/icons@^0.16.13":
-  version "0.16.13"
-  resolved "https://registry.yarnpkg.com/@rescui/icons/-/icons-0.16.13.tgz#e1a64bd98d83bd8815035a3aa56ec67ecaead95e"
-  integrity sha512-ik1ZE0QNFM6Kfk8hs3GSmHMvcLLTu/Pxzi5aAy4Z5uIrnKxqXf5k3AlbKZVWS/pneeKLSWhheztcjUVtjidv+g==
+"@rescui/icons@^1.5.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@rescui/icons/-/icons-1.6.0.tgz#3bf7fbda19e0690e70cb254c583bf958a4af78f2"
+  integrity sha512-O5+ElCJ4I0tx1wSy6M7IdOuTvIjJLWL/3wNJ0LANu2jfi95cVhbMrxfvZewhOimS6/QgZXqJ7aPn2iCgagrySQ==
   dependencies:
     "@babel/runtime-corejs3" "^7.26.0"
     classnames "^2.2.6"
