ywana-core8 0.1.84 → 0.1.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__previewjs__/Wrapper.tsx +8 -5
- package/build-doc.sh +10 -0
- package/dist/index.cjs +418 -118
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +294 -94
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +418 -119
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +420 -120
- package/dist/index.umd.js.map +1 -1
- package/doc/README.md +196 -0
- package/doc/package-lock.json +17298 -0
- package/doc/package.json +34 -0
- package/doc/public/index.html +22 -0
- package/doc/scripts/generate-examples.js +129 -0
- package/doc/src/App.css +171 -0
- package/doc/src/App.js +45 -0
- package/doc/src/components/ExamplePage.js +104 -0
- package/doc/src/components/WelcomePage.js +84 -0
- package/doc/src/examples/button.example.js +47 -0
- package/doc/src/examples/input.example.js +91 -0
- package/doc/src/examples-config.js +170 -0
- package/doc/src/index.css +237 -0
- package/doc/src/index.js +13 -0
- package/package.json +9 -2
- package/preview.config.js +38 -0
- package/src/html/accordion.example.js +2 -2
- package/src/html/actions-cell.css +108 -0
- package/src/html/actions-cell.example.js +587 -0
- package/src/html/actions-cell.js +260 -0
- package/src/html/checkbox.example.js +2 -2
- package/src/html/chip.example.js +2 -2
- package/src/html/color.example.js +2 -2
- package/src/html/form.example.js +2 -2
- package/src/html/header2.example.js +2 -2
- package/src/html/index.js +1 -0
- package/src/html/menu.css +9 -2
- package/src/html/menu.js +14 -2
- package/src/html/progress.example.js +2 -2
- package/src/html/property.example.js +2 -2
- package/src/html/radio.example.js +2 -2
- package/src/html/switch.example.js +2 -2
- package/src/html/tab.example.js +2 -2
- package/src/html/table.css +47 -1
- package/src/html/table.example.js +1012 -0
- package/src/html/table.js +12 -7
- package/src/html/table2-actions-test.js +138 -0
- package/src/html/table2.css +40 -3
- package/src/html/table2.example.js +330 -0
- package/src/html/table2.js +56 -13
- package/src/html/tokenfield.example.js +2 -2
- package/src/widgets/calendar/Calendar.js +1 -1
- /package/{ACCORDION_EVALUATION.md → doc/evalulations/ACCORDION_EVALUATION.md} +0 -0
- /package/{CHECKBOX_EVALUATION.md → doc/evalulations/CHECKBOX_EVALUATION.md} +0 -0
- /package/{CHIP_EVALUATION.md → doc/evalulations/CHIP_EVALUATION.md} +0 -0
- /package/{COLOR_EVALUATION.md → doc/evalulations/COLOR_EVALUATION.md} +0 -0
- /package/{COMPONENTS_EVALUATION.md → doc/evalulations/COMPONENTS_EVALUATION.md} +0 -0
- /package/{FORM_EVALUATION.md → doc/evalulations/FORM_EVALUATION.md} +0 -0
- /package/{HEADER_EVALUATION.md → doc/evalulations/HEADER_EVALUATION.md} +0 -0
- /package/{ICON_EVALUATION.md → doc/evalulations/ICON_EVALUATION.md} +0 -0
- /package/{LIST_EVALUATION.md → doc/evalulations/LIST_EVALUATION.md} +0 -0
- /package/{PROGRESS_EVALUATION.md → doc/evalulations/PROGRESS_EVALUATION.md} +0 -0
- /package/{RADIO_EVALUATION.md → doc/evalulations/RADIO_EVALUATION.md} +0 -0
- /package/{RADIO_VISUAL_FIX.md → doc/evalulations/RADIO_VISUAL_FIX.md} +0 -0
- /package/{SECTION_IMPROVEMENTS.md → doc/evalulations/SECTION_IMPROVEMENTS.md} +0 -0
- /package/{SWITCH_EVALUATION.md → doc/evalulations/SWITCH_EVALUATION.md} +0 -0
- /package/{SWITCH_VISUAL_FIX.md → doc/evalulations/SWITCH_VISUAL_FIX.md} +0 -0
- /package/{TAB_EVALUATION.md → doc/evalulations/TAB_EVALUATION.md} +0 -0
- /package/{TEXTFIELD_EVALUATION.md → doc/evalulations/TEXTFIELD_EVALUATION.md} +0 -0
- /package/{TOOLTIP_FIX.md → doc/evalulations/TOOLTIP_FIX.md} +0 -0
- /package/{TREE_EVALUATION.md → doc/evalulations/TREE_EVALUATION.md} +0 -0
- /package/src/incubator/{PDFViewer.js → pdfViewer.js} +0 -0
package/doc/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "doc",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Este directorio contiene la documentación interactiva de todos los componentes de Ywana Core8, implementada como un sitio web estático con React.",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "react-scripts start",
|
|
8
|
+
"build": "react-scripts build",
|
|
9
|
+
"test": "react-scripts test",
|
|
10
|
+
"eject": "react-scripts eject",
|
|
11
|
+
"generate-examples": "node scripts/generate-examples.js"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"react": "^19.1.1",
|
|
18
|
+
"react-dom": "^19.1.1",
|
|
19
|
+
"react-scripts": "^5.0.1",
|
|
20
|
+
"ywana-core8": "^0.1.85"
|
|
21
|
+
},
|
|
22
|
+
"browserslist": {
|
|
23
|
+
"production": [
|
|
24
|
+
">0.2%",
|
|
25
|
+
"not dead",
|
|
26
|
+
"not op_mini all"
|
|
27
|
+
],
|
|
28
|
+
"development": [
|
|
29
|
+
"last 1 chrome version",
|
|
30
|
+
"last 1 firefox version",
|
|
31
|
+
"last 1 safari version"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="es">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<meta name="theme-color" content="#000000" />
|
|
8
|
+
<meta name="description" content="Documentación interactiva de Ywana Core8" />
|
|
9
|
+
|
|
10
|
+
<!-- Material Icons -->
|
|
11
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
12
|
+
|
|
13
|
+
<!-- Google Fonts -->
|
|
14
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
15
|
+
|
|
16
|
+
<title>Ywana Core8 - Documentación</title>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<noscript>Necesitas habilitar JavaScript para ejecutar esta aplicación.</noscript>
|
|
20
|
+
<div id="root"></div>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
|
|
4
|
+
// Función para convertir nombre de archivo a título legible
|
|
5
|
+
function fileNameToTitle(fileName) {
|
|
6
|
+
return fileName
|
|
7
|
+
.replace('.example.js', '')
|
|
8
|
+
.replace(/[-_]/g, ' ')
|
|
9
|
+
.replace(/\b\w/g, l => l.toUpperCase());
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Función para determinar el icono basado en el tipo de componente
|
|
13
|
+
function getIconForComponent(fileName) {
|
|
14
|
+
const iconMap = {
|
|
15
|
+
'button': 'smart_button',
|
|
16
|
+
'input': 'input',
|
|
17
|
+
'textfield': 'text_fields',
|
|
18
|
+
'checkbox': 'check_box',
|
|
19
|
+
'radio': 'radio_button_checked',
|
|
20
|
+
'switch': 'toggle_on',
|
|
21
|
+
'accordion': 'expand_more',
|
|
22
|
+
'tab': 'tab',
|
|
23
|
+
'table': 'table_chart',
|
|
24
|
+
'form': 'description',
|
|
25
|
+
'header': 'title',
|
|
26
|
+
'icon': 'star',
|
|
27
|
+
'list': 'list',
|
|
28
|
+
'menu': 'menu',
|
|
29
|
+
'progress': 'progress_activity',
|
|
30
|
+
'chip': 'label',
|
|
31
|
+
'color': 'palette',
|
|
32
|
+
'section': 'view_module',
|
|
33
|
+
'tree': 'account_tree',
|
|
34
|
+
'tooltip': 'help',
|
|
35
|
+
'thumbnail': 'image',
|
|
36
|
+
'tokenfield': 'token'
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const componentName = fileName.replace('.example.js', '');
|
|
40
|
+
return iconMap[componentName] || 'widgets';
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// Función para determinar la categoría
|
|
44
|
+
function getCategoryForComponent(fileName) {
|
|
45
|
+
const categoryMap = {
|
|
46
|
+
'button': 'Inputs',
|
|
47
|
+
'textfield': 'Inputs',
|
|
48
|
+
'textfield2': 'Inputs',
|
|
49
|
+
'checkbox': 'Inputs',
|
|
50
|
+
'radio': 'Inputs',
|
|
51
|
+
'switch': 'Inputs',
|
|
52
|
+
'tokenfield': 'Inputs',
|
|
53
|
+
'form': 'Forms',
|
|
54
|
+
'accordion': 'Layout',
|
|
55
|
+
'tab': 'Layout',
|
|
56
|
+
'section': 'Layout',
|
|
57
|
+
'header': 'Layout',
|
|
58
|
+
'header2': 'Layout',
|
|
59
|
+
'table': 'Data',
|
|
60
|
+
'table2': 'Data',
|
|
61
|
+
'list': 'Data',
|
|
62
|
+
'tree': 'Data',
|
|
63
|
+
'icon': 'Display',
|
|
64
|
+
'chip': 'Display',
|
|
65
|
+
'color': 'Display',
|
|
66
|
+
'progress': 'Display',
|
|
67
|
+
'thumbnail': 'Display',
|
|
68
|
+
'tooltip': 'Display',
|
|
69
|
+
'menu': 'Navigation',
|
|
70
|
+
'property': 'Utils',
|
|
71
|
+
'selector': 'Utils',
|
|
72
|
+
'actions-cell': 'Utils'
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const componentName = fileName.replace('.example.js', '');
|
|
76
|
+
return categoryMap[componentName] || 'Components';
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Leer archivos de ejemplos
|
|
80
|
+
function generateExamplesConfig() {
|
|
81
|
+
const examplesDir = path.join(__dirname, '../src/examples');
|
|
82
|
+
|
|
83
|
+
if (!fs.existsSync(examplesDir)) {
|
|
84
|
+
console.error('La carpeta src/examples no existe. Creando ejemplos básicos...');
|
|
85
|
+
createBasicExamples();
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const files = fs.readdirSync(examplesDir);
|
|
90
|
+
const exampleFiles = files.filter(file => file.endsWith('.example.js'));
|
|
91
|
+
|
|
92
|
+
const examples = exampleFiles.map(file => {
|
|
93
|
+
const componentName = file.replace('.example.js', '');
|
|
94
|
+
return {
|
|
95
|
+
id: componentName,
|
|
96
|
+
title: fileNameToTitle(file),
|
|
97
|
+
icon: getIconForComponent(file),
|
|
98
|
+
category: getCategoryForComponent(file),
|
|
99
|
+
file: file
|
|
100
|
+
};
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// Generar el archivo de configuración
|
|
104
|
+
const configContent = `// Este archivo es generado automáticamente por scripts/generate-examples.js
|
|
105
|
+
// No editar manualmente
|
|
106
|
+
|
|
107
|
+
export const EXAMPLES_CONFIG = ${JSON.stringify(examples, null, 2)};
|
|
108
|
+
|
|
109
|
+
// Función para importar dinámicamente los ejemplos
|
|
110
|
+
export const importExample = async (fileName) => {
|
|
111
|
+
try {
|
|
112
|
+
const module = await import(\`../examples/\${fileName}\`);
|
|
113
|
+
return module.default || module;
|
|
114
|
+
} catch (error) {
|
|
115
|
+
console.error(\`Error importing example \${fileName}:\`, error);
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
`;
|
|
120
|
+
|
|
121
|
+
// Escribir el archivo
|
|
122
|
+
const configPath = path.join(__dirname, '../src/examples-config.js');
|
|
123
|
+
fs.writeFileSync(configPath, configContent);
|
|
124
|
+
|
|
125
|
+
console.log(`✅ Generados ${examples.length} ejemplos en src/examples-config.js`);
|
|
126
|
+
console.log('Categorías encontradas:', [...new Set(examples.map(e => e.category))]);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
generateExamplesConfig();
|
package/doc/src/App.css
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
/* Estilos específicos para la aplicación */
|
|
2
|
+
.App {
|
|
3
|
+
text-align: center;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
/* Estilos para páginas de ejemplo */
|
|
7
|
+
.example-page {
|
|
8
|
+
max-width: 1200px;
|
|
9
|
+
margin: 0 auto;
|
|
10
|
+
padding: 2rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.content-header {
|
|
14
|
+
margin-bottom: 3rem;
|
|
15
|
+
text-align: left;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.content-header h1 {
|
|
19
|
+
font-size: 2.5rem;
|
|
20
|
+
font-weight: 700;
|
|
21
|
+
color: var(--text-primary);
|
|
22
|
+
margin-bottom: 1rem;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.content-header p {
|
|
26
|
+
font-size: 1.125rem;
|
|
27
|
+
color: var(--text-secondary);
|
|
28
|
+
max-width: 600px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.breadcrumb {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 0.5rem;
|
|
35
|
+
color: var(--text-secondary);
|
|
36
|
+
font-size: 0.875rem;
|
|
37
|
+
margin-bottom: 1rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.breadcrumb .material-icons {
|
|
41
|
+
font-size: 1rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Estilos para la página de bienvenida */
|
|
45
|
+
.welcome-page {
|
|
46
|
+
max-width: 800px;
|
|
47
|
+
margin: 0 auto;
|
|
48
|
+
padding: 3rem 2rem;
|
|
49
|
+
text-align: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.welcome-hero {
|
|
53
|
+
margin-bottom: 4rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.welcome-hero h1 {
|
|
57
|
+
font-size: 3.5rem;
|
|
58
|
+
font-weight: 800;
|
|
59
|
+
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
|
|
60
|
+
-webkit-background-clip: text;
|
|
61
|
+
-webkit-text-fill-color: transparent;
|
|
62
|
+
background-clip: text;
|
|
63
|
+
margin-bottom: 1.5rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.welcome-hero p {
|
|
67
|
+
font-size: 1.25rem;
|
|
68
|
+
color: var(--text-secondary);
|
|
69
|
+
max-width: 600px;
|
|
70
|
+
margin: 0 auto;
|
|
71
|
+
line-height: 1.7;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.welcome-features {
|
|
75
|
+
display: grid;
|
|
76
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
77
|
+
gap: 2rem;
|
|
78
|
+
margin-bottom: 4rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.feature-card {
|
|
82
|
+
background: var(--surface-color);
|
|
83
|
+
border: 1px solid var(--border-color);
|
|
84
|
+
border-radius: var(--radius-lg);
|
|
85
|
+
padding: 2rem;
|
|
86
|
+
text-align: center;
|
|
87
|
+
box-shadow: var(--shadow-sm);
|
|
88
|
+
transition: all 0.2s ease;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.feature-card:hover {
|
|
92
|
+
box-shadow: var(--shadow-md);
|
|
93
|
+
transform: translateY(-2px);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.feature-icon {
|
|
97
|
+
width: 3rem;
|
|
98
|
+
height: 3rem;
|
|
99
|
+
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
|
|
100
|
+
border-radius: 50%;
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
margin: 0 auto 1rem;
|
|
105
|
+
color: white;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.feature-card h3 {
|
|
109
|
+
font-size: 1.25rem;
|
|
110
|
+
font-weight: 600;
|
|
111
|
+
color: var(--text-primary);
|
|
112
|
+
margin-bottom: 0.5rem;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.feature-card p {
|
|
116
|
+
color: var(--text-secondary);
|
|
117
|
+
font-size: 0.875rem;
|
|
118
|
+
line-height: 1.6;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.welcome-stats {
|
|
122
|
+
display: grid;
|
|
123
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
124
|
+
gap: 2rem;
|
|
125
|
+
background: var(--surface-color);
|
|
126
|
+
border: 1px solid var(--border-color);
|
|
127
|
+
border-radius: var(--radius-lg);
|
|
128
|
+
padding: 2rem;
|
|
129
|
+
box-shadow: var(--shadow-sm);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.stat-item {
|
|
133
|
+
text-align: center;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.stat-number {
|
|
137
|
+
font-size: 2rem;
|
|
138
|
+
font-weight: 700;
|
|
139
|
+
color: var(--primary-color);
|
|
140
|
+
display: block;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.stat-label {
|
|
144
|
+
font-size: 0.875rem;
|
|
145
|
+
color: var(--text-secondary);
|
|
146
|
+
text-transform: uppercase;
|
|
147
|
+
letter-spacing: 0.05em;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Responsive */
|
|
151
|
+
@media (max-width: 768px) {
|
|
152
|
+
.welcome-hero h1 {
|
|
153
|
+
font-size: 2.5rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.welcome-features {
|
|
157
|
+
grid-template-columns: 1fr;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.welcome-stats {
|
|
161
|
+
grid-template-columns: repeat(2, 1fr);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.example-page {
|
|
165
|
+
padding: 1rem;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.content-header h1 {
|
|
169
|
+
font-size: 2rem;
|
|
170
|
+
}
|
|
171
|
+
}
|
package/doc/src/App.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Site, Page } from 'ywana-core8';
|
|
3
|
+
import './App.css';
|
|
4
|
+
|
|
5
|
+
// Importar componentes de ejemplo
|
|
6
|
+
import WelcomePage from './components/WelcomePage';
|
|
7
|
+
import ExamplePage from './components/ExamplePage';
|
|
8
|
+
|
|
9
|
+
// Importar configuración de ejemplos (se genera automáticamente)
|
|
10
|
+
import { EXAMPLES_CONFIG } from './examples-config.js';
|
|
11
|
+
|
|
12
|
+
function App() {
|
|
13
|
+
return (
|
|
14
|
+
<Site
|
|
15
|
+
icon="widgets"
|
|
16
|
+
title="Ywana Core8 Documentation"
|
|
17
|
+
init="welcome"
|
|
18
|
+
>
|
|
19
|
+
{/* Página de bienvenida */}
|
|
20
|
+
<Page
|
|
21
|
+
id="welcome"
|
|
22
|
+
title="Bienvenida"
|
|
23
|
+
icon="home"
|
|
24
|
+
section="Overview"
|
|
25
|
+
>
|
|
26
|
+
<WelcomePage />
|
|
27
|
+
</Page>
|
|
28
|
+
|
|
29
|
+
{/* Páginas generadas dinámicamente desde los ejemplos */}
|
|
30
|
+
{EXAMPLES_CONFIG.map(example => (
|
|
31
|
+
<Page
|
|
32
|
+
key={example.id}
|
|
33
|
+
id={example.id}
|
|
34
|
+
title={example.title}
|
|
35
|
+
icon={example.icon}
|
|
36
|
+
section={example.category}
|
|
37
|
+
>
|
|
38
|
+
<ExamplePage example={example} />
|
|
39
|
+
</Page>
|
|
40
|
+
))}
|
|
41
|
+
</Site>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export default App;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
const CATEGORIES = {
|
|
4
|
+
'Inputs': { icon: 'input' },
|
|
5
|
+
'Layout': { icon: 'view_quilt' },
|
|
6
|
+
'Data': { icon: 'table_chart' },
|
|
7
|
+
'Feedback': { icon: 'feedback' }
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const ExamplePage = ({ example }) => {
|
|
11
|
+
const [ExampleComponent, setExampleComponent] = useState(null);
|
|
12
|
+
const [loading, setLoading] = useState(true);
|
|
13
|
+
const [error, setError] = useState(null);
|
|
14
|
+
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
const loadExample = async () => {
|
|
17
|
+
try {
|
|
18
|
+
setLoading(true);
|
|
19
|
+
setError(null);
|
|
20
|
+
|
|
21
|
+
// Intentar cargar el componente de ejemplo dinámicamente
|
|
22
|
+
// Esto asume que los archivos de ejemplo están en la carpeta examples/
|
|
23
|
+
const componentName = example.file.replace('.example.js', '');
|
|
24
|
+
const modulePath = `../examples/${componentName}.example.js`;
|
|
25
|
+
|
|
26
|
+
try {
|
|
27
|
+
const module = await import(modulePath);
|
|
28
|
+
const Component = module.default || module[Object.keys(module)[0]];
|
|
29
|
+
|
|
30
|
+
if (Component) {
|
|
31
|
+
setExampleComponent(() => Component);
|
|
32
|
+
} else {
|
|
33
|
+
throw new Error('No se encontró el componente exportado');
|
|
34
|
+
}
|
|
35
|
+
} catch (importError) {
|
|
36
|
+
console.warn(`No se pudo cargar ${modulePath}:`, importError);
|
|
37
|
+
|
|
38
|
+
// Fallback: crear un componente placeholder
|
|
39
|
+
const PlaceholderComponent = () => (
|
|
40
|
+
<div className="example-placeholder">
|
|
41
|
+
<div className="placeholder-icon">
|
|
42
|
+
<span className="material-icons">{example.icon}</span>
|
|
43
|
+
</div>
|
|
44
|
+
<h3>{example.title}</h3>
|
|
45
|
+
<p>{example.description}</p>
|
|
46
|
+
<div className="placeholder-note">
|
|
47
|
+
<span className="material-icons">info</span>
|
|
48
|
+
<span>Ejemplo en desarrollo - Archivo: {example.file}</span>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
setExampleComponent(() => PlaceholderComponent);
|
|
54
|
+
}
|
|
55
|
+
} catch (err) {
|
|
56
|
+
console.error('Error loading example:', err);
|
|
57
|
+
setError(err.message);
|
|
58
|
+
} finally {
|
|
59
|
+
setLoading(false);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
loadExample();
|
|
64
|
+
}, [example]);
|
|
65
|
+
|
|
66
|
+
if (loading) {
|
|
67
|
+
return (
|
|
68
|
+
<div className="example-loading">
|
|
69
|
+
<div className="loading-spinner"></div>
|
|
70
|
+
<p>Cargando ejemplo...</p>
|
|
71
|
+
</div>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (error) {
|
|
76
|
+
return (
|
|
77
|
+
<div className="example-error">
|
|
78
|
+
<span className="material-icons">error</span>
|
|
79
|
+
<p>Error al cargar el ejemplo: {error}</p>
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<div className="example-page">
|
|
86
|
+
<div className="content-header">
|
|
87
|
+
<div className="breadcrumb">
|
|
88
|
+
<span className="material-icons">{CATEGORIES[example.category]?.icon}</span>
|
|
89
|
+
<span>{example.category}</span>
|
|
90
|
+
<span className="material-icons">chevron_right</span>
|
|
91
|
+
<span>{example.title}</span>
|
|
92
|
+
</div>
|
|
93
|
+
<h1>{example.title}</h1>
|
|
94
|
+
<p>{example.description}</p>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div className="example-container">
|
|
98
|
+
{ExampleComponent && <ExampleComponent />}
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
export default ExamplePage;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const WelcomePage = () => {
|
|
4
|
+
return (
|
|
5
|
+
<div className="welcome-page">
|
|
6
|
+
<div className="welcome-hero">
|
|
7
|
+
<h1>Ywana Core8</h1>
|
|
8
|
+
<p>
|
|
9
|
+
Una biblioteca completa de componentes React diseñados para crear
|
|
10
|
+
interfaces de usuario modernas, accesibles y altamente funcionales.
|
|
11
|
+
Explora nuestra colección de componentes y descubre cómo pueden
|
|
12
|
+
acelerar tu desarrollo.
|
|
13
|
+
</p>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div className="welcome-features">
|
|
17
|
+
<div className="feature-card">
|
|
18
|
+
<div className="feature-icon">
|
|
19
|
+
<span className="material-icons">palette</span>
|
|
20
|
+
</div>
|
|
21
|
+
<h3>Diseño Moderno</h3>
|
|
22
|
+
<p>
|
|
23
|
+
Componentes con un diseño limpio y moderno que se adaptan
|
|
24
|
+
a cualquier proyecto.
|
|
25
|
+
</p>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div className="feature-card">
|
|
29
|
+
<div className="feature-icon">
|
|
30
|
+
<span className="material-icons">accessibility</span>
|
|
31
|
+
</div>
|
|
32
|
+
<h3>Accesible</h3>
|
|
33
|
+
<p>
|
|
34
|
+
Todos los componentes siguen las mejores prácticas de
|
|
35
|
+
accesibilidad web (WCAG).
|
|
36
|
+
</p>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div className="feature-card">
|
|
40
|
+
<div className="feature-icon">
|
|
41
|
+
<span className="material-icons">tune</span>
|
|
42
|
+
</div>
|
|
43
|
+
<h3>Personalizable</h3>
|
|
44
|
+
<p>
|
|
45
|
+
Fácil personalización con CSS variables y props
|
|
46
|
+
configurables.
|
|
47
|
+
</p>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div className="feature-card">
|
|
51
|
+
<div className="feature-icon">
|
|
52
|
+
<span className="material-icons">speed</span>
|
|
53
|
+
</div>
|
|
54
|
+
<h3>Optimizado</h3>
|
|
55
|
+
<p>
|
|
56
|
+
Componentes ligeros y optimizados para el mejor
|
|
57
|
+
rendimiento.
|
|
58
|
+
</p>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div className="welcome-stats">
|
|
63
|
+
<div className="stat-item">
|
|
64
|
+
<span className="stat-number">20+</span>
|
|
65
|
+
<span className="stat-label">Componentes</span>
|
|
66
|
+
</div>
|
|
67
|
+
<div className="stat-item">
|
|
68
|
+
<span className="stat-number">4</span>
|
|
69
|
+
<span className="stat-label">Categorías</span>
|
|
70
|
+
</div>
|
|
71
|
+
<div className="stat-item">
|
|
72
|
+
<span className="stat-number">100%</span>
|
|
73
|
+
<span className="stat-label">TypeScript</span>
|
|
74
|
+
</div>
|
|
75
|
+
<div className="stat-item">
|
|
76
|
+
<span className="stat-number">∞</span>
|
|
77
|
+
<span className="stat-label">Posibilidades</span>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
export default WelcomePage;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Button } from 'ywana-core8/html';
|
|
3
|
+
|
|
4
|
+
const ButtonExamples = () => {
|
|
5
|
+
return (
|
|
6
|
+
<div className="examples-grid">
|
|
7
|
+
<div className="example-section">
|
|
8
|
+
<h3>Variantes Básicas</h3>
|
|
9
|
+
<div className="example-row">
|
|
10
|
+
<Button>Primario</Button>
|
|
11
|
+
<Button variant="secondary">Secundario</Button>
|
|
12
|
+
<Button variant="outline">Outline</Button>
|
|
13
|
+
<Button variant="ghost">Ghost</Button>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<div className="example-section">
|
|
18
|
+
<h3>Tamaños</h3>
|
|
19
|
+
<div className="example-row">
|
|
20
|
+
<Button size="small">Pequeño</Button>
|
|
21
|
+
<Button size="medium">Mediano</Button>
|
|
22
|
+
<Button size="large">Grande</Button>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div className="example-section">
|
|
27
|
+
<h3>Estados</h3>
|
|
28
|
+
<div className="example-row">
|
|
29
|
+
<Button>Normal</Button>
|
|
30
|
+
<Button disabled>Deshabilitado</Button>
|
|
31
|
+
<Button loading>Cargando</Button>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div className="example-section">
|
|
36
|
+
<h3>Con Iconos</h3>
|
|
37
|
+
<div className="example-row">
|
|
38
|
+
<Button icon="add">Agregar</Button>
|
|
39
|
+
<Button icon="delete" variant="outline">Eliminar</Button>
|
|
40
|
+
<Button icon="save" iconPosition="right">Guardar</Button>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export default ButtonExamples;
|