Refactor code structure for improved readability and maintainability
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -0,0 +1,27 @@
|
||||
name: npm test
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches:
|
||||
- '**'
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
test_pull_request:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
cache: 'yarn'
|
||||
cache-dependency-path: '**/yarn.lock'
|
||||
- name: Install dependencies
|
||||
run: yarn
|
||||
- name: Run build
|
||||
run: npm run build
|
||||
- name: Run tests
|
||||
run: npm test
|
||||
@@ -0,0 +1,4 @@
|
||||
.vscode
|
||||
node_modules
|
||||
dist
|
||||
.env
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,35 @@
|
||||
/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
|
||||
const config = {
|
||||
printWidth: 100,
|
||||
singleQuote: true,
|
||||
trailingComma: 'es5',
|
||||
plugins: ['@ianvs/prettier-plugin-sort-imports'],
|
||||
importOrder: [
|
||||
'.*styles.css$',
|
||||
'',
|
||||
'dayjs',
|
||||
'^react$',
|
||||
'^next$',
|
||||
'^next/.*$',
|
||||
'<BUILTIN_MODULES>',
|
||||
'<THIRD_PARTY_MODULES>',
|
||||
'^@mantine/(.*)$',
|
||||
'^@mantinex/(.*)$',
|
||||
'^@mantine-tests/(.*)$',
|
||||
'^@docs/(.*)$',
|
||||
'^@/.*$',
|
||||
'^../(?!.*.css$).*$',
|
||||
'^./(?!.*.css$).*$',
|
||||
'\\.css$',
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
files: '*.mdx',
|
||||
options: {
|
||||
printWidth: 70,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
core: {
|
||||
disableWhatsNewNotifications: true,
|
||||
disableTelemetry: true,
|
||||
enableCrashReports: false,
|
||||
},
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
|
||||
addons: ['@storybook/addon-themes'],
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,40 @@
|
||||
import '@mantine/core/styles.css';
|
||||
|
||||
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
|
||||
import { theme } from '../src/theme';
|
||||
|
||||
export const parameters = {
|
||||
layout: 'fullscreen',
|
||||
options: {
|
||||
showPanel: false,
|
||||
storySort: (a: any, b: any) => a.title.localeCompare(b.title, undefined, { numeric: true }),
|
||||
},
|
||||
backgrounds: { disable: true },
|
||||
};
|
||||
|
||||
export const globalTypes = {
|
||||
theme: {
|
||||
name: 'Theme',
|
||||
description: 'Mantine color scheme',
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
icon: 'mirror',
|
||||
items: [
|
||||
{ value: 'light', title: 'Light' },
|
||||
{ value: 'dark', title: 'Dark' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const decorators = [
|
||||
(renderStory: any, context: any) => {
|
||||
const scheme = (context.globals.theme || 'light') as 'light' | 'dark';
|
||||
return (
|
||||
<MantineProvider theme={theme} forceColorScheme={scheme}>
|
||||
<ColorSchemeScript />
|
||||
{renderStory()}
|
||||
</MantineProvider>
|
||||
);
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1 @@
|
||||
dist
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard-scss"],
|
||||
"rules": {
|
||||
"custom-property-pattern": null,
|
||||
"selector-class-pattern": null,
|
||||
"scss/no-duplicate-mixins": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"alpha-value-notation": null,
|
||||
"custom-property-empty-line-before": null,
|
||||
"property-no-vendor-prefix": null,
|
||||
"color-function-notation": null,
|
||||
"length-zero-no-unit": null,
|
||||
"selector-not-notation": null,
|
||||
"no-descending-specificity": null,
|
||||
"comment-empty-line-before": null,
|
||||
"scss/at-mixin-pattern": null,
|
||||
"scss/at-rule-no-unknown": null,
|
||||
"value-keyword-case": null,
|
||||
"media-feature-range-notation": null,
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoClasses": ["global"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
+942
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-4.10.3.cjs
|
||||
@@ -0,0 +1,218 @@
|
||||
# DockView Implementation con Mantine
|
||||
|
||||
Esta implementación integra **DockView** con **Mantine** para crear una interfaz de usuario modular y flexible con paneles que se pueden mover, redimensionar e interactuar entre ellos.
|
||||
|
||||
## 🚀 Características
|
||||
|
||||
- **Paneles Modulares**: Docks independientes que se pueden mover y reorganizar
|
||||
- **Comunicación Entre Docks**: Los docks pueden intercambiar información entre sí
|
||||
- **Interfaz Responsive**: Se adapta a diferentes tamaños de pantalla
|
||||
- **Temas Personalizados**: Integración completa con el sistema de temas de Mantine
|
||||
- **TypeScript**: Tipado completo para mayor seguridad
|
||||
|
||||
## 📁 Estructura de Archivos
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/
|
||||
│ ├── DockViewMain.tsx # Componente principal de DockView
|
||||
│ ├── dockview.css # Estilos personalizados
|
||||
│ └── docks/ # Componentes de dock individuales
|
||||
│ ├── TaskDock.tsx # Gestor de tareas
|
||||
│ ├── PropertiesDock.tsx # Panel de propiedades
|
||||
│ ├── ConsoleDock.tsx # Consola de logs
|
||||
│ └── FileExplorerDock.tsx # Explorador de archivos
|
||||
└── pages/
|
||||
└── DockView.page.tsx # Página dedicada a DockView
|
||||
```
|
||||
|
||||
## 🎯 Docks Disponibles
|
||||
|
||||
### 1. TaskDock (Gestor de Tareas)
|
||||
- Crear, editar y eliminar tareas
|
||||
- Marcar tareas como completadas
|
||||
- Notificaciones a otros docks cuando cambian las tareas
|
||||
|
||||
### 2. PropertiesDock (Panel de Propiedades)
|
||||
- Editar propiedades de elementos seleccionados
|
||||
- Controles de color, opacidad, tamaño
|
||||
- Vista previa en tiempo real
|
||||
|
||||
### 3. ConsoleDock (Consola)
|
||||
- Mostrar logs del sistema
|
||||
- Exportar logs a archivo
|
||||
- Filtrado por tipo (info, warning, error, success)
|
||||
|
||||
### 4. FileExplorerDock (Explorador de Archivos)
|
||||
- Navegación por estructura de archivos
|
||||
- Crear/eliminar archivos y carpetas
|
||||
- Notificar selección de archivos a otros docks
|
||||
|
||||
## 🔄 Comunicación Entre Docks
|
||||
|
||||
Los docks se comunican a través de un sistema de contexto compartido:
|
||||
|
||||
```typescript
|
||||
interface DockCommunicationContext {
|
||||
selectedFile: any;
|
||||
properties: any;
|
||||
tasks: any[];
|
||||
logs: any[];
|
||||
updateSelectedFile: (file: any) => void;
|
||||
updateProperties: (props: any) => void;
|
||||
updateTasks: (tasks: any[]) => void;
|
||||
addLog: (log: any) => void;
|
||||
}
|
||||
```
|
||||
|
||||
### Ejemplo de Comunicación
|
||||
Cuando seleccionas un archivo en el FileExplorerDock:
|
||||
1. Se actualiza `selectedFile` en el contexto
|
||||
2. Se envía un log a ConsoleDock
|
||||
3. PropertiesDock puede mostrar propiedades del archivo seleccionado
|
||||
|
||||
## 🎨 Personalización
|
||||
|
||||
### Temas
|
||||
Los estilos están definidos en `dockview.css` y siguen las variables CSS de Mantine:
|
||||
|
||||
```css
|
||||
.dockview-theme-light {
|
||||
--dv-activecontainer-border: #228be6;
|
||||
--dv-tab-active-color: #228be6;
|
||||
--dv-tab-active-border: #228be6;
|
||||
}
|
||||
```
|
||||
|
||||
### Agregar Nuevos Docks
|
||||
|
||||
1. Crear el componente del dock en `src/components/docks/`
|
||||
2. Crear un wrapper component para la integración
|
||||
3. Registrar en el objeto `components` de `DockViewMain.tsx`
|
||||
4. Agregar al layout inicial en `onReady`
|
||||
|
||||
```typescript
|
||||
// Nuevo dock
|
||||
const MyCustomDockWrapper = (props: IDockviewPanelProps) => {
|
||||
return <MyCustomDock onDataChange={handleDataChange} />;
|
||||
};
|
||||
|
||||
// Registrar
|
||||
const components = {
|
||||
tasks: TaskDockWrapper,
|
||||
properties: PropertiesDockWrapper,
|
||||
console: ConsoleDockWrapper,
|
||||
fileExplorer: FileExplorerDockWrapper,
|
||||
myCustom: MyCustomDockWrapper, // Nuevo dock
|
||||
};
|
||||
```
|
||||
|
||||
## 🛠️ Uso
|
||||
|
||||
### Iniciar la aplicación
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Navegar a DockView
|
||||
- Visita `http://localhost:5174/`
|
||||
- Haz clic en "Abrir DockView"
|
||||
- O navega directamente a `http://localhost:5174/dockview`
|
||||
|
||||
### Interacciones Disponibles
|
||||
- **Arrastrar pestañas**: Reorganiza los paneles
|
||||
- **Redimensionar**: Arrastra los separadores entre paneles
|
||||
- **Cerrar paneles**: Usa el botón X en las pestañas
|
||||
- **Crear nuevos paneles**: (Funcionalidad extendible)
|
||||
|
||||
## 📝 Configuración del Layout
|
||||
|
||||
El layout inicial se configura en el método `onReady`:
|
||||
|
||||
```typescript
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
// Panel principal (izquierda)
|
||||
const panel1 = event.api.addPanel({
|
||||
id: 'file-explorer',
|
||||
component: 'fileExplorer',
|
||||
title: 'Explorador',
|
||||
});
|
||||
|
||||
// Panel a la derecha
|
||||
const panel2 = event.api.addPanel({
|
||||
id: 'properties',
|
||||
component: 'properties',
|
||||
title: 'Propiedades',
|
||||
position: { direction: 'right', referencePanel: panel1 },
|
||||
});
|
||||
|
||||
// Más paneles...
|
||||
};
|
||||
```
|
||||
|
||||
## 🔧 Configuración Avanzada
|
||||
|
||||
### Estado Persistente
|
||||
Para guardar el estado del layout entre sesiones:
|
||||
|
||||
```typescript
|
||||
// Guardar estado
|
||||
const layoutState = api.toJSON();
|
||||
localStorage.setItem('dockview-layout', JSON.stringify(layoutState));
|
||||
|
||||
// Restaurar estado
|
||||
const savedState = localStorage.getItem('dockview-layout');
|
||||
if (savedState) {
|
||||
api.fromJSON(JSON.parse(savedState));
|
||||
}
|
||||
```
|
||||
|
||||
### Eventos Personalizados
|
||||
```typescript
|
||||
// Escuchar cambios en el layout
|
||||
api.onDidLayoutChange(() => {
|
||||
console.log('Layout changed');
|
||||
});
|
||||
|
||||
// Escuchar cuando se activa un panel
|
||||
api.onDidActiveGroupChange((event) => {
|
||||
console.log('Active group changed:', event.group);
|
||||
});
|
||||
```
|
||||
|
||||
## 🐛 Solución de Problemas
|
||||
|
||||
### Problemas Comunes
|
||||
|
||||
1. **Paneles no se muestran correctamente**
|
||||
- Verifica que el componente esté registrado en `components`
|
||||
- Asegúrate de que el wrapper component retorne JSX válido
|
||||
|
||||
2. **Comunicación entre docks no funciona**
|
||||
- Verifica que los callbacks estén pasándose correctamente
|
||||
- Revisa que el contexto se actualice en `useEffect`
|
||||
|
||||
3. **Estilos no se aplican**
|
||||
- Asegúrate de importar `dockview.css`
|
||||
- Verifica que las variables CSS estén definidas
|
||||
|
||||
### Debugging
|
||||
```typescript
|
||||
// Agregar logs para debugging
|
||||
console.log('Dock state:', dockCommunication);
|
||||
console.log('API groups:', api.groups);
|
||||
```
|
||||
|
||||
## 📚 Recursos
|
||||
|
||||
- [DockView Documentation](https://dockview.dev/)
|
||||
- [Mantine Documentation](https://mantine.dev/)
|
||||
- [React TypeScript](https://react-typescript-cheatsheet.netlify.app/)
|
||||
|
||||
## 🤝 Contribuir
|
||||
|
||||
Para agregar nuevas funcionalidades:
|
||||
1. Crea un nuevo dock en `src/components/docks/`
|
||||
2. Implementa la comunicación necesaria
|
||||
3. Agrega documentación
|
||||
4. Prueba la integración con otros docks
|
||||
@@ -0,0 +1,34 @@
|
||||
# Mantine Vite template
|
||||
|
||||
## Features
|
||||
|
||||
This template comes with the following features:
|
||||
|
||||
- [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
|
||||
- [TypeScript](https://www.typescriptlang.org/)
|
||||
- [Storybook](https://storybook.js.org/)
|
||||
- [Vitest](https://vitest.dev/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
|
||||
- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
|
||||
|
||||
## npm scripts
|
||||
|
||||
## Build and dev scripts
|
||||
|
||||
- `dev` – start development server
|
||||
- `build` – build production version of the app
|
||||
- `preview` – locally preview production build
|
||||
|
||||
### Testing scripts
|
||||
|
||||
- `typecheck` – checks TypeScript types
|
||||
- `lint` – runs ESLint
|
||||
- `prettier:check` – checks files with Prettier
|
||||
- `vitest` – runs vitest tests
|
||||
- `vitest:watch` – starts vitest watch
|
||||
- `test` – runs `vitest`, `prettier:check`, `lint` and `typecheck` scripts
|
||||
|
||||
### Other scripts
|
||||
|
||||
- `storybook` – starts storybook dev server
|
||||
- `storybook:build` – build production storybook bundle to `storybook-static`
|
||||
- `prettier:write` – formats all files with Prettier
|
||||
@@ -0,0 +1,369 @@
|
||||
# VSCode Layout con DockView
|
||||
|
||||
Una implementación completa de un sistema de layout similar a Visual Studio Code, con zonas redimensionables y capacidad de mover paneles de DockView entre diferentes áreas de la aplicación.
|
||||
|
||||
## 🎯 Características Principales
|
||||
|
||||
### ✅ **Zonas Redimensionables**
|
||||
- **Navbar**: Barra superior fija
|
||||
- **Sidebar**: Panel lateral izquierdo redimensionable
|
||||
- **Asidebar**: Panel lateral derecho redimensionable
|
||||
- **Bottom**: Panel inferior redimensionable
|
||||
- **Center**: Área central principal
|
||||
|
||||
### ✅ **Sistema de Drag & Drop**
|
||||
- Arrastra paneles entre cualquier zona
|
||||
- Indicadores visuales durante el arrastre
|
||||
- Soporte completo para pestañas de DockView
|
||||
|
||||
### ✅ **Gestión de Estado**
|
||||
- Persistencia automática en localStorage
|
||||
- Exportar/importar configuraciones de layout
|
||||
- Sistema de versionado para compatibilidad
|
||||
|
||||
### ✅ **Integración con DockView**
|
||||
- Cada zona puede contener múltiples paneles de DockView
|
||||
- Comunicación entre paneles preservada
|
||||
- Soporte para todos los componentes de dock existentes
|
||||
|
||||
## 🚀 Uso Rápido
|
||||
|
||||
```typescript
|
||||
import { VSCodeDockView } from '@/components/VSCodeLayout';
|
||||
|
||||
function App() {
|
||||
return <VSCodeDockView />;
|
||||
}
|
||||
```
|
||||
|
||||
## 📁 Arquitectura del Sistema
|
||||
|
||||
### Componentes Principales
|
||||
|
||||
```
|
||||
VSCodeLayout/
|
||||
├── VSCodeLayout.tsx # Layout base con zonas redimensionables
|
||||
├── ZoneManager.tsx # Gestión de paneles y zonas
|
||||
├── ZoneDockView.tsx # Integración DockView por zona
|
||||
├── VSCodeDockView.tsx # Componente principal completo
|
||||
├── LayoutPersistence.tsx # Persistencia y exportación
|
||||
├── VSCodeLayout.css # Estilos del layout
|
||||
└── index.ts # Exportaciones
|
||||
```
|
||||
|
||||
### Flujo de Datos
|
||||
|
||||
```
|
||||
VSCodeDockView (Provider)
|
||||
↓
|
||||
ZoneManagerContext (Estado global)
|
||||
↓
|
||||
VSCodeLayout (UI Layout)
|
||||
↓
|
||||
ZoneDockView (DockView por zona)
|
||||
↓
|
||||
Componentes de Dock individuales
|
||||
```
|
||||
|
||||
## 🎨 Personalización
|
||||
|
||||
### Configurar Zonas Iniciales
|
||||
|
||||
```typescript
|
||||
<VSCodeLayout
|
||||
navbar={<CustomNavbar />}
|
||||
sidebar={
|
||||
<SidebarDockView
|
||||
components={dockComponents}
|
||||
initialPanels={[
|
||||
{ id: 'explorer', component: 'fileExplorer', title: 'Explorador' }
|
||||
]}
|
||||
/>
|
||||
}
|
||||
onLayoutChange={(layout) => console.log('Layout changed:', layout)}
|
||||
>
|
||||
<CenterArea />
|
||||
</VSCodeLayout>
|
||||
```
|
||||
|
||||
### Agregar Componentes Personalizados
|
||||
|
||||
```typescript
|
||||
const customComponents = {
|
||||
myDock: MyCustomDockComponent,
|
||||
tasks: TaskDock,
|
||||
properties: PropertiesDock,
|
||||
};
|
||||
|
||||
<ZoneDockView
|
||||
zone="sidebar"
|
||||
components={customComponents}
|
||||
initialPanels={[
|
||||
{ id: 'my-panel', component: 'myDock', title: 'Mi Panel' }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
### Gestión Programática de Paneles
|
||||
|
||||
```typescript
|
||||
function MyComponent() {
|
||||
const { movePanel, addPanel, removePanel } = useZoneManager();
|
||||
|
||||
const handleMovePanel = () => {
|
||||
movePanel('panel-id', 'sidebar', 'center');
|
||||
};
|
||||
|
||||
const handleAddPanel = () => {
|
||||
addPanel('bottom', {
|
||||
id: 'new-panel',
|
||||
title: 'Nuevo Panel',
|
||||
component: MyPanelComponent,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button onClick={handleMovePanel}>
|
||||
Mover Panel
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 Configuración Avanzada
|
||||
|
||||
### Persistencia Personalizada
|
||||
|
||||
```typescript
|
||||
import { useLayoutPersistence } from '@/components/VSCodeLayout';
|
||||
|
||||
function LayoutManager() {
|
||||
const { saveLayout, loadLayout, clearLayout } = useLayoutPersistence();
|
||||
|
||||
useEffect(() => {
|
||||
const savedLayout = loadLayout();
|
||||
if (savedLayout) {
|
||||
// Aplicar layout guardado
|
||||
applyLayout(savedLayout);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<Button onClick={() => saveLayout(currentLayout, currentPanels)}>
|
||||
Guardar Layout
|
||||
</Button>
|
||||
<Button onClick={clearLayout}>
|
||||
Limpiar Layout
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Auto-guardado
|
||||
|
||||
```typescript
|
||||
import { useAutoSaveLayout } from '@/components/VSCodeLayout';
|
||||
|
||||
function AutoSaveExample() {
|
||||
const [layout, setLayout] = useState(defaultLayout);
|
||||
const [panels, setPanels] = useState(defaultPanels);
|
||||
|
||||
// Auto-guardar cada 2 segundos después de cambios
|
||||
useAutoSaveLayout(layout, panels, 2000);
|
||||
|
||||
return <VSCodeLayout layout={layout} onLayoutChange={setLayout} />;
|
||||
}
|
||||
```
|
||||
|
||||
## 🎮 Controles de Usuario
|
||||
|
||||
### Atajos de Teclado (Futuro)
|
||||
- `Ctrl+Shift+E`: Toggle sidebar
|
||||
- `Ctrl+Shift+F`: Toggle asidebar
|
||||
- `Ctrl+J`: Toggle bottom panel
|
||||
- `Ctrl+Shift+P`: Abrir panel de comandos
|
||||
|
||||
### Gestos del Mouse
|
||||
- **Arrastrar bordes**: Redimensionar zonas
|
||||
- **Arrastrar pestañas**: Mover paneles entre zonas
|
||||
- **Doble click bordes**: Auto-ajustar tamaño
|
||||
- **Click derecho pestañas**: Menú contextual
|
||||
|
||||
## 🔍 API de Zonas
|
||||
|
||||
### ZoneManager Context
|
||||
|
||||
```typescript
|
||||
interface ZoneManagerContextType {
|
||||
zones: Record<ZoneType, Zone>;
|
||||
movePanel: (panelId: string, fromZone: ZoneType, toZone: ZoneType) => void;
|
||||
addPanel: (zone: ZoneType, panel: Panel) => void;
|
||||
removePanel: (zone: ZoneType, panelId: string) => void;
|
||||
setActivePanel: (zone: ZoneType, panelId: string) => void;
|
||||
toggleZone: (zone: ZoneType) => void;
|
||||
}
|
||||
```
|
||||
|
||||
### Panel Interface
|
||||
|
||||
```typescript
|
||||
interface Panel {
|
||||
id: string;
|
||||
title: string;
|
||||
component: React.ComponentType<any>;
|
||||
props?: any;
|
||||
closable?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
```
|
||||
|
||||
### Zone Interface
|
||||
|
||||
```typescript
|
||||
interface Zone {
|
||||
id: string;
|
||||
name: string;
|
||||
panels: Panel[];
|
||||
activePanel?: string;
|
||||
visible: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 Temas y Estilos
|
||||
|
||||
### Variables CSS Disponibles
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vscode-navbar-height: 40px;
|
||||
--vscode-sidebar-width: 250px;
|
||||
--vscode-asidebar-width: 300px;
|
||||
--vscode-bottom-height: 200px;
|
||||
|
||||
--vscode-border-color: #d0d7de;
|
||||
--vscode-bg-primary: #ffffff;
|
||||
--vscode-bg-secondary: #f6f8fa;
|
||||
--vscode-text-primary: #24292f;
|
||||
--vscode-text-secondary: #656d76;
|
||||
|
||||
--vscode-resize-handle-color: #0078d4;
|
||||
--vscode-resize-handle-hover: #106ebe;
|
||||
}
|
||||
```
|
||||
|
||||
### Clases CSS Personalizables
|
||||
|
||||
```css
|
||||
.vscode-layout { /* Layout principal */ }
|
||||
.layout-zone { /* Cualquier zona */ }
|
||||
.layout-zone.navbar { /* Navbar específica */ }
|
||||
.layout-zone.sidebar { /* Sidebar específica */ }
|
||||
.resize-handle { /* Manejadores de redimensión */ }
|
||||
.zone-content { /* Contenido de zona */ }
|
||||
.zone-tabs { /* Pestañas de zona */ }
|
||||
.drop-zone-active { /* Zona con drop activo */ }
|
||||
```
|
||||
|
||||
## 🚨 Troubleshooting
|
||||
|
||||
### Problemas Comunes
|
||||
|
||||
1. **Paneles no se mueven entre zonas**
|
||||
```typescript
|
||||
// Verificar que el componente esté registrado
|
||||
const components = {
|
||||
myComponent: MyComponent, // ✅ Registrado
|
||||
};
|
||||
```
|
||||
|
||||
2. **Layout no se guarda**
|
||||
```typescript
|
||||
// Verificar localStorage disponible
|
||||
if (typeof Storage !== "undefined") {
|
||||
// localStorage disponible
|
||||
}
|
||||
```
|
||||
|
||||
3. **Redimensión no funciona**
|
||||
```css
|
||||
/* Verificar que no haya CSS conflictivo */
|
||||
.vscode-layout {
|
||||
position: relative; /* Requerido */
|
||||
overflow: hidden; /* Requerido */
|
||||
}
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
```typescript
|
||||
// Habilitar logs de debug
|
||||
localStorage.setItem('vscode-layout-debug', 'true');
|
||||
|
||||
// En el código
|
||||
const debug = localStorage.getItem('vscode-layout-debug') === 'true';
|
||||
if (debug) {
|
||||
console.log('Zone state:', zones);
|
||||
console.log('Layout state:', layout);
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 Métricas y Performance
|
||||
|
||||
### Optimizaciones Implementadas
|
||||
- **Debounce en redimensión**: Evita re-renders excesivos
|
||||
- **Lazy loading**: Paneles se cargan cuando son visibles
|
||||
- **Memoización**: Componentes memorizados para mejor performance
|
||||
- **Virtual scrolling**: En listas largas de paneles
|
||||
|
||||
### Monitoreo de Performance
|
||||
|
||||
```typescript
|
||||
// Medir tiempo de operaciones
|
||||
console.time('panel-move');
|
||||
movePanel('panel-1', 'sidebar', 'center');
|
||||
console.timeEnd('panel-move');
|
||||
|
||||
// Memory usage
|
||||
console.log('Memory:', (performance as any).memory);
|
||||
```
|
||||
|
||||
## 🔮 Roadmap
|
||||
|
||||
### Próximas Características
|
||||
- [ ] Múltiples instancias de DockView por zona
|
||||
- [ ] Atajos de teclado configurables
|
||||
- [ ] Temas personalizables por zona
|
||||
- [ ] Animaciones de transición
|
||||
- [ ] Modo fullscreen para paneles
|
||||
- [ ] Búsqueda global de paneles
|
||||
- [ ] Workspaces personalizados
|
||||
- [ ] Integración con React Router
|
||||
- [ ] API REST para layouts remotos
|
||||
- [ ] Colaboración en tiempo real
|
||||
|
||||
### Mejoras Técnicas
|
||||
- [ ] Testing completo (Jest + RTL)
|
||||
- [ ] Storybook para componentes
|
||||
- [ ] Performance profiling
|
||||
- [ ] A11y compliance
|
||||
- [ ] Mobile responsiveness
|
||||
- [ ] PWA support
|
||||
|
||||
## 📄 Licencia
|
||||
|
||||
Este proyecto usa la misma licencia que el proyecto principal.
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contribuir
|
||||
|
||||
Para agregar nuevas funcionalidades al VSCode Layout:
|
||||
|
||||
1. **Nuevas Zonas**: Extender `ZoneType` y `ZoneManager`
|
||||
2. **Nuevos Paneles**: Crear componente y registrar en `components`
|
||||
3. **Nuevas Características**: Seguir la arquitectura de contexto/hooks
|
||||
4. **Estilos**: Usar variables CSS para consistencia
|
||||
|
||||
¡El VSCode Layout está diseñado para ser extensible y modular!
|
||||
@@ -0,0 +1,22 @@
|
||||
import mantine from 'eslint-config-mantine';
|
||||
import { defineConfig } from 'eslint/config';
|
||||
import tseslint from 'typescript-eslint';
|
||||
|
||||
// @ts-check
|
||||
export default defineConfig(
|
||||
tseslint.configs.recommended,
|
||||
...mantine,
|
||||
{ ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
|
||||
{
|
||||
files: ['**/*.story.tsx'],
|
||||
rules: { 'no-console': 'off' },
|
||||
},
|
||||
{
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
tsconfigRootDir: process.cwd(),
|
||||
project: ['./tsconfig.json'],
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
|
||||
/>
|
||||
<title>My App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+9675
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"name": "mantine-vite-template",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "npm run eslint && npm run stylelint",
|
||||
"eslint": "eslint . --cache",
|
||||
"stylelint": "stylelint '**/*.css' --cache",
|
||||
"prettier": "prettier --check \"**/*.{ts,tsx}\"",
|
||||
"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
|
||||
"vitest": "vitest run",
|
||||
"vitest:watch": "vitest",
|
||||
"test": "npm run typecheck && npm run prettier && npm run lint && npm run vitest && npm run build",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"storybook:build": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mantine/core": "8.3.1",
|
||||
"@mantine/hooks": "8.3.1",
|
||||
"@phosphor-icons/react": "^2.1.10",
|
||||
"@react-three/fiber": "^9.3.0",
|
||||
"@tabler/icons-react": "^3.35.0",
|
||||
"dockview": "^4.9.0",
|
||||
"phosphor-react": "^1.4.1",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.8.2",
|
||||
"three": "^0.180.0",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.35.0",
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
|
||||
"@storybook/addon-themes": "^9.1.5",
|
||||
"@storybook/react": "^9.1.5",
|
||||
"@storybook/react-vite": "^9.1.5",
|
||||
"@testing-library/dom": "^10.4.1",
|
||||
"@testing-library/jest-dom": "^6.8.0",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/node": "^24.3.1",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@types/three": "^0.180.0",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"eslint": "^9.35.0",
|
||||
"eslint-config-mantine": "^4.0.3",
|
||||
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jsdom": "^26.1.0",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-preset-mantine": "1.18.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.6.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"storybook": "^9.1.5",
|
||||
"stylelint": "^16.24.0",
|
||||
"stylelint-config-standard-scss": "^16.0.0",
|
||||
"typescript": "^5.9.2",
|
||||
"typescript-eslint": "^8.43.0",
|
||||
"vite": "^7.1.5",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"packageManager": "yarn@4.9.4"
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-preset-mantine': {},
|
||||
'postcss-simple-vars': {
|
||||
variables: {
|
||||
'mantine-breakpoint-xs': '36em',
|
||||
'mantine-breakpoint-sm': '48em',
|
||||
'mantine-breakpoint-md': '62em',
|
||||
'mantine-breakpoint-lg': '75em',
|
||||
'mantine-breakpoint-xl': '88em',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import '@mantine/core/styles.css';
|
||||
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import { Router } from './Router';
|
||||
import { theme } from './theme';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<MantineProvider theme={theme}>
|
||||
<Router />
|
||||
</MantineProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||
import { HomePage } from './pages/Home.page';
|
||||
import { DockViewPage } from './pages/DockView.page';
|
||||
import { VSCodeLayoutPage } from './pages/VSCodeLayout.page';
|
||||
import { Error_404 } from './components/404/404';
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <HomePage />,
|
||||
},
|
||||
{
|
||||
path: '/dockview',
|
||||
element: <DockViewPage />,
|
||||
},
|
||||
{
|
||||
path: '/vscode-layout',
|
||||
element: <VSCodeLayoutPage />,
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
element: <Error_404 /> },
|
||||
]);
|
||||
|
||||
export function Router() {
|
||||
return <RouterProvider router={router} />;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Box, Title, Text, Button, Group, Stack, useMantineTheme } from '@mantine/core';
|
||||
import { ArrowLeft } from 'phosphor-react'; // ← Importa el icono directamente
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MantineCardWithShader } from './HoloShader_404';
|
||||
import { AppShellWithMenu } from '../Appshell/Appshell';
|
||||
|
||||
export function Error_404() {
|
||||
const theme = useMantineTheme();
|
||||
|
||||
return (
|
||||
<AppShellWithMenu>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
padding: '2rem',
|
||||
paddingTop: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '2rem',
|
||||
}}
|
||||
>
|
||||
<Stack align="center" maw={500} mx="auto">
|
||||
<MantineCardWithShader />
|
||||
<Title order={1}>Página no encontrada</Title>
|
||||
<Text size="lg">
|
||||
Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes,
|
||||
puedes volver al inicio fácilmente.
|
||||
</Text>
|
||||
<Group mt="md">
|
||||
<Button
|
||||
component={Link}
|
||||
to="/"
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{
|
||||
from: theme.colors.brand[7],
|
||||
to: theme.colors.secondary[4],
|
||||
}}
|
||||
leftSection={<ArrowLeft size={18} />} // ← Usa el icono Phosphor aquí
|
||||
>
|
||||
Volver al inicio
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</AppShellWithMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { Card, Title, Box, useMantineTheme } from '@mantine/core';
|
||||
import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
|
||||
import { useRef, useMemo } from 'react';
|
||||
import * as THREE from 'three';
|
||||
|
||||
// 🎨 Utilidad para convertir hex a RGB [0–1]
|
||||
function hexToRGBArray(hex: string): [number, number, number] {
|
||||
const bigint = parseInt(hex.replace('#', ''), 16);
|
||||
return [
|
||||
((bigint >> 16) & 255) / 255,
|
||||
((bigint >> 8) & 255) / 255,
|
||||
(bigint & 255) / 255,
|
||||
];
|
||||
}
|
||||
|
||||
// ✨ Shader personalizado estilo holográfico, con color dinámico
|
||||
class HoloShaderMaterial extends THREE.ShaderMaterial {
|
||||
constructor(color: [number, number, number]) {
|
||||
super({
|
||||
uniforms: {
|
||||
u_time: { value: 0 },
|
||||
u_resolution: { value: new THREE.Vector2() },
|
||||
u_color: { value: new THREE.Vector3(...color) },
|
||||
},
|
||||
vertexShader: `
|
||||
void main() {
|
||||
gl_Position = vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision mediump float;
|
||||
uniform float u_time;
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec3 u_color;
|
||||
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy / u_resolution;
|
||||
vec2 pos = uv * 10.0;
|
||||
pos.x += u_time * 0.3;
|
||||
pos.y += sin(u_time * 0.2) * 2.0;
|
||||
|
||||
float color = sin(pos.x + sin(pos.y + sin(pos.x))) * 0.5 + 0.5;
|
||||
|
||||
vec3 c = vec3(
|
||||
u_color.r + 0.2 * sin(u_time + pos.x),
|
||||
u_color.g + 0.2 * cos(u_time + pos.y),
|
||||
u_color.b + 0.2 * sin(pos.x + pos.y + u_time)
|
||||
);
|
||||
|
||||
gl_FragColor = vec4(c * color, 1.0);
|
||||
}
|
||||
`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
extend({ HoloShaderMaterial });
|
||||
|
||||
// 🎥 Plano con el shader
|
||||
function HoloPlane({ color }: { color: [number, number, number] }) {
|
||||
const mat = useRef<any>(null);
|
||||
const { size } = useThree();
|
||||
|
||||
useFrame(({ clock }) => {
|
||||
if (mat.current) {
|
||||
mat.current.uniforms.u_time.value = clock.getElapsedTime();
|
||||
mat.current.uniforms.u_resolution.value.set(size.width, size.height);
|
||||
}
|
||||
});
|
||||
|
||||
const material = useMemo(() => new HoloShaderMaterial(color), [color]);
|
||||
|
||||
return (
|
||||
<mesh>
|
||||
<planeGeometry args={[2, 2]} />
|
||||
<primitive object={material} ref={mat} attach="material" />
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
// 🎨 Fondo que ocupa todo el contenedor
|
||||
function HolographicBackground({ color }: { color: [number, number, number] }) {
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
zIndex: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
<Canvas orthographic camera={{ zoom: 1, position: [0, 0, 1] }}>
|
||||
<HoloPlane color={color} />
|
||||
</Canvas>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 🧩 Componente final con fondo shader y texto 404
|
||||
export function MantineCardWithShader() {
|
||||
const theme = useMantineTheme();
|
||||
const hex = theme.colors[theme.primaryColor][6];
|
||||
const rgb = hexToRGBArray(hex);
|
||||
|
||||
return (
|
||||
<Card
|
||||
withBorder
|
||||
radius="lg"
|
||||
shadow="xl"
|
||||
style={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
minHeight: 300,
|
||||
minWidth: 400,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<HolographicBackground color={rgb} />
|
||||
|
||||
<Box style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
|
||||
<Title
|
||||
order={1}
|
||||
style={{
|
||||
fontSize: '15rem',
|
||||
fontWeight: 900,
|
||||
backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0))',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
textAlign: 'center',
|
||||
lineHeight: 1,
|
||||
userSelect: 'none', // <-- evita selección
|
||||
textDecoration: 'none', // <-- evita subrayado
|
||||
}}
|
||||
>
|
||||
404
|
||||
</Title>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
.navbar {
|
||||
height: 100vh; /* ← Ocupa todo el alto de la ventana */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
||||
width: 300px;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
|
||||
top: 0; /* ← Ancla arriba */
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
margin-bottom: var(--mantine-spacing-sm);
|
||||
background-color: var(--mantine-color-body);
|
||||
padding: var(--mantine-spacing-xs);
|
||||
padding-top: 15px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Esta es la barra izquierda pequeña donde los iconos */
|
||||
.aside {
|
||||
flex: 0 0 52px;
|
||||
background-color: var(--mantine-color-body);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
}
|
||||
|
||||
.topSection {
|
||||
padding-top: 12px; /* o la cantidad que desees */
|
||||
}
|
||||
|
||||
/* Estos son los iconos */
|
||||
.mainLink {
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: var(--mantine-radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--mantine-color-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-top-right-radius: var(--mantine-radius-md);
|
||||
border-bottom-right-radius: var(--mantine-radius-md);
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
padding: 0 var(--mantine-spacing-md);
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
margin-right: var(--mantine-spacing-md);
|
||||
font-weight: 420;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
&:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||
color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--mantine-color-brand-7);
|
||||
color: var(--mantine-color-brand-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import {
|
||||
AppShell,
|
||||
Burger,
|
||||
Group,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
Title,
|
||||
useMantineTheme,
|
||||
} from '@mantine/core';
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { submenuLinks } from './Links_Appshell/submenuLinks';
|
||||
import { mainLinksdata } from './Links_Appshell/navigationsLinks';
|
||||
import { default as LogoIcon } from '../icons/favicon';
|
||||
|
||||
import classes from './Appshell.module.css';
|
||||
|
||||
import {
|
||||
useAppShellStore,
|
||||
getLastSubmenuRoute,
|
||||
setLastSubmenuRoute,
|
||||
} from '@/stores/useAppShellStore';
|
||||
|
||||
type AppShellWithMenuProps = {
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function AppShellWithMenu({ children }: AppShellWithMenuProps) {
|
||||
const theme = useMantineTheme();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
|
||||
// Zustand store
|
||||
const {
|
||||
activeMain,
|
||||
setActiveMain,
|
||||
activeLink,
|
||||
setActiveLink,
|
||||
mobileOpened,
|
||||
desktopOpened,
|
||||
toggleMobile,
|
||||
toggleDesktop,
|
||||
openDesktop,
|
||||
closeMobile,
|
||||
} = useAppShellStore();
|
||||
|
||||
const isCollapsed = useMemo(
|
||||
() => (isMobile ? !mobileOpened : !desktopOpened),
|
||||
[isMobile, mobileOpened, desktopOpened]
|
||||
);
|
||||
|
||||
// Detectar main activo según la ruta
|
||||
useEffect(() => {
|
||||
const currentPath =
|
||||
location.pathname?.toLowerCase().replace(/\/$/, '') ?? '';
|
||||
|
||||
let matchedMain: string | null = null;
|
||||
let maxMatchLength = 0;
|
||||
|
||||
Object.entries(submenuLinks).forEach(([main, items]) => {
|
||||
items.forEach((item: { to: string }) => {
|
||||
const itemPath = item.to.toLowerCase().replace(/\/$/, '');
|
||||
if (currentPath === itemPath || currentPath.startsWith(`${itemPath }/`)) {
|
||||
if (itemPath.length > maxMatchLength) {
|
||||
matchedMain = main;
|
||||
maxMatchLength = itemPath.length;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (matchedMain) {setActiveMain(matchedMain);}
|
||||
}, [location.pathname, setActiveMain]);
|
||||
|
||||
// Actualizar activeLink
|
||||
useEffect(() => {
|
||||
const sublinks = submenuLinks[activeMain as keyof typeof submenuLinks] || [];
|
||||
const found = sublinks.find((item) => item.to === location.pathname);
|
||||
setActiveLink(found?.label ?? '');
|
||||
}, [location.pathname, activeMain, setActiveLink]);
|
||||
|
||||
const mainLinks = mainLinksdata.map((link) => (
|
||||
<Tooltip
|
||||
label={link.label}
|
||||
position="right"
|
||||
withArrow
|
||||
transitionProps={{ duration: 0 }}
|
||||
key={link.label}
|
||||
>
|
||||
<UnstyledButton
|
||||
onClick={() => {
|
||||
setActiveMain(link.label);
|
||||
const remembered = getLastSubmenuRoute(link.label);
|
||||
const fallback =
|
||||
submenuLinks[link.label as keyof typeof submenuLinks]?.[0]?.to;
|
||||
if (isCollapsed && (remembered || fallback)) {
|
||||
navigate(remembered ?? fallback);
|
||||
}
|
||||
}}
|
||||
className={classes.mainLink}
|
||||
data-active={link.label === activeMain || undefined}
|
||||
>
|
||||
<link.icon size={24} weight="duotone" />
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
));
|
||||
|
||||
const links: React.ReactNode = (
|
||||
(submenuLinks[activeMain as keyof typeof submenuLinks] || []) as {
|
||||
label: string;
|
||||
to: string;
|
||||
}[]
|
||||
).map((item) => (
|
||||
<Link
|
||||
className={classes.link}
|
||||
data-active={activeLink === item.label || undefined}
|
||||
to={item.to}
|
||||
key={item.label}
|
||||
style={{ display: isCollapsed ? 'none' : 'block' }}
|
||||
onClick={() => {
|
||||
setLastSubmenuRoute(activeMain, item.to);
|
||||
if (isMobile) {closeMobile();}
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
));
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) {openDesktop();}
|
||||
}, [isMobile, openDesktop]);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{
|
||||
width: isCollapsed ? 60 : 300,
|
||||
breakpoint: 'sm',
|
||||
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
|
||||
}}
|
||||
padding={0}
|
||||
styles={{
|
||||
main: {
|
||||
height: '100dvh', // o '100vh', pero mejor con 100dvh para evitar bugs móviles
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<AppShell.Header>
|
||||
<Group h="100%" px="sm">
|
||||
<Burger
|
||||
opened={mobileOpened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<Burger
|
||||
opened={desktopOpened}
|
||||
onClick={toggleDesktop}
|
||||
visibleFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
<LogoIcon
|
||||
style={{ width: 30, height: 30 }}
|
||||
circleFill={theme.colors.brand[9]}
|
||||
pathFill={theme.colors.secondary[2]}
|
||||
/>
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
{/* Navbar */}
|
||||
<AppShell.Navbar>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.aside}>
|
||||
<div className={classes.topSection}>{mainLinks}</div>
|
||||
</div>
|
||||
<div className={classes.main}>
|
||||
{!isCollapsed && (
|
||||
<Title order={4} className={classes.title}>
|
||||
{activeMain}
|
||||
</Title>
|
||||
)}
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
</AppShell.Navbar>
|
||||
|
||||
{/* Main Content */}
|
||||
<AppShell.Main>{children}</AppShell.Main>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// src/data/navigationLinks.ts
|
||||
import { House, Book, Users, Camera, Flask, Gear } from "phosphor-react";
|
||||
|
||||
export const mainLinksdata = [
|
||||
{ icon: House, label: "Home" },
|
||||
// { icon: Book, label: "Biblioteca" },
|
||||
// { icon: Users, label: "AgentesLLMs" },
|
||||
// { icon: Camera, label: "CameraNoir" },
|
||||
// { icon: Flask, label: "Experimentos" },
|
||||
// { icon: Gear, label: "Settings" },
|
||||
];
|
||||
@@ -0,0 +1,19 @@
|
||||
// src/data/submenuLinks.ts
|
||||
|
||||
export const submenuLinks = {
|
||||
|
||||
// Home Principal
|
||||
|
||||
Home: [
|
||||
{ label: 'Inicio', to: '/' },
|
||||
|
||||
],
|
||||
|
||||
// Biblioteca
|
||||
|
||||
// Biblioteca: [
|
||||
// { label: 'Biblioteca', to: '/bibliot/Biblioteca' },
|
||||
// { label: 'test', to: '/bibliot/editortest' },
|
||||
|
||||
// ],
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Button, Group, useMantineColorScheme } from '@mantine/core';
|
||||
|
||||
export function ColorSchemeToggle() {
|
||||
const { setColorScheme, colorScheme } = useMantineColorScheme();
|
||||
|
||||
return (
|
||||
<Group justify="center" mt="xl">
|
||||
<Button
|
||||
variant={colorScheme === 'light' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('light')}
|
||||
>
|
||||
Light
|
||||
</Button>
|
||||
<Button
|
||||
variant={colorScheme === 'dark' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('dark')}
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
<Button
|
||||
variant={colorScheme === 'auto' ? 'filled' : 'outline'}
|
||||
onClick={() => setColorScheme('auto')}
|
||||
>
|
||||
Auto
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DockviewReact, DockviewReadyEvent, IDockviewPanelProps } from 'dockview';
|
||||
import { TaskDock } from './docks/TaskDock';
|
||||
import { PropertiesDock } from './docks/PropertiesDock';
|
||||
import { ConsoleDock } from './docks/ConsoleDock';
|
||||
import { FileExplorerDock } from './docks/FileExplorerDock';
|
||||
import { Box } from '@mantine/core';
|
||||
import 'dockview/dist/styles/dockview.css';
|
||||
import './dockview.css';
|
||||
|
||||
// Contexto para comunicación entre docks
|
||||
interface DockCommunicationContext {
|
||||
selectedFile: any;
|
||||
properties: any;
|
||||
tasks: any[];
|
||||
logs: any[];
|
||||
updateSelectedFile: (file: any) => void;
|
||||
updateProperties: (props: any) => void;
|
||||
updateTasks: (tasks: any[]) => void;
|
||||
addLog: (log: any) => void;
|
||||
}
|
||||
|
||||
const dockCommunication: DockCommunicationContext = {
|
||||
selectedFile: null,
|
||||
properties: null,
|
||||
tasks: [],
|
||||
logs: [],
|
||||
updateSelectedFile: () => {},
|
||||
updateProperties: () => {},
|
||||
updateTasks: () => {},
|
||||
addLog: () => {},
|
||||
};
|
||||
|
||||
// Componentes wrapper para cada dock
|
||||
const TaskDockWrapper = (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<TaskDock
|
||||
onTaskUpdate={(tasks) => {
|
||||
dockCommunication.updateTasks(tasks);
|
||||
dockCommunication.addLog({
|
||||
id: Date.now().toString(),
|
||||
timestamp: new Date(),
|
||||
level: 'info',
|
||||
message: `Tareas actualizadas: ${tasks.length} tareas en total`
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const PropertiesDockWrapper = (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<PropertiesDock
|
||||
onPropertiesChange={(properties) => {
|
||||
dockCommunication.updateProperties(properties);
|
||||
dockCommunication.addLog({
|
||||
id: Date.now().toString(),
|
||||
timestamp: new Date(),
|
||||
level: 'success',
|
||||
message: `Propiedades actualizadas para: ${properties.name}`
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ConsoleDockWrapper = (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<ConsoleDock
|
||||
onLogAdd={(log) => {
|
||||
dockCommunication.addLog(log);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const FileExplorerDockWrapper = (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<FileExplorerDock
|
||||
onFileSelect={(file) => {
|
||||
dockCommunication.updateSelectedFile(file);
|
||||
dockCommunication.addLog({
|
||||
id: Date.now().toString(),
|
||||
timestamp: new Date(),
|
||||
level: 'info',
|
||||
message: `Archivo seleccionado: ${file.label}`
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export function DockViewMain() {
|
||||
const [api, setApi] = useState<DockviewReadyEvent>();
|
||||
|
||||
// Estados para comunicación entre docks
|
||||
const [selectedFile, setSelectedFile] = useState<any>(null);
|
||||
const [properties, setProperties] = useState<any>(null);
|
||||
const [tasks, setTasks] = useState<any[]>([]);
|
||||
const [logs, setLogs] = useState<any[]>([]);
|
||||
|
||||
// Actualizar el contexto de comunicación
|
||||
useEffect(() => {
|
||||
dockCommunication.selectedFile = selectedFile;
|
||||
dockCommunication.properties = properties;
|
||||
dockCommunication.tasks = tasks;
|
||||
dockCommunication.logs = logs;
|
||||
dockCommunication.updateSelectedFile = setSelectedFile;
|
||||
dockCommunication.updateProperties = setProperties;
|
||||
dockCommunication.updateTasks = setTasks;
|
||||
dockCommunication.addLog = (log) => setLogs(prev => [log, ...prev]);
|
||||
}, [selectedFile, properties, tasks, logs]);
|
||||
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
setApi(event);
|
||||
|
||||
// Configurar el layout inicial
|
||||
const panel1 = event.api.addPanel({
|
||||
id: 'file-explorer',
|
||||
component: 'fileExplorer',
|
||||
title: 'Explorador',
|
||||
});
|
||||
|
||||
const panel2 = event.api.addPanel({
|
||||
id: 'properties',
|
||||
component: 'properties',
|
||||
title: 'Propiedades',
|
||||
position: { direction: 'right', referencePanel: panel1 },
|
||||
});
|
||||
|
||||
const panel3 = event.api.addPanel({
|
||||
id: 'tasks',
|
||||
component: 'tasks',
|
||||
title: 'Tareas',
|
||||
position: { direction: 'below', referencePanel: panel2 },
|
||||
});
|
||||
|
||||
const panel4 = event.api.addPanel({
|
||||
id: 'console',
|
||||
component: 'console',
|
||||
title: 'Consola',
|
||||
position: { direction: 'below', referencePanel: panel1 },
|
||||
});
|
||||
|
||||
// Configurar tamaños iniciales
|
||||
setTimeout(() => {
|
||||
// Redimensionar para una mejor distribución
|
||||
const groups = event.api.groups;
|
||||
if (groups.length >= 2) {
|
||||
try {
|
||||
groups[0].api.setSize({ size: 300 } as any); // Explorador de archivos
|
||||
groups[1].api.setSize({ size: 300 } as any); // Propiedades
|
||||
} catch (e) {
|
||||
// Silenciar errores de API si no es compatible
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const components = {
|
||||
tasks: TaskDockWrapper,
|
||||
properties: PropertiesDockWrapper,
|
||||
console: ConsoleDockWrapper,
|
||||
fileExplorer: FileExplorerDockWrapper,
|
||||
};
|
||||
|
||||
return (
|
||||
<Box style={{ height: '100vh', width: '100%' }}>
|
||||
<DockviewReact
|
||||
onReady={onReady}
|
||||
components={components}
|
||||
className="dockview-theme-light"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { AppShellWithMenu } from './Appshell/Appshell';
|
||||
|
||||
|
||||
export function Plantilla() {
|
||||
return (
|
||||
<AppShellWithMenu />
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useState } from 'react';
|
||||
import { TextInput, PasswordInput, Button, Paper, Title, Container, Group, Alert } from '@mantine/core';
|
||||
import { User, Lock } from 'phosphor-react'; // ← Importa los iconos Phosphor
|
||||
|
||||
export function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
// Aquí deberías llamar a tu endpoint de login (ajusta la URL y payload)
|
||||
try {
|
||||
const res = await fetch('/api/v1/usuarios/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error('Credenciales incorrectas');
|
||||
}
|
||||
// Aquí puedes guardar el usuario/token en el estado global o localStorage
|
||||
window.location.href = '/';
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container size={420} my={40}>
|
||||
<Title ta="center" mb={20}>Iniciar sesión</Title>
|
||||
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextInput
|
||||
label="Email"
|
||||
placeholder="tucorreo@ejemplo.com"
|
||||
leftSection={<User size={18} />}
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
mb={10}
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Contraseña"
|
||||
placeholder="Tu contraseña"
|
||||
leftSection={<Lock size={18} />}
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
required
|
||||
mb={20}
|
||||
/>
|
||||
{error && <Alert color="red" mb={10}>{error}</Alert>}
|
||||
<Group mt="md">
|
||||
<Button type="submit" loading={loading} fullWidth>
|
||||
Entrar
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
import { useEffect, useCallback } from 'react';
|
||||
import { ZoneType } from '../../stores/useDockStore';
|
||||
|
||||
interface LayoutState {
|
||||
navbarHeight: number;
|
||||
sidebarWidth: number;
|
||||
asidebarWidth: number;
|
||||
bottomHeight: number;
|
||||
sidebarVisible: boolean;
|
||||
asidebarVisible: boolean;
|
||||
bottomVisible: boolean;
|
||||
}
|
||||
|
||||
interface PanelLayout {
|
||||
id: string;
|
||||
component: string;
|
||||
title: string;
|
||||
zone: ZoneType;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface PersistedLayout {
|
||||
layout: LayoutState;
|
||||
panels: PanelLayout[];
|
||||
version: string;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'vscode-layout-state';
|
||||
const CURRENT_VERSION = '1.0.0';
|
||||
|
||||
export function useLayoutPersistence() {
|
||||
const saveLayout = useCallback((layout: LayoutState, panels: PanelLayout[]) => {
|
||||
const persistedLayout: PersistedLayout = {
|
||||
layout,
|
||||
panels,
|
||||
version: CURRENT_VERSION,
|
||||
};
|
||||
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(persistedLayout));
|
||||
} catch (error) {
|
||||
console.warn('Failed to save layout to localStorage:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadLayout = useCallback((): PersistedLayout | null => {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (!stored) {return null;}
|
||||
|
||||
const parsed: PersistedLayout = JSON.parse(stored);
|
||||
|
||||
// Verificar versión para compatibilidad
|
||||
if (parsed.version !== CURRENT_VERSION) {
|
||||
console.warn('Layout version mismatch, using default layout');
|
||||
return null;
|
||||
}
|
||||
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
console.warn('Failed to load layout from localStorage:', error);
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearLayout = useCallback(() => {
|
||||
try {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
} catch (error) {
|
||||
console.warn('Failed to clear layout from localStorage:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
saveLayout,
|
||||
loadLayout,
|
||||
clearLayout,
|
||||
};
|
||||
}
|
||||
|
||||
// Hook para auto-guardar layout
|
||||
export function useAutoSaveLayout(
|
||||
layout: LayoutState,
|
||||
panels: PanelLayout[],
|
||||
debounceMs: number = 1000
|
||||
) {
|
||||
const { saveLayout } = useLayoutPersistence();
|
||||
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
saveLayout(layout, panels);
|
||||
}, debounceMs);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [layout, panels, saveLayout, debounceMs]);
|
||||
}
|
||||
|
||||
// Componente para exportar/importar layout
|
||||
interface LayoutExportImportProps {
|
||||
onImport?: (layout: PersistedLayout) => void;
|
||||
getCurrentLayout: () => PersistedLayout;
|
||||
}
|
||||
|
||||
export function LayoutExportImport({ onImport, getCurrentLayout }: LayoutExportImportProps) {
|
||||
const exportLayout = () => {
|
||||
const layout = getCurrentLayout();
|
||||
const dataStr = JSON.stringify(layout, null, 2);
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
||||
|
||||
const url = URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `vscode-layout-${new Date().toISOString().split('T')[0]}.json`;
|
||||
link.click();
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const importLayout = () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
|
||||
input.onchange = (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) {return;}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const layout: PersistedLayout = JSON.parse(e.target?.result as string);
|
||||
onImport?.(layout);
|
||||
} catch (error) {
|
||||
console.error('Failed to import layout:', error);
|
||||
alert('Error al importar el layout. Verifica que el archivo sea válido.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
input.click();
|
||||
};
|
||||
|
||||
return {
|
||||
exportLayout,
|
||||
importLayout,
|
||||
};
|
||||
}
|
||||
|
||||
// Utilidades para trabajar con layouts
|
||||
export const LayoutUtils = {
|
||||
// Crear un layout por defecto
|
||||
createDefaultLayout(): PersistedLayout {
|
||||
return {
|
||||
layout: {
|
||||
navbarHeight: 40,
|
||||
sidebarWidth: 250,
|
||||
asidebarWidth: 300,
|
||||
bottomHeight: 200,
|
||||
sidebarVisible: true,
|
||||
asidebarVisible: true,
|
||||
bottomVisible: true,
|
||||
},
|
||||
panels: [
|
||||
{
|
||||
id: 'file-explorer-default',
|
||||
component: 'fileExplorer',
|
||||
title: 'Explorador',
|
||||
zone: 'sidebar',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 'properties-default',
|
||||
component: 'properties',
|
||||
title: 'Propiedades',
|
||||
zone: 'asidebar',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 'console-default',
|
||||
component: 'console',
|
||||
title: 'Consola',
|
||||
zone: 'bottom',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 'tasks-default',
|
||||
component: 'tasks',
|
||||
title: 'Tareas',
|
||||
zone: 'center',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
version: CURRENT_VERSION,
|
||||
};
|
||||
},
|
||||
|
||||
// Validar un layout
|
||||
validateLayout(layout: any): layout is PersistedLayout {
|
||||
return (
|
||||
layout &&
|
||||
typeof layout === 'object' &&
|
||||
layout.version &&
|
||||
layout.layout &&
|
||||
Array.isArray(layout.panels) &&
|
||||
typeof layout.layout.navbarHeight === 'number' &&
|
||||
typeof layout.layout.sidebarWidth === 'number' &&
|
||||
typeof layout.layout.asidebarWidth === 'number' &&
|
||||
typeof layout.layout.bottomHeight === 'number' &&
|
||||
typeof layout.layout.sidebarVisible === 'boolean' &&
|
||||
typeof layout.layout.asidebarVisible === 'boolean' &&
|
||||
typeof layout.layout.bottomVisible === 'boolean'
|
||||
);
|
||||
},
|
||||
|
||||
// Migrar layout de versiones anteriores
|
||||
migrateLayout(oldLayout: any): PersistedLayout {
|
||||
// Implementar migraciones aquí si es necesario
|
||||
return this.createDefaultLayout();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,515 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Box, Group, Text, ActionIcon, Button, Menu, Badge } from '@mantine/core';
|
||||
import {
|
||||
IconMenu2,
|
||||
IconLayoutSidebar,
|
||||
IconLayoutBottombar,
|
||||
IconDownload,
|
||||
IconUpload,
|
||||
IconTrash,
|
||||
IconX,
|
||||
IconGripVertical
|
||||
} from '@tabler/icons-react';
|
||||
import { DockviewReact, DockviewReadyEvent, IDockviewPanelProps } from 'dockview';
|
||||
import { useDockStore, ZoneType, Panel } from '../../stores/useDockStore';
|
||||
import { VSCodeLayout } from './VSCodeLayout';
|
||||
|
||||
// Importar componentes de dock existentes
|
||||
import { TaskDock } from '../docks/TaskDock';
|
||||
import { PropertiesDock } from '../docks/PropertiesDock';
|
||||
import { ConsoleDock } from '../docks/ConsoleDock';
|
||||
import { FileExplorerDock } from '../docks/FileExplorerDock';
|
||||
|
||||
import 'dockview/dist/styles/dockview.css';
|
||||
import '../dockview.css';
|
||||
import './VSCodeLayout.css';
|
||||
|
||||
// Wrappers para DockView optimizados
|
||||
const TaskDockWrapper = React.memo((props: IDockviewPanelProps) => <TaskDock />);
|
||||
const PropertiesDockWrapper = React.memo((props: IDockviewPanelProps) => <PropertiesDock />);
|
||||
const ConsoleDockWrapper = React.memo((props: IDockviewPanelProps) => <ConsoleDock />);
|
||||
const FileExplorerDockWrapper = React.memo((props: IDockviewPanelProps) => <FileExplorerDock />);
|
||||
|
||||
// Componentes disponibles
|
||||
const dockComponents = {
|
||||
tasks: TaskDockWrapper,
|
||||
properties: PropertiesDockWrapper,
|
||||
console: ConsoleDockWrapper,
|
||||
fileExplorer: FileExplorerDockWrapper,
|
||||
} as const;
|
||||
|
||||
// Interfaces
|
||||
interface DropZoneIndicatorProps {
|
||||
position: 'top' | 'bottom' | 'left' | 'right' | 'center';
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface ZoneDockViewProps {
|
||||
zone: ZoneType;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// Componente para indicadores de drop zone mejorados
|
||||
function DropZoneIndicator({ position, active }: DropZoneIndicatorProps) {
|
||||
if (!active) return null;
|
||||
|
||||
const positionClasses = {
|
||||
top: 'vscode-drop-indicator-top',
|
||||
bottom: 'vscode-drop-indicator-bottom',
|
||||
left: 'vscode-drop-indicator-left',
|
||||
right: 'vscode-drop-indicator-right',
|
||||
center: 'vscode-drop-indicator-center'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`vscode-drop-indicator ${positionClasses[position]}`}>
|
||||
<div className="vscode-drop-indicator-content">
|
||||
<Box p="md" style={{
|
||||
background: 'rgba(0, 123, 255, 0.1)',
|
||||
border: '2px dashed #007bff',
|
||||
borderRadius: '4px',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<Text size="sm" c="blue" fw={500}>
|
||||
{position === 'center' ? 'Soltar aquí para agregar pestañas' : `Soltar aquí para dividir ${position}`}
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Navbar personalizada mejorada
|
||||
function EnhancedNavbar() {
|
||||
const { toggleZone, zones, resetZones } = useDockStore();
|
||||
|
||||
const handleExportLayout = useCallback(() => {
|
||||
const layout = JSON.stringify(zones, null, 2);
|
||||
const blob = new Blob([layout], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'vscode-layout.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}, [zones]);
|
||||
|
||||
const handleImportLayout = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const layout = JSON.parse(e.target?.result as string);
|
||||
// Aquí implementarías la lógica para importar el layout
|
||||
console.log('Layout importado:', layout);
|
||||
} catch (error) {
|
||||
console.error('Error al importar layout:', error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Group justify="space-between" style={{ width: '100%' }}>
|
||||
<Group>
|
||||
<Text size="sm" fw={600} c="dark">
|
||||
VSCode Layout Consolidado
|
||||
</Text>
|
||||
<Badge size="xs" variant="light" color="blue">
|
||||
Drag & Drop Mejorado
|
||||
</Badge>
|
||||
<Text size="xs" c="dimmed">
|
||||
Arrastra pestañas para reordenar, dividir y mover entre zonas
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Group gap="xs">
|
||||
<Menu shadow="md" width={200}>
|
||||
<Menu.Target>
|
||||
<ActionIcon variant="light" size="sm">
|
||||
<IconMenu2 size={14} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
<Menu.Label>Layout</Menu.Label>
|
||||
<Menu.Item leftSection={<IconDownload size={14} />} onClick={handleExportLayout}>
|
||||
Exportar Layout
|
||||
</Menu.Item>
|
||||
<Menu.Item leftSection={<IconUpload size={14} />}>
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleImportLayout}
|
||||
id="import-layout"
|
||||
/>
|
||||
<label htmlFor="import-layout" style={{ cursor: 'pointer' }}>
|
||||
Importar Layout
|
||||
</label>
|
||||
</Menu.Item>
|
||||
<Menu.Item leftSection={<IconTrash size={14} />} color="red" onClick={resetZones}>
|
||||
Resetear Layout
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
|
||||
<ActionIcon
|
||||
variant={zones.sidebar.visible ? 'filled' : 'light'}
|
||||
onClick={() => toggleZone('sidebar')}
|
||||
size="sm"
|
||||
title="Toggle Sidebar"
|
||||
>
|
||||
<IconLayoutSidebar size={14} />
|
||||
</ActionIcon>
|
||||
|
||||
<ActionIcon
|
||||
variant={zones.asidebar.visible ? 'filled' : 'light'}
|
||||
onClick={() => toggleZone('asidebar')}
|
||||
size="sm"
|
||||
title="Toggle Right Panel"
|
||||
>
|
||||
<IconLayoutSidebar size={14} style={{ transform: 'scaleX(-1)' }} />
|
||||
</ActionIcon>
|
||||
|
||||
<ActionIcon
|
||||
variant={zones.bottom.visible ? 'filled' : 'light'}
|
||||
onClick={() => toggleZone('bottom')}
|
||||
size="sm"
|
||||
title="Toggle Bottom Panel"
|
||||
>
|
||||
<IconLayoutBottombar size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
// Componente principal para cada zona con funcionalidad mejorada
|
||||
function EnhancedZoneDockView({ zone, className }: ZoneDockViewProps) {
|
||||
const [api, setApi] = useState<DockviewReadyEvent>();
|
||||
const [dragOverPosition, setDragOverPosition] = useState<'top' | 'bottom' | 'left' | 'right' | 'center' | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const dragOverlayRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const {
|
||||
zones,
|
||||
movePanel,
|
||||
reorderPanel,
|
||||
removePanel,
|
||||
setActivePanel,
|
||||
draggedPanel,
|
||||
startDrag,
|
||||
endDrag,
|
||||
dropPanel,
|
||||
addPanel
|
||||
} = useDockStore();
|
||||
|
||||
const zoneData = zones[zone];
|
||||
|
||||
// Configuración inicial de DockView
|
||||
const onReady = useCallback((event: DockviewReadyEvent) => {
|
||||
setApi(event);
|
||||
|
||||
// Limpiar paneles existentes
|
||||
event.api.clear();
|
||||
|
||||
// Agregar paneles con configuración mejorada
|
||||
let lastPanel: any = null;
|
||||
|
||||
zoneData.panels.forEach((panel, index) => {
|
||||
const panelConfig: any = {
|
||||
id: panel.id,
|
||||
component: panel.component,
|
||||
title: panel.title,
|
||||
params: { ...panel.props, panelId: panel.id, zone }
|
||||
};
|
||||
|
||||
// Configurar posicionamiento para crear splits inteligentes
|
||||
if (lastPanel && index > 0) {
|
||||
const directions = zone === 'center' ? ['right', 'below'] : ['below', 'right'];
|
||||
const direction = directions[index % directions.length];
|
||||
|
||||
panelConfig.position = {
|
||||
direction,
|
||||
referencePanel: lastPanel,
|
||||
};
|
||||
}
|
||||
|
||||
const newPanel = event.api.addPanel(panelConfig);
|
||||
lastPanel = newPanel;
|
||||
});
|
||||
|
||||
// Activar panel inicial
|
||||
if (zoneData.activePanel) {
|
||||
const activePanel = event.api.getPanel(zoneData.activePanel);
|
||||
activePanel?.api.setActive();
|
||||
}
|
||||
}, [zoneData.panels, zoneData.activePanel, zone]);
|
||||
|
||||
// Eventos mejorados de DockView con logs de depuración
|
||||
useEffect(() => {
|
||||
if (!api) return;
|
||||
|
||||
console.log(`🎮 [${zone}] Setting up DockView event listeners`);
|
||||
|
||||
// Manejar cambios de pestañas activas
|
||||
const handleActiveChange = (event: any) => {
|
||||
console.log(`🎯 [${zone}] Active panel change:`, { newPanel: event?.panel?.id, currentActive: zoneData.activePanel });
|
||||
if (event?.panel?.id && event.panel.id !== zoneData.activePanel) {
|
||||
setActivePanel(zone, event.panel.id);
|
||||
}
|
||||
};
|
||||
|
||||
// Manejar cierre de paneles
|
||||
const handlePanelRemove = (event: any) => {
|
||||
console.log(`❌ [${zone}] Panel remove:`, event?.panel?.id);
|
||||
if (event?.panel?.id) {
|
||||
removePanel(zone, event.panel.id);
|
||||
}
|
||||
};
|
||||
|
||||
// Manejar inicio de drag
|
||||
const handleDragStart = (event: any) => {
|
||||
console.log(`🎯 [${zone}] Drag start:`, event?.panel?.id);
|
||||
if (event?.panel?.id) {
|
||||
const panel = zoneData.panels.find(p => p.id === event.panel.id);
|
||||
if (panel) {
|
||||
startDrag(panel, zone);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Manejar drop interno (para futuras mejoras)
|
||||
const handleDrop = (event: any) => {
|
||||
console.log(`📥 [${zone}] Drop event:`, event);
|
||||
// No hacer endDrag aquí, se hace en dropPanel
|
||||
};
|
||||
|
||||
// ✅ Manejar movimiento/reordenamiento de paneles dentro de la zona
|
||||
const handlePanelMove = (event: any) => {
|
||||
console.log(`🔄 [${zone}] Panel move event:`, {
|
||||
panelId: event?.panel?.id,
|
||||
fromIndex: event?.fromIndex,
|
||||
toIndex: event?.toIndex
|
||||
});
|
||||
|
||||
if (event?.panel?.id && typeof event?.toIndex === 'number') {
|
||||
reorderPanel(zone, event.panel.id, event.toIndex);
|
||||
}
|
||||
};
|
||||
|
||||
// ✅ Registrar todos los eventos con verificación
|
||||
const unsubscribers: Array<{ dispose?: () => void }> = [];
|
||||
|
||||
try {
|
||||
unsubscribers.push(api.api.onDidActivePanelChange(handleActiveChange));
|
||||
unsubscribers.push(api.api.onDidRemovePanel(handlePanelRemove));
|
||||
unsubscribers.push(api.api.onWillDragPanel(handleDragStart));
|
||||
unsubscribers.push(api.api.onDidDrop(handleDrop));
|
||||
|
||||
// Verificar si onDidMovePanel existe antes de usarlo
|
||||
if (typeof api.api.onDidMovePanel === 'function') {
|
||||
unsubscribers.push(api.api.onDidMovePanel(handlePanelMove));
|
||||
console.log(`✅ [${zone}] onDidMovePanel registered`);
|
||||
} else {
|
||||
console.log(`⚠️ [${zone}] onDidMovePanel not available`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ [${zone}] Error setting up event listeners:`, error);
|
||||
}
|
||||
|
||||
return () => {
|
||||
console.log(`🧹 [${zone}] Cleaning up event listeners`);
|
||||
unsubscribers.forEach(unsubscribe => {
|
||||
try {
|
||||
unsubscribe?.dispose?.();
|
||||
} catch (error) {
|
||||
console.warn(`⚠️ [${zone}] Error disposing listener:`, error);
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [api, zone, zoneData.panels, zoneData.activePanel, setActivePanel, removePanel, startDrag, endDrag, reorderPanel]);
|
||||
|
||||
// Lógica mejorada de drag & drop entre zonas
|
||||
const calculateDropPosition = useCallback((e: React.DragEvent, container: HTMLElement) => {
|
||||
const rect = container.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
const threshold = 0.25; // 25% del área para detectar bordes
|
||||
|
||||
// Detectar posición basada en dónde está el cursor
|
||||
if (y < rect.height * threshold) return 'top';
|
||||
if (y > rect.height * (1 - threshold)) return 'bottom';
|
||||
if (x < rect.width * threshold) return 'left';
|
||||
if (x > rect.width * (1 - threshold)) return 'right';
|
||||
|
||||
return 'center';
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
if (!draggedPanel || !containerRef.current) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const position = calculateDropPosition(e, containerRef.current);
|
||||
setDragOverPosition(position);
|
||||
}, [draggedPanel, calculateDropPosition]);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
// Solo ocultar si realmente salimos del contenedor
|
||||
if (!containerRef.current?.contains(e.relatedTarget as Node)) {
|
||||
setDragOverPosition(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
console.log(`📥 [${zone}] Handle drop - draggedPanel:`, draggedPanel, 'position:', dragOverPosition);
|
||||
|
||||
if (!draggedPanel || !dragOverPosition) {
|
||||
console.log(`❌ [${zone}] Drop cancelled - missing draggedPanel or position`);
|
||||
setDragOverPosition(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// ✅ Usar dropPanel con la posición detectada
|
||||
dropPanel(zone, dragOverPosition);
|
||||
|
||||
// ✅ Limpiar indicadores
|
||||
setDragOverPosition(null);
|
||||
}, [draggedPanel, dragOverPosition, dropPanel, zone]);
|
||||
|
||||
// Componente para agregar paneles rápidamente
|
||||
const QuickAddButtons = () => (
|
||||
<Box p="xs">
|
||||
<Text size="xs" mb="xs" fw={500} c="dimmed">Agregar:</Text>
|
||||
<Group gap="xs">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
onClick={() => addPanel(zone, {
|
||||
id: `tasks-${Date.now()}`,
|
||||
title: 'Tareas',
|
||||
component: 'tasks',
|
||||
closable: true,
|
||||
})}
|
||||
>
|
||||
Tareas
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
onClick={() => addPanel(zone, {
|
||||
id: `explorer-${Date.now()}`,
|
||||
title: 'Explorador',
|
||||
component: 'fileExplorer',
|
||||
closable: true,
|
||||
})}
|
||||
>
|
||||
Explorador
|
||||
</Button>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
|
||||
if (!zoneData.visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={containerRef}
|
||||
className={`vscode-zone-container ${className || ''}`}
|
||||
style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
minHeight: '200px'
|
||||
}}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{zoneData.panels.length === 0 ? (
|
||||
<Box
|
||||
style={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'var(--mantine-color-gray-0)',
|
||||
border: '1px dashed var(--mantine-color-gray-4)',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
Zona {zone} vacía
|
||||
</Text>
|
||||
<QuickAddButtons />
|
||||
</Box>
|
||||
) : (
|
||||
<Box style={{ height: '100%', width: '100%' }}>
|
||||
<DockviewReact
|
||||
onReady={onReady}
|
||||
components={dockComponents}
|
||||
className="dockview-theme-light vscode-dockview-enhanced"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Indicadores de drop zone mejorados */}
|
||||
<DropZoneIndicator position="top" active={dragOverPosition === 'top'} />
|
||||
<DropZoneIndicator position="bottom" active={dragOverPosition === 'bottom'} />
|
||||
<DropZoneIndicator position="left" active={dragOverPosition === 'left'} />
|
||||
<DropZoneIndicator position="right" active={dragOverPosition === 'right'} />
|
||||
<DropZoneIndicator position="center" active={dragOverPosition === 'center'} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Componente principal consolidado
|
||||
export function VSCodeDockViewConsolidated() {
|
||||
const { zones } = useDockStore();
|
||||
|
||||
const layoutState = {
|
||||
navbarHeight: 40,
|
||||
sidebarWidth: 280,
|
||||
asidebarWidth: 320,
|
||||
bottomHeight: 220,
|
||||
sidebarVisible: zones.sidebar.visible,
|
||||
asidebarVisible: zones.asidebar.visible,
|
||||
bottomVisible: zones.bottom.visible,
|
||||
};
|
||||
|
||||
return (
|
||||
<VSCodeLayout
|
||||
initialLayout={layoutState}
|
||||
navbar={<EnhancedNavbar />}
|
||||
sidebar={
|
||||
<EnhancedZoneDockView zone="sidebar" className="vscode-sidebar" />
|
||||
}
|
||||
asidebar={
|
||||
<EnhancedZoneDockView zone="asidebar" className="vscode-asidebar" />
|
||||
}
|
||||
bottom={
|
||||
<EnhancedZoneDockView zone="bottom" className="vscode-bottom" />
|
||||
}
|
||||
onLayoutChange={(layout) => {
|
||||
console.log('Layout changed:', layout);
|
||||
// Persistir cambios si es necesario
|
||||
}}
|
||||
>
|
||||
<EnhancedZoneDockView zone="center" className="vscode-center" />
|
||||
</VSCodeLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,482 @@
|
||||
/* VSCode Layout Styles */
|
||||
|
||||
.vscode-layout {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-zone {
|
||||
background-color: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-zone.navbar {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #d0d7de;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.layout-zone.sidebar {
|
||||
background-color: #f6f8fa;
|
||||
border-right: 1px solid #d0d7de;
|
||||
}
|
||||
|
||||
.layout-zone.asidebar {
|
||||
background-color: #f6f8fa;
|
||||
border-left: 1px solid #d0d7de;
|
||||
}
|
||||
|
||||
.layout-zone.bottom {
|
||||
background-color: #f6f8fa;
|
||||
border-top: 1px solid #d0d7de;
|
||||
}
|
||||
|
||||
.layout-zone.center {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Resize Handles */
|
||||
.resize-handle {
|
||||
background-color: transparent;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.resize-handle:hover {
|
||||
background-color: #0078d4;
|
||||
}
|
||||
|
||||
.resize-handle-vertical {
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
}
|
||||
|
||||
.resize-handle-horizontal {
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.resize-handle-vertical:hover {
|
||||
border-left-color: #0078d4;
|
||||
border-right-color: #0078d4;
|
||||
}
|
||||
|
||||
.resize-handle-horizontal:hover {
|
||||
border-top-color: #0078d4;
|
||||
border-bottom-color: #0078d4;
|
||||
}
|
||||
|
||||
/* Zone Content Containers */
|
||||
.zone-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.zone-header {
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #d0d7de;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #656d76;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
min-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.zone-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Buttons in zone headers */
|
||||
.zone-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.zone-action-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #656d76;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.zone-action-btn:hover {
|
||||
background-color: #e0e0e0;
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
/* Drag and Drop Indicators */
|
||||
.drop-zone-indicator {
|
||||
position: absolute;
|
||||
border: 2px dashed #0078d4;
|
||||
background-color: rgba(0, 120, 212, 0.1);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.drop-zone-active {
|
||||
background-color: rgba(0, 120, 212, 0.05);
|
||||
border: 2px solid #0078d4;
|
||||
}
|
||||
|
||||
/* Panel Tabs */
|
||||
.zone-tabs {
|
||||
display: flex;
|
||||
background-color: #f6f8fa;
|
||||
border-bottom: 1px solid #d0d7de;
|
||||
min-height: 32px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.zone-tab {
|
||||
padding: 6px 12px;
|
||||
border-right: 1px solid #d0d7de;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #656d76;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.zone-tab:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.zone-tab.active {
|
||||
background-color: white;
|
||||
color: #24292f;
|
||||
border-bottom: 2px solid #0078d4;
|
||||
}
|
||||
|
||||
.zone-tab-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #656d76;
|
||||
font-size: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.zone-tab:hover .zone-tab-close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zone-tab-close:hover {
|
||||
background-color: #e0e0e0;
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
/* Empty zone states */
|
||||
.empty-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #656d76;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.empty-zone-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-zone-text {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-zone-subtext {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.layout-zone {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.resize-handle {
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
.zone-content::-webkit-scrollbar,
|
||||
.zone-tabs::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.zone-content::-webkit-scrollbar-track,
|
||||
.zone-tabs::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.zone-content::-webkit-scrollbar-thumb,
|
||||
.zone-tabs::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.zone-content::-webkit-scrollbar-thumb:hover,
|
||||
.zone-tabs::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Enhanced Drop Zone Indicators */
|
||||
.vscode-drop-indicator {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
animation: vscode-drop-fade-in 0.2s ease forwards;
|
||||
}
|
||||
|
||||
.vscode-drop-indicator-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.vscode-drop-indicator-bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.vscode-drop-indicator-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.vscode-drop-indicator-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.vscode-drop-indicator-center {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
bottom: 25%;
|
||||
}
|
||||
|
||||
.vscode-drop-indicator-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
/* Enhanced Zone Container */
|
||||
.vscode-zone-container {
|
||||
position: relative;
|
||||
background: var(--mantine-color-gray-0);
|
||||
border: 1px solid var(--mantine-color-gray-3);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vscode-zone-container.vscode-sidebar {
|
||||
border-right: 2px solid var(--mantine-color-gray-3);
|
||||
}
|
||||
|
||||
.vscode-zone-container.vscode-asidebar {
|
||||
border-left: 2px solid var(--mantine-color-gray-3);
|
||||
}
|
||||
|
||||
.vscode-zone-container.vscode-bottom {
|
||||
border-top: 2px solid var(--mantine-color-gray-3);
|
||||
}
|
||||
|
||||
.vscode-zone-container.vscode-center {
|
||||
border: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Enhanced DockView Theme */
|
||||
.vscode-dockview-enhanced {
|
||||
--dockview-tab-height: 35px;
|
||||
--dockview-tab-background: var(--mantine-color-gray-1);
|
||||
--dockview-tab-background-active: white;
|
||||
--dockview-tab-border: var(--mantine-color-gray-3);
|
||||
--dockview-tab-text: var(--mantine-color-gray-7);
|
||||
--dockview-tab-text-active: var(--mantine-color-gray-9);
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-tab {
|
||||
background: var(--dockview-tab-background);
|
||||
border-right: 1px solid var(--dockview-tab-border);
|
||||
color: var(--dockview-tab-text);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-tab:hover {
|
||||
background: var(--mantine-color-gray-2);
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-tab.dv-active {
|
||||
background: var(--dockview-tab-background-active);
|
||||
color: var(--dockview-tab-text-active);
|
||||
border-bottom: 2px solid var(--mantine-color-blue-6);
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-tab-close-action {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
border-radius: 3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-tab:hover .dv-tab-close-action {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-tab-close-action:hover {
|
||||
background: var(--mantine-color-gray-4);
|
||||
}
|
||||
|
||||
/* Drag indicators for tabs */
|
||||
.vscode-dockview-enhanced .dv-tab.dv-dragging {
|
||||
opacity: 0.7;
|
||||
transform: rotate(2deg);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Group drag indicators */
|
||||
.vscode-dockview-enhanced .dv-drop-target-dropzone {
|
||||
border: 2px dashed var(--mantine-color-blue-5) !important;
|
||||
background: rgba(59, 130, 246, 0.1) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-drop-target-dropzone::before {
|
||||
content: 'Soltar aquí';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--mantine-color-blue-6);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
/* Animation keyframes */
|
||||
@keyframes vscode-drop-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Panel content enhancements */
|
||||
.vscode-dockview-enhanced .dv-content {
|
||||
background: white;
|
||||
border-top: 1px solid var(--mantine-color-gray-3);
|
||||
}
|
||||
|
||||
/* Splitter enhancements */
|
||||
.vscode-dockview-enhanced .dv-splitter {
|
||||
background: var(--mantine-color-gray-3);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-splitter:hover {
|
||||
background: var(--mantine-color-blue-5);
|
||||
}
|
||||
|
||||
/* Group enhancements */
|
||||
.vscode-dockview-enhanced .dv-group {
|
||||
border: 1px solid var(--mantine-color-gray-3);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-group:focus-within {
|
||||
border-color: var(--mantine-color-blue-5);
|
||||
box-shadow: 0 0 0 1px var(--mantine-color-blue-5);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.layout-zone.sidebar,
|
||||
.layout-zone.asidebar {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.layout-zone.bottom {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.zone-tab {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.vscode-dockview-enhanced .dv-tab {
|
||||
min-width: 80px;
|
||||
max-width: 120px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import { Box } from '@mantine/core';
|
||||
import './VSCodeLayout.css';
|
||||
|
||||
interface LayoutState {
|
||||
navbarHeight: number;
|
||||
sidebarWidth: number;
|
||||
asidebarWidth: number;
|
||||
bottomHeight: number;
|
||||
sidebarVisible: boolean;
|
||||
asidebarVisible: boolean;
|
||||
bottomVisible: boolean;
|
||||
}
|
||||
|
||||
interface VSCodeLayoutProps {
|
||||
navbar?: React.ReactNode;
|
||||
sidebar?: React.ReactNode;
|
||||
asidebar?: React.ReactNode;
|
||||
bottom?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
onLayoutChange?: (layout: LayoutState) => void;
|
||||
initialLayout?: Partial<LayoutState>;
|
||||
}
|
||||
|
||||
const DEFAULT_LAYOUT: LayoutState = {
|
||||
navbarHeight: 40,
|
||||
sidebarWidth: 250,
|
||||
asidebarWidth: 300,
|
||||
bottomHeight: 200,
|
||||
sidebarVisible: true,
|
||||
asidebarVisible: true,
|
||||
bottomVisible: true,
|
||||
};
|
||||
|
||||
export function VSCodeLayout({
|
||||
navbar,
|
||||
sidebar,
|
||||
asidebar,
|
||||
bottom,
|
||||
children,
|
||||
onLayoutChange,
|
||||
initialLayout
|
||||
}: VSCodeLayoutProps) {
|
||||
const [layout, setLayout] = useState<LayoutState>(() => ({
|
||||
...DEFAULT_LAYOUT,
|
||||
...initialLayout
|
||||
}));
|
||||
const [isResizing, setIsResizing] = useState<string | null>(null);
|
||||
const layoutRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Refs para las posiciones iniciales del mouse
|
||||
const initialMousePos = useRef({ x: 0, y: 0 });
|
||||
const initialSizes = useRef<Partial<LayoutState>>({});
|
||||
|
||||
// Sincronizar con initialLayout cuando cambie
|
||||
useEffect(() => {
|
||||
if (initialLayout) {
|
||||
setLayout(prev => ({
|
||||
...prev,
|
||||
...initialLayout
|
||||
}));
|
||||
}
|
||||
}, [initialLayout]);
|
||||
|
||||
const updateLayout = useCallback((newLayout: Partial<LayoutState>) => {
|
||||
setLayout(prev => {
|
||||
const updated = { ...prev, ...newLayout };
|
||||
onLayoutChange?.(updated);
|
||||
return updated;
|
||||
});
|
||||
}, [onLayoutChange]);
|
||||
|
||||
const handleMouseDown = useCallback((direction: string, e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setIsResizing(direction);
|
||||
initialMousePos.current = { x: e.clientX, y: e.clientY };
|
||||
initialSizes.current = { ...layout };
|
||||
|
||||
document.body.style.cursor = direction.includes('horizontal') ? 'ew-resize' : 'ns-resize';
|
||||
document.body.style.userSelect = 'none';
|
||||
}, [layout]);
|
||||
|
||||
const handleMouseMove = useCallback((e: MouseEvent) => {
|
||||
if (!isResizing || !layoutRef.current) {return;}
|
||||
|
||||
const deltaX = e.clientX - initialMousePos.current.x;
|
||||
const deltaY = e.clientY - initialMousePos.current.y;
|
||||
const containerRect = layoutRef.current.getBoundingClientRect();
|
||||
|
||||
switch (isResizing) {
|
||||
case 'sidebar-horizontal':
|
||||
updateLayout({
|
||||
sidebarWidth: Math.max(100, Math.min(600, (initialSizes.current.sidebarWidth || 0) + deltaX))
|
||||
});
|
||||
break;
|
||||
|
||||
case 'asidebar-horizontal':
|
||||
updateLayout({
|
||||
asidebarWidth: Math.max(100, Math.min(600, (initialSizes.current.asidebarWidth || 0) - deltaX))
|
||||
});
|
||||
break;
|
||||
|
||||
case 'bottom-vertical':
|
||||
updateLayout({
|
||||
bottomHeight: Math.max(100, Math.min(400, (initialSizes.current.bottomHeight || 0) - deltaY))
|
||||
});
|
||||
break;
|
||||
}
|
||||
}, [isResizing, updateLayout]);
|
||||
|
||||
const handleMouseUp = useCallback(() => {
|
||||
setIsResizing(null);
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isResizing) {
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}
|
||||
}, [isResizing, handleMouseMove, handleMouseUp]);
|
||||
|
||||
// Generar grid dinámico que se expande automáticamente
|
||||
const generateGridTemplate = () => {
|
||||
// Determinar columnas basadas en visibilidad
|
||||
const columns = [];
|
||||
const navbarCells = [];
|
||||
const middleCells = [];
|
||||
const bottomCells = [];
|
||||
|
||||
// Columna izquierda (sidebar)
|
||||
if (layout.sidebarVisible) {
|
||||
columns.push(`${layout.sidebarWidth}px`);
|
||||
navbarCells.push('navbar');
|
||||
middleCells.push('sidebar');
|
||||
bottomCells.push(layout.bottomVisible ? 'sidebar' : 'sidebar');
|
||||
}
|
||||
|
||||
// Columna central (siempre presente)
|
||||
columns.push('1fr');
|
||||
navbarCells.push('navbar');
|
||||
middleCells.push('center');
|
||||
bottomCells.push(layout.bottomVisible ? 'bottom' : 'center');
|
||||
|
||||
// Columna derecha (asidebar)
|
||||
if (layout.asidebarVisible) {
|
||||
columns.push(`${layout.asidebarWidth}px`);
|
||||
navbarCells.push('navbar');
|
||||
middleCells.push('asidebar');
|
||||
bottomCells.push(layout.bottomVisible ? 'asidebar' : 'asidebar');
|
||||
}
|
||||
|
||||
// Construir template areas - solo incluir filas que tienen contenido
|
||||
const rows = [navbarCells.join(' ')];
|
||||
rows.push(middleCells.join(' '));
|
||||
|
||||
// Solo agregar la fila bottom si el panel bottom está visible
|
||||
if (layout.bottomVisible) {
|
||||
rows.push(bottomCells.join(' '));
|
||||
}
|
||||
|
||||
const gridTemplateAreas = `"${rows.join('" "')}"`;
|
||||
|
||||
const gridTemplateColumns = columns.join(' ');
|
||||
|
||||
// Construir filas dinámicamente
|
||||
const gridRows = [`${layout.navbarHeight}px`, '1fr'];
|
||||
if (layout.bottomVisible) {
|
||||
gridRows.push(`${layout.bottomHeight}px`);
|
||||
}
|
||||
const gridTemplateRows = gridRows.join(' ');
|
||||
|
||||
return { gridTemplateAreas, gridTemplateColumns, gridTemplateRows };
|
||||
};
|
||||
|
||||
const { gridTemplateAreas, gridTemplateColumns, gridTemplateRows } = generateGridTemplate();
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={layoutRef}
|
||||
className="vscode-layout"
|
||||
style={{
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
display: 'grid',
|
||||
gridTemplateAreas,
|
||||
gridTemplateColumns,
|
||||
gridTemplateRows,
|
||||
gap: '1px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* Navbar */}
|
||||
<Box className="layout-zone navbar" style={{ gridArea: 'navbar' }}>
|
||||
{navbar}
|
||||
</Box>
|
||||
|
||||
{/* Sidebar */}
|
||||
{layout.sidebarVisible && (
|
||||
<>
|
||||
<Box className="layout-zone sidebar" style={{ gridArea: 'sidebar' }}>
|
||||
{sidebar}
|
||||
</Box>
|
||||
<Box
|
||||
className="resize-handle resize-handle-vertical"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: `${layout.navbarHeight}px`,
|
||||
left: `${layout.sidebarWidth - 2}px`,
|
||||
width: '4px',
|
||||
height: `calc(100vh - ${layout.navbarHeight}px)`,
|
||||
cursor: 'ew-resize',
|
||||
backgroundColor: 'transparent',
|
||||
zIndex: 1000,
|
||||
}}
|
||||
onMouseDown={(e: React.MouseEvent) => handleMouseDown('sidebar-horizontal', e)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Center */}
|
||||
<Box className="layout-zone center" style={{ gridArea: 'center' }}>
|
||||
{children}
|
||||
</Box>
|
||||
|
||||
{/* Asidebar */}
|
||||
{layout.asidebarVisible && (
|
||||
<>
|
||||
<Box className="layout-zone asidebar" style={{ gridArea: 'asidebar' }}>
|
||||
{asidebar}
|
||||
</Box>
|
||||
<Box
|
||||
className="resize-handle resize-handle-vertical"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: `${layout.navbarHeight}px`,
|
||||
right: `${layout.asidebarWidth - 2}px`,
|
||||
width: '4px',
|
||||
height: `calc(100vh - ${layout.navbarHeight}px)`,
|
||||
cursor: 'ew-resize',
|
||||
backgroundColor: 'transparent',
|
||||
zIndex: 1000,
|
||||
}}
|
||||
onMouseDown={(e: React.MouseEvent) => handleMouseDown('asidebar-horizontal', e)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Bottom */}
|
||||
{layout.bottomVisible && (
|
||||
<>
|
||||
<Box className="layout-zone bottom" style={{ gridArea: 'bottom' }}>
|
||||
{bottom}
|
||||
</Box>
|
||||
<Box
|
||||
className="resize-handle resize-handle-horizontal"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: `${layout.bottomHeight - 2}px`,
|
||||
left: layout.sidebarVisible ? `${layout.sidebarWidth}px` : '0px',
|
||||
right: layout.asidebarVisible ? `${layout.asidebarWidth}px` : '0px',
|
||||
height: '4px',
|
||||
cursor: 'ns-resize',
|
||||
backgroundColor: 'transparent',
|
||||
zIndex: 1000,
|
||||
}}
|
||||
onMouseDown={(e: React.MouseEvent) => handleMouseDown('bottom-vertical', e)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Overlay durante el redimensionamiento */}
|
||||
{isResizing && (
|
||||
<Box
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
zIndex: 9999,
|
||||
cursor: isResizing.includes('horizontal') ? 'ew-resize' : 'ns-resize',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
// Exportaciones principales del VSCode Layout Consolidado
|
||||
export { VSCodeLayout } from './VSCodeLayout';
|
||||
export { VSCodeDockViewConsolidated } from './VSCodeDockViewConsolidated';
|
||||
export {
|
||||
useLayoutPersistence,
|
||||
useAutoSaveLayout,
|
||||
LayoutExportImport,
|
||||
LayoutUtils
|
||||
} from './LayoutPersistence';
|
||||
|
||||
// Tipos del store
|
||||
export type { Panel, Zone, ZoneType, DraggedPanel } from '../../stores/useDockStore';
|
||||
@@ -0,0 +1,10 @@
|
||||
.title {
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
font-size: rem(100px);
|
||||
font-weight: 900;
|
||||
letter-spacing: rem(-2px);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-md) {
|
||||
font-size: rem(50px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
export default {
|
||||
title: 'Welcome',
|
||||
};
|
||||
|
||||
export const Usage = () => <Welcome />;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { render, screen } from '@test-utils';
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
describe('Welcome component', () => {
|
||||
it('has correct Vite guide link', () => {
|
||||
render(<Welcome />);
|
||||
expect(screen.getByText('this guide')).toHaveAttribute(
|
||||
'href',
|
||||
'https://mantine.dev/guides/vite/'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Anchor, Text, Title, Button, Group } from '@mantine/core';
|
||||
import { Link } from 'react-router-dom';
|
||||
import classes from './Welcome.module.css';
|
||||
|
||||
export function Welcome() {
|
||||
return (
|
||||
<>
|
||||
<Title className={classes.title} ta="center" mt={100}>
|
||||
Welcome to{' '}
|
||||
<Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
|
||||
Mantine
|
||||
</Text>
|
||||
</Title>
|
||||
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
|
||||
Esta aplicación incluye una implementación completa de DockView con Mantine. Los docks se pueden
|
||||
mover, redimensionar e interactuar entre ellos proporcionando una experiencia de interfaz modular.
|
||||
</Text>
|
||||
|
||||
<Group justify="center" mt="xl" gap="md">
|
||||
<Button
|
||||
component={Link}
|
||||
to="/dockview"
|
||||
size="lg"
|
||||
variant="gradient"
|
||||
gradient={{ from: 'pink', to: 'yellow' }}
|
||||
>
|
||||
DockView Simple
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
component={Link}
|
||||
to="/vscode-layout"
|
||||
size="lg"
|
||||
variant="gradient"
|
||||
gradient={{ from: 'blue', to: 'cyan' }}
|
||||
>
|
||||
VSCode Layout
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import { Box, Text, ScrollArea, Code, Group, ActionIcon, Badge } from '@mantine/core';
|
||||
import { IconTrash, IconDownload } from '@tabler/icons-react';
|
||||
import { useState, useEffect, useCallback, memo } from 'react';
|
||||
|
||||
interface LogEntry {
|
||||
id: string;
|
||||
timestamp: Date;
|
||||
level: 'info' | 'warning' | 'error' | 'success';
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface ConsoleDockProps {
|
||||
onLogAdd?: (log: LogEntry) => void;
|
||||
}
|
||||
|
||||
function ConsoleDockComponent({ onLogAdd }: ConsoleDockProps) {
|
||||
const [logs, setLogs] = useState<LogEntry[]>([
|
||||
{
|
||||
id: '1',
|
||||
timestamp: new Date(),
|
||||
level: 'info',
|
||||
message: 'Aplicación iniciada correctamente'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
timestamp: new Date(Date.now() - 5000),
|
||||
level: 'success',
|
||||
message: 'Dockview configurado exitosamente'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
timestamp: new Date(Date.now() - 10000),
|
||||
level: 'warning',
|
||||
message: 'Algunos componentes están en desarrollo'
|
||||
}
|
||||
]);
|
||||
|
||||
const addLog = (level: LogEntry['level'], message: string) => {
|
||||
const newLog: LogEntry = {
|
||||
id: Date.now().toString(),
|
||||
timestamp: new Date(),
|
||||
level,
|
||||
message
|
||||
};
|
||||
setLogs(prev => [newLog, ...prev]);
|
||||
onLogAdd?.(newLog);
|
||||
};
|
||||
|
||||
const clearLogs = () => {
|
||||
setLogs([]);
|
||||
};
|
||||
|
||||
const exportLogs = () => {
|
||||
const logText = logs.map(log =>
|
||||
`[${log.timestamp.toISOString()}] ${log.level.toUpperCase()}: ${log.message}`
|
||||
).join('\n');
|
||||
|
||||
const blob = new Blob([logText], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'console-logs.txt';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const getLogColor = (level: LogEntry['level']) => {
|
||||
switch (level) {
|
||||
case 'error': return 'red';
|
||||
case 'warning': return 'yellow';
|
||||
case 'success': return 'green';
|
||||
default: return 'blue';
|
||||
}
|
||||
};
|
||||
|
||||
// Simular algunos logs automáticos
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const messages = [
|
||||
{ level: 'info' as const, message: 'Actualizando estado de componentes...' },
|
||||
{ level: 'success' as const, message: 'Datos sincronizados correctamente' },
|
||||
{ level: 'warning' as const, message: 'Conexión lenta detectada' },
|
||||
];
|
||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
||||
if (Math.random() > 0.8) { // 20% de probabilidad
|
||||
addLog(randomMessage.level, randomMessage.message);
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box p="md" h="100%">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Text size="lg" fw={600}>Consola</Text>
|
||||
<Group gap="xs">
|
||||
<ActionIcon onClick={exportLogs} variant="light" size="sm">
|
||||
<IconDownload size={14} />
|
||||
</ActionIcon>
|
||||
<ActionIcon onClick={clearLogs} variant="light" color="red" size="sm">
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<ScrollArea h="calc(100% - 60px)" type="auto">
|
||||
{logs.length === 0 ? (
|
||||
<Text c="dimmed" ta="center" mt="xl">No hay logs disponibles</Text>
|
||||
) : (
|
||||
logs.map((log) => (
|
||||
<Box key={log.id} mb="xs" p="xs" style={{
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '4px',
|
||||
borderLeftColor: getLogColor(log.level),
|
||||
borderLeftWidth: '4px'
|
||||
}}>
|
||||
<Group justify="space-between" mb="xs">
|
||||
<Badge size="xs" color={getLogColor(log.level)}>
|
||||
{log.level.toUpperCase()}
|
||||
</Badge>
|
||||
<Text size="xs" c="dimmed">
|
||||
{log.timestamp.toLocaleTimeString()}
|
||||
</Text>
|
||||
</Group>
|
||||
<Code block style={{ backgroundColor: 'transparent', border: 'none', padding: 0 }}>
|
||||
{log.message}
|
||||
</Code>
|
||||
</Box>
|
||||
))
|
||||
)}
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export const ConsoleDock = memo(ConsoleDockComponent);
|
||||
@@ -0,0 +1,177 @@
|
||||
import { Box, Text, Tree, Group, ActionIcon, Modal, TextInput, Button } from '@mantine/core';
|
||||
import { IconFolder, IconFile, IconPlus, IconTrash, IconEdit } from '@tabler/icons-react';
|
||||
import { useState } from 'react';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
|
||||
interface FileNode {
|
||||
value: string;
|
||||
label: string;
|
||||
children?: FileNode[];
|
||||
type: 'file' | 'folder';
|
||||
}
|
||||
|
||||
interface FileExplorerDockProps {
|
||||
onFileSelect?: (file: FileNode) => void;
|
||||
}
|
||||
|
||||
export function FileExplorerDock({ onFileSelect }: FileExplorerDockProps) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [newItemName, setNewItemName] = useState('');
|
||||
const [newItemType, setNewItemType] = useState<'file' | 'folder'>('file');
|
||||
const [selectedNode, setSelectedNode] = useState<string>('');
|
||||
|
||||
const [treeData, setTreeData] = useState<FileNode[]>([
|
||||
{
|
||||
value: 'src',
|
||||
label: 'src',
|
||||
type: 'folder',
|
||||
children: [
|
||||
{
|
||||
value: 'src/components',
|
||||
label: 'components',
|
||||
type: 'folder',
|
||||
children: [
|
||||
{ value: 'src/components/App.tsx', label: 'App.tsx', type: 'file' },
|
||||
{ value: 'src/components/Header.tsx', label: 'Header.tsx', type: 'file' },
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'src/pages',
|
||||
label: 'pages',
|
||||
type: 'folder',
|
||||
children: [
|
||||
{ value: 'src/pages/Home.tsx', label: 'Home.tsx', type: 'file' },
|
||||
{ value: 'src/pages/About.tsx', label: 'About.tsx', type: 'file' },
|
||||
]
|
||||
},
|
||||
{ value: 'src/index.tsx', label: 'index.tsx', type: 'file' },
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'public',
|
||||
label: 'public',
|
||||
type: 'folder',
|
||||
children: [
|
||||
{ value: 'public/index.html', label: 'index.html', type: 'file' },
|
||||
{ value: 'public/favicon.ico', label: 'favicon.ico', type: 'file' },
|
||||
]
|
||||
},
|
||||
{ value: 'package.json', label: 'package.json', type: 'file' },
|
||||
{ value: 'README.md', label: 'README.md', type: 'file' },
|
||||
]);
|
||||
|
||||
const renderTreeLabel = (node: FileNode) => (
|
||||
<Group gap="xs">
|
||||
{node.type === 'folder' ? <IconFolder size={16} /> : <IconFile size={16} />}
|
||||
<Text size="sm">{node.label}</Text>
|
||||
</Group>
|
||||
);
|
||||
|
||||
const handleNodeSelect = (value: string) => {
|
||||
setSelectedNode(value);
|
||||
const findNode = (nodes: FileNode[], value: string): FileNode | null => {
|
||||
for (const node of nodes) {
|
||||
if (node.value === value) {return node;}
|
||||
if (node.children) {
|
||||
const found = findNode(node.children, value);
|
||||
if (found) {return found;}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const node = findNode(treeData, value);
|
||||
if (node) {
|
||||
onFileSelect?.(node);
|
||||
}
|
||||
};
|
||||
|
||||
const addNewItem = () => {
|
||||
if (!newItemName.trim()) {return;}
|
||||
|
||||
const newItem: FileNode = {
|
||||
value: `new-${Date.now()}`,
|
||||
label: newItemName,
|
||||
type: newItemType,
|
||||
children: newItemType === 'folder' ? [] : undefined,
|
||||
};
|
||||
|
||||
setTreeData(prev => [...prev, newItem]);
|
||||
setNewItemName('');
|
||||
close();
|
||||
};
|
||||
|
||||
const deleteSelectedItem = () => {
|
||||
if (!selectedNode) {return;}
|
||||
|
||||
const removeNode = (nodes: FileNode[]): FileNode[] => {
|
||||
return nodes.filter(node => {
|
||||
if (node.value === selectedNode) {return false;}
|
||||
if (node.children) {
|
||||
node.children = removeNode(node.children);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
setTreeData(removeNode(treeData));
|
||||
setSelectedNode('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box p="md" h="100%">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Text size="lg" fw={600}>Explorador de Archivos</Text>
|
||||
<Group gap="xs">
|
||||
<ActionIcon
|
||||
onClick={() => { setNewItemType('file'); open(); }}
|
||||
variant="light"
|
||||
size="sm"
|
||||
>
|
||||
<IconPlus size={14} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
onClick={() => { setNewItemType('folder'); open(); }}
|
||||
variant="light"
|
||||
size="sm"
|
||||
>
|
||||
<IconFolder size={14} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
onClick={deleteSelectedItem}
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
disabled={!selectedNode}
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Box h="calc(100% - 60px)" style={{ overflow: 'auto' }}>
|
||||
<Tree
|
||||
data={treeData}
|
||||
renderNode={({ node, expanded, hasChildren, elementProps }) => (
|
||||
<Box {...elementProps} onClick={() => handleNodeSelect(node.value)}>
|
||||
{renderTreeLabel(node as FileNode)}
|
||||
</Box>
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Modal opened={opened} onClose={close} title={`Crear ${newItemType === 'file' ? 'archivo' : 'carpeta'}`}>
|
||||
<TextInput
|
||||
label={`Nombre del ${newItemType === 'file' ? 'archivo' : 'carpeta'}`}
|
||||
value={newItemName}
|
||||
onChange={(e) => setNewItemName(e.target.value)}
|
||||
placeholder={`Ingresa el nombre del ${newItemType === 'file' ? 'archivo' : 'carpeta'}`}
|
||||
/>
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="outline" onClick={close}>Cancelar</Button>
|
||||
<Button onClick={addNewItem}>Crear</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
import { Box, Text, Stack, Group, TextInput, Select, Switch, ColorInput, Slider, NumberInput } from '@mantine/core';
|
||||
import { useState, useCallback, memo } from 'react';
|
||||
|
||||
interface Properties {
|
||||
name: string;
|
||||
type: string;
|
||||
visible: boolean;
|
||||
color: string;
|
||||
opacity: number;
|
||||
size: number;
|
||||
}
|
||||
|
||||
interface PropertiesDockProps {
|
||||
onPropertiesChange?: (properties: Properties) => void;
|
||||
}
|
||||
|
||||
function PropertiesDockComponent({ onPropertiesChange }: PropertiesDockProps) {
|
||||
const [properties, setProperties] = useState<Properties>({
|
||||
name: 'Elemento 1',
|
||||
type: 'rectángulo',
|
||||
visible: true,
|
||||
color: '#339af0',
|
||||
opacity: 100,
|
||||
size: 50,
|
||||
});
|
||||
|
||||
const updateProperty = useCallback(<K extends keyof Properties>(key: K, value: Properties[K]) => {
|
||||
const newProperties = { ...properties, [key]: value };
|
||||
setProperties(newProperties);
|
||||
onPropertiesChange?.(newProperties);
|
||||
}, [properties, onPropertiesChange]);
|
||||
|
||||
return (
|
||||
<Box p="md" h="100%">
|
||||
<Text size="lg" fw={600} mb="md">Propiedades</Text>
|
||||
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nombre"
|
||||
value={properties.name}
|
||||
onChange={(e) => updateProperty('name', e.target.value)}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Tipo"
|
||||
value={properties.type}
|
||||
onChange={(value) => updateProperty('type', value || 'rectángulo')}
|
||||
data={[
|
||||
{ value: 'rectángulo', label: 'Rectángulo' },
|
||||
{ value: 'círculo', label: 'Círculo' },
|
||||
{ value: 'triángulo', label: 'Triángulo' },
|
||||
{ value: 'línea', label: 'Línea' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Switch
|
||||
label="Visible"
|
||||
checked={properties.visible}
|
||||
onChange={(e) => updateProperty('visible', e.currentTarget.checked)}
|
||||
/>
|
||||
|
||||
<ColorInput
|
||||
label="Color"
|
||||
value={properties.color}
|
||||
onChange={(value) => updateProperty('color', value)}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text size="sm" fw={500} mb="xs">Opacidad: {properties.opacity}%</Text>
|
||||
<Slider
|
||||
value={properties.opacity}
|
||||
onChange={(value) => updateProperty('opacity', value)}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
marks={[
|
||||
{ value: 0, label: '0%' },
|
||||
{ value: 50, label: '50%' },
|
||||
{ value: 100, label: '100%' }
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<NumberInput
|
||||
label="Tamaño"
|
||||
value={properties.size}
|
||||
onChange={(value) => updateProperty('size', Number(value) || 0)}
|
||||
min={1}
|
||||
max={200}
|
||||
step={1}
|
||||
/>
|
||||
|
||||
<Box p="md" style={{
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}>
|
||||
<Text size="sm" fw={500} mb="xs">Vista previa:</Text>
|
||||
<Box
|
||||
style={{
|
||||
width: properties.size,
|
||||
height: properties.size,
|
||||
backgroundColor: properties.color,
|
||||
opacity: properties.opacity / 100,
|
||||
borderRadius: properties.type === 'círculo' ? '50%' : '4px',
|
||||
display: properties.visible ? 'block' : 'none',
|
||||
}}
|
||||
/>
|
||||
{!properties.visible && (
|
||||
<Text size="xs" c="dimmed">Elemento oculto</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export const PropertiesDock = memo(PropertiesDockComponent);
|
||||
@@ -0,0 +1,111 @@
|
||||
import { Box, Text, Button, Group, Stack, Badge, ActionIcon } from '@mantine/core';
|
||||
import { IconPlus, IconCheck, IconX } from '@tabler/icons-react';
|
||||
import { useState, useCallback, memo } from 'react';
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
interface TaskDockProps {
|
||||
onTaskUpdate?: (tasks: Task[]) => void;
|
||||
}
|
||||
|
||||
function TaskDockComponent({ onTaskUpdate }: TaskDockProps) {
|
||||
const [tasks, setTasks] = useState<Task[]>([
|
||||
{ id: '1', title: 'Configurar dockview', completed: true },
|
||||
{ id: '2', title: 'Crear componentes de dock', completed: false },
|
||||
{ id: '3', title: 'Implementar comunicación', completed: false },
|
||||
]);
|
||||
|
||||
const [newTaskTitle, setNewTaskTitle] = useState('');
|
||||
|
||||
const toggleTask = useCallback((id: string) => {
|
||||
const updatedTasks = tasks.map(task =>
|
||||
task.id === id ? { ...task, completed: !task.completed } : task
|
||||
);
|
||||
setTasks(updatedTasks);
|
||||
onTaskUpdate?.(updatedTasks);
|
||||
}, [tasks, onTaskUpdate]);
|
||||
|
||||
const addTask = useCallback(() => {
|
||||
if (newTaskTitle.trim()) {
|
||||
const newTask = {
|
||||
id: Date.now().toString(),
|
||||
title: newTaskTitle,
|
||||
completed: false,
|
||||
};
|
||||
const updatedTasks = [...tasks, newTask];
|
||||
setTasks(updatedTasks);
|
||||
setNewTaskTitle('');
|
||||
onTaskUpdate?.(updatedTasks);
|
||||
}
|
||||
}, [newTaskTitle, tasks, onTaskUpdate]);
|
||||
|
||||
const removeTask = useCallback((id: string) => {
|
||||
const updatedTasks = tasks.filter(task => task.id !== id);
|
||||
setTasks(updatedTasks);
|
||||
onTaskUpdate?.(updatedTasks);
|
||||
}, [tasks, onTaskUpdate]);
|
||||
|
||||
return (
|
||||
<Box p="md" h="100%">
|
||||
<Text size="lg" fw={600} mb="md">Lista de Tareas</Text>
|
||||
|
||||
<Group mb="md">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nueva tarea..."
|
||||
value={newTaskTitle}
|
||||
onChange={(e) => setNewTaskTitle(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && addTask()}
|
||||
style={{ flex: 1, padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
|
||||
/>
|
||||
<ActionIcon onClick={addTask} variant="filled">
|
||||
<IconPlus size={16} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
|
||||
<Stack gap="xs">
|
||||
{tasks.map((task) => (
|
||||
<Group key={task.id} justify="space-between" p="xs" style={{
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: task.completed ? '#f5f5f5' : 'white'
|
||||
}}>
|
||||
<Group>
|
||||
<ActionIcon
|
||||
onClick={() => toggleTask(task.id)}
|
||||
variant={task.completed ? 'filled' : 'outline'}
|
||||
color={task.completed ? 'green' : 'gray'}
|
||||
size="sm"
|
||||
>
|
||||
<IconCheck size={14} />
|
||||
</ActionIcon>
|
||||
<Text
|
||||
style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
|
||||
c={task.completed ? 'dimmed' : 'dark'}
|
||||
>
|
||||
{task.title}
|
||||
</Text>
|
||||
<Badge variant="light" color={task.completed ? 'green' : 'blue'}>
|
||||
{task.completed ? 'Completada' : 'Pendiente'}
|
||||
</Badge>
|
||||
</Group>
|
||||
<ActionIcon
|
||||
onClick={() => removeTask(task.id)}
|
||||
variant="subtle"
|
||||
color="red"
|
||||
size="sm"
|
||||
>
|
||||
<IconX size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export const TaskDock = memo(TaskDockComponent);
|
||||
@@ -0,0 +1,84 @@
|
||||
/* Estilos personalizados para dockview */
|
||||
|
||||
.dockview-theme-light {
|
||||
--dv-activecontainer-border: #228be6;
|
||||
--dv-tab-active-color: #228be6;
|
||||
--dv-tab-active-border: #228be6;
|
||||
--dv-group-view-background-color: #ffffff;
|
||||
--dv-separator-border: #dee2e6;
|
||||
--dv-tab-background-color: #f8f9fa;
|
||||
--dv-tab-hover-background-color: #e9ecef;
|
||||
}
|
||||
|
||||
/* Estilos para el contenido de los paneles */
|
||||
.dockview-panel {
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Personalización de tabs */
|
||||
.dv-tab {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dv-tab:hover {
|
||||
background-color: #f1f3f4;
|
||||
}
|
||||
|
||||
.dv-tab.dv-active-tab {
|
||||
background-color: white;
|
||||
border-bottom: 2px solid #228be6;
|
||||
}
|
||||
|
||||
/* Estilos para los separadores */
|
||||
.dv-separator {
|
||||
background-color: #dee2e6;
|
||||
}
|
||||
|
||||
.dv-separator:hover {
|
||||
background-color: #228be6;
|
||||
}
|
||||
|
||||
/* Contenedor principal */
|
||||
.dockview-container {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Animaciones suaves */
|
||||
.dv-tab,
|
||||
.dv-separator {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Iconos en las pestañas */
|
||||
.dv-tab .dv-tab-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Botones de acción en las pestañas */
|
||||
.dv-tab .dv-tab-close-action {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.dv-tab:hover .dv-tab-close-action {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Personalización del área de arrastre */
|
||||
.dv-drop-indicator {
|
||||
background-color: rgba(34, 139, 230, 0.3);
|
||||
border: 2px solid #228be6;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.dv-tab {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="185.21428mm"
|
||||
height="185.21428mm"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="favicon.svg"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#242424"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.52284039"
|
||||
inkscape:cx="317.49651"
|
||||
inkscape:cy="284.02549"
|
||||
inkscape:window-width="1147"
|
||||
inkscape:window-height="927"
|
||||
inkscape:window-x="2024"
|
||||
inkscape:window-y="105"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
style="fill:#ffffff"
|
||||
id="path1"
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714" />
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
id="text1-8-5-1"
|
||||
style="fill:#000000"
|
||||
aria-label="Fz"
|
||||
inkscape:label="text1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
type LogoIconProps = React.SVGProps<SVGSVGElement> & {
|
||||
circleFill?: string;
|
||||
pathFill?: string;
|
||||
};
|
||||
|
||||
const LogoIcon: React.FC<LogoIconProps> = ({
|
||||
style,
|
||||
circleFill = 'currentColor',
|
||||
pathFill = 'currentColor',
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
style={style}
|
||||
{...props}
|
||||
>
|
||||
<g transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714"
|
||||
fill={circleFill}
|
||||
/>
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
fill={pathFill}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default LogoIcon;
|
||||
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="185.21428mm"
|
||||
height="185.21428mm"
|
||||
viewBox="0 0 185.21428 185.21428"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="favicon.svg"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#242424"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.52284039"
|
||||
inkscape:cx="317.49651"
|
||||
inkscape:cy="284.02549"
|
||||
inkscape:window-width="1147"
|
||||
inkscape:window-height="927"
|
||||
inkscape:window-x="2024"
|
||||
inkscape:window-y="105"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-13.15728,-55.159447)">
|
||||
<circle
|
||||
style="fill:#ffffff"
|
||||
id="path1"
|
||||
cx="105.76442"
|
||||
cy="147.76659"
|
||||
r="92.60714" />
|
||||
<path
|
||||
d="m 60.52824,130.59648 q 5.092664,-3.88488 12.125369,-6.43431 7.032718,-2.54944 15.035463,-4.12768 2.78883,-3.52067 5.45641,-6.91992 2.66758,-3.52066 4.60763,-6.55571 1.94007,-3.15645 3.031358,-5.82731 1.09128,-2.792247 0.84876,-4.977477 l 0.24252,0.2428 q -0.60628,-1.21402 -2.910088,-1.82102 -2.30382,-0.72842 -5.45642,-0.72842 -4.00138,0 -8.972768,1.09262 -4.971406,0.97121 -10.064057,2.91365 -5.092651,1.82102 -10.064057,4.491867 -4.850147,2.67085 -8.851513,5.94871 -3.880108,3.27786 -6.547698,7.16273 -2.546319,3.88487 -2.910081,8.13394 -5.456413,-4.61327 -7.881486,-8.49814 -2.303829,-4.00627 -2.303829,-7.52694 0,-6.19151 3.152597,-10.926187 3.152597,-4.73468 8.124003,-8.13393 5.092651,-3.52067 11.519091,-5.827315 6.547698,-2.306631 13.095396,-3.642054 6.668943,-1.456837 12.852879,-1.94244 6.305193,-0.607005 10.912843,-0.607005 6.911448,0 12.974128,0.971207 6.06269,0.971221 10.54908,3.035062 4.60766,1.942428 7.27523,4.856075 2.66758,2.91365 2.66758,6.91992 -0.72751,3.88487 -2.54632,7.16272 -1.69755,3.277867 -3.88013,6.312907 -2.18257,2.91365 -4.60766,5.94871 -2.30381,2.91365 -4.24387,5.94871 2.78884,0.12142 5.09265,0.36421 2.42508,0.12141 4.72891,0.12141 l -5.33517,13.35423 q -3.27384,0 -5.33517,0 -2.0613,0 -3.6376,0.12142 -1.45505,0 -2.78884,0.12141 -1.21253,0.12141 -2.78884,0.3642 -0.2425,0 -0.36376,0.12142 -0.12128,0 -0.36376,0 -8.730248,12.86862 -13.944158,27.19407 -5.213911,14.20405 -7.881489,28.77232 -4.728902,0.2428 -8.972771,-0.36422 -4.122624,-0.4856 -7.153976,-2.06382 -2.910081,-1.45683 -4.365128,-4.00627 -1.455047,-2.54946 -0.727524,-6.31292 0.848782,-3.27786 2.425074,-7.76973 1.697551,-4.61329 3.637617,-9.59078 2.061313,-5.09889 4.24387,-10.19778 2.303828,-5.22029 4.486386,-9.71218 -3.031339,1.33543 -6.91146,3.15647 -3.880108,1.82102 -6.668943,3.64206 z m 103.06565,44.5546 q 0.24249,3.64205 -1.94006,8.49814 -2.18258,4.8561 -5.69893,10.07639 -3.3951,5.22029 -7.63897,10.31916 -4.24389,5.2203 -8.12401,9.46937 -3.8801,4.24907 -6.91144,7.04132 -3.03134,2.91365 -4.12263,3.52066 -1.57629,0.60702 -3.27384,1.09263 -1.57629,0.607 -3.88013,-0.36422 -1.45506,-0.60699 -3.51638,-1.69963 -1.94005,-0.97122 -3.6376,-2.42803 -1.8188,-1.33542 -2.78884,-3.15646 -1.09128,-1.69963 -0.60626,-3.76347 0.48502,-1.82104 2.30383,-4.49187 1.69755,-2.67085 4.12261,-5.70591 2.54633,-3.03505 5.57768,-6.1915 3.15261,-3.03505 6.3052,-5.82729 3.27385,-2.79225 6.3052,-4.85609 3.15258,-2.06384 5.82015,-3.03506 0.36376,-0.12142 0.72754,-1.82103 0.36375,-1.69964 0.12115,-4.49187 -0.12115,-1.45684 -0.72752,-3.15646 -0.48502,-1.69963 -1.45505,-3.03505 -0.84876,-1.33543 -2.18254,-2.18525 -1.3338,-0.97122 -2.91009,-0.97122 -2.78884,0 -5.82018,2.91365 -3.03134,2.54946 -5.57767,1.82104 -2.4251,-0.72842 -3.7589,-3.03506 -1.21252,-2.42803 -0.84877,-5.46309 0.48502,-3.03505 3.39511,-5.09889 0.97004,-0.60702 4.00138,-3.03505 3.03135,-2.54945 6.66897,-5.7059 3.63759,-3.15646 7.03269,-6.31292 3.39512,-3.27785 5.09267,-5.3417 1.57629,-1.94242 2.0613,-3.03504 0.48502,-1.09261 0.36376,-1.69963 -0.12116,-0.60702 -0.72752,-0.72842 -0.48502,-0.2428 -0.84877,-0.2428 -1.45505,-0.12141 -3.3951,-0.2428 -1.81881,-0.12142 -3.51636,0 -1.69754,0.12128 -3.15259,0.4856 -1.33379,0.2428 -1.81881,0.72842 -0.97002,0.7284 -3.03134,3.88487 -1.94005,3.03505 -4.24386,6.67711 -2.30383,3.64207 -4.48642,7.04132 -2.06132,3.39927 -3.03135,4.85609 -2.18257,3.03505 -4.36511,3.88487 -2.30382,0.72842 -3.88012,0 -1.57631,-0.72841 -1.94007,-2.54945 -0.48501,-1.82102 0.84878,-4.00627 1.45505,-2.30664 3.1526,-5.34169 1.69754,-3.15646 3.51636,-6.55571 1.81878,-3.52067 3.63759,-7.16274 1.94008,-3.64206 3.75889,-7.16273 1.3338,-2.42803 2.78885,-3.88487 1.45503,-1.57822 3.8801,-2.42803 2.9101,-0.72842 6.42644,-0.97122 3.63761,-0.24281 7.15397,-0.12141 3.51636,0 6.66895,0.3642 3.15259,0.2428 5.2139,0.36422 2.30381,0.24279 4.48638,1.94243 2.30383,1.69962 3.88013,3.88485 1.69755,2.18524 2.42507,4.6133 0.72752,2.30664 -0.12116,3.88486 -0.12115,0.24281 -1.45503,1.57823 -1.33379,1.33543 -3.51636,3.39927 -2.06131,2.06383 -4.7289,4.61327 -2.66758,2.42805 -5.33516,4.97749 -2.54633,2.42805 -4.9714,4.61329 -2.42506,2.18523 -4.00137,3.64205 h 1.45505 q 4.60763,0 7.88149,0.72842 3.39511,0.607 6.54769,3.27785 2.66758,-3.03505 5.57768,-7.52693 2.91008,-4.61328 5.45641,-8.74095 2.30381,-4.00628 4.60764,-5.22029 2.42506,-1.21402 4.12263,-0.60702 1.81879,0.48561 2.42507,2.54946 0.72751,1.94243 -0.36376,4.49186 -6.79022,11.0476 -11.15534,18.21033 -4.24387,7.04132 -6.30518,9.95498 z"
|
||||
id="text1-8-5-1"
|
||||
style="fill:#000000"
|
||||
aria-label="Fz"
|
||||
inkscape:label="text1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,4 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
|
||||
@@ -0,0 +1,5 @@
|
||||
import { DockViewMain } from '../components/DockViewMain';
|
||||
|
||||
export function DockViewPage() {
|
||||
return <DockViewMain />;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
|
||||
import { Welcome } from '../components/Welcome/Welcome';
|
||||
|
||||
import { AppShellWithMenu } from '@/components/Appshell/Appshell';
|
||||
|
||||
export function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<AppShellWithMenu>
|
||||
|
||||
<Welcome />
|
||||
<ColorSchemeToggle />
|
||||
|
||||
</AppShellWithMenu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { VSCodeDockViewConsolidated } from '../components/VSCodeLayout/VSCodeDockViewConsolidated';
|
||||
|
||||
export function VSCodeLayoutPage() {
|
||||
return <VSCodeDockViewConsolidated />;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// stores/useAppShellStore.ts
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface AppShellState {
|
||||
activeMain: string;
|
||||
activeLink: string;
|
||||
mobileOpened: boolean;
|
||||
desktopOpened: boolean;
|
||||
setActiveMain: (main: string) => void;
|
||||
setActiveLink: (link: string) => void;
|
||||
toggleMobile: () => void;
|
||||
toggleDesktop: () => void;
|
||||
openDesktop: () => void;
|
||||
closeMobile: () => void;
|
||||
}
|
||||
|
||||
// Persistencia en localStorage (solo para rutas, si lo quieres)
|
||||
const STORAGE_KEY = 'lastSubmenuRoutes';
|
||||
function getLastSubmenuRoute(section: string): string | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const parsed = raw ? JSON.parse(raw) : {};
|
||||
return parsed[section] ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function setLastSubmenuRoute(section: string, route: string) {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const parsed = raw ? JSON.parse(raw) : {};
|
||||
parsed[section] = route;
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
export const useAppShellStore = create<AppShellState>((set) => ({
|
||||
activeMain: 'Home',
|
||||
activeLink: '',
|
||||
mobileOpened: false,
|
||||
desktopOpened: true,
|
||||
setActiveMain: (main) => set({ activeMain: main }),
|
||||
setActiveLink: (link) => set({ activeLink: link }),
|
||||
toggleMobile: () => set((s) => ({ mobileOpened: !s.mobileOpened })),
|
||||
toggleDesktop: () => set((s) => ({ desktopOpened: !s.desktopOpened })),
|
||||
openDesktop: () => set({ desktopOpened: true }),
|
||||
closeMobile: () => set({ mobileOpened: false }),
|
||||
}));
|
||||
|
||||
export { getLastSubmenuRoute, setLastSubmenuRoute };
|
||||
@@ -0,0 +1,371 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist, subscribeWithSelector } from 'zustand/middleware';
|
||||
|
||||
// Tipos para el sistema de paneles
|
||||
export interface Panel {
|
||||
id: string;
|
||||
title: string;
|
||||
component: string; // Nombre del componente en lugar del componente directamente
|
||||
props?: any;
|
||||
closable?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface Zone {
|
||||
id: string;
|
||||
name: string;
|
||||
panels: Panel[];
|
||||
activePanel?: string;
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
export type ZoneType = 'navbar' | 'sidebar' | 'asidebar' | 'bottom' | 'center';
|
||||
|
||||
export interface DraggedPanel {
|
||||
panel: Panel;
|
||||
fromZone: ZoneType;
|
||||
}
|
||||
|
||||
interface DockState {
|
||||
zones: Record<ZoneType, Zone>;
|
||||
draggedPanel: DraggedPanel | null;
|
||||
|
||||
// Acciones
|
||||
movePanel: (panelId: string, fromZone: ZoneType, toZone: ZoneType) => void;
|
||||
reorderPanel: (zone: ZoneType, panelId: string, newIndex: number) => void;
|
||||
addPanel: (zone: ZoneType, panel: Panel) => void;
|
||||
removePanel: (zone: ZoneType, panelId: string) => void;
|
||||
setActivePanel: (zone: ZoneType, panelId: string) => void;
|
||||
toggleZone: (zone: ZoneType) => void;
|
||||
|
||||
// Drag & Drop
|
||||
startDrag: (panel: Panel, fromZone: ZoneType) => void;
|
||||
endDrag: () => void;
|
||||
dropPanel: (toZone: ZoneType, position?: 'top' | 'bottom' | 'left' | 'right' | 'center') => void;
|
||||
|
||||
// Group Management
|
||||
splitPanel: (zone: ZoneType, panelId: string, direction: 'horizontal' | 'vertical') => void;
|
||||
mergeGroups: (fromZone: ZoneType, toZone: ZoneType) => void;
|
||||
|
||||
// Utilidades
|
||||
getPanel: (zone: ZoneType, panelId: string) => Panel | undefined;
|
||||
getAllPanels: () => Panel[];
|
||||
resetZones: () => void;
|
||||
}
|
||||
|
||||
// Estado inicial de las zonas
|
||||
const initialZones: Record<ZoneType, Zone> = {
|
||||
navbar: {
|
||||
id: 'navbar',
|
||||
name: 'Navigation Bar',
|
||||
panels: [],
|
||||
visible: true,
|
||||
},
|
||||
sidebar: {
|
||||
id: 'sidebar',
|
||||
name: 'Sidebar',
|
||||
panels: [
|
||||
{
|
||||
id: 'file-explorer',
|
||||
title: 'Explorador',
|
||||
component: 'fileExplorer',
|
||||
closable: false,
|
||||
},
|
||||
{
|
||||
id: 'sidebar-tasks',
|
||||
title: 'Tareas',
|
||||
component: 'tasks',
|
||||
closable: true,
|
||||
}
|
||||
],
|
||||
activePanel: 'file-explorer',
|
||||
visible: true,
|
||||
},
|
||||
asidebar: {
|
||||
id: 'asidebar',
|
||||
name: 'Right Panel',
|
||||
panels: [
|
||||
{
|
||||
id: 'properties',
|
||||
title: 'Propiedades',
|
||||
component: 'properties',
|
||||
closable: true,
|
||||
}
|
||||
],
|
||||
activePanel: 'properties',
|
||||
visible: true,
|
||||
},
|
||||
bottom: {
|
||||
id: 'bottom',
|
||||
name: 'Bottom Panel',
|
||||
panels: [
|
||||
{
|
||||
id: 'console',
|
||||
title: 'Consola',
|
||||
component: 'console',
|
||||
closable: true,
|
||||
}
|
||||
],
|
||||
activePanel: 'console',
|
||||
visible: true,
|
||||
},
|
||||
center: {
|
||||
id: 'center',
|
||||
name: 'Main Area',
|
||||
panels: [
|
||||
{
|
||||
id: 'main-editor',
|
||||
title: 'Editor Principal',
|
||||
component: 'tasks',
|
||||
closable: false,
|
||||
}
|
||||
],
|
||||
activePanel: 'main-editor',
|
||||
visible: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const useDockStore = create<DockState>()(
|
||||
subscribeWithSelector(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
zones: initialZones,
|
||||
draggedPanel: null,
|
||||
|
||||
movePanel: (panelId: string, fromZone: ZoneType, toZone: ZoneType) => {
|
||||
console.log(`🔄 [movePanel] Moving ${panelId} from ${fromZone} to ${toZone}`);
|
||||
|
||||
if (fromZone === toZone) {
|
||||
console.log(`⚠️ [movePanel] Same zone, skipping`);
|
||||
return;
|
||||
}
|
||||
|
||||
set((state) => {
|
||||
const panel = state.zones[fromZone].panels.find(p => p.id === panelId);
|
||||
if (!panel) {
|
||||
console.log(`❌ [movePanel] Panel ${panelId} not found in ${fromZone}`);
|
||||
return state;
|
||||
}
|
||||
|
||||
console.log(`✅ [movePanel] Found panel:`, panel);
|
||||
|
||||
const newZones = { ...state.zones };
|
||||
|
||||
// ✅ Remover del origen
|
||||
const fromPanels = newZones[fromZone].panels.filter(p => p.id !== panelId);
|
||||
newZones[fromZone] = {
|
||||
...newZones[fromZone],
|
||||
panels: fromPanels,
|
||||
activePanel: newZones[fromZone].activePanel === panelId
|
||||
? fromPanels[0]?.id
|
||||
: newZones[fromZone].activePanel,
|
||||
};
|
||||
|
||||
// ✅ Agregar al destino (conservar ID original)
|
||||
newZones[toZone] = {
|
||||
...newZones[toZone],
|
||||
panels: [...newZones[toZone].panels, panel],
|
||||
activePanel: panel.id,
|
||||
};
|
||||
|
||||
console.log(`✅ [movePanel] Moved successfully. From panels:`, fromPanels.length, `To panels:`, newZones[toZone].panels.length);
|
||||
|
||||
return { zones: newZones };
|
||||
});
|
||||
},
|
||||
|
||||
reorderPanel: (zone: ZoneType, panelId: string, newIndex: number) => {
|
||||
console.log(`🔄 [reorderPanel] Reordering ${panelId} in ${zone} to index ${newIndex}`);
|
||||
|
||||
set((state) => {
|
||||
const panels = [...state.zones[zone].panels];
|
||||
const currentIndex = panels.findIndex(p => p.id === panelId);
|
||||
|
||||
if (currentIndex === -1) {
|
||||
console.log(`❌ [reorderPanel] Panel ${panelId} not found in ${zone}`);
|
||||
return state;
|
||||
}
|
||||
|
||||
if (currentIndex === newIndex) {
|
||||
console.log(`⚠️ [reorderPanel] Same position, skipping`);
|
||||
return state;
|
||||
}
|
||||
|
||||
// ✅ Reordenar array
|
||||
const [panel] = panels.splice(currentIndex, 1);
|
||||
panels.splice(newIndex, 0, panel);
|
||||
|
||||
console.log(`✅ [reorderPanel] Reordered successfully. New order:`, panels.map(p => p.id));
|
||||
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[zone]: {
|
||||
...state.zones[zone],
|
||||
panels,
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
addPanel: (zone: ZoneType, panel: Panel) => {
|
||||
set((state) => {
|
||||
// Verificar si el panel ya existe en esa zona
|
||||
const existingPanel = state.zones[zone].panels.find(p => p.component === panel.component);
|
||||
if (existingPanel) {
|
||||
// Solo cambiar el panel activo
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[zone]: {
|
||||
...state.zones[zone],
|
||||
activePanel: existingPanel.id,
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[zone]: {
|
||||
...state.zones[zone],
|
||||
panels: [...state.zones[zone].panels, panel],
|
||||
activePanel: panel.id,
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
removePanel: (zone: ZoneType, panelId: string) => {
|
||||
set((state) => {
|
||||
const newPanels = state.zones[zone].panels.filter(p => p.id !== panelId);
|
||||
const newActivePanel = state.zones[zone].activePanel === panelId
|
||||
? newPanels[0]?.id
|
||||
: state.zones[zone].activePanel;
|
||||
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[zone]: {
|
||||
...state.zones[zone],
|
||||
panels: newPanels,
|
||||
activePanel: newActivePanel,
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
setActivePanel: (zone: ZoneType, panelId: string) => {
|
||||
set((state) => ({
|
||||
zones: {
|
||||
...state.zones,
|
||||
[zone]: {
|
||||
...state.zones[zone],
|
||||
activePanel: panelId,
|
||||
}
|
||||
}
|
||||
}));
|
||||
},
|
||||
|
||||
toggleZone: (zone: ZoneType) => {
|
||||
set((state) => ({
|
||||
zones: {
|
||||
...state.zones,
|
||||
[zone]: {
|
||||
...state.zones[zone],
|
||||
visible: !state.zones[zone].visible,
|
||||
}
|
||||
}
|
||||
}));
|
||||
},
|
||||
|
||||
startDrag: (panel: Panel, fromZone: ZoneType) => {
|
||||
console.log(`🎯 [startDrag] Starting drag:`, { panelId: panel.id, fromZone });
|
||||
set({ draggedPanel: { panel, fromZone } });
|
||||
},
|
||||
|
||||
endDrag: () => {
|
||||
console.log(`🏁 [endDrag] Ending drag`);
|
||||
set({ draggedPanel: null });
|
||||
},
|
||||
|
||||
dropPanel: (toZone: ZoneType, position = 'center') => {
|
||||
const { draggedPanel } = get();
|
||||
if (!draggedPanel) {
|
||||
console.log(`❌ [dropPanel] No dragged panel found`);
|
||||
return;
|
||||
}
|
||||
|
||||
const { panel, fromZone } = draggedPanel;
|
||||
console.log(`📥 [dropPanel] Dropping ${panel.id} from ${fromZone} to ${toZone} at ${position}`);
|
||||
|
||||
if (fromZone === toZone) {
|
||||
console.log(`⚠️ [dropPanel] Same zone, no action needed`);
|
||||
get().endDrag();
|
||||
return;
|
||||
}
|
||||
|
||||
// ✅ Usar la función movePanel corregida
|
||||
get().movePanel(panel.id, fromZone, toZone);
|
||||
|
||||
if (position !== 'center') {
|
||||
console.log(`🔗 [dropPanel] Split position ${position} - for future implementation`);
|
||||
// TODO: Implementar splitting avanzado en futuras versiones
|
||||
}
|
||||
|
||||
// ✅ Limpiar estado de drag
|
||||
get().endDrag();
|
||||
},
|
||||
|
||||
splitPanel: (zone: ZoneType, panelId: string, direction: 'horizontal' | 'vertical') => {
|
||||
console.log(`Dividiendo panel ${panelId} en zona ${zone} en dirección ${direction}`);
|
||||
// Implementación futura para splitting avanzado
|
||||
},
|
||||
|
||||
mergeGroups: (fromZone: ZoneType, toZone: ZoneType) => {
|
||||
set((state) => {
|
||||
const fromPanels = state.zones[fromZone].panels;
|
||||
|
||||
return {
|
||||
zones: {
|
||||
...state.zones,
|
||||
[toZone]: {
|
||||
...state.zones[toZone],
|
||||
panels: [...state.zones[toZone].panels, ...fromPanels],
|
||||
},
|
||||
[fromZone]: {
|
||||
...state.zones[fromZone],
|
||||
panels: [],
|
||||
activePanel: undefined,
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
getPanel: (zone: ZoneType, panelId: string) => {
|
||||
return get().zones[zone].panels.find(p => p.id === panelId);
|
||||
},
|
||||
|
||||
getAllPanels: () => {
|
||||
const { zones } = get();
|
||||
return Object.values(zones).flatMap(zone => zone.panels);
|
||||
},
|
||||
|
||||
resetZones: () => {
|
||||
set({ zones: initialZones, draggedPanel: null });
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'dock-store',
|
||||
partialize: (state) => ({
|
||||
zones: state.zones
|
||||
}),
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
@@ -0,0 +1,58 @@
|
||||
import { createTheme } from '@mantine/core';
|
||||
|
||||
export const theme = createTheme({
|
||||
colors: {
|
||||
// Definición de la paleta principal
|
||||
brand: [
|
||||
"#e7f2ff",
|
||||
"#d0e1ff",
|
||||
"#a1c0fa",
|
||||
"#6e9df6",
|
||||
"#447ff1",
|
||||
"#296df0",
|
||||
"#1863f0",
|
||||
"#0753d6",
|
||||
"#0049c1",
|
||||
"#003faa"
|
||||
],
|
||||
// Puedes añadir hasta 3 colores adicionales si lo deseas
|
||||
secondary: [
|
||||
"#ecf4ff",
|
||||
"#dce4f5",
|
||||
"#b9c7e2",
|
||||
"#94a8d0",
|
||||
"#748dc0",
|
||||
"#5f7cb7",
|
||||
"#5474b4",
|
||||
"#44639f",
|
||||
"#3a5890",
|
||||
"#2c4b80"
|
||||
],
|
||||
accent: [
|
||||
'#fff3e0',
|
||||
'#ffe0b2',
|
||||
'#ffcc80',
|
||||
'#ffb74d',
|
||||
'#ffa726',
|
||||
'#ff9800',
|
||||
'#fb8c00',
|
||||
'#f57c00',
|
||||
'#ef6c00',
|
||||
'#e65100',
|
||||
],
|
||||
neutral: [
|
||||
'#fafafa',
|
||||
'#f5f5f5',
|
||||
'#eeeeee',
|
||||
'#e0e0e0',
|
||||
'#bdbdbd',
|
||||
'#9e9e9e',
|
||||
'#757575',
|
||||
'#616161',
|
||||
'#424242',
|
||||
'#212121',
|
||||
],
|
||||
},
|
||||
primaryColor: 'brand', // Establece 'brand' como el color primario
|
||||
primaryShade: { light: 6, dark: 8 }, // Define los tonos primarios para los esquemas de color claro y oscuro
|
||||
});
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,5 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
export * from '@testing-library/react';
|
||||
export { render } from './render';
|
||||
export { userEvent };
|
||||
@@ -0,0 +1,13 @@
|
||||
import { render as testingLibraryRender } from '@testing-library/react';
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import { theme } from '../src/theme';
|
||||
|
||||
export function render(ui: React.ReactNode) {
|
||||
return testingLibraryRender(ui, {
|
||||
wrapper: ({ children }: { children: React.ReactNode }) => (
|
||||
<MantineProvider theme={theme} env="test">
|
||||
{children}
|
||||
</MantineProvider>
|
||||
),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"types": ["node", "@testing-library/jest-dom", "vitest/globals"],
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@test-utils": ["./test-utils"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "test-utils", ".storybook/main.ts", ".storybook/preview.tsx"]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react(), tsconfigPaths()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: './vitest.setup.mjs',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
const { getComputedStyle } = window;
|
||||
window.getComputedStyle = (elt) => getComputedStyle(elt);
|
||||
window.HTMLElement.prototype.scrollIntoView = () => {};
|
||||
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
class ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
window.ResizeObserver = ResizeObserver;
|
||||
Reference in New Issue
Block a user