[refactor] rewrite BG Icon, Input Group, Collapse, Accordion & Month Calendar components (#20)

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.7",
+    "version": "2.0.0-beta.9",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -29,7 +29,7 @@
         "dom-renderer": "^2.0.6",
         "mobx": "^6.12.0",
         "regenerator-runtime": "^0.14.1",
-        "web-cell": "^3.0.0-rc.7",
+        "web-cell": "^3.0.0-rc.8",
         "web-utility": "^4.1.3"
     },
     "peerDependencies": {
@@ -70,7 +70,7 @@
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.2",
         "typedoc": "^0.25.7",
-        "typedoc-plugin-mdn-links": "^3.1.12",
+        "typedoc-plugin-mdn-links": "^3.1.13",
         "typescript": "~5.3.3"
     },
     "scripts": {

pnpm-lock.yaml

@@ -0,0 +1,102 @@
+import { observable } from 'mobx';
+import {
+    FC,
+    WebCell,
+    WebCellProps,
+    attribute,
+    component,
+    observer,
+    on,
+    reaction
+} from 'web-cell';
+
+import { CollapseProps, Collapse } from './Collapse';
+
+export const AccordionItem: FC<WebCellProps<HTMLDivElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div className={`accordion-item ${className}`} {...props}>
+        {children}
+    </div>
+);
+
+export const AccordionHeader: FC<WebCellProps<HTMLHeadingElement>> = ({
+    className = '',
+    children,
+    onClick,
+    ...props
+}) => (
+    <h2 className={`accordion-header ${className}`} {...props}>
+        <button className="accordion-button" type="button" onClick={onClick}>
+            {children}
+        </button>
+    </h2>
+);
+
+export const AccordionBody: FC<CollapseProps> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <Collapse className={`accordion-collapse ${className}`} {...props}>
+        <div className="accordion-body">{children}</div>
+    </Collapse>
+);
+
+export interface AccordionProps {
+    flush?: boolean;
+    alwaysOpen?: boolean;
+}
+
+export interface Accordion extends WebCell<AccordionProps> {}
+
+@component({
+    tagName: 'accordion-box',
+    mode: 'open'
+})
+@observer
+export class Accordion extends HTMLElement implements WebCell<AccordionProps> {
+    @attribute
+    @observable
+    accessor flush = false;
+
+    @attribute
+    @observable
+    accessor alwaysOpen = false;
+
+    connectedCallback() {
+        this.classList.add('accordion');
+    }
+
+    @reaction(({ flush }) => flush)
+    handleFlush(flush: boolean) {
+        this.classList.toggle('accordion-flush', flush);
+    }
+
+    @on('click', '.accordion-header')
+    handleClick(
+        _,
+        { nextElementSibling: currentCollapse }: HTMLHeadingElement
+    ) {
+        if (!this.alwaysOpen)
+            for (const collapse of this.querySelectorAll<HTMLDivElement>(
+                '.accordion-collapse'
+            ))
+                if (collapse !== currentCollapse) {
+                    collapse.classList.remove('show');
+                    collapse.previousElementSibling.querySelector(
+                        'button'
+                    ).ariaExpanded = 'false';
+                }
+        currentCollapse.classList.toggle('show');
+        currentCollapse.previousElementSibling.querySelector(
+            'button'
+        ).ariaExpanded = 'false';
+    }
+
+    render() {
+        return <slot />;
+    }
+}

source/Accordion.tsx

@@ -18,12 +18,18 @@ export const Button: FC<ButtonProps> = ({
     className,
     href,
     variant,
+    size,
     active,
     children,
     ...props
 }) => {
     const { disabled, tabIndex } = props,
-        Class = classNames('btn', variant && `btn-${variant}`, className);
+        Class = classNames(
+            'btn',
+            variant && `btn-${variant}`,
+            size && `btn-${size}`,
+            className
+        );
 
     return href ? (
         <a

source/Button.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+export interface CollapseProps extends WebCellProps<HTMLElement> {
+    dimension?: 'width' | 'height';
+    in?: boolean;
+}
+
+export const Collapse: FC<CollapseProps> = ({
+    className,
+    dimension = 'width',
+    in: show,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            'collapse',
+            { 'collapse-horizontal': dimension === 'height', show },
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </div>
+);

source/Collapse.tsx

@@ -38,6 +38,38 @@ export const FloatingLabel: FC<FloatingLabelProps> = ({
     </div>
 );
 
+export interface InputGroupProps extends WebCellProps<HTMLDivElement> {
+    size?: 'sm' | 'lg';
+}
+
+export const InputGroup: FC<InputGroupProps> = ({
+    className = '',
+    size,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            'input-group',
+            size && `input-group-${size}`,
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </div>
+);
+
+export const InputGroupText: FC<WebCellProps<HTMLSpanElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <span className={`input-group-text ${className}`} {...props}>
+        {children}
+    </span>
+);
+
 export type FormControlTag = 'input' | 'textarea' | 'select';
 
 export type FormControlProps<T extends FormControlTag> = WebCellProps &

source/Form.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { WebCellProps } from 'web-cell';
+import { FC, WebCellProps } from 'web-cell';
 
 import { Color } from './type';
 
@@ -9,27 +9,50 @@ export interface IconProps extends WebCellProps {
     size?: number;
 }
 
-export function Icon({
+export const Icon: FC<IconProps> = ({
     className,
     style,
     color,
     name,
     size,
     children,
     ...rest
-}: IconProps) {
-    return (
-        <i
-            className={classNames(
-                `bi-${name}`,
-                color && `text-${color}`,
-                className
-            )}
-            style={{
-                ...style,
-                fontSize: size ? `${size}rem` : undefined
-            }}
-            {...rest}
-        />
-    );
+}) => (
+    <i
+        className={classNames(
+            `bi-${name}`,
+            color && `text-${color}`,
+            className
+        )}
+        style={{
+            ...style,
+            fontSize: size ? `${size}rem` : undefined
+        }}
+        {...rest}
+    />
+);
+
+export interface BGIconProps extends IconProps {
+    type?: 'square' | 'circle';
 }
+
+export const BGIcon: FC<BGIconProps> = ({
+    className = '',
+    type = 'square',
+    color = 'primary',
+    children,
+    ...props
+}) => (
+    <span
+        className={classNames(
+            'd-inline-block',
+            'p-3',
+            `bg-${color}`,
+            `rounded${type === 'square' ? '' : '-circle'}`,
+            className
+        )}
+        {...props}
+    >
+        <Icon color={color === 'light' ? 'dark' : 'light'} {...props} />
+    </span>
+);