@wire-dsl/web 0.0.7 → 0.1.0

package/src/monaco/wireLanguage.ts

@@ -0,0 +1,370 @@
+import * as monaco from 'monaco-editor';
+import { 
+  ALL_KEYWORDS, 
+  getCompletions, 
+  getScopeBasedCompletions,
+  COMPONENTS,
+  LAYOUTS,
+  PROPERTY_VALUES,
+  getAvailableComponents,
+  getComponentProperties,
+  getPropertyValueSuggestions,
+  determineScope,
+  type KeywordDefinition,
+} from '@wire-dsl/language-support';
+
+// Registrar el lenguaje Wire DSL en Monaco
+export function registerWireLanguage() {
+  // Registrar el lenguaje
+  monaco.languages.register({ id: 'wire' });
+
+  // Construir patrones de keywords desde language-support
+  const keywordPattern = (ALL_KEYWORDS as KeywordDefinition[])
+    .map((kw: KeywordDefinition) => kw.name)
+    .join('|');
+
+  // Definir el tokenizer
+  monaco.languages.setMonarchTokensProvider('wire', {
+    tokenizer: {
+      root: [
+        // Keywords y componentes
+        [
+          new RegExp(`\\b(${keywordPattern})\\b`),
+          'keyword',
+        ],
+        [/\b(true|false|null)\b/, 'constant'],
+        [/\b(let|const|var|if|else|for|while|return|function)\b/, 'keyword.control'],
+
+        // Strings
+        [/"(?:\\.|[^"\\])*"/, 'string'],
+        [/'(?:\\.|[^'\\])*'/, 'string'],
+
+        // Comments
+        [/\/\/.*$/, 'comment'],
+        [/\/\*/, 'comment', '@comment'],
+
+        // Numbers
+        [/\d+(\.\d+)?/, 'number'],
+
+        // Operators
+        [/[=+\-*/%&|^<>!]=?|[(){}\[\];:.,]/, 'operator'],
+
+        // Whitespace
+        [/\s+/, 'white'],
+      ],
+      comment: [
+        [/[^*/]+/, 'comment'],
+        [/\*\//, 'comment', '@pop'],
+        [/[*/]/, 'comment'],
+      ],
+    },
+  });
+
+  // Configurar color de sintaxis (theme)
+  monaco.editor.defineTheme('wire-light', {
+    base: 'vs',
+    inherit: true,
+    rules: [
+      { token: 'keyword', foreground: '7928ca', fontStyle: 'bold' },
+      { token: 'keyword.control', foreground: '7928ca', fontStyle: 'bold' },
+      { token: 'constant', foreground: 'c41a16' },
+      { token: 'string', foreground: '2a7e20' },
+      { token: 'number', foreground: '098658' },
+      { token: 'comment', foreground: '999999', fontStyle: 'italic' },
+    ],
+    colors: {
+      'editor.background': '#ffffff',
+      'editor.foreground': '#333333',
+      'editor.lineNumbersColumn.background': '#f8f8f8',
+      'editorCursor.foreground': '#333333',
+      'editor.selectionBackground': '#d4d4d450',
+      'editorLineNumber.foreground': '#999999',
+    },
+  });
+
+  // Configurar autocompletar con lógica de Wire DSL
+  monaco.languages.registerCompletionItemProvider('wire', {
+    provideCompletionItems: (model, position) => {
+      const lineText = model.getLineContent(position.lineNumber).substring(0, position.column - 1);
+      const documentText = model.getValue();
+      const cursorOffset = model.getOffsetAt(position);
+      const textBeforeCursor = documentText.substring(0, cursorOffset);
+
+      // HIGHEST PRIORITY: Check if we're in a component definition (before anything else)
+      const componentContext = detectComponentPropertyContext(lineText);
+      if (componentContext) {
+        return {
+          suggestions: getComponentPropertiesCompletions(componentContext, lineText),
+        };
+      }
+
+      // Check immediate line context (layout types, component names, property values)
+      if (/layout\s+\w*$/.test(lineText)) {
+        return {
+          suggestions: getLayoutTypeCompletions(),
+        };
+      }
+
+      if (/component\s+[A-Z]?\w*$/.test(lineText)) {
+        return {
+          suggestions: getComponentCompletions(),
+        };
+      }
+
+      if (/:\s+\w*$/.test(lineText)) {
+        return {
+          suggestions: getPropertyValueCompletions(lineText),
+        };
+      }
+
+      // Determine broader document scope
+      const scope = determineScope(textBeforeCursor);
+
+      if (scope === 'empty-file') {
+        return {
+          suggestions: getProjectOnlyCompletion(),
+        };
+      }
+      if (scope === 'inside-project') {
+        return {
+          suggestions: getProjectLevelCompletions(),
+        };
+      }
+      if (scope === 'inside-screen') {
+        return {
+          suggestions: getScreenLevelCompletions(),
+        };
+      }
+      if (scope === 'inside-layout') {
+        return {
+          suggestions: getLayoutBodyCompletions(),
+        };
+      }
+
+      return {
+        suggestions: [],
+      };
+    },
+    triggerCharacters: [' ', '{', ':', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
+  });
+
+  // Helper functions for completion logic
+  function detectComponentPropertyContext(lineText: string): string | null {
+    const match = lineText.match(/component\s+([A-Z]\w*)/);
+    if (!match) {
+      return null;
+    }
+
+    const componentName = match[1];
+
+    // Check if this is a valid component
+    if (!COMPONENTS[componentName as keyof typeof COMPONENTS]) {
+      return null;
+    }
+
+    // Get text after the component name
+    const afterComponent = lineText.substring(match.index! + match[0].length);
+
+    // If there's nothing after, or only spaces, we're at the end - show properties
+    // Or if we have properties already (word followed by colon), show properties
+    if (afterComponent.match(/^\s*$/) || afterComponent.match(/^\s+[\w-]+:/)) {
+      return componentName;
+    }
+
+    return null;
+  }
+
+  function getProjectOnlyCompletion(): any[] {
+    return [
+      {
+        label: 'project',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Define a new Wire DSL project (root element)',
+        insertText: 'project "${1:ProjectName}" {\n\t${2:}\n}',
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      }
+    ];
+  }
+
+  function getProjectLevelCompletions(): any[] {
+    return [
+      {
+        label: 'tokens',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Define design tokens',
+        insertText: 'tokens ',
+      },
+      {
+        label: 'colors',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Define custom color palette',
+        insertText: 'colors {\n\t${1:}\n}',
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      },
+      {
+        label: 'mocks',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Define mock data',
+        insertText: 'mocks {\n\t${1:}\n}',
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      },
+      {
+        label: 'screen',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Define a new screen/view',
+        insertText: 'screen ${1:ScreenName} {\n\t${2:}\n}',
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      },
+    ];
+  }
+
+  function getScreenLevelCompletions(): any[] {
+    return [
+      {
+        label: 'layout',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Define a layout for this screen',
+        insertText: 'layout ',
+      },
+    ];
+  }
+
+  function getLayoutBodyCompletions(): any[] {
+    return [
+      {
+        label: 'component',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Add a component',
+        insertText: 'component ',
+        sortText: '1-component',
+      },
+      {
+        label: 'layout',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Add a nested layout',
+        insertText: 'layout ',
+        sortText: '2-layout',
+      },
+      {
+        label: 'cell',
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: 'Define a cell in a grid',
+        insertText: 'cell span: ',
+        sortText: '3-cell',
+      },
+    ];
+  }
+
+  function getLayoutTypeCompletions(): any[] {
+    const items: any[] = [];
+
+    for (const [key, layout] of Object.entries(LAYOUTS)) {
+      const item: any = {
+        label: key,
+        kind: monaco.languages.CompletionItemKind.Keyword,
+        detail: (layout as any).description,
+      };
+
+      // Monaco no soporta choice lists como VS Code, así que usamos insertText simple
+      if (key === 'stack') {
+        item.insertText = 'stack(direction: vertical, gap: md, padding: md) {\n\t${1:}\n}';
+      } else if (key === 'grid') {
+        item.insertText = 'grid(columns: 12, gap: md) {\n\t${1:}\n}';
+      } else if (key === 'split') {
+        item.insertText = 'split(sidebar: 260, gap: md) {\n\t${1:}\n}';
+      } else if (key === 'panel') {
+        item.insertText = 'panel(padding: md) {\n\t${1:}\n}';
+      } else if (key === 'card') {
+        item.insertText = 'card(padding: md, gap: md) {\n\t${1:}\n}';
+      }
+      item.insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
+
+      items.push(item);
+    }
+
+    return items;
+  }
+
+  function getComponentCompletions(): any[] {
+    const items: any[] = [];
+
+    for (const [name, metadata] of Object.entries(COMPONENTS)) {
+      // Only uppercase names are components
+      if (!/^[A-Z]/.test(name)) continue;
+
+      const item = {
+        label: name,
+        kind: monaco.languages.CompletionItemKind.Class,
+        detail: (metadata as any).description,
+        insertText: name + ' ',
+      };
+
+      items.push(item);
+    }
+
+    return items;
+  }
+
+  function getComponentPropertiesCompletions(componentName: string, lineText: string): any[] {
+    const items: any[] = [];
+    const component = COMPONENTS[componentName as keyof typeof COMPONENTS];
+
+    if (!component) {
+      return items;
+    }
+
+    // Get component-specific properties
+    const properties = component.properties || [];
+
+    // Extract already-declared properties from the line
+    const declaredPropsMatch = lineText.matchAll(/(\w+):\s*/g);
+    const declaredProps = new Set<string>();
+    for (const match of declaredPropsMatch) {
+      declaredProps.add(match[1]);
+    }
+
+    for (const propName of properties) {
+      // Skip if this property is already declared on this line
+      if (declaredProps.has(propName)) {
+        continue;
+      }
+
+      const item = {
+        label: propName,
+        kind: monaco.languages.CompletionItemKind.Property,
+        detail: `Property of ${componentName}`,
+        insertText: propName + ': ',
+      };
+
+      items.push(item);
+    }
+
+    return items;
+  }
+
+  function getPropertyValueCompletions(lineText: string): any[] {
+    const items: any[] = [];
+
+    // Extract property name
+    const propertyMatch = lineText.match(/(\w+):\s*\w*$/);
+    if (!propertyMatch) {
+      return items;
+    }
+
+    const propertyName = propertyMatch[1];
+    const values = PROPERTY_VALUES[propertyName];
+
+    if (values && Array.isArray(values)) {
+      for (const value of values) {
+        const item = {
+          label: String(value),
+          kind: monaco.languages.CompletionItemKind.Value,
+          insertText: String(value),
+        };
+        items.push(item);
+      }
+    }
+
+    return items;
+  }
+}

package/src/store/editorStore.ts

@@ -0,0 +1,196 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface EditorFile {
+  name: string;
+  content: string;
+  isDirty: boolean;
+  lastModified: number;
+}
+
+export interface EditorState {
+  files: Map<string, EditorFile>;
+  currentFileId: string;
+  zoomLevel: number;
+  previewMode: 'all-screens' | 'single-screen';
+  selectedScreen: string | null;
+}
+
+interface EditorStore extends EditorState {
+  // File operations
+  createFile: (name: string, content?: string) => void;
+  openFile: (fileId: string) => void;
+  updateFileContent: (fileId: string, content: string) => void;
+  renameFile: (fileId: string, newName: string) => void;
+  markFileSaved: (fileId: string) => void;
+  deleteFile: (fileId: string) => void;
+  closeFile: (fileId: string) => void;
+
+  // Preview operations
+  setZoomLevel: (level: number) => void;
+  setPreviewMode: (mode: 'all-screens' | 'single-screen') => void;
+  setSelectedScreen: (screenName: string | null) => void;
+
+  // Current file shortcuts
+  getCurrentFile: () => EditorFile | null;
+}
+
+const createInitialFile = (): EditorFile => ({
+  name: 'untitled.wire',
+  content: '',
+  isDirty: false,
+  lastModified: Date.now(),
+});
+
+export const useEditorStore = create<EditorStore>()(
+  persist(
+    (set, get) => ({
+      files: new Map([['untitled-1', createInitialFile()]]),
+      currentFileId: 'untitled-1',
+      zoomLevel: 100,
+      previewMode: 'all-screens',
+      selectedScreen: null,
+
+      createFile: (name: string, content?: string) => {
+        const fileId = `file-${Date.now()}`;
+        const file: EditorFile = {
+          name,
+          content: content || '',
+          isDirty: !!content,
+          lastModified: Date.now(),
+        };
+
+        set((state) => ({
+          files: new Map(state.files).set(fileId, file),
+          currentFileId: fileId,
+        }));
+      },
+
+      openFile: (fileId: string) => {
+        set({ currentFileId: fileId });
+      },
+
+      updateFileContent: (fileId: string, content: string) => {
+        set((state) => {
+          const files = new Map(state.files);
+          const file = files.get(fileId);
+          if (file) {
+            files.set(fileId, {
+              ...file,
+              content,
+              isDirty: true,
+              lastModified: Date.now(),
+            });
+          }
+          return { files };
+        });
+      },
+
+      renameFile: (fileId: string, newName: string) => {
+        set((state) => {
+          const files = new Map(state.files);
+          const file = files.get(fileId);
+          if (file) {
+            files.set(fileId, { ...file, name: newName });
+          }
+          return { files };
+        });
+      },
+
+      markFileSaved: (fileId: string) => {
+        set((state) => {
+          const files = new Map(state.files);
+          const file = files.get(fileId);
+          if (file) {
+            files.set(fileId, { ...file, isDirty: false });
+          }
+          return { files };
+        });
+      },
+
+      deleteFile: (fileId: string) => {
+        set((state) => {
+          const files = new Map(state.files);
+          files.delete(fileId);
+
+          // Si eliminamos el archivo actual, cambiar a otro
+          let newCurrentId = state.currentFileId;
+          if (newCurrentId === fileId) {
+            const remaining = Array.from(files.keys());
+            newCurrentId = remaining.length > 0 ? remaining[0] : '';
+          }
+
+          return {
+            files,
+            currentFileId: newCurrentId,
+          };
+        });
+      },
+
+      closeFile: (fileId: string) => {
+        set((state) => {
+          if (state.currentFileId === fileId) {
+            const remaining = Array.from(state.files.keys()).filter(
+              (id) => id !== fileId
+            );
+            return {
+              currentFileId: remaining.length > 0 ? remaining[0] : '',
+            };
+          }
+          return {};
+        });
+      },
+
+      setZoomLevel: (level: number) => {
+        set({ zoomLevel: Math.max(25, Math.min(200, level)) });
+      },
+
+      setPreviewMode: (mode: 'all-screens' | 'single-screen') => {
+        set({ previewMode: mode });
+      },
+
+      setSelectedScreen: (screenName: string | null) => {
+        set({ selectedScreen: screenName });
+      },
+
+      getCurrentFile: () => {
+        const state = get();
+        return state.files.get(state.currentFileId) || null;
+      },
+    }),
+    {
+      name: 'wire-editor-store',
+      storage: {
+        getItem: (name: string) => {
+          const item = localStorage.getItem(name);
+          if (!item) return null;
+          try {
+            const parsed = JSON.parse(item);
+            return {
+              ...parsed,
+              state: {
+                ...parsed.state,
+                files: new Map(parsed.state.files || []),
+              },
+            };
+          } catch {
+            return null;
+          }
+        },
+        setItem: (name: string, value: any) => {
+          localStorage.setItem(
+            name,
+            JSON.stringify({
+              ...value,
+              state: {
+                ...value.state,
+                files: Array.from(value.state.files || new Map()),
+              },
+            })
+          );
+        },
+        removeItem: (name: string) => localStorage.removeItem(name),
+      },
+    }
+  )
+);

package/src/store/index.ts

@@ -0,0 +1,2 @@
+export { useEditorStore } from './editorStore';
+export type { EditorFile, EditorState } from './editorStore';

package/tailwind.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+export default {
     content: [
         './index.html',
         './src/**/*.{js,ts,jsx,tsx}',

package/vite.config.ts

@@ -3,8 +3,25 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
+  css: {
+    postcss: './postcss.config.mjs',
+  },
   server: {
     port: 3000,
     strictPort: false,
   },
+  optimizeDeps: {
+    exclude: ['sharp'],
+    include: ['monaco-editor', 'zustand', 'zustand/middleware', 'lucide-react'],
+  },
+  build: {
+    rollupOptions: {
+      external: ['sharp'],
+      output: {
+        globals: {
+          sharp: 'sharp',
+        },
+      },
+    },
+  },
 });