@cleartrip/ct-design-dialog 4.0.0 → 5.0.0

package/package.json

@@ -1,35 +1,42 @@
 {
   "name": "@cleartrip/ct-design-dialog",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Dialog Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-dialog.cjs.js",
+  "main": "./dist/ct-design-dialog.cjs.js",
+  "react-native": "src/index.native.ts",
   "jsnext:main": "dist/ct-design-dialog.esm.js",
   "module": "dist/ct-design-dialog.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-dialog.esm.js",
+      "default": "./dist/ct-design-dialog.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-dialog.esm.js": "./dist/ct-design-dialog.browser.esm.js",
     "./dist/ct-design-dialog.cjs.js": "./dist/ct-design-dialog.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-types": "4.0.0",
-    "@cleartrip/ct-design-typography": "4.0.0",
-    "@cleartrip/ct-design-modal": "4.0.0",
-    "@cleartrip/ct-design-button": "4.0.0",
-    "@cleartrip/ct-design-card": "4.0.0",
-    "@cleartrip/ct-design-container": "4.0.0"
+    "@cleartrip/ct-design-container": "5.0.0",
+    "@cleartrip/ct-design-style-manager": "5.0.0",
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-modal": "5.0.0",
+    "@cleartrip/ct-design-types": "5.0.0",
+    "@cleartrip/ct-design-typography": "5.0.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-icons": "26.0.0"
+    "@cleartrip/ct-design-icons": "5.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -40,6 +47,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/Dialog.native.tsx

@@ -0,0 +1,83 @@
+import { forwardRef, useMemo } from 'react';
+
+import type { ContainerRef } from '@cleartrip/ct-design-container';
+import {
+  ActionButtonAlignment,
+  ActionButtonVariant,
+  Modal,
+  type ActionButtonAlignmentType,
+  type ActionButtonVariantsType,
+} from '@cleartrip/ct-design-modal';
+
+import type { IDialogProps } from './type';
+
+/**
+ * Native implementation of `Dialog`.
+ *
+ * Migrated 1:1 from aldenui (`core/components/components/Dialog`).
+ * The native `Modal` already implements the `actionButtonType` +
+ * `actionButtonAlignment` slots, so this wrapper only needs to
+ * translate the legacy `overlayCloseIcon` flag set and forward
+ * everything else unchanged.
+ */
+const Dialog = forwardRef<ContainerRef, IDialogProps>(
+  (
+    {
+      children,
+      open,
+      variant,
+      placement,
+      blur,
+      allowBackdropClose,
+      overlayCloseIcon,
+      onClose,
+      styleConfig,
+      size,
+      actionButtonType: actionButtonTypeFromProps,
+      actionButtonAlignment: actionButtonAlignmentFromProps,
+    },
+    forwardedRef,
+  ) => {
+    const { root: customRootStyles = [], modalWrapperStyles = [] } = styleConfig || {};
+    const { show = false, isBack = false, showCloseIcon = false, isCenter = false } = overlayCloseIcon || {};
+
+    const actionButtonAlignment = useMemo<ActionButtonAlignmentType>(() => {
+      if (actionButtonAlignmentFromProps) return actionButtonAlignmentFromProps;
+      if (isBack) return ActionButtonAlignment.LEFT;
+      if (isCenter) return ActionButtonAlignment.CENTER;
+      return ActionButtonAlignment.RIGHT;
+    }, [actionButtonAlignmentFromProps, isBack, isCenter]);
+
+    const actionButtonType = useMemo<ActionButtonVariantsType>(() => {
+      if (actionButtonTypeFromProps) return actionButtonTypeFromProps;
+      if (isBack) return ActionButtonVariant.BACK;
+      if (showCloseIcon || show) return ActionButtonVariant.CLOSE;
+      return ActionButtonVariant.NONE;
+    }, [actionButtonTypeFromProps, isBack, showCloseIcon, show]);
+
+    return (
+      <Modal
+        ref={forwardedRef}
+        variant={variant}
+        placement={placement}
+        allowBackdropClose={allowBackdropClose}
+        onClose={onClose}
+        blur={blur}
+        open={open}
+        size={size}
+        actionButtonType={actionButtonType}
+        actionButtonAlignment={actionButtonAlignment}
+        styleConfig={{
+          root: customRootStyles,
+          modalContentStyles: modalWrapperStyles,
+        }}
+      >
+        {children}
+      </Modal>
+    );
+  },
+);
+
+Dialog.displayName = 'Dialog';
+
+export default Dialog;

package/src/Dialog.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, useMemo } from 'react';
+
+import type { ContainerRef } from '@cleartrip/ct-design-container';
+import {
+  ActionButtonAlignment,
+  ActionButtonVariant,
+  Modal,
+  ModalWithCloseOverlay,
+  type ActionButtonAlignmentType,
+  type ActionButtonVariantsType,
+} from '@cleartrip/ct-design-modal';
+
+import type { IDialogProps } from './type';
+
+/**
+ * Web implementation of `Dialog`.
+ *
+ * Migrated from aldenui (`core/components/components/Dialog`) per
+ * Migration.MD. The yagami Dialog is a thin wrapper around `Modal`
+ * that translates the legacy `overlayCloseIcon` flag set into the
+ * Modal-level `actionButtonType` + `actionButtonAlignment` contract:
+ *
+ *   - `isBack`       → `actionButtonType=BACK`, alignment `LEFT`
+ *   - `showCloseIcon`→ `actionButtonType=CLOSE`
+ *   - `isCenter`     → alignment `CENTER`
+ *   - default        → `actionButtonType=NONE`, alignment `RIGHT`
+ *
+ * The public API surface is preserved 1:1 with aldenui; the only
+ * implementation difference on web is that the underlying `Modal`
+ * does not yet implement the `actionButton*` slots directly, so we
+ * delegate the close-overlay rendering to `ModalWithCloseOverlay`
+ * whenever a visible close affordance is requested. The `NONE` case
+ * falls through to plain `Modal`.
+ */
+const Dialog = forwardRef<ContainerRef, IDialogProps>(
+  (
+    {
+      children,
+      open,
+      variant,
+      placement,
+      blur,
+      allowBackdropClose,
+      overlayCloseIcon,
+      onClose,
+      styleConfig,
+      size,
+      insidePortal = true,
+      actionButtonType: actionButtonTypeFromProps,
+      actionButtonAlignment: actionButtonAlignmentFromProps,
+    },
+    forwardedRef,
+  ) => {
+    const { root: customRootStyles = [], modalWrapperStyles = [] } = styleConfig || {};
+    const {
+      show = false,
+      isBack = false,
+      showCloseIcon = false,
+      isCenter = false,
+      isTop = true,
+    } = overlayCloseIcon || {};
+
+    // Translate legacy `overlayCloseIcon` flags to the new
+    // Modal-level `actionButton*` contract. Explicit `actionButton*`
+    // props take precedence so consumers can opt into the new API
+    // directly without touching `overlayCloseIcon`.
+    const actionButtonAlignment = useMemo<ActionButtonAlignmentType>(() => {
+      if (actionButtonAlignmentFromProps) return actionButtonAlignmentFromProps;
+      if (isBack) return ActionButtonAlignment.LEFT;
+      if (isCenter) return ActionButtonAlignment.CENTER;
+      return ActionButtonAlignment.RIGHT;
+    }, [actionButtonAlignmentFromProps, isBack, isCenter]);
+
+    const actionButtonType = useMemo<ActionButtonVariantsType>(() => {
+      if (actionButtonTypeFromProps) return actionButtonTypeFromProps;
+      if (isBack) return ActionButtonVariant.BACK;
+      if (showCloseIcon || show) return ActionButtonVariant.CLOSE;
+      return ActionButtonVariant.NONE;
+    }, [actionButtonTypeFromProps, isBack, showCloseIcon, show]);
+
+    const needsOverlay = actionButtonType !== ActionButtonVariant.NONE;
+
+    if (needsOverlay) {
+      return (
+        // `ModalWithCloseOverlay` expects an `HTMLDivElement` ref while
+        // the public Dialog ref signature is `ContainerRef` for
+        // cross-platform parity with native. The cast keeps the public
+        // type stable until web Modal adopts the new ref shape.
+        <ModalWithCloseOverlay
+          ref={forwardedRef}
+          variant={variant}
+          placement={placement}
+          allowBackdropClose={allowBackdropClose}
+          onClose={onClose}
+          blur={blur}
+          open={open}
+          insidePortal={insidePortal}
+          size={size ?? 'NONE'}
+          isBack={actionButtonType === ActionButtonVariant.BACK}
+          isCenter={actionButtonAlignment === ActionButtonAlignment.CENTER}
+          isTop={isTop}
+          wrapperStyles={modalWrapperStyles}
+          styleConfig={{ root: customRootStyles }}
+        >
+          {children}
+        </ModalWithCloseOverlay>
+      );
+    }
+
+    return (
+      <Modal
+        ref={forwardedRef}
+        variant={variant}
+        placement={placement}
+        allowBackdropClose={allowBackdropClose}
+        onClose={onClose}
+        blur={blur}
+        open={open}
+        insidePortal={insidePortal}
+        size={size ?? 'NONE'}
+      >
+        {children}
+      </Modal>
+    );
+  },
+);
+
+Dialog.displayName = 'Dialog';
+
+export default Dialog;

package/src/DialogAction/DialogAction.native.tsx

@@ -0,0 +1,69 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Typography } from '@cleartrip/ct-design-typography';
+
+import { type IDialogActionProps } from '../type';
+import { DialogAlignmentTypes } from '../constants';
+
+/**
+ * Static style slots shared across the native DialogAction layout.
+ * Kept in lock-step with the web variant so visual output matches
+ * across platforms.
+ */
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    paddingVertical: 0,
+    justifyContent: 'center',
+    paddingHorizontal: theme.spacing[6],
+  },
+  actionContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}));
+
+/**
+ * Native implementation of `DialogAction`. Mirrors the web variant
+ * exactly — the native `Container` + `Typography` primitives already
+ * handle the RN shim so no platform-specific branches are required.
+ */
+const DialogAction = ({
+  alignment = DialogAlignmentTypes.COLUMN,
+  actionButtons = [],
+  styleConfig,
+}: IDialogActionProps) => {
+  const { root: customRootStyles = [] } = styleConfig || {};
+
+  const dynamicStyles = useStyles(
+    () => ({
+      root: {
+        flexDirection: alignment,
+      },
+    }),
+    [alignment],
+  );
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root, dynamicStyles.root, ...customRootStyles] }}>
+      {actionButtons.map((btn, index) => {
+        const { type, onClick, label, styleConfig: buttonStyleConfig } = btn || {};
+        const { root: customActionStyles = [] } = buttonStyleConfig || {};
+
+        return (
+          <Container
+            key={`actionButton_${index}`}
+            styleConfig={{ root: [staticStyles.actionContainer, ...customActionStyles] }}
+          >
+            <Typography variant='HM4' color={type} isClickable={!!onClick} onClick={onClick}>
+              {label}
+            </Typography>
+          </Container>
+        );
+      })}
+    </Container>
+  );
+};
+
+DialogAction.displayName = 'DialogAction';
+
+export default DialogAction;

package/src/DialogAction/DialogAction.tsx

@@ -0,0 +1,77 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Typography } from '@cleartrip/ct-design-typography';
+
+import { type IDialogActionProps } from '../type';
+import { DialogAlignmentTypes } from '../constants';
+
+/**
+ * Static style slots shared across the DialogAction layout.
+ *
+ * - `root` is the outer wrapper around the action list. Mirrors
+ *   aldenui's zero vertical / `theme.spacing[6]` horizontal padding
+ *   so existing dialogs keep their proportions.
+ * - `actionContainer` centers each button row; the per-button
+ *   Container uses it as a base before composing caller overrides.
+ */
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    paddingVertical: 0,
+    justifyContent: 'center',
+    paddingHorizontal: theme.spacing[6],
+  },
+  actionContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}));
+
+/**
+ * Web implementation of `DialogAction`.
+ *
+ * Migrated from aldenui (`core/components/components/Dialog/DialogAction`)
+ * per Migration.MD. Replaces the legacy `css`/`useTheme` mix with
+ * `Container` + composed `styleConfig.root` slots and a dynamic
+ * `useStyles` slot for `flexDirection`. The default `alignment` is
+ * `'column'` for parity with aldenui's vertical stack.
+ */
+const DialogAction = ({
+  alignment = DialogAlignmentTypes.COLUMN,
+  actionButtons = [],
+  styleConfig,
+}: IDialogActionProps) => {
+  const { root: customRootStyles = [] } = styleConfig || {};
+
+  const dynamicStyles = useStyles(
+    () => ({
+      root: {
+        flexDirection: alignment,
+      },
+    }),
+    [alignment],
+  );
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root, dynamicStyles.root, ...customRootStyles] }}>
+      {actionButtons.map((btn, index) => {
+        const { type, onClick, label, styleConfig: buttonStyleConfig } = btn || {};
+        const { root: customActionStyles = [] } = buttonStyleConfig || {};
+
+        return (
+          <Container
+            key={`actionButton_${index}`}
+            styleConfig={{ root: [staticStyles.actionContainer, ...customActionStyles] }}
+          >
+            <Typography variant='HM4' color={type} isClickable={!!onClick} onClick={onClick}>
+              {label}
+            </Typography>
+          </Container>
+        );
+      })}
+    </Container>
+  );
+};
+
+DialogAction.displayName = 'DialogAction';
+
+export default DialogAction;

package/src/DialogContent/DialogContent.native.tsx

@@ -0,0 +1,39 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+import type { IDialogContentProps } from '../type';
+
+/**
+ * Static slot applied to the DialogContent root. Mirrors aldenui's
+ * `theme.spacing[6]` padding + centered flex alignment so migrated
+ * call sites render identically.
+ */
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing[6],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}));
+
+/**
+ * Native implementation of `DialogContent` — functionally identical
+ * to the web variant. Kept as a separate file so platform-specific
+ * tweaks (e.g. pressable wiring, measure calls) can diverge later
+ * without touching web.
+ */
+const DialogContent = ({ headIcon, title, description, styleConfig }: IDialogContentProps) => {
+  const { root: customStyles = [] } = styleConfig || {};
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root, ...customStyles] }}>
+      {headIcon}
+      {title}
+      {description}
+    </Container>
+  );
+};
+
+DialogContent.displayName = 'DialogContent';
+
+export default DialogContent;

package/src/DialogContent/DialogContent.tsx

@@ -0,0 +1,42 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+import type { IDialogContentProps } from '../type';
+
+/**
+ * Static slot applied to the DialogContent root. Mirrors aldenui's
+ * `theme.spacing[6]` padding + centered flex alignment so migrated
+ * call sites render identically.
+ */
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing[6],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}));
+
+/**
+ * Top content slot rendered inside a Dialog body.
+ *
+ * Migrated from aldenui (`core/components/components/Dialog/DialogContent`)
+ * per Migration.MD — swaps the previous `css`/`useTheme` pattern for
+ * `Container` + composed `styleConfig.root` slots so consumers can
+ * layer style arrays on top of the default padding/alignment without
+ * the styled-components detour.
+ */
+const DialogContent = ({ headIcon, title, description, styleConfig }: IDialogContentProps) => {
+  const { root: customStyles = [] } = styleConfig || {};
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root, ...customStyles] }}>
+      {headIcon}
+      {title}
+      {description}
+    </Container>
+  );
+};
+
+DialogContent.displayName = 'DialogContent';
+
+export default DialogContent;

package/src/constants.ts

@@ -0,0 +1,9 @@
+export enum DialogAlignmentTypes {
+  ROW = 'row',
+  COLUMN = 'column',
+}
+
+export enum DialogTypes {
+  SUCCESS = 'link',
+  WARNING = 'warning',
+}

package/src/index.native.ts

@@ -0,0 +1,5 @@
+export { default as Dialog } from './Dialog.native';
+export { default as DialogAction } from './DialogAction/DialogAction.native';
+export { default as DialogContent } from './DialogContent/DialogContent.native';
+export type * from './type';
+export * from './constants';

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as Dialog } from './Dialog';
+export { default as DialogAction } from './DialogAction/DialogAction';
+export { default as DialogContent } from './DialogContent/DialogContent';
+export type * from './type';
+export * from './constants';