# Web Components SNCF [](https://www.npmjs.com/package/wcs-core) [](https://www.npmjs.com/package/wcs-core) [](https://gitlab.com/SNCF/wcs/-/pipelines) [](https://stenciljs.com) [](https://storybook.js.org/) ### **OFFICIAL DOCUMENTATION** 👉 [WCS.DEV.SNCF](https://wcs.dev.sncf) This project is the web component implementation of the [SNCF design system](https://designmetier-bootstrap.sncf.fr/). It is built using [Stencil](https://github.com/ionic-team/stencil) and documented using [Storybook](https://storybook.js.org/). If you read this documentation on GitHub, only the development branch is updated at the moment. We use the [GitLab project](https://gitlab.com/SNCF/wcs/) for WCS development and releases. We support the latest version (and LTS if applicable) of the following browsers : Chrome, Firefox, Safari, Edge, Opera. ## Documentation archives If you are looking for the documentation of a specific version, you can find using the following links (we only keep the latest version of each major version) : | Version | Documentation | |:-----------|:----------------------------------------| | v1 | Not archived | | v2 | Not archived | | v3 | Not archived | | v4 (4.2.0) | https://wcs-archive-852f99.gitlab.io/v4 | | v5 (5.1.0) | https://wcs-archive-852f99.gitlab.io/v5 | | v6 (6.0.0) | https://wcs-archive-852f99.gitlab.io/v6 | | Latest | https://wcs.dev.sncf | ## Packages Here is the list of published npm packages and their goal : | Package | Usage | Version | |:--------------|:-------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------:| | `wcs-core` | Contains the web components compiled with StencilJS | [](https://www.npmjs.com/package/wcs-core) | | `wcs-angular` | Angular integrations (value accessors, types, bindings, ...) | [](https://www.npmjs.com/package/wcs-angular) | | `wcs-formly` | Angular Formly integration for WCS | [](https://www.npmjs.com/package/wcs-formly) | | `wcs-react` | React integration for WCS (types, bindings, ...) | [](https://www.npmjs.com/package/wcs-react) | ## StackBlitz templates We created 3 StackBlitz templates to help you test quickly without worrying about WCS configuration : - WcsAngular + WcsFormly : https://stackblitz.com/edit/wcs-angular-template - WcsReact : https://stackblitz.com/edit/wcs-react-template - WcsCore only (Plain HTML) : https://stackblitz.com/edit/wcs-plain-html-template ## Roadmap This project is still under heavy development. You can get a preview of what's planned for the following versions using our [board](https://gitlab.com/SNCF/wcs/-/boards). Consult the [changelog](https://wcs.dev.sncf/?path=/docs/documentation-changelog--documentation) to know what's going on. ## Example usage There are example projects under `example` folder for angular and react. Step to start the example project : ```shell # wcs-core build npm install npm run build ``` ```shell # angular build (use --watch option to watch files) cd angular npm install ng build --project wcs-angular ng build --project wcs-formly # start angular example cd ../example/angular npm install ng serve ``` ```shell # react build cd react npm install npm run clean && npm run compile # start react example cd ../example/react npm install npm run start ``` If you have any question, don't hesitate to [fill an issue](https://gitlab.com/SNCF/wcs/-/issues/new). ## Install in your project You can refer to the [official WCS documentation](https://wcs.dev.sncf/?path=/docs/documentation-getting-started-angular--documentation) to use the lib with Angular or React. For other, StencilJS offers many integrations with different JS frameworks. You can refer to [their official documentation](https://stenciljs.com/docs/overview) to add WCS to your project. ## Contributing ### Bug, Feature request, etc... Don't hesitate to [fill in an issue](https://gitlab.com/SNCF/wcs/-/issues/new) and we'll discuss it. If you want to contribute code, please fill in an issue first so we can handle it properly. Also, if you are an SNCF employee, you can join the `Web Components` group on Teams to discuss with us. We prefer to discuss in the open and easily searchable issues tracker on GitLab when possible, but we understand that some discussions are better suited for a chat or too sensitive to be public. ### Starting the project ```sh git clone https://github.com/SNCFdevelopers/wcs.git cd wcs npm install # To see all components npm start # To see only the component you're working on npm start -- --filter select ``` ### Test The project uses stencil playwright built-in facility for testing : https://stenciljs.com/docs/testing/playwright/overview. We encourage doing TDD on functional components. To launch the tests suite simply launch : ```sh npm run test:playwright:ui # Or if you simply want to run them once npm test ``` To launch a specific suite of tests you can simply launch it in the UI playwright mode ```sh npm run test:playwright:ui ``` ### License [MIT](https://gitlab.com/SNCF/wcs/-/blob/master/LICENSE)