Some of those components are low-level like <cc-button>, <cc-input-text> or <cc-loader>, the other components are more high-level and specific to Clever Cloud's domain model.

We use them on different Web UIs we have (public and internal).

Why is it public?

We want to share our knowledge and experience with Web Components along with the tooling we used to build them. We hope it will help others for their own components.
We use those components ourselves but we also want our clients and partners to use them in their own custom Web UIs based on our products.
We think it's a great way for our clients to give feedbacks (and even contributions) on small parts of our Web UIs.

Can I see those components?

All our components are showcased with "stories" using Storybook. You can see all our components (and their stories) on this preview.

Storybook is a great tool to present your components in many different situations. This way, you can check how they behave with different inputs (properties, attributes...) and make sure they produce the right outputs (emit events...).

We also use web-component-analyzer to generate a documentation spec sheet for each component. You can find it in the Notes tab of a component's story (example).

Can I use them in my project?

Sure, they're available on npm. Contact us if you want more details.

License

This project is licensed under the Apache-2.0.

We're using modified versions of two projects related to Leaflet:

Both projects are licensed with BSD-2-Clause. They aren't updated anymore, and we wanted them to be exposed as modern ES modules. This is the main reason we decided to copy them in our own repo. The respective copyrights are at the top of each file:

src/lib/leaflet-heat.js
src/lib/simpleheat.js

Icons are powered by Remix Icon.

13.0.0 (2024-03-07)

⚠ BREAKING CHANGES

cc-popover: remove the accessibleName prop & associated attribute
cc-icon: remove the accessibleName prop & associated attribute
cc-button: remove the accessibleName prop & associated attribute
cc-badge: remove the iconAccessibleName prop & associated attribute
cc-img: remove the accessibleName prop & associated attribute
cc-env-var-linked-services: the properties have changed
- state: new property containing the whole state
- services: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
cc-env-var-form: the properties have changed
- state: new property containing the whole state
- variables: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
- parserOptions: property has been deleted as it is now part of the state
- saving: property has been deleted as it is now part of the state
cc-env-var-editor-json: the properties have changed
- state: new property containing the whole state
- variables: property has been deleted as it is now part of the state
- parserOptions: property has been deleted as it is now part of the state
cc-env-var-editor-expert: the properties have changed
- state: new property containing the whole state
- variables: property has been deleted as it is now part of the state
- parserOptions: property has been deleted as it is now part of the state
cc-env-var-editor-simple: the properties have changed
- state: new property containing the whole state
- variables: property has been deleted as it is now part of the state
- mode: property has been deleted as it is now part of the state
cc-env-var-create: change property mode to validationMode
cc-article-list: the properties have changed
- state: new property containing the whole state
- articles: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
cc-invoice-list: the properties have changed
- state: new property containing the whole state
- invoices: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
cc-tile-instances: the properties have changed
- state: new property containing the whole state
- instances: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
cc-invoice: the properties have changed
- state: new property containing the whole state
- invoice: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
- number: property has been deleted as it is now part of the state
cc-addon-linked-apps: the properties have changed
- state: new property containing the whole state
- applications: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
cc-tile-deployments: the properties have changed
- state: new property containing the whole state
- deployments: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state
cc-grafana-info: all properties have been merged into a new state property.
cc-jenkins-info: all properties have been merged into a new state property.
cc-tile-status-codes: the properties have changed
- state: new property containing the whole state
- statusCodes: property has been deleted as it is now part of the state
- error: property has been deleted as it is now part of the state

🚀 Features

add error event from sendToApi calls (4ac5415), closes #956
cc-badge: remove the iconAccessibleName prop & associated attribute (6c322c3)
cc-button: remove the accessibleName prop & associated attribute (8a7a0f0)
cc-icon: remove the accessibleName prop & associated attribute (5e311d0)
cc-img: remove the accessibleName prop & associated attribute (9019da7)
cc-input-date: adds label style customization (f6433c3), closes #888
cc-input-number: adds label style customization (e0702d8), closes #888
cc-input-text: adds label style customization (51fa2f4), closes #888
cc-loader: add accessibleName property (d69a36a), closes #870
cc-logs-control: init component (24e6768), closes #908
cc-logs-instance: init component (d87e87a), closes #877
cc-popover: remove the accessibleName prop & associated attribute (4b47ebb)
cc-product-card: init component (9b63536), closes #891
cc-select: adds label style customization (e0edcc0), closes #888
cc-toggle: adds label style customization (1556ecc), closes #888

🐛 Bug Fixes

cc-badge: use iconA11yName in iconAccessibleName getter/setter (92af579), closes #934
smart-component: protect from abortController nullity when smart component is disconnected (c714dcd), closes #968

🛠 Code Refactoring

cc-addon-linked-apps: migrate to the new smart component design (69a999b)
cc-article-list: migrate to the new smart component design (4711406), closes #921
cc-env-var-create: change property mode to validationMode (264208b)
cc-env-var-editor-expert: rework properties to make impossible state impossible (b3c26de), closes #926
cc-env-var-editor-json: rework properties to make impossible state impossible (901cfac), closes #926
cc-env-var-editor-simple: rework properties to make impossible state impossible (201b8af), closes #926
cc-env-var-form: migrate to the new smart component design (0425b6c), closes #926
cc-env-var-linked-services: rework properties to make impossible state impossible (069f8cd), closes #926
cc-grafana-info: migrate to the new smart component design (9e404f6), closes #923
cc-invoice-list: migrate to the new smart component design (488d928), closes #922
cc-invoice: migrate to the new smart component design (2e9764e), closes #920
cc-jenkins-info: migrate to the new smart component design (6228419), closes #925
cc-tile-deployments: rework properties to make impossible state impossible (45e9a96), closes #942
cc-tile-instances: rework properties to make impossible state impossible (e469f81)
cc-tile-status-codes: migrate to the new smart component design (fc5dc71), closes #924

Keywords

FAQs

What is @clevercloud/components?

Is @clevercloud/components popular?

Is @clevercloud/components well maintained?

Package last updated on 07 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install