Skip to content

Commit 0a582f3

Browse files
SukaatoSukaato
committed
docs: update readme
1 parent ab0e2a2 commit 0a582f3

File tree

4 files changed

+134
-8
lines changed

4 files changed

+134
-8
lines changed

‎packages/core/readme.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
# @poppy-ui/core
1+
<p align="center">
2+
<a href="#">
3+
<img alt="Poppy" src="https://github.com/CheeseGrinder/poppy-ui/blob/main/.github/assets/logo.png?raw=true" width="60" />
4+
</a>
5+
</p>
6+
7+
<h1 align="center">
8+
Poppy UI - Core
9+
</h1>
210

311
[Poppy-ui](https://poppy-ui.com/) is an open source App Development UI that makes it easy to build top quality Progressive Web Apps with web technologies.
412

@@ -36,6 +44,8 @@ Additionally, within this package is a `dist/poppy.js` file and accompanying `di
3644

3745
The `@poppy-ui/core` package can be used in simple HTML, or by vanilla JavaScript without any framework at all. Poppy also has packages that make it easier to integrate Poppy into a framework's traditional ecosystem and patterns. (However, at the lowest-level framework bindings are still just using Poppy Core and Web Components).
3846

47+
* [@poppy-ui/vue](https://www.npmjs.com/package/@poppy-ui/vue)
48+
* [@poppy-ui/react](https://www.npmjs.com/package/@poppy-ui/react)
3949
* [@poppy-ui/angular](https://www.npmjs.com/package/@poppy-ui/angular)
4050

4151

‎packages/core/src/components/textarea/textarea.scss

+3
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ $minWidth: 12rem;
3535
flex-direction: column;
3636
min-width: $minWidth;
3737
height: auto;
38+
resize: both;
3839

3940
> textarea {
4041
box-sizing: border-box;
@@ -54,6 +55,8 @@ $minWidth: 12rem;
5455
font-family: theme.use_font();
5556
white-space: pre-wrap;
5657

58+
resize: inherit;
59+
5760
&:focus-visible {
5861
outline-color: var(--border-color, #{theme.use_color("base.content", 0.2)});
5962
outline-style: solid;

‎packages/vue/readme.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
# @poppy-ui/vue
1+
<p align="center">
2+
<a href="#">
3+
<img alt="Poppy" src="https://github.com/CheeseGrinder/poppy-ui/blob/main/.github/assets/logo.png?raw=true" width="60" />
4+
</a>
5+
</p>
6+
7+
<h1 align="center">
8+
Poppy UI - Vue
9+
</h1>
210

311
Poppy UI integration for Vue 3 apps.
412

‎readme.md

+111-6
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,87 @@
2525
</a>
2626
</p>
2727

28-
<h2 align="center">
28+
<!-- <h2 align="center">
2929
<a href="https://github.com/CheeseGrinder/poppy-ui/blob/main/docs/CONTRIBUTING.md">Contribute</a>
30-
</h2>
30+
</h2> -->
3131

3232
### Packages
3333

3434
| Project | Package | Version | Downloads| Links |
3535
| ------- | ------- | ------- | -------- |:-----:|
36-
| **Core** | [`@poppy-ui/core`](https://www.npmjs.com/package/@poppy-ui/core) | [![version](https://img.shields.io/npm/v/@poppy-ui/core/latest.svg)](https://www.npmjs.com/package/@poppy-ui/core) | <a href="https://www.npmjs.com/package/@poppy-ui/core" target="_blank"><img src="https://img.shields.io/npm/dm/@poppy-ui/core.svg" alt="NPM Downloads" /></a> | [`README.md`](core/README.md)
37-
| **Vue** | [`@poppy-ui/vue`](https://www.npmjs.com/package/@poppy-ui/vue) | [![version](https://img.shields.io/npm/v/@poppy-ui/vue/latest.svg)](https://www.npmjs.com/package/@poppy-ui/vue) | <a href="https://www.npmjs.com/package/@poppy-ui/vue" target="_blank"><img src="https://img.shields.io/npm/dm/@poppy-ui/vue.svg" alt="NPM Downloads" /></a> | [`README.md`](packages/vue/README.md)
38-
| **React** | [`@poppy-ui/react`](https://www.npmjs.com/package/@poppy-ui/react) | [![version](https://img.shields.io/npm/v/@poppy-ui/react/latest.svg)](https://www.npmjs.com/package/@poppy-ui/react) | <a href="https://www.npmjs.com/package/@poppy-ui/react" target="_blank"><img src="https://img.shields.io/npm/dm/@poppy-ui/react.svg" alt="NPM Downloads" /></a> |[`README.md`](packages/react/README.md)
39-
| **Angular** | [`@poppy-ui/angular`](https://www.npmjs.com/package/@poppy-ui/angular) | [![version](https://img.shields.io/npm/v/@poppy-ui/angular/latest.svg)](https://www.npmjs.com/package/@poppy-ui/angular) | <a href="https://www.npmjs.com/package/@poppy-ui/angular" target="_blank"><img src="https://img.shields.io/npm/dm/@poppy-ui/angular.svg" alt="NPM Downloads" /></a> | [`README.md`](packages/angular/README.md)
36+
| **Core** | [`@poppy-ui/core`][poppy-ui-core-npm] | [![version][poppy-ui-core-version]][poppy-ui-core-npm] | [![version][poppy-ui-core-download]][poppy-ui-core-npm] | [`README.md`][poppy-ui-core-readme]
37+
| **Vue** | [`@poppy-ui/vue`][poppy-ui-vue-npm] | [![version][poppy-ui-vue-version]][poppy-ui-vue-npm] | [![version][poppy-ui-vue-download]][poppy-ui-core-npm] | [`README.md`][poppy-ui-vue-readme]
38+
| **React** | [`@poppy-ui/react`][poppy-ui-react-npm] | [![version][poppy-ui-react-version]][poppy-ui-react-npm] | [![version][poppy-ui-react-download]][poppy-ui-core-npm] | [`README.md`][poppy-ui-react-readme]
39+
| **Angular** | [`@poppy-ui/angular`][poppy-ui-angular-npm] | [![version][poppy-ui-angular-version]][poppy-ui-angular-npm] | [![version][poppy-ui-angular-download]][poppy-ui-core-npm] | [`README.md`][poppy-ui-angular-readme]
40+
41+
## Context
42+
### Framework
43+
Poppy-ui use Stencil, which is a compiler that generates Web Components (more specifically, Custom Elements).
44+
Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.
45+
46+
Stencil was choosen for the following reasons:
47+
- it's the only one to have a wrapper for Angular, React and Vue.
48+
- easy-to-understand
49+
- good developer experience
50+
- reactive community
51+
52+
### Packages description
53+
| Package | Description |
54+
| :------ | :---------- |
55+
| Core | It contains components such as buttons, dropdown lists and their styles. |
56+
| Vue | The Vue package is a wrapper for the core package. It provides the core package in the form of Vue components. |
57+
| Angular | The Angular package is a wrapper for the core package. It provides the core package in the form of Angular components. |
58+
| React | The React package is a wrapper for the core package. It provides the core package in the form of React components. |
59+
60+
### Repository
61+
The poppy-ui repository is a [monorepo][monorepo-link].
62+
A monorepo is a single repository containing multiple distinct projects, with well-defined relationships.
63+
64+
In many projects, when a monorepo is created, they use NX, turborepo or something else.
65+
Here, We chose to use [npm workspace][npm-workspace-link] to avoid having too many dependencies and keep the project as small as possible.
66+
67+
## How to use
68+
If you want to use **Poppy-UI** on a framework, checkout the dedicated readme documentation below:
69+
70+
- [vue][poppy-ui-vue-readme] 🏗️ WIP 🏗️
71+
- [angular][poppy-ui-angular-readme] 🏗️ WIP 🏗️
72+
- [react][poppy-ui-react-readme] 🏗️ WIP 🏗️
73+
74+
75+
## Getting Started for development
76+
### Requirements
77+
- Git
78+
- Node: `20` or higher
79+
- npm: `10` or higher
80+
- Read the [stencil official documentation][stencil-doc-link]
81+
82+
### Clone the repository
83+
```sh
84+
git clone https://github.com/CheeseGrinder/poppy-ui.git
85+
```
86+
87+
### Install
88+
Step into the directory where you just cloned `poppy-ui` and run:
89+
```sh
90+
npm install
91+
```
92+
*It installs the dependencies for the `core`, `angular`, `react` and `vue` packages in one node_module in root directory.*
93+
94+
### Development
95+
```sh
96+
npm start --workspace @poppy-ui/core
97+
# or
98+
npm run core:start
99+
```
100+
*It starts the core package in development mode. For more information on developing a new feature or fixing a bug, see readme [core][poppy-ui-core-readme].*
101+
102+
### Build
103+
```sh
104+
npm run build --workspace @poppy-ui/core
105+
# or
106+
npm run core:build
107+
```
108+
*It builds the core so that the generated assets can be used by the Angular, React and Vue packages.*
40109

41110

42111
### Getting Started
@@ -53,3 +122,39 @@ and then look through our issues with a [help wanted](https://github.com/CheeseG
53122
label.
54123

55124
Please note that this project is released with a [Contributor Code of Conduct](https://github.com/CheeseGrinder/poppy-ui/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
125+
126+
127+
<!-- Links section -->
128+
[web-component-link]: https://www.webcomponents.org/introduction
129+
[graphic-chart-link]: https://drive.google.com/file/d/1rsaf98TVkOxvawB78F9iauVGrS8NAjqe/view?usp=sharing
130+
[monorepo-link]: https://monorepo.tools/#what-is-a-monorepo
131+
[npm-workspace-link]: https://docs.npmjs.com/cli/v7/using-npm/workspaces
132+
[stencil-link]: https://stenciljs.com
133+
[stencil-doc-link]: https://stenciljs.com/docs/introduction
134+
135+
<!-- Core links -->
136+
[poppy-ui-core-npm]: https://www.npmjs.com/package/@poppy-ui/core
137+
[poppy-ui-core-version]: https://img.shields.io/npm/v/@poppy-ui/core/latest.svg
138+
[poppy-ui-core-download]: https://img.shields.io/npm/dm/@poppy-ui/core.svg
139+
[poppy-ui-core-readme]: packages/core/readme.md
140+
141+
<!-- Angular links -->
142+
[angular-link]: https://angular.io/
143+
[poppy-ui-angular-npm]: https://www.npmjs.com/package/@poppy-ui/angular
144+
[poppy-ui-angular-version]: https://img.shields.io/npm/v/@poppy-ui/angular/latest.svg
145+
[poppy-ui-angular-download]: https://img.shields.io/npm/dm/@poppy-ui/angular.svg
146+
[poppy-ui-angular-readme]: packages/angular/readme.md
147+
148+
<!-- React links -->
149+
[react-link]: https://reactjs.com/
150+
[poppy-ui-react-npm]: https://www.npmjs.com/package/@poppy-ui/react
151+
[poppy-ui-react-version]: https://img.shields.io/npm/v/@poppy-ui/react/latest.svg
152+
[poppy-ui-react-download]: https://img.shields.io/npm/dm/@poppy-ui/react.svg
153+
[poppy-ui-react-readme]: packages/react/readme.md
154+
155+
<!-- Vue links-->
156+
[vue-link]: https://vuejs.org/
157+
[poppy-ui-vue-npm]: https://www.npmjs.com/package/@poppy-ui/vue
158+
[poppy-ui-vue-version]: https://img.shields.io/npm/v/@poppy-ui/vue/latest.svg
159+
[poppy-ui-vue-download]: https://img.shields.io/npm/dm/@poppy-ui/vue.svg
160+
[poppy-ui-vue-readme]: packages/vue/readme.md

0 commit comments

Comments
 (0)