@momentum-design/components 0.0.1

package/src/components/themeprovider/themeprovider.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj, Args } from '@storybook/web-components';
+import { html } from 'lit';
+import '.';
+import './themeprovider.stories.styles.css';
+import { THEMES } from './themeprovider.constants';
+import './themeprovider.stories.utils';
+
+const render = (args: Args) => html`
+  <mdc-themeprovider class="themeWrapper" theme="${args.theme}">
+    <p>Current theme:</p>
+    <mdc-subcomponent></mdc-subcomponent>
+    <div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-accent-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-warning-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-background-alert-success-normal);"></div>
+    </div>
+  </mdc-themeprovider>
+`;
+
+const meta: Meta = {
+  tags: ['autodocs'],
+  component: 'mdc-themeprovider',
+  render,
+  argTypes: {
+    theme: {
+      options: THEMES,
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+
+export const Primary: StoryObj = {
+  args: {
+    theme: THEMES[0],
+  },
+};

package/src/components/themeprovider/themeprovider.stories.utils.ts

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import { Component } from '../../models';
+import ThemeProvider from './themeprovider.component';
+import providerUtils from '../../utils/provider';
+
+// Subcomponent to be rendered in storybook, to showcase that the
+// theme can be consumed as a subcomponent
+class SubComponentThemeProvider extends Component {
+  currentTheme?: string;
+
+  private themeProviderContext = providerUtils.consume({ host: this, context: ThemeProvider.Context });
+
+  override render() {
+    return html` <p>${this.themeProviderContext.value?.theme}</p> `;
+  }
+}
+
+SubComponentThemeProvider.register('mdc-subcomponent');
+declare global {
+  interface HTMLElementTagNameMap {
+    ['mdc-subcomponent']: SubComponentThemeProvider;
+  }
+}

package/src/components/themeprovider/themeprovider.styles.ts

@@ -0,0 +1,13 @@
+import { css } from "lit";
+
+const styles = css`
+  :host {
+    --mdc-themeprovider-font-family: "Momentum";
+    --mdc-themeprovider-color-default: var(--mds-color-theme-text-primary-normal);
+
+    font-family: var(--mdc-themeprovider-font-family);
+    color: var(--mdc-themeprovider-color-default);
+  }
+`;
+
+export default styles;

package/src/components/themeprovider/themeprovider.types.ts

@@ -0,0 +1,7 @@
+import type { ValueOf } from '../../utils/types';
+import { THEME_NAMES } from './themeprovider.constants';
+import type { ThemeClassPrefix, ThemeClassSeparator } from './themeprovider.utils';
+
+export type ThemeName = ValueOf<typeof THEME_NAMES>;
+
+export type Theme<T extends ThemeName = ThemeName> = `${ThemeClassPrefix}${ThemeClassSeparator}${T}`;

package/src/components/themeprovider/themeprovider.utils.ts

@@ -0,0 +1,16 @@
+import type { Theme, ThemeName } from './themeprovider.types';
+
+const THEME_CLASS_PREFIX = 'mds-theme-stable' as const;
+
+export const THEME_CLASS_SEPARATOR = '-' as const;
+
+const getFullQualifiedTheme = <T extends ThemeName>(themeName: T): Theme =>
+  [THEME_CLASS_PREFIX, themeName].join(THEME_CLASS_SEPARATOR) as Theme<T>;
+
+const utils = {
+  getFullQualifiedTheme,
+};
+
+export default utils;
+export type ThemeClassPrefix = typeof THEME_CLASS_PREFIX;
+export type ThemeClassSeparator = typeof THEME_CLASS_SEPARATOR;

package/src/index.ts

@@ -0,0 +1,22 @@
+import {
+  Component,
+  Provider,
+} from './models';
+
+import ThemeProvider from './components/themeprovider';
+import Icon from './components/icon';
+import IconProvider from './components/iconprovider';
+import Avatar from './components/avatar';
+import Badge from './components/badge';
+import Text from './components/text';
+
+export {
+  Component,
+  Provider,
+  ThemeProvider,
+  Icon,
+  IconProvider,
+  Avatar,
+  Badge,
+  Text,
+};

package/src/models/component/component.component.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+
+/**
+ * Core Component class to ultimately be inherited by all Web Components within
+ * this package.
+ *
+ * @public
+ */
+class Component extends LitElement {
+  /**
+   * Register `this` extended `Component` Class as a custom element within the
+   * DOM's custom elements registry.
+   *
+   * @remarks
+   * This method must be called in order for this component to be consumable
+   * within the DOM.
+   *
+   * @example
+   * ```ts
+   * import CustomComponent from './custom-component';
+   *
+   * // Standard registration.
+   * CustomComponent.register();
+   *
+   * // Custom registration.
+   * CustomComponent.register({
+   *   name: 'custom-component',
+   *   prefix: 'prefix',
+   * });
+   *
+   * export default CustomComponent;
+   * ```
+   *
+   *
+   * @returns - Void.
+   */
+  public static register(namespace: string): void {
+    if (customElements.get(namespace)) {
+      return;
+    }
+
+    customElements.define(namespace, this as any);
+  }
+}
+
+export default Component;

package/src/models/component/component.types.ts

@@ -0,0 +1,16 @@
+/**
+ * `Component` Class' static `registration()` method options.
+ *
+ * @public
+ */
+export interface RegisterOptions {
+  /**
+   * Name to use when registering this `Component` Class' to within DOM.
+   */
+  name: string;
+
+  /**
+   * Name to use when registering this `Component` Class' to within DOM.
+   */
+  prefix?: string;
+}

package/src/models/component/index.ts

@@ -0,0 +1,7 @@
+import Component from './component.component';
+
+export type {
+  RegisterOptions as ComponentRegisterOptions,
+} from './component.types';
+
+export default Component;

package/src/models/index.ts

@@ -0,0 +1,11 @@
+import Component from './component';
+import Provider from './provider';
+
+export type {
+  ComponentRegisterOptions,
+} from './component';
+
+export {
+  Component,
+  Provider,
+};

package/src/models/provider/index.ts

@@ -0,0 +1,3 @@
+import Provider from './provider.component';
+
+export default Provider;

package/src/models/provider/provider.component.ts

@@ -0,0 +1,87 @@
+import { ContextProvider } from '@lit-labs/context';
+import { CSSResult, html } from 'lit';
+
+import Component from '../component';
+
+import styles from './provider.styles';
+
+type ConstructorOptions<C> = {
+  context: { __context__: C };
+  initialValue?: C;
+};
+
+/**
+ * Provider Component class to ultimately be inherited by all Provider-type Web
+ * Components within this package.
+ *
+ * @public
+ */
+abstract class Provider<C> extends Component {
+  /**
+   * Constructor of the Provider.
+   *
+   * Execute in the constructor of the provider implementation,
+   * like so
+   *
+   * ```
+   * constructor() {
+   *   super(TAG_NAME, {initialValue: new ContextClass(defaultValues)});
+   * }
+   * ```
+   * @param host - host of where the context will be hooked onto, e.g. this
+   * @param context - context (returned by createContext)
+   * @param initialValue - initialValue of the ContextClass, like `new ContextClass(defaultValues)`
+   */
+  constructor({ context, initialValue }: ConstructorOptions<C>) {
+    super();
+
+    this.context = new ContextProvider(this, {
+      context,
+      initialValue,
+    });
+  }
+
+  /**
+   * Context associated with this provider.
+   *
+   * @remarks
+   * Providing a Context type as a generic when creating extended Provider Class
+   * definitions will help enforce the property validation.
+   */
+  protected context: ContextProvider<{ __context__: C }>;
+
+  /**
+   * Styles associated with this Provider Component.
+   */
+  public static override styles: CSSResult | Array<CSSResult> = styles;
+
+  /**
+   * Update the context of this Provider and trigger its consumers to update.
+   *
+   * @remarks
+   * This method is called every time this Provider is re-rendered and should
+   * be used to update the local Context based on any deltas between this
+   * Provider's attributes and this Provider's context that caused the
+   * re-render. If the `render()` method is overwritten, this call must be made
+   * manually.
+   */
+  protected abstract updateContext(): void;
+
+  /**
+   * Render this Provider.
+   *
+   * @remarks
+   * This method calls `updateContext()` then validates whether or not to
+   * update all consumers based on the results of the `shouldUpdateConsumers`
+   * getter.
+   *
+   * @returns - This Provider as an HTML Element.
+   */
+  public override render() {
+    this.updateContext();
+
+    return html`<slot></slot>`;
+  }
+}
+
+export default Provider;

package/src/models/provider/provider.styles.ts

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    border: 0;
+    display: block;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+`;
+
+export default styles;

package/src/stories/colors.mdx

@@ -0,0 +1,32 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+
+<Meta title="System/Colors" />
+
+{/* TODO: automate this such that the color palette is automatically generated from our tokens */}
+
+<ColorPalette>
+  <ColorItem
+    title="common-text"
+    colors={{
+      white: "#fffffff2",
+      gray: "#ffffffb3",
+      black: "#000000f2",
+      disabled: "#ffffff66",
+    }}
+  />
+  <ColorItem
+    title="common-text-success"
+    colors={{
+      normal: "#3cc29a",
+      hover: "#9fedd8",
+    }}
+  />
+  <ColorItem
+    title="button-accent"
+    colors={{
+      normal: "#1170cf",
+      hover: "#0353a8",
+      pressed: "#063a75"
+    }}
+  />
+</ColorPalette>

package/src/stories/icons.mdx

@@ -0,0 +1,13 @@
+import { Meta, IconGallery, IconItem } from "@storybook/blocks";
+
+<Meta title="System/Icons" />
+
+{/* TODO: automate this such that the icon gallery is automatically generated from our icons */}
+
+<IconGallery>
+  <IconItem name="3d-object-bold">
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+      <path d="M27.776 6.823 16.78 2.155a2.02 2.02 0 0 0-1.546 0L4.231 6.822A1.995 1.995 0 0 0 3 8.667v14.667a1.993 1.993 0 0 0 1.225 1.843l11.016 4.669a2.033 2.033 0 0 0 1.545-.002l10.984-4.666A1.994 1.994 0 0 0 29 23.333V8.666a1.992 1.992 0 0 0-1.224-1.843ZM16.003 3.998l9.402 3.99-9.425 3.929-9.397-3.922 9.42-3.997ZM5.006 9.504 15 13.675v13.896L5 23.334l.006-13.83Zm21.987 13.832L17 27.584V13.658l10-4.167v13.842l-.007.003Z" />
+    </svg>
+  </IconItem>
+</IconGallery>

package/src/stories/typography.mdx

@@ -0,0 +1,20 @@
+import { Meta, Typeset } from "@storybook/blocks";
+
+<Meta title="System/Typography" />
+
+{/* TODO: automate this such that typeset is automatically generated from our font package */}
+
+{/* to be able to pass in textTransform to the typeset block, we would
+need to do something similar like:
+https://github.com/storybookjs/storybook/pull/15302 
+it looks like the existing lineHeight doesn't work in mdx though - has to be investigated */}
+
+### Heading 1
+<Typeset 
+    fontSizes={["7.5rem"]}
+    fontWeight="700"
+    sampleText="Lorem ipsum dolor sit amet, consectectur adipiscing elit."
+    fontFamily='"Momentum"'
+    fontStyle="normal"
+    lineHeight="48px"
+/>

package/src/utils/mixins/DisabledMixin.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+export interface DisabledMixinInterface {
+  disabled: boolean;
+}
+
+export const DisabledMixin = <T extends Constructor<LitElement>>(
+  superClass: T,
+) => {
+  class InnerMixinClass extends superClass {
+    @property({ reflect: true, type: Boolean })
+    public disabled = false;
+  }
+  // Cast return type to your mixin's interface intersected with the superClass type
+  return InnerMixinClass as Constructor<DisabledMixinInterface> & T;
+};

package/src/utils/mixins/TabIndexMixin.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+export interface TabIndexMixinInterface {
+  tabIndex: number;
+}
+
+export const TabIndexMixin = <T extends Constructor<LitElement>>(
+  superClass: T,
+) => {
+  class InnerMixinClass extends superClass {
+    @property({ reflect: true, type: Number, attribute: 'tabindex' })
+    public override tabIndex = 0;
+  }
+  // Cast return type to your mixin's interface intersected with the superClass type
+  return InnerMixinClass as Constructor<TabIndexMixinInterface> & T;
+};

package/src/utils/provider/index.ts

@@ -0,0 +1,21 @@
+import { Context, ContextConsumer } from '@lit-labs/context';
+import { ReactiveElement } from 'lit';
+
+type ConsumeOptions<C> = {
+  host: ReactiveElement;
+  context: C;
+  subscribe?:boolean
+}
+const consume = <C extends Context<unknown, unknown>>(options: ConsumeOptions<C>) => {
+  const { host, context, subscribe } = options;
+
+  return new ContextConsumer<C, typeof host>(host, {
+    context,
+    subscribe: subscribe ?? true,
+  });
+};
+
+const providerUtils = {
+  consume,
+};
+export default providerUtils;

package/src/utils/styles/index.ts

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+
+const hostFitContentStyles = css`
+  :host {
+    align-items: center;
+    display: flex;
+    height: fit-content;
+    justify-content: center;
+    width: fit-content;
+  }
+`;
+
+export { hostFitContentStyles };

package/src/utils/tag-name/constants.ts

@@ -0,0 +1,10 @@
+const NAMESPACE = {
+  PREFIX: 'mdc' as const,
+  SEPARATOR: '-' as const,
+};
+
+const CONSTANTS = {
+  NAMESPACE,
+};
+
+export default CONSTANTS;

package/src/utils/tag-name/index.ts

@@ -0,0 +1,15 @@
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable max-len */
+import CONSTANTS from './constants';
+
+// make ReturnType a String Literal to make it usable in the HTMLElementTagNameMap per component
+// using Template Literal Types: https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html
+type ReturnType<ComponentName extends string> =
+  `${typeof CONSTANTS.NAMESPACE.PREFIX}${typeof CONSTANTS.NAMESPACE.SEPARATOR}${ComponentName}`;
+
+const constructTagName = <ComponentName extends string>(componentName: ComponentName): ReturnType<ComponentName> =>
+  [CONSTANTS.NAMESPACE.PREFIX, componentName].join(CONSTANTS.NAMESPACE.SEPARATOR) as ReturnType<ComponentName>;
+
+export default {
+  constructTagName,
+};

package/src/utils/types.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "extends": "../../../config/typescript/tsconfig.base.json",
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "outDir": "./dist",
+    "rootDir": "./",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "useDefineForClassFields": false,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "config",
+    ".eslintrc.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+}

package/tsconfig.module.json

@@ -0,0 +1,47 @@
+{
+  "extends": "../../../config/typescript/tsconfig.base.json",
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "CommonJS",
+    "lib": [
+      "es2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "declaration": true,
+    "declarationMap": false,
+    "declarationDir": "./dist",
+    "sourceMap": false,
+    "inlineSources": false,
+    "outDir": "./dist",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "useDefineForClassFields": false,
+    "removeComments": false,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ],
+  },
+  "files": [
+    "src/index.ts"
+  ],
+  "exclude": [
+    "**/*.e2e-test.ts",
+    "**/*.fixtures.ts",
+    "**/*.stories.ts",
+    "node_modules"
+  ],
+}