[refactor] rewrite Navigator Bar based on Bootstrap 5

[remove] useless Cell Router model

.eslintrc.json

@@ -18,8 +18,9 @@
         "prettier"
     ],
     "rules": {
-        "no-unused-vars": "warn",
         "prefer-const": "warn",
+        "no-unused-vars": "warn",
+        "@typescript-eslint/no-unused-vars": "warn",
         "@typescript-eslint/explicit-module-boundary-types": "off"
     }
 }

ReadMe.md

@@ -2,7 +2,7 @@
 
 # WebCell scaffold
 
-App Project scaffold of **WebCell** v2
+App Project scaffold of **WebCell** v3
 
 https://web-cell.dev/scaffold/
 
@@ -20,15 +20,15 @@ https://web-cell.dev/scaffold/
 ## Development
 
 ```shell
-npm install
-
+npm i pnpm -g
+pnpm i
 npm start
 ```
 
 ## Deployment
 
 ```shell
-npm run build
+pnpm build
 ```
 
 [1]: https://david-dm.org/EasyWebApp/scaffold

package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcell-scaffold",
-    "version": "0.3.0",
-    "description": "App Project scaffold of WebCell v2",
+    "version": "0.4.0",
+    "description": "App Project scaffold of WebCell v3",
     "keywords": [
         "web-component",
         "typescript",
@@ -17,7 +17,7 @@
     },
     "dependencies": {
         "browser-unhandled-rejection": "^1.0.2",
-        "cell-router": "3.0.0-rc.1",
+        "cell-router": "^3.0.0-rc.1",
         "classnames": "^2.5.1",
         "dom-renderer": "^2.0.4",
         "mobx": "^6.12.0",
@@ -30,7 +30,7 @@
         "@parcel/transformer-less": "2.11.0",
         "@parcel/transformer-typescript-tsc": "~2.11.0",
         "@parcel/transformer-webmanifest": "~2.11.0",
-        "@types/node": "^18.19.4",
+        "@types/node": "^18.19.5",
         "@typescript-eslint/eslint-plugin": "^6.18.0",
         "@typescript-eslint/parser": "^6.18.0",
         "eslint": "^8.56.0",

src/component/Grid.tsx

@@ -0,0 +1,24 @@
+import { JsxProps } from 'dom-renderer';
+import { FC } from 'web-cell';
+
+import { Size } from './type';
+
+export interface ContainerProps extends JsxProps<HTMLDivElement> {
+    fluid?: boolean | Size;
+}
+
+export const Container: FC<ContainerProps> = ({
+    className = '',
+    fluid,
+    children,
+    ...props
+}) => (
+    <div
+        className={`container${
+            fluid === true ? '-fluid' : fluid ? `-${fluid}` : ''
+        } ${className}`}
+        {...props}
+    >
+        {children}
+    </div>
+);

src/component/Nav.tsx

@@ -0,0 +1,22 @@
+import { JsxProps } from 'dom-renderer';
+import { FC } from 'web-cell';
+
+export interface NavLinkProps extends JsxProps<HTMLAnchorElement> {
+    active?: boolean;
+}
+
+export const NavLink: FC<NavLinkProps> = ({
+    className = '',
+    active,
+    children,
+    ...props
+}) => (
+    <li className="nav-item">
+        <a
+            className={`nav-link ${active ? 'active' : ''} ${className}`}
+            {...props}
+        >
+            {children}
+        </a>
+    </li>
+);

src/component/Navbar.tsx

@@ -0,0 +1,57 @@
+import { JsxProps } from 'dom-renderer';
+import { FC } from 'web-cell';
+
+import { BackgroundColor, PositionY, Size } from './type';
+
+export type NavbarBrandProps = JsxProps<HTMLAnchorElement>;
+
+export const NavbarBrand: FC<NavbarBrandProps> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <a className={`navbar-brand ${className}`} {...props}>
+        {children}
+    </a>
+);
+
+export type NavbarToggleProps = JsxProps<HTMLButtonElement>;
+
+export const NavbarToggle: FC<NavbarToggleProps> = ({
+    className = '',
+    type,
+    children,
+    ...props
+}) => (
+    <button className={`navbar-toggler ${className}`} type="button" {...props}>
+        <span className="navbar-toggler-icon" />
+    </button>
+);
+
+export interface NavbarProps extends JsxProps<HTMLDivElement> {
+    variant?: 'light' | 'dark';
+    bg?: BackgroundColor;
+    expand?: boolean | Size;
+    fixed?: PositionY;
+    sticky?: PositionY;
+}
+
+export const Navbar: FC<NavbarProps> = ({
+    variant = 'light',
+    bg = 'body-tertiary',
+    fixed,
+    sticky,
+    expand,
+    children
+}) => (
+    <nav
+        className={`navbar bg-${bg} ${fixed ? `fixed-${fixed}` : ''} ${
+            sticky ? `sticky-${sticky}` : ''
+        } ${
+            expand ? `navbar-expand${expand === true ? '' : `-${expand}`}` : ''
+        }`}
+        data-bs-theme={variant}
+    >
+        {children}
+    </nav>
+);

src/component/Offcanvas.tsx

@@ -0,0 +1,87 @@
+import { JsxProps } from 'dom-renderer';
+import { FC } from 'web-cell';
+import { uniqueID } from 'web-utility';
+
+export const OffcanvasTitle: FC<JsxProps<HTMLHeadingElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <h5 className={`offcanvas-title ${className}`} {...props}>
+        {children}
+    </h5>
+);
+
+export interface OffcanvasHeaderProps extends JsxProps<HTMLDivElement> {
+    closeButton?: boolean;
+}
+
+export const OffcanvasHeader: FC<OffcanvasHeaderProps> = ({
+    className = '',
+    closeButton,
+    children,
+    ...props
+}) => (
+    <div className={`offcanvas-header ${className}`} {...props}>
+        {children}
+
+        {closeButton && (
+            <button
+                className="btn-close"
+                type="button"
+                data-bs-dismiss="offcanvas"
+                ariaLabel="Close"
+            />
+        )}
+    </div>
+);
+
+export const OffcanvasBody: FC<JsxProps<HTMLDivElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div className={`offcanvas-body ${className}`} {...props}>
+        {children}
+    </div>
+);
+
+export interface OffcanvasProps extends JsxProps<HTMLDivElement> {
+    show?: boolean;
+}
+
+export const Offcanvas: FC<OffcanvasProps> = ({
+    className = '',
+    show,
+    children,
+    ...props
+}) => (
+    <div
+        className={`offcanvas ${className} ${show ? 'show' : ''}`}
+        tabIndex={-1}
+        {...props}
+    >
+        {children}
+    </div>
+);
+
+export interface OffcanvasBoxProps
+    extends OffcanvasProps,
+        OffcanvasHeaderProps {
+    titleId?: string;
+}
+
+export const OffcanvasBox: FC<OffcanvasBoxProps> = ({
+    title,
+    titleId = uniqueID(),
+    closeButton,
+    children,
+    ...props
+}) => (
+    <Offcanvas {...props} aria-labelledby={titleId}>
+        <OffcanvasHeader closeButton={closeButton}>
+            <OffcanvasTitle id={titleId}>{title}</OffcanvasTitle>
+        </OffcanvasHeader>
+        <OffcanvasBody>{children}</OffcanvasBody>
+    </Offcanvas>
+);

src/component/index.ts

@@ -0,0 +1,5 @@
+export * from './type';
+export * from './Grid';
+export * from './Nav';
+export * from './Navbar';
+export * from './Offcanvas';

src/component/type.ts

@@ -0,0 +1,22 @@
+type Subtle<T extends string> = `${T}${'' | '-subtle'}`;
+
+export type Color =
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'light'
+    | 'dark';
+
+export type BackgroundColor =
+    | Subtle<Color>
+    | `body${'' | '-secondary' | '-tertiary'}`
+    | 'black'
+    | 'white'
+    | 'transparent';
+
+export type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+export type PositionY = 'top' | 'bottom';

src/index.html

@@ -7,7 +7,7 @@
         />
         <link rel="icon" href="image/WebCell-0.png" />
         <title>WebCell scaffold</title>
-        <meta name="description" content="App Project scaffold of WebCell v2" />
+        <meta name="description" content="App Project scaffold of WebCell v3" />
         <meta name="author" content="[email protected]" />
 
         <link rel="manifest" href="index.webmanifest" />

src/index.webmanifest

@@ -2,7 +2,7 @@
   "name": "WebCell scaffold",
   "short_name": "WC Demo",
   "start_url": ".",
-  "description": "App Project scaffold of WebCell v2",
+  "description": "App Project scaffold of WebCell v3",
   "scope": "/",
   "display": "standalone",
   "orientation": "any",