@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,316 @@
+import * as React from 'react';
+
+import {Avatar} from '../Avatar';
+import {Button} from '../Button';
+import {Icon} from '../Icon';
+import {BodyMedium, BodySmall} from '../Text';
+
+import type {TooltipProps} from './Tooltip';
+import {DELAY_MOTION_DURATION_TYPES, ELEVATION_TYPES, Tooltip} from './Tooltip';
+
+import css from './Tooltip.stories.module.css';
+
+
+const delayMotionDurationOptions: Array<unknown> = [
+  ...Object.values(DELAY_MOTION_DURATION_TYPES),
+];
+
+const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Tooltip',
+  argTypes: {
+    title: {
+      description: `**Title** of the tooltip. This is first section in the tooltip
+        container. It internally uses truncate to show ellipsis
+        when the text is large(based on \`titleMaxLines\` prop, defaults to **1 Line**). While
+        using title as a react component, you should pass content wrapped inside an
+        inline tag like \`<span>\`
+        `,
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string | React.ReactNode'},
+      },
+    },
+    body: {
+      description: `**Body** of the tooltip. This is second section in the tooltip
+      container. It internally uses truncate to show ellipsis
+      when the text is large(based on \`bodyMaxLines\` prop, defaults to **2 Lines**). While
+      using body as a react component, you should pass content wrapped inside an
+      inline tag like \`<span>\`
+      `,
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string | React.ReactNode'},
+      },
+    },
+    placement: {
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'right',
+      ],
+      description: 'Placement of tooltip',
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: 'top'},
+      },
+    },
+    delayMotionDuration: {
+      options: delayMotionDurationOptions,
+      description: `Delay in showing the Tooltip \n
+      none: 0ms \n
+      fast: 100ms \n
+      normal: 200ms \n
+      slow: 300ms \n
+      slower: 500ms \n
+      slowest: 1000ms `,
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: 'none'},
+      },
+    },
+    elevation: {
+      description:
+        'z-index to the tooltip. This is by default set to elevationTooltip which is `4`. Use this prop when you want to render tooltip at higher elevation elements like Modal, Toast, Menu, etc.',
+      control: {
+        type: 'select',
+      },
+      options: elevationOptions,
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: 'tooltip'},
+      },
+    },
+    hidden: {
+      description:
+        'If set to **true** tooltip wont be visible. Use this if you want to programmatically control the tooltip show/hide',
+      control: {
+        type: 'boolean',
+      },
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: '{tooltip?: string, title?: string, body?: string}'},
+      },
+    },
+    bodyMaxLines: {
+      description:
+        'Maximum number of lines allowed for body text in the Tooltip. Tooltip would automatically **truncate** content after that',
+      control: {
+        type: 'number',
+      },
+      table: {
+        type: {summary: 'number'},
+        defaultValue: {summary: 2},
+      },
+    },
+    titleMaxLines: {
+      description:
+        'Maximum number of lines allowed for title text in the Tooltip. Tooltip would automatically **truncate** content after that',
+      control: {
+        type: 'number',
+      },
+      table: {
+        type: {summary: 'number'},
+        defaultValue: {summary: 1},
+      },
+    },
+    children: {
+      type: {required: true},
+      description:
+        'React Node that tooltip wraps on. Tooltip preserves the consumer\'s references',
+      control: {
+        type: 'null',
+      },
+      table: {
+        type: {summary: 'React.ReactNode'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Tooltip component',
+      description: {
+        component: `
+\`\`\`js
+import { Tooltip } from "@spaced-out/ui-design-system/lib/components/Tooltip";
+\`\`\`
+When users hover over, focus on, or tap an element, **tooltips** provide descriptive text. \`Tooltip\` should be wrapped over
+the element for it to function.
+
+There are 8 possible placements for the Tooltip. Tooltip container has a max-width of \`300px\`. It wraps content if the width exceeds
+
+**Note: **\`<Tooltip>\`** get attached to \`<body>\`. You can manage elevation of the tooltip when you want to use at elevated surfaces.
+
+**Note: **\`<Tooltip>\`** wrapper needs ref to work. If you are not able to provide ref normally, you would need to wrap the component in a \`<div>\`.
+
+\`\`\`jsx
+<Tooltip title="Hello"><div><BodySmall>Hello World</BodySmall></div></Tooltip>
+
+/* Multiline tooltip **/
+<Tooltip
+  title="Person"
+  body={
+    <span>
+      Damian Marley <br />
+      Chris Stapleton <br />
+      Michael Jackson <br />
+      Elton John <br />
+      James Brown <br />
+      Lil Wayne <br />
+      Elvis Crespo <br />
+      Cody Jinks
+    </span>
+  }
+  bodyMaxLines={7}
+  placement={'top-start'}
+>
+  <Button type="tertiary" iconLeftName="face-smirking">
+    Multiline Tooltip
+  </Button>
+</Tooltip>
+\`\`\`
+          `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/Tooltip/Tooltip.jsx',
+    },
+  },
+};
+
+const Names = () => (
+  <>
+    <span>
+      Damian Marley <br />
+      Chris Stapleton <br />
+      Michael Jackson <br />
+      Elton John <br />
+      James Brown <br />
+      Lil Wayne <br />
+      Elvis Crespo <br />
+      Cody Jinks
+    </span>
+  </>
+);
+
+const CustomComponent = () => (<div className={css.namesContainer}>
+  <div className={css.name}>
+    <Avatar
+      imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png"
+      ring
+    />
+    <BodyMedium color="inversePrimary">Persona 1</BodyMedium>
+  </div>
+  <div className={css.name}>
+    <Avatar
+      imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/4.png"
+      ring
+    />
+    <BodyMedium color="inversePrimary">Persona 2</BodyMedium>
+  </div>
+  <div className={css.name}>
+    <Avatar
+      imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/5.png"
+      ring
+    />
+    <BodyMedium color="inversePrimary">Persona 3</BodyMedium>
+  </div>
+  <div className={css.name}>
+    <Avatar
+      imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/6.png"
+      ring
+    />
+    <BodyMedium color="inversePrimary">Persona 4</BodyMedium>
+  </div>
+</div>);
+
+export const _Simple = (args: TooltipProps) => (<div className={css.tooltipContainer}>
+  <div className={css.tooltipContent}>
+    <Tooltip {...args}>
+      <Button type="tertiary" iconLeftName="face-sunglasses">
+        Hover Me
+      </Button>
+    </Tooltip>
+    <div className={css.info}>
+      <Icon color="tertiary" size="small" name="circle-info" />
+      <BodySmall color="tertiary">
+        With title, body & max lines for title and body
+      </BodySmall>
+    </div>
+  </div>
+</div>);
+
+_Simple.args = {
+  title: 'Label',
+  body: `The quick brown fox jumps over the dog,
+  The quick brown fox jumps over the dog
+  The quick brown fox jumps over the dog`,
+  placement: 'top',
+  children: null,
+  bodyMaxLines: 2,
+  titleMaxLines: 1,
+};
+
+export const _WithCustomComponent = (args: TooltipProps) => (<div className={css.tooltipContainer}>
+  <div className={css.tooltipContent}>
+    <Tooltip {...args} body={<CustomComponent />}>
+      <Button type="tertiary" iconLeftName="face-smirking">
+        With Custom Component as Body
+      </Button>
+    </Tooltip>
+    <div className={css.info}>
+      <Icon color="tertiary" size="small" name="circle-info" />
+      <BodySmall color="tertiary">
+        Can pass any custom component as body
+      </BodySmall>
+    </div>
+  </div>
+</div>);
+
+_WithCustomComponent.args = {
+  title: '',
+};
+
+export const _Multiline = (args: TooltipProps) => (<div className={css.tooltipContainer}>
+  <div className={css.tooltipContent}>
+    <Tooltip {...args} body={<Names />}>
+      <Button type="tertiary" iconLeftName="face-smirking">
+        Multiline Tooltip
+      </Button>
+    </Tooltip>
+    <div className={css.info}>
+      <Icon color="tertiary" size="small" name="circle-info" />
+      <BodySmall color="tertiary">
+        With fixed body and bodyMaxLines = 7
+      </BodySmall>
+    </div>
+  </div>
+</div>);
+
+_Multiline.args = {
+  title: '',
+  bodyMaxLines: 7,
+  placement: 'top',
+};

package/lib/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import {
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useMergeRefs,
+  useRole,
+} from '@floating-ui/react';
+
+import * as ELEVATION from '../../styles/variables/_elevation';
+import * as MOTION from '../../styles/variables/_motion';
+import {spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import {capitalize} from '../../utils/string';
+import {Truncate} from '../Truncate';
+
+import css from './Tooltip.module.css';
+
+type ClassNames = Readonly<{
+  tooltip?: string;
+  title?: string;
+  body?: string;
+}>;
+
+export const DELAY_MOTION_DURATION_TYPES = Object.freeze({
+  none: 'none',
+  fast: 'fast',
+  normal: 'normal',
+  slow: 'slow',
+  slower: 'slower',
+  slowest: 'slowest',
+});
+
+export type DelayMotionDurationType = typeof DELAY_MOTION_DURATION_TYPES[keyof typeof DELAY_MOTION_DURATION_TYPES];
+
+export const ELEVATION_TYPES = Object.freeze({
+  none: 'none',
+  card: 'card',
+  tooltip: 'tooltip',
+  menu: 'menu',
+  backdrop: 'backdrop',
+  modal: 'modal',
+  toast: 'toast',
+});
+
+export type ElevationType = typeof ELEVATION_TYPES[keyof typeof ELEVATION_TYPES];
+
+export type PlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+
+export type BaseTooltipProps = {
+  classNames?: ClassNames;
+  title?: string | React.ReactNode;
+  body?: string | React.ReactNode;
+  placement?: PlacementType;
+  bodyMaxLines?: number;
+  titleMaxLines?: number;
+  delayMotionDuration?: DelayMotionDurationType;
+  hidden?: boolean;
+  elevation?: ElevationType;
+};
+
+export type TooltipProps = ((BaseTooltipProps) & {
+  // TODO(Nishant): Decide on a type to use here
+  children: any;
+});
+
+export const getElevationValue = (elevation: string): string => {
+  const elevationKey = 'elevation' + capitalize(elevation);
+// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_elevation")'.
+  return ELEVATION[elevationKey] || elevation;
+};
+
+export const Tooltip = (
+  {
+    classNames,
+    children,
+    title,
+    body,
+    placement = 'top',
+    bodyMaxLines = 2,
+    titleMaxLines = 1,
+    delayMotionDuration = 'none',
+    elevation = 'tooltip',
+    hidden,
+  }: TooltipProps,
+) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {refs, floatingStyles, context, strategy} = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    // Make sure the tooltip stays on the screen
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(parseInt(spaceXXSmall)),
+      flip({
+        fallbackAxisSideDirection: 'start',
+      }),
+      shift(),
+    ],
+  });
+
+  const motionDurationToken =
+    'motionDuration' + capitalize(delayMotionDuration);
+  const hoverDelay =
+// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_motion")'.
+    parseInt(MOTION[motionDurationToken]) === NaN
+      ? 0
+// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_motion")'.
+      : parseInt(MOTION[motionDurationToken]);
+
+  const {getReferenceProps, getFloatingProps} = useInteractions([
+    useHover(context, {
+      delay: {
+        open: hoverDelay,
+        close: 0,
+      },
+    }),
+    useFocus(context),
+    useRole(context, {role: 'tooltip'}),
+    useDismiss(context),
+  ]);
+
+  // Note(Nishant): Preserve the consumer's ref (React 19 safe)
+  const mergedRef = useMergeRefs([refs.setReference, children.ref ?? null]);
+
+  return (
+    <>
+      {React.cloneElement(
+        children,
+        getReferenceProps({
+          ...children.props,
+          ref: mergedRef,
+        }),
+      )}
+
+      {isOpen && (
+        <FloatingPortal>
+          <>
+            {!hidden && (
+              <div
+                ref={refs.setFloating}
+                className={classify(css.tooltip, classNames?.tooltip)}
+                style={{
+                  position: strategy,
+                  ...floatingStyles,
+                  '--tooltip-elevation': getElevationValue(elevation),
+                }}
+                {...getFloatingProps()}
+              >
+                {!!title && (
+                  <Truncate line={titleMaxLines} wordBreak="initial">
+                    <div className={classify(css.title, classNames?.title)}>
+                      {title}
+                    </div>
+                  </Truncate>
+                )}
+
+                {!!body && (
+                  <Truncate line={bodyMaxLines} wordBreak="initial">
+                    <div
+                      className={classify(
+                        css.body,
+                        {
+                          [css.hasTitle]: !!title,
+                        },
+                        classNames?.body,
+                      )}
+                    >
+                      {body}
+                    </div>
+                  </Truncate>
+                )}
+              </div>
+            )}
+          </>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};

package/lib/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/lib/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/lib/components/Truncate/Truncate.d.ts

@@ -0,0 +1,12 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+export type TruncateProps = {
+    children?: React.ReactNode;
+    line?: number;
+    showFullTextOnHover?: boolean;
+    wordBreak?: string;
+    className?: string;
+};
+export declare const BaseTruncate: Flow.AbstractComponent<TruncateProps, HTMLSpanElement>;
+export declare const Truncate: Flow.AbstractComponent<TruncateProps, HTMLSpanElement>;
+//# sourceMappingURL=Truncate.d.ts.map

package/lib/components/Truncate/Truncate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../../src/components/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,eAAe,CAiBvE,CAAC;AAEV,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,eAAe,CA2CxE,CAAC"}

package/lib/components/Truncate/Truncate.js

@@ -22,7 +22,9 @@ const BaseTruncate = exports.BaseTruncate = /*#__PURE__*/React.forwardRef((_ref,
     style: {
       '--line-clamp': line,
       '--word-break': wordBreak
-    },
+    }
+    // @ts-ignore - TS2322 - Type 'React.ReactNode' is not assignable to type 'string | undefined'.
+    ,
     title: showFullTextOnHover ? children : '',
     ref: ref
   }, children);
@@ -39,11 +41,13 @@ const Truncate = exports.Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) =
   if (arrayChildren.length) {
     const child = arrayChildren[0];
     if (/*#__PURE__*/React.isValidElement(child)) {
+      // @ts-ignore - TS2339 - Property 'className' does not exist on type 'unknown'. | TS2339 - Property 'children' does not exist on type 'unknown'.
       const {
         className,
         children
       } = child.props;
       return /*#__PURE__*/React.cloneElement(child, {
+        // @ts-ignore - TS2769 - No overload matches this call.
         className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className, truncateClassName),
         style: {
           '--line-clamp': line,

package/lib/components/Truncate/Truncate.stories.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import type { TruncateProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    argTypes: {
+        line: {
+            description: string;
+            control: {
+                type: string;
+                min: number;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+        children: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        showFullTextOnHover: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        wordBreak: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Truncate: {
+    ({ children, ...args }: TruncateProps): React.JSX.Element;
+    args: {
+        line: number;
+        showFullTextOnHover: boolean;
+        children: string;
+    };
+};
+//# sourceMappingURL=Truncate.stories.d.ts.map

package/lib/components/Truncate/Truncate.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncate.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Truncate/Truncate.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMtC,wBAwEE;AAEF,eAAO,MAAM,SAAS;4BAIjB,aAAa;;;;;;CAOX,CAAC"}