Toddler is a library containing a collection of Helix hooks, components and functions that I found useful throughout my career. On top of this reusable code, I've built UI components that you can test in the SHOWCASE.
The showcase is a Git submodule within this repository, used for testing, development, and documentation of Toddler UI components.
If you want to see the full API documentation, visit the API Docs.
Collection of hooks, functions and reusable components. CORE of Toddler project
Default implementation for field, table, layout components.
Icons available for:
GraphQL implementation for generating GraphQL Mutations and Queries with data structures. It is very compatible with
Lacinia project only from client side. Lets say that what Lacinia can parse and output as query data Toddler GraphQL
can reverse and generate GraphQL query.
At least for selection. Not documented yet, but ready to use. Docs... TBD
Toddler includes a built-in template to create a new project. In the following commands,
we refer to the project as new.project. Feel free to replace it with your preferred name.
clj -Sdeps '{:deps {dev.gersak/toddler-ui {:mvn/version "0.9.6"}}}' -M -m toddler.start new.project
cd new.project
npm run dev
# Navigate to http://localhost:8000Toddler components use shadow-css to generate CSS files for component styling.
In the "dev/" folder, you’ll find the compile_css.clj file, which contains functions for indexing and compiling CSS in your codebase.
During development, the function compile_css/go is called automatically from the dev/user.clj namespace, which is autoloaded.
If you have created new project with Toddler template command from quickstart than
theme css file should be available at src/new/project/main.css (path depends on how you named your project).
You can style Toddler default UI components by changing variables in that file.
To compile a production-ready release, run:
npm run releaseThis will generate both JS and CSS files in the build/ directory, ready for distribution.
First, initialize the Showcase submodule (only needed once):
git submodule init showcase
git submodule update showcaseThen, start the development server:
npm run devI've been exploring possibilities for development of mobile and desktop applications. My next goal is to build applications using Tauri, focusing on integration and a proof-of-concept (PoC) project.
DnD is another area I want to cover, leveraging functions, hooks, and signal events.
Showcase project is written using Toddler. Skelet with navigation menu, action bar where links are positioined and content area to display markdown docs is 344 lines of Clojurescript code that can be found here.
It wasn't hard, to implement but it is missing search and generated static HTML files to meet minimum of industry standard tools like Docusaurus
Not all functions, hooks, and components are currently showcased or documented. Expanding and refining the documentation is a key priority.