Poppy UI

Poppy is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.

Poppy is based on Web Components and Daisy UI, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like Angular, React, and Vue.

Packages

Project	Package	Version	Downloads	Links
Core	@poppy-ui/core			README.md
Vue	@poppy-ui/vue			README.md
React	@poppy-ui/react			README.md
Angular	@poppy-ui/angular			README.md

Context

Framework

Poppy-ui use Stencil, which is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil was choosen for the following reasons:

• it's the only one to have a wrapper for Angular, React and Vue.
• easy-to-understand
• good developer experience
• reactive community

Packages description

Package	Description
Core	It contains components such as buttons, dropdown lists and their styles.
Vue	The Vue package is a wrapper for the core package. It provides the core package in the form of Vue components.
Angular	The Angular package is a wrapper for the core package. It provides the core package in the form of Angular components.
React	The React package is a wrapper for the core package. It provides the core package in the form of React components.

Repository

The poppy-ui repository is a monorepo. A monorepo is a single repository containing multiple distinct projects, with well-defined relationships.

In many projects, when a monorepo is created, they use NX, turborepo or something else. Here, We chose to use npm workspace to avoid having too many dependencies and keep the project as small as possible.

How to use

If you want to use Poppy-UI on a framework, checkout the dedicated readme documentation below:

• vue 3
• angular 🏗️ WIP 🏗️
• react

Getting Started for development

Requirements

• Git
• Node: 20 or higher
• npm: 10 or higher
• Read the stencil official documentation

Clone the repository

git clone https://github.com/CheeseGrinder/poppy-ui.git

Install

Step into the directory where you just cloned poppy-ui and run:

npm install

It installs the dependencies for the core, angular, react and vue packages in one node_module in root directory.

Development

npm start --workspace @poppy-ui/core
# or
npm run core:start

It starts the core package in development mode. For more information on developing a new feature or fixing a bug, see readme core.

Build

npm run build --workspace @poppy-ui/core
# or
npm run core:build

It builds the core so that the generated assets can be used by the Angular, React and Vue packages.

Getting Started

Start a new project by following our documentation. We would love to hear from you! If you have any feedback or run into issues using our framework, please file an issue on this repository.

Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.