Git Product home page Git Product logo

wcs's Introduction

SNCF Design System Cover

Web Components SNCF

pipeline npm version downloads

Built With Stencil Storybook

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.

Packages

Here is the list of published npm packages and their goal :

Package Usage Version
wcs-core Contains the web components compiled with StencilJS npm version
wcs-angular Angular integrations (value accessors, types, bindings, ...) npm version
wcs-formly Angular Formly integration for WCS npm version
wcs-react React integration for WCS (types, bindings, ...) npm version

StackBlitz templates

We created 3 StackBlitz templates to help you test quickly without worrying about WCS configuration :

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

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 path_to_tests_file
# Example: you must be at the root of the project
npm run test:e2e src/components/tabs/tabs.e2e.ts

License

MIT

wcs's People

Contributors

alexandrelaval avatar alexisponcet avatar drddlab avatar jabby avatar mathisdeloge avatar mathispct avatar monsieurman avatar nexyll avatar payhache avatar peyremorgan avatar pmpe02221 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

schuylinx alexisponcet viico peyremorgan

wcs's Issues

Update angular example

  • Document that each module using web components should add CUSTOM_ELEMENTS_SCHEMA.
  • Change the path to match wcs/dist/... instead wcs/... or change the way we distribute the package.

Create a curated list of design systems

Create a design system list in order not to have to think about which one we could compare to when designing APIs.
It would be even better if the list could have a ranking of some sort !

Merge radial and normal progress

Should we merge radial and progress bar into one and passing a prop for the mode ?

<wcs-progress mode="radial"></wcs-progress>
<wcs-progress mode="bar"></wcs-progress>
<!-- or -->
<wcs-progress-radial></wcs-progress-radial>
<wcs-progress-bar></wcs-progress-bar>

Remove block button

The block button should be removed from this package as user can create it themselves using native utilities.

Make sure form components are useable with [(ngModel)]

According to this article, web components can make use of ngModel without further ado if configured correctly.

We should either make it work by default with ngModel or document and provide a way to do it.

  • Input - Done by using directly native element
  • TextArea - Use the native element as the input
  • Select
  • Checkbox
  • Switch

Select

Remaining :

  • Basic version
  • Multiple values
  • Compare function

Propper font handling

Font handling is quirky for now, we should investigate on these points :

  • CSS variables for font-family and other font related attributes
  • Document and test font integration
  • Document that Avenir font is not free of use and therefore should not be used as is for open source.

Tabs have no animation

Tab headers as well as content have no animation, they should have one so that it's clearer to the user that a change is happening.

Update stencil default github templates

The files :

  • .github/CONTRIBUTING.md
  • .github/ISSUE_TEMPLATE.md

- are still the default one from the stencil templates.

They should be updated for this project.

Divider component

A divider component would be nice as it is used in :

  • Select groups
  • Cards
  • Find others...?

Button enhancement

As of now the button does not have a clear mode. That is a mode where everything's transparent except the text until we hover.

This is really useful for icon only buttons.

Provide box shadow utilities

Box shadows are used in some places, e.g. cards, it would be nice to have box-shadow utilities provided by wcs.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.