Skip to content

Commit

Permalink
chore: add autogenerate cem for components
Browse files Browse the repository at this point in the history
Signed-off-by: Stef3st <[email protected]>
  • Loading branch information
Stef3st committed Nov 8, 2023
1 parent e1fb71f commit 298b29b
Show file tree
Hide file tree
Showing 11 changed files with 338 additions and 68 deletions.
16 changes: 9 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,25 @@ This repository hosts the components and plugins related to the (db-stored) SCL

The following components are featured in this repository:

- `compas-loading` (**TODO**: add README to compas-loading)
- [`compas-loading`](/components/compas-loading/README.md)
- [`compas-open`](/components/compas-open/README.md)
- `compas-scl-list` (**TODO**: add README to compas-scl-list)
- `compas-scl-type-list` (**TODO**: add README to compas-scl-type-list)
- `oscd-filter-button` (**TODO**: move this to [`@openscd/oscd-components`](https://github.com/openscd/oscd-components))
- [`compas-scl-list`](/components/compas-scl-list/README.md)
- [`compas-scl-type-list`](/components/compas-scl-type-list/README.md)
- [`oscd-filter-button`](/components/oscd-filter-button/README.md) | **TODO**: move this to [`@openscd/oscd-components`](https://github.com/openscd/oscd-components)

The following plugins are featured in this repository:
- [`compas-open`](/packages/compas-open-plugin/README.md)

- [`compas-open`](/packages/compas-open-plugin/README.md)

## Usage

This project uses [Nx](https://nx.dev/), a set of extensible dev tools for monorepos. It is used in this repository to manage the development and build process of the various components and plugins. Feel free to use any of the Nx commands in here.

We provide the following scripts for your convenience:

- `npm test` runs the tests in all the components
- `npm run build` builds a deployable version of every component into their /dist directory
- `npm build:all` same as the one before but it tells Nx to skip the cache
- `npm build:all` same as the one before but it tells Nx to skip the cache
- `bundle` generates a javascript bundle for every plugin

© 2023 Alliander N.V.
32 changes: 32 additions & 0 deletions components/compas-loading/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
## `src/compas-loading.ts`:

### class: `CompasLoadingElement`, `compas-loading`

#### Superclass

| Name | Module | Package |
| ------------ | ------ | ----------- |
| `LitElement` | | lit-element |

#### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| --------- | ------- | -------- | ------- | ----------------------- | -------------- |
| `message` | | `string` | | The message to display. | |

<hr/>

### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | ---------------------- | -------------------- | --------------------- | ------- |
| `js` | `CompasLoadingElement` | CompasLoadingElement | src/compas-loading.ts | |

## `src/CompasLoading.ts`:

### Exports

| Kind | Name | Declaration | Module | Package |
| --------------------------- | ---------------------- | -------------------- | ---------------------- | ------- |
| `custom-element-definition` | `compas-loading` | CompasLoadingElement | /src/compas-loading.js | |
| `js` | `CompasLoadingElement` | CompasLoadingElement | src/CompasLoading.ts | |
12 changes: 12 additions & 0 deletions components/compas-loading/custom-elements-manifest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { readmePlugin } from "cem-plugin-readme";

export default {
globs: ["src/*.ts"],
exclude: ["test/*.ts", "stories/*.ts"],
litelement: true,
plugins: [
readmePlugin({
to: "components/compas-loading/README.md",
}),
],
};
104 changes: 49 additions & 55 deletions components/compas-open/README.md
Original file line number Diff line number Diff line change
@@ -1,77 +1,71 @@
# \<compas-open>
## `src/compas-open.ts`:

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
### class: `CompasOpenElement`, `compas-open`

## Installation
#### Superclass

```bash
npm i compas-open
```
| Name | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` | | lit |

## Usage
#### Fields

```html
<script type="module">
import "compas-open";
</script>
| Name | Privacy | Type | Default | Description | Inherited From |
| ---------------- | ------- | --------- | ------- | -------------------------------------------------- | -------------- |
| `allowLocalFile` | | `boolean` | `true` | If true, the user can select a local file to open. | |

<compas-open></compas-open>
```
#### Slots

## Linting and formatting
| Name | Description |
| ---------- | -------------------------- |
| `sclTypes` | The list of SCL types. |
| `sclList` | The list of SCL documents. |
| | The default slot. |

To scan the project for linting and formatting errors, run
<details><summary>Private API</summary>

```bash
npm run lint
```
#### Fields

To automatically fix linting and formatting errors, run
| Name | Privacy | Type | Default | Description | Inherited From |
| ----------- | ------- | ------------------ | ------- | ----------------------- | -------------- |
| `sclFileUI` | private | `HTMLInputElement` | | the file input element. | |

```bash
npm run format
```
#### Methods

## Testing with Web Test Runner
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ------------------ | ------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------------- | -------------- |
| `getSclFile` | private | parses selected SCL document and triggers a "doc-retrieved" event | `fileObj: {
isLocal: boolean;
evt: Event;
docId?: string;
}` | `Promise<void>` | |
| `renderFileSelect` | private | renders the file selector | | `TemplateResult` | |

To execute a single test run:
</details>

```bash
npm run test
```
<hr/>

To run the tests in interactive watch mode run:
### Functions

```bash
npm run test:watch
```
| Name | Description | Parameters | Return |
| ---------------------- | ----------- | ------------------------------------------------------------------- | ------------------- |
| `newDocRetrievedEvent` | | `localFile: boolean, doc: Document, docName: string, docId: string` | `DocRetrievedEvent` |

## Demoing with Storybook
<hr/>

To run a local instance of Storybook for your component, run
### Exports

```bash
npm run storybook
```
| Kind | Name | Declaration | Module | Package |
| ---- | ---------------------- | -------------------- | ------------------ | ------- |
| `js` | `newDocRetrievedEvent` | newDocRetrievedEvent | src/compas-open.ts | |
| `js` | `CompasOpenElement` | CompasOpenElement | src/compas-open.ts | |

To build a production version of Storybook, run
## `src/CompasOpen.ts`:

```bash
npm run storybook:build
```
### Exports

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`

&copy; 2023 Alliander N.V.
| Kind | Name | Declaration | Module | Package |
| --------------------------- | ------------------- | ----------------- | ------------------- | ------- |
| `custom-element-definition` | `compas-open` | CompasOpenElement | /src/compas-open.js | |
| `js` | `CompasOpenElement` | CompasOpenElement | src/CompasOpen.ts | |
| `js` | `DocRetrievedEvent` | DocRetrievedEvent | src/CompasOpen.ts | |
17 changes: 11 additions & 6 deletions components/compas-open/custom-elements-manifest.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { readmePlugin } from "cem-plugin-readme";

export default {
globs: ['src/*.ts'],
exclude: ['test/*.ts'],
litelement: true,
plugins: [],
};

globs: ["src/*.ts"],
exclude: ["test/*.ts", "stories/*.ts"],
litelement: true,
plugins: [
readmePlugin({
to: "components/compas-open/README.md",
}),
],
};
70 changes: 70 additions & 0 deletions components/compas-scl-list/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
## `src/compas-scl-list.ts`:

### class: `CompasSclList`, `compas-scl-list`

#### Superclass

| Name | Module | Package |
| ------------ | ------ | ----------- |
| `LitElement` | | lit-element |

#### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| ----------- | ------- | -------- | ------- | ------------------------------------- | -------------- |
| `type` | | `string` | | The type of SCL to retrieve. | |
| `nameSpace` | | `string` | `""` | The namespace of the SCL to retrieve. | |

#### CSS Properties

| Name | Default | Description |
| ------------------------- | ------- | ------------------------ |
| `--mdc-list-side-padding` | | The padding of the list. |

<details><summary>Private API</summary>

#### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| ---------------- | ------- | ----------- | ------- | ----------------------------------- | -------------- |
| `items` | private | `Element[]` | | The list of SCL documents. | |
| `labels` | private | `string[]` | `[]` | The list of labels. | |
| `selectedLabels` | private | `string[]` | `[]` | The list of selected labels. | |
| `filteredItems` | private | `Element[]` | | The list of filtered SCL documents. | |

#### Methods

| Name | Privacy | Description | Parameters | Return | Inherited From |
| --------------- | ------- | ------------------------------------------------- | ---------- | ---------------- | -------------- |
| `renderLoading` | private | renders a loading message | | `TemplateResult` | |
| `renderNoScls` | private | renders a message when no SCL documents are found | | `TemplateResult` | |
| `renderSclList` | private | renders the list of SCL documents | | `TemplateResult` | |

</details>

<hr/>

### Functions

| Name | Description | Parameters | Return |
| --------------------- | ----------- | --------------- | ------------------ |
| `newSclSelectedEvent` | | `docId: string` | `SclSelectedEvent` |

<hr/>

### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | --------------------- | ------------------- | ---------------------- | ------- |
| `js` | `newSclSelectedEvent` | newSclSelectedEvent | src/compas-scl-list.ts | |
| `js` | `CompasSclList` | CompasSclList | src/compas-scl-list.ts | |

## `src/CompasSclList.ts`:

### Exports

| Kind | Name | Declaration | Module | Package |
| --------------------------- | ------------------ | ---------------- | ----------------------- | ------- |
| `custom-element-definition` | `compas-scl-list` | CompasSclList | /src/compas-scl-list.js | |
| `js` | `CompasSclList` | CompasSclList | src/CompasSclList.ts | |
| `js` | `SclSelectedEvent` | SclSelectedEvent | src/CompasSclList.ts | |
12 changes: 12 additions & 0 deletions components/compas-scl-list/custom-elements-manifest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { readmePlugin } from "cem-plugin-readme";

export default {
globs: ["src/*.ts"],
exclude: ["test/*.ts", "stories/*.ts"],
litelement: true,
plugins: [
readmePlugin({
to: "components/compas-scl-list/README.md",
}),
],
};
55 changes: 55 additions & 0 deletions components/compas-scl-type-list/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
## `src/compas-scl-type-list.ts`:

### class: `CompasSclTypeList`, `compas-scl-type-list`

#### Superclass

| Name | Module | Package |
| ------------ | ------ | ----------- |
| `LitElement` | | lit-element |

#### Fields

| Name | Privacy | Type | Default | Description | Inherited From |
| ----------- | ------- | ----------- | ------- | ------------------------------- | -------------- |
| `sclTypes` | | `Element[]` | | The list of SCL types. | |
| `nameSpace` | | `string` | `""` | The namespace of the SCL types. | |

<details><summary>Private API</summary>

#### Methods

| Name | Privacy | Description | Parameters | Return | Inherited From |
| --------------- | ------- | ----------------------------------------- | ---------- | ---------------- | -------------- |
| `renderLoading` | private | renders a loading message | | `TemplateResult` | |
| `renderNoTypes` | private | renders a message when no types are found | | `TemplateResult` | |
| `renderTypes` | private | renders the list of types | | `TemplateResult` | |

</details>

<hr/>

### Functions

| Name | Description | Parameters | Return |
| ---------------------- | ----------- | -------------- | ------------------- |
| `newTypeSelectedEvent` | | `type: string` | `TypeSelectedEvent` |

<hr/>

### Exports

| Kind | Name | Declaration | Module | Package |
| ---- | ---------------------- | -------------------- | --------------------------- | ------- |
| `js` | `newTypeSelectedEvent` | newTypeSelectedEvent | src/compas-scl-type-list.ts | |
| `js` | `CompasSclTypeList` | CompasSclTypeList | src/compas-scl-type-list.ts | |

## `src/CompasSclTypeList.ts`:

### Exports

| Kind | Name | Declaration | Module | Package |
| --------------------------- | --------------------- | ----------------- | ---------------------------- | ------- |
| `custom-element-definition` | `compas-scltype-list` | CompasSclTypeList | /src/compas-scl-type-list.js | |
| `js` | `CompasSclTypeList` | CompasSclTypeList | src/CompasSclTypeList.ts | |
| `js` | `TypeSelectedEvent` | TypeSelectedEvent | src/CompasSclTypeList.ts | |
12 changes: 12 additions & 0 deletions components/compas-scl-type-list/custom-elements-manifest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { readmePlugin } from "cem-plugin-readme";

export default {
globs: ["src/*.ts"],
exclude: ["test/*.ts", "stories/*.ts"],
litelement: true,
plugins: [
readmePlugin({
to: "components/compas-scl-type-list/README.md",
}),
],
};
Loading

0 comments on commit 298b29b

Please sign in to comment.