feature(storybook): change folder structure

packages/ui-library/.storybook/preview.js

@@ -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].*',
     },

packages/ui-library/src/components/ui/button-group/index.css.ts → packages/ui-library/src/components/button-group/index.css.ts

@@ -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;
 

packages/ui-library/src/components/ui/button-group/index.stories.ts → packages/ui-library/src/components/button-group/index.stories.ts

@@ -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>
@@ -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,

packages/ui-library/src/components/ui/button-group/index.test.ts → packages/ui-library/src/components/button-group/index.test.ts

@@ -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',

packages/ui-library/src/components/ui/button-group/index.ts → packages/ui-library/src/components/button-group/index.ts

@@ -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];
 
@@ -29,4 +27,10 @@ export class BlrButtonGroup extends LitElement {
   }
 }
 
+customElements.define(TAG_NAME, BlrButtonGroup);
+
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrButtonGroup);
+}
+
 export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElement>;

packages/ui-library/src/components/ui/button-group/renderFunction.ts → packages/ui-library/src/components/button-group/renderFunction.ts

@@ -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';
 

packages/ui-library/src/components/forms/checkbox/index.css.ts → packages/ui-library/src/components/checkbox/index.css.ts

@@ -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;

packages/ui-library/src/components/forms/checkbox/index.stories.ts → packages/ui-library/src/components/checkbox/index.stories.ts

@@ -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`
@@ -22,7 +22,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Forms/Checkbox',
+  title: 'Components/Checkbox',
   argTypes: {
     // Appearance
     size: {

packages/ui-library/src/components/forms/checkbox/index.test.ts → packages/ui-library/src/components/checkbox/index.test.ts

@@ -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',

packages/ui-library/src/components/forms/checkbox/index.ts → packages/ui-library/src/components/checkbox/index.ts

@@ -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 = [];
 
@@ -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>;

packages/ui-library/src/components/forms/checkbox/renderFunction.ts → packages/ui-library/src/components/checkbox/renderFunction.ts

@@ -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';
 

packages/ui-library/src/components/internal-components/counter/index.css.ts → packages/ui-library/src/components/counter/index.css.ts

@@ -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;

packages/ui-library/src/components/internal-components/counter/index.stories.ts → packages/ui-library/src/components/counter/index.stories.ts

@@ -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`
@@ -18,7 +18,7 @@ const sharedStyles = html`
 `;
 
 export default {
-  title: 'Design System/Web Components/Internal Components/Counter',
+  title: 'Components/Counter',
   argTypes: {
     theme: {
       options: Themes,
@@ -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>`,
       },
     },

packages/ui-library/src/components/internal-components/counter/index.test.ts → packages/ui-library/src/components/counter/index.test.ts

@@ -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';

packages/ui-library/src/components/internal-components/counter/index.ts → packages/ui-library/src/components/counter/index.ts

@@ -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 = [];
 
@@ -36,5 +36,10 @@ export class BlrCounter extends LitElement {
     }
   }
 }
+customElements.define(TAG_NAME, BlrCounter);
+
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrCounter);
+}
 
 export type BlrCounterType = Omit<BlrCounter, keyof LitElement>;

packages/ui-library/src/components/internal-components/counter/renderFunction.ts → packages/ui-library/src/components/counter/renderFunction.ts

@@ -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';
 

packages/ui-library/src/components/ui/divider/index.css.ts → packages/ui-library/src/components/divider/index.css.ts

@@ -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;

packages/ui-library/src/components/ui/divider/index.stories.ts → packages/ui-library/src/components/divider/index.stories.ts

@@ -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>
@@ -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.',

packages/ui-library/src/components/ui/divider/index.test.ts → packages/ui-library/src/components/divider/index.test.ts

@@ -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' };
 

packages/ui-library/src/components/ui/divider/index.ts → packages/ui-library/src/components/divider/index.ts

@@ -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';
@@ -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>;

packages/ui-library/src/components/ui/divider/renderFunction.ts → packages/ui-library/src/components/divider/renderFunction.ts

@@ -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';
 

packages/ui-library/src/components/internal-components/form-caption-group/index.css.ts → packages/ui-library/src/components/form-caption-group/index.css.ts

@@ -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;