@cleartrip/ct-design-single-select-chip 4.0.0 → 5.0.0

package/src/SingleSelectChip.tsx

@@ -0,0 +1,137 @@
+import React, { forwardRef, memo, useState } from 'react';
+
+import { Chip } from '@cleartrip/ct-design-chip';
+import { Box } from '@cleartrip/ct-design-box';
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
+
+import { ISingleSelectProps, SingleChipProps } from './type';
+import { ChipOrientation } from './constants';
+import { singleSelectChipStaticStyles } from './style';
+
+interface ChipAtomsProps {
+  data: SingleChipProps[];
+  selectedChip: string | null;
+  onClickCb: (chip: SingleChipProps) => () => void;
+  chipStyleConfig?: ISingleSelectProps['styleConfig'] extends infer T
+    ? T extends { chip?: infer C }
+      ? C
+      : never
+    : never;
+}
+
+const ChipAtoms = memo(({ data, selectedChip, onClickCb, chipStyleConfig }: ChipAtomsProps) => {
+  return (
+    <>
+      {data.map((item) => {
+        const isSelected = item?.id === selectedChip;
+
+        return (
+          <Chip
+            key={item?.id}
+            id={item?.id}
+            label={item?.label}
+            onClick={onClickCb(item)}
+            size='sm'
+            isSelected={isSelected}
+            styleConfig={{
+              labelContainer: [singleSelectChipStaticStyles.chipLabelStyles],
+              root: [singleSelectChipStaticStyles.chipRootStyles, singleSelectChipStaticStyles.chipBoxShadow],
+              ...(chipStyleConfig || {}),
+            }}
+          />
+        );
+      })}
+    </>
+  );
+});
+
+ChipAtoms.displayName = 'ChipAtoms';
+
+const SingleSelectChip = forwardRef<ContainerRef, ISingleSelectProps>(
+  ({ onChange, data, orientation = ChipOrientation.row, selected = null, prompt, styleConfig = {} }, ref) => {
+    const { hasError = false, Icon: promptIcon, message: promptMessage } = prompt || {};
+
+    const {
+      root: customRootStyles = [],
+      chipContainer: chipContainerStyles = [],
+      promptBox: promptBoxStyles = [],
+      promptIconContainer: promptIconContainerStyles = [],
+      promptMessageTypography: promptMessageTypographyStyles,
+      chip: chipStyleConfig,
+    } = styleConfig;
+
+    const [selectedChip, setSelectedChip] = useState<string | null>(selected ?? null);
+
+    useIsomorphicEffect(() => {
+      if ((selected ?? null) !== selectedChip) {
+        setSelectedChip(selected ?? null);
+      }
+    }, [selected]);
+
+    const onClickCb = (chip: SingleChipProps) => () => {
+      const { id } = chip ?? {};
+
+      if (selectedChip !== id) {
+        setSelectedChip(id);
+        onChange?.(id);
+      }
+    };
+
+    const dynamicStyles = useStyles(
+      () => ({
+        chipWrapper: {
+          flexDirection: orientation === ChipOrientation.row ? 'row' : 'column',
+        },
+      }),
+      [orientation],
+    );
+
+    return (
+      <Container ref={ref} styleConfig={{ root: [...(customRootStyles || [])] }}>
+        <Container
+          styleConfig={{
+            root: [singleSelectChipStaticStyles.chipWrapper, dynamicStyles.chipWrapper, ...chipContainerStyles],
+          }}
+        >
+          <ChipAtoms data={data} selectedChip={selectedChip} onClickCb={onClickCb} chipStyleConfig={chipStyleConfig} />
+        </Container>
+
+        {(promptIcon || promptMessage) && (
+          <Box
+            boxSize='pico'
+            horizontal
+            styleConfig={{
+              root: [singleSelectChipStaticStyles.promptBoxStyles, ...(promptBoxStyles || [])],
+            }}
+          >
+            {promptIcon && (
+              <Container
+                styleConfig={{
+                  root: [singleSelectChipStaticStyles.promptIconStyles, ...promptIconContainerStyles],
+                }}
+              >
+                {promptIcon}
+              </Container>
+            )}
+            {promptMessage && (
+              <Typography
+                variant='B3'
+                color={hasError ? 'warning' : 'success'}
+                styleConfig={promptMessageTypographyStyles}
+              >
+                {promptMessage}
+              </Typography>
+            )}
+          </Box>
+        )}
+      </Container>
+    );
+  },
+);
+
+SingleSelectChip.displayName = 'SingleSelectChip';
+
+export default memo(SingleSelectChip);

package/src/constants.ts

@@ -0,0 +1,4 @@
+export enum ChipOrientation {
+  row = 'row',
+  column = 'column',
+}

package/src/index.ts

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

package/src/style.ts

@@ -0,0 +1,48 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+export const singleSelectChipStaticStyles = makeStyles((theme) => {
+  return {
+    chipWrapper: {
+      display: 'flex',
+      position: 'relative',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      borderRadius: theme.border.radius[8],
+      alignSelf: 'flex-start',
+      rowGap: theme.spacing[3],
+      columnGap: theme.spacing[3],
+    },
+    promptBoxStyles: {
+      display: 'flex',
+      alignItems: 'center',
+      marginTop: theme.spacing[2],
+      marginLeft: theme.spacing[3],
+    },
+    promptIconStyles: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: theme.size[4],
+      width: theme.size[4],
+      paddingRight: theme.spacing[1],
+    },
+    chipLabelStyles: {
+      paddingVertical: 0,
+      paddingHorizontal: 4,
+    },
+    chipRootStyles: {
+      borderRadius: 30,
+      paddingVertical: theme.spacing['1.5'],
+      paddingHorizontal: theme.spacing[2],
+      borderWidth: 0,
+    },
+    chipBoxShadow: {
+      shadowColor: 'rgb(231, 231, 231)',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 1,
+      shadowRadius: 1,
+      elevation: 1,
+      borderWidth: 1,
+    },
+  };
+});

package/src/type.ts

@@ -0,0 +1,51 @@
+import type { IFieldPrompt, Styles } from '@cleartrip/ct-design-types';
+import { TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+import type { IChipProps, IChipStyleConfig } from '@cleartrip/ct-design-chip';
+import { ChipOrientation } from './constants';
+/**
+ * Props for a single chip in the SingleSelectChip component.
+ * Extends IChipProps but removes onClick, onDismiss, and isSelected properties
+ * since those are controlled by the parent SingleSelectChip.
+ */
+export type SingleChipProps = Omit<IChipProps, 'onClick' | 'onDismiss' | 'isSelected'> & {
+  /** Unique identifier for the chip */
+  id: string;
+};
+
+export type ChipOrientationType = `${ChipOrientation}`;
+
+/**
+ * Style configuration props for SingleSelectChip component.
+ */
+export interface ISingleSelectStyleProps {
+  /** Styles for the root container */
+  root?: Styles[];
+  /** Styles for the chip container */
+  chipContainer?: Styles[];
+  /** Styles for the prompt box */
+  promptBox?: Styles[];
+  /** Styles for the prompt icon container */
+  promptIconContainer?: Styles[];
+  /** Styles for the prompt message text */
+  promptMessageTypography?: TypographyStyleConfigProps;
+  /** Styles for individual chips */
+  chip?: IChipStyleConfig;
+}
+
+/**
+ * Props for the SingleSelectChip component.
+ */
+export interface ISingleSelectProps {
+  /** Array of chip data to be displayed */
+  data: SingleChipProps[];
+  /** Orientation of the chips - either row or column */
+  orientation?: ChipOrientationType;
+  /** Callback function called when selection changes */
+  onChange: (selected: string) => void;
+  /** Currently selected chip ID */
+  selected?: string | null;
+  /** Prompt configuration for the input field */
+  prompt?: IFieldPrompt;
+  /** Custom styling configuration for the component */
+  styleConfig?: ISingleSelectStyleProps;
+}