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

Add templates and improve molecules

Author: KennethWise

package.json

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

src/ConfigProviderDesign.tsx

@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { FlexStyles } from './styles';
 import { RdFlexProps } from './types';
 
 export const Flex = ({ ...antdProps }: RdFlexProps) => {
-    return (
-        <ConfigProviderDesign>
-            <FlexStyles {...antdProps} />
-        </ConfigProviderDesign>
-    );
+    return <FlexStyles {...antdProps} />;
 };

src/atomics/Flex/Flex.tsx

@@ -1,9 +1,9 @@
 import { theme } from 'antd';
-import { IRdThemeConfig } from './utils/types';
+import { RdThemeConfig } from './organisms';
 
 export interface IConfig {
-    designToken: NonNullable<IRdThemeConfig['token']>;
-    componentToken: IRdThemeConfig['components'];
+    designToken: NonNullable<RdThemeConfig['token']>;
+    componentToken: RdThemeConfig['components'];
 }
 
 export const config: IConfig = {
@@ -14,4 +14,5 @@ export const config: IConfig = {
 export * from './atomics';
 export * from './molecules';
 export * from './organisms';
+export * from './templates';
 export * from './utils';

src/index.tsx

@@ -1,14 +1,74 @@
-import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { forwardRef, useMemo, useState } from 'react';
+import { RdTooltipProps, Tooltip } from '../Tooltip';
 import { ButtonGroup } from './ButtonGroup';
 import { ButtonStyles } from './styles';
-import { RdButtonComponent, RdButtonCompoundedComponent } from './types';
-import clsx from 'clsx';
+import { RdButtonComponent, RdButtonCompoundedComponent, RdButtonProps } from './types';
 
 export const ButtonInternal: RdButtonComponent = forwardRef((props, ref) => {
-    const { rootClassName } = props;
+    const {
+        rootClassName,
+        tooltip,
+        hideTooltipWhenClick = true,
+        onClick,
+        onMouseLeave,
+        ...defaultProps
+    } = props;
+    const [isOpenTooltip, setIsOpenTooltip] = useState(false);
+
+    const handleClickButton: RdButtonProps['onClick'] = event => {
+        if (hideTooltipWhenClick) {
+            setIsOpenTooltip(false);
+        }
+
+        if (onClick) {
+            onClick(event);
+        }
+    };
+
+    const handleMouseLeave: RdButtonProps['onMouseLeave'] = event => {
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+    };
+
+    const RdButtonStyles = useMemo(() => {
+        return (
+            <ButtonStyles
+                rootClassName={clsx('rd-button', rootClassName)}
+                ref={ref}
+                onMouseLeave={handleMouseLeave}
+                onClick={handleClickButton}
+                {...defaultProps}
+            />
+        );
+    }, [defaultProps, rootClassName, handleClickButton, handleMouseLeave]);
+
+    if (tooltip) {
+        const tooltipProps: RdTooltipProps = hideTooltipWhenClick
+            ? {
+                  open: isOpenTooltip,
+                  onOpenChange: visible => setIsOpenTooltip(visible),
+              }
+            : {};
+
+        if (typeof tooltip === 'string') {
+            return (
+                <Tooltip {...tooltipProps} title={tooltip}>
+                    {RdButtonStyles}
+                </Tooltip>
+            );
+        }
+
+        return (
+            <Tooltip {...tooltipProps} {...tooltip}>
+                {RdButtonStyles}
+            </Tooltip>
+        );
+    }
 
-    return <ButtonStyles rootClassName={clsx('rd-button', rootClassName)} ref={ref} {...props} />;
+    return RdButtonStyles;
 });
 
 export const Button = ButtonInternal as RdButtonCompoundedComponent;
-Button.Group = ButtonGroup;
+Button.Group = ButtonGroup;

src/molecules/Button/Button.tsx

@@ -9,7 +9,6 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
         getExcludeForwardProps<RdButtonProps>(['fullWidth'] as (keyof RdButtonProps)[], prop),
 })<RdButtonProps>`
     ${({ fullWidth }) => fullWidth && fullWidthCSS}
-
     ${({ color }) => {
         switch (color) {
             case 'second':
@@ -28,8 +27,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
                 return color;
         }
     }}
-
-     ${({ align }) => {
+        ${({ align }) => {
         switch (align) {
             case 'left':
                 return css`
@@ -46,7 +44,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
             default:
                 return null;
         }
-    }}
+    }};
 `;
 export const ButtonGroupStyles = styled(Button.Group)<RdButtonGroupProps>``;
 

src/molecules/Button/styles.tsx

@@ -2,6 +2,7 @@ import { Button, ButtonProps, GetProps } from 'antd';
 import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style';
 import { ButtonInternal } from './Button';
 import { ButtonGroup } from './ButtonGroup';
+import { RdTooltipProps } from '../Tooltip';
 
 //#region Define Ant Design types
 type ButtonPropsAntd = GetProps<typeof Button>;
@@ -37,6 +38,18 @@ type ButtonPropsExtend = {
      * Align content in the button.
      */
     align?: 'left' | 'center' | 'right';
+
+    /**
+     * Configuration for the tooltip displayed when hovering over the button.
+     * @see string | RdTooltipProps for more details on available options.
+     */
+    tooltip?: string | RdTooltipProps;
+
+    /**
+     * 	If `true`, the button  will auto hide when the button is clicked.
+     * @default true
+     */
+    hideTooltipWhenClick?: boolean;
 };
 
 type ButtonGroupPropsExtend = {};

src/molecules/Button/types.ts

@@ -0,0 +1,7 @@
+import { forwardRef } from 'react';
+import { CarouselStyles } from './styles';
+import { RdCarouselComponent } from './types';
+
+export const Carousel: RdCarouselComponent = forwardRef((props, ref) => {
+    return <CarouselStyles ref={ref} {...props} />;
+});

src/molecules/Button/useExtendColor.ts

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