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

📚 Table of Contents

• Design System Repository
  • Development
  • Deployment
• App Consumer Repository
• Troubleshooting
• Next Steps

---

It includes two repositories:

🎨 Design System Repository

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, this starter doesn't currently support it.

---

📦 App Consumer Repository

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:

  yarn install

• Generate new files:

  To add new files or components, run the following:

  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:

  yarn storybook

🚀 Deployment

To deploy your design system:

• Build the package:

  yarn build

• Pack the build:

  Create the .tgz package for distribution:

  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.

  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

  import { defineCustomElements } from 'name-of-library';

  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:

  <second-component
    background="black"
    borderRadius="large"
    color="green"
    size="large"
    label="world"
    clickButton={(e) => {
      alert("hello world");
    }}
  >
    <p>Hello</p>
  </second-component>
  

⚠️ 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: <MyComponent />

🏗️ 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 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, 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.