Add templates and improve molecules

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/atomics/Flex/Flex.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/index.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/molecules/Button/Button.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/styles.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/types.ts

@@ -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/Carousel/Carousel.tsx

@@ -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/Carousel/index.tsx

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

src/molecules/Carousel/styles.tsx

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

src/molecules/Carousel/types.ts

@@ -0,0 +1,31 @@
+import { Carousel, GetProps } from 'antd';
+import { CarouselRef } from 'antd/es/carousel';
+import { ComponentToken as CarouselComponentTokenAntd } from 'antd/es/collapse/style';
+
+//#region Define Ant Design types
+type CarouselPropsAntd = GetProps<typeof Carousel>;
+
+type CarouselRefAntd = CarouselRef;
+//#endregion
+
+//#region Define extended component tokens
+type CarouselComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type CarouselPropsExtend = {};
+type CarouselRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdCarouselProps = CarouselPropsAntd & CarouselPropsExtend;
+export type RdCarouselRef = CarouselRefAntd & CarouselRefExtend;
+
+export type RdCarouselComponentToken = CarouselComponentTokenAntd & CarouselComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdCarouselComponent = React.ForwardRefExoticComponent<
+    RdCarouselProps & React.RefAttributes<RdCarouselRef>
+>;
+//#endregion

src/molecules/DatePicker/TimePicker.tsx

@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { TimePickerStyles } from './styles';
 import { RdTimePickerProps } from './types';
 
 export const TimePicker = (props: RdTimePickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <TimePickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <TimePickerStyles {...props} />;
 };

src/molecules/DatePicker/WeekPicker.tsx

@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { WeekPickerStyles } from './styles';
 import { RdWeekPickerProps } from './types';
 
 export const WeekPicker = (props: RdWeekPickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <WeekPickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <WeekPickerStyles {...props} />;
 };

src/molecules/DatePicker/YearPicker.tsx

@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { YearPickerStyles } from './styles';
 import { RdYearPickerProps } from './types';
 
 export const YearPicker = (props: RdYearPickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <YearPickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <YearPickerStyles {...props} />;
 };

src/molecules/Dropdown/DropdownButton.tsx

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

src/molecules/Form/Form.tsx

@@ -5,9 +5,9 @@ import { FormItemControl } from './FormItemControl';
 import { FormList } from './FormList';
 import { FormProvider } from './FormProvider';
 import { FormStyles } from './styles';
-import { RdFormCompoundedComponent, RdFormProps } from './types';
+import { RdFormComponent, RdFormCompoundedComponent, RdFormProps } from './types';
 
-export const FormInternal = (props: RdFormProps) => {
+export const FormInternal: RdFormComponent = (props: RdFormProps) => {
     return <FormStyles {...props} />;
 };
 

src/molecules/Form/FormItem.tsx

@@ -1,20 +1,11 @@
 import { FormItemStyles } from './styles';
 import { RdFormItemProps } from './types';
 
-export const FormItem = ({ errorMessage, description, ...antdProps }: RdFormItemProps) => {
+export const FormItem = ({ errorMessage, ...antdProps }: RdFormItemProps) => {
     if (errorMessage) {
         antdProps.validateStatus = 'error';
         antdProps.help = errorMessage;
     }
 
-    if (description) {
-        antdProps.label = (
-            <>
-                {antdProps.label}
-                <div>{description}</div>
-            </>
-        );
-    }
-
     return <FormItemStyles {...antdProps} />;
 };

src/molecules/Form/FormItemControl.tsx

@@ -5,14 +5,5 @@ import { RdFormItemControlProps } from './types';
 export const FormItemControl = <TFieldValues extends FieldValues = FieldValues>(
     props: RdFormItemControlProps<TFieldValues>
 ) => {
-    // if (description) {
-    //     antdProps.label = (
-    //         <>
-    //             <div>{antdProps.label}</div>
-    //             <div>{description}</div>
-    //         </>
-    //     );
-    // }
-
     return <FormItemReactHookForm<TFieldValues> {...props} />;
 };