Corex Generators
Based of Phoenix Installer (phx_new 1.8.4) and Phoenix mix tasks, Corex generators adds new features to get you started in minutes with Phoenix and Corex.
The original Phoenix installer is great as it includes tests but also a separated Integration test suite.
This makes sure that the generated app passes compilation, formatting and tests in a real usage.
mix corex.new
Accepts the same flag than mix.phx.new plus:
-
--mode enable light/dark mode switching. Adds a Mode Switcher using Corex.ToggleGroup
-
--theme enable theme switching. Adds a Theme Switcher using Corex.Select. (e.g. --theme neo:uno:duo:leo)
-
--lang - enable language switching. Adds a Language Switcher using Corex.Select. (e.g. --lang en:ar:fr)
-
--rtl - enable RTL support for slect languages (e.g. --lang en:ar:fr --rtl ar)
-
--design - Include Corex design (tokens and component CSS). When no-design, it uses a prebuilt default.css instead (same as the original Phoenix installer with --no-tailwind).
You can safely delete it to have a fully unstyled setup.
-
--designex - use Designex to build your Corex tokens from Design Tokens using Style Dictionnary and Tokens Studio
-
--a11y - Include accessibility testing (Wallaby, a11y_audit) for all generated pages
-
--tidewave - Include Tidewave dev dependency and the Tidewave Plug in the endpoint
Each generated app also include a custom Controller and a Live View page example to showcase the use of Client and Server events and API
mix corex.gen.html
mix corex.gen.live
Based of Phoenix mix phx.gen.*, it accept the same flags and adds support for the use of Corex components.
Using project generator config ( similar to Phoenix Scope) it respects your Mode, Theme and Languages settings.
The generated form inputs have been also updated to use Corex Component: Select, Checkbox, PasswordInput, DatePicker and Native Input for the other types
New Components
New components have been:
- Data Table( adds supports for sorting and row selection with Corex.Checkbox)
- Data List
- Native Input (10+ types)
- Layout Heading (used in the Corex generators)
- Action
- Navigate
- Marquee
- Code
Unified Translations
Some components require accessible text such are next or prev trigger on the data picker or toggle visiblity on the password input.
Corex now uses a single attribute for all components called translations that use a default value in English.
All the translation are also translation ready with Gettext
This remove the burden to remember or to add the text manually while still offering full customization.
Phoenix Stream support
We have seen above the classic use of the Phoenix stream with a Data Table.
Phoenix Stream can also be implemented on any of the Corex components accepting a list of Items.
The components accept a Phoenix Stream as a list of items and will update the listbox accordingly, while keeping all accessibility features and states.
This means that if the user is focusing an item (with keyboard for example), the focus is preserved even after the list is updated
This has been made possible by the ability for the Vanilla JS machine to update its props during runtime.
In combinaison with Phoenix Live VIew, it opens new possibilities for client/server interactions
More Stream examples with other components coming soon.
All form component have been also updated in order to fix an issue in controlled mode related to ZagJS Vanilla machine bindings. It has now being resolved with the help from the Zag team.
Testing has also been expended to cover the use of Ecto Changeset on all form components.
Corex Design
The default themes have been updated to show the ability to change any design tokens per theme, not only colors. Meaning you can specify different spacing, radius border and more per theme, it is even possible per mode also.
Did you know that Corex Design is totally optional?
Every components is unstyled, meaning there is not a single attribute or styling in any of the Corex components.
You can even use Corex Mode and Themes Plugs without Corex design. Yes they are also fully unstyled and not linked to Corex in any ways.
This is an important approach that allows integrating the components into your existing design system
Upgrade
While still in Alpha version, upgrading to the latest version comes with (undocumented) breaking changes such as renaming component attributes for consistency (for example: collection to items).
If you encounter any issues while upgrading, drop me a message, I can help you out adapting the components to the latest version.
Happy coding
