https://github.com/hv90/design-system-poc
This is a Proof of Concept (POC) demonstrating the usage of a design system library and how it can be consumed in an application.
https://github.com/hv90/design-system-poc
nextjs15 reactjs stencil-js stenciljs storybook typescript typescript-react
Last synced: 3 months ago
JSON representation
This is a Proof of Concept (POC) demonstrating the usage of a design system library and how it can be consumed in an application.
- Host: GitHub
- URL: https://github.com/hv90/design-system-poc
- Owner: hv90
- License: mit
- Created: 2025-03-08T04:12:34.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-03-08T17:49:56.000Z (9 months ago)
- Last Synced: 2025-06-03T18:45:29.099Z (6 months ago)
- Topics: nextjs15, reactjs, stencil-js, stenciljs, storybook, typescript, typescript-react
- Language: JavaScript
- Homepage: https://design-system-stenciljs-sb-poc.netlify.app/?path=/docs/components-mycomponent--docs
- Size: 2.65 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# POC - Design System & App Consumer
This is a Proof of Concept (POC) demonstrating the usage of a design system library and how it can be consumed in an application.
- **Live Demo:** You can check out a live demo of the design system and app consumer in action: [https://design-system-stenciljs-sb-poc.netlify.app/?path=/docs/components-mycomponent--docs](https://design-system-stenciljs-sb-poc.netlify.app/?path=/docs/components-mycomponent--docs)
## 📚 [Table of Contents](#table-of-contents)
- [Design System Repository](#-design-system-repository)
- [Development](#️-development)
- [Deployment](#-deployment)
- [App Consumer Repository](#-app-consumer-repository)
- [Troubleshooting](#️-troubleshooting)
- [Next Steps](#️-next-steps)
---
**It includes two repositories:**
## 🎨 [Design System Repository](https://github.com/hv90/design-system-poc/)
Contains the web components and their associated functionality.
### 🛠️ Technologies used
- Stencil JS 4.27
- Storybook 8.6.4
##### ⚠️ Important:
This design system aims to support React output only. Due to significant issues with the [react-output-target library](https://github.com/stenciljs/output-targets/issues/600), this starter doesn't currently support it.
---
## 📦 [App Consumer Repository](https://github.com/hv90/app-consumer-poc)
A sample application that consumes the design system library and displays its components.
### 🛠️ Technologies used
- Next JS 15 (app router, turbopack, typescript support)
---
## 🎨 Design System Repository
### ⚙️ Development
- **Install dependencies** (if not already installed):
To get started with development, follow these steps:
```bash
yarn install
```
- ### Generate new files:
To add new files or components, run the following:
```bash
yarn generate
```
- ### Add your Storybook file:
Manually add your Storybook file inside the ```src/stories``` folder to showcase the components.
- ### Run Storybook:
To see your components and work on them interactively, run:
```bash
yarn storybook
```
### 🚀 Deployment
To deploy your design system:
- ### Build the package:
```bash
yarn build
```
- ### Pack the build:
Create the .tgz package for distribution:
```bash
yarn pack
```
## 📱 App Consumer Repository
In the app that consumes the design system:
- ### Add the design system library:
First, add the .tgz package that was generated by the design system.
```bash
yarn add ./name-of-library.tgz
```
- ### Register the web components:
In your client-side rendered file, register the components using **defineCustomElements**:
For further details, check the [App Consumer Repository](https://github.com/hv90/app-consumer-poc)
```bash
import { defineCustomElements } from 'name-of-library';
```
```bash
defineCustomElements(window);
```
IntelliSense support:
After registering the components, your IDE should now be able to locate your web components and provide IntelliSense for their props and methods.
Example:
```
{
alert("hello world");
}}
>
Hello
```
## ⚠️ Troubleshooting
- ### Rendering issues:
Some components, like ```my-component``` example (or especially those with complex props such as objects or arrays), might face rendering issues in Next.js projects. In such cases, rendering them lazily may resolve the problem. For example:
```
const MyComponent = dynamic(() => import("../components/MyComponent"), {
ssr: false,
});
```
Then, you can render the component just like:
``````
## 🏗️ Next Steps
As web components don't support libraries like **Shadcn** and **Bootstrap**, it will be necessary to conduct tests using alternative libraries such as **FAST** and **Shoelace**. These libraries are designed to work well with web components, providing the required functionality and styling without depending on traditional CSS frameworks.
### Key Actions:
- **Integration with FAST**: Test the components by integrating them with the [FAST](https://fast.design) library. FAST provides a set of tools and patterns to help build high-performance web components, which is crucial for creating scalable and accessible designs.
- **Integration with Shoelace**: Implement tests with [Shoelace](https://shoelace.style), a library that offers a collection of reusable and customizable web components. Shoelace is designed to work seamlessly with web components and will be helpful to ensure consistent design behavior.
By leveraging these libraries, you can ensure better support and behavior of your components in environments that rely on web component standards, especially for more complex UIs and cross-platform consistency.