Can anybody give me idea on how to go about creating my own ui toolkit in ember? This is so I can always save time recreating common design elements and functionalities
3 Likes
I plan on doing this over the next 4 or so months. But, I know that probably isn’t a timeline you want to wait for.
(
I’m mostly commenting here to subscribe to the thread, and see what other people have done.
I know @hakilebara knows things about this. 
1 Like
Yeah as @NullVoxPopuli mentioned, @hakilebara gave an awesome talk about this at EmberConf last month (video, slides). We use one at RedShelf, and it’s been a really great tool for sharing/standardizing a common UI “language”. I wouldn’t say we’re quite at the “fourth level” described in the talk but we’re getting there. The hardest part for us has mostly been managing the CSS and how it gets imported/built into consuming apps. Managing versions can be a little tricky one you have multiple teams using it also. Honestly it’s pretty straightforward to get started, just create a new addon and generate some components. We try to maintain 100% test coverage and do automated accessibility testing (also see my coworker’s emberconf talk on this subject). Last thing off the top of my head… we try to make sure everything in our component library is very generic, basically presentation components with good DDAU convention like cards, form controls, a basic table component, etc. Business logic or app specific code or styles stays in more specific repos.
3 Likes
Here’s a link to Frederic Soumare’s talk on this topic: EmberConf 2019 - Building a UI Styleguide in Ember by Frédéric Soumaré - YouTube
Also the ember-cli guides have a tutorial on building an addon that exports CSS and components to use in another app: Tutorial - writing your first addon - Writing addons - Ember CLI Guides
Good luck!
1 Like