The Data Place: CKAN Web Components

Hello

This is a set of curated custom web components designed to work against a CKAN instance.

These components are backed by an internal service layer

Design Goals

To create a portable, framework-independent, set of curated components that ease the process of consuming a CKAN instance via its API.
To be flexible enough that a downstream development team can style the components according to their base brand guidelines.
To prove that consuming and presenting CKAN data outside of the default platform front-end can be easy.

Using TDP CKAN Components

Framework integrations follow StencilJS's documentation for the most part.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone git@github.com:thedataplace/tdp-ckan-web-components.git
cd tdp-ckan-web-components
npm i
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

To view the Storybook for the components, run:

npm run storybook

Need help? Check out our docs here.

Naming Components

All components should be prefixed with the tdp-ckan-*.

Publishing updates to npm

Publish to NPM

Using these components

Using a CDN

In your document's header, add the following:

<script type="module" src="https://unpkg.com/@thedataplace/ckan-web-components@latest/dist/tdp-ckan-web-components/tdp-ckan-web-components.esm.js" crossorigin></script>
<script nomodule src="https://unpkg.com/@thedataplace/ckan-web-components@latest/dist/tdp-ckan-web-components/tdp-ckan-web-components.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@thedataplace/ckan-web-components@latest/dist/tdp-ckan-web-components/tdp-ckan-web-components.css" />

Replacing the version number (in the example, 1.0.0) with the desired version.

In a stencil/angular/ionic app

Run npm install @tdp/ckan-web-components --save
Add an import to the npm packages import @tdp/ckan-web-components;
Then you can use the element anywhere in your template, JSX, html etc