[refactor] Progress Bar, Modal & Dialog components (#23)

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.23",
+    "version": "2.0.0-beta.26",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -27,9 +27,9 @@
         "@swc/helpers": "^0.5.11",
         "classnames": "^2.5.1",
         "dom-renderer": "^2.1.7",
-        "mobx": "^6.12.3",
+        "mobx": "^6.12.4",
         "regenerator-runtime": "^0.14.1",
-        "web-cell": "^3.0.0-rc.15",
+        "web-cell": "^3.0.0-rc.16",
         "web-utility": "^4.4.0"
     },
     "peerDependencies": {
@@ -49,7 +49,6 @@
         "@parcel/transformer-typescript-types": "~2.12.0",
         "@peculiar/webcrypto": "^1.5.0",
         "@tech_query/snabbdom-looks-like": "^2.0.1",
-        "@types/classnames": "^2.3.1",
         "@types/jest": "^29.5.12",
         "@types/resize-observer-browser": "^0.1.11",
         "@types/turndown": "^5.0.4",
@@ -60,7 +59,7 @@
         "iterable-observer": "^1.0.1",
         "jest": "^29.7.0",
         "less": "^4.2.0",
-        "lint-staged": "^15.2.6",
+        "lint-staged": "^15.2.7",
         "markdown-area-element": "^0.2.3",
         "open-cli": "^8.0.0",
         "parcel": "~2.12.0",

pnpm-lock.yaml

@@ -4,13 +4,13 @@ import { FC, WebCellProps } from 'web-cell';
 
 import { FormControlProps } from './Form';
 import { Icon, IconProps } from './Reminder';
-import { Color } from './type';
+import { TextColor } from './type';
 
 export interface ButtonProps
     extends WebCellProps<HTMLButtonElement>,
         Omit<WebCellProps<HTMLAnchorElement>, 'type'>,
         Pick<FormControlProps<'input'>, 'size'> {
-    variant?: Color | `outline-${Color}` | 'link';
+    variant?: TextColor | `outline-${TextColor}` | 'link';
     active?: boolean;
 }
 

source/Button.tsx

@@ -178,7 +178,7 @@ export class Carousel extends HTMLElement implements WebCell<CarouselProps> {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].2/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
                 />
                 {this.renderContent()}
             </>

source/Carousel.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import { FC, WebCellProps } from 'web-cell';
 
-import { Image, ImageProps } from './Image';
-import { Color, PositionY } from './type';
+import { Image, ImageProps } from '../Image';
+import { TextColor, PositionY } from '../type';
 
 export interface CardProps extends WebCellProps<HTMLDivElement> {
-    bg?: Color;
-    text?: Color | 'white' | 'muted';
-    border?: Color;
+    bg?: TextColor;
+    text?: TextColor | 'white' | 'muted';
+    border?: TextColor;
     body?: boolean;
 }
 

source/Accordion.tsx source/Content/Accordion.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { JsxChildren } from 'dom-renderer';
 import { FC } from 'web-cell';
 
-import { BackgroundColor } from './type';
-import { Container, ContainerProps } from './Grid';
+import { BackgroundColor } from '../type';
+import { Container, ContainerProps } from '../Grid';
 
 export interface JumbotronProps
     extends Omit<ContainerProps, 'title'>,

source/Card.tsx source/Content/Card.tsx

@@ -17,7 +17,7 @@ export const MediaObject: FC<MediaObjectProps> = ({
     image,
     imageRow = 'start',
     imageColumn = 'start',
-    defaultSlot,
+    children,
     ...rest
 }) => {
     const start = imageColumn === 'start';
@@ -39,7 +39,7 @@ export const MediaObject: FC<MediaObjectProps> = ({
             </div>
             <div className={`flex-grow-1 ${start ? 'ms-3' : 'me-3'}`}>
                 <h5 className="mt-0">{title}</h5>
-                {defaultSlot}
+                {children}
             </div>
         </>
     );

source/Collapse.tsx source/Content/Collapse.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { FC, WebCellProps } from 'web-cell';
 
-import { Color, Size } from './type';
+import { TextColor, Size } from '../type';
 
 export interface TableProps extends WebCellProps<HTMLTableElement> {
-    variant?: Color;
+    variant?: TextColor;
     size?: 'sm';
     responsive?: boolean | Size;
     striped?: boolean | 'columns';

source/Jumbotron.tsx source/Content/Jumbotron.tsx

@@ -9,7 +9,7 @@ import {
     reaction
 } from 'web-cell';
 
-import { Nav, NavLink } from './Nav';
+import { Nav, NavLink } from '../Nav';
 
 export interface TabProps {
     caption: JsxChildren;
@@ -108,7 +108,7 @@ export class Tabs extends HTMLElement implements WebCell {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].2/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
                 />
                 {this.renderContent()}
             </>

source/MediaObject.tsx source/Content/MediaObject.tsx

@@ -1,9 +1,8 @@
-export * from './ListGroup';
 export * from './Table';
 export * from './Jumbotron';
 export * from './Card';
 export * from './MediaObject';
-export * from './EdgeDetector';
+export * from './ScrollBoundary';
 export * from './Collapse';
 export * from './Accordion';
-export * from './TabView';
+export * from './Tabs';

source/ScrollBoundary.tsx source/Content/ScrollBoundary.tsx

@@ -111,7 +111,7 @@ export class DropdownButton extends HTMLElement {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].2/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
                 />
                 <style>
                     {`:host {

source/Table.tsx source/Content/Table.tsx

@@ -12,7 +12,7 @@ import {
 
 import { Badge } from './Reminder';
 import { Button, ButtonProps } from './Button';
-import { Table, TableProps } from './Table';
+import { Table, TableProps } from './Content';
 
 export interface DateData {
     date: TimeData;

source/Tabs.tsx source/Content/Tabs.tsx

@@ -198,7 +198,7 @@ export class OffcanvasNavbar extends HTMLElement implements WebCell {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].2/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
                 />
                 {this.renderContent()}
             </>

v1/Content/index.ts source/Content/index.ts

@@ -0,0 +1,32 @@
+import { Defer } from 'iterable-observer';
+import { observable } from 'mobx';
+import { FC, observer } from 'web-cell';
+
+export class DialogClose extends Error {
+    constructor(message = 'Dialog closed') {
+        super(message);
+    }
+}
+
+export interface DialogProps<T = any> {
+    defer?: Defer<T>;
+}
+
+export class Dialog<T = any> {
+    @observable
+    accessor defer: Defer<T> | undefined;
+
+    Component: FC;
+
+    constructor(Factory: FC<DialogProps<T>>) {
+        this.Component = observer(() => <Factory defer={this.defer} />);
+    }
+
+    open() {
+        this.defer = new Defer();
+
+        this.defer.promise.finally(() => (this.defer = undefined));
+
+        return this.defer.promise;
+    }
+}