@antscorp/antsomi-ui 1.3.5-beta.63 → 1.3.5-beta.64

package/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -10,9 +10,8 @@ export const MenuWrapper = styled.div `
   overflow-x: hidden;
   border-right: 1px solid rgba(5, 5, 5, 0.06);
 
-  .antsomi-menu {
-    height: 100%;
-
+  .antsomi-menu,
+  .ant-menu {
     [role='menuitem'] {
       width: 100%;
       border-radius: 0;
@@ -21,7 +20,8 @@ export const MenuWrapper = styled.div `
       margin-left: 0 !important;
       margin-right: 0 !important;
 
-      .antsomi-menu-title-content {
+      .antsomi-menu-title-content,
+      .ant-menu-title-content {
         height: 100%;
       }
     }

package/es/components/template/TemplateListing/stories/dataTypes/components/BlankTemplatePropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlankTemplatePropsTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/BlankTemplatePropsTable/index.js

@@ -0,0 +1,44 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Tag, Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+export const BlankTemplatePropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'show',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide Blank Template"))),
+            type: React.createElement(Tag, { color: "processing" }, "boolean"),
+            default: React.createElement(Tag, { bordered: false }, "false"),
+        },
+        {
+            key: '2',
+            property: 'description',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "The text that is displayed below the Add Button"))),
+            type: React.createElement(Tag, { color: "processing" }, "string"),
+            default: React.createElement(Tag, { bordered: false }, "Blank Template"),
+        },
+        {
+            key: '3',
+            property: 'onClick',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Callback onClick on Blank Template"))),
+            type: React.createElement(Tag, { color: "processing" }, 'React.MouseEventHandler<HTMLElement>'),
+            default: React.createElement(Tag, { bordered: false }, " - "),
+        },
+        {
+            key: '4',
+            property: 'blankTemplateRender',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Render Blank Template node for customizing"))),
+            type: React.createElement(Tag, { color: "processing" }, '(node: ReactNode) => ReactNode'),
+            default: React.createElement(Tag, { bordered: false }, " - "),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/CategoryListingPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CategoryListingPropsTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/CategoryListingPropsTable/index.js

@@ -0,0 +1,53 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Tag, Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+import { CATEGORY_LISTING_WITH } from '../../../../constants';
+export const CategoryListingPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'items',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "List of category items"))),
+            type: React.createElement(Tag, { color: "processing" }, "TCategoryItem [ ]"),
+            default: React.createElement(Tag, { bordered: false }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'width',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Width of category"))),
+            type: React.createElement(Tag, { color: "processing" }, "number"),
+            default: React.createElement(Tag, { bordered: false }, CATEGORY_LISTING_WITH),
+        },
+        {
+            key: '3',
+            property: 'loading',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Show loading category listing"))),
+            type: React.createElement(Tag, { color: "processing" }, "boolean"),
+            default: React.createElement(Tag, { bordered: false }, "false"),
+        },
+        {
+            key: '4',
+            property: 'show',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handler show or hide category"))),
+            type: React.createElement(Tag, { color: "processing" }, "boolean"),
+            default: React.createElement(Tag, { bordered: false }, "true"),
+        },
+        {
+            key: '5',
+            property: 'checkedCategories',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Record of checked categories"))),
+            type: React.createElement(Tag, { color: "processing" }, "TCheckedCategories"),
+            default: React.createElement(Tag, { bordered: false }, '{ }'),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/DataTypeTables/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DataTypeTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/DataTypeTables/index.js

@@ -0,0 +1,68 @@
+// Libraries
+import React from 'react';
+import { Tag, Table } from '@antscorp/antsomi-ui/es/index';
+import LinkTo from '@storybook/addon-links/react';
+export const DataTypeTable = () => {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+            key: 'description',
+        },
+    ];
+    const dataSource = [
+        {
+            key: 'templatesProps',
+            name: 'templatesProps',
+            type: (React.createElement(LinkTo, { story: "templates-props" },
+                React.createElement(Tag, { color: "processing" }, "templatesProps"))),
+            description: '-',
+        },
+        {
+            key: 'templateItemProps',
+            name: 'templateItemProps',
+            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
+                React.createElement(Tag, { color: "processing" }, "templateItemProps"))),
+            description: '-',
+        },
+        {
+            key: 'categoryListingProps',
+            name: 'categoryListingProps',
+            type: (React.createElement(LinkTo, { story: "category-listing-props" },
+                React.createElement(Tag, { color: "processing" }, "categoryListingProps"))),
+            description: '-',
+        },
+        {
+            key: 'blankTemplateProps',
+            name: 'blankTemplateProps',
+            type: (React.createElement(LinkTo, { story: "blank-template-props" },
+                React.createElement(Tag, { color: "processing" }, "blankTemplateProps"))),
+            description: '-',
+        },
+        {
+            key: 'previewModalProps',
+            name: 'previewModalProps',
+            type: (React.createElement("a", { href: "../?path=/docs/organisms-previewtemplatemodal--default", target: "_blank" },
+                React.createElement(Tag, { color: "processing" }, "previewModalProps"))),
+            description: '-',
+        },
+        {
+            key: 'emptyProps',
+            name: 'emptyProps',
+            type: (React.createElement(LinkTo, { story: "empty-props" },
+                React.createElement(Tag, { color: "processing" }, "emptyProps"))),
+            description: '-',
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: columns, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/EmptyPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmptyPropsTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/EmptyPropsTable/index.js

@@ -0,0 +1,28 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Tag, Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+export const EmptyPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'icon',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Customize Empty icon"))),
+            type: React.createElement(Tag, { color: "processing" }, "ReactNode"),
+            default: React.createElement(Tag, { bordered: false }, " - "),
+        },
+        {
+            key: '2',
+            property: 'description',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "The text that is displayed below the Icon"))),
+            type: React.createElement(Tag, { color: "processing" }, "string"),
+            default: React.createElement(Tag, { bordered: false }, "No data"),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/TemplatesPropsTable/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TemplatesPropsTable: React.FC;

package/es/components/template/TemplateListing/stories/dataTypes/components/TemplatesPropsTable/index.js

@@ -0,0 +1,46 @@
+// Libraries
+import React from 'react';
+// Components
+import { Table } from '../../../../../../organism';
+import { Tag, Typography, Flex } from '../../../../../../atoms';
+// Constants
+import { TABLE_API_COLUMNS } from '@antscorp/antsomi-ui/es/constants';
+import { LISTING_GAP_DEFAULT } from '../../../../constants';
+export const TemplatesPropsTable = () => {
+    const dataSource = [
+        {
+            key: '1',
+            property: 'items',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "List of templates"))),
+            type: React.createElement(Tag, { color: "processing" }, "( TTemplateItem & T) [ ]"),
+            default: React.createElement(Tag, { bordered: false }, "[ ]"),
+        },
+        {
+            key: '2',
+            property: 'loading',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Show loading template listing"))),
+            type: React.createElement(Tag, { color: "processing" }, "boolean"),
+            default: React.createElement(Tag, { bordered: false }, "false"),
+        },
+        {
+            key: '3',
+            property: 'gap',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Spacing between template items"),
+                React.createElement(Typography.Text, null, "When the screen size changes, the height and width of each template will change according to the screen, but the gap remains the same."))),
+            type: React.createElement(Tag, { color: "processing" }, "number"),
+            default: React.createElement(Tag, { bordered: false }, LISTING_GAP_DEFAULT),
+        },
+        {
+            key: '4',
+            property: 'onLoadMoreTemplates',
+            description: (React.createElement(Flex, { gap: 10, vertical: true },
+                React.createElement(Typography.Text, null, "Handles loading additional data based on lazy loading mechanism"))),
+            type: React.createElement(Tag, { color: "processing" }, '( ) => void'),
+            default: React.createElement(Tag, { bordered: false }, '( ) => { }'),
+        },
+    ];
+    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+};

package/es/components/template/TemplateListing/stories/dataTypes/components/index.d.ts

@@ -0,0 +1,5 @@
+export { DataTypeTable } from './DataTypeTables';
+export { TemplatesPropsTable } from './TemplatesPropsTable';
+export { CategoryListingPropsTable } from './CategoryListingPropsTable';
+export { BlankTemplatePropsTable } from './BlankTemplatePropsTable';
+export { EmptyPropsTable } from './EmptyPropsTable';

package/es/components/template/TemplateListing/stories/dataTypes/components/index.js

@@ -0,0 +1,5 @@
+export { DataTypeTable } from './DataTypeTables';
+export { TemplatesPropsTable } from './TemplatesPropsTable';
+export { CategoryListingPropsTable } from './CategoryListingPropsTable';
+export { BlankTemplatePropsTable } from './BlankTemplatePropsTable';
+export { EmptyPropsTable } from './EmptyPropsTable';

package/es/components/template/TemplateListing/stories/demo/styled.d.ts

@@ -0,0 +1 @@
+export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/template/TemplateListing/stories/demo/styled.js

@@ -0,0 +1,7 @@
+// Libraries
+import styled from 'styled-components';
+export const ImageWrapper = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;

package/es/components/template/TemplateListing/styled/index.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 export declare const TemplateListingWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const LoadMoreBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/template/TemplateListing/styled/index.js

@@ -33,8 +33,3 @@ export const TemplateListingWrapper = styled(Flex) `
   }
 `;
 export const LoadMoreBlock = styled.div ``;
-export const ImageWrapper = styled.img `
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-`;

package/es/components/template/TemplateListing/types/BlankTemplate.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 export interface BlankTemplateProps {
+    show?: boolean;
     width?: number;
     height?: number;
-    show?: boolean;
     description?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
     blankTemplateRender?: (node: ReactNode) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.63",
+  "version": "1.3.5-beta.64",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",