Add icon-gallery to devtest

[bircni]

When I was developing I sometimes added a devtest page locally for testing purposes, so here is my PR.
Add new pages to devtest:

• icon-gallery

[wxiaoguang]

It seems that most changes are not really needed.

[silverwind]

Some screenshots would be helpful.

[wxiaoguang]

Some screenshots would be helpful.

According to my review, I think most "devpage" changes should be reverted or refactored.

[silverwind]

Yes, no duplicating of implementation details because that would incur extra effort to keep those implementations in sync. It should work on component level (similar to how Storybook can be used for component-level previews/demos/tests).

I guess our devtest pages could eventually be replaced with Storybook if desired, it's the same principle.

[wxiaoguang]

I guess our devtest pages could eventually be replaced with Storybook if desired, it's the same principle.

There are plenty of "golang template components" or "heavy JS logic component" tested in devtest pages.

• "repo/commit_sign_badge"
• class="link-action" / class="form-fetch-action"
• modal ("base/modal_actions_confirm")
• "shared/combomarkdowneditor"
• mail templates
• markup render
• "repo/actions/view_component"
• toast

Will Storybook work for them?

[silverwind]

Will Storybook work for them?

Storybook is primarily for testing UI components (Vue, React) in isolation without a backend, so not a a good fit for backend-based components, but a good fit for Vue components (with relevant mocking).

[wxiaoguang]

Will Storybook work for them?

Storybook is primarily for testing UI components (Vue, React) in isolation without a backend, e.g. if backend is needed I would probably mock it to retain the isolation.

None of these is "UI components (Vue, React)"

[bircni]

Updated:
Only icon gallery and avatars are left

[wxiaoguang]

avatars are left

Just curious, but we view the avatars everyday on the UI, they are almost on every page, why it needs a separate devtest page?

[bircni]

avatars are left

Just curious, but we view the avatars everyday on the UI, they are almost on every page, why it needs a separate devtest page?

agree... removing too

[wxiaoguang]

@silverwind do you agree to use inline scripts and inline styles?

[wxiaoguang]

By the way, I think we should drop the imports of the "standalone" JS scripts, merge them into "index.ts" and import them when needed, because the vite can chunk them correctly.

The "standalone" modules will cause double-import problem (see my comment in the Webpack to Vite PR)

[silverwind]

1. No, move to typescript/tailwind
2. Could be done yeah, will be less bundle size and chunks at the cost of running a bit of unnecessary JS on those standalone pages.

[bircni]

So what do I need to do? what of that is part of this PR?