In this repository we're developing the next generation components for Corporate UI. We're improving a lot of our findings that we've done implementing the current production version of the library: https://github.com/scania/corporate-ui
Currently Corporate UI are in pre-alpha, and we're just preparing to move to alpha. We'll start of the tests with a group of 20 developers and expanding it shortly thereafter.
Focus is right now set on getting a solid architecture in place. Any of the basic components that you'll be able to view in this repository is not finalized when it comes to design and CSS values.
Corporate UI is a library for using and building web components as custom elements. Custom elements enables developers to in a really easy way apply branding guidelines and apply interaction patterns without having to build them all from scratch.
The main change in the technology stack is that we've changing from Google Polymer to Stencil JS for creating Custom Elements.
Stencil is a compiler for building fast web apps using Custom Elements (aka Web Components).
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components work in any major framework or with no framework at all.
We're contributing, and are following, the coding standards available at https://github.com/scania/coding-conventions.
- Clone the Corporate UI Dev repo
- Download and install node.js: https://nodejs.org/en/
- If you're behind a firewall, CONFIGURE THE PROXY
- INSTALLING DEPENDENCIES (from command line): npm i from the corporate-ui-dev folder.
- Start the local setup by running npm start
- Open your browser and go to http://localhost:1337
Testing the components is done using the Stencil testing setup that includes unit test and End-to-End test. Both tests use Jest as the JavaScript testing solution. The browser environment for end-to-end testing is done using Puppeteer.
To test locally:
npm test
Use 8.15 or newer stable version of node.
Corporate UI outputs browser native code such as JavaScript, CSS and HTML. Although, behind the scenes a variety of tools are used. The technical infrastructure currently includes; Bootstrap, Sass, StencilJS, Redux, TSX, Travis, NPM, Gulp, esLint, Prettier, Jest, Puppeteer, Webpack and Storybook.
All CSS, HTML and JS code are available under the MIT license. The Scania brand identity, logos and photographs found in this repository are copyrighted Scania CV AB and are not available on an open source basis or to be used as examples or in any other way, if not specifically ordered by Scania CV AB.