Component Library scaffolding (#625)

components/src/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-root",
+  template: "",
+})
+export class AppComponent {
+  title = "components";
+}

components/src/app/app.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, CommonModule],
+  providers: [{ provide: "WINDOW", useValue: window }],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

components/src/badge/badge.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from "@angular/core";
+
+type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+
+const styles: Record<BadgeTypes, string[]> = {
+  primary: ["tw-bg-primary-500", "hover:tw-bg-primary-700"],
+  secondary: ["tw-bg-secondary-500", "hover:tw-bg-secondary-700"],
+  success: ["tw-bg-success-500", "hover:tw-bg-success-700"],
+  danger: ["tw-bg-danger-500", "hover:tw-bg-danger-700"],
+  warning: ["tw-bg-warning-500", "hover:tw-bg-warning-700"],
+  info: ["tw-bg-info-500", "hover:tw-bg-info-700"],
+};
+
+@Component({
+  selector: "bit-badge",
+  template: `<span [ngClass]="classes"><ng-content></ng-content></span>`,
+})
+export class BadgeComponent {
+  @Input()
+  type: BadgeTypes = "primary";
+
+  get classes() {
+    return [
+      "tw-inline-block",
+      "tw-py-0.5",
+      "tw-px-1",
+      "tw-font-bold",
+      "tw-leading-none",
+      "tw-text-center",
+      "tw-text-contrast",
+      "tw-align-baseline",
+      "tw-rounded",
+      "tw-border-collapse",
+      "tw-box-border",
+      "tw-whitespace-no-wrap",
+      "tw-text-xs",
+    ].concat(styles[this.type]);
+  }
+}

components/src/badge/badge.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { BadgeComponent } from "./badge.component";
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [BadgeComponent],
+  declarations: [BadgeComponent],
+})
+export class BadgeModule {}

components/src/badge/badge.stories.ts

@@ -0,0 +1,46 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { BadgeComponent } from "./badge.component";
+
+export default {
+  title: "Jslib/Badge",
+  component: BadgeComponent,
+  args: {
+    type: "primary",
+  },
+} as Meta;
+
+const Template: Story<BadgeComponent> = (args: BadgeComponent) => ({
+  props: args,
+  template: `
+    <span class="tw-text-main">Test </span><bit-badge [type]="type">Content</bit-badge>
+  `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  type: "secondary",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  type: "success",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  type: "danger",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: "warning",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  type: "info",
+};

components/src/badge/index.ts

@@ -0,0 +1,2 @@
+export * from "./badge.component";
+export * from "./badge.module";

components/src/button/Button.stories.ts

@@ -0,0 +1,49 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { ButtonComponent } from "./button.component";
+
+// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+export default {
+  title: "Jslib/Button",
+  component: ButtonComponent,
+  args: {
+    buttonType: "primary",
+  },
+  // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
+  props: args,
+  template: `<button bit-button [buttonType]="buttonType" [block]="block">Test</button>`,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+Primary.args = {
+  buttonType: "primary",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  buttonType: "secondary",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  buttonType: "danger",
+};
+
+const DisabledTemplate: Story = (args) => ({
+  props: args,
+  template: `
+    <button bit-button disabled buttonType="primary" class="tw-mr-2">Primary</button>
+    <button bit-button disabled buttonType="secondary" class="tw-mr-2">Secondary</button>
+    <button bit-button disabled buttonType="danger" class="tw-mr-2">Danger</button>
+  `,
+});
+
+export const Disabled = DisabledTemplate.bind({});
+Disabled.args = {
+  size: "small",
+};

components/src/button/button.component.spec.ts

@@ -0,0 +1,57 @@
+import { Component } from "@angular/core";
+import { TestBed, waitForAsync } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { ButtonModule } from "./index";
+
+describe("Button", () => {
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [ButtonModule],
+        declarations: [TestApp],
+      });
+
+      TestBed.compileComponents();
+    })
+  );
+
+  it("should apply classes based on type", () => {
+    const fixture = TestBed.createComponent(TestApp);
+
+    const testAppComponent: TestApp = fixture.debugElement.componentInstance;
+    const buttonDebugElement = fixture.debugElement.query(By.css("button"));
+    const linkDebugElement = fixture.debugElement.query(By.css("a"));
+
+    testAppComponent.buttonType = "primary";
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
+
+    testAppComponent.buttonType = "secondary";
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+
+    testAppComponent.buttonType = "danger";
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
+
+    testAppComponent.buttonType = null;
+    fixture.detectChanges();
+    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+    expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
+  });
+});
+
+@Component({
+  selector: "test-app",
+  template: `
+    <button type="button" bit-button [buttonType]="buttonType">Button</button>
+    <a href="#" bit-button [buttonType]="buttonType"> Link </a>
+  `,
+})
+class TestApp {
+  buttonType: string;
+}

components/src/button/button.component.ts

@@ -0,0 +1,77 @@
+import { Input, HostBinding, OnChanges, Directive } from "@angular/core";
+
+export type ButtonTypes = "primary" | "secondary" | "danger";
+
+const buttonStyles: Record<ButtonTypes, string> = {
+  primary: [
+    "tw-border-primary-500",
+    "tw-bg-primary-500",
+    "!tw-text-contrast",
+    "hover:tw-bg-primary-700",
+    "hover:tw-border-primary-700",
+    "focus:tw-bg-primary-700",
+    "focus:tw-border-primary-700",
+  ].join(" "),
+  secondary: [
+    "tw-bg-transparent",
+    "tw-border-text-muted",
+    "!tw-text-muted",
+    "hover:tw-bg-secondary-500",
+    "hover:tw-border-secondary-500",
+    "hover:tw-text-contrast",
+    "focus:tw-bg-secondary-500",
+    "focus:tw-border-secondary-500",
+    "focus:tw-text-contrast",
+  ].join(" "),
+  danger: [
+    "tw-bg-transparent",
+    "tw-border-danger-500",
+    "!tw-text-danger",
+    "hover:tw-bg-danger-500",
+    "hover:tw-border-danger-500",
+    "hover:tw-text-contrast",
+    "focus:tw-bg-danger-500",
+    "focus:tw-border-danger-500",
+    "focus:tw-text-contrast",
+  ].join(" "),
+};
+
+@Directive({
+  selector: "button[bit-button], a[bit-button]",
+})
+export class ButtonComponent implements OnChanges {
+  @HostBinding("class") @Input("class") classList = "";
+
+  @Input()
+  buttonType: ButtonTypes = "secondary";
+
+  @Input()
+  block = false;
+
+  ngOnChanges() {
+    this.classList = this.classes.join(" ");
+  }
+
+  get classes(): string[] {
+    return [
+      "tw-font-semibold",
+      "tw-py-1.5",
+      "tw-px-3",
+      "tw-rounded",
+      "tw-transition",
+      "tw-border",
+      "tw-border-solid",
+      "tw-text-center",
+      "hover:tw-no-underline",
+      "disabled:tw-bg-secondary-100",
+      "disabled:tw-border-secondary-100",
+      "disabled:!tw-text-main",
+      "focus:tw-outline-none",
+      "focus:tw-ring",
+      "focus:tw-ring-offset-2",
+      "focus:tw-ring-primary-700",
+      this.block ? "tw-w-full tw-block" : "",
+      buttonStyles[this.buttonType ?? "secondary"],
+    ];
+  }
+}

components/src/button/button.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { ButtonComponent } from "./button.component";
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [ButtonComponent],
+  declarations: [ButtonComponent],
+})
+export class ButtonModule {}

components/src/button/index.ts

@@ -0,0 +1,2 @@
+export * from "./button.component";
+export * from "./button.module";

components/src/callout/callout.component.html

@@ -0,0 +1,14 @@
+<div
+  class="tw-py-3 tw-px-5 tw-mb-4 tw-leading-5 tw-rounded tw-bg-background-elevation tw-border tw-border-secondary-300 tw-border-solid tw-box-border tw-border-l-8 tw-text-main"
+  [ngClass]="calloutClass"
+>
+  <h3
+    class="tw-mt-0 tw-mb-2 tw-text-base tw-font-bold tw-uppercase"
+    [ngClass]="headerClass"
+    *ngIf="title"
+  >
+    <i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
+    {{ title }}
+  </h3>
+  <ng-content></ng-content>
+</div>

components/src/callout/callout.component.spec.ts

@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { I18nMockService } from "src/utils/i18n-mock.service";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+import { CalloutComponent } from ".";
+
+describe("Callout", () => {
+  let component: CalloutComponent;
+  let fixture: ComponentFixture<CalloutComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CalloutComponent],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () =>
+            new I18nMockService({
+              warning: "Warning",
+              error: "Error",
+            }),
+        },
+      ],
+    });
+    fixture = TestBed.createComponent(CalloutComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe("default state", () => {
+    it("success", () => {
+      component.type = "success";
+      fixture.detectChanges();
+      expect(component.title).toBeUndefined();
+      expect(component.icon).toBe("bwi-check");
+    });
+
+    it("info", () => {
+      component.type = "info";
+      fixture.detectChanges();
+      expect(component.title).toBeUndefined();
+      expect(component.icon).toBe("bwi-info-circle");
+    });
+
+    it("warning", () => {
+      component.type = "warning";
+      fixture.detectChanges();
+      expect(component.title).toBe("Warning");
+      expect(component.icon).toBe("bwi-exclamation-triangle");
+    });
+
+    it("danger", () => {
+      component.type = "danger";
+      fixture.detectChanges();
+      expect(component.title).toBe("Error");
+      expect(component.icon).toBe("bwi-error");
+    });
+  });
+});

components/src/callout/callout.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+type CalloutTypes = "success" | "info" | "warning" | "danger";
+
+const defaultIcon: Record<CalloutTypes, string> = {
+  success: "bwi-check",
+  info: "bwi-info-circle",
+  warning: "bwi-exclamation-triangle",
+  danger: "bwi-error",
+};
+
+const defaultI18n: Partial<Record<CalloutTypes, string>> = {
+  warning: "warning",
+  danger: "error",
+};
+
+@Component({
+  selector: "bit-callout",
+  templateUrl: "callout.component.html",
+})
+export class CalloutComponent implements OnInit {
+  @Input() type: CalloutTypes = "info";
+  @Input() icon: string;
+  @Input() title: string;
+  @Input() useAlertRole = false;
+
+  constructor(private i18nService: I18nService) {}
+
+  ngOnInit() {
+    this.icon ??= defaultIcon[this.type];
+    if (this.title == null && defaultI18n[this.type] != null) {
+      this.title = this.i18nService.t(defaultI18n[this.type]);
+    }
+  }
+
+  get calloutClass() {
+    switch (this.type) {
+      case "danger":
+        return "tw-border-l-danger-500";
+      case "info":
+        return "tw-border-l-info-500";
+      case "success":
+        return "tw-border-l-success-500";
+      case "warning":
+        return "tw-border-l-warning-500";
+    }
+  }
+
+  get headerClass() {
+    switch (this.type) {
+      case "danger":
+        return "tw-text-danger";
+      case "info":
+        return "tw-text-info";
+      case "success":
+        return "tw-text-success";
+      case "warning":
+        return "tw-text-warning";
+    }
+  }
+}

components/src/callout/callout.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { CalloutComponent } from "./callout.component";
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [CalloutComponent],
+  declarations: [CalloutComponent],
+})
+export class CalloutModule {}

components/src/callout/callout.stories.ts

@@ -0,0 +1,59 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { CalloutComponent } from "./callout.component";
+
+export default {
+  title: "Jslib/Callout",
+  component: CalloutComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              warning: "Warning",
+              error: "Error",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  args: {
+    type: "warning",
+  },
+} as Meta;
+
+const Template: Story<CalloutComponent> = (args: CalloutComponent) => ({
+  props: args,
+  template: `
+    <bit-callout [type]="type" [title]="title">Content</bit-callout>
+  `,
+});
+
+export const Success = Template.bind({});
+Success.args = {
+  type: "success",
+  title: "Success",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  type: "info",
+  title: "Info",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: "warning",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  type: "danger",
+};

components/src/callout/index.ts

@@ -0,0 +1,2 @@
+export * from "./callout.module";
+export * from "./callout.component";

components/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Components</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

components/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./badge";
+export * from "./button";
+export * from "./callout";

components/src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+
+import { AppModule } from "./app/app.module";
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err)); // eslint-disable-line

components/src/polyfills.ts

@@ -0,0 +1,52 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import "zone.js"; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

components/src/stories/Introduction.stories.mdx

@@ -0,0 +1,195 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Jslib/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

components/src/styles.css

@@ -0,0 +1,11 @@
+/* You can add global styles to this file, and also import other style files */
+
+@import "./tw-theme.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-size: 14px;
+}

components/src/styles.scss

@@ -0,0 +1,42 @@
+@import "../../angular/src/scss/webfonts.css";
+@import "./../../../src/scss/variables";
+@import "../../angular/src/scss/bwicons/styles/style.scss";
+@import "../../angular/src/scss/icons.scss";
+
+@import "~bootstrap/scss/_functions";
+@import "~bootstrap/scss/_variables";
+@import "~bootstrap/scss/_mixins";
+@import "~bootstrap/scss/_root";
+@import "~bootstrap/scss/_reboot";
+@import "~bootstrap/scss/_type";
+@import "~bootstrap/scss/_images";
+@import "~bootstrap/scss/_code";
+@import "~bootstrap/scss/_grid";
+@import "~bootstrap/scss/_tables";
+@import "~bootstrap/scss/_forms";
+@import "~bootstrap/scss/_buttons";
+@import "~bootstrap/scss/_transitions";
+@import "~bootstrap/scss/_dropdown";
+@import "~bootstrap/scss/_button-group";
+@import "~bootstrap/scss/_input-group";
+@import "~bootstrap/scss/_custom-forms";
+@import "~bootstrap/scss/_nav";
+@import "~bootstrap/scss/_navbar";
+@import "~bootstrap/scss/_card";
+@import "~bootstrap/scss/_breadcrumb";
+@import "~bootstrap/scss/_pagination";
+@import "~bootstrap/scss/_badge";
+@import "~bootstrap/scss/_jumbotron";
+@import "~bootstrap/scss/_alert";
+@import "~bootstrap/scss/_progress";
+@import "~bootstrap/scss/_media";
+@import "~bootstrap/scss/_list-group";
+@import "~bootstrap/scss/_close";
+//@import "~bootstrap/scss/_toasts";
+@import "~bootstrap/scss/_modal";
+@import "~bootstrap/scss/_tooltip";
+@import "~bootstrap/scss/_popover";
+@import "~bootstrap/scss/_carousel";
+@import "~bootstrap/scss/_spinners";
+@import "~bootstrap/scss/_utilities";
+@import "~bootstrap/scss/_print";

components/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+// eslint-disable-next-line
+import "zone.js/testing";
+
+import { getTestBed } from "@angular/core/testing";
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+// Then we find all the tests.
+const context = require.context("./", true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

components/src/tw-theme.css

@@ -0,0 +1,64 @@
+:root {
+  --color-background: #ffffff;
+  --color-background-elevation: #fbfbfb;
+
+  --color-primary-300: #6795e8;
+  --color-primary-500: #175ddc;
+  --color-primary-700: #1252a3;
+
+  --color-secondary-100: #f0f0f0;
+  --color-secondary-300: #ced4dc;
+  --color-secondary-500: #89929f;
+  --color-secondary-700: #212529;
+
+  --color-success-500: #017e45;
+  --color-success-700: #003f23;
+
+  --color-danger-500: #c83522;
+  --color-danger-700: #641a11;
+
+  --color-warning-500: #8b6609;
+  --color-warning-700: #463304;
+
+  --color-info-500: #555555;
+  --color-info-700: #2b2b2b;
+
+  --color-text-main: #212529;
+  --color-text-muted: #6d757e;
+  --color-text-contrast: #ffffff;
+  --tw-ring-offset-color: #1f242e;
+}
+
+.theme_light {
+  /* should be left empty as white is the default */
+}
+
+.theme_dark {
+  --color-background: #1f242e;
+  --color-background-elevation: #161c26;
+
+  --color-primary-300: #175ddc;
+  --color-primary-500: #6a99f0;
+  --color-primary-700: #b4ccf9;
+
+  --color-secondary-100: #2f343d;
+  --color-secondary-300: #6e7689;
+  --color-secondary-500: #bac0ce;
+  --color-secondary-700: #ffffff;
+
+  --color-success-500: #52e07c;
+  --color-success-700: #a8efbe;
+
+  --color-danger-500: #ff8d85;
+  --color-danger-700: #ffbfbb;
+
+  --color-warning-500: #ffeb66;
+  --color-warning-700: #fff5b3;
+
+  --color-info-500: #a4b0c6;
+  --color-info-700: #d1d7e2;
+
+  --color-text-main: #ffffff;
+  --color-text-muted: #bac0ce;
+  --color-text-contrast: #191e26;
+}

components/src/utils/i18n-mock.service.ts

@@ -0,0 +1,19 @@
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+export class I18nMockService implements I18nService {
+  locale: string;
+  supportedTranslationLocales: string[];
+  translationLocale: string;
+  collator: Intl.Collator;
+  localeNames: Map<string, string>;
+
+  constructor(private lookupTable: Record<string, string>) {}
+
+  t(id: string, p1?: string, p2?: string, p3?: string) {
+    return this.lookupTable[id];
+  }
+
+  translate(id: string, p1?: string, p2?: string, p3?: string) {
+    return this.t(id, p1, p2, p3);
+  }
+}