Skip to content

Commit

Permalink
Introduce storybook into development process (#1564)
Browse files Browse the repository at this point in the history
Co-authored-by: matthiashader <[email protected]>
Co-authored-by: Julian Lamplmair <[email protected]>
  • Loading branch information
3 people authored Nov 21, 2024
1 parent f5af78e commit 4c969b5
Show file tree
Hide file tree
Showing 40 changed files with 3,965 additions and 790 deletions.
4 changes: 4 additions & 0 deletions ix.code-workspace
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@
"name": "figma-plugin",
"path": "./packages/figma-plugin"
},
{
"name": "storybook",
"path": "./packages/storybook-docs"
},
{
"name": "root",
"path": "."
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"scripts": {
"docs": "dotenv -- turbo run start --filter=documentation",
"build": "dotenv -- turbo run build",
"pkg": "dotenv -- turbo run pkg",
"storybook": "dotenv -- turbo run storybook",
"start": "dotenv -- turbo run start",
"turbo": "dotenv -- turbo",
"lint": "dotenv -- turbo run lint",
Expand Down
21 changes: 0 additions & 21 deletions packages/angular/src/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1867,27 +1867,6 @@ export class IxModalContent {
export declare interface IxModalContent extends Components.IxModalContent {}


@ProxyCmp({
})
@Component({
selector: 'ix-modal-example',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [],
})
export class IxModalExample {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
}
}


export declare interface IxModalExample extends Components.IxModalExample {}


@ProxyCmp({
})
@Component({
Expand Down
1 change: 0 additions & 1 deletion packages/angular/src/declare-components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export const DIRECTIVES = [
d.IxMessageBar,
d.IxModal,
d.IxModalContent,
d.IxModalExample,
d.IxModalFooter,
d.IxModalHeader,
d.IxNumberInput,
Expand Down
45 changes: 0 additions & 45 deletions packages/core/component-doc.json
Original file line number Diff line number Diff line change
Expand Up @@ -1297,7 +1297,6 @@
"ix-dropdown-button",
"ix-empty-state",
"ix-menu-about-news",
"ix-modal-example",
"ix-split-button",
"ix-time-picker",
"ix-upload"
Expand Down Expand Up @@ -1330,9 +1329,6 @@
"ix-menu-about-news": [
"ix-button"
],
"ix-modal-example": [
"ix-button"
],
"ix-split-button": [
"ix-button"
],
Expand Down Expand Up @@ -8923,7 +8919,6 @@
"ix-menu-expand-icon",
"ix-menu-settings",
"ix-message-bar",
"ix-modal-example",
"ix-modal-header",
"ix-number-input",
"ix-pagination",
Expand Down Expand Up @@ -9006,9 +9001,6 @@
"ix-message-bar": [
"ix-icon-button"
],
"ix-modal-example": [
"ix-icon-button"
],
"ix-modal-header": [
"ix-icon-button"
],
Expand Down Expand Up @@ -13633,43 +13625,6 @@
"parts": [],
"listeners": []
},
{
"dirPath": "src/components/playground",
"filePath": "src/components/playground/example-modal.tsx",
"fileName": "example-modal.tsx",
"readmePath": "src/components/playground/readme.md",
"usagesDir": "src/components/playground/usage",
"tag": "ix-modal-example",
"overview": "",
"usage": {},
"docs": "",
"docsTags": [],
"encapsulation": "none",
"dependents": [],
"dependencies": [
"ix-icon-button",
"ix-button"
],
"dependencyGraph": {
"ix-modal-example": [
"ix-icon-button",
"ix-button"
],
"ix-icon-button": [
"ix-spinner"
],
"ix-button": [
"ix-spinner"
]
},
"props": [],
"methods": [],
"events": [],
"styles": [],
"slots": [],
"parts": [],
"listeners": []
},
{
"dirPath": "src/components/modal-footer",
"filePath": "src/components/modal-footer/modal-footer.tsx",
Expand Down
13 changes: 6 additions & 7 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,14 @@
"hydrate/"
],
"scripts": {
"build": "stencil build --prod && npm run build:scss",
"build:scss": "ts-node -P ./scripts/build/tsconfig.json ./scripts/build/build-css.ts",
"build:dev": "stencil build",
"build": "stencil build --prod && npm run build.scss",
"build.scss": "ts-node -P ./scripts/build/tsconfig.json ./scripts/build/build-css.ts",
"build.watch": "stencil build --watch",
"lint": "eslint src/**/*{.ts,.tsx}",
"start": "stencil build --dev --watch --serve",
"dev": "stencil build --watch",
"test": "npm run test:spec && npm run test:ct",
"test:spec": "stencil test --spec",
"test:ct": "playwright test --config playwright-ct.config.ts --reporter list",
"test": "npm run test.spec && npm run test.ct",
"test.spec": "stencil test --spec",
"test.ct": "playwright test --config playwright-ct.config.ts --reporter list",
"visual-regression": "playwright test",
"host-root": "http-server ./ -a 127.0.0.1 -p 8080 -c-1",
"generate": "stencil generate",
Expand Down
67 changes: 67 additions & 0 deletions packages/core/scripts/build/storybook.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import type {
Config,
JsonDocs,
OutputTargetCustom,
} from '@stencil/core/internal';
import fs from 'fs/promises';
import path from 'path';

function kebabToCamelCase(str: string): string {
return str
.split('-')
.map((word, index) => {
if (index === 0) {
return word.toLowerCase();
}
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
})
.join('');
}

export function storybookOutputTarget(config: {
dist: string;
}): OutputTargetCustom {
const outputTarget: OutputTargetCustom = {
type: 'custom',
name: 'storybook',
generator: async (
{ rootDir }: Config,
compilerCtx: any,
buildCtx: any,
docs: JsonDocs
) => {
const storyBookDefine = docs.components
.map((component) => {
return `import { defineCustomElement as ${kebabToCamelCase(
component.tag
)} } from '@siemens/ix/components/${component.tag}.js';`;
})
.join('\n');

const callDefine = docs.components
.map((component) => {
return `${kebabToCamelCase(component.tag)}();`;
})
.join('\n');

const storyBookDefineFile = [
`// This file is automatically generated by the Stencil output.`,
`// Do not modify this file!`,
storyBookDefine,
callDefine,
].join('\n');

fs.writeFile(path.join(config.dist), storyBookDefineFile);
},
};
return outputTarget;
}
26 changes: 0 additions & 26 deletions packages/core/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2062,8 +2062,6 @@ export namespace Components {
*/
interface IxModalContent {
}
interface IxModalExample {
}
/**
* @since 2.0.0
*/
Expand Down Expand Up @@ -2313,8 +2311,6 @@ export namespace Components {
| 'success'
| 'custom';
}
interface IxPlaygroundInternal {
}
/**
* @since 1.6.0
*/
Expand Down Expand Up @@ -4436,12 +4432,6 @@ declare global {
prototype: HTMLIxModalContentElement;
new (): HTMLIxModalContentElement;
};
interface HTMLIxModalExampleElement extends Components.IxModalExample, HTMLStencilElement {
}
var HTMLIxModalExampleElement: {
prototype: HTMLIxModalExampleElement;
new (): HTMLIxModalExampleElement;
};
/**
* @since 2.0.0
*/
Expand Down Expand Up @@ -4560,12 +4550,6 @@ declare global {
prototype: HTMLIxPillElement;
new (): HTMLIxPillElement;
};
interface HTMLIxPlaygroundInternalElement extends Components.IxPlaygroundInternal, HTMLStencilElement {
}
var HTMLIxPlaygroundInternalElement: {
prototype: HTMLIxPlaygroundInternalElement;
new (): HTMLIxPlaygroundInternalElement;
};
/**
* @since 1.6.0
*/
Expand Down Expand Up @@ -5068,7 +5052,6 @@ declare global {
"ix-message-bar": HTMLIxMessageBarElement;
"ix-modal": HTMLIxModalElement;
"ix-modal-content": HTMLIxModalContentElement;
"ix-modal-example": HTMLIxModalExampleElement;
"ix-modal-footer": HTMLIxModalFooterElement;
"ix-modal-header": HTMLIxModalHeaderElement;
"ix-modal-loading": HTMLIxModalLoadingElement;
Expand All @@ -5077,7 +5060,6 @@ declare global {
"ix-pane": HTMLIxPaneElement;
"ix-pane-layout": HTMLIxPaneLayoutElement;
"ix-pill": HTMLIxPillElement;
"ix-playground-internal": HTMLIxPlaygroundInternalElement;
"ix-push-card": HTMLIxPushCardElement;
"ix-radio": HTMLIxRadioElement;
"ix-radio-group": HTMLIxRadioGroupElement;
Expand Down Expand Up @@ -7217,8 +7199,6 @@ declare namespace LocalJSX {
*/
interface IxModalContent {
}
interface IxModalExample {
}
/**
* @since 2.0.0
*/
Expand Down Expand Up @@ -7496,8 +7476,6 @@ declare namespace LocalJSX {
| 'success'
| 'custom';
}
interface IxPlaygroundInternal {
}
/**
* @since 1.6.0
*/
Expand Down Expand Up @@ -8537,7 +8515,6 @@ declare namespace LocalJSX {
"ix-message-bar": IxMessageBar;
"ix-modal": IxModal;
"ix-modal-content": IxModalContent;
"ix-modal-example": IxModalExample;
"ix-modal-footer": IxModalFooter;
"ix-modal-header": IxModalHeader;
"ix-modal-loading": IxModalLoading;
Expand All @@ -8546,7 +8523,6 @@ declare namespace LocalJSX {
"ix-pane": IxPane;
"ix-pane-layout": IxPaneLayout;
"ix-pill": IxPill;
"ix-playground-internal": IxPlaygroundInternal;
"ix-push-card": IxPushCard;
"ix-radio": IxRadio;
"ix-radio-group": IxRadioGroup;
Expand Down Expand Up @@ -8748,7 +8724,6 @@ declare module "@stencil/core" {
* @since 2.0.0
*/
"ix-modal-content": LocalJSX.IxModalContent & JSXBase.HTMLAttributes<HTMLIxModalContentElement>;
"ix-modal-example": LocalJSX.IxModalExample & JSXBase.HTMLAttributes<HTMLIxModalExampleElement>;
/**
* @since 2.0.0
*/
Expand Down Expand Up @@ -8776,7 +8751,6 @@ declare module "@stencil/core" {
*/
"ix-pane-layout": LocalJSX.IxPaneLayout & JSXBase.HTMLAttributes<HTMLIxPaneLayoutElement>;
"ix-pill": LocalJSX.IxPill & JSXBase.HTMLAttributes<HTMLIxPillElement>;
"ix-playground-internal": LocalJSX.IxPlaygroundInternal & JSXBase.HTMLAttributes<HTMLIxPlaygroundInternalElement>;
/**
* @since 1.6.0
*/
Expand Down
51 changes: 0 additions & 51 deletions packages/core/src/components/playground/example-modal.tsx

This file was deleted.

Loading

0 comments on commit 4c969b5

Please sign in to comment.