Skip to content

Commit 4c969b5

Browse files
daniellerouxmatthiashaderjul-lam
authored
Introduce storybook into development process (#1564)
Co-authored-by: matthiashader <[email protected]> Co-authored-by: Julian Lamplmair <[email protected]>
1 parent f5af78e commit 4c969b5

40 files changed

+3965
-790
lines changed

‎ix.code-workspace

+4
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@
5656
"name": "figma-plugin",
5757
"path": "./packages/figma-plugin"
5858
},
59+
{
60+
"name": "storybook",
61+
"path": "./packages/storybook-docs"
62+
},
5963
{
6064
"name": "root",
6165
"path": "."

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"scripts": {
2222
"docs": "dotenv -- turbo run start --filter=documentation",
2323
"build": "dotenv -- turbo run build",
24-
"pkg": "dotenv -- turbo run pkg",
24+
"storybook": "dotenv -- turbo run storybook",
2525
"start": "dotenv -- turbo run start",
2626
"turbo": "dotenv -- turbo",
2727
"lint": "dotenv -- turbo run lint",

‎packages/angular/src/components.ts

-21
Original file line numberDiff line numberDiff line change
@@ -1867,27 +1867,6 @@ export class IxModalContent {
18671867
export declare interface IxModalContent extends Components.IxModalContent {}
18681868

18691869

1870-
@ProxyCmp({
1871-
})
1872-
@Component({
1873-
selector: 'ix-modal-example',
1874-
changeDetection: ChangeDetectionStrategy.OnPush,
1875-
template: '<ng-content></ng-content>',
1876-
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1877-
inputs: [],
1878-
})
1879-
export class IxModalExample {
1880-
protected el: HTMLElement;
1881-
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
1882-
c.detach();
1883-
this.el = r.nativeElement;
1884-
}
1885-
}
1886-
1887-
1888-
export declare interface IxModalExample extends Components.IxModalExample {}
1889-
1890-
18911870
@ProxyCmp({
18921871
})
18931872
@Component({

‎packages/angular/src/declare-components.ts

-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ export const DIRECTIVES = [
7272
d.IxMessageBar,
7373
d.IxModal,
7474
d.IxModalContent,
75-
d.IxModalExample,
7675
d.IxModalFooter,
7776
d.IxModalHeader,
7877
d.IxNumberInput,

‎packages/core/component-doc.json

-45
Original file line numberDiff line numberDiff line change
@@ -1297,7 +1297,6 @@
12971297
"ix-dropdown-button",
12981298
"ix-empty-state",
12991299
"ix-menu-about-news",
1300-
"ix-modal-example",
13011300
"ix-split-button",
13021301
"ix-time-picker",
13031302
"ix-upload"
@@ -1330,9 +1329,6 @@
13301329
"ix-menu-about-news": [
13311330
"ix-button"
13321331
],
1333-
"ix-modal-example": [
1334-
"ix-button"
1335-
],
13361332
"ix-split-button": [
13371333
"ix-button"
13381334
],
@@ -8923,7 +8919,6 @@
89238919
"ix-menu-expand-icon",
89248920
"ix-menu-settings",
89258921
"ix-message-bar",
8926-
"ix-modal-example",
89278922
"ix-modal-header",
89288923
"ix-number-input",
89298924
"ix-pagination",
@@ -9006,9 +9001,6 @@
90069001
"ix-message-bar": [
90079002
"ix-icon-button"
90089003
],
9009-
"ix-modal-example": [
9010-
"ix-icon-button"
9011-
],
90129004
"ix-modal-header": [
90139005
"ix-icon-button"
90149006
],
@@ -13633,43 +13625,6 @@
1363313625
"parts": [],
1363413626
"listeners": []
1363513627
},
13636-
{
13637-
"dirPath": "src/components/playground",
13638-
"filePath": "src/components/playground/example-modal.tsx",
13639-
"fileName": "example-modal.tsx",
13640-
"readmePath": "src/components/playground/readme.md",
13641-
"usagesDir": "src/components/playground/usage",
13642-
"tag": "ix-modal-example",
13643-
"overview": "",
13644-
"usage": {},
13645-
"docs": "",
13646-
"docsTags": [],
13647-
"encapsulation": "none",
13648-
"dependents": [],
13649-
"dependencies": [
13650-
"ix-icon-button",
13651-
"ix-button"
13652-
],
13653-
"dependencyGraph": {
13654-
"ix-modal-example": [
13655-
"ix-icon-button",
13656-
"ix-button"
13657-
],
13658-
"ix-icon-button": [
13659-
"ix-spinner"
13660-
],
13661-
"ix-button": [
13662-
"ix-spinner"
13663-
]
13664-
},
13665-
"props": [],
13666-
"methods": [],
13667-
"events": [],
13668-
"styles": [],
13669-
"slots": [],
13670-
"parts": [],
13671-
"listeners": []
13672-
},
1367313628
{
1367413629
"dirPath": "src/components/modal-footer",
1367513630
"filePath": "src/components/modal-footer/modal-footer.tsx",

‎packages/core/package.json

+6-7
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,14 @@
2929
"hydrate/"
3030
],
3131
"scripts": {
32-
"build": "stencil build --prod && npm run build:scss",
33-
"build:scss": "ts-node -P ./scripts/build/tsconfig.json ./scripts/build/build-css.ts",
34-
"build:dev": "stencil build",
32+
"build": "stencil build --prod && npm run build.scss",
33+
"build.scss": "ts-node -P ./scripts/build/tsconfig.json ./scripts/build/build-css.ts",
34+
"build.watch": "stencil build --watch",
3535
"lint": "eslint src/**/*{.ts,.tsx}",
3636
"start": "stencil build --dev --watch --serve",
37-
"dev": "stencil build --watch",
38-
"test": "npm run test:spec && npm run test:ct",
39-
"test:spec": "stencil test --spec",
40-
"test:ct": "playwright test --config playwright-ct.config.ts --reporter list",
37+
"test": "npm run test.spec && npm run test.ct",
38+
"test.spec": "stencil test --spec",
39+
"test.ct": "playwright test --config playwright-ct.config.ts --reporter list",
4140
"visual-regression": "playwright test",
4241
"host-root": "http-server ./ -a 127.0.0.1 -p 8080 -c-1",
4342
"generate": "stencil generate",

‎packages/core/scripts/build/storybook.ts

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2024 Siemens AG
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This source code is licensed under the MIT license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
10+
import type {
11+
Config,
12+
JsonDocs,
13+
OutputTargetCustom,
14+
} from '@stencil/core/internal';
15+
import fs from 'fs/promises';
16+
import path from 'path';
17+
18+
function kebabToCamelCase(str: string): string {
19+
return str
20+
.split('-')
21+
.map((word, index) => {
22+
if (index === 0) {
23+
return word.toLowerCase();
24+
}
25+
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
26+
})
27+
.join('');
28+
}
29+
30+
export function storybookOutputTarget(config: {
31+
dist: string;
32+
}): OutputTargetCustom {
33+
const outputTarget: OutputTargetCustom = {
34+
type: 'custom',
35+
name: 'storybook',
36+
generator: async (
37+
{ rootDir }: Config,
38+
compilerCtx: any,
39+
buildCtx: any,
40+
docs: JsonDocs
41+
) => {
42+
const storyBookDefine = docs.components
43+
.map((component) => {
44+
return `import { defineCustomElement as ${kebabToCamelCase(
45+
component.tag
46+
)} } from '@siemens/ix/components/${component.tag}.js';`;
47+
})
48+
.join('\n');
49+
50+
const callDefine = docs.components
51+
.map((component) => {
52+
return `${kebabToCamelCase(component.tag)}();`;
53+
})
54+
.join('\n');
55+
56+
const storyBookDefineFile = [
57+
`// This file is automatically generated by the Stencil output.`,
58+
`// Do not modify this file!`,
59+
storyBookDefine,
60+
callDefine,
61+
].join('\n');
62+
63+
fs.writeFile(path.join(config.dist), storyBookDefineFile);
64+
},
65+
};
66+
return outputTarget;
67+
}

‎packages/core/src/components.d.ts

-26
Original file line numberDiff line numberDiff line change
@@ -2062,8 +2062,6 @@ export namespace Components {
20622062
*/
20632063
interface IxModalContent {
20642064
}
2065-
interface IxModalExample {
2066-
}
20672065
/**
20682066
* @since 2.0.0
20692067
*/
@@ -2313,8 +2311,6 @@ export namespace Components {
23132311
| 'success'
23142312
| 'custom';
23152313
}
2316-
interface IxPlaygroundInternal {
2317-
}
23182314
/**
23192315
* @since 1.6.0
23202316
*/
@@ -4436,12 +4432,6 @@ declare global {
44364432
prototype: HTMLIxModalContentElement;
44374433
new (): HTMLIxModalContentElement;
44384434
};
4439-
interface HTMLIxModalExampleElement extends Components.IxModalExample, HTMLStencilElement {
4440-
}
4441-
var HTMLIxModalExampleElement: {
4442-
prototype: HTMLIxModalExampleElement;
4443-
new (): HTMLIxModalExampleElement;
4444-
};
44454435
/**
44464436
* @since 2.0.0
44474437
*/
@@ -4560,12 +4550,6 @@ declare global {
45604550
prototype: HTMLIxPillElement;
45614551
new (): HTMLIxPillElement;
45624552
};
4563-
interface HTMLIxPlaygroundInternalElement extends Components.IxPlaygroundInternal, HTMLStencilElement {
4564-
}
4565-
var HTMLIxPlaygroundInternalElement: {
4566-
prototype: HTMLIxPlaygroundInternalElement;
4567-
new (): HTMLIxPlaygroundInternalElement;
4568-
};
45694553
/**
45704554
* @since 1.6.0
45714555
*/
@@ -5068,7 +5052,6 @@ declare global {
50685052
"ix-message-bar": HTMLIxMessageBarElement;
50695053
"ix-modal": HTMLIxModalElement;
50705054
"ix-modal-content": HTMLIxModalContentElement;
5071-
"ix-modal-example": HTMLIxModalExampleElement;
50725055
"ix-modal-footer": HTMLIxModalFooterElement;
50735056
"ix-modal-header": HTMLIxModalHeaderElement;
50745057
"ix-modal-loading": HTMLIxModalLoadingElement;
@@ -5077,7 +5060,6 @@ declare global {
50775060
"ix-pane": HTMLIxPaneElement;
50785061
"ix-pane-layout": HTMLIxPaneLayoutElement;
50795062
"ix-pill": HTMLIxPillElement;
5080-
"ix-playground-internal": HTMLIxPlaygroundInternalElement;
50815063
"ix-push-card": HTMLIxPushCardElement;
50825064
"ix-radio": HTMLIxRadioElement;
50835065
"ix-radio-group": HTMLIxRadioGroupElement;
@@ -7217,8 +7199,6 @@ declare namespace LocalJSX {
72177199
*/
72187200
interface IxModalContent {
72197201
}
7220-
interface IxModalExample {
7221-
}
72227202
/**
72237203
* @since 2.0.0
72247204
*/
@@ -7496,8 +7476,6 @@ declare namespace LocalJSX {
74967476
| 'success'
74977477
| 'custom';
74987478
}
7499-
interface IxPlaygroundInternal {
7500-
}
75017479
/**
75027480
* @since 1.6.0
75037481
*/
@@ -8537,7 +8515,6 @@ declare namespace LocalJSX {
85378515
"ix-message-bar": IxMessageBar;
85388516
"ix-modal": IxModal;
85398517
"ix-modal-content": IxModalContent;
8540-
"ix-modal-example": IxModalExample;
85418518
"ix-modal-footer": IxModalFooter;
85428519
"ix-modal-header": IxModalHeader;
85438520
"ix-modal-loading": IxModalLoading;
@@ -8546,7 +8523,6 @@ declare namespace LocalJSX {
85468523
"ix-pane": IxPane;
85478524
"ix-pane-layout": IxPaneLayout;
85488525
"ix-pill": IxPill;
8549-
"ix-playground-internal": IxPlaygroundInternal;
85508526
"ix-push-card": IxPushCard;
85518527
"ix-radio": IxRadio;
85528528
"ix-radio-group": IxRadioGroup;
@@ -8748,7 +8724,6 @@ declare module "@stencil/core" {
87488724
* @since 2.0.0
87498725
*/
87508726
"ix-modal-content": LocalJSX.IxModalContent & JSXBase.HTMLAttributes<HTMLIxModalContentElement>;
8751-
"ix-modal-example": LocalJSX.IxModalExample & JSXBase.HTMLAttributes<HTMLIxModalExampleElement>;
87528727
/**
87538728
* @since 2.0.0
87548729
*/
@@ -8776,7 +8751,6 @@ declare module "@stencil/core" {
87768751
*/
87778752
"ix-pane-layout": LocalJSX.IxPaneLayout & JSXBase.HTMLAttributes<HTMLIxPaneLayoutElement>;
87788753
"ix-pill": LocalJSX.IxPill & JSXBase.HTMLAttributes<HTMLIxPillElement>;
8779-
"ix-playground-internal": LocalJSX.IxPlaygroundInternal & JSXBase.HTMLAttributes<HTMLIxPlaygroundInternalElement>;
87808754
/**
87818755
* @since 1.6.0
87828756
*/

‎packages/core/src/components/playground/example-modal.tsx

-51
This file was deleted.

0 commit comments

Comments
 (0)