[refactor] upgrade List Group, Button Group & Toggle Button components

[optimize] Module folder structure

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.26",
+    "version": "2.0.0-beta.28",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -26,7 +26,7 @@
     "dependencies": {
         "@swc/helpers": "^0.5.11",
         "classnames": "^2.5.1",
-        "dom-renderer": "^2.1.7",
+        "dom-renderer": "^2.1.8",
         "mobx": "^6.12.4",
         "regenerator-runtime": "^0.14.1",
         "web-cell": "^3.0.0-rc.16",
@@ -64,10 +64,10 @@
         "open-cli": "^8.0.0",
         "parcel": "~2.12.0",
         "prettier": "^3.3.2",
-        "ts-jest": "^29.1.4",
+        "ts-jest": "^29.1.5",
         "ts-node": "^10.9.2",
         "typedoc": "^0.25.13",
-        "typedoc-plugin-mdn-links": "^3.1.29",
+        "typedoc-plugin-mdn-links": "^3.1.30",
         "typescript": "~5.4.5"
     },
     "scripts": {

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { computed, observable } from 'mobx';
 import { WebCell, attribute, component, observer } from 'web-cell';
 
-import { Status } from './type';
+import { Status } from '../type';
 
 interface TimeUnit {
     scale: number;
@@ -101,7 +101,7 @@ export class CountDown extends HTMLElement implements WebCell<CountDownProps> {
             <ol className="list-inline text-white">
                 {this.timeSections.map(({ value, label }, index) => (
                     <li
-                        key={value}
+                        key={label}
                         className={`list-inline-item fs-1 bg-${colors[index]} d-inline-flex align-items-center justify-content-center rounded-4`}
                         style={{ width: '5.5rem', height: '5.5rem' }}
                     >

source/CountDown.tsx source/Calendar/CountDown.tsxsource/CountDown.tsx renamed to source/Calendar/CountDown.tsx

@@ -10,9 +10,9 @@ import {
     splitArray
 } from 'web-utility';
 
-import { Badge } from './Reminder';
-import { Button, ButtonProps } from './Button';
-import { Table, TableProps } from './Content';
+import { Badge } from '../Reminder';
+import { Button, ButtonProps } from '../Form/Button';
+import { Table, TableProps } from '../Content';
 
 export interface DateData {
     date: TimeData;

source/MonthCalendar.tsx source/Calendar/MonthCalendar.tsxsource/MonthCalendar.tsx renamed to source/Calendar/MonthCalendar.tsx

@@ -10,7 +10,7 @@ import {
     reaction
 } from 'web-cell';
 
-import { CollapseProps, Collapse } from './Collapse';
+import { CollapseProps, Collapse } from '../Layout/Collapse';
 
 export const AccordionItem: FC<WebCellProps<HTMLDivElement>> = ({
     className = '',

source/Content/Accordion.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FC, WebCellProps } from 'web-cell';
 
-import { Image, ImageProps } from '../Image';
+import { Image, ImageProps } from '../Media/Image';
 import { TextColor, PositionY } from '../type';
 
 export interface CardProps extends WebCellProps<HTMLDivElement> {

source/Content/Card.tsx

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

source/Content/Jumbotron.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+import { Size, Status, Theme } from '../type';
+
+export interface ListGroupProps extends WebCellProps<HTMLDivElement> {
+    variant?: 'flush';
+    numbered?: boolean;
+    horizontal?: true | Size;
+}
+
+export const ListGroup: FC<ListGroupProps> = ({
+    className = '',
+    variant,
+    numbered,
+    horizontal,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            'list-group',
+            variant && `list-group-${variant}`,
+            numbered && `list-group-numbered`,
+            horizontal &&
+                `list-group-horizontal${horizontal === true ? '' : `-${horizontal}`}`,
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </div>
+);
+
+export interface ListGroupItemProps
+    extends WebCellProps<HTMLAnchorElement>,
+        Partial<Record<'active' | 'disabled', boolean>> {
+    variant?: keyof typeof Status | keyof typeof Theme;
+}
+
+export const ListGroupItem: FC<ListGroupItemProps> = ({
+    className = '',
+    variant,
+    href,
+    active,
+    disabled,
+    children,
+    ...props
+}) => (
+    <a
+        className={classNames(
+            'list-group-item',
+            variant && `list-group-item-${variant}`,
+            href && 'list-group-item-action',
+            { active, disabled },
+            disabled && 'pe-none',
+            className
+        )}
+        ariaCurrent={active ? 'true' : undefined}
+        ariaDisabled={disabled ? 'true' : undefined}
+        {...{ href, ...props }}
+    >
+        {children}
+    </a>
+);

source/Content/ListGroup.tsx

@@ -9,7 +9,7 @@ import {
     reaction
 } from 'web-cell';
 
-import { Nav, NavLink } from '../Nav';
+import { Nav, NavLink } from '../Navigator/Nav';
 
 export interface TabProps {
     caption: JsxChildren;

source/Content/Tabs.tsx

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