ywana-core8 0.1.103 → 0.2.2

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 +42339 -0
  3. package/dist/index.js.map +1 -0
  4. package/dist/index.modern.js +37459 -31678
  5. package/dist/index.modern.js.map +1 -1
  6. package/dist/index.umd.js +39635 -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 +255 -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 +9 -25
  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
@@ -1,127 +0,0 @@
1
- import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
2
- import { Property, TextField } from '../html'
3
- import { Wizard, WizardContext} from './wizard'
4
-
5
- export const Step1 = forwardRef((props, ref) => {
6
- useImperativeHandle(ref, () => ({ id: 1, onNext }))
7
-
8
- const wizardContext = React.useContext(WizardContext)
9
- const { form } = wizardContext
10
- const { next, onChange } = props
11
-
12
- useEffect(() => {
13
- onChange(form, isValid(form))
14
- }, [form])
15
-
16
- useEffect(() => {
17
- if (form.name && form.name === "ok" && next) next()
18
- }, [form])
19
-
20
- function changeForm(id, value) {
21
- wizardContext.setForm({ ...form, [id]: value })
22
- }
23
-
24
- function isValid(form) {
25
- console.log("isValid1")
26
- return form.name && form.name.length > 0
27
- }
28
-
29
- function onNext (onSuccess, onError) {
30
- console.log("onNext1", props.label)
31
- onSuccess()
32
- }
33
-
34
- return (
35
- <div>
36
- <h1>Step</h1>
37
- <TextField id="name" label="Name" value={form.name} onChange={changeForm} />
38
- </div>
39
- )
40
- })
41
-
42
- export const Step2 = forwardRef((props, ref) => {
43
- useImperativeHandle(ref, () => ({ id:2, isValid, onNext }))
44
-
45
- const wizardContext = React.useContext(WizardContext)
46
- const { form } = wizardContext
47
- const { onChange } = props
48
-
49
- useEffect(() => {
50
- onChange(form, isValid(form))
51
- }, [form])
52
-
53
- function changeForm(id, value) {
54
- wizardContext.setForm({ ...form, [id]: value })
55
- props.onChange(form, isValid())
56
- }
57
-
58
- function isValid() {
59
- console.log("isValid2")
60
- return form.description && form.description.length > 0
61
- }
62
-
63
- function onNext (onSuccess, onError) {
64
- console.log("onNext2", props.label)
65
- onSuccess()
66
- }
67
-
68
- return (
69
- <div>
70
- <h1>Step</h1>
71
- <TextField id="description" label="Name" value={form.description} onChange={changeForm} />
72
- </div>
73
- )
74
- })
75
-
76
- export const Step3 = forwardRef((props, ref) => {
77
- useImperativeHandle(ref, () => ({ id:3, isValid, onNext }))
78
-
79
- const wizardContext = React.useContext(WizardContext)
80
- const { form } = wizardContext
81
- const { onChange } = props
82
-
83
- useEffect(() => {
84
- onChange(form, isValid(form))
85
- }, [form])
86
-
87
- function changeForm(id, value) {
88
- wizardContext.setForm({ ...form, [id]: value })
89
- props.onChange(form, isValid())
90
- }
91
-
92
- function isValid() {
93
- console.log("isValid3")
94
- return form.address && form.address.length > 0
95
- }
96
-
97
- function onNext (onSuccess, onError) {
98
- console.log("onNExt3", props.label)
99
- onSuccess()
100
- }
101
-
102
- return (
103
- <div>
104
- <h1>Step</h1>
105
- <TextField id="address" label="Name" value={form.address} onChange={changeForm} />
106
- </div>
107
- )
108
- })
109
-
110
- const WizardTest = (prop) => {
111
-
112
- const initForm = {
113
- name: "John",
114
- description: "Test Description",
115
- address: "Test Address"
116
- }
117
-
118
- return (
119
- <>
120
- <Wizard init={0} form={initForm} >
121
- <Step1 label="Paso 1"/>
122
- <Step2 label="Paso 2"/>
123
- <Step3 label="Paso 3"/>
124
- </Wizard>
125
- </>
126
- )
127
- }
@@ -1,230 +0,0 @@
1
- import React, { Fragment, useContext, useEffect, useState } from 'react'
2
- import { SiteContext } from './siteContext'
3
- import { Site } from './site'
4
- import { Page } from './page'
5
- import { Dialog } from './dialog'
6
- import { Button, DropDown, TextField, TextArea, Icon } from '../html'
7
- import { UploadDialog } from '../widgets/upload/UploadDialog'
8
- import { Uploader } from '../widgets/upload/Uploader'
9
- import { TabbedTablePage } from '../domain/TabbedTablePage'
10
- import { TablePage } from '../domain/TablePage'
11
- import { TablePage2 } from '../domain/TablePage2'
12
- import { CollectionPage } from '../domain/CollectionPage'
13
- import { FORMATS, TYPES } from '../domain/ContentType'
14
- import { TableTest } from '../html/table.test'
15
- import { PasswordEditor } from '../incubator/password'
16
- import './site.css'
17
- import './page.css'
18
-
19
-
20
- const SiteTest = (prop) => {
21
-
22
- const footer = <div>FOOTER</div>
23
-
24
- return (
25
- <Site icon="star" title="Site Test" init={"PAGE5"} footer={footer}>
26
- <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
27
- <Page1 />
28
- </Page>
29
- <Page id="PAGE2" section="SECTION1" icon="description" title="Page 2" layout="workspace">
30
- <Page2 />
31
- </Page>
32
- <Page id="PAGE3" section="SECTION1" icon="description" title="TablePage" layout="workspace">
33
- <Page3 />
34
- </Page>
35
- <Page id="PAGE4" section="SECTION1" icon="description" title="Page 4" layout="workspace">
36
- <Page4 />
37
- </Page>
38
- <Page id="PAGE5" section="SECTION1" icon="description" title="CollectionPage" layout="workspace">
39
- <Page5 />
40
- </Page>
41
- </Site>
42
- )
43
- }
44
-
45
-
46
- const Page1 = (props) => {
47
-
48
- const site = useContext(SiteContext)
49
- const [formm, setForm] = useState({})
50
-
51
- useEffect(() => {
52
- site.notify({ title: "Notification 1", body: "Lorem ipsum dolor sit amet" })
53
- }, [])
54
-
55
- function upload() {
56
- site.openDialog(<UploadDialog target="https://maso.developxp.com/kiosk/api/upload" />)
57
- }
58
-
59
- function change(id, value) {
60
- const next = Object.assign({}, form, { [id]: value })
61
- setForm(next)
62
- }
63
-
64
- const options = [
65
- { label: "One", value: "1" },
66
- { label: "Two", value: "2" },
67
- { label: "Three", value: "3" },
68
- { label: "Four", value: "4" },
69
- { label: "Five", value: "5" },
70
- ]
71
-
72
- return (
73
- <Fragment>
74
- <header>Page 1</header>
75
- <main>
76
- <Uploader icon="cloud_upload" target="https://maso.developxp.com/kiosk/api/upload" />
77
- <Button label="Upload" action={upload} />
78
- <TextField id="name" label="Name" value={form.name} onChange={change} />
79
- <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={true} />
80
- <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={false} />
81
- <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
82
- <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
83
- </main>
84
- <footer>f1</footer>
85
- </Fragment>
86
- )
87
- }
88
-
89
- const Page2 = (props) => {
90
-
91
- const site = useContext(SiteContext)
92
-
93
- function prompt() {
94
- const actions = (
95
- <Fragment>
96
- <Button label="CLOSE" action={() => site.closePromptDialog()} />
97
- </Fragment>
98
- )
99
- site.openPromptDialog(<Dialog className="prompt" actions={actions} >PROMPT</Dialog>)
100
- }
101
-
102
- function openDialog() {
103
- const actions = (
104
- <Fragment>
105
- <Button label="CLOSE" action={() => site.closeDialog()} />
106
- </Fragment>
107
- )
108
-
109
- site.openDialog(
110
- <Dialog actions={actions}>
111
- <main>
112
- <Button label="open Custom Prompt" action={prompt} />
113
- </main>
114
- </Dialog>
115
- )
116
- }
117
-
118
- function write() {
119
- site.writeLog("xxx"+new Date())
120
- }
121
-
122
-
123
- return (
124
- <Fragment>
125
- <header>Page 2</header>
126
- <main>
127
- <Button label="open Dialog" action={openDialog} />
128
- <Button label="Write inConsole" action={write} />
129
- </main>
130
- <footer>f2</footer>
131
- </Fragment>
132
- )
133
- }
134
-
135
- const Page3 = (props) => {
136
-
137
- const ENTITYTYPE = {
138
- name : { id: "name" , section: "" , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
139
- field1: { id: "field01", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field1" },
140
- field2: { id: "field02", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field2" },
141
- field3: { id: "field03", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field3" },
142
-
143
- }
144
-
145
- const schema = {
146
- name : { id: "name" , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
147
- state : { id: "state" , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: false , label: "State" , options: [
148
- { label: "Pendiente", value: "NOT_CLASSIFIED" },
149
- { label: "Clasificada", value: "CLASSIFIED"},
150
- ]},
151
- field1: { id: "field1", section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field1" },
152
- field2: { id: "field2", section: "B", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field2" },
153
- field4: { id: "field4", section: "B", type: TYPES.STRING , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true , label: "Color" },
154
- field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: true , like: false, label: "Entity5"},
155
-
156
- }
157
-
158
- return (
159
- <Fragment>
160
- <TablePage2 title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed" groupBy="state"/>
161
- </Fragment>
162
- )
163
- }
164
-
165
-
166
- const Page4 = (props) => {
167
-
168
- const ENTITYTYPE = {
169
- name : { id: "name" , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
170
- field1: { id: "field1", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field1" },
171
- field2: { id: "field2", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field2" },
172
- field3: { id: "field3", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field3" },
173
- }
174
-
175
- const schema = {
176
- name : { id: "name" , section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true , label: "Name" },
177
- state : { id: "state" , section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: false , label: "State" , options: [
178
- { label: "Pendiente", value: "NOT_CLASSIFIED" },
179
- { label: "Clasificada", value: "CLASSIFIED"},
180
- ]},
181
- field1: { id: "field1", section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field1" },
182
- field2: { id: "field2", section: "B", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field2" },
183
- field4: { id: "field4", section: "B", type: TYPES.STRING , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true , label: "Color" },
184
- field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: true , like: false, label: "Entity5"},
185
-
186
- }
187
-
188
- return (
189
- <Fragment>
190
- <TableTest />
191
- </Fragment>
192
- )
193
- }
194
-
195
- const Page5 = (props) => {
196
-
197
- const ENTITYTYPE = {
198
- name : { id: "name" , section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
199
- field1: { id: "field1", section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true , label: "E field1" },
200
- field2: { id: "field2", section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true , label: "E field2" },
201
- field3: { id: "field3", section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field3" },
202
- }
203
-
204
- const schema = {
205
- field6: { id: "field6", section: "C", type: TYPES.ARRAY , item: ENTITYTYPE , filter: false , label: "Collection 100"},
206
- name : { id: "name" , section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true , label: "Name" },
207
- state : { id: "state" , section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: true , label: "State" , options: [
208
- { label: "Pendiente", value: "NOT_CLASSIFIED" },
209
- { label: "Clasificada", value: "CLASSIFIED" },
210
- ]},
211
- field1: { id: "field1", section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field1" },
212
- field2: { id: "field2", section: "B", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field2" },
213
- field4: { id: "field4", section: "B", type: TYPES.STRING , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: false , label: "Color" },
214
- field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: false, like: false, label: "Entity5"},
215
- id : { id: "id" , type: TYPES.STRING , filter: false },
216
- }
217
-
218
- return (
219
- <Fragment>
220
- <PasswordEditor id="password" label="Password" value="12345678" onChange={(id, value) => console.log(id, value)} />
221
- <CollectionPage
222
- title="Referencias"
223
- schema={schema} host="http://localhost:3000" url="/references" fetching={true} // resource
224
- searchBy={["name"]} levels={["color"]} // list
225
- canFilter={true} filters={{ name: "111" }} // filters
226
- editor="TABBED" canAdd={true} // editor
227
- />
228
- </Fragment>
229
- )
230
- }
@@ -1,41 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Icon, MenuItem, Chip } from '../html'
3
- import { View } from './view'
4
-
5
- const ViewTest = (prop) => {
6
-
7
- function close() {
8
- alert('close view')
9
- }
10
-
11
- const menu = [
12
- <MenuItem key="option1" label="option1" action={() => alert('1')} />
13
- ]
14
-
15
- const toolbar = [
16
- <Icon key="action1" icon="person" clickable size="small"/>,
17
- <Icon key="action2 " icon="people" clickable size="small"/>
18
- ]
19
-
20
- const info = [
21
- <Chip label="Info1" />,
22
- <Chip label="Info2" />,
23
- <Chip label="Info3" />
24
- ]
25
-
26
- return (
27
- <div style={{ padding: "1rem", height: "20rem" }}>
28
- <View
29
- canCollapse={true}
30
- icon="star"
31
- title="Title"
32
- menu={menu}
33
- onClose={close}
34
- toolbar={toolbar}
35
- info={info}
36
- >
37
- hola
38
- </View>
39
- </div>
40
- )
41
- }
@@ -1,28 +0,0 @@
1
- import React from 'react'
2
- import { Calendar } from './Calendar'
3
- import moment from 'moment'
4
-
5
- const CalendarTest = (prop) => {
6
-
7
- const events = [
8
- { id: 1, date: "2022-05-26", title: 'Event 1' },
9
- { id: 2, date: "2023-12-26", title: 'Event 2' },
10
- { id: 3, date: "2023-12-07", title: 'Event 3' },
11
-
12
- ]
13
-
14
- return (
15
- <Calendar events={events} >
16
- <CustomEvent />
17
- </Calendar>
18
- )
19
- }
20
-
21
- const CustomEvent = (props) => {
22
- const { event } = props
23
- return (
24
- <div className="custom-event" onClick={() => alert("!xxx")}>
25
- {event.title}
26
- </div>
27
- )
28
- }
@@ -1,121 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Button } from '../../html'
3
- import { FileExplorer, FileExplorerView, FileIconsView } from './explorer'
4
-
5
-
6
- const thumb1 = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png"
7
-
8
- const files = [
9
- { folder: "10001", id: "0001", icon: "description", title: "File 1", subtitle: "16 kb", src:thumb1 },
10
- { folder: "10001", id: "0002", icon: "description", title: "File 2", subtitle: "16 kb", src:thumb1 },
11
- { folder: "10001", id: "0003", icon: "description", title: "File 3", subtitle: "16 kb", src:thumb1 },
12
- { folder: "10001", id: "0004", icon: "description", title: "File 4", subtitle: "16 kb", src:thumb1 },
13
- { folder: "10001", id: "0005", icon: "description", title: "File 5", subtitle: "16 kb", src:thumb1 },
14
- { folder: "10001", id: "0006", icon: "description", title: "File 6", subtitle: "16 kb", src:thumb1 },
15
- { folder: "10001", id: "0007", icon: "description", title: "File 7", subtitle: "16 kb", src:thumb1 },
16
- { folder: "10001", id: "0008", icon: "description", title: "File 8", subtitle: "16 kb", src:thumb1 },
17
- { folder: "10001", id: "0009", icon: "description", title: "File 9", subtitle: "16 kb", src:thumb1 },
18
- { folder: "10001", id: "0010", icon: "description", title: "File 10", subtitle: "16 kb", src:thumb1 },
19
- { folder: "10001", id: "0011", icon: "description", title: "File 11", subtitle: "16 kb", src:thumb1 },
20
- { folder: "10002", id: "0012", icon: "description", title: "File 12", subtitle: "16 kb", src:thumb1 },
21
- { folder: "10002", id: "0013", icon: "description", title: "File 13", subtitle: "16 kb", src:thumb1 },
22
- { folder: "10002", id: "0014", icon: "description", title: "File 14", subtitle: "16 kb", src:thumb1 },
23
- { folder: "10002", id: "0015", icon: "description", title: "File 15", subtitle: "16 kb", src:thumb1 },
24
- { folder: "10002", id: "0016", icon: "description", title: "File 16", subtitle: "16 kb", src:thumb1 },
25
- { folder: "10002", id: "0017", icon: "description", title: "File 17", subtitle: "16 kb", src:thumb1 },
26
- { folder: "10002", id: "0018", icon: "description", title: "File 18", subtitle: "16 kb", src:thumb1 },
27
- { folder: "10002", id: "0019", icon: "description", title: "File 19", subtitle: "16 kb", src:thumb1 },
28
- { folder: "10002", id: "0020", icon: "description", title: "File 20", subtitle: "16 kb", src:thumb1 },
29
- { folder: "10002", id: "0021", icon: "description", title: "File 21", subtitle: "16 kb", src:thumb1 },
30
- { folder: "10002", id: "0022", icon: "description", title: "File 22", subtitle: "16 kb", src:thumb1 },
31
- { folder: "10002", id: "0023", icon: "description", title: "File 23", subtitle: "16 kb", src:thumb1 },
32
- { folder: "10002", id: "0024", icon: "description", title: "File 24", subtitle: "16 kb", src:thumb1 },
33
- { folder: "10003", id: "0025", icon: "description", title: "File 25", subtitle: "16 kb", src:thumb1 },
34
- { folder: "10003", id: "0026", icon: "description", title: "File 26", subtitle: "16 kb", src:thumb1 },
35
- { folder: "10003", id: "0027", icon: "description", title: "File 27", subtitle: "16 kb", src:thumb1 },
36
- { folder: "10003", id: "0028", icon: "description", title: "File 28", subtitle: "16 kb", src:thumb1 },
37
- { folder: "10003", id: "0029", icon: "description", title: "File 29", subtitle: "16 kb", src:thumb1 },
38
- { folder: "10003", id: "0030", icon: "description", title: "File 30", subtitle: "16 kb", src:thumb1 },
39
- { folder: "10003", id: "0031", icon: "description", title: "File 31", subtitle: "16 kb", src:thumb1 },
40
- { folder: "10003", id: "0032", icon: "description", title: "File 32", subtitle: "16 kb", src:thumb1 },
41
- { folder: "10004", id: "0033", icon: "description", title: "File 33", subtitle: "16 kb", src:thumb1 },
42
- { folder: "10004", id: "0034", icon: "description", title: "File 34", subtitle: "16 kb", src:thumb1 },
43
- { folder: "10004", id: "0035", icon: "description", title: "File 35", subtitle: "16 kb", src:thumb1 },
44
- { folder: "10004", id: "0036", icon: "description", title: "File 36", subtitle: "16 kb", src:thumb1 },
45
- { folder: "10004", id: "0037", icon: "description", title: "File 37", subtitle: "16 kb", src:thumb1 },
46
- { folder: "10005", id: "0033", icon: "description", title: "File 33", subtitle: "16 kb", src:thumb1 },
47
- { folder: "10005", id: "0034", icon: "description", title: "File 34", subtitle: "16 kb", src:thumb1 },
48
- { folder: "10005", id: "0035", icon: "description", title: "File 35", subtitle: "16 kb", src:thumb1 },
49
- { folder: "10005", id: "0036", icon: "description", title: "File 36", subtitle: "16 kb", src:thumb1 },
50
- { folder: "10005", id: "0037", icon: "description", title: "File 37", subtitle: "16 kb", src:thumb1 },
51
- ]
52
-
53
- const folders = [
54
- { id: "10000", icon: "folder", title: "Folder 1", subtitle: "1 file" , children: [
55
- { id: "10001", icon: "folder", title: "Folder 2", subtitle: "1 file" },
56
- { id: "20003", icon: "folder", title: "Folder 3", subtitle: "1 file" },
57
- { id: "20004", icon: "folder", title: "Folder 4", subtitle: "1 file" },
58
- ]},
59
- { id: "10002", icon: "folder", title: "Folder 2", subtitle: "1 file" },
60
- { id: "10003", icon: "folder", title: "Folder 3", subtitle: "1 file" },
61
- { id: "10004", icon: "folder", title: "Folder 4", subtitle: "1 file" },
62
- { id: "10005", icon: "folder", title: "Folder 5", subtitle: "1 file" },
63
- ]
64
-
65
-
66
- const FileExplorerViewTest = (props) => {
67
-
68
- const [selectedFolder, setSelectedFolder] = useState()
69
- const [selectedFile, setSelectedFile] = useState()
70
- const [search, setSearch] = useState()
71
-
72
- function selectFolder(id) {
73
- setSelectedFolder(id)
74
- }
75
-
76
- function selectFile(id) {
77
- setSelectedFile(id)
78
- }
79
-
80
- function searchChanged(value) {
81
- setSearch(value)
82
- }
83
-
84
- const filteredFiles = search ? files.filter(file => file.title.toLowerCase().includes(search.toLowerCase())) : files
85
- const selectedFiles = filteredFiles.filter(file => file.folder === selectedFolder)
86
-
87
- return (
88
- <div style={{ padding: "1rem", flex: "1", height: "100%" }}>
89
- <FileExplorerView
90
- title="File Explorer Test"
91
- folders={folders} selectedFolder={selectedFolder} onSelectFolder={selectFolder} 
92
- files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile}
93
- search={search} onSearch={searchChanged}
94
- />
95
- </div>
96
- )
97
- }
98
-
99
-
100
- const FileExplorerTest = (props) => {
101
-
102
- function onDeleteFile(id) {
103
- console.log("delete", id)
104
- }
105
-
106
- return (
107
- <FileExplorer
108
- title="File Explorer Test"
109
- folders={folders} defaultFolder="10004"
110
- files={files}
111
- onSelectFile={props.onSelectFile}
112
- onDeleteFile={onDeleteFile}
113
- onSelectFolder={props.onSelectFolder}
114
- columns ={[
115
- { id: 'icon', label: 'Icon', minWidth: 100 },
116
- { id: 'title', label: 'Titlcccce', minWidth: 100 },
117
- ]}
118
- searchBy={['title', 'subtitle']}
119
- />
120
- )
121
- }
@@ -1,33 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { EditorBox } from './editor'
3
-
4
- const FileRenderer = (props) => {
5
-
6
- const { id } = props
7
-
8
- return (
9
- <div className='file-renderer'>
10
- File Renderer {id}
11
- </div>
12
- )
13
-
14
- }
15
-
16
-
17
- const EditorTest = (prop) => {
18
-
19
- const [files, setFiles] = useState([
20
- { id: "1", label: "One" },
21
- { id: "2", label: "Two" },
22
- { id: "3", label: "Three" },
23
- ])
24
-
25
- function close(id) {
26
- const next = files.filter(file => file.id !== id)
27
- setFiles(next)
28
- }
29
-
30
- return (
31
- <EditorBox files={files} onClose={close} Renderer={FileRenderer}/>
32
- )
33
- }
@@ -1,78 +0,0 @@
1
- import React from 'react'
2
- import { Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane } from './Kanban'
3
- import { Button } from '../../html'
4
-
5
- const KanbanTest = (prop) => {
6
- return (
7
- <Kanban>
8
- <KanbanColumn icon="inbox" title="TODO" badge="1">
9
- <KanbanCard />
10
- </KanbanColumn>
11
- <KanbanColumn icon="inbox" title="IN PROGRESS" badge="0">
12
-
13
- </KanbanColumn>
14
- <KanbanColumn icon="inbox" title="DONE" badge="2" actions={<Button label="Archive" raised />}>
15
- <KanbanCard />
16
- <KanbanCard />
17
- </KanbanColumn>
18
- </Kanban>
19
- )
20
- }
21
-
22
- const KanbanTest2 = (prop) => {
23
- return (
24
- <Kanban>
25
- <KanbanHeader columns={[
26
- { icon: "inbox", title: "TODO", badge: "1" },
27
- { icon: "inbox", title: "IN PROGRESS", badge: "0" },
28
- { icon: "inbox", title: "IN PROGRESS", badge: "0" },
29
- { icon: "inbox", title: "IN PROGRESS", badge: "0" },
30
- { icon: "inbox", title: "DONE", badge: "2" }
31
- ]} />
32
-
33
- <KanbanSwimlane icon="people" title="Users" subtitle="Application users" badge={100} headless={false} >
34
- <KanbanColumn badge="1">
35
- <KanbanCard />
36
- </KanbanColumn>
37
- <KanbanColumn badge="0">
38
- <KanbanCard />
39
- <KanbanCard />
40
- </KanbanColumn>
41
- <KanbanColumn badge="0">
42
- <KanbanCard />
43
- <KanbanCard />
44
- </KanbanColumn>
45
- <KanbanColumn badge="0">
46
- <KanbanCard />
47
- <KanbanCard />
48
- </KanbanColumn>
49
- <KanbanColumn badge="2" actions={<Button label="Archive" raised />}>
50
- <KanbanCard />
51
- <KanbanCard />
52
- </KanbanColumn>
53
- </KanbanSwimlane>
54
- <KanbanSwimlane icon="email" title="Messages" subtitle="All Messages">
55
- <KanbanColumn badge="1">
56
- <KanbanCard />
57
- </KanbanColumn>
58
- <KanbanColumn badge="0">
59
- <KanbanCard />
60
- <KanbanCard />
61
- <KanbanCard />
62
- </KanbanColumn>
63
- <KanbanColumn badge="0">
64
- <KanbanCard />
65
- <KanbanCard />
66
- </KanbanColumn>
67
- <KanbanColumn badge="0">
68
- <KanbanCard />
69
- <KanbanCard />
70
- </KanbanColumn>
71
- <KanbanColumn badge="2" actions={<Button label="Archive" raised />}>
72
- <KanbanCard />
73
- <KanbanCard />
74
- </KanbanColumn>
75
- </KanbanSwimlane>
76
- </Kanban>
77
- )
78
- }