@jsfour/root-ui 0.0.1 → 0.0.3

package/dist/types/enums.d.ts

@@ -1,3 +1,7 @@
 export * from './components/button/button-size.enum';
 export * from './components/button/button-type.enum';
 export * from './components/button/button-variation.enum';
+export * from './components/badge/badge-variation.enum';
+export * from './components/banner/banner-variation.enum';
+export * from './components/input/input-type.enum';
+export * from './components/input/input-type.enum';

package/dist/types/global/icons/icons.d.ts

@@ -0,0 +1,439 @@
+export declare const rootIcon: {
+    "root-icon-add": {
+        IconComponent(): any;
+    };
+    "root-icon-close": {
+        IconComponent(): any;
+    };
+    "root-icon-remove": {
+        IconComponent(): any;
+    };
+    "root-icon-search": {
+        IconComponent(): any;
+    };
+    "root-icon-pencil": {
+        IconComponent(): any;
+    };
+    "root-icon-settings": {
+        IconComponent(): any;
+    };
+    "root-icon-info": {
+        IconComponent(): any;
+    };
+    "root-icon-lock": {
+        IconComponent(): any;
+    };
+    "root-icon-globe": {
+        IconComponent(): any;
+    };
+    "root-icon-list": {
+        IconComponent(): any;
+    };
+    "root-icon-open": {
+        IconComponent(): any;
+    };
+    "root-icon-share": {
+        IconComponent(): any;
+    };
+    "root-icon-popout": {
+        IconComponent(): any;
+    };
+    "root-icon-refresh": {
+        IconComponent(): any;
+    };
+    "root-icon-down-arrow": {
+        IconComponent(): any;
+    };
+    "root-icon-up-arrow": {
+        IconComponent(): any;
+    };
+    "root-icon-ellipsis-horizontal": {
+        IconComponent(): any;
+    };
+    "root-icon-ellipsis-vertical": {
+        IconComponent(): any;
+    };
+    "root-icon-user": {
+        IconComponent(): any;
+    };
+    "root-icon-add-user": {
+        IconComponent(): any;
+    };
+    "root-icon-remove-user": {
+        IconComponent(): any;
+    };
+    "root-icon-favorite": {
+        IconComponent(): any;
+    };
+    "root-icon-favorite-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-pin": {
+        IconComponent(): any;
+    };
+    "root-icon-pin-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-image": {
+        IconComponent(): any;
+    };
+    "root-icon-notification-bell": {
+        IconComponent(): any;
+    };
+    "root-icon-checkbox-enabled": {
+        IconComponent(): any;
+    };
+    "root-icon-checkbox-disabled": {
+        IconComponent(): any;
+    };
+    "root-icon-checkbox-neutral": {
+        IconComponent(): any;
+    };
+    "root-icon-selected-item-checkbox": {
+        IconComponent(): any;
+    };
+    "root-icon-folder": {
+        IconComponent(): any;
+    };
+    "root-icon-download": {
+        IconComponent(): any;
+    };
+    "root-icon-file-too-large": {
+        IconComponent(): any;
+    };
+    "root-icon-files": {
+        IconComponent(): any;
+    };
+    "root-icon-upload": {
+        IconComponent(): any;
+    };
+    "root-icon-bold": {
+        IconComponent(): any;
+    };
+    "root-icon-italic": {
+        IconComponent(): any;
+    };
+    "root-icon-strikethrough": {
+        IconComponent(): any;
+    };
+    "root-icon-code": {
+        IconComponent(): any;
+    };
+    "root-icon-code-block": {
+        IconComponent(): any;
+    };
+    "root-icon-link": {
+        IconComponent(): any;
+    };
+    "root-icon-send": {
+        IconComponent(): any;
+    };
+    "root-icon-reply": {
+        IconComponent(): any;
+    };
+    "root-icon-attachment": {
+        IconComponent(): any;
+    };
+    "root-icon-emoji": {
+        IconComponent(): any;
+    };
+    "root-icon-gif": {
+        IconComponent(): any;
+    };
+    "root-icon-mention": {
+        IconComponent(): any;
+    };
+    "root-icon-jump": {
+        IconComponent(): any;
+    };
+    "root-icon-mark-as-read": {
+        IconComponent(): any;
+    };
+    "root-icon-play": {
+        IconComponent(): any;
+    };
+    "root-icon-pause": {
+        IconComponent(): any;
+    };
+    "root-icon-stop": {
+        IconComponent(): any;
+    };
+    "root-icon-replay": {
+        IconComponent(): any;
+    };
+    "root-icon-full-screen": {
+        IconComponent(): any;
+    };
+    "root-icon-exit-full-screen": {
+        IconComponent(): any;
+    };
+    "root-icon-volume-high": {
+        IconComponent(): any;
+    };
+    "root-icon-volume-low": {
+        IconComponent(): any;
+    };
+    "root-icon-volume-off": {
+        IconComponent(): any;
+    };
+    "root-icon-category-art": {
+        IconComponent(): any;
+    };
+    "root-icon-category-collaboration": {
+        IconComponent(): any;
+    };
+    "root-icon-category-education": {
+        IconComponent(): any;
+    };
+    "root-icon-category-entertainment": {
+        IconComponent(): any;
+    };
+    "root-icon-category-games": {
+        IconComponent(): any;
+    };
+    "root-icon-category": {
+        IconComponent(): any;
+    };
+    "root-icon-category-music": {
+        IconComponent(): any;
+    };
+    "root-icon-category-science": {
+        IconComponent(): any;
+    };
+    "root-icon-back-arrow": {
+        IconComponent(): any;
+    };
+    "root-icon-forward-arrow": {
+        IconComponent(): any;
+    };
+    "root-icon-chevron-left": {
+        IconComponent(): any;
+    };
+    "root-icon-chevron-right": {
+        IconComponent(): any;
+    };
+    "root-icon-chevron-up": {
+        IconComponent(): any;
+    };
+    "root-icon-chevron-down": {
+        IconComponent(): any;
+    };
+    "root-icon-collapse": {
+        IconComponent(): any;
+    };
+    "root-icon-menu": {
+        IconComponent(): any;
+    };
+    "root-icon-home": {
+        IconComponent(): any;
+    };
+    "root-icon-home-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-check-circle": {
+        IconComponent(): any;
+    };
+    "root-icon-logout": {
+        IconComponent(): any;
+    };
+    "root-icon-help": {
+        IconComponent(): any;
+    };
+    "root-icon-sort": {
+        IconComponent(): any;
+    };
+    "root-icon-mail": {
+        IconComponent(): any;
+    };
+    "root-icon-compass": {
+        IconComponent(): any;
+    };
+    "root-icon-lightbulb": {
+        IconComponent(): any;
+    };
+    "root-icon-phone": {
+        IconComponent(): any;
+    };
+    "root-icon-phone-disconnect": {
+        IconComponent(): any;
+    };
+    "root-icon-camera": {
+        IconComponent(): any;
+    };
+    "root-icon-camera-off": {
+        IconComponent(): any;
+    };
+    "root-icon-camera-off-alert": {
+        IconComponent(): any;
+    };
+    "root-icon-camera-flip": {
+        IconComponent(): any;
+    };
+    "root-icon-video-camera": {
+        IconComponent(): any;
+    };
+    "root-icon-video-camera-off": {
+        IconComponent(): any;
+    };
+    "root-icon-microphone": {
+        IconComponent(): any;
+    };
+    "root-icon-microphone-off": {
+        IconComponent(): any;
+    };
+    "root-icon-microphone-off-alert": {
+        IconComponent(): any;
+    };
+    "root-icon-headphones": {
+        IconComponent(): any;
+    };
+    "root-icon-headphones-off": {
+        IconComponent(): any;
+    };
+    "root-icon-headphones-off-alert": {
+        IconComponent(): any;
+    };
+    "root-icon-screen-share": {
+        IconComponent(): any;
+    };
+    "root-icon-voice": {
+        IconComponent(): any;
+    };
+    "root-icon-add-group": {
+        IconComponent(): any;
+    };
+    "root-icon-add-image": {
+        IconComponent(): any;
+    };
+    "root-icon-folder-open": {
+        IconComponent(): any;
+    };
+    "root-icon-recent-files": {
+        IconComponent(): any;
+    };
+    "root-icon-prohibited": {
+        IconComponent(): any;
+    };
+    "root-icon-color-swatch": {
+        IconComponent(): any;
+    };
+    "root-icon-cloud": {
+        IconComponent(): any;
+    };
+    "root-icon-cloud-off": {
+        IconComponent(): any;
+    };
+    "root-icon-integration": {
+        IconComponent(): any;
+    };
+    "root-icon-rocket": {
+        IconComponent(): any;
+    };
+    "root-icon-signal": {
+        IconComponent(): any;
+    };
+    "root-icon-speaker": {
+        IconComponent(): any;
+    };
+    "root-icon-trophy": {
+        IconComponent(): any;
+    };
+    "root-icon-eye": {
+        IconComponent(): any;
+    };
+    "root-icon-eye-off": {
+        IconComponent(): any;
+    };
+    "root-icon-delete": {
+        IconComponent(): any;
+    };
+    "root-icon-bookmark": {
+        IconComponent(): any;
+    };
+    "root-icon-checkmark": {
+        IconComponent(): any;
+    };
+    "root-icon-heart": {
+        IconComponent(): any;
+    };
+    "root-icon-heart-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-clock": {
+        IconComponent(): any;
+    };
+    "root-icon-undock": {
+        IconComponent(): any;
+    };
+    "root-icon-eye-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-eye-off-outlined": {
+        IconComponent(): any;
+    };
+    "root-icon-notification-active": {
+        IconComponent(): any;
+    };
+    "root-icon-notification-off": {
+        IconComponent(): any;
+    };
+    "root-icon-notification-off-outlined": {
+        IconComponent(): any;
+    };
+    "root-icon-notification-add": {
+        IconComponent(): any;
+    };
+    "root-icon-notification-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-user-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-users": {
+        IconComponent(): any;
+    };
+    "root-icon-users-filled": {
+        IconComponent(): any;
+    };
+    "root-icon-chat": {
+        IconComponent(): any;
+    };
+    "root-icon-message": {
+        IconComponent(): any;
+    };
+    "root-icon-direct-message": {
+        IconComponent(): any;
+    };
+    "root-icon-conversation": {
+        IconComponent(): any;
+    };
+    "root-icon-attach": {
+        IconComponent(): any;
+    };
+    "root-icon-add-reaction": {
+        IconComponent(): any;
+    };
+    "root-icon-error": {
+        IconComponent(): any;
+    };
+    "root-icon-grid-view": {
+        IconComponent(): any;
+    };
+    "root-icon-list-view": {
+        IconComponent(): any;
+    };
+    "root-icon-plane": {
+        IconComponent(): any;
+    };
+    "root-icon-bag": {
+        IconComponent(): any;
+    };
+    "root-icon-flag": {
+        IconComponent(): any;
+    };
+    "root-icon-calendar": {
+        IconComponent(): any;
+    };
+};
+export type IconName = keyof typeof rootIcon;
+export declare const iconNames: IconName[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsfour/root-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Unofficial stencil UI components for Root",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -14,6 +14,7 @@
   },
   "scripts": {
     "build": "stencil build",
+    "generate:icons": "ts-node tools/generate-icons.ts",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
@@ -21,7 +22,7 @@
   },
   "keywords": [],
   "author": "",
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
     "@stencil/react-output-target": "^1.2.0"
   }

package/src/components/alert/alert.scss

@@ -0,0 +1,26 @@
+.root-alert {
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 13px;
+    border: 1px solid var(--rootsdk-border);
+    background: var(--rootsdk-background-secondary);
+    color: var(--rootsdk-text-primary);
+
+    &--info {
+        background: var(--rootsdk-info);
+        color: #1F2937;
+        border-color: transparent;
+    }
+
+    &--warning {
+        background: var(--rootsdk-warning);
+        color: #1F2937;
+        border-color: transparent;
+    }
+
+    &--error {
+        background: var(--rootsdk-error);
+        color: var(--rootsdk-text-white);
+        border-color: transparent;
+    }
+}

package/src/components/alert/alert.tsx

@@ -0,0 +1,17 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+    tag: 'root-alert',
+    styleUrl: 'alert.scss',
+    shadow: true
+})
+
+export class RootAlert {
+    @Prop() type: 'info' | 'warning' | 'error';
+
+    render() {
+        return (
+            <div class={`root-alert root-alert--${this.type}`}>Default alert message</div>
+        );
+    }
+}

package/src/components/alert/readme.md

@@ -0,0 +1,17 @@
+# root-alert
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type                             | Default     |
+| -------- | --------- | ----------- | -------------------------------- | ----------- |
+| `type`   | `type`    |             | `"error" \| "info" \| "warning"` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,9 +1,7 @@
 
 export enum RootBadgeVariation {
-    PRIMARY = 'primary',
-    SECONDARY = 'secondary',
-    TERTIARY = 'tertiary',
-    OUTLINE = 'outline',
-    MUTED = 'muted',
-    DANGER = 'danger',
+    DEFAULT = 'default',
+    INFO = 'info',
+    WARNING = 'warning',
+    ERROR = 'error',
 }

package/src/components/badge/badge.scss

@@ -1,50 +1,29 @@
 .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); 
+    padding: 4px 8px;
+    font-size: 11px;
+    font-weight: 500;
+    border-radius: 9999px;
+    border: 1px solid var(--rootsdk-border);
+    background: var(--rootsdk-background-tertiary);
+    color: var(--rootsdk-text-secondary);
+
+    &--info {
+        background: var(--rootsdk-info); 
+        color: #1F2937; 
+        border-color: transparent;
+    }
+
+    &--warning {
+        background: var(--rootsdk-warning); 
+        color: #1F2937; 
+        border-color: transparent;
+    }
+
+    &--error {
+        background: var(--rootsdk-error); 
+        color: var(--rootsdk-text-white); 
+        border-color: transparent;
     }
 
     &--full-width {

package/src/components/badge/badge.tsx

@@ -10,7 +10,7 @@ import { RootBadgeVariation } from './badge-variation.enum';
 export class RootBadge {
     @Prop() badgeId: string = randomIdGenerator('root-badge');
 
-    @Prop() variation: RootBadgeVariation = RootBadgeVariation.PRIMARY;
+    @Prop() variation: RootBadgeVariation = RootBadgeVariation.DEFAULT;
 
     @Prop() fullWidth: boolean = false;
 

package/src/components/badge/readme.md

@@ -7,12 +7,12 @@
 
 ## 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`      |
+| Property    | Attribute    | Description | Type                                                                                                              | Default                           |
+| ----------- | ------------ | ----------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| `badgeId`   | `badge-id`   |             | `string`                                                                                                          | `randomIdGenerator('root-badge')` |
+| `disabled`  | `disabled`   |             | `boolean`                                                                                                         | `false`                           |
+| `fullWidth` | `full-width` |             | `boolean`                                                                                                         | `false`                           |
+| `variation` | `variation`  |             | `RootBadgeVariation.DEFAULT \| RootBadgeVariation.ERROR \| RootBadgeVariation.INFO \| RootBadgeVariation.WARNING` | `RootBadgeVariation.DEFAULT`      |
 
 
 ## Events

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

@@ -1,9 +1,7 @@
 
 export enum RootBannerVariation {
-    PRIMARY = 'primary',
-    SECONDARY = 'secondary',
-    TERTIARY = 'tertiary',
-    DANGER = 'danger',
+    DEFAULT = 'default',
+    INFO = 'info',
     WARNING = 'warning',
-    SUCCESS = 'success',
+    ERROR = 'error'
 }