Custom ConfigProvider

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.1.24-7",
+    "version": "1.3.22-15",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

src/atomics/Typography/styles.tsx

@@ -24,16 +24,30 @@ export const TypographyTitleStyles = styled(Typography.Title, {
     }}
 `;
 
-export const TypographyTextStyles = styled(Typography.Text)<Pick<RdTypographyTextProps, 'size'>>`
+export const TypographyTextStyles = styled(Typography.Text, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdTypographyTextProps>(
+            ['noWrap', 'size'] as (keyof RdTypographyTextProps)[],
+            prop
+        ),
+})<Pick<RdTypographyTextProps, 'size' | 'noWrap'>>`
     ${({ size }) => {
         switch (size) {
             case 'small':
                 return `
                     font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px;
                 `;
-            // Case normal is the default size
         }
     }}
+
+    ${({ noWrap }) => {
+        return (
+            noWrap &&
+            css`
+                text-wrap: nowrap;
+            `
+        );
+    }}
 `;
 
 export const TypographyParagraphStyles = styled(Typography.Paragraph, {
@@ -47,7 +61,9 @@ export const TypographyParagraphStyles = styled(Typography.Paragraph, {
         return (
             minRows &&
             css`
-                min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) * Number(getComponentOrGlobalToken('Typography', 'fontSize')) * minRows}px;
+                min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) *
+                Number(getComponentOrGlobalToken('Typography', 'fontSize')) *
+                minRows}px;
             `
         );
     }}

src/atomics/Typography/types.ts

@@ -27,13 +27,20 @@ type TypographyParagraphPropsExtend = TypographyBaseProps & {
 };
 type TypographyTextPropsExtend = TypographyBaseProps & {
     /**
-     * @description The size of the text.
+     * If true, the text will not wrap to the next line and instead will be truncated with an ellipsis when it overflows.
+     * This is useful when you want to keep the text in a single line.
+     * @default false
+     */
+    noWrap?: boolean;
+
+    /**
+     * The size of the text.
      * @default "normal"
      */
     size?: 'small' | 'normal';
 
     /**
-     * @description Callback function that is triggered when the text value changes.
+     * Callback function that is triggered when the text value changes.
      * @param value The new value of the text.
      */
     onChange?: (value: string) => void;

src/molecules/ColorPicker/styles.tsx

@@ -1,4 +1,21 @@
 import styled from '@emotion/styled';
 import { ColorPicker } from 'antd';
+import { getExcludeForwardProps } from '../../utils';
+import { RdColorPickerProps } from './types';
 
-export const ColorPickerStyles = styled(ColorPicker)``;
+export const ColorPickerStyles = styled(ColorPicker, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdColorPickerProps>(
+            ['readonly'] as (keyof RdColorPickerProps)[],
+            prop
+        ),
+})<RdColorPickerProps>`
+    ${({ readonly }) => {
+        return (
+            readonly &&
+            `
+                pointer-events: none;
+            `
+        );
+    }}
+`;

src/molecules/ColorPicker/types.ts

@@ -10,7 +10,15 @@ type ColorPickerComponentTokenExtend = {};
 //#endregion
 
 //#region Define extended types
-type ColorPickerPropsExtend = {};
+type ColorPickerPropsExtend = {
+    /**
+     * Determines whether the color picker should be in a read-only state.
+     * When set to `true`, user interactions such as selecting or changing colors are disabled.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+};
 //#endregion
 
 //#region Export types

src/molecules/Divider/Divider.tsx

@@ -2,5 +2,6 @@ import { DividerStyles } from './styles';
 import { RdDividerComponent } from './types';
 
 export const Divider: RdDividerComponent = props => {
-    return <DividerStyles {...props} />;
+    const { disableMargin = false, ...antdProps } = props;
+    return <DividerStyles disableMargin={disableMargin} {...antdProps} />;
 };

src/molecules/Divider/styles.tsx

@@ -1,4 +1,16 @@
 import styled from '@emotion/styled';
 import { Divider } from 'antd';
+import { getExcludeForwardProps } from '../../utils';
+import { RdDividerProps } from './types';
+import { css } from '@emotion/react';
 
-export const DividerStyles = styled(Divider)``;
+export const DividerStyles = styled(Divider, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdDividerProps>(['disableMargin'] as (keyof RdDividerProps)[], prop),
+})<RdDividerProps>`
+    ${({ disableMargin }) => {
+        return disableMargin && css`
+            margin: 0;
+        `;
+    }}
+`;

src/molecules/Divider/types.ts

@@ -10,7 +10,13 @@ type DividerComponentTokenExtend = {};
 //#endregion
 
 //#region Define extended types
-type DividerPropsExtend = {};
+type DividerPropsExtend = {
+    /**
+     * If `true`, removes the default margin of the Divider.
+     * @default false.
+     */
+    disableMargin?: boolean;
+};
 //#endregion
 
 //#region Export types

src/molecules/Pagination/Pagination.tsx

@@ -1,6 +1,11 @@
+import { useContext } from 'react';
+import { ConfigProvider } from '../../organisms';
 import { PaginationStyled } from './styles';
 import { RdPaginationComponent } from './types';
 
 export const Pagination: RdPaginationComponent = props => {
-    return <PaginationStyled {...props} />;
+    const { pagination: defaultPaginationProps } = useContext(ConfigProvider.ConfigContext);
+    const { pageSizeOptions } = defaultPaginationProps || {};
+
+    return <PaginationStyled pageSizeOptions={pageSizeOptions} {...props} />;
 };

src/molecules/Select/index.tsx

@@ -1,2 +1,3 @@
+export * from './strategies';
 export * from './Select';
 export * from './types';

src/molecules/Select/strategies/index.ts

@@ -0,0 +1 @@
+export * from './selectFilterOptionByLabel';

src/molecules/Select/strategies/selectFilterOptionByLabel.tsx

@@ -0,0 +1,8 @@
+import { RdSelectProps } from '../types';
+
+export const selectFilterOptionByLabel: RdSelectProps['filterOption'] = (input, option) => {
+    return (
+        option?.props?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+        option?.props?.label?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    );
+};

src/molecules/Steps/Steps.tsx

@@ -0,0 +1,6 @@
+import { StepsStyles } from './styles';
+import { RdStepsComponent } from './types';
+
+export const Steps: RdStepsComponent = props => {
+    return <StepsStyles {...props} />;
+};

src/molecules/Steps/index.tsx

@@ -0,0 +1,2 @@
+export * from './Steps';
+export * from './types';

src/molecules/Steps/styles.tsx

@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Steps } from 'antd';
+
+export const StepsStyles = styled(Steps)``;

src/molecules/Steps/types.ts

@@ -0,0 +1,25 @@
+import { GetProps, Steps } from 'antd';
+import { ComponentToken as StepsComponentTokenAntd } from 'antd/es/collapse/style';
+
+//#region Define Ant Design types
+type StepsPropsAntd = GetProps<typeof Steps>;
+
+//#endregion
+
+//#region Define extended component tokens
+type StepsComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type StepsPropsExtend = {};
+//#endregion
+
+//#region Export types
+export type RdStepsProps = StepsPropsAntd & StepsPropsExtend;
+
+export type RdStepsComponentToken = StepsComponentTokenAntd & StepsComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdStepsComponent = React.FC<RdStepsProps>;
+//#endregion

src/molecules/Table/Table.tsx

@@ -5,11 +5,23 @@ import { AnyObject } from 'antd/es/_util/type';
 import { RowSortable } from './sortable';
 import { TableStyledFunc } from './styles';
 import { RdTableProps } from './types';
+import { useContext, useMemo } from 'react';
+import { ConfigProvider } from '../../organisms';
 
 export const Table = <RecordType extends AnyObject = AnyObject>(
     props: RdTableProps<RecordType>
 ) => {
-    const { allowSort = false, onChangeSort, ...antdProps } = props;
+    const { allowSort = false, pagination, onChangeSort, ...antdProps } = props;
+    const { table: defaultTableProps } = useContext(ConfigProvider.ConfigContext);
+    const { pagination: defaultPagination } = defaultTableProps || {};
+
+    const paginationWithDefault = useMemo(() => {
+        return {
+            ...defaultPagination,
+            ...pagination,
+        };
+    }, [pagination, defaultPagination]);
+
     const TableStyled = TableStyledFunc<RecordType>();
 
     if (allowSort && props.rowKey) {
@@ -32,11 +44,15 @@ export const Table = <RecordType extends AnyObject = AnyObject>(
                     items={dataSource.map(i => i[props.rowKey as string])}
                     strategy={verticalListSortingStrategy}
                 >
-                    <TableStyled components={{ body: { row: RowSortable } }} {...antdProps} />
+                    <TableStyled
+                        components={{ body: { row: RowSortable } }}
+                        pagination={paginationWithDefault}
+                        {...antdProps}
+                    />
                 </SortableContext>
             </DndContext>
         );
     }
 
-    return <TableStyled {...antdProps} />;
+    return <TableStyled pagination={paginationWithDefault} {...antdProps} />;
 };

src/molecules/index.ts

@@ -9,6 +9,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Checkbox';
 export * from './Collapse';
+export * from './ColorPicker';
 export * from './DatePicker';
 export * from './Divider';
 export * from './Drawer';
@@ -35,6 +36,7 @@ export * from './Skeleton';
 export * from './Slider';
 export * from './Space';
 export * from './Spin';
+export * from './Steps';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';

src/molecules/types.ts

@@ -7,6 +7,7 @@ import { RdBadgeComponentToken } from './Badge';
 import { RdBreadcrumbComponentToken } from './Breadcrumb';
 import { RdButtonComponentToken } from './Button';
 import { RdCardComponentToken } from './Card';
+import { RdCarouselComponentToken } from './Carousel';
 import { CheckboxComponentToken } from './Checkbox';
 import { RdCollapseComponentToken } from './Collapse';
 import { RdColorPickerComponentToken } from './ColorPicker';
@@ -34,6 +35,7 @@ import { RdSkeletonComponentToken } from './Skeleton';
 import { RdSliderComponentToken } from './Slider';
 import { RdSpaceComponentToken } from './Space';
 import { RdSpinComponentToken } from './Spin';
+import { RdStepsComponentToken } from './Steps';
 import { RdSwitchComponentToken } from './Switch';
 import { RdTableComponentToken } from './Table';
 import { RdTabsComponentToken } from './Tabs';
@@ -51,7 +53,7 @@ export interface RdMoleculesTokenMap {
     Button?: RdButtonComponentToken;
     Breadcrumb?: RdBreadcrumbComponentToken;
     Card?: RdCardComponentToken;
-    // Carousel?: CarouselComponentToken;
+    Carousel?: RdCarouselComponentToken;
     // Cascader?: CascaderComponentToken;
     Checkbox?: CheckboxComponentToken;
     ColorPicker?: RdColorPickerComponentToken;
@@ -95,7 +97,7 @@ export interface RdMoleculesTokenMap {
     // Transfer?: TransferComponentToken;
     Tabs?: RdTabsComponentToken;
     // Calendar?: CalendarComponentToken;
-    // Steps?: StepsComponentToken;
+    Steps?: RdStepsComponentToken;
     Menu?: RdMenuComponentToken;
     Modal?: RdModalComponentToken;
     Message?: RdMessageComponentToken;

src/organisms/ConfigProvider/ConfigProvider.tsx

@@ -1,13 +1,23 @@
 import { ConfigProvider as ConfigProviderAntd } from 'antd';
-import { RdConfigProviderCompoundedComponent, RdConfigProviderProps } from './types';
+import { ConfigContext } from './context';
+import { RdConfigConsumerProps } from './context/types';
+import { RdConfigProviderCompoundedComponent, RdConfigProviderInternalComponent } from './types';
 
-export const ConfigProviderInternal = ({ ...antdProps }: RdConfigProviderProps) => {
-    return <ConfigProviderAntd {...antdProps} />;
+export const ConfigProviderInternal: RdConfigProviderInternalComponent = props => {
+    return (
+        <ConfigContext.Provider
+            value={{
+                ...(props as RdConfigConsumerProps),
+            }}
+        >
+            <ConfigProviderAntd {...props} />
+        </ConfigContext.Provider>
+    );
 };
 
 export const ConfigProvider = ConfigProviderInternal as RdConfigProviderCompoundedComponent;
 
-ConfigProvider.ConfigContext = ConfigProviderAntd.ConfigContext;
+ConfigProvider.ConfigContext = ConfigContext;
 ConfigProvider.SizeContext = ConfigProviderAntd.SizeContext;
 ConfigProvider.config = ConfigProviderAntd.config;
 ConfigProvider.useConfig = ConfigProviderAntd.useConfig;

src/organisms/ConfigProvider/configs/pagination.ts

@@ -0,0 +1,14 @@
+import { PaginationConfig } from 'antd/es/config-provider/context';
+import { RdPaginationProps } from '../../../molecules';
+
+//#region Define Ant Design types
+type PaginationConfigAntd = PaginationConfig;
+//#endregion
+
+//#region Define extended types
+interface PaginationConfigExtend extends Pick<RdPaginationProps, 'pageSizeOptions'> {}
+//#endregion
+
+//#region Export types
+export type RdPaginationConfig = PaginationConfigAntd & PaginationConfigExtend;
+//#endregion

src/organisms/ConfigProvider/configs/table.ts

@@ -0,0 +1,14 @@
+import { TableConfig } from 'antd/es/config-provider/context';
+import { RdTableProps } from '../../../molecules';
+
+//#region Define Ant Design types
+type TableConfigAntd = TableConfig;
+//#endregion
+
+//#region Define extended types
+interface TableConfigExtend extends Pick<RdTableProps, 'pagination'> {}
+//#endregion
+
+//#region Export types
+export type RdTableConfig = TableConfigAntd & TableConfigExtend;
+//#endregion

src/organisms/ConfigProvider/context/constants.ts

@@ -0,0 +1,2 @@
+export const defaultPrefixCls = 'ant';
+export const defaultIconPrefixCls = 'anticon';

src/organisms/ConfigProvider/context/helper.ts

@@ -0,0 +1,8 @@
+import { defaultPrefixCls } from './constants';
+
+export const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) {
+        return customizePrefixCls;
+    }
+    return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
+};

src/organisms/ConfigProvider/context/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { defaultIconPrefixCls, defaultPrefixCls } from './constants';
+import { RdConfigConsumerProps } from './types';
+import { defaultGetPrefixCls } from './helper';
+
+export const ConfigContext = React.createContext<RdConfigConsumerProps>({
+    // We provide a default function for Context without provider
+    getPrefixCls: defaultGetPrefixCls,
+    iconPrefixCls: defaultIconPrefixCls,
+});