https://github.com/patternfly-webcomponents/patternfly-webcomponents-poc
POC of PF4 web components
https://github.com/patternfly-webcomponents/patternfly-webcomponents-poc
Last synced: 3 months ago
JSON representation
POC of PF4 web components
- Host: GitHub
- URL: https://github.com/patternfly-webcomponents/patternfly-webcomponents-poc
- Owner: patternfly-webcomponents
- License: apache-2.0
- Created: 2019-11-14T14:30:37.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T16:09:00.000Z (about 3 years ago)
- Last Synced: 2025-07-02T03:05:53.455Z (6 months ago)
- Language: TypeScript
- Size: 8.43 MB
- Stars: 0
- Watchers: 0
- Forks: 2
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PF4 Web Components P.O.C.
`pf4-webcomponents-poc` is a variant of PatternFly 4 Design System with Custom Elements v1 and Shadow DOM v1 specs.
Experimental at this moment, with enthusiasm.
- [Getting started with development](#getting-started-with-development)
- [Running React/Angular demo](#running-reactangular-demo)
- [List of available components](#list-of-available-components)
- [Browser support](#browser-support)
- [Coding conventions](#coding-conventions)
- [Iteration plans](#iteration-plans)
- [Creating build](#creating-build)
- [Trying out the bundled build](#trying-out-the-bundled-build)
- [Trying out the ESM build in CodeSandbox](#trying-out-the-esm-build-in-codesandbox)
- [Running unit test](#running-unit-test)
## Getting started with development
1. Fork this repository and clone it
2. `yarn install`
3. `yarn build`
4. `yarn storybook`
## Running React/Angular demo
- React: `yarn storybook:react`
- Angular: `yarn storybook:angular`
## List of available components
View available web components at: http://pf4-webcomponents-poc.surge.sh/. You can see usage information in several ways:
1. Clicking the **KNOBS** tab at the bottom and changing values there. Most knobs are shown as something like `Button kind (kind)`, where `kind` is the attribute name
2. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the selected component. You may see something like `bx-modal-closed` which typically indicates that an event with such event type is fired. You can also expand the twistie to see the details of the event
## Browser support
- Latest Chrome/Safari/FF ESR
- IE/Edge support is bast-effort basis
- Some components may not be supported
## Coding conventions
Can be found at [here](./src/coding-conventions.md).
## Creating build
```
> gulp clean
> gulp build
```
You'll see the build artifacts in `/path/to/carbon-custom-elements/es` (ESM build) and `/path/to/carbon-custom-elements/public` (bundled build) directories.
### Trying out the bundled build
1. Fork this repo
2. Run `yarn install`
3. Run `gulp build:bundle`
4. Create a directory somewhere
5. Copy `/path/to/carbon-custom-elements/public/carbon-custom-elements-with-polyfills.js` the created directory
6. Create a HTML like below and put it to the same directory, open it in browser, and you'll see the Carbon button! 🎉
```html
body {
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}
Foo
```
### Trying out the ESM build in CodeSandbox
1. Fork this repo
2. Run `yarn install`
3. Run `gulp build:modules`
4. Go to https://codesandbox.io/s/
5. Select Vanilla
6. Add dependencies (with Add Dependency button) to add the following
- `lit-html` (Latest)
- `lit-element` (Latest)
- `classnames` (Latest)
- `carbon-components` (`10.3.x`)
7. Add the following to the CodeSandbox (e.g. to `src` directory)
- `/path/to/carbon-custom-elements/es/components/button/button.js`
- `/path/to/carbon-custom-elements/es/components/button/button.css.js`
8. Go to `src/index.js` in the CodeSandbox and add something like `import "./button.js"`
9. Go to `index.html` in the CodeSandbox and add `Foo`
10. Reload the demo and you'll see the Carbon button! 🎉
## Running unit test
You can run unit test by:
```
> gulp test:unit
```
You can run specific test spec by:
```
> gulp test:unit -s tests/spec/button_spec.ts
```
You can choose a browser (instead of Headless Chrome) by:
```
> gulp test:unit -b Firefox
```
You can keep the browser after the test (and re-run the test when files change) by:
```
> gulp test:unit -b Chrome -k
```
You can prevent code coverate instrumentation code from being generated by:
```
> gulp test:unit -d
```
Above options can be used together. This is useful to debug your code as you test:
```
> gulp test:unit -s tests/spec/button_spec.ts -b Chrome -d -k
```