@gendive/slide 0.1.0

package/dist/theme/index.d.ts

@@ -0,0 +1,154 @@
+import { MantineColorsTuple } from '@mantine/core';
+/**
+ * @description DevDive Slide 기본 테마
+ */
+export declare const devdiveTheme: {
+    focusRing?: "auto" | "always" | "never" | undefined;
+    scale?: number | undefined;
+    fontSmoothing?: boolean | undefined;
+    white?: string | undefined;
+    black?: string | undefined;
+    colors?: {
+        [x: string & {}]: MantineColorsTuple | undefined;
+        dark?: MantineColorsTuple | undefined;
+        gray?: MantineColorsTuple | undefined;
+        red?: MantineColorsTuple | undefined;
+        pink?: MantineColorsTuple | undefined;
+        grape?: MantineColorsTuple | undefined;
+        violet?: MantineColorsTuple | undefined;
+        indigo?: MantineColorsTuple | undefined;
+        blue?: MantineColorsTuple | undefined;
+        cyan?: MantineColorsTuple | undefined;
+        green?: MantineColorsTuple | undefined;
+        lime?: MantineColorsTuple | undefined;
+        yellow?: MantineColorsTuple | undefined;
+        orange?: MantineColorsTuple | undefined;
+        teal?: MantineColorsTuple | undefined;
+    } | undefined;
+    primaryShade?: import('@mantine/core').MantineColorShade | {
+        light?: import('@mantine/core').MantineColorShade | undefined;
+        dark?: import('@mantine/core').MantineColorShade | undefined;
+    } | undefined;
+    primaryColor?: string | undefined;
+    variantColorResolver?: import('@mantine/core').VariantColorsResolver | undefined;
+    autoContrast?: boolean | undefined;
+    luminanceThreshold?: number | undefined;
+    fontFamily?: string | undefined;
+    fontFamilyMonospace?: string | undefined;
+    headings?: {
+        fontFamily?: string | undefined;
+        fontWeight?: string | undefined;
+        textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
+        sizes?: {
+            h1?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h2?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h3?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h4?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h5?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h6?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+        } | undefined;
+    } | undefined;
+    radius?: {
+        [x: string & {}]: string | undefined;
+        md?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    defaultRadius?: import('@mantine/core').MantineRadius | undefined;
+    spacing?: {
+        [x: number]: string | undefined;
+        [x: string & {}]: string | undefined;
+        md?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    fontSizes?: {
+        [x: string & {}]: string | undefined;
+        md?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    lineHeights?: {
+        [x: string & {}]: string | undefined;
+        md?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    breakpoints?: {
+        [x: string & {}]: string | undefined;
+        md?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    shadows?: {
+        [x: string & {}]: string | undefined;
+        md?: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    respectReducedMotion?: boolean | undefined;
+    cursorType?: "default" | "pointer" | undefined;
+    defaultGradient?: {
+        from?: string | undefined;
+        to?: string | undefined;
+        deg?: number | undefined;
+    } | undefined;
+    activeClassName?: string | undefined;
+    focusClassName?: string | undefined;
+    components?: {
+        [x: string]: {
+            classNames?: any;
+            styles?: any;
+            vars?: any;
+            defaultProps?: any;
+        } | undefined;
+    } | undefined;
+    other?: {
+        [x: string]: any;
+    } | undefined;
+};
+export declare const themeVars: {
+    primary: string;
+    bgMain: string;
+    uiWhite: string;
+    borderLight: string;
+    textPrimary: string;
+    textSecondary: string;
+    textMuted: string;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,202 @@
+/**
+ * @description 요소 타입 정의
+ */
+export type ElementType = 'text' | 'shape' | 'image';
+/**
+ * @description 도형 타입
+ */
+export type ShapeType = 'rect' | 'ellipse' | 'triangle' | 'line' | 'arrow';
+/**
+ * @description 텍스트 스타일 타입 (제목/소제목/본문)
+ */
+export type TextStyleType = 'title' | 'subtitle' | 'body' | 'caption';
+/**
+ * @description 텍스트 스타일 프리셋
+ */
+export declare const TEXT_STYLE_PRESETS: Record<TextStyleType, {
+    fontSize: number;
+    fontWeight: string;
+    lineHeight: number;
+}>;
+/**
+ * @description 기본 요소 인터페이스
+ */
+export interface BaseElement {
+    id: string;
+    type: ElementType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+}
+/**
+ * @description 텍스트 요소
+ */
+export interface TextElement extends BaseElement {
+    type: 'text';
+    content: string;
+    fontSize: number;
+    fontFamily: string;
+    fill: string;
+    align: 'left' | 'center' | 'right';
+    textStyle: TextStyleType;
+    fontWeight?: string;
+    lineHeight?: number;
+}
+/**
+ * @description 도형 요소
+ */
+export interface ShapeElement extends BaseElement {
+    type: 'shape';
+    shapeType: ShapeType;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    text?: string;
+    textColor?: string;
+    textSize?: number;
+    cornerRadius?: number;
+    isImagePlaceholder?: boolean;
+}
+/**
+ * @description 이미지 크롭 정보
+ */
+export interface ImageCrop {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * @description 이미지 요소
+ */
+export interface ImageElement extends BaseElement {
+    type: 'image';
+    src: string;
+    cornerRadius?: number;
+    crop?: ImageCrop;
+}
+export type SlideElement = TextElement | ShapeElement | ImageElement;
+/**
+ * @description 슬라이드
+ */
+export interface Slide {
+    id: string;
+    elements: SlideElement[];
+    background: string;
+}
+/**
+ * @description 에디터 모드
+ */
+export type EditorMode = 'select' | 'text' | 'shape';
+/**
+ * @description 사용 가능한 폰트 목록
+ */
+export declare const AVAILABLE_FONTS: readonly [{
+    readonly name: "Noto Sans KR";
+    readonly value: "Noto Sans KR";
+}, {
+    readonly name: "Inter";
+    readonly value: "Inter";
+}];
+export type FontFamily = (typeof AVAILABLE_FONTS)[number]['value'];
+/**
+ * @description 페이지 레이아웃 타입
+ */
+export type LayoutType = 'title' | 'title-subtitle' | 'content' | 'two-column' | 'image-left' | 'image-right' | 'bullets' | 'blank' | 'section-header' | 'comparison' | 'title-only' | 'content-caption' | 'picture-caption' | 'graph';
+/**
+ * @description 컨셉 테마 타입
+ */
+export type ThemeType = 'devdive' | 'minimal' | 'dark' | 'business';
+/**
+ * @description 테마 색상 정의
+ */
+export interface ThemeColors {
+    background: string;
+    primary: string;
+    text: string;
+    accent: string;
+}
+/**
+ * @description 테마 프리셋
+ */
+export declare const THEME_PRESETS: Record<ThemeType, ThemeColors>;
+/**
+ * @description 레이아웃 템플릿 정의
+ */
+export interface LayoutTemplate {
+    id: LayoutType;
+    name: string;
+    icon: string;
+    createElements: (theme: ThemeColors) => any[];
+}
+export interface SnapSettings {
+    enabled: boolean;
+    snapToCenter: boolean;
+    snapToEdges: boolean;
+    snapToElements: boolean;
+    threshold: number;
+}
+export interface HistoryState {
+    slides: Slide[];
+    currentSlideIndex: number;
+    selectedElementId: string | null;
+    selectedElementIds: string[];
+}
+/**
+ * @description 에디터 상태
+ */
+export interface EditorState {
+    slides: Slide[];
+    currentSlideIndex: number;
+    selectedElementId: string | null;
+    selectedElementIds: string[];
+    mode: EditorMode;
+    currentShapeType: ShapeType;
+    currentTextStyle: TextStyleType;
+    currentFontFamily: FontFamily;
+    clipboard: SlideElement | null;
+    snapSettings: SnapSettings;
+    history: HistoryState[];
+    historyIndex: number;
+    defaultBackground: string;
+}
+/**
+ * @description 에디터 액션
+ */
+export interface EditorActions {
+    addSlide: () => void;
+    deleteSlide: (index: number) => void;
+    selectSlide: (index: number) => void;
+    updateSlideBackground: (color: string) => void;
+    updateAllSlidesBackground: (color: string) => void;
+    addElement: (element: SlideElement) => void;
+    updateElement: (id: string, updates: Partial<SlideElement>) => void;
+    deleteElement: (id: string) => void;
+    selectElement: (id: string | null) => void;
+    selectElements: (ids: string[]) => void;
+    addToSelection: (id: string) => void;
+    clearSelection: () => void;
+    commitElementUpdate: () => void;
+    copyElement: () => void;
+    pasteElement: () => void;
+    bringToFront: () => void;
+    sendToBack: () => void;
+    bringForward: () => void;
+    sendBackward: () => void;
+    setMode: (mode: EditorMode) => void;
+    setShapeType: (shapeType: ShapeType) => void;
+    setTextStyle: (textStyle: TextStyleType) => void;
+    setFontFamily: (fontFamily: FontFamily) => void;
+    applyTemplate: (layoutId: LayoutType, theme: ThemeColors) => void;
+    addSlideWithTemplate: (layoutId: LayoutType, theme: ThemeColors) => void;
+    toggleSnap: () => void;
+    updateSnapSettings: (settings: Partial<SnapSettings>) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    resetPresentation: () => void;
+    loadSlides: (slides: Slide[], defaultBg?: string) => void;
+}

package/dist/utils/id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description 유니크 ID 생성
+ * @returns 유니크 ID 문자열
+ */
+export declare const generateId: () => string;

package/dist/utils/markdown.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @description 마크다운 파싱 유틸리티
+ * 지원: **굵게**, *기울임*, # 헤딩
+ */
+export interface MarkdownStyles {
+    fontWeight: 'normal' | 'bold';
+    fontStyle: 'normal' | 'italic';
+}
+/**
+ * @description 마크다운 텍스트를 순수 텍스트로 변환
+ */
+export declare const parseMarkdownToPlainText: (text: string) => string;
+/**
+ * @description 마크다운 텍스트에서 스타일 추출 (전체 텍스트 기준)
+ */
+export declare const parseMarkdownStyles: (text: string) => MarkdownStyles;
+/**
+ * @description 마크다운을 PPTX용 텍스트 배열로 변환
+ * PptxGenJS의 addText는 배열 형태의 텍스트를 받아 부분 스타일링 가능
+ */
+export interface PptxTextPart {
+    text: string;
+    options?: {
+        bold?: boolean;
+        italic?: boolean;
+        fontSize?: number;
+    };
+}
+export declare const parseMarkdownToPptxParts: (text: string, _baseFontSize?: number) => PptxTextPart[];

package/dist/utils/snap.d.ts

@@ -0,0 +1,20 @@
+import { SlideElement, SnapSettings } from '../types';
+export interface SnapResult {
+    x: number;
+    y: number;
+    guides: SnapGuide[];
+}
+export interface SnapGuide {
+    type: 'horizontal' | 'vertical';
+    position: number;
+    isCenter?: boolean;
+}
+/**
+ * @description 요소의 스냅 위치 계산
+ */
+export declare const calculateSnap: (element: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, otherElements: SlideElement[], settings: SnapSettings) => SnapResult;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@gendive/slide",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "DevDive PPTX Slide Editor - React component library for creating and editing presentations",
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devdive/slide.git"
+  },
+  "license": "UNLICENSED",
+  "author": "DevDive",
+  "main": "./dist/devdive-slide.cjs.js",
+  "module": "./dist/devdive-slide.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/devdive-slide.es.js",
+      "require": "./dist/devdive-slide.cjs.js"
+    },
+    "./style.css": "./dist/slide.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@mantine/core": "^7.0.0 || ^8.0.0",
+    "@mantine/hooks": "^7.0.0 || ^8.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "dexie": "^4.2.1",
+    "konva": "^10.2.0",
+    "pptxgenjs": "^4.0.1",
+    "react-colorful": "^5.6.1",
+    "react-konva": "18",
+    "react-konva-utils": "^2.0.0",
+    "use-image": "^1.1.4",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@mantine/core": "^8.3.13",
+    "@mantine/hooks": "^8.3.13",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  }
+}