Files
yvcodesnap/src/types/index.ts
T

186 lines
4.7 KiB
TypeScript

export type BackgroundType = 'solid' | 'gradient';
export interface SolidBackground {
color: string;
}
export interface GradientBackground {
from: string;
to: string;
angle: number;
}
export interface Background {
type: BackgroundType;
solid: SolidBackground;
gradient: GradientBackground;
}
export interface Shadow {
blur: number;
spread: number;
color: string;
}
export interface LineHighlight {
from: number;
to: number;
style: 'focus' | 'added' | 'removed';
}
export interface CodeBlockProps {
code: string;
language: string;
theme: CodeThemeId;
fontFamily: string;
fontSize: number;
lineHeight: number;
lineNumbers: boolean;
highlights: LineHighlight[];
padding: number;
cornerRadius: number;
shadow: Shadow;
}
export interface TextProps {
text: string;
fontFamily: string;
fontSize: number;
color: string;
bold: boolean;
italic: boolean;
underline: boolean;
align: 'left' | 'center' | 'right';
background: { color: string } | null;
padding: number;
cornerRadius: number;
}
export interface ArrowProps {
style: 'straight' | 'curved';
color: string;
thickness: number;
head: 'filled' | 'outline' | 'none';
}
export type ElementType = 'code' | 'text' | 'arrow';
export interface BaseElement {
id: string;
type: ElementType;
x: number;
y: number;
rotation: number;
locked: boolean;
visible: boolean;
}
export interface CodeElement extends BaseElement {
type: 'code';
width: number;
height: number;
props: CodeBlockProps;
}
export interface TextElement extends BaseElement {
type: 'text';
props: TextProps;
}
export interface ArrowElement extends BaseElement {
type: 'arrow';
points: { x: number; y: number }[];
props: ArrowProps;
}
export type CanvasElement = CodeElement | TextElement | ArrowElement;
export interface AspectRatio {
name: string;
width: number;
height: number;
}
export interface CanvasMeta {
title: string;
aspect: string;
width: number;
height: number;
}
export interface Snap {
version: string;
meta: CanvasMeta;
background: Background;
elements: CanvasElement[];
}
export const ASPECT_RATIOS: AspectRatio[] = [
{ name: 'Square (1:1)', width: 1080, height: 1080 },
{ name: '16:9 (1920x1080)', width: 1920, height: 1080 },
{ name: '16:9 (1600x900)', width: 1600, height: 900 },
{ name: 'LinkedIn', width: 1200, height: 627 },
{ name: 'Portrait', width: 1080, height: 1350 },
{ name: 'Story', width: 1080, height: 1920 },
];
export const CODE_THEMES = [
// IntelliJ / Android Studio themes (prioritized for Kotlin)
{ id: 'andromeeda', name: 'Andromeeda', bg: '#23262e' },
{ id: 'aurora-x', name: 'Aurora X', bg: '#07090f' },
{ id: 'dark-plus', name: 'Dark+ (VS Code)', bg: '#1e1e1e' },
{ id: 'dracula', name: 'Dracula', bg: '#282a36' },
{ id: 'dracula-soft', name: 'Dracula Soft', bg: '#282a36' },
{ id: 'github-dark', name: 'GitHub Dark', bg: '#0d1117' },
{ id: 'github-dark-dimmed', name: 'GitHub Dimmed', bg: '#22272e' },
{ id: 'github-light', name: 'GitHub Light', bg: '#ffffff' },
{ id: 'light-plus', name: 'Light+ (VS Code)', bg: '#ffffff' },
{ id: 'material-theme-darker', name: 'Material Darker', bg: '#212121' },
{ id: 'material-theme-ocean', name: 'Material Ocean', bg: '#0f111a' },
{ id: 'material-theme-palenight', name: 'Material Palenight', bg: '#292d3e' },
{ id: 'min-dark', name: 'Min Dark', bg: '#1f1f1f' },
{ id: 'min-light', name: 'Min Light', bg: '#ffffff' },
{ id: 'monokai', name: 'Monokai', bg: '#272822' },
{ id: 'night-owl', name: 'Night Owl', bg: '#011627' },
{ id: 'nord', name: 'Nord', bg: '#2e3440' },
{ id: 'one-dark-pro', name: 'One Dark Pro', bg: '#282c34' },
{ id: 'poimandres', name: 'Poimandres', bg: '#1b1e28' },
{ id: 'rose-pine', name: 'Rosé Pine', bg: '#191724' },
{ id: 'rose-pine-moon', name: 'Rosé Pine Moon', bg: '#232136' },
{ id: 'slack-dark', name: 'Slack Dark', bg: '#222222' },
{ id: 'solarized-dark', name: 'Solarized Dark', bg: '#002b36' },
{ id: 'solarized-light', name: 'Solarized Light', bg: '#fdf6e3' },
{ id: 'tokyo-night', name: 'Tokyo Night', bg: '#1a1b26' },
{ id: 'vesper', name: 'Vesper', bg: '#101010' },
{ id: 'vitesse-dark', name: 'Vitesse Dark', bg: '#121212' },
{ id: 'vitesse-light', name: 'Vitesse Light', bg: '#ffffff' },
] as const;
export type CodeThemeId = typeof CODE_THEMES[number]['id'];
export const LANGUAGES = [
'kotlin',
'java',
'typescript',
'javascript',
'python',
'rust',
'go',
'swift',
'dart',
'html',
'css',
'json',
'xml',
'yaml',
'markdown',
'bash',
'sql',
'groovy',
] as const;
export const FONT_FAMILIES = {
code: ['JetBrains Mono', 'Fira Code', 'Source Code Pro', 'monospace'],
text: ['Inter', 'Roboto', 'Open Sans', 'sans-serif'],
};