@akinon/ui-layout 0.5.0 → 1.0.0

package/dist/esm/Layout/Sider/types.d.ts

@@ -0,0 +1,134 @@
+// TODO integrate with antd menu types
+/**
+ * Interface for items within the left sider.
+ */
+export type LeftSiderItem = {
+  /**
+   * Unique key for the menu item.
+   */
+  key: string;
+
+  /**
+   * Display label for the menu item.
+   */
+  label: string;
+
+  /**
+   * Optional icon for the menu item.
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Additional CSS class for the menu item.
+   */
+  className?: string;
+
+  /**
+   * Callback function triggered when the menu item is clicked.
+   */
+  onClick?: () => void;
+
+  /**
+   * Nested children items for creating submenus.
+   */
+  children?: LeftSiderItem[];
+
+  /**
+   * Whether the menu item is disabled.
+   */
+  disabled?: boolean;
+};
+
+export type SiderProps = Omit<AntSiderProps, 'prefixCls' | 'style' | 'styles'>;
+
+export interface AntSiderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Sider position for border position.
+   * If it is left, the border will be on the right side.
+   * Other is other side.
+   *
+   * @default left
+   */
+  position?: 'left' | 'right';
+
+  /**
+   * Whether can be collapsed
+   */
+  collapsible?: boolean;
+
+  /**
+   * To set the current status
+   */
+  collapsed?: boolean;
+
+  /**
+   * To set the initial status
+   */
+  defaultCollapsed?: boolean;
+
+  /**
+   * Reverse direction of arrow, for a sider that expands from the right
+   */
+  reverseArrow?: boolean;
+
+  /**
+   * The callback function, executed by clicking the trigger or activating the responsive layout
+   */
+  onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+
+  /**
+   * To customize the styles of the special trigger that appears when <code>collapsedWidth</code> is 0
+   */
+  zeroWidthTriggerStyle?: React.CSSProperties;
+
+  /**
+   * Specify the customized trigger, set to null to hide the trigger
+   */
+  trigger?: React.ReactNode;
+
+  /**
+   * Width of the sidebar
+   */
+  width?: number | string;
+
+  /**
+   * Width of the collapsed sidebar, by setting to 0 a special trigger will appear
+   */
+  collapsedWidth?: number | string;
+
+  /**
+   * Breakpoints of the responsive layout
+   */
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+  /**
+   * Color theme of the sidebar
+   */
+  theme?: SiderTheme;
+
+  /**
+   * The callback function, executed when breakpoints changed
+   */
+  onBreakpoint?: (broken: boolean) => void;
+
+  /**
+   * URL for the sidebar's custom icon. This can be used for branding or visual enhancement.
+   * If provided, the icon will be displayed in the sidebar header or a designated area.
+   */
+  iconUrl?: string;
+
+  /**
+   * URL for the sidebar's brand image. Typically used to display a logo or branding element in the sidebar.
+   * This can enhance the sidebar's appearance and provide a visual identity for the application.
+   */
+  brandImageUrl?: string;
+
+  /**
+   * The additional css class
+   */
+  className?: string;
+}
+
+type SiderTheme = 'light' | 'dark';
+
+type CollapseType = 'clickTrigger' | 'responsive';

package/dist/esm/Layout/index.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import type { LayoutProps } from './types';
 export type { LayoutProps } from './types';
+/**
+ * Layout component, which acts as the container for building structured page layouts.
+ * It provides a framework to integrate Sider, Header, Footer, and Content components cohesively.
+ *
+ * This component is commonly used in applications to establish a consistent and flexible layout structure.
+ */
 export declare const Layout: ({ children, ...restLayoutProps }: LayoutProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/Layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;GAKG;AAEH,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}

package/dist/esm/Layout/index.js

@@ -13,6 +13,12 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Layout as AntLayout } from 'antd';
 import * as React from 'react';
+/**
+ * Layout component, which acts as the container for building structured page layouts.
+ * It provides a framework to integrate Sider, Header, Footer, and Content components cohesively.
+ *
+ * This component is commonly used in applications to establish a consistent and flexible layout structure.
+ */
 export const Layout = (_a) => {
     var { children } = _a, restLayoutProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);

package/dist/esm/Layout/types.d.ts

@@ -0,0 +1,32 @@
+export type LayoutProps = Omit<
+  AntLayoutProps,
+  'prefixCls' | 'suffixCls' | 'style' | 'styles'
+>;
+
+export interface AntLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Suffix class for custom styling.
+   */
+  suffixCls?: string;
+
+  /**
+   * ClassName on the root element.
+   */
+  rootClassName?: string;
+
+  /**
+   * Indicates whether the layout contains a Sider component.
+   * This property is usually inferred automatically but can be explicitly set to avoid style flickering in SSR scenarios.
+   */
+  hasSider?: boolean;
+
+  /**
+   * The children elements to render within the layout.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The additional CSS class for styling.
+   */
+  className?: string;
+}

package/dist/esm/NavCard/index.css

@@ -13,45 +13,45 @@
   align-items: center;
   justify-content: center;
   width: 180px;
+}
 
-  /* Overriding SVG so you will not have to pass size prop to Icon component. */
-  svg {
-    width: 28px !important;
-    height: 28px !important;
-  }
+/* Overriding SVG so you will not have to pass size prop to Icon component. */
+.nav-card__icon svg {
+  width: 28px !important;
+  height: 28px !important;
+}
 
-  /* Change bg color based on the class set on .nav-card */
-  &:is(.nav-card-akinon *) {
-    background-color: var(--color-akinon-500);
-  }
+/* Change bg color based on the class set on .nav-card */
+.nav-card-akinon .nav-card__icon {
+  background-color: var(--color-akinon-500);
+}
 
-  &:is(.nav-card-azure *) {
-    background-color: var(--color-azure-500);
-  }
+.nav-card-azure .nav-card__icon {
+  background-color: var(--color-azure-500);
+}
 
-  &:is(.nav-card-blue *) {
-    background-color: var(--color-blue-500);
-  }
+.nav-card-blue .nav-card__icon {
+  background-color: var(--color-blue-500);
+}
 
-  &:is(.nav-card-orange *) {
-    background-color: var(--color-orange-500);
-  }
+.nav-card-orange .nav-card__icon {
+  background-color: var(--color-orange-500);
+}
 
-  &:is(.nav-card-red *) {
-    background-color: var(--color-red-500);
-  }
+.nav-card-red .nav-card__icon {
+  background-color: var(--color-red-500);
+}
 
-  &:is(.nav-card-green *) {
-    background-color: var(--color-green-500);
-  }
+.nav-card-green .nav-card__icon {
+  background-color: var(--color-green-500);
+}
 
-  &:is(.nav-card-pink *) {
-    background-color: var(--color-pink-500);
-  }
+.nav-card-pink .nav-card__icon {
+  background-color: var(--color-pink-500);
+}
 
-  &:is(.nav-card-purple *) {
-    background-color: var(--color-purple-500);
-  }
+.nav-card-purple .nav-card__icon {
+  background-color: var(--color-purple-500);
 }
 
 .nav-card__content {

package/dist/esm/NavCard/index.d.ts

@@ -2,5 +2,29 @@ import './index.css';
 import * as React from 'react';
 import type { NavCardProps } from './types';
 export type { NavCardProps } from './types';
+/**
+ * NavCard component for navigation or highlighting sections in the interface.
+ *
+ * The NavCard component is designed to provide a visually engaging and functional card
+ * that serves as a navigation element or as a callout section in a user interface.
+ *
+ * Features:
+ * - **Title**: A required title to provide the primary context for the NavCard.
+ * - **Description**: A short description to elaborate on the title or purpose of the card.
+ * - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
+ * - **Color Variants**: Offers a range of predefined color options for theming, including:
+ *   - `akinon`
+ *   - `azure`
+ *   - `blue`
+ *   - `orange`
+ *   - `red`
+ *   - `green`
+ *   - `pink`
+ *   - `purple`
+ * - **Custom Styling**: Allows additional customizations via the `className` prop.
+ *
+ * Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
+ * and thematically consistent navigation elements are required.
+ */
 export declare const NavCard: ({ title, description, icon, variant, className }: NavCardProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/NavCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,qDAMjB,YAAY,sBAad,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,eAAO,MAAM,OAAO,qDAMjB,YAAY,sBAad,CAAC"}

package/dist/esm/NavCard/index.js

@@ -1,6 +1,30 @@
 import './index.css';
 import clsx from 'clsx';
 import * as React from 'react';
+/**
+ * NavCard component for navigation or highlighting sections in the interface.
+ *
+ * The NavCard component is designed to provide a visually engaging and functional card
+ * that serves as a navigation element or as a callout section in a user interface.
+ *
+ * Features:
+ * - **Title**: A required title to provide the primary context for the NavCard.
+ * - **Description**: A short description to elaborate on the title or purpose of the card.
+ * - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
+ * - **Color Variants**: Offers a range of predefined color options for theming, including:
+ *   - `akinon`
+ *   - `azure`
+ *   - `blue`
+ *   - `orange`
+ *   - `red`
+ *   - `green`
+ *   - `pink`
+ *   - `purple`
+ * - **Custom Styling**: Allows additional customizations via the `className` prop.
+ *
+ * Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
+ * and thematically consistent navigation elements are required.
+ */
 export const NavCard = ({ title, description, icon, variant, className }) => {
     const variantClass = variant ? `nav-card-${variant}` : '';
     return (React.createElement("div", { className: clsx('nav-card', variantClass, className) },

package/dist/esm/NavCard/types.d.ts

@@ -0,0 +1,36 @@
+export type NavCardColorVariant =
+  | 'akinon'
+  | 'azure'
+  | 'blue'
+  | 'orange'
+  | 'red'
+  | 'green'
+  | 'pink'
+  | 'purple';
+
+export interface NavCardProps {
+  /**
+   * The title of the NavCard.
+   */
+  title: string;
+
+  /**
+   * The description of the NavCard.
+   */
+  description: string;
+
+  /**
+   * The icon of the NavCard.
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * The color variant of the NavCard.
+   */
+  variant?: NavCardColorVariant;
+
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

package/dist/esm/PageContent/index.d.ts

@@ -1,6 +1,8 @@
-import './index.css';
 import * as React from 'react';
 import type { PageContentProps } from './types';
-export type { PageContentProps } from './types';
+/**
+ * It is used to generate content for a standard page.
+ */
 export declare const PageContent: ({ children, className, ...restProps }: PageContentProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/PageContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,sBAIlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;GAEG;AAEH,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,sBAMlB,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/PageContent/index.js

@@ -9,10 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import './index.css';
-import clsx from 'clsx';
 import * as React from 'react';
+/**
+ * It is used to generate content for a standard page.
+ */
 export const PageContent = (_a) => {
-    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: clsx('akinon-page-content', className) }, restProps), children));
+    var { children, className = '' } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({ className: className, style: { padding: '30px' } }, restProps), children));
 };

package/dist/esm/PageContent/types.d.ts

@@ -0,0 +1,11 @@
+export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The content of the page.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The additional css class.
+   */
+  className?: string;
+}

package/dist/esm/PageHeading/index.d.ts

@@ -1,6 +1,9 @@
-import './index.css';
 import * as React from 'react';
 import type { PageHeadingProps } from './types';
-export type { PageHeadingProps } from './types';
+/**
+ * It is used to generate title, description and actions for a standard page.
+ * See the [PageContent](/docs/layout-pagecontent--docs) component for more information.
+ */
 export declare const PageHeading: ({ title, description, actions, className }: PageHeadingProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/PageHeading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageHeading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,WAAW,+CAKrB,gBAAgB,sBAalB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageHeading/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;GAGG;AAEH,eAAO,MAAM,WAAW,+CAKrB,gBAAgB,sBA4BlB,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/PageHeading/index.js

@@ -1,10 +1,16 @@
-import './index.css';
-import clsx from 'clsx';
+import { Flex, Space, Typography } from 'antd';
 import * as React from 'react';
+/**
+ * It is used to generate title, description and actions for a standard page.
+ * See the [PageContent](/docs/layout-pagecontent--docs) component for more information.
+ */
 export const PageHeading = ({ title, description, actions, className }) => {
-    return (React.createElement("div", { className: clsx('akinon-page-heading', className) },
-        React.createElement("div", { className: "akinon-page-heading__content" },
-            React.createElement("h1", { className: "akinon-page-heading__title" }, title),
-            description && (React.createElement("p", { className: "akinon-page-heading__description" }, description))),
-        actions && React.createElement("div", { className: "akinon-page-heading__actions" }, actions)));
+    return (React.createElement(Flex, { justify: "space-between", align: "flex-start", className: className, style: {
+            padding: '18px 30px',
+            borderBlockEnd: 'solid 1px var(--color-gray-900)'
+        } },
+        React.createElement(Space, { direction: "vertical", size: 4 },
+            React.createElement(Typography.Title, { level: 4, style: { margin: 0 } }, title),
+            description && (React.createElement(Typography.Paragraph, { type: "secondary", style: { margin: 0, fontSize: 10 } }, description))),
+        actions && React.createElement(Space, null, actions)));
 };

package/dist/esm/PageHeading/types.d.ts

@@ -0,0 +1,21 @@
+export interface PageHeadingProps {
+  /**
+   * The title of the PageHeading.
+   */
+  title: string;
+
+  /**
+   * The description of the PageHeading.
+   */
+  description?: string;
+
+  /**
+   * The action items of the PageHeading.
+   */
+  actions?: React.ReactNode;
+
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,12 @@
+import { Layout } from './Layout';
+import { Content } from './Layout/Content';
+import { Footer } from './Layout/Footer';
+import { Header } from './Layout/Header';
+import { Sider } from './Layout/Sider';
+
+export type LayoutType = typeof Layout & {
+  Header: typeof Header;
+  Footer: typeof Footer;
+  Content: typeof Content;
+  Sider: typeof Sider;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-layout",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,16 +9,16 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
+    "antd": "5.22.6",
     "clsx": "^2.0.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.3.0",
-    "@akinon/ui-theme": "0.6.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.0",
+    "@akinon/ui-theme": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,7 +38,7 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
     "typecheck": "tsc --noEmit"
   }