@jsfour/root-ui 0.0.1

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@jsfour/root-ui",
+  "version": "0.0.1",
+  "description": "Unofficial stencil UI components for Root",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/stencil-library/stencil-library.esm.js",
+  "peerDependencies": {
+    "@stencil/core": "^4.7.2",
+    "@stencil/sass": "^3.0.7"
+  },
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "keywords": [],
+  "author": "",
+  "type": "commonjs",
+  "dependencies": {
+    "@stencil/react-output-target": "^1.2.0"
+  }
+}

package/src/components/badge/badge-variation.enum.ts

@@ -0,0 +1,9 @@
+
+export enum RootBadgeVariation {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    TERTIARY = 'tertiary',
+    OUTLINE = 'outline',
+    MUTED = 'muted',
+    DANGER = 'danger',
+}

package/src/components/badge/badge.scss

@@ -0,0 +1,53 @@
+.root-badge {
+    display: inline-block;
+    color: var(--rootsdk-text-primary);
+    font-size: 0.625rem;
+    line-height: 1;
+    border-radius: 1rem;
+    padding: 0.53125rem 0.75rem 0.5rem;
+    min-width: 1.5rem;
+    text-transform: uppercase;
+    font-weight: bold;
+    background-color: transparent;
+    text-align: center;
+
+    &--primary {
+        background-color: var(--rootsdk-brand-primary);
+        color: var(--rootsdk-text-white);
+    }
+
+    &--secondary {
+        background-color: var(--rootsdk-brand-secondary);
+        color: var(--rootsdk-input);
+    }
+
+    &--tertiary {
+        background-color: var(--rootsdk-brand-tertiary);
+        color: var(--rootsdk-input);
+    }
+
+    &--danger {
+        background-color: var(--rootsdk-error);
+        color: var(--rootsdk-text-white);
+    }
+
+    &--outline { 
+        background: transparent; 
+        border: var(--border-width-m) solid var(--rootsdk-text-tertiary); 
+        color: var(--rootsdk-text-primary);
+    }
+
+    &--muted { 
+        background-color: var(--rootsdk-muted);
+        color: var(--rootsdk-text-white);
+    }
+
+    &--standard { 
+        background: var(--rootsdk-text-primary);
+        color: var(--rootsdk-background-tertiary); 
+    }
+
+    &--full-width {
+        width: 100%;
+    }
+}

package/src/components/badge/badge.tsx

@@ -0,0 +1,42 @@
+import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';
+import { randomIdGenerator } from '../../global/utils/randomIdGenerator';
+import { RootBadgeVariation } from './badge-variation.enum';
+
+@Component({
+    tag: 'root-badge',
+    styleUrl: 'badge.scss',
+    shadow: true
+})
+export class RootBadge {
+    @Prop() badgeId: string = randomIdGenerator('root-badge');
+
+    @Prop() variation: RootBadgeVariation = RootBadgeVariation.PRIMARY;
+
+    @Prop() fullWidth: boolean = false;
+
+    @Prop() disabled: boolean = false;
+
+    @Event() rootBadgeClick: EventEmitter<MouseEvent>;
+
+    clickHandler(e: MouseEvent) {
+        this.rootBadgeClick.emit(e);
+    }
+    
+    render() {
+        const classes = {
+            'root-badge': true,
+            [`root-badge--${this.variation}`]: !!this.variation,
+            'root-badge--full-width': this.fullWidth,
+        };
+
+        return (
+            <span
+                id={this.badgeId}
+                class={classes}
+                onClick={(e) => this.clickHandler(e)}
+            >
+                <slot></slot>
+            </span>
+        );
+    }
+}

package/src/components/badge/readme.md

@@ -0,0 +1,27 @@
+# root-badge
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute    | Description | Type                                                                                                                                                                               | Default                           |
+| ----------- | ------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| `badgeId`   | `badge-id`   |             | `string`                                                                                                                                                                           | `randomIdGenerator('root-badge')` |
+| `disabled`  | `disabled`   |             | `boolean`                                                                                                                                                                          | `false`                           |
+| `fullWidth` | `full-width` |             | `boolean`                                                                                                                                                                          | `false`                           |
+| `variation` | `variation`  |             | `RootBadgeVariation.DANGER \| RootBadgeVariation.MUTED \| RootBadgeVariation.OUTLINE \| RootBadgeVariation.PRIMARY \| RootBadgeVariation.SECONDARY \| RootBadgeVariation.TERTIARY` | `RootBadgeVariation.PRIMARY`      |
+
+
+## Events
+
+| Event            | Description | Type                      |
+| ---------------- | ----------- | ------------------------- |
+| `rootBadgeClick` |             | `CustomEvent<MouseEvent>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/src/components/banner/banner-variation.enum.ts

@@ -0,0 +1,9 @@
+
+export enum RootBannerVariation {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    TERTIARY = 'tertiary',
+    DANGER = 'danger',
+    WARNING = 'warning',
+    SUCCESS = 'success',
+}

package/src/components/banner/banner.scss

@@ -0,0 +1,22 @@
+.root-banner {
+    text-align: center;
+    color: var(--rootsdk-text-primary);
+    padding: .4rem;
+
+    &--primary {
+        background-color: var(--rootsdk-brand-primary);
+        color: var(--rootsdk-text-white);
+    }
+
+    &--danger {
+        background-color: var(--rootsdk-error);
+    }
+
+    &--warning {
+        background-color: var(--rootsdk-warning);
+    }
+
+    &--success {
+        background-color: var(--rootsdk-brand-tertiary);
+    }
+}

package/src/components/banner/banner.tsx

@@ -0,0 +1,41 @@
+import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';
+import { randomIdGenerator } from '../../global/utils/randomIdGenerator';
+import { RootBannerVariation } from './banner-variation.enum';
+
+@Component({
+    tag: 'root-banner',
+    styleUrl: 'banner.scss',
+    shadow: true
+})
+export class RootBanner {
+    @Prop() bannerId: string = randomIdGenerator('root-banner');
+
+    @Prop() variation: RootBannerVariation = RootBannerVariation.PRIMARY;
+
+    @Prop() fullWidth: boolean = false;
+
+    @Prop() disabled: boolean = false;
+
+    @Event() rootBannerClick: EventEmitter<MouseEvent>;
+
+    clickHandler(e: MouseEvent) {
+        this.rootBannerClick.emit(e);
+    }
+    
+    render() {
+        const classes = {
+            'root-banner': true,
+            [`root-banner--${this.variation}`]: !!this.variation
+        };
+
+        return (
+            <div
+                id={this.bannerId}
+                class={classes}
+                onClick={(e) => this.clickHandler(e)}
+            >
+                <slot></slot>
+            </div>
+        );
+    }
+}

package/src/components/banner/readme.md

@@ -0,0 +1,27 @@
+# root-banner
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute    | Description | Type                                                                                                                                                                                       | Default                            |
+| ----------- | ------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- |
+| `bannerId`  | `banner-id`  |             | `string`                                                                                                                                                                                   | `randomIdGenerator('root-banner')` |
+| `disabled`  | `disabled`   |             | `boolean`                                                                                                                                                                                  | `false`                            |
+| `fullWidth` | `full-width` |             | `boolean`                                                                                                                                                                                  | `false`                            |
+| `variation` | `variation`  |             | `RootBannerVariation.DANGER \| RootBannerVariation.PRIMARY \| RootBannerVariation.SECONDARY \| RootBannerVariation.SUCCESS \| RootBannerVariation.TERTIARY \| RootBannerVariation.WARNING` | `RootBannerVariation.PRIMARY`      |
+
+
+## Events
+
+| Event             | Description | Type                      |
+| ----------------- | ----------- | ------------------------- |
+| `rootBannerClick` |             | `CustomEvent<MouseEvent>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/src/components/breadcrumbs/breadcrumbs.scss

@@ -0,0 +1,57 @@
+.root-breadcrumbs {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0.5rem;
+    align-items: center;
+
+    .root-breadcrumbs-item {
+        display: flex;
+        align-items: center;
+
+        &:not(:last-child)::after {
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>') center;
+            content: " ";
+            display: inline-block;
+            filter: invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);
+            height: 0.5rem;
+            margin: 0 0.5rem;
+            opacity: .5;
+            width: 0.5rem;
+        }
+
+        &--active {
+            span {
+                background: var(--rootsdk-highlight-normal);
+                color: var(--rootsdk-text-tertiary);
+                border-radius: 1.5rem;
+                padding: 0.32rem 0.64rem;
+                font-size: 0.8rem;
+            }
+        }
+
+        .root-breadcrumbs-link {
+            text-decoration: underline;
+            cursor: pointer;
+            color: var(--rootsdk-text-primary);
+            padding: 0.32rem 0.64rem;
+            border-radius: 1.5rem;
+            transition-duration: 200ms;
+            transition-property: background, color;
+            font-size: 0.8rem;
+
+            .root-icon {
+                height: 1.1rem;
+                position: relative;
+                top: 1px;
+                vertical-align: top;
+                width: 1.1rem;
+            }
+
+            &:hover {
+                background-color: var(--rootsdk-highlight-normal);
+            }
+        }
+    }
+}

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,74 @@
+import { Component, h, Prop, State, Element, EventEmitter, Event } from '@stencil/core';
+import { randomIdGenerator } from '../../global/utils/randomIdGenerator';
+import { HTMLStencilElement } from '@stencil/sass/dist/declarations';
+
+@Component({
+    tag: 'root-breadcrumbs',
+    styleUrl: 'breadcrumbs.scss',
+    shadow: true
+})
+export class RootBreadcrumbs {
+    @Element() hostElement: HTMLStencilElement;
+
+    @Prop() breadcrumbsId: string = randomIdGenerator('root-breadcrumbs');
+
+    @State() linkItems = [];
+
+    @Event() linkClick: EventEmitter;
+
+    componentDidLoad() {
+        this.getBreadcrumbs();
+    }
+
+    getBreadcrumbs() {
+        const elements = this.hostElement.children;
+
+        if (!elements || elements?.length <= 0) {
+            console.warn(`The slot contains no link elements.`, this.hostElement);
+            return;
+        }
+
+        this.linkItems = [...elements]
+            .filter((element) => element.tagName.toLowerCase() === 'a')
+            .map((element) => {
+                return {
+                    text: element.textContent,
+                    href: element.getAttribute('href') || ''
+                };
+            });
+    }
+
+    clickHandler(e: Event) {
+        this.linkClick.emit(e);
+    }
+    
+    render() {
+        return (
+            <ol 
+                class={'root-breadcrumbs'} 
+                id={this.breadcrumbsId}
+            >
+                {this.linkItems.map((item, index) => {
+                    const isLast = index === this.linkItems.length - 1;
+                    
+                    return (
+                        <li class={{'root-breadcrumbs-item': true, 'root-breadcrumbs-item--active': isLast}}>
+                            {isLast ? (
+                                <span>{item.text}</span>
+                            ) : (  
+                                <a
+                                    class="root-breadcrumbs-link"
+                                    onClick={(e) => this.clickHandler(e)}
+                                    href={item.href}
+                                >
+                                    {item.text}
+                                </a>
+                            )}
+                        </li>
+                    );
+                })}
+
+            </ol>
+        );
+    }
+}

package/src/components/breadcrumbs/readme.md

@@ -0,0 +1,24 @@
+# root-breadcrumbs
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute        | Description | Type     | Default                                 |
+| --------------- | ---------------- | ----------- | -------- | --------------------------------------- |
+| `breadcrumbsId` | `breadcrumbs-id` |             | `string` | `randomIdGenerator('root-breadcrumbs')` |
+
+
+## Events
+
+| Event       | Description | Type               |
+| ----------- | ----------- | ------------------ |
+| `linkClick` |             | `CustomEvent<any>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/src/components/button/button-size.enum.ts

@@ -0,0 +1,5 @@
+
+export enum RootButtonSize {
+  SMALL = 'small',
+  LARGE = 'large'
+}

package/src/components/button/button-type.enum.ts

@@ -0,0 +1,5 @@
+export enum RootButtonType {
+  BUTTON = 'button',
+  SUBMIT = 'submit',
+  RESET = 'reset'
+}

package/src/components/button/button-variation.enum.ts

@@ -0,0 +1,10 @@
+
+export enum RootButtonVariation {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  OUTLINE = 'outline',
+  SUBMIT = 'submit',
+  DANGER = 'danger',
+  CANCEL = 'cancel',
+}

package/src/components/button/button.scss

@@ -0,0 +1,73 @@
+.root-button {
+    height: 2rem;
+    border-radius: 1.5rem;
+    padding: 0 1.75rem;
+    min-width: fit-content;
+    background-color: transparent;
+    color: var(--rootsdk-text-primary);
+    outline: none;
+    font-size: 1rem;
+    border: none;
+    cursor: pointer;
+    border: 1px solid transparent;
+    text-transform: capitalize;
+
+    &--submit { 
+        background: var(--rootsdk-text-primary);
+        color: var(--rootsdk-background-tertiary); 
+    }
+    
+    &--danger { 
+        background: var(--rootsdk-error); 
+        color: var(--rootsdk-text-white); 
+    }
+
+    &--primary { 
+        background: var(--rootsdk-brand-primary);
+        color: var(--rootsdk-text-white); 
+    }
+
+    &--secondary { 
+        background: var(--rootsdk-brand-secondary);
+        color: var(--rootsdk-input); 
+    }
+
+    &--tertiary { 
+        background: var(--rootsdk-brand-tertiary);
+        color: var(--rootsdk-input); 
+    }
+
+    &--outline {
+        background: transparent;
+        border: 0.0625rem solid var(--rootsdk-text-tertiary); 
+        color: var(--rootsdk-text-primary); 
+    }
+
+    &--cancel {
+        background: transparent;
+        border: 0.0625rem solid var(--rootsdk-text-tertiary);
+        color: var(--rootsdk-text-primary); 
+    }
+
+    &--large {
+        height: 3.25rem;
+    }
+
+    &[disabled] {
+        opacity: 0.6;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    &--full-width {
+        width: 100%;
+    }
+
+    &:hover {
+        opacity: 80%;
+    }
+
+    &:active {
+        transform: scale(.98);
+    }
+}

package/src/components/button/button.tsx

@@ -0,0 +1,52 @@
+import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';
+import { randomIdGenerator } from '../../global/utils/randomIdGenerator';
+import { RootButtonVariation } from './button-variation.enum';
+import { RootButtonSize } from './button-size.enum';
+import { RootButtonType } from './button-type.enum';
+
+@Component({
+    tag: 'root-button',
+    styleUrl: 'button.scss',
+    shadow: true
+})
+export class RootButton {
+    @Prop() buttonId: string = randomIdGenerator('root-button');
+
+    @Prop() size: RootButtonSize = RootButtonSize.SMALL;
+
+    @Prop() variation: RootButtonVariation = RootButtonVariation.PRIMARY;
+
+    @Prop() type: RootButtonType = RootButtonType.BUTTON;
+
+    @Prop() fullWidth: boolean = false;
+
+    @Prop() disabled: boolean = false;
+
+    @Event() rootButtonClick: EventEmitter<MouseEvent>;
+
+    clickHandler(e: MouseEvent) {
+        this.rootButtonClick.emit(e);
+    }
+
+    
+    render() {
+        const classes = {
+            'root-button': true,
+            [`root-button--${this.size}`]: !!this.size,
+            [`root-button--${this.variation}`]: !!this.variation,
+            'root-button--full-width': this.fullWidth,
+        };
+
+        return (
+            <button
+                id={this.buttonId}
+                class={classes} 
+                disabled={this.disabled}
+                type={this.type}
+                onClick={(e) => this.clickHandler(e)}
+            >
+                <slot></slot>
+            </button>
+        );
+    }
+}

package/src/components/button/readme.md

@@ -0,0 +1,29 @@
+# root-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute    | Description | Type                                                                                                                                                                                                                    | Default                            |
+| ----------- | ------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `buttonId`  | `button-id`  |             | `string`                                                                                                                                                                                                                | `randomIdGenerator('root-button')` |
+| `disabled`  | `disabled`   |             | `boolean`                                                                                                                                                                                                               | `false`                            |
+| `fullWidth` | `full-width` |             | `boolean`                                                                                                                                                                                                               | `false`                            |
+| `size`      | `size`       |             | `RootButtonSize.LARGE \| RootButtonSize.SMALL`                                                                                                                                                                          | `RootButtonSize.SMALL`             |
+| `type`      | `type`       |             | `RootButtonType.BUTTON \| RootButtonType.RESET \| RootButtonType.SUBMIT`                                                                                                                                                | `RootButtonType.BUTTON`            |
+| `variation` | `variation`  |             | `RootButtonVariation.CANCEL \| RootButtonVariation.DANGER \| RootButtonVariation.OUTLINE \| RootButtonVariation.PRIMARY \| RootButtonVariation.SECONDARY \| RootButtonVariation.SUBMIT \| RootButtonVariation.TERTIARY` | `RootButtonVariation.PRIMARY`      |
+
+
+## Events
+
+| Event             | Description | Type                      |
+| ----------------- | ----------- | ------------------------- |
+| `rootButtonClick` |             | `CustomEvent<MouseEvent>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './button/button';
+export * from './badge/badge';
+export * from './banner/banner';
+export * from './breadcrumbs/breadcrumbs';
+export * from './input/input';
+
+export * from './list/list';

package/src/components/input/input-type.enum.ts

@@ -0,0 +1,18 @@
+
+export enum RootInputType {
+    COLOR = 'color',
+    DATE = 'date',
+    EMAIL = 'email',
+    FILE = 'file',
+    IMAGE = 'image',
+    MONTH = 'month',
+    NUMBER = 'number',
+    PASSWORD = 'password',
+    SEARCH = 'search',
+    SUBMIT = 'submit',
+    TEL = 'tel',
+    TEXT = 'text',
+    TIME = 'time',
+    URL = 'url',
+    WEEK = 'week',
+}