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 '../buttons/icon-button/renderFunction';
+import { BlrTextButtonRenderFunction } from '../buttons/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/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 '../buttons/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/actions/buttons/icon-button/index.css.ts → packages/ui-library/src/components/buttons/icon-button/index.css.ts

@@ -1,7 +1,7 @@
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
 
-import { componentTokens } from "../../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
-import { semanticTokens } from "../../../../foundation/_tokens-generated/__semantic-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";
 
 const { IconButton } = componentTokens.Actions;
 const { Global, Actions } = semanticTokens;

packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts → packages/ui-library/src/components/buttons/icon-button/index.stories.ts

@@ -4,11 +4,10 @@ import type { BlrIconButtonType } from './index';
 
 import { BlrIconButtonRenderFunction } from './renderFunction';
 import { PureIconKeys } from '@boiler/icons';
-import { ActionVariants, ActionSizes } from '../../../../globals/constants';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
-
 // this loads the all components instances and registers their html tags
-import '../../../../index';
+import '../../../index';
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { ActionVariants, ActionSizes } from '../../../globals/constants';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -44,6 +43,7 @@ const argTypesToDisable = [
   'onBlur',
   'onSelect',
 ];
+
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};
   argTypes.forEach((argType: string) => {
@@ -60,7 +60,7 @@ const disabledArgTypes = generateDisabledArgTypes(argTypesToDisable);
 
 //Main Showcase Storybook IconButton, main argType Table
 export default {
-  title: 'Design System/Web Components/Actions/Buttons/Icon Button',
+  title: 'Components/Buttons/Icon Button',
   argTypes: {
     //Appearance
     variant: {

packages/ui-library/src/components/actions/buttons/icon-button/index.test.ts → packages/ui-library/src/components/buttons/icon-button/index.test.ts

@@ -1,10 +1,10 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrIconButtonRenderFunction } from './renderFunction';
-import type { BlrIconButtonType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import type { BlrIconButtonType } from '.';
 
 const sampleParams: BlrIconButtonType = {
   arialabel: 'Button',

packages/ui-library/src/components/actions/buttons/icon-button/index.ts → packages/ui-library/src/components/buttons/icon-button/index.ts

@@ -1,21 +1,20 @@
 /* eslint-disable no-console */
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
-import { actionDark, actionLight } from '../../../../foundation/semantic-tokens/action.css';
-import { ActionVariantType, ActionSizesType, SizesType, FormSizesType } from '../../../../globals/types';
-import { determineLoaderVariant } from '../../../../utils/determine-loader-variant';
-import { BlrIconRenderFunction } from '../../../ui/icon/renderFunction';
-import { calculateIconName } from '../../../../utils/calculate-icon-name';
-import { BlrLoaderRenderFunction } from '../../../feedback/loader/renderFunction';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
-import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
+import { actionDark, actionLight } from '../../../foundation/semantic-tokens/action.css';
+import { ActionVariantType, ActionSizesType, SizesType, FormSizesType } from '../../../globals/types';
+import { determineLoaderVariant } from '../../../utils/determine-loader-variant';
+import { BlrIconRenderFunction } from '../../icon/renderFunction';
+import { calculateIconName } from '../../../utils/calculate-icon-name';
+import { BlrLoaderRenderFunction } from '../../loader/renderFunction';
+import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { getComponentConfigToken } from '../../../utils/get-component-config-token';
 
 import { TAG_NAME } from './renderFunction';
 
-@customElement(TAG_NAME)
 export class BlrIconButton extends LitElement {
   static styles = [styleCustom];
 
@@ -138,4 +137,8 @@ export class BlrIconButton extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrIconButton);
+}
+
 export type BlrIconButtonType = Omit<BlrIconButton, keyof LitElement>;

packages/ui-library/src/components/actions/buttons/icon-button/renderFunction.ts → packages/ui-library/src/components/buttons/icon-button/renderFunction.ts

@@ -1,5 +1,5 @@
 import { BlrIconButtonType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-icon-button';
 

packages/ui-library/src/components/actions/buttons/text-button/index.css.ts → packages/ui-library/src/components/buttons/text-button/index.css.ts

@@ -1,7 +1,7 @@
-import { typeSafeNestedCss } from "../../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
 
-import { componentTokens } from "../../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
-import { semanticTokens } from "../../../../foundation/_tokens-generated/__semantic-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";
 
 const { TextButton } = componentTokens.Actions;
 const { Global, Actions } = semanticTokens;

packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts → packages/ui-library/src/components/buttons/text-button/index.stories.ts

@@ -3,11 +3,10 @@ import { html } from 'lit-html';
 import { BlrTextButtonType } from './index';
 import { BlrTextButtonRenderFunction } from './renderFunction';
 import { PureIconKeys } from '@boiler/icons';
-import { ActionSizes, ActionVariants, IconPositionVariant, ButtonDisplayOptions } from '../../../../globals/constants';
-import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
-
+import '../../../index';
+import { Themes } from '../../../foundation/_tokens-generated/index.themes';
+import { ActionVariants, ActionSizes, ButtonDisplayOptions, IconPositionVariant } from '../../../globals/constants';
 // this loads the all components instances and registers their html tags
-import '../../../../index';
 
 // Shared Style inside the Stories
 const sharedStyles = html`
@@ -40,7 +39,7 @@ const defaultParams: BlrTextButtonType = {
 };
 
 export default {
-  title: 'Design System/Web Components/Actions/Buttons/Text Button',
+  title: 'Components/Buttons/Text Button',
   argTypes: {
     //Appearance
     variant: {

packages/ui-library/src/components/actions/buttons/text-button/index.test.ts → packages/ui-library/src/components/buttons/text-button/index.test.ts

@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrTextButtonRenderFunction } from './renderFunction';
-import type { BlrTextButtonType } from '@boiler/ui-library/dist/';
+import type { BlrTextButtonType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';

packages/ui-library/src/components/actions/buttons/text-button/index.ts → packages/ui-library/src/components/buttons/text-button/index.ts

@@ -1,28 +1,27 @@
 import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
-import { actionDark, actionLight } from '../../../../foundation/semantic-tokens/action.css';
+import { actionDark, actionLight } from '../../../foundation/semantic-tokens/action.css';
 import {
   ActionSizesType,
   ActionVariantType,
   SizesType,
   FormSizesType,
   IconPositionVariant,
   ButtonDisplayType,
-} from '../../../../globals/types';
-import { determineLoaderVariant } from '../../../../utils/determine-loader-variant';
-import { BlrIconRenderFunction } from '../../../ui/icon/renderFunction';
-import { calculateIconName } from '../../../../utils/calculate-icon-name';
-import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
-import { BlrLoaderRenderFunction } from '../../../feedback/loader/renderFunction';
+} from '../../../globals/types';
+import { determineLoaderVariant } from '../../../utils/determine-loader-variant';
+import { BlrIconRenderFunction } from '../../icon/renderFunction';
+import { calculateIconName } from '../../../utils/calculate-icon-name';
+import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
+import { BlrLoaderRenderFunction } from '../../loader/renderFunction';
 
 import { TAG_NAME } from './renderFunction';
 
-import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
+import { getComponentConfigToken } from '../../../utils/get-component-config-token';
 
-@customElement(TAG_NAME)
 export class BlrTextButton extends LitElement {
   static styles = [styleCustom];
 
@@ -176,4 +175,8 @@ export class BlrTextButton extends LitElement {
   }
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, BlrTextButton);
+}
+
 export type BlrTextButtonType = Omit<BlrTextButton, keyof LitElement>;

packages/ui-library/src/components/actions/buttons/text-button/renderFunction.ts → packages/ui-library/src/components/buttons/text-button/renderFunction.ts

@@ -1,5 +1,5 @@
 import { BlrTextButtonType } from '.';
-import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 export const TAG_NAME = 'blr-text-button';
 

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