Gardenjs NPM | npm.io

Gardenjs

+++ TEST RELEASE, COMING SOON +++

Gardenjs is an open source JS/Svelte-based UI component library explorer.

Getting Started

Please follow the documentation at gardenjs.org. Happy Gardening :)

What is Gardenjs?

Gardenjs provides a centralized platform for developers to create, test and present UI components and pages in isolation. Gardenjs promotes modular and reusable code, streamlines collaboration between team members and increases overall productivity. Gardenjs is designed for projects of any size.

Why Gardenjs?

Simple and efficient working.
Significantly faster than comparable tools such as Storybook.
Multiple frameworks running in a single instance.
Integration of external libraries within a project.
Many useful features without being complex and bloated.
Simply looks good :)

Supported Frameworks

HTML snippets are rendered by default. The support of JS frameworks is realized by renderer plugins. There are currently plugins for Svelte, Vue and React. You can also easily create plugins for other frameworks. Contact us, we will be happy to link your renderer plugins here.

Contributing

Gardenjs was developed and is contributed by Rabbit Development. We look forward to your feedback, please report any bugs. We also welcome contributions and are happy about sponsoring.

License

MIT

Todo's up to v1.0

task Geneate garden.vite.config.js.
task Add preprocessors scss, postcss, less, tailwind and stylus to garden.vite.config.js.
docs Explain garden.vite.config.js.
task Add "no renderer" to install script and at least least one must be selected.
bug On reload css defect (only problem in ubuntu). Maybe writing issue in gardenjs?
task Decorator for vue & react plugin.
feature Place decorator files in folders (like test-files with before/after).
feature same as decorator files, das-hooks-file (before, after)
task handle component out in vue/react
feature Support das file as JS, JSX, TS, TSX.
task sprechende fehlermeldung wenn das-datei fehlerhaft (und datei ignorieren)
task Type infos of das in editor.
task Add renderer to docs.
task Add decorator to docs.
task Public Gardenjs docs & set Gardenjs repository public.
task Public Gardenjs demo of Gardenjs docs & set repository of Gardenjs docs public.
task Public Rabbit Dev website.
task Create Linkedin profil for Rabbit Dev & Gardenjs.

Roadmap

Gardenjs will continue to be maintained. Further features will also be integrated depending on how well Gardenjs is accepted.

refactor Move logic to own file / use stores?. Handle user interaction.
feature Evaluation of "Make Storybook stories compatible with Garden". If relatively easy possible then development. Otherwise prioritize other tasks/features depending on complexity.
task Add tests.

Later (no specific order)

feature use das-files from other modules (e.g. show carrots in custom project).
task Keep user state after refresh.
- task Store selection in panel nav for refresh or if another component is selected.
- task Store selection of stage for refresh or if another component is selected.
feature Add testing library. E.g. Testing Library.
feature Collect events and show in panel.
feature Bookmarks. (siehe ReactCosmos)
task Add line numbers plugin to highlightjs.
task Sidebarnav is closed by default on narrow display devices.
task Make setting of default mode possible via garden.config.js.
task If full mode is active, switching to portrait mode is deactivated.
task Make Gardenjs docs link optional via garden.config.js.
task Move demo components from core to the renderer plugins.
task Show custom favicon.svg configured in garden.config.js.
task Color variables are made configurable for your own Gardenjs themes.
feature Screenshot tests:
- Docker image oder alternativ for screenshot test.
- Automatic create test file & and folder (like init garden).
- Settings.
feature Set width and height of stage by size input.
feature Add zoom button 100% and if zoomed show size in % with switch possibility.
feature Vertical dragbar to drag stage horizontical to show rwd behaviour. Already integrated staticly, just needs to be commented out in topbar.svelte: Show 'px' width/height of stage next to rwd-navi.
task Switch from md to mdx.
feature Set stagesize values for "mobile, tablet, desktop" inside garden.config.js. Option: Set list of custom values like iPhone 13,14,15, iPad, Samsung Galaxy A/Sx or as pixel values in garden.config and show dropdown in Gardenjs instead of icons.
task Integrate Svelte A11y features.
feature Build kickstarter "carrots". Define components for carrots.
feature Measure.
feature Manually change properties via control panel.