ywana-core8 0.1.102 → 0.2.1

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.
Files changed (172) hide show
  1. package/dist/index.css +4941 -324
  2. package/dist/index.js +42338 -0
  3. package/dist/index.js.map +1 -0
  4. package/dist/index.modern.js +37458 -31678
  5. package/dist/index.modern.js.map +1 -1
  6. package/dist/index.umd.js +39634 -34010
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +26 -29
  9. package/src/Test.stories.jsx +28 -0
  10. package/src/desktop/Desktop.stories.jsx +110 -0
  11. package/src/desktop/WindowContext.js +135 -0
  12. package/src/desktop/WindowManager.js +355 -0
  13. package/src/desktop/desktop.css +55 -4
  14. package/src/desktop/desktop.js +312 -6
  15. package/src/desktop/index.js +7 -0
  16. package/src/desktop/window.css +229 -36
  17. package/src/desktop/window.js +254 -20
  18. package/src/desktop.backup/desktop.css +6 -0
  19. package/src/desktop.backup/desktop.js +13 -0
  20. package/src/desktop.backup/window.css +58 -0
  21. package/src/desktop.backup/window.js +27 -0
  22. package/src/html/Accordion.stories.jsx +178 -0
  23. package/src/html/Button.stories.jsx +175 -0
  24. package/src/html/Checkbox.stories.jsx +131 -0
  25. package/src/html/Chip.stories.jsx +189 -0
  26. package/src/html/Color.stories.jsx +234 -0
  27. package/src/html/Form.stories.jsx +271 -0
  28. package/src/html/Icon.stories.jsx +233 -0
  29. package/src/html/Progress.stories.jsx +247 -0
  30. package/src/html/Radio.stories.jsx +289 -0
  31. package/src/html/StyleTest.stories.jsx +81 -0
  32. package/src/html/Switch.stories.jsx +329 -0
  33. package/src/html/Tab.stories.jsx +239 -0
  34. package/src/html/Table.stories.jsx +188 -0
  35. package/src/html/Table2.stories.jsx +238 -0
  36. package/src/html/TextField2.stories.jsx +337 -0
  37. package/src/html/Tree.stories.jsx +285 -0
  38. package/src/html/accordion.example.js +0 -74
  39. package/src/html/accordion.js +1 -6
  40. package/src/html/button.js +2 -13
  41. package/src/html/checkbox.js +1 -9
  42. package/src/html/chip.js +2 -19
  43. package/src/html/color.js +1 -14
  44. package/src/html/form.js +4 -15
  45. package/src/html/header2.js +1 -12
  46. package/src/html/icon.js +1 -7
  47. package/src/html/index.js +1 -1
  48. package/src/html/list.js +1 -19
  49. package/src/html/menu.js +9 -5
  50. package/src/html/progress.js +5 -53
  51. package/src/html/property.js +6 -22
  52. package/src/html/radio.js +2 -16
  53. package/src/html/section.js +1 -6
  54. package/src/html/selector.js +2 -19
  55. package/src/html/switch.css +134 -100
  56. package/src/html/switch.example.js +46 -36
  57. package/src/html/switch.js +43 -192
  58. package/src/html/tab.js +3 -24
  59. package/src/html/text.js +1 -12
  60. package/src/html/textfield2.js +5 -42
  61. package/src/html/thumbnail.js +1 -12
  62. package/src/html/tokenfield.js +2 -21
  63. package/src/html/tree.js +3 -35
  64. package/src/index.js +1 -0
  65. package/__previewjs__/Wrapper.tsx +0 -14
  66. package/build-doc.sh +0 -10
  67. package/db/db.json +0 -89
  68. package/db/routes.json +0 -0
  69. package/dist/index.cjs +0 -36722
  70. package/dist/index.cjs.map +0 -1
  71. package/dist/index.css.map +0 -1
  72. package/doc/README.md +0 -196
  73. package/doc/evalulations/ACCORDION_EVALUATION.md +0 -583
  74. package/doc/evalulations/CHECKBOX_EVALUATION.md +0 -273
  75. package/doc/evalulations/CHIP_EVALUATION.md +0 -542
  76. package/doc/evalulations/COLOR_EVALUATION.md +0 -524
  77. package/doc/evalulations/COMPONENTS_EVALUATION.md +0 -477
  78. package/doc/evalulations/FORM_EVALUATION.md +0 -459
  79. package/doc/evalulations/HEADER_EVALUATION.md +0 -436
  80. package/doc/evalulations/ICON_EVALUATION.md +0 -254
  81. package/doc/evalulations/LIST_EVALUATION.md +0 -574
  82. package/doc/evalulations/PROGRESS_EVALUATION.md +0 -450
  83. package/doc/evalulations/RADIO_EVALUATION.md +0 -439
  84. package/doc/evalulations/RADIO_VISUAL_FIX.md +0 -183
  85. package/doc/evalulations/SECTION_IMPROVEMENTS.md +0 -153
  86. package/doc/evalulations/SWITCH_EVALUATION.md +0 -335
  87. package/doc/evalulations/SWITCH_VISUAL_FIX.md +0 -232
  88. package/doc/evalulations/TAB_EVALUATION.md +0 -626
  89. package/doc/evalulations/TEXTFIELD_EVALUATION.md +0 -747
  90. package/doc/evalulations/TOOLTIP_FIX.md +0 -157
  91. package/doc/evalulations/TREE_EVALUATION.md +0 -708
  92. package/doc/index.html +0 -0
  93. package/doc/package-lock.json +0 -17298
  94. package/doc/package.json +0 -34
  95. package/doc/public/index.html +0 -24
  96. package/doc/scripts/generate-examples.js +0 -129
  97. package/doc/src/App.css +0 -171
  98. package/doc/src/App.js +0 -114
  99. package/doc/src/components/ExamplePage.js +0 -129
  100. package/doc/src/components/WelcomePage.js +0 -84
  101. package/doc/src/index.css +0 -246
  102. package/doc/src/index.js +0 -17
  103. package/doc/src/theme.css +0 -256
  104. package/jest.config.js +0 -24
  105. package/preview.config.js +0 -38
  106. package/publish.sh +0 -6
  107. package/src/desktop/dektop.test.js +0 -11
  108. package/src/domain/CollectionAPI.test.js +0 -19
  109. package/src/domain/ContentEditor.test.js +0 -52
  110. package/src/domain2/CollectionAPI.test.js +0 -19
  111. package/src/domain2/CollectionContext.test.js +0 -71
  112. package/src/domain2/CollectionPage.test.js +0 -112
  113. package/src/domain2/DynamicForm.test.js +0 -47
  114. package/src/html/accordion.test.js +0 -37
  115. package/src/html/accordion.unit.test.js +0 -334
  116. package/src/html/button.example.new.js +0 -416
  117. package/src/html/button.test.js +0 -422
  118. package/src/html/checkbox.test.js +0 -285
  119. package/src/html/chip.test.js +0 -425
  120. package/src/html/color.example.js.backup +0 -527
  121. package/src/html/color.test.js +0 -377
  122. package/src/html/components.example.js.backup +0 -492
  123. package/src/html/components_enhanced.test.js +0 -581
  124. package/src/html/form.example.js.backup +0 -385
  125. package/src/html/form.test.js +0 -369
  126. package/src/html/header2.example.js.backup +0 -411
  127. package/src/html/header2.test.js +0 -377
  128. package/src/html/icon.example.js.backup +0 -268
  129. package/src/html/icon.test.js +0 -231
  130. package/src/html/label.test.js +0 -0
  131. package/src/html/list.example.js.backup +0 -404
  132. package/src/html/list.test.js +0 -383
  133. package/src/html/progress.example.js.backup +0 -424
  134. package/src/html/progress.test.js +0 -313
  135. package/src/html/property.example.js.backup +0 -553
  136. package/src/html/property.test.js +0 -371
  137. package/src/html/radio.example.js.backup +0 -389
  138. package/src/html/radio.test.js +0 -318
  139. package/src/html/section.example.js.backup +0 -99
  140. package/src/html/section.test.js +0 -131
  141. package/src/html/selector.test.js +0 -20
  142. package/src/html/switch.example.js.backup +0 -461
  143. package/src/html/switch.test.js +0 -355
  144. package/src/html/tab.example.js.backup +0 -446
  145. package/src/html/tab.test.js +0 -25
  146. package/src/html/tab_enhanced.test.js +0 -504
  147. package/src/html/table.test.js +0 -70
  148. package/src/html/table2.test.js +0 -582
  149. package/src/html/text.test.js +0 -15
  150. package/src/html/textfield.test.js +0 -51
  151. package/src/html/textfield2.example.js.backup +0 -1370
  152. package/src/html/textfield2.test.js +0 -950
  153. package/src/html/tokenfield.example.js.backup +0 -503
  154. package/src/html/tokenfield.test.js +0 -423
  155. package/src/html/tree.example.js.backup +0 -475
  156. package/src/html/tree.test.js +0 -43
  157. package/src/html/tree_enhanced.test.js +0 -495
  158. package/src/http/token.test.js +0 -50
  159. package/src/incubator/pdfViewer.js +0 -33
  160. package/src/incubator/wizard.test.js +0 -127
  161. package/src/site/site.test.js +0 -230
  162. package/src/site/view.test.js +0 -41
  163. package/src/widgets/calendar/Calendar.test.js +0 -28
  164. package/src/widgets/explorer/Explorer.test.js +0 -121
  165. package/src/widgets/ide/editor.test.js +0 -33
  166. package/src/widgets/kanban/Kanban.test.js +0 -78
  167. package/src/widgets/login/LoginBox.test.js +0 -12
  168. package/src/widgets/login/ResetPasswordBox.test.js +0 -34
  169. package/src/widgets/login/validations.test.js +0 -51
  170. package/src/widgets/planner/Planner.test.js +0 -60
  171. package/src/widgets/upload/Upload.test.js +0 -32
  172. package/table2.test.js +0 -454
package/doc/package.json DELETED
@@ -1,34 +0,0 @@
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.92"
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
- }
package/doc/public/index.html DELETED
@@ -1,24 +0,0 @@
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
- <script defer="defer" src="static/js/main.b8affaf0.js"></script>
18
- <link href="static/css/main.705ece8d.css" rel="stylesheet">
19
- </head>
20
- <body>
21
- <noscript>Necesitas habilitar JavaScript para ejecutar esta aplicación.</noscript>
22
- <div id="root"></div>
23
- </body>
24
- </html>
package/doc/scripts/generate-examples.js DELETED
@@ -1,129 +0,0 @@
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 DELETED
@@ -1,171 +0,0 @@
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 DELETED
@@ -1,114 +0,0 @@
1
- import React, { Fragment } from 'react';
2
- import { Site, Page } from 'ywana-core8';
3
- import { ButtonExamples, AccordionExamples, CheckBoxExamples, ChipExamples, ColorExamples, FormExamples, Header2Examples, IconExamples, ListExamples, ProgressExamples, PropertyExamples, RadioExamples, SectionExamples, SwitchExamples, TabExamples, TableExamples, DataTable2Examples, TextField2Examples, TokenFieldExamples, TreeExamples } from 'ywana-core8'
4
- import './App.css';
5
-
6
- // Hacer Fragment disponible globalmente para los componentes de ywana-core8
7
- window.React = React;
8
- window.Fragment = Fragment;
9
-
10
- // Importar componentes de ejemplo
11
- import WelcomePage from './components/WelcomePage';
12
-
13
- function App() {
14
- return (
15
- <Site
16
- icon="widgets"
17
- title="Ywana Core8 Documentation"
18
- init="welcome"
19
- >
20
- {/* Página de bienvenida */}
21
- <Page
22
- id="welcome"
23
- title="Welcome"
24
- icon="home"
25
- section="Overview"
26
- >
27
- <WelcomePage />
28
- </Page>
29
-
30
- <Page id="button" title="Button" icon="widgets" section="Inputs">
31
- <ButtonExamples />
32
- </Page>
33
-
34
- <Page id="accordion" title="Accordion" icon="widgets" section="Inputs">
35
- <AccordionExamples />
36
- </Page>
37
-
38
- <Page id="checkbox" title="Checkbox" icon="widgets" section="Inputs">
39
- <CheckBoxExamples />
40
- </Page>
41
-
42
- <Page id="chip" title="Chip" icon="widgets" section="Inputs">
43
- <ChipExamples />
44
- </Page>
45
-
46
- <Page id="color" title="Color" icon="widgets" section="Inputs">
47
- <ColorExamples />
48
- </Page>
49
-
50
- <Page id="form" title="Form" icon="widgets" section="Inputs">
51
- <FormExamples />
52
- </Page>
53
-
54
- <Page id="header" title="Header" icon="widgets" section="Inputs">
55
- <Header2Examples />
56
- </Page>
57
-
58
- <Page id="icon" title="Icon" icon="widgets" section="Inputs">
59
- <IconExamples />
60
- </Page>
61
-
62
- <Page id="list" title="List" icon="widgets" section="Inputs">
63
- <ListExamples />
64
- </Page>
65
-
66
- <Page id="progress" title="Progress" icon="widgets" section="Inputs">
67
- <ProgressExamples />
68
- </Page>
69
-
70
- <Page id="property" title="Property" icon="widgets" section="Inputs">
71
- <PropertyExamples />
72
- </Page>
73
-
74
- <Page id="radio" title="Radio" icon="widgets" section="Inputs">
75
- <RadioExamples />
76
- </Page>
77
-
78
- <Page id="section" title="Section" icon="widgets" section="Inputs">
79
- <SectionExamples />
80
- </Page>
81
-
82
- <Page id="switch" title="Switch" icon="widgets" section="Inputs">
83
- <SwitchExamples />
84
- </Page>
85
-
86
- <Page id="tab" title="Tab" icon="widgets" section="Inputs">
87
- <TabExamples />
88
- </Page>
89
-
90
- <Page id="table" title="Table" icon="widgets" section="Inputs">
91
- <TableExamples />
92
- </Page>
93
-
94
- <Page id="table2" title="Table2" icon="widgets" section="Inputs">
95
- <DataTable2Examples />
96
- </Page>
97
-
98
- <Page id="textfield" title="Textfield" icon="widgets" section="Inputs">
99
- <TextField2Examples />
100
- </Page>
101
-
102
- <Page id="tokenfield" title="Tokenfield" icon="widgets" section="Inputs">
103
- <TokenFieldExamples />
104
- </Page>
105
-
106
- <Page id="tree" title="Tree" icon="widgets" section="Inputs">
107
- <TreeExamples />
108
- </Page>
109
-
110
- </Site>
111
- );
112
- }
113
-
114
- export default App;
package/doc/src/components/ExamplePage.js DELETED
@@ -1,129 +0,0 @@
1
- import React, { useState, useEffect } from 'react';
2
- import * as YwanaComponents from 'ywana-core8';
3
-
4
- const CATEGORIES = {
5
- 'Inputs': { icon: 'input' },
6
- 'Layout': { icon: 'view_quilt' },
7
- 'Data': { icon: 'table_chart' },
8
- 'Feedback': { icon: 'feedback' }
9
- };
10
-
11
- const ExamplePage = ({ example }) => {
12
- const [ExampleComponent, setExampleComponent] = useState(null);
13
- const [loading, setLoading] = useState(true);
14
- const [error, setError] = useState(null);
15
-
16
- useEffect(() => {
17
- const createExample = () => {
18
- try {
19
- setLoading(true);
20
- setError(null);
21
-
22
- // Obtener el nombre del componente
23
- const componentName = example.file.replace('.example.js', '');
24
-
25
- // Crear un ejemplo simple usando el componente de ywana-core8
26
- const ExampleComponent = () => {
27
- const Component = YwanaComponents[componentName] || YwanaComponents[componentName.charAt(0).toUpperCase() + componentName.slice(1)];
28
-
29
- if (!Component) {
30
- return (
31
- <div className="example-placeholder">
32
- <div className="placeholder-icon">
33
- <span className="material-icons">{example.icon}</span>
34
- </div>
35
- <h3>{example.title}</h3>
36
- <p>Componente: {componentName}</p>
37
- <div className="placeholder-note">
38
- <span className="material-icons">info</span>
39
- <span>Ejemplo básico del componente {componentName}</span>
40
- </div>
41
- <div className="component-demo">
42
- <p>Este componente está disponible en ywana-core8 pero necesita configuración específica.</p>
43
- </div>
44
- </div>
45
- );
46
- }
47
-
48
- // Crear props básicas según el tipo de componente
49
- const getBasicProps = () => {
50
- switch (componentName.toLowerCase()) {
51
- case 'button':
52
- return { children: 'Ejemplo Button', onClick: () => alert('Button clicked!') };
53
- case 'accordion':
54
- return {
55
- sections: [
56
- { title: 'Sección 1', children: 'Contenido de la sección 1' },
57
- { title: 'Sección 2', children: 'Contenido de la sección 2' }
58
- ]
59
- };
60
- case 'checkbox':
61
- return { label: 'Ejemplo Checkbox', checked: false };
62
- case 'textfield':
63
- return { label: 'Ejemplo TextField', placeholder: 'Escribe aquí...' };
64
- default:
65
- return {};
66
- }
67
- };
68
-
69
- return (
70
- <div className="component-demo">
71
- <h4>Ejemplo de {componentName}</h4>
72
- <div className="demo-container">
73
- <Component {...getBasicProps()} />
74
- </div>
75
- </div>
76
- );
77
- };
78
-
79
- setExampleComponent(() => ExampleComponent);
80
- } catch (err) {
81
- console.error('Error creating example:', err);
82
- setError(err.message);
83
- } finally {
84
- setLoading(false);
85
- }
86
- };
87
-
88
- createExample();
89
- }, [example]);
90
-
91
- if (loading) {
92
- return (
93
- <div className="example-loading">
94
- <div className="loading-spinner"></div>
95
- <p>Cargando ejemplo...</p>
96
- </div>
97
- );
98
- }
99
-
100
- if (error) {
101
- return (
102
- <div className="example-error">
103
- <span className="material-icons">error</span>
104
- <p>Error al cargar el ejemplo: {error}</p>
105
- </div>
106
- );
107
- }
108
-
109
- return (
110
- <div className="example-page">
111
- <div className="content-header">
112
- <div className="breadcrumb">
113
- <span className="material-icons">{CATEGORIES[example.category]?.icon}</span>
114
- <span>{example.category}</span>
115
- <span className="material-icons">chevron_right</span>
116
- <span>{example.title}</span>
117
- </div>
118
- <h1>{example.title}</h1>
119
- <p>{example.description}</p>
120
- </div>
121
-
122
- <div className="example-container">
123
- {ExampleComponent && <ExampleComponent />}
124
- </div>
125
- </div>
126
- );
127
- };
128
-
129
- export default ExamplePage;
package/doc/src/components/WelcomePage.js DELETED
@@ -1,84 +0,0 @@
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
- A comprehensive React component library designed to create
10
- modern, accessible, and highly functional user interfaces.
11
- Explore our component collection and discover how they can
12
- accelerate your development.
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>Modern Design</h3>
22
- <p>
23
- Components with clean, modern design that adapt
24
- to any project.
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>Accessible</h3>
33
- <p>
34
- All components follow web accessibility best practices
35
- (WCAG guidelines).
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>Customizable</h3>
44
- <p>
45
- Easy customization with CSS variables and
46
- configurable props.
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>Optimized</h3>
55
- <p>
56
- Lightweight components optimized for the best
57
- performance.
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">Components</span>
66
- </div>
67
- <div className="stat-item">
68
- <span className="stat-number">6</span>
69
- <span className="stat-label">Categories</span>
70
- </div>
71
- <div className="stat-item">
72
- <span className="stat-number">100%</span>
73
- <span className="stat-label">React</span>
74
- </div>
75
- <div className="stat-item">
76
- <span className="stat-number">∞</span>
77
- <span className="stat-label">Possibilities</span>
78
- </div>
79
- </div>
80
- </div>
81
- );
82
- };
83
-
84
- export default WelcomePage;