How to Create a Plasmic Package ( React | Code Components | TSDX | Chakra UI) смотреть онлайн

Create a Plasmic Package using TSDX

In this tutorial we will learn how to use create a plasmic package of code components using tsdx and add them to a Plasmic project.

We will use tsdx to create a library and start with a basic plasmic project that has Plasmic Host already setup. In the beginning, we will discuss the architecture of the existing plasmic packages provided by the Plasmic team. After that we will create the our own library that will register the Chakra UI Button component.


CHAPTERS

0:00 Introduction
02:23 Create tsdx project
04:00 tsdx project structure
05:53 Setup a Test Plasmic Project
09:20 Choose a Component Library / Install Dependencies
11:50 Add Button Code Component
19:40 Publish package to local store using Yalc
22:00 Add/Install package to consumer project using Yalc
23:25 Setup App Host for Code Components
25:08 Fix the Chakra UI Styling
28:40 Testing the Final Integration
29:44 Outro


USEFUL LINKS
https://github.com/plasmicapp/plasmic/tree/master/plasmicpkgs
https://docs.plasmic.app/learn/app-hosting/
https://docs.plasmic.app/learn/registering-code-components/
https://docs.plasmic.app/learn/code-components-ref/

https://chakra-ui.com/guides/getting-started/nextjs-guide
https://chakra-ui.com/guides/getting-started/cra-guid #2-provider-setup


Follow me on Twitter
https://twitter.com/asimkhan7330

Buy me a Coffee
https://www.buymeacoffee.com/MrPlasmic