Merge pull request #13 from 1Byte-Software/develop

Custom ConfigProvider

Author: KennethWise

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';