@zonos/elements NPM

Zonos Component UI for Stripe elements

Project build architecture:

/src/components (Will be bundled with Stencil): stencil web component, separate folder into 4 types:
- main: component that will receive custom configuration from users, do all of the script and css injection into consumer page and also control how other components will show/hide by using stencil store.
- checkout: main components that will handle zonos checkout
- hello: main components that will handle zonos hello (currently holding the component placeholder)
- store: this is state management amongs all of the components.
- stripe: the folder that will hold all of the stripe wrapper web components
- utils: folders that will hold all of the necessary utilities for all of the components in stencil
- components.d.ts: generated typed component that will have global types for all web components
/src/scripts (Will be bundled with regular rollup): scripts that will be bundled into cdn and init global utility function when consumer inject cdn into their page. Consumer then can use to init zonos elements.
- /src/scripts/demo: base scripts for the demo. setup.ts is for how to setup configuration and customer-site-interaction.ts is just base interaction for website (add to cart behavior).
/src/styled: folder that will hold all of the styling related for all web components
- variables: scss variables that will be used throughout the web components application (better to just have scss variables and should not have css)
- css: folder that will hold all of the global css (this will be generated and inject into <head> consumer site)
Have environment t3 setup, but currently it's only being used in rollup and stencil config for build time checking. It may be will remove this in the future if we don't have any severless api or api using related (right now using just native process.env, and have the rollup env plugin to transfer that env into actual value when building.
separate tsconfig for each bundling:
- tsconfig: will include all folders to have all of the intellisense throughout the project.
- tsconfig.build: stencil building process
- tsconfig.demo-script: script for demo script
- tsconfig.scripts: rollup bundling for loading script.