feat: Add react template #295

c12i · 2024-05-28T01:34:23Z

Closes #81

Know Issues

Some entry type widgets i.e Select and Vec<T> are poorly formatted. Their functionality is not affected however. Fix to be made in separate PR

pdaoust

Some fixes and an alert that there was a problem I couldn't fix (see comment re: not rendering widgets for Vec<T>, and being unable to submit the form after I press the Add <field_name>s button).

There are some suggestions, e.g., for follow-up PRs to DRY the code and sample values that are shared among frameworks, but those are non-blocking.

...na_role_name}}/{{coordinator_zome_manifest.name}}/{{kebab_case collection_name}}.test.ts.hbs

...{{dna_role_name}}/{{coordinator_zome_manifest.name}}/{{pascal_case collection_name}}.tsx.hbs

templates/react/example.instructions.hbs

templates/react/field-types/Vec/detail/render.hbs

templates/react/field-types/Timestamp/sample.hbs

...role_name}}/{{coordinator_zome_manifest.name}}/Create{{pascal_case entry_type.name}}.tsx.hbs

templates/react/field-types/Vec/edit/render.hbs

templates/react/field-types/Vec/detail/render.hbs

pdaoust

One blocker re: the date picker
One suggestion re: same
One suggestion re: the u32 picker
And one re: checkbox picker.

Everything else tested!

templates/react/field-types/bool/Checkbox/initial-value.hbs

...role_name}}/{{coordinator_zome_manifest.name}}/Create{{pascal_case entry_type.name}}.tsx.hbs

pdaoust · 2024-06-10T21:04:50Z

templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs

@@ -0,0 +1,2 @@
+<label htmlFor="{{label}}">{{label}}</label>
+<input name="{{label}}" type="datetime-local" {{#if variable_to_read}} value={new Date({{variable_to_read}}!).toISOString()} {{/if}} onChange={(e) => set{{pascal_case variable_to_change}}(Math.floor(new Date(e.target.value).getTime() / 1000))} {{#if required}}required{{/if}} />


templates/react/field-types/u32/NumberInput/edit/render.hbs

templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs

pdaoust · 2024-06-10T21:54:46Z

templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs

+  name="{{label}}"
+  type="datetime-local"
+{{#if variable_to_read}}
+  value={new Date({{variable_to_read}}! / 1000).toISOString().slice(0, 16)}


Suggested change

value={new Date({{variable_to_read}}! / 1000).toISOString().slice(0, 16)}

{{!-- FIXME: This likely doesn't work across the daylight saving time transition --}}

value={new Date({{variable_to_read}}! / 1000 - (new Date({{variable_to_read}}! / 1000).getTimezoneOffset() * 60000)).toISOString().slice(0, 16)}

This gives the correct local time. When getting the timezone offset for the date, we have to use the same timestamp again to account for daylight saving time. However, I suspect it won't actually work around the daylight saving boundary, which may be okay because that only causes two possible windows for error in a year, for a lot fewer lines of code than the example I shared before? :)

Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com>

…er.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com>

* WIP * update ui module * add react to matched ui framework strings * hbsify templates * add base react components * react collection * react detail component * react create component * react edit template * react entry type for linked from component * field types * react link type components * fix field types * template swoop; fix issues * add missing imports, strip out eslint * fix images * refactor holochain provider * fix entry-type templates * fix link-type templates * correctly name field type widgets * add forum example * fix holochain context * check for links lengths before setting state * fix text field * styling improvments * extend base styles * improve example styling * fix mismatched components * remove ui readme * fix templates * fix imports * update elements and imports * type app signal callback * test with react template in ci * update styling * fix global styles * rename and move client context * make client context compatible with holo * fix indentation in templates * update client context template * fix entry-types for linked from component props * update detail components * add default field types * fix example app.tsx * fix vec detail render * fix vec edit render * fix timestamp * fix client context not updating loading state * fix vec input * fix vec input setters in edit components * Update templates/react/field-types/u32/NumberInput/edit/render.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com> * Update templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com> * Update templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com> * set default and initial values for boolean inputs to false * ensure previous zip file is deleted * fix templates --------- Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com>

* bump versions * feat: Add react template (#295) * WIP * update ui module * add react to matched ui framework strings * hbsify templates * add base react components * react collection * react detail component * react create component * react edit template * react entry type for linked from component * field types * react link type components * fix field types * template swoop; fix issues * add missing imports, strip out eslint * fix images * refactor holochain provider * fix entry-type templates * fix link-type templates * correctly name field type widgets * add forum example * fix holochain context * check for links lengths before setting state * fix text field * styling improvments * extend base styles * improve example styling * fix mismatched components * remove ui readme * fix templates * fix imports * update elements and imports * type app signal callback * test with react template in ci * update styling * fix global styles * rename and move client context * make client context compatible with holo * fix indentation in templates * update client context template * fix entry-types for linked from component props * update detail components * add default field types * fix example app.tsx * fix vec detail render * fix vec edit render * fix timestamp * fix client context not updating loading state * fix vec input * fix vec input setters in edit components * Update templates/react/field-types/u32/NumberInput/edit/render.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com> * Update templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com> * Update templates/react/field-types/Timestamp/DateTimePicker/edit/render.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com> * set default and initial values for boolean inputs to false * ensure previous zip file is deleted * fix templates --------- Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com> * fix: holochain client error handling (#298) * fix: holochain client error handling * fix: typescript failures in lit template * fix: holo web sdk version not part of ScaffoldWebAppData (#302) * fix: Add missing web-sdk-version to template data * rename holo web sdk template field * fix: Include react in testable templates; bump versions (#310) * fix: add react to testable templates * bump crate version; nix flake update * bump versions * nix flake update * fix: improve ts codegen and formatting for ts/tsx files (#311) * refactor: replace tempalte derived types.ts files with rust-geneted ones * fix typo * add programatic formatting * fix incorrectly named variable in tests * ignore formatting EntryTypes * fix invalid enum types * fix: improve code formatting in ts/tsx files * fix clippy warning * fix failing codgegen tests * rename tests module * update holonix version --------- Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com>

c12i force-pushed the add-react-template branch 3 times, most recently from 36e9780 to e67789e Compare May 29, 2024 16:42

c12i requested review from matthme and pdaoust May 30, 2024 08:10

c12i marked this pull request as ready for review May 30, 2024 08:10

c12i requested a review from zippy May 30, 2024 08:10

matthme approved these changes May 31, 2024

View reviewed changes

c12i force-pushed the add-react-template branch 2 times, most recently from 6567370 to 83a01b0 Compare June 3, 2024 06:38

c12i requested a review from robbiecarlton June 6, 2024 12:05

pdaoust requested changes Jun 6, 2024

View reviewed changes

c12i requested a review from pdaoust June 10, 2024 13:46

pdaoust requested changes Jun 10, 2024

View reviewed changes

c12i added 16 commits June 11, 2024 09:13

WIP

820daf8

update ui module

a595f95

add react to matched ui framework strings

f6202a2

hbsify templates

1d2474c

add base react components

fd3b0ef

react collection

7bdaa86

react detail component

c13058f

react create component

1007ddc

react edit template

50e65d8

react entry type for linked from component

aa91ac3

field types

ccd75c5

react link type components

a2e513f

fix field types

6d0f2fa

template swoop; fix issues

0fe3eeb

add missing imports, strip out eslint

610396c

fix images

7bf8a4a

c12i and others added 19 commits June 11, 2024 09:13

rename and move client context

6f29f68

make client context compatible with holo

f3ed2fe

fix indentation in templates

97532e8

update client context template

f86a258

fix entry-types for linked from component props

e1eb064

update detail components

6070204

add default field types

88306b0

fix example app.tsx

88fd712

fix vec detail render

04044db

fix vec edit render

9fd4979

fix timestamp

18751b5

fix client context not updating loading state

da8b781

fix vec input

873d832

fix vec input setters in edit components

470bdc6

Update templates/react/field-types/u32/NumberInput/edit/render.hbs

d37bf7b

Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com>

Update templates/react/field-types/Timestamp/DateTimePicker/edit/rend…

47cb363

…er.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com>

Update templates/react/field-types/Timestamp/DateTimePicker/edit/rend…

077205b

…er.hbs Co-authored-by: Paul d'Aoust <amillionlobsters@gmail.com>

set default and initial values for boolean inputs to false

7f80f0d

ensure previous zip file is deleted

519e861

c12i force-pushed the add-react-template branch from 05397b1 to 519e861 Compare June 11, 2024 06:15

c12i requested a review from pdaoust June 11, 2024 08:12

c12i added the ShouldBackport/0.3 This change should be backported to develop-0.3 label Jun 11, 2024

c12i force-pushed the add-react-template branch from ae831d6 to 9de3c27 Compare June 11, 2024 14:27

fix templates

20d97c0

c12i force-pushed the add-react-template branch from 9de3c27 to 20d97c0 Compare June 11, 2024 14:40

pdaoust approved these changes Jun 11, 2024

View reviewed changes

c12i merged commit e4bf548 into holochain:develop Jun 11, 2024
2 of 8 checks passed

c12i removed the ShouldBackport/0.3 This change should be backported to develop-0.3 label Jun 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add react template #295

feat: Add react template #295

c12i commented May 28, 2024 •

edited

Loading

pdaoust left a comment

pdaoust left a comment •

edited

Loading

pdaoust Jun 10, 2024

pdaoust Jun 10, 2024

		@@ -0,0 +1,2 @@
		<label htmlFor="{{label}}">{{label}}</label>
		<input name="{{label}}" type="datetime-local" {{#if variable_to_read}} value={new Date({{variable_to_read}}!).toISOString()} {{/if}} onChange={(e) => set{{pascal_case variable_to_change}}(Math.floor(new Date(e.target.value).getTime() / 1000))} {{#if required}}required{{/if}} />

	value={new Date({{variable_to_read}}! / 1000).toISOString().slice(0, 16)}
	{{!-- FIXME: This likely doesn't work across the daylight saving time transition --}}
	value={new Date({{variable_to_read}}! / 1000 - (new Date({{variable_to_read}}! / 1000).getTimezoneOffset() * 60000)).toISOString().slice(0, 16)}

feat: Add react template #295

feat: Add react template #295

Conversation

c12i commented May 28, 2024 • edited Loading

Know Issues

pdaoust left a comment

Choose a reason for hiding this comment

pdaoust left a comment • edited Loading

Choose a reason for hiding this comment

pdaoust Jun 10, 2024

Choose a reason for hiding this comment

pdaoust Jun 10, 2024

Choose a reason for hiding this comment

c12i commented May 28, 2024 •

edited

Loading

pdaoust left a comment •

edited

Loading