Plans for Keen UI next major version: Seeking contributors!

[JosephusPaye]

Over the next few months I'll be working more on Keen UI, and I'm looking for help to get the following done by early next year.

The things in this list are just a general indication of where I want to go, and may change at any time.

Plans

Immediate plans

No breaking changes, just fixes and preparation for next major version. Aiming for Christmas. Changes tracked on build-and-docs-refactor branch.

• [x] Switch build system to Vue CLI (completed on vue-cli branch)
  • [x] Add Prettier
  • [x] Adapt Vue's recommended code style
• [ ] Automate the release process to enable faster, more regular updates
  • [ ] Single command to build, release to Github and npm, and update website
  • [ ] Automated change logs and release notes
• [ ] Rewrite website (no redesign yet) and docs to use Markdown and VuePress
• [ ] Add Storybook for component development (see storybook branch). Then convert examples in docs to stories:
  • [x] UiAlert
  • [x] UiAutocomplete
  • [x] UiButton
  • [ ] UiCalendar
  • [ ] UiCheckbox
  • [ ] UiCheckboxGroup
  • [ ] UiCloseButton
  • [ ] UiCollapsible
  • [ ] UiConfirm
  • [ ] UiDatepicker
  • [ ] UiDatepickerCalendar
  • [ ] UiFab
  • [ ] UiFileupload
  • [ ] UiIcon
  • [ ] UiIconButton
  • [ ] UiMenu
  • [ ] UiModal
  • [x] UiPopover
  • [ ] UiPreloader
  • [ ] UiProgressCircular
  • [ ] UiProgressLinear
  • [ ] UiRadio
  • [ ] UiRadioGroup
  • [x] UiRippleInk
  • [ ] UiSelect
  • [ ] UiSlider
  • [ ] UiSnackbar
  • [ ] UiSnackbarContainer
  • [ ] UiSwitch
  • [ ] UiTab
  • [ ] UiTabs
  • [ ] UiTextbox
  • [ ] UiToolbar
  • [x] UiTooltip
• [ ] Fix or address outstanding issues and PRs

Further plans

Aiming for February/March.

• TypeScript declarations
• First class CSS API and theming support: make it easy to restyle and customize the appearance of all components
  • Document CSS API (e.g. major classes) for each component. I quite like the Reach UI approach.
  • Ship three themes:
    • bare (bare minimal styles (mostly layout), meant as a base for customization and other themes)
    • light (default material theme, builds bare)
    • dark (dark material theme, builds on bare)
• Create static design assets for each component (for Figma, Sketch)
• Re-examine overall component API and how everything fits together. The Reach UI APIs are quite sensible. Can learn a thing or two from them.
  • Move away from refs + methods where possible
  • Use context to simplify coupled components like UiTabs + UiTab, UiSelect + UiSelectOption
  • Fix components that have composition issues: e.g. UiSlider in UiModal
• SSR Support

Going forward

• Rewrite components with TypeScript and take advantage of the new features in Vue 3. This will not affect users of Keen UI (unless they're using TypeScript)
• Automated tests for components that need it
• Remove Sass in favor of new CSS API
• Create a Keen UI plugin for Vue CLI

Can you help?

To get all this done (and more going forward) I'm seeking contributors to help with issues, pull requests, documentation, and code.

Please respond to this thread with how you can help if you're interested.

[kilobyte2007]

Hey @JosephusPaye, I'd be willing to help out with some of the above. We use keen-ui in our app and I would be happy to help move the project further. Where could I be of help?

[JosephusPaye]

At the moment I could use some help writing stories for the components.

I've started this work on the storybook branch with stories already written for these components:

• UiAlert
• UiAutocomplete
• UiButton
• UiPopover
• UiRippleInk
• UiTooltip

You could make a PR to the storybook branch to add stories for any of the remaining components (one PR per component). Currently I'm just converting the examples in the docs to Storybook stories.

For more details on the Storybook setup, see this article: https://dev.to/josephuspaye/using-storybook-with-vue-single-file-components-2od

Let me know if you have any questions.

[kilobyte2007]

One question. How will be the components API represented using Storybook? In current docs we have the API block for every component, showing every component's props, methods, slots, and events, so after looking through the components you already implemented storybooks for, I could not find how this will be done.

[JosephusPaye]

They'll remain in the docs for now - which will also have the single "interactive example".

All other examples and actual component development will happen in Storybook.

[dkimmich-onventis]

Material Design's text fields changed their appearance. Do you plan to adapt to those changes?

[JosephusPaye]

Yes, those will be good to have, as well as the other new changes.