{"id":26605846,"url":"https://github.com/patternfly-webcomponents/patternfly-webcomponents-poc","last_synced_at":"2025-10-07T12:47:09.401Z","repository":{"id":38643170,"uuid":"221716899","full_name":"patternfly-webcomponents/patternfly-webcomponents-poc","owner":"patternfly-webcomponents","description":"POC of PF4 web components","archived":false,"fork":false,"pushed_at":"2022-12-11T16:09:00.000Z","size":8841,"stargazers_count":0,"open_issues_count":28,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-02T03:05:53.455Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patternfly-webcomponents.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-14T14:30:37.000Z","updated_at":"2020-02-25T22:13:51.000Z","dependencies_parsed_at":"2023-01-27T02:45:46.677Z","dependency_job_id":null,"html_url":"https://github.com/patternfly-webcomponents/patternfly-webcomponents-poc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/patternfly-webcomponents/patternfly-webcomponents-poc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly-webcomponents%2Fpatternfly-webcomponents-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly-webcomponents%2Fpatternfly-webcomponents-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly-webcomponents%2Fpatternfly-webcomponents-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly-webcomponents%2Fpatternfly-webcomponents-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patternfly-webcomponents","download_url":"https://codeload.github.com/patternfly-webcomponents/patternfly-webcomponents-poc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly-webcomponents%2Fpatternfly-webcomponents-poc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278778962,"owners_count":26044256,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-23T21:16:42.013Z","updated_at":"2025-10-07T12:47:09.370Z","avatar_url":"https://github.com/patternfly-webcomponents.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PF4 Web Components P.O.C.\n\n`pf4-webcomponents-poc` is a variant of PatternFly 4 Design System with Custom Elements v1 and Shadow DOM v1 specs.\n\nExperimental at this moment, with enthusiasm.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Getting started with development](#getting-started-with-development)\n- [Running React/Angular demo](#running-reactangular-demo)\n- [List of available components](#list-of-available-components)\n- [Browser support](#browser-support)\n- [Coding conventions](#coding-conventions)\n- [Iteration plans](#iteration-plans)\n- [Creating build](#creating-build)\n  - [Trying out the bundled build](#trying-out-the-bundled-build)\n  - [Trying out the ESM build in CodeSandbox](#trying-out-the-esm-build-in-codesandbox)\n- [Running unit test](#running-unit-test)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Getting started with development\n\n1. Fork this repository and clone it\n2. `yarn install`\n3. `yarn build`\n4. `yarn storybook`\n\n## Running React/Angular demo\n\n- React: `yarn storybook:react`\n- Angular: `yarn storybook:angular`\n\n## List of available components\n\nView available web components at: http://pf4-webcomponents-poc.surge.sh/. You can see usage information in several ways:\n\n1. 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\n2. 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\n\n## Browser support\n\n- Latest Chrome/Safari/FF ESR\n- IE/Edge support is bast-effort basis\n  - Some components may not be supported\n\n## Coding conventions\n\nCan be found at [here](./src/coding-conventions.md).\n\n## Creating build\n\n```\n\u003e gulp clean\n\u003e gulp build\n```\n\nYou'll see the build artifacts in `/path/to/carbon-custom-elements/es` (ESM build) and `/path/to/carbon-custom-elements/public` (bundled build) directories.\n\n### Trying out the bundled build\n\n1. Fork this repo\n2. Run `yarn install`\n3. Run `gulp build:bundle`\n4. Create a directory somewhere\n5. Copy `/path/to/carbon-custom-elements/public/carbon-custom-elements-with-polyfills.js` the created directory\n6. Create a HTML like below and put it to the same directory, open it in browser, and you'll see the Carbon button! 🎉\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"text/javascript\" src=\"./carbon-custom-elements-with-polyfills.js\"\u003e\u003c/script\u003e\n    \u003cstyle type=\"text/css\"\u003e\n      body {\n        font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cbx-btn\u003eFoo\u003c/bx-btn\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Trying out the ESM build in CodeSandbox\n\n1. Fork this repo\n2. Run `yarn install`\n3. Run `gulp build:modules`\n4. Go to https://codesandbox.io/s/\n5. Select Vanilla\n6. Add dependencies (with Add Dependency button) to add the following\n   - `lit-html` (Latest)\n   - `lit-element` (Latest)\n   - `classnames` (Latest)\n   - `carbon-components` (`10.3.x`)\n7. Add the following to the CodeSandbox (e.g. to `src` directory)\n   - `/path/to/carbon-custom-elements/es/components/button/button.js`\n   - `/path/to/carbon-custom-elements/es/components/button/button.css.js`\n8. Go to `src/index.js` in the CodeSandbox and add something like `import \"./button.js\"`\n9. Go to `index.html` in the CodeSandbox and add `\u003cbx-btn\u003eFoo\u003c/bx-btn\u003e`\n10. Reload the demo and you'll see the Carbon button! 🎉\n\n## Running unit test\n\nYou can run unit test by:\n\n```\n\u003e gulp test:unit\n```\n\nYou can run specific test spec by:\n\n```\n\u003e gulp test:unit -s tests/spec/button_spec.ts\n```\n\nYou can choose a browser (instead of Headless Chrome) by:\n\n```\n\u003e gulp test:unit -b Firefox\n```\n\nYou can keep the browser after the test (and re-run the test when files change) by:\n\n```\n\u003e gulp test:unit -b Chrome -k\n```\n\nYou can prevent code coverate instrumentation code from being generated by:\n\n```\n\u003e gulp test:unit -d\n```\n\nAbove options can be used together. This is useful to debug your code as you test:\n\n```\n\u003e gulp test:unit -s tests/spec/button_spec.ts -b Chrome -d -k\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly-webcomponents%2Fpatternfly-webcomponents-poc/lists"}