Skip to content

Commit 361835b

Browse files
gqiogqio
committed
First commit
1 parent 86e3742 commit 361835b

File tree

4 files changed

+226
-2
lines changed

4 files changed

+226
-2
lines changed

‎README.md‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,47 @@
1-
# custom-elements-json-to-markdown
2-
Transform custom-elements.json to markdown
1+
[![edit-in-webcomponents.dev](https://webcomponents.dev/assets/ext/edit_in_wcd.svg)](https://webcomponents.dev/edit/XPmoswtdx4DjIFzaPMBB)
2+
# text-field
3+
4+
A text field web component
5+
6+
## Attributes
7+
8+
| Attribute | Type | Description |
9+
| ------------- | --------- | ---------------------- |
10+
| `disabled` | `boolean` | Disables this element |
11+
| `size` | `string` | Size of the text field |
12+
| `placeholder` | `any` | undefined |
13+
14+
## Properties
15+
16+
| Property | Attribute | Type | Default | Description |
17+
| -------- | --------- | -------- | --------- | ---------------------- |
18+
| `size` | | `string` | undefined | Size of the text field |
19+
| `value` | | `string` | undefined | undefined |
20+
21+
## Events
22+
23+
| Event | Description |
24+
| -------- | ---------------------------------------------------- |
25+
| `enter` | `Dispatched when the enter key is pressed` |
26+
| `change` | `Dispatched when the text of the text field changes` |
27+
28+
## Slots
29+
30+
| Name | Description |
31+
| -------- | ----------------------------------------------- |
32+
| `header` | Content placed in the header of the text field |
33+
| | Default content placed inside of the text field |
34+
35+
## CSS Shadow Parts
36+
37+
| Part | Description |
38+
| ------------- | --------------------------- |
39+
| `placeholder` | Placeholder css shadow part |
40+
41+
## CSS Custom Properties
42+
43+
| Property | Description |
44+
| --------------------- | ------------------------------------- |
45+
| `--placeholder-color` | Controls the color of the placeholder |
46+
47+
> Created with [webcomponents.dev](https://webcomponents.dev)

‎src/index.spec.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// BDD-Style Testing (powered by https://mochajs.org/)
2+
//
3+
// Import your stories
4+
// import * as stories from "./index.stories.js";
5+
//
6+
// Use any renderer for you stories
7+
// import { fixture } from "@open-wc/testing-helpers";
8+
//
9+
// Use any assert library
10+
import chai from "chai/chai.js";
11+
const expect = chai.expect;
12+
13+
describe("Dummy test", function() {
14+
it("should be always true", function() {
15+
expect(true).to.be.true;
16+
});
17+
});

‎src/index.stories.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import transform from "./index";
2+
const customElements = {
3+
version: 2,
4+
tags: [
5+
{
6+
name: "text-field",
7+
description: "A text field web component",
8+
jsDoc:
9+
"/**\n * A text field web component\n * @attr {Boolean} disabled - Disables this element\n * @fires change - Dispatched when the text of the text field changes\n * @slot - Default content placed inside of the text field\n * @slot header - Content placed in the header of the text field\n * @cssprop --placeholder-color - Controls the color of the placeholder\n * @csspart placeholder - Placeholder css shadow part\n */",
10+
attributes: [
11+
{
12+
name: "disabled",
13+
description: "Disables this element",
14+
type: "boolean"
15+
},
16+
{
17+
name: "size",
18+
description: "Size of the text field",
19+
jsDoc:
20+
'/**\n * Size of the text field\n * @attr\n * @type {"small"|"large"}\n */',
21+
type: "string"
22+
},
23+
{
24+
name: "placeholder",
25+
type: "any"
26+
}
27+
],
28+
properties: [
29+
{
30+
name: "size",
31+
description: "Size of the text field",
32+
jsDoc:
33+
'/**\n * Size of the text field\n * @attr\n * @type {"small"|"large"}\n */',
34+
type: "string"
35+
},
36+
{
37+
name: "value",
38+
type: "string"
39+
}
40+
],
41+
events: [
42+
{
43+
name: "enter",
44+
description: "Dispatched when the enter key is pressed",
45+
jsDoc: "/**\n * Dispatched when the enter key is pressed\n */"
46+
},
47+
{
48+
name: "change",
49+
description: "Dispatched when the text of the text field changes"
50+
}
51+
],
52+
slots: [
53+
{
54+
name: "header",
55+
description: "Content placed in the header of the text field"
56+
},
57+
{
58+
name: "",
59+
description: "Default content placed inside of the text field"
60+
}
61+
],
62+
cssProperties: [
63+
{
64+
name: "--placeholder-color",
65+
description: "Controls the color of the placeholder"
66+
}
67+
],
68+
cssParts: [
69+
{
70+
name: "placeholder",
71+
description: "Placeholder css shadow part"
72+
}
73+
]
74+
}
75+
]
76+
};
77+
78+
export const story1 = () => transform(customElements);

‎src/index.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const code = (s: string) => (s ? `\`${s}\`` : "");
2+
const transformAttributes = (attributes: any[]) => `
3+
## Attributes
4+
5+
| Attribute | Type | Description |
6+
| --------- | ---- | ----------- |
7+
${attributes
8+
.map(
9+
attr => `| ${code(attr.name)} | ${code(attr.type)} | ${attr.description} |`
10+
)
11+
.join("\n")}
12+
`;
13+
14+
const transformProperties = (properties: any[]) => `
15+
## Properties
16+
17+
| Property | Attribute | Type | Default | Description |
18+
| -------- | --------- | ---- | ------- | ----------- |
19+
${properties
20+
.map(
21+
prop =>
22+
`| ${code(prop.name)} | ${code(prop.attribute)} | ${code(prop.type)} | ${
23+
prop.default
24+
} | ${prop.description} |`
25+
)
26+
.join("\n")}
27+
`;
28+
29+
const transformEvents = (events: any[]) => `
30+
## Events
31+
32+
| Event | Description |
33+
| ----- | ----------- |
34+
${events
35+
.map(event => `| ${code(event.name)} | ${code(event.description)} |`)
36+
.join("\n")}
37+
`;
38+
39+
const transformSlots = (slots: any[]) => `
40+
## Slots
41+
42+
| Name | Description |
43+
| ---- | ----------- |
44+
${slots.map(slot => `| ${code(slot.name)} | ${slot.description} |`).join("\n")}
45+
`;
46+
47+
const transformCSSParts = (shadowParts: any[]) => `
48+
## CSS Shadow Parts
49+
50+
| Part | Description |
51+
| ---- | ----------- |
52+
${shadowParts
53+
.map(part => `| ${code(part.name)} | ${part.description} |`)
54+
.join("\n")}
55+
`;
56+
57+
const transformCSSProperties = (cssProperties: any[]) => `
58+
## CSS Custom Properties
59+
60+
| Property | Description |
61+
| -------- | ----------- |
62+
${cssProperties
63+
.map(cssProp => `| ${code(cssProp.name)} | ${cssProp.description} |`)
64+
.join("\n")}
65+
`;
66+
67+
export default customElements => {
68+
const customElement = customElements.tags[0];
69+
let markdownParts = [`# ${customElement.name}`];
70+
markdownParts.push(customElement.description);
71+
customElement.attributes &&
72+
markdownParts.push(transformAttributes(customElement.attributes));
73+
customElement.properties &&
74+
markdownParts.push(transformProperties(customElement.properties));
75+
customElement.events &&
76+
markdownParts.push(transformEvents(customElement.events));
77+
customElement.slots &&
78+
markdownParts.push(transformSlots(customElement.slots));
79+
customElement.cssParts &&
80+
markdownParts.push(transformCSSParts(customElement.cssParts));
81+
customElement.cssProperties &&
82+
markdownParts.push(transformCSSProperties(customElement.cssProperties));
83+
return markdownParts.join("\n");
84+
};

0 commit comments

Comments
 (0)