[aform, atable] added file attach component

[Alchez]

Continuing from #122

[github-actions]

Coverage Report for ./aform

Status	Category	Percentage	Covered / Total
🟢	Lines	87.08% (🎯 70%)	209 / 240
🟢	Statements	86.88% (🎯 70%)	212 / 244
🟢	Functions	80.76% (🎯 70%)	42 / 52
🔴	Branches	68.36% (🎯 70%)	67 / 98

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
aform/src/components/form/AFileAttach.vue	0%	0%	0%	0%	26, 33, 35-37, 36, 2, 1, 10-11, 15, 18
aform/src/components/utilities/Login.vue	88.88%	81.81%	100%	88.88%	82-84
Unchanged Files
aform/src/components/AForm.vue	90.47%	40%	85.71%	90.47%	41-43, 42
aform/src/components/base/CollapseButton.vue	100%	100%	100%	100%
aform/src/components/form/ACheckbox.vue	100%	100%	100%	100%
aform/src/components/form/AComboBox.vue	0%	100%	0%	0%	2-1, 7-3
aform/src/components/form/ADate.vue	85.71%	50%	100%	85.71%	42
aform/src/components/form/ADatePicker.vue	96.61%	90%	92.85%	96.49%	65, 27
aform/src/components/form/ADropdown.vue	91.83%	76.92%	84.61%	91.83%	55, 84-85, 93
aform/src/components/form/AFieldset.vue	90%	100%	50%	90%	8
aform/src/components/form/ANumericInput.vue	100%	100%	100%	100%
aform/src/components/form/ATextInput.vue	100%	100%	100%	100%
aform/src/directives/mask.ts	84.09%	59.09%	100%	83.72%	33-34, 41, 50, 65, 98, 103

Generated in workflow #303

[Alchez]

@bhattdevarsh @crabinak I've rebased the previous changes against the latest development branch, which has seen a significant rework. When you guys pull this branch, please run the following commands:

rush purge
rush update
rush rebuild

[crabinak]

@Alchez Thanks. I noticed trying to run this now (rushx story:dev) doesn't use Histoire anymore. Has this been updated?

[Alchez]

@crabinak Sorry, I should've mentioned that in the previous comment. All the stories have been consolidated into the examples folder. You should run the following to start the Histoire server now:

cd examples
rushx dev:atable (spawns the ATable stories)
rushx dev:aform (spawns the AForm stories)

[crabinak]

@Alchez Thanks! I'm receiving this error when I try to run rushx dev:aform or rushx dev:atable

throw new Error(No support plugin found for file ${absoluteFilePath});

Am I missing something? I ran rush purge && rush update && rush rebuild but still am unable to get Histoire running.

[agritheory]

@crabinak are you running this from the examples folder? We had to move all the specimens there to prevent a circular dependency problem with ATable and AForm.

[crabinak]

@agritheory I'm running this from the examples folder. I'm not sure what is causing this error. This is the case in the development branch as well. I don't know if anyone else ran into this error and had a quick fix for it. This is the full error if it gives any clues.

file:///E:/Freelance/Agritheory/stonecrop/common/temp/node_modules/.pnpm/[email protected][email protected]/node_modules/histoire/dist/node/stories.js:75
throw new Error(No support plugin found for file ${absoluteFilePath});
^

Error: No support plugin found for file E:/Freelance/Agritheory/stonecrop/examples/aform/date.story.vue
at addStory (file:///E:/Freelance/Agritheory/stonecrop/common/temp/node_modules/.pnpm/[email protected][email protected]/node_modules/histoire/dist/node/stories.js:75:15)
at FSWatcher. (file:///E:/Freelance/Agritheory/stonecrop/common/temp/node_modules/.pnpm/[email protected][email protected]/node_modules/histoire/dist/node/stories.js:41:27)
at FSWatcher.emit (node:events:519:28)
at FSWatcher.emitWithAll (E:\Freelance\Agritheory\stonecrop\common\temp\node_modules.pnpm\[email protected]\node_modules\chokidar\index.js:540:8)
at FSWatcher._emit (E:\Freelance\Agritheory\stonecrop\common\temp\node_modules.pnpm\[email protected]\node_modules\chokidar\index.js:632:8)
at NodeFsHandler._handleFile (E:\Freelance\Agritheory\stonecrop\common\temp\node_modules.pnpm\[email protected]\node_modules\chokidar\lib\nodefs-handler.js:400:14)
at NodeFsHandler._addToNodeFs (E:\Freelance\Agritheory\stonecrop\common\temp\node_modules.pnpm\[email protected]\node_modules\chokidar\lib\nodefs-handler.js:637:21)

Node.js v20.15.1
Error: Failed calling cd atable/ && histoire dev. Exit code: 1

[Alchez]

@crabinak

Usually that error shows up when the app can't find a valid Vite file with the Histoire-Vue plugin, which makes me think it might be a dependency issue (atleast because it works for me across multiple devices after purging old builds).

Can I ask you to remove any node_modules folders that may exist and trying again?

[crabinak]

@Alchez Thanks for the suggestions. Unfortunately, I had no luck with that. I found that running pnpm run dev:aform works for me. This might have to be my workaround for now.

[crabinak]

@agritheory Here are some screenshots of the styled file attach component.

I also switched the form layout to use CSS grid instead of flexbox for a bit more control over form field sizes and positions.

[crabinak]

@agritheory I reverted the form fields back to flex box as per our discussion.