@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/icons/file-icon.ts

@@ -0,0 +1,154 @@
+import {
+  JDW_SCHEMA_DOCUMENT_MIME,
+  JDW_WIDGET_DOCUMENT_MIME,
+  isJdwDocumentPath,
+  isJdwSchemaDocumentPath,
+} from '../jdw/document';
+import { extensionOfPath, fileNameOfPath } from '../workbench/workspace/path';
+
+export const FILE_ICON_KINDS = [
+  'archive',
+  'config',
+  'css',
+  'default',
+  'env',
+  'folder',
+  'git',
+  'html',
+  'image',
+  'jdw',
+  'jdw-schema',
+  'javascript',
+  'json',
+  'lock',
+  'markdown',
+  'package',
+  'pdf',
+  'schema',
+  'sql',
+  'text',
+  'typescript',
+  'vue',
+  'xml',
+  'yaml',
+] as const;
+
+export type FileIconKind = (typeof FILE_ICON_KINDS)[number];
+
+export function fileIconKindForPath(path: string, mimeType?: string): FileIconKind {
+  const fileName = fileNameOfPath(path).toLowerCase();
+  const extension = extensionOfPath(path);
+
+  if (fileName === 'package.json') return 'package';
+  if (fileName.endsWith('.lock') || fileName.includes('lock')) return 'lock';
+  if (fileName.startsWith('.env')) return 'env';
+  if (fileName.startsWith('.git')) return 'git';
+  if (isJdwSchemaDocumentPath(path) || mimeType === JDW_SCHEMA_DOCUMENT_MIME) return 'jdw-schema';
+  if (isJdwDocumentPath(path) || mimeType === JDW_WIDGET_DOCUMENT_MIME) return 'jdw';
+  if (fileName.endsWith('.schema.json') || mimeType === 'application/schema+json') return 'schema';
+  if (mimeType?.startsWith('image/')) return 'image';
+  if (mimeType === 'application/pdf' || extension === 'pdf') return 'pdf';
+
+  switch (extension) {
+    case '7z':
+    case 'gz':
+    case 'rar':
+    case 'tar':
+    case 'zip':
+      return 'archive';
+    case 'css':
+    case 'less':
+    case 'scss':
+      return 'css';
+    case 'html':
+      return 'html';
+    case 'jpeg':
+    case 'jpg':
+    case 'png':
+    case 'svg':
+    case 'webp':
+      return 'image';
+    case 'cjs':
+    case 'js':
+    case 'jsx':
+    case 'mjs':
+      return 'javascript';
+    case 'json':
+      return 'json';
+    case 'md':
+    case 'mdx':
+      return 'markdown';
+    case 'sql':
+      return 'sql';
+    case 'ts':
+    case 'tsx':
+      return 'typescript';
+    case 'vue':
+      return 'vue';
+    case 'xml':
+      return 'xml';
+    case 'yaml':
+    case 'yml':
+      return 'yaml';
+    case 'ini':
+    case 'toml':
+      return 'config';
+    case 'txt':
+      return 'text';
+    default:
+      return 'default';
+  }
+}
+
+export function codiconForFileKind(kind: FileIconKind): string {
+  switch (kind) {
+    case 'archive':
+      return 'codicon-file-zip';
+    case 'config':
+      return 'codicon-settings';
+    case 'css':
+      return 'codicon-symbol-color';
+    case 'env':
+      return 'codicon-key';
+    case 'folder':
+      return 'codicon-folder';
+    case 'git':
+      return 'codicon-source-control';
+    case 'html':
+      return 'codicon-code';
+    case 'image':
+      return 'codicon-file-media';
+    case 'jdw':
+      return 'codicon-layout';
+    case 'jdw-schema':
+      return 'codicon-symbol-property';
+    case 'javascript':
+      return 'codicon-symbol-method';
+    case 'json':
+      return 'codicon-json';
+    case 'lock':
+      return 'codicon-lock';
+    case 'markdown':
+      return 'codicon-markdown';
+    case 'package':
+      return 'codicon-package';
+    case 'pdf':
+      return 'codicon-file-pdf';
+    case 'schema':
+      return 'codicon-symbol-property';
+    case 'sql':
+      return 'codicon-database';
+    case 'text':
+      return 'codicon-file-text';
+    case 'typescript':
+      return 'codicon-symbol-class';
+    case 'vue':
+      return 'codicon-symbol-object';
+    case 'xml':
+      return 'codicon-code';
+    case 'yaml':
+      return 'codicon-symbol-property';
+    default:
+      return 'codicon-file';
+  }
+}

package/src/icons/index.ts

@@ -0,0 +1,17 @@
+export { WorkbenchIcon } from './WorkbenchIcon';
+export type { WorkbenchIconProps } from './WorkbenchIcon';
+export { WorkbenchIconProvider, useWorkbenchIconResolver } from './WorkbenchIconContext';
+export type { WorkbenchIconProviderProps } from './WorkbenchIconContext';
+export {
+  isWorkbenchIconDescriptor,
+  normalizeWorkbenchIconDescriptor,
+  workbenchIconDescriptorToCodiconName,
+} from './resolveWorkbenchIcon';
+export type {
+  WorkbenchCodiconDescriptor,
+  WorkbenchIconDescriptor,
+  WorkbenchIconInput,
+  WorkbenchIconNodeDescriptor,
+  WorkbenchIconRenderProps,
+  WorkbenchIconResolver,
+} from './types';

package/src/icons/resolveWorkbenchIcon.ts

@@ -0,0 +1,48 @@
+import { isValidElement, type ReactNode } from 'react';
+import type { WorkbenchIconDescriptor, WorkbenchIconInput } from './types';
+
+export function isWorkbenchIconDescriptor(value: unknown): value is WorkbenchIconDescriptor {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const kind = (value as WorkbenchIconDescriptor).kind;
+  if (kind === 'codicon') {
+    return typeof (value as WorkbenchIconDescriptor & { name?: unknown }).name === 'string';
+  }
+
+  if (kind === 'node') {
+    return 'node' in (value as object);
+  }
+
+  return false;
+}
+
+export function normalizeWorkbenchIconDescriptor(
+  input: WorkbenchIconInput,
+): WorkbenchIconDescriptor | ReactNode {
+  if (typeof input === 'string') {
+    return { kind: 'codicon', name: input };
+  }
+
+  if (isWorkbenchIconDescriptor(input)) {
+    return input;
+  }
+
+  if (
+    isValidElement(input) ||
+    input === null ||
+    input === undefined ||
+    typeof input === 'boolean'
+  ) {
+    return input;
+  }
+
+  return input as ReactNode;
+}
+
+export function workbenchIconDescriptorToCodiconName(
+  descriptor: WorkbenchIconDescriptor,
+): string | undefined {
+  return descriptor.kind === 'codicon' ? descriptor.name : undefined;
+}

package/src/icons/types.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+/** Built-in VS Code codicon glyph (requires `@vscode/codicons` CSS in the host app). */
+export interface WorkbenchCodiconDescriptor {
+  kind: 'codicon';
+  name: string;
+}
+
+/** Host-provided icon node (SVG, image, third-party icon component, etc.). */
+export interface WorkbenchIconNodeDescriptor {
+  kind: 'node';
+  node: ReactNode;
+}
+
+export type WorkbenchIconDescriptor = WorkbenchCodiconDescriptor | WorkbenchIconNodeDescriptor;
+
+/**
+ * Icon input for workbench components.
+ * A bare string is treated as a codicon name for backward compatibility.
+ */
+export type WorkbenchIconInput = string | WorkbenchIconDescriptor | ReactNode;
+
+export interface WorkbenchIconRenderProps {
+  className?: string | undefined;
+  label?: string | undefined;
+}
+
+export type WorkbenchIconResolver = (icon: string, props: WorkbenchIconRenderProps) => ReactNode;