@ssa-ui-kit/core 0.0.17-alpha → 0.0.18-alpha

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,160 +1,160 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useTheme } from '@emotion/react';
-
-import Button from '@components/Button';
-import ProgressCircle from '@components/ProgressCircle';
-import Typography from '@components/Typography';
-import Icon from '@components/Icon';
-import TooltipTrigger from '@components/TooltipTrigger';
-import TooltipContent from '@components/TooltipContent';
-
-import Tooltip from './index';
-
-type Args = Parameters<typeof Tooltip>[0];
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  argTypes: {
-    placement: {
-      options: ['bottom', 'left', 'right', 'top'],
-      control: {
-        type: 'select',
-      },
-    },
-    arrowProps: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          width: '300px',
-          height: '300px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        <Story />
-      </div>
-    ),
-  ],
-} as Meta<typeof Tooltip>;
-
-export const OnClick: StoryObj<typeof Tooltip> = (args: Args) => {
-  return (
-    <Tooltip {...args}>
-      <TooltipTrigger>
-        <Button size="medium" text="Click me!" />
-      </TooltipTrigger>
-      <TooltipContent>Tooltip</TooltipContent>
-    </Tooltip>
-  );
-};
-
-OnClick.args = {
-  size: 'large',
-};
-OnClick.storyName = 'Click';
-
-export const OnHover: StoryObj<typeof Tooltip> = (args: Args) => {
-  return (
-    <Tooltip {...args}>
-      <TooltipTrigger>
-        <Button size="medium" text="Hover over me!" />
-      </TooltipTrigger>
-      <TooltipContent>Tooltip</TooltipContent>
-    </Tooltip>
-  );
-};
-
-OnHover.args = {
-  enableClick: false,
-  enableHover: true,
-  size: 'large',
-};
-OnHover.storyName = 'Hover';
-
-export const CustomContent: StoryObj<typeof Tooltip> = (args: Args) => {
-  const theme = useTheme();
-
-  return (
-    <Tooltip {...args}>
-      <TooltipTrigger>
-        <Button
-          size="medium"
-          endIcon={<Icon name="plus" color={theme.colors.white} size={12} />}
-        />
-      </TooltipTrigger>
-      <TooltipContent css={{ textAlign: 'center' }}>
-        <Typography variant="h6">Your progress</Typography>
-        <div css={{ margin: '0 auto', width: '60px' }}>
-          <ProgressCircle
-            max={100}
-            currentValue={80}
-            color="purple"
-            infoContent="80%"
-            size={60}
-          />
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  );
-};
-
-CustomContent.args = {
-  size: 'large',
-  placement: 'top',
-};
-CustomContent.storyName = 'Custom content';
-
-export const NoArrow: StoryObj<typeof Tooltip> = (args: Args) => {
-  const theme = useTheme();
-
-  return (
-    <Tooltip {...args}>
-      <TooltipTrigger>
-        <Button
-          size="small"
-          endIcon={<Icon name="check" color={theme.colors.white} size={12} />}
-          text="Action"
-        />
-      </TooltipTrigger>
-      <TooltipContent>No arrow</TooltipContent>
-    </Tooltip>
-  );
-};
-
-NoArrow.args = {
-  size: 'large',
-  hasArrow: false,
-  placement: 'left',
-};
-NoArrow.storyName = 'No arrow';
-
-export const Opened: StoryObj<typeof Tooltip> = (args: Args) => {
-  return (
-    <Tooltip {...args}>
-      <TooltipTrigger>
-        <Button size="medium" text="Hover over me!" />
-      </TooltipTrigger>
-      <TooltipContent>Tooltip</TooltipContent>
-    </Tooltip>
-  );
-};
-
-Opened.args = {
-  enableClick: false,
-  enableHover: true,
-  size: 'large',
-  isOpen: true,
-};
-Opened.parameters = {
-  pseudo: {
-    hover: true,
-    rootSelector: 'body',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { useTheme } from '@emotion/react';
+
+import Button from '@components/Button';
+import ProgressCircle from '@components/ProgressCircle';
+import Typography from '@components/Typography';
+import Icon from '@components/Icon';
+import TooltipTrigger from '@components/TooltipTrigger';
+import TooltipContent from '@components/TooltipContent';
+
+import Tooltip from './index';
+
+type Args = Parameters<typeof Tooltip>[0];
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    placement: {
+      options: ['bottom', 'left', 'right', 'top'],
+      control: {
+        type: 'select',
+      },
+    },
+    arrowProps: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof Tooltip>;
+
+export const OnClick: StoryObj<typeof Tooltip> = (args: Args) => {
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button size="medium" text="Click me!" />
+      </TooltipTrigger>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+};
+
+OnClick.args = {
+  size: 'large',
+};
+OnClick.storyName = 'Click';
+
+export const OnHover: StoryObj<typeof Tooltip> = (args: Args) => {
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button size="medium" text="Hover over me!" />
+      </TooltipTrigger>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+};
+
+OnHover.args = {
+  enableClick: false,
+  enableHover: true,
+  size: 'large',
+};
+OnHover.storyName = 'Hover';
+
+export const CustomContent: StoryObj<typeof Tooltip> = (args: Args) => {
+  const theme = useTheme();
+
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button
+          size="medium"
+          endIcon={<Icon name="plus" color={theme.colors.white} size={12} />}
+        />
+      </TooltipTrigger>
+      <TooltipContent css={{ textAlign: 'center' }}>
+        <Typography variant="h6">Your progress</Typography>
+        <div css={{ margin: '0 auto', width: '60px' }}>
+          <ProgressCircle
+            max={100}
+            currentValue={80}
+            color="purple"
+            infoContent="80%"
+            size={60}
+          />
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+CustomContent.args = {
+  size: 'large',
+  placement: 'top',
+};
+CustomContent.storyName = 'Custom content';
+
+export const NoArrow: StoryObj<typeof Tooltip> = (args: Args) => {
+  const theme = useTheme();
+
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button
+          size="small"
+          endIcon={<Icon name="check" color={theme.colors.white} size={12} />}
+          text="Action"
+        />
+      </TooltipTrigger>
+      <TooltipContent>No arrow</TooltipContent>
+    </Tooltip>
+  );
+};
+
+NoArrow.args = {
+  size: 'large',
+  hasArrow: false,
+  placement: 'left',
+};
+NoArrow.storyName = 'No arrow';
+
+export const Opened: StoryObj<typeof Tooltip> = (args: Args) => {
+  return (
+    <Tooltip {...args}>
+      <TooltipTrigger>
+        <Button size="medium" text="Hover over me!" />
+      </TooltipTrigger>
+      <TooltipContent>Tooltip</TooltipContent>
+    </Tooltip>
+  );
+};
+
+Opened.args = {
+  enableClick: false,
+  enableHover: true,
+  size: 'large',
+  isOpen: true,
+};
+Opened.parameters = {
+  pseudo: {
+    hover: true,
+    rootSelector: 'body',
+  },
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,22 @@
-import { useTooltip } from './useTooltip';
-import { TooltipContext } from './useTooltipContext';
-import { ITooltipProps } from './types';
-
-/*
- * <Tooltip>
- *   <TooltipTrigger>
- *     <Button />
- *   </TooltipTrigger>
- *   <TooltipContent>Tooltip</TooltipContent>
- * </Tooltip>
- * */
-const Tooltip = ({ children, ...props }: ITooltipProps) => {
-  const tooltip = useTooltip(props);
-
-  return (
-    <TooltipContext.Provider value={tooltip}>
-      {children}
-    </TooltipContext.Provider>
-  );
-};
-export default Tooltip;
+import { useTooltip } from './useTooltip';
+import { TooltipContext } from './useTooltipContext';
+import { ITooltipProps } from './types';
+
+/*
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button />
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip</TooltipContent>
+ * </Tooltip>
+ * */
+const Tooltip = ({ children, ...props }: ITooltipProps) => {
+  const tooltip = useTooltip(props);
+
+  return (
+    <TooltipContext.Provider value={tooltip}>
+      {children}
+    </TooltipContext.Provider>
+  );
+};
+export default Tooltip;

package/src/components/Tooltip/TooltipArrow.tsx

@@ -1,26 +1,26 @@
-import { useTheme } from '@emotion/react';
-import { FloatingArrow } from '@floating-ui/react';
-import { useTooltipContext } from './useTooltipContext';
-import { TooltipArrowProps } from './types';
-
-export const TooltipArrow = ({
-  width = 10,
-  height = 10,
-  fill,
-  ...props
-}: TooltipArrowProps) => {
-  const { context, arrowRef } = useTooltipContext();
-  const theme = useTheme();
-
-  return (
-    <FloatingArrow
-      data-testid="floating-arrow"
-      ref={arrowRef}
-      context={context}
-      width={width}
-      height={height}
-      fill={fill || theme.colors.greyLighter}
-      {...props}
-    />
-  );
-};
+import { useTheme } from '@emotion/react';
+import { FloatingArrow } from '@floating-ui/react';
+import { useTooltipContext } from './useTooltipContext';
+import { TooltipArrowProps } from './types';
+
+export const TooltipArrow = ({
+  width = 10,
+  height = 10,
+  fill,
+  ...props
+}: TooltipArrowProps) => {
+  const { context, arrowRef } = useTooltipContext();
+  const theme = useTheme();
+
+  return (
+    <FloatingArrow
+      data-testid="floating-arrow"
+      ref={arrowRef}
+      context={context}
+      width={width}
+      height={height}
+      fill={fill || theme.colors.greyLighter}
+      {...props}
+    />
+  );
+};

package/src/components/Tooltip/TooltipContentBase.tsx

@@ -1,9 +1,9 @@
-import styled from '@emotion/styled';
-
-export const TooltipContentBase = styled.div`
-  line-height: 0.75rem; /* 12px */
-  background: ${({ theme }) => theme.colors.greyLighter};
-  border-radius: 8px;
-  color: ${({ theme }) => theme.colors.greyDarker};
-  font-weight: 600;
-`;
+import styled from '@emotion/styled';
+
+export const TooltipContentBase = styled.div`
+  line-height: 0.75rem; /* 12px */
+  background: ${({ theme }) => theme.colors.greyLighter};
+  border-radius: 8px;
+  color: ${({ theme }) => theme.colors.greyDarker};
+  font-weight: 600;
+`;

package/src/components/Tooltip/index.ts

@@ -1,5 +1,5 @@
-export { default } from './Tooltip';
-export { TooltipContentBase } from './TooltipContentBase';
-export { SimpleChartTooltip } from './SimpleChartTooltip';
-export { ProgressChartTooltip } from './ProgressChartTooltip';
-export * as styles from './styles';
+export { default } from './Tooltip';
+export { TooltipContentBase } from './TooltipContentBase';
+export { SimpleChartTooltip } from './SimpleChartTooltip';
+export { ProgressChartTooltip } from './ProgressChartTooltip';
+export * as styles from './styles';

package/src/components/Tooltip/styles.ts

@@ -1,16 +1,16 @@
-import { css } from '@emotion/react';
-
-export const small = css`
-  font-size: 0.579rem; // 9.26px
-  padding: 6px 12px;
-`;
-
-export const medium = css`
-  font-size: 0.694rem; // 11.11px
-  padding: 8px 16px;
-`;
-
-export const large = css`
-  font-size: 0.833rem; // 13.33px
-  padding: 10px 20px;
-`;
+import { css } from '@emotion/react';
+
+export const small = css`
+  font-size: 0.579rem; // 9.26px
+  padding: 6px 12px;
+`;
+
+export const medium = css`
+  font-size: 0.694rem; // 11.11px
+  padding: 8px 16px;
+`;
+
+export const large = css`
+  font-size: 0.833rem; // 13.33px
+  padding: 10px 20px;
+`;

package/src/components/Tooltip/types.ts

@@ -1,88 +1,88 @@
-import {
-  useInteractions,
-  FloatingArrow,
-  Placement,
-  UseFloatingReturn,
-} from '@floating-ui/react';
-import { PointTooltipProps, Point } from '@nivo/line';
-import { IMapIcons } from '@components/Icon/types';
-import { ProgressBarProps } from '@components/ProgressBar/types';
-import { SerializedStyles } from '@emotion/react';
-import { CommonProps } from '@global-types/emotion';
-
-export type TooltipSize = 'small' | 'medium' | 'large';
-
-export interface ITooltipProps extends CommonProps {
-  children: React.ReactNode;
-  placement?: Placement;
-  enableHover?: boolean;
-  enableClick?: boolean;
-  offsetPx?: number;
-  // TooltipContent-related props
-  size?: TooltipSize;
-  hasArrow?: boolean;
-  arrowProps?: TooltipArrowProps;
-  isOpen?: boolean;
-}
-
-export type UseTooltipArgs = Omit<ITooltipProps, 'children'>;
-
-type UseInteractions = ReturnType<typeof useInteractions>;
-
-interface MutableRefObject<T> {
-  current: T;
-}
-
-export type UseTooltip = (props: UseTooltipArgs) => Pick<
-  ITooltipProps,
-  'size' | 'hasArrow' | 'arrowProps'
-> & {
-  arrowRef: MutableRefObject<null>;
-  isOpen: boolean;
-} & UseFloatingReturn &
-  UseInteractions;
-
-export type TooltipContextType =
-  | (UseFloatingReturn &
-      ReturnType<typeof useInteractions> & {
-        isOpen: boolean;
-        arrowRef: React.Ref<SVGSVGElement>;
-      } & Pick<ITooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
-  | null;
-
-export type TooltipArrowProps = Omit<
-  React.ComponentProps<typeof FloatingArrow>,
-  'context'
->;
-
-export interface ITooltipContentProps {
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export interface ITooltipContentSizes {
-  small: SerializedStyles;
-  medium: SerializedStyles;
-  large: SerializedStyles;
-}
-
-export interface ITooltipTriggerProps {
-  children: React.ReactNode;
-}
-
-export type SimpleChartTooltipProps =
-  | PointTooltipProps &
-      Pick<ITooltipProps, 'size'> & {
-        renderValue?: (data: Point['data']) => React.ReactNode;
-      };
-
-export interface IProgressChartTooltipProps {
-  caption: string;
-  value: number;
-  valueFormatted: string;
-  iconName?: keyof IMapIcons;
-  barProps?: Partial<Omit<ProgressBarProps, 'currentValue'>>;
-}
-
-export type UseTooltipContext = () => NonNullable<TooltipContextType>;
+import {
+  useInteractions,
+  FloatingArrow,
+  Placement,
+  UseFloatingReturn,
+} from '@floating-ui/react';
+import { PointTooltipProps, Point } from '@nivo/line';
+import { IMapIcons } from '@components/Icon/types';
+import { ProgressBarProps } from '@components/ProgressBar/types';
+import { SerializedStyles } from '@emotion/react';
+import { CommonProps } from '@global-types/emotion';
+
+export type TooltipSize = 'small' | 'medium' | 'large';
+
+export interface ITooltipProps extends CommonProps {
+  children: React.ReactNode;
+  placement?: Placement;
+  enableHover?: boolean;
+  enableClick?: boolean;
+  offsetPx?: number;
+  // TooltipContent-related props
+  size?: TooltipSize;
+  hasArrow?: boolean;
+  arrowProps?: TooltipArrowProps;
+  isOpen?: boolean;
+}
+
+export type UseTooltipArgs = Omit<ITooltipProps, 'children'>;
+
+type UseInteractions = ReturnType<typeof useInteractions>;
+
+interface MutableRefObject<T> {
+  current: T;
+}
+
+export type UseTooltip = (props: UseTooltipArgs) => Pick<
+  ITooltipProps,
+  'size' | 'hasArrow' | 'arrowProps'
+> & {
+  arrowRef: MutableRefObject<null>;
+  isOpen: boolean;
+} & UseFloatingReturn &
+  UseInteractions;
+
+export type TooltipContextType =
+  | (UseFloatingReturn &
+      ReturnType<typeof useInteractions> & {
+        isOpen: boolean;
+        arrowRef: React.Ref<SVGSVGElement>;
+      } & Pick<ITooltipProps, 'size' | 'hasArrow' | 'arrowProps'>)
+  | null;
+
+export type TooltipArrowProps = Omit<
+  React.ComponentProps<typeof FloatingArrow>,
+  'context'
+>;
+
+export interface ITooltipContentProps {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface ITooltipContentSizes {
+  small: SerializedStyles;
+  medium: SerializedStyles;
+  large: SerializedStyles;
+}
+
+export interface ITooltipTriggerProps {
+  children: React.ReactNode;
+}
+
+export type SimpleChartTooltipProps =
+  | PointTooltipProps &
+      Pick<ITooltipProps, 'size'> & {
+        renderValue?: (data: Point['data']) => React.ReactNode;
+      };
+
+export interface IProgressChartTooltipProps {
+  caption: string;
+  value: number;
+  valueFormatted: string;
+  iconName?: keyof IMapIcons;
+  barProps?: Partial<Omit<ProgressBarProps, 'currentValue'>>;
+}
+
+export type UseTooltipContext = () => NonNullable<TooltipContextType>;