@momentum-design/components 0.0.1 → 0.0.3

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

@@ -1,38 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/**
- * `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

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

package/src/models/index.ts

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

package/src/models/provider/index.ts

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

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

@@ -1,87 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-/* 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

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

package/tsconfig.json

@@ -1,45 +0,0 @@
-{
-  "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

@@ -1,47 +0,0 @@
-{
-  "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"
-  ],
-}