Kompas Lit Web Components

Kompas Lit Web Components is frontend reusable component for Harian Kompas project.

Installation

To start building a new web component using Lit, clone this repo to a new directory:

git clone https://github.com/pt-kompas-media-nusantara/lit-web-component.git
cd lit-web-component

Then run yarn install to install Kompas Lit Web Component.

yarn install

Usage

Run:

yarn start

To develop component and run twlit concurrently, run:

yarn dev

Linting and formatting

To scan the project for linting and formatting errors, run

yarn lint

To automatically fix linting and formatting errors, run

yarn format

Testing with Web Test Runner

To execute a single test run:

yarn test

To run the tests in interactive watch mode run:

yarn test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

yarn start

To run a local development server that serves the basic demo located in demo/index.html

How to develop

• Create component that want to build on /src/components
• Use .ts format (We use TypeScript for functionality)
• Import TWStyles for the component you want to develop
• Declare every components, states and props (if exist) and run yarn dev to load tailwind automatically
• We use twlit for styling component that is based on Tailwind CSS, check out twlit.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT