Windstream Cart Design System / Rebuild

Figma Bugherd

Built With Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Learn more about Stencil here.

Getting Started

Clone the repository.

Then run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Naming Components

All components must have the win prefix, like win-something, win-something-else.

Local Dev

Due to how web components and the shadow dom work, all styles are encapsulated and combined with Tailwind creates a very slow local development refresh. The fix for this locally, is to create components without the shadow dom and building for production with shadow dom turned on.

When creating a new component, you must update two items in the @Component decorator. Update the styleUrl to styleUrls, include the ../tw.css in the styleUrls array and lastly, change shadow: true to shadow: false.

# from
@Component({
  tag: 'win-app',
  styleUrl: 'win-app.css',
  shadow: true,
})

# to
@Component({
  tag: 'win-app',
  styleUrls: [
    '../tw.css',
    'win-app.css'
  ],
  shadow: false,
})

Publishing

The below script will run the following:

• Bump package version
• Commit changes
• Update Shadow DOM
• Run Stencil Build
• Publish to NPM*
• Reset Shadow DOM Changes

//TODO: Update deployment script per ADO 675829 and reflect changes in this readme

#Due to recent environment changes manual deploys are required. 
#Contant [email protected] or [email protected] for more information. 
#node ./scripts/publish --bump=[major,minor,patch]

*You will need to log in via terminal using our Union NPM account. Credentials are in 1pass. <<<<<<< HEAD

Event Tracking with Segment

Read the Segment document to learn about how Residential Cart uses Segment to track key customer lifecycle events.

develop