@cleartrip/ct-design-button 4.0.0 → 4.1.0-SNAPSHOT-native-main.1

package/dist/type.d.ts

@@ -1,48 +1,29 @@
-import { ReactNode } from 'react';
-import { BaseStyleConfigProps, HtmlCompositeAttributes, TypographyStyleConfigProps } from '@cleartrip/ct-design-types';
-export declare enum ButtonSize {
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large"
-}
-export declare enum IconPosition {
-    LEFT = "left",
-    RIGHT = "right"
-}
-export declare enum ButtonVariant {
-    OUTLINE = "outline",
-    CONTAINED = "contained",
-    BARE = "bare"
-}
-export declare enum ButtonColor {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    TERTIARY = "tertiary"
-}
+import type { Styles } from '@cleartrip/ct-design-types';
+import { TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+import { INativeUIEvent } from '@cleartrip/ct-design-types';
+import { ButtonSize, ButtonVariant, ButtonColor } from './constants';
 export type ButtonSizeType = `${ButtonSize}`;
-export type IconPositionType = `${IconPosition}`;
 export type ButtonVariantType = `${ButtonVariant}`;
 export type ButtonColorType = `${ButtonColor}`;
-export type OwnButtonProps = Partial<{
-    type: 'submit' | 'reset' | 'button';
+export type IClickEvent = INativeUIEvent;
+export type IButtonProps = Partial<{
+    children: React.ReactNode;
     size: 'small' | 'medium' | 'large';
     variant: 'bare' | 'contained' | 'outline';
     color: 'primary' | 'secondary' | 'tertiary';
     isFullWidth: boolean;
     loading: boolean;
     disabled: boolean;
-    minWidth: string;
-    showLeftIcon: boolean;
-    showRightIcon: boolean;
-    LeftIcon: ReactNode;
-    RightIcon: ReactNode;
+    prefixIcon: React.ReactNode;
+    suffixIcon: React.ReactNode;
+    onClick: (event: IClickEvent) => void;
     styleConfig?: {
-        root?: BaseStyleConfigProps;
-        container?: BaseStyleConfigProps;
+        root?: Styles[];
+        container?: Styles[];
         typography?: TypographyStyleConfigProps;
-        iconContainer?: BaseStyleConfigProps;
+        prefixIconContainer?: Styles[];
+        suffixIconContainer?: Styles[];
     };
+    noHover?: boolean;
 }>;
-export interface ButtonProps extends HtmlCompositeAttributes<OwnButtonProps, 'Button'>, OwnButtonProps {
-}
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAEvH,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,cAAc,GAAG,GAAG,UAAU,EAAE,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,GAAG,YAAY,EAAE,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,GAAG,aAAa,EAAE,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,GAAG,WAAW,EAAE,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IAKnC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAKpC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKnC,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IAK1C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAI5C,WAAW,EAAE,OAAO,CAAC;IAIrB,OAAO,EAAE,OAAO,CAAC;IAIjB,QAAQ,EAAE,OAAO,CAAC;IAIlB,QAAQ,EAAE,MAAM,CAAC;IAMjB,YAAY,EAAE,OAAO,CAAC;IAItB,aAAa,EAAE,OAAO,CAAC;IAIvB,QAAQ,EAAE,SAAS,CAAC;IAIpB,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE;QAIZ,IAAI,CAAC,EAAE,oBAAoB,CAAC;QAK5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;QAKjC,UAAU,CAAC,EAAE,0BAA0B,CAAC;QAKxC,aAAa,CAAC,EAAE,oBAAoB,CAAC;KACtC,CAAC;CACH,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,uBAAuB,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,cAAc;CAAG"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Button/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,GAAG,UAAU,EAAE,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,GAAG,aAAa,EAAE,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,GAAG,WAAW,EAAE,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAK1B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAKnC,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IAK1C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAI5C,WAAW,EAAE,OAAO,CAAC;IAIrB,OAAO,EAAE,OAAO,CAAC;IAIjB,QAAQ,EAAE,OAAO,CAAC;IAIlB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAI5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAI5B,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAItC,WAAW,CAAC,EAAE;QAIZ,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAIhB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QAIrB,UAAU,CAAC,EAAE,0BAA0B,CAAC;QAKxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;QAI/B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;KAChC,CAAC;IAIF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,46 @@
 {
   "name": "@cleartrip/ct-design-button",
-  "version": "4.0.0",
+  "version": "4.1.0-SNAPSHOT-native-main.1",
   "description": "",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-button.cjs.js",
+  "react-native": "src/index.ts",
+  "main": "./dist/ct-design-button.cjs.js",
   "jsnext:main": "dist/ct-design-button.esm.js",
   "module": "dist/ct-design-button.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-button.esm.js",
+      "default": "./dist/ct-design-button.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-button.esm.js": "./dist/ct-design-button.browser.esm.js",
     "./dist/ct-design-button.cjs.js": "./dist/ct-design-button.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-container": "4.0.0",
-    "@cleartrip/ct-design-typography": "4.0.0",
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-dotted-loader": "4.0.0",
-    "@cleartrip/ct-design-types": "4.0.0"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@cleartrip/ct-design-typography": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-container": "4.1.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-conditional-wrap": "4.1.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-dotted-loader": "4.1.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-native-main.12",
+    "@cleartrip/ct-design-event-propagation": "4.0.0-SNAPSHOT-native-main.12"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -36,6 +51,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Button.native.tsx

@@ -0,0 +1,126 @@
+import React, { forwardRef, useMemo } from 'react';
+
+import { Pressable, View } from 'react-native';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { Container } from '@cleartrip/ct-design-container';
+import EventCollectorProvider, { useMergeEvents } from '@cleartrip/ct-design-event-propagation';
+import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
+import Conditional from '@cleartrip/ct-design-conditional-wrap';
+import { getButtonStyles, getButtonVariantLabelColor, getTypographyVariant } from './style';
+import { IButtonProps } from './type';
+import { ButtonColor, ButtonSize, ButtonVariant } from './constants';
+
+const staticButtonStyles = makeStyles((theme) => {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      paddingHorizontal: theme?.spacing[3],
+      borderRadius: theme?.border.radius[8],
+    },
+    prefixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: theme?.spacing[1],
+    },
+    suffixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingLeft: theme?.spacing[1],
+    },
+  };
+});
+
+const Button = forwardRef(
+  (
+    {
+      children,
+      color = ButtonColor.PRIMARY,
+      disabled = false,
+      isFullWidth = false,
+      loading = false,
+      prefixIcon,
+      suffixIcon,
+      size = ButtonSize.MEDIUM,
+      variant = ButtonVariant.CONTAINED,
+      onClick,
+      styleConfig,
+    }: IButtonProps,
+    ref: React.ForwardedRef<View>,
+  ) => {
+    const globalTheme = useTheme();
+
+    const {
+      root: customRootStyles = [],
+      prefixIconContainer: customPrefixIconContainerStyles = [],
+      suffixIconContainer: customSuffixIconContainerStyles = [],
+      typography: customTypograpyStyles = {},
+    } = styleConfig || {};
+
+    const buttonStyles = useStyles(
+      (theme) => {
+        return {
+          root: getButtonStyles({ theme: theme, color, disabled, isFullWidth, loading, size, variant, isHover: false }),
+        };
+      },
+      [color, disabled, isFullWidth, loading, size, variant],
+    );
+
+    const buttonLabelColor = useMemo(() => {
+      return getButtonVariantLabelColor(variant, color, disabled, globalTheme, loading);
+    }, [variant, color, disabled, globalTheme, loading]);
+
+    const mergedRootStyles = useNativeMergeStyles(
+      [staticButtonStyles?.root, buttonStyles?.root, ...customRootStyles],
+      [customRootStyles, buttonStyles?.root],
+    );
+
+    const mergedEvents = useMergeEvents({ onClick: [onClick] });
+
+    return (
+      <Conditional
+        condition={!!onClick}
+        wrap={(children) => <EventCollectorProvider value={mergedEvents}>{children}</EventCollectorProvider>}
+      >
+        <Pressable ref={ref} disabled={disabled || loading} style={mergedRootStyles} onPress={onClick}>
+          {loading ? (
+            <DottedLoader />
+          ) : (
+            <>
+              {prefixIcon && (
+                <Container styleConfig={{ root: [staticButtonStyles?.prefixIcon, ...customPrefixIconContainerStyles] }}>
+                  {prefixIcon}
+                </Container>
+              )}
+              <Typography
+                variant={getTypographyVariant(size)}
+                colorCode={buttonLabelColor}
+                styleConfig={customTypograpyStyles}
+              >
+                {children}
+              </Typography>
+              {suffixIcon && (
+                <Container styleConfig={{ root: [staticButtonStyles?.suffixIcon, ...customSuffixIconContainerStyles] }}>
+                  {suffixIcon}
+                </Container>
+              )}
+            </>
+          )}
+        </Pressable>
+      </Conditional>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/Button.tsx

@@ -0,0 +1,146 @@
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { Container } from '@cleartrip/ct-design-container';
+
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { getButtonStyles, getButtonVariantLabelColor, getTypographyVariant } from './style';
+import { IButtonProps } from './type';
+import { ButtonColor, ButtonSize, ButtonVariant } from './constants';
+import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
+
+const staticButtonStyles = makeStyles((theme) => {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      paddingHorizontal: theme.spacing[3],
+      // borderRadius: theme.border.radius[8],
+    },
+    prefixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: theme.spacing[1],
+    },
+    suffixIcon: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingLeft: theme.spacing[1],
+    },
+  };
+});
+
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  (
+    {
+      size = ButtonSize.MEDIUM,
+      variant = ButtonVariant.CONTAINED,
+      color = ButtonColor.PRIMARY,
+      isFullWidth = false,
+      disabled = false,
+      onClick = () => {
+        // no-op
+      },
+      prefixIcon,
+      suffixIcon,
+      children,
+      loading = false,
+      styleConfig = {},
+      noHover = false,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const theme = useTheme();
+    const [isHover, setHover] = useState(false);
+
+    const buttonStyles = useStyles(
+      (theme) => {
+        return {
+          root: getButtonStyles({
+            theme: theme,
+            size,
+            variant,
+            color,
+            disabled,
+            isFullWidth,
+            loading,
+            isHover: noHover ? false : isHover,
+          }),
+        };
+      },
+      [size, variant, color, disabled, isFullWidth, loading, isHover, noHover, theme],
+    );
+
+    const {
+      root: customRootStyles = [],
+      container: customContainerStyles = [],
+      typography: customTypographyStyles = {},
+      prefixIconContainer: customPrefixIconContainerStyles = [],
+      suffixIconContainer: customSuffixIconContainerStyles = [],
+    } = styleConfig || {};
+
+    const buttonLabelColor = useMemo(() => {
+      return getButtonVariantLabelColor(variant, color, disabled, theme, loading);
+    }, [variant, color, disabled, theme, loading]);
+
+    const mergedRootStyles = useWebMergeStyles(
+      [staticButtonStyles.root, buttonStyles.root, ...customRootStyles],
+      [staticButtonStyles.root, buttonStyles.root, customRootStyles],
+    );
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (!disabled && onClick && !loading)
+          onClick({ stopPropagation: () => event.stopPropagation(), preventDefault: () => event.preventDefault() });
+        if (disabled || loading) event.preventDefault();
+      },
+      [disabled, onClick, loading],
+    );
+
+    return (
+      <button
+        ref={forwardedRef}
+        onClick={handleClick}
+        className={mergedRootStyles}
+        {...rest}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      >
+        {loading ? (
+          <DottedLoader />
+        ) : (
+          <>
+            {prefixIcon && (
+              <Container styleConfig={{ root: [staticButtonStyles.prefixIcon, ...customPrefixIconContainerStyles] }}>
+                {prefixIcon}
+              </Container>
+            )}
+            <Container styleConfig={{ root: customContainerStyles }}>
+              <Typography
+                variant={getTypographyVariant(size)}
+                colorCode={buttonLabelColor}
+                styleConfig={customTypographyStyles}
+              >
+                {children}
+              </Typography>
+            </Container>
+            {suffixIcon && (
+              <Container styleConfig={{ root: [staticButtonStyles.suffixIcon, ...customSuffixIconContainerStyles] }}>
+                {suffixIcon}
+              </Container>
+            )}
+          </>
+        )}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+export default Button;

package/src/constants.ts

@@ -0,0 +1,18 @@
+export enum ButtonSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export enum ButtonVariant {
+  OUTLINE = 'outline',
+  CONTAINED = 'contained',
+  BARE = 'bare',
+}
+
+export enum ButtonColor {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  NEUTRAL = 'neutral',
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+
+export type * from './type';
+export * from './constants';