Skip to content

Commit

Permalink
feature(storybook): change folder structure (#894)
Browse files Browse the repository at this point in the history
* feature(storybook): change folder structure

* fix(storybook): change imports for types

* fix(storybook): wip

* only create custom element if not defined

* feat(storybook): align overall folder structure

* fix(storybook): tests

* fix(storybook): delete unnecessary folder

* fix(storybook): wip

* fix(storybook): delete double customElements

---------

Co-authored-by: christian.b.hoffmann <[email protected]>
  • Loading branch information
bar-tay and ChristianHoffmannS2 authored Feb 15, 2024
1 parent 209ad72 commit 8830300
Show file tree
Hide file tree
Showing 157 changed files with 629 additions and 551 deletions.
7 changes: 7 additions & 0 deletions packages/ui-library/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@ import '../../assets/fonts/fonts.css';

export default {
parameters: {
options: {
storySort: {
method: 'alphabetical', // Sort alphabetically
order: ['Foundation', 'Components'],
locales: 'en-US',
},
},
actions: {
argTypesRegex: '^on[A-Z].*',
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";

import { componentTokens } from "../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";

const { ButtonGroup } = componentTokens.UI;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
/* eslint-disable no-console */
import { BlrButtonGroupType } from './index';
import { BlrButtonGroupRenderFunction } from './renderFunction';
import { BlrTextButtonRenderFunction } from '../../actions/buttons/text-button/renderFunction';
import { BlrIconButtonRenderFunction } from '../../actions/buttons/icon-button/renderFunction';
import { html } from 'lit';
import { ButtonGroupAlignmentVariants, ButtonGroupSizes } from '../../../globals/constants';
// this loads the all components instances and registers their html tags
import '../../../index';
import '../../index';
import { ButtonGroupSizes, ButtonGroupAlignmentVariants } from '../../globals/constants';
import { BlrIconButtonRenderFunction } from '../icon-button/renderFunction';
import { BlrTextButtonRenderFunction } from '../text-button/renderFunction';
import { BlrButtonGroupType } from '.';
import { BlrButtonGroupRenderFunction } from './renderFunction';

const sharedStyles = html`
<style>
Expand All @@ -33,7 +32,7 @@ const sharedStyles = html`
`;

export default {
title: 'Design System/Web Components/UI/Button Group',
title: 'Components/Button Group',
argTypes: {
size: {
options: ButtonGroupSizes,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import '@boiler/ui-library/dist/';

import { BlrButtonGroupRenderFunction } from './renderFunction';
import type { BlrButtonGroupType } from '@boiler/ui-library/dist/';

import { fixture, expect } from '@open-wc/testing';
import { querySelectorDeep } from 'query-selector-shadow-dom';
import { BlrTextButtonRenderFunction } from '../../actions/buttons/text-button/renderFunction';
import type { BlrButtonGroupType } from '.';
import { BlrTextButtonRenderFunction } from '../text-button/renderFunction';

const sampleParams: BlrButtonGroupType = {
size: 'md',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';

import { styleCustom } from './index.css';
import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../../globals/types';
import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types';

import { TAG_NAME } from './renderFunction';

@customElement(TAG_NAME)
export class BlrButtonGroup extends LitElement {
static styles = [styleCustom];

Expand All @@ -29,4 +27,8 @@ export class BlrButtonGroup extends LitElement {
}
}

if (!customElements.get(TAG_NAME)) {
customElements.define(TAG_NAME, BlrButtonGroup);
}

export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElement>;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { TemplateResult } from 'lit';
import { BlrButtonGroupType } from '.';
import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';

export const TAG_NAME = 'blr-button-group';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";

import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";

export const { tokenizedLight: checkboxLight, tokenizedDark: checkboxDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
const { Checkbox, FormLabel } = componentTokens.Forms;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
import { BlrCheckboxType } from './index';
import { BlrCheckboxRenderFunction } from './renderFunction';
import { html } from 'lit-html';
import { InputSizes } from '../../../globals/constants';
import { PureIconKeys } from '@boiler/icons';
import { Themes } from '../../../foundation/_tokens-generated/index.themes';

import { PureIconKeys } from '@boiler/icons';
import { Themes } from '../../foundation/_tokens-generated/index.themes';
import { InputSizes } from '../../globals/constants';
// this loads the all components instances and registers their html tags
import '../../../index';
import '../../index';

// Shared Style inside the Stories
const sharedStyles = html`
Expand All @@ -22,7 +22,7 @@ const sharedStyles = html`
`;

export default {
title: 'Design System/Web Components/Forms/Checkbox',
title: 'Components/Checkbox',
argTypes: {
// Appearance
size: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import '@boiler/ui-library/dist/';

import { BlrCheckboxRenderFunction } from './renderFunction';
import type { BlrCheckboxType } from '@boiler/ui-library/dist/';

import { fixture, expect } from '@open-wc/testing';
import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
import type { BlrCheckboxType } from '.';

const sampleParams: BlrCheckboxType = {
label: 'Checkbox Option',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
import { LitElement, html, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';

import { BlrFormLabelInlineRenderFunction } from '../../internal-components/form-label/form-label-inline/renderFunction';
import { FormSizesType } from '../../../globals/types';

import { checkboxDark, checkboxLight } from './index.css';
import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
import { SizelessIconType } from '@boiler/icons';
import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
import { BlrIconRenderFunction } from '../../ui/icon/renderFunction';
import { calculateIconName } from '../../../utils/calculate-icon-name';
import { getComponentConfigToken } from '../../../utils/get-component-config-token';
import { BlrFormCaptionGroupRenderFunction } from '../../internal-components/form-caption-group/renderFunction';
import { BlrFormCaptionRenderFunction } from '../../internal-components/form-caption/renderFunction';

import { TAG_NAME } from './renderFunction';
import { SizelessIconType } from '@boiler/icons';
import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
import { FormSizesType } from '../../globals/types';
import { calculateIconName } from '../../utils/calculate-icon-name';
import { getComponentConfigToken } from '../../utils/get-component-config-token';
import { BlrIconRenderFunction } from '../icon/renderFunction';
import { checkboxLight, checkboxDark } from './index.css';
import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';

@customElement(TAG_NAME)
export class BlrCheckbox extends LitElement {
static styles = [];

Expand Down Expand Up @@ -313,4 +309,8 @@ export class BlrCheckbox extends LitElement {
}
}

if (!customElements.get(TAG_NAME)) {
customElements.define(TAG_NAME, BlrCheckbox);
}

export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElement>;
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { BlrCheckboxType } from '.';
import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';

export const TAG_NAME = 'blr-checkbox';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";

export const { tokenizedLight: counterLight, tokenizedDark: counterDark } = renderThemedCssStrings((componentTokens) => {
const { Counter } = componentTokens.Feedback;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/* eslint-disable no-console */
import { Themes } from '../../../foundation/_tokens-generated/index.themes';
import { CounterVariants, FormSizes } from '../../../globals/constants';
import { Themes } from '../../foundation/_tokens-generated/index.themes';
import { CounterVariants, FormSizes } from '../../globals/constants';
import { html } from 'lit-html';
import { BlrCounterType } from './index';
import { BlrCounterRenderFunction } from './renderFunction';

// this loads the all components instances and registers their html tags
import '../../../index';
import '../../index';

// Shared Style inside the Stories
const sharedStyles = html`
Expand All @@ -18,7 +18,7 @@ const sharedStyles = html`
`;

export default {
title: 'Design System/Web Components/Internal Components/Counter',
title: 'Components/Counter',
argTypes: {
theme: {
options: Themes,
Expand Down Expand Up @@ -81,6 +81,12 @@ Counter provides a visual representation of a numeric quantity and typically inc
- [**Appearance**](#appearance)
- [**Variant**](#variant)
- [**Size Variant**](#size-variant)
The Counter is intended to be used when creating new components. Currently it is used like this in the following components:
- [**Text Area**](?path=/docs/components-text-area--docs)
It is not intended to use the Counter directly when creating new applications.
</Markdown>`,
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '@boiler/ui-library/dist/';

import { BlrCounterRenderFunction } from './renderFunction';
import type { BlrCounterType } from '@boiler/ui-library/dist/';
import type { BlrCounterType } from '.';

import { fixture, expect } from '@open-wc/testing';
import { querySelectorDeep } from 'query-selector-shadow-dom';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { CounterVariantType, FormSizesType } from '../../../globals/types';
import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
import { CounterVariantType, FormSizesType } from '../../globals/types';
import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
import { counterLight, counterDark } from './index.css';

import { TAG_NAME } from './renderFunction';

@customElement(TAG_NAME)
//
export class BlrCounter extends LitElement {
static styles = [];

Expand Down Expand Up @@ -37,4 +37,8 @@ export class BlrCounter extends LitElement {
}
}

if (!customElements.get(TAG_NAME)) {
customElements.define(TAG_NAME, BlrCounter);
}

export type BlrCounterType = Omit<BlrCounter, keyof LitElement>;
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { BlrCounterType } from '.';
import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';

export const TAG_NAME = 'blr-counter';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";

import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";

export const { tokenizedLight: dividerLight, tokenizedDark: dividerDark } = renderThemedCssStrings((componentTokens) => {
const { UI } = componentTokens;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { html } from 'lit-html';
import { BlrDividerType } from './index';
import { BlrDividerRenderFunction } from './renderFunction';
import { DividerVariations } from '../../../globals/constants';
import { Themes } from '../../../foundation/_tokens-generated/index.themes';
import '../../../index';

import '../../index';
import { Themes } from '../../foundation/_tokens-generated/index.themes';
import { DividerVariations } from '../../globals/constants';

const sharedStyles = html`
<style>
Expand All @@ -23,7 +24,7 @@ const sharedStyles = html`
`;

export default {
title: 'Design System/Web Components/UI/Divider',
title: 'Components/Divider',
argTypes: {
direction: {
description: 'Choose direction of the component.',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import '@boiler/ui-library/dist/';

import { BlrDividerRenderFunction } from './renderFunction';
import type { BlrDividerType } from '@boiler/ui-library/dist/';

import { fixture, expect } from '@open-wc/testing';
import { querySelectorDeep } from 'query-selector-shadow-dom';
import type { BlrDividerType } from '.';

const sampleParams: BlrDividerType = { theme: 'Light', direction: 'vertical' };

Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { DividerVariationTypes } from '../../../globals/types';
import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
import { property } from 'lit/decorators.js';

import { classMap } from 'lit/directives/class-map.js';
import { dividerDark, dividerLight } from './index.css';

import { TAG_NAME } from './renderFunction';
import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
import { DividerVariationTypes } from '../../globals/types';

@customElement(TAG_NAME)
export class BlrDivider extends LitElement {
@property() direction: DividerVariationTypes = 'vertical';
@property() theme: ThemeType = 'Light';
Expand All @@ -29,4 +29,8 @@ export class BlrDivider extends LitElement {
}
}

if (!customElements.get(TAG_NAME)) {
customElements.define(TAG_NAME, BlrDivider);
}

export type BlrDividerType = Omit<BlrDivider, keyof LitElement>;
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { BlrDividerType } from '.';
import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';

export const TAG_NAME = 'blr-divider';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";

import { semanticTokens } from "../../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
import { componentTokens } from "../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
import { semanticTokens } from "../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";

const { CaptionGroup } = componentTokens.Forms;
const { SM, MD, LG } = semanticTokens.Forms;
Expand Down
Loading

0 comments on commit 8830300

Please sign in to comment.