jpzwarte

module.exports = {
  root: true,
  env: {
    browser: true
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json']
  },

jpzwarte

PoC scoped custom element registries in Angular

1. Render the AppComponent as a custom element

export class AppModule {
  ngDoBootstrap(): void {
    customElements.define('mg-root', createCustomIvyElement(AppComponent));
  }
}

jpzwarte

import { IconRegistry } from '@dna/core/icon';
import { faArrowsH, faArrowsV } from '@fortawesome/pro-regular-svg-icons';
import { styled } from '@storybook/theming';
import React, { FunctionComponent } from 'react';

IconRegistry.addIcons(faArrowsH, faArrowsV);

export interface ComponentSizeProps {
  children?: JSX.Element;
  height?: string;

jpzwarte

import { ListKeyController, ListKeyControllerOption } from './list-key-controller';

export interface FocusableOption extends ListKeyControllerOption {
  /** Focuses the `FocusableOption`. */
  focus(): void;
}

export class FocusKeyController<T> extends ListKeyController<FocusableOption & T> {
  setActiveItem(index: number): void {
    super.setActiveItem(index);

jpzwarte

          <dna-popover
            onPopoverChange={(event: CustomEvent<boolean>) => this.onPopoverChange(event)}
            id={this.popoverId}
            placement="right"
          >
            <dna-shell-menu-popover label={this.label}>
              <dna-portal ref={(el: HTMLDnaPortalElement) => (this.portalElement = el)}>
                <slot></slot>
              </dna-portal>
            </dna-shell-menu-popover>

jpzwarte

• input in shadow dom workaround
• <form> API is not very DX, add helpers to make it more friendly:
  • register custom control events
  • value/getValue @Prop/@Method?
  • validation

export type Orientation = 'horizontal' | 'vertical';

export interface FormControl {

jpzwarte

My stencil + storybook setup

1. Setup your stencil project as usual
2. Add storybook: npx -p @storybook/cli sb init --type react (we use react so you can use JSX inside your stories)
3. Add required deps: npm add @babel/plugin-syntax-import-meta @open-wc/webpack-import-meta-loader webpack-merge -D
4. preview.js:

import { defineCustomElements } from "../dist/esm/loader";

jpzwarte

  constructor(@Inject(DOCUMENT) private document: any) {
    this.style = this.document.createElement('style');
    this.style.id = 'theme';

    this.document.head.appendChild(this.style);
  }

  initialize(): Promise<void> {
    this._theme = 'magister';

jpzwarte

import { convertMenuPositionToConnectedPositions, MenuPositionValue } from './menu-position';
import { ConnectedPosition } from '@angular/cdk/overlay';

interface TestPosition {
  side: MenuPositionValue,
  align: MenuPositionValue,
  positions: ConnectedPosition[]
}

const POSITIONS: TestPosition[] = [

jpzwarte

// webpack.vendor.js
module.exports = {
  entry: {
    vendor: [
      'angular',
      'jquery',
      'jquery-ui/ui/position'
    ]
  },
  externals: {