npm package: @metacon/sia-ui-library
Description: - [![React][react.js]][react-url] - [![Storybook][storybook-img]][storybook-url] - [![Vite][vite-img]][vite-url] - [![MUI][mui-img]][mui-url]
Latest version: 0.4.1

<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->

<a name="readme-top"></a>

<!--
*** Thanks for checking out the Best-README-Template. If you have a suggestion
*** that would make this better, please fork the repo and create a pull request
*** or simply open an issue with the tag "enhancement".
*** Don't forget to give the project a star!
*** Thanks again! Now go create something AMAZING! :D
-->

<!-- PROJECT SHIELDS -->
<!--
*** I'm using markdown "reference style" links for readability.
*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
*** See the bottom of this document for the declaration of the reference variables
*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
-->

<!-- PROJECT LOGO -->
<br />
<div align="center">
  <a href="https://github.com/Metaconnection123/sia-ui-library">
  </a>

<h1 align="center">SIA Design System</h1>

  <p align="center">
    <a href="https://storybook.withsia.com"><strong>Explore the docs »</strong></a>
    <br />
    <br />
    <a href="https://github.com/Metaconnection123/sia-ui-library/issues">Report Bug</a>
    ·
    <a href="https://github.com/Metaconnection123/sia-ui-library/issues">Request Feature</a>
  </p>
</div>

### Built With

- [![React][react.js]][react-url]
- [![Storybook][storybook-img]][storybook-url]
- [![Vite][vite-img]][vite-url]
- [![MUI][mui-img]][mui-url]

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- GETTING STARTED -->

## Getting Started

This is an example of how you may give instructions on setting up your project locally.
To get a local copy up and running follow these simple example steps.

### Prerequisites

This is an example of how to list things you need to use the software and how to install them.

- node: 18
  ```sh
  node --version
  ```
- [pnpm](https://pnpm.io/ko/installation#corepack-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)

### Installation

1. Clone the repo
   ```sh
   git clone https://github.com/Metaconnection123/sia-ui-library.git
   ```
2. Install NPM packages
   ```sh
   pnpm i
   ```

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- USAGE EXAMPLES -->

## Usage

For examples, please refer to the Documentations

- [MUI](https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component)
- [Storybook](https://storybook.withsia.com)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- CONTRIBUTING -->

## Contributing

- Foundation: [Color palette, Typography, and so on.](https://mui.com/material-ui/customization/theming/)
- [Component](https://mui.com/material-ui/guides/composition/)
- [Storybook stories](https://storybook.js.org/docs/react/writing-stories/introduction)
  - [CSF 3](https://storybook.js.org/blog/component-story-format-3-0/) (based on storybook 7)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/linkedin_username
[product-screenshot]: images/screenshot.png
[next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
[next-url]: https://nextjs.org/
[react.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[react-url]: https://reactjs.org/
[vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
[vue-url]: https://vuejs.org/
[angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
[angular-url]: https://angular.io/
[svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
[svelte-url]: https://svelte.dev/
[laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
[laravel-url]: https://laravel.com
[bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
[bootstrap-url]: https://getbootstrap.com
[jquery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
[jquery-url]: https://jquery.com
[storybook-url]: https://storybook.js.org/
[storybook-img]: https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white
[vite-url]: https://vitejs.dev/
[vite-img]: https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white
[mui-url]: https://mui.com/
[mui-img]: https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white