Web Components SNCF

OFFICIAL DOCUMENTATION 👉 WCS.DEV.SNCF

This project is the web component implementation of the SNCF design system.
It is built using Stencil and documented using Storybook.

If you read this documentation on GitHub, only the development branch is updated at the moment. We use the GitLab project for WCS development and releases.

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 | | 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 | | | wcs-angular | Angular integrations (value accessors, types, bindings, ...) | | | wcs-formly | Angular Formly integration for WCS | | | wcs-react | React integration for WCS (types, bindings, ...) | |

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 months in the GitLab Milestones.

Consult the changelog to know what's going on.

Major versions releases :

• v0 👉 Jul 2019

• v1 👉 Sep 2020

• v2 👉 Jun 2021

• v3 👉 Feb 2023

• v4 👉 Sep 2023

• v5 👉 May 2024

• v6 👉 Oct 2024

Example usage

There are example projects under example folder for angular and react.

Step to start the example project :

# wcs-core build
npm install
npm run build

# 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

# 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.

Install in your project

You can refer to the official WCS 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 to add WCS to your project.

Contributing

Bug, Feature request, etc...

Don't hesitate to fill in an issue and we'll discuss about it. If you want to contribute code, please fill in an issue first so we can handle it properly.

Starting the project

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 built-in facility for testing : https://stenciljs.com/docs/testing-overview.

We encourage doing TDD on functional components. To launch the tests suite simply launch :

npm run test:watch
# Or if you simply want to run them once
npm test

To launch a specific suite of tests you can simply launch

npm run test:e2e:file path_to_tests_file
# Example: you must be at the root of the project
npm run test:e2e:file src/components/tabs/tabs.e2e.ts

License

MIT