🥯Papanasi (pronunced pɑpənæʃ or papanash) is a UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components. Is based on the Mitosis library and documented using Storybook.
WARNING: THIS IS AN ALPHA DONT USE IT YET, IS UNDER DEVELOPMENT.
This library born as a pet project to create universal components, easy to extend in any project and easy to use with any framework, is based in the next manifesto:
A Component...
- ...should be cross-libraries but the code should be written once.
- ...should have a minimum style and should be easy to extend it via CSS by the user.
- ...should provide some optional themes to make it easy to use.
- ...should be accesible.
- ...should be made for developers not for non-coders, they will decide how to style most of the things.
- ...should be three-shakable.
- ...should be compatible with StoryBook.
- ...should be inspired in other UI Libraries to don't reinvent the wheel.
- ...should be easy to create new variants.
$ npm install @papanasi/{platform} # ex: @papanasi/react$ yarn add @papanasi/{platform} # ex: @papanasi/vue<td align="center" width="100">
<img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/angular-icon.svg" width="50" title="Angular"> <br/>
<strong>Angular</strong> <br/>
<sub>
<a href="https://github.com/CKGrafico/papanasi/blob/main/packages/angular/README.md#-setup-and-scripts" target="_blank">📗Readme</a>
<a href="https://codesandbox.io/s/papanasi-angular-7bzn8h" target="_blank">📦Sandbox</a>
</sub>
</td>
<td align="center" width="100">
<img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/react.svg" width="50" title="React"> <br/>
<strong>React</strong> <br/>
<sub>
<a href="https://github.com/CKGrafico/papanasi/blob/main/packages/react/README.md#-setup-and-scripts" target="_blank">📗Readme</a>
<a href="https://codesandbox.io/s/papanasi-react-orfn30" target="_blank">📦Sandbox</a>
</sub>
</td>
<td align="center" width="100">
<img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/solidjs-icon.svg" width="50" title="Solid"> <br/>
<strong>Solid</strong> <br/>
<sub>
<a href="https://github.com/CKGrafico/papanasi/blob/main/packages/solid/README.md#-setup-and-scripts" target="_blank">📗Readme</a>
<a href="https://codesandbox.io/s/papanasi-solid-5y3xb8" target="_blank">📦Sandbox</a>
</sub>
</td>
<td align="center" width="100">
<img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/svelte-icon.svg" width="45" title="Svelte"> <br/>
<strong>Svelte</strong> <br/>
<sub>
<a href="https://github.com/CKGrafico/papanasi/blob/main/packages/svelte/README.md#-setup-and-scripts" target="_blank">📗Readme</a>
<a href="https://codesandbox.io/s/papanasi-svelte-00ul5x" target="_blank">📦Sandbox</a>
</sub>
</td>
<td align="center" width="100">
<img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/vue.svg" width="50" title="Vue"> <br/>
<strong>Vue</strong> <br/>
<sub>
<a href="https://github.com/CKGrafico/papanasi/blob/main/packages/vue/README.md#-setup-and-scripts" target="_blank">📗Readme</a>
<a href="https://codesandbox.io/s/papanasi-vue-vygq4m" target="_blank">📦Sandbox</a>
</sub>
</td>
<td align="center" width="100">
<img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/w3c.svg" width="80" title="Web Components"> <br/>
<strong>Standard</strong> <br/>
<sub>
<a href="https://github.com/CKGrafico/papanasi/blob/main/packages/webcomponent/README.md#-setup-and-scripts" target="_blank">📗Readme</a>
<a href="https://codesandbox.io/s/papanasi-webcomponents-27zsfr" target="_blank">📦Sandbox</a>
</sub>
</td>
<td align="left" colspan="4">
<h4>Layout Components</h4>
</td>
<td align="center">
Container <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/layout-container--default-story">Preview</a>
</td>
<td align="center">
Row <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/layout-row--default-story">Preview</a>
</td>
<td align="center">
Column <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/layout-column--default-story">Preview</a>
</td>
<td align="center">
Grid <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/layout-grid--default-story">Preview</a>
</td>
<td align="left" colspan="4">
<h4>Regular Components</h4>
</td>
<td align="center">
Avatar <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/components-avatar--default-story">Preview</a>
</td>
<td align="center">
Button <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/components-button--default-story">Preview</a>
</td>
<td align="center">
Choice <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/10"/><br/>
<a href="https://papanasi.js.org/?path=/docs/components-choice--default-story">Preview</a>
</td>
<td align="center">
Code <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/components-code--default-story">Preview</a>
</td>
<td align="center">
Pill <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/components-pill--default-story">Preview</a>
</td>
<td align="center">
Spinner <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/components-spinner--default-story">Preview</a>
</td>
<td align="left" colspan="4">
<h4>Enterprise Components</h4>
</td>
<td align="center">
Itchio <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"/><br/>
<a href="https://papanasi.js.org/?path=/docs/enterprise-itchio--default-story">Preview</a>
</td>
<td align="left" colspan="4">
<h4>Extensions</h4>
</td>
<td align="center">
Tooltip <br/>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/75"/><br/>
<a href="https://papanasi.js.org/?path=/docs/extensions-tooltip--default-story">Preview</a>
</td>
To learn more about Papanasi, check the documentation.
Contributing Guidelines To run the project locally, you can use:
> yarn dev
To build the project locally, just execute:
> yarn build
Made with 🍕 by Quique Fdez Guerra