ds-citeo v1.3.0

Stencil Component Starter

This is a starter project for building a standalone Web Component using Stencil.

Stencil

Stencil is a compiler for building fast web apps using 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 are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To start building a new web component using Stencil, in this directory, run :

npm install
npm run start

You'll reach the main page of our Stencil application (on localhost:3333 by default) and see all the components developed 🙂 !

To generate a new component, run :

npm run generate

A wizard will lead you while creating your new component allowing you to choose if you want to create style, spec and/or test files.

You can find your new component in /src/components.

To build the component for production, stop the server if it's running, remove dist, loader and www directories and run:

npm run build

To run the unit tests for the components, run:

npm test

Note: for re-use, we will use Using this component's second method (via Node modules)

To publish your components, update the version in the package.json and log you in to npm :

npm login

and run :

npm publish

Need help? Check out our docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script src='node_modules/my-component/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install my-component --save
• Add an import to the npm packages import my-component;
• Then you can use the element anywhere in your template, JSX, html etc

Changelog

v.1.3.0 10 March 2023

• Updating Button with Tokens/CSS Custom Properties combo

v.1.2.31 24 February 2023

• Fixing and Harmonizing icons svg content

v.1.2.30 23 February 2023

• Re-implementing Icon position Fix

v.1.2.29 22 February 2023

• Adding some icons on Icon Component (Pack #6)

v.1.2.28 16 February 2023

• Adding some icons on Icon Component (Pack #4)

v.1.2.27 16 February 2023

• Adding some icons on Icon Component (Pack #3)

v.1.2.26 15 February 2023

• Some Sidebar Fix
• Rolling-back Icon position Fix

v.1.2.25 24 January 2023

• Fix icon display

v.1.2.24 10 January 2023

• Fix info notification icon

v.1.2.22 26 October 2022

• Adding eco-conception icon on Icon Component

v.1.2.21 04 October 2022

• Adding key icon on Icon Component

v.1.2.20 22 September 2022

• Adding save icon on Icon Component

v.1.2.19 21 September 2022

• Adding Notification component and mark the Toast one as deprecated

v.1.2.18 14 September 2022

• Adding unlock icon on Icon Component

v.1.2.17 12 September 2022

• Adding the size (small | medium) attribute for the checkbox

v.1.2.16 08 September 2022

• Adding some icons on Icon Component

v.1.2.15 01 August 2022

• Adding some icons on Icon Component

v.1.2.14 27 July 2022

• Sidebar Optimization

v.1.2.13 25 July 2022

• Adding some icons on Icon Component

v.1.2.12 25 July 2022

• O Success Sidebar Optimization (Build success)

v.1.2.11 25 July 2022

• X Failed Sidebar Optimization (Build failed)

v.1.2.10 22 July 2022

• Sidebar Optimization

v.1.2.9 21 July 2022

• Sidebar Optimization

v.1.2.8 20 July 2022

• Sidebar Optimization + Icon Optimization + Badge Optimization

v.1.2.7 7 July 2022

• Sidebar Implementation (Logo + Separator)

v.1.2.6 15 June 2022

• Icon inside Button Optimization

v.1.2.5 9 June 2022

• Icon inside Button Implementation + Optimization

v.1.2.4 12 May 2022

• Fix Build + Storybook project migration to Stencil

v.1.2.3 6 May 2022

• Fix Build

v.1.2.2 6 May 2022

• Fix Build

v.1.2.1 6 May 2022

• Fix Build

v.1.2.0 6 May 2022

• First 66 Icons pack implemented

v.1.1.3 9 March 2022

• Button Component Optimization

v.1.1.2 8 March 2022

• Adding some icons on Icon Component

v.1.1.1 23 Febuary 2022

• Adding some icons on Icon Component

v.1.1.0 22 Febuary 2022

• New Build / Angular component lib creation

v.1.0.23 22 Febuary 2022

• Placeholder Component Optimization
• Toast Component implemented
• Icon Component implemented

v.1.0.22 22 Febuary 2022

• O Success Build fix

v.1.0.21 22 Febuary 2022

• X Failed Build fix attempt

v.1.0.20 22 Febuary 2022

• Placeholder Component Citeo / Adelphe fixes
• X Failed Build fix attempt

v.1.0.19 21 Febuary 2022

• Placeholder Component Citeo / Adelphe implemented

v.1.0.18 11 Febuary 2022

• Button Component Adelphe Style Tertiary implemented

v.1.0.17 7 January 2022

• Badge Component Optimization

v.1.0.16 7 January 2022

• Badge Component Optimization and Fixes
• Animation implementation

v.1.0.15 6 January 2022

• Badge Component OK

v.1.0.14 December 2021

• Button Component OK and implemented
• Radiobox/Checkbox/Groupbox Component OK