Merge pull request #114 from lidofinance/feat/tooltip

packages/lido-ui/package.json

@@ -38,11 +38,13 @@
     "@lidofinance/link": "workspace:*",
     "@lidofinance/loaders": "workspace:*",
     "@lidofinance/modal": "workspace:*",
+    "@lidofinance/popover": "workspace:*",
     "@lidofinance/popup-menu": "workspace:*",
     "@lidofinance/select": "workspace:*",
     "@lidofinance/stack": "workspace:*",
     "@lidofinance/text": "workspace:*",
     "@lidofinance/theme": "workspace:*",
+    "@lidofinance/tooltip": "workspace:*",
     "@lidofinance/utils": "workspace:*"
   }
 }

packages/lido-ui/src/index.js

@@ -13,9 +13,11 @@ export * from '@lidofinance/input'
 export * from '@lidofinance/link'
 export * from '@lidofinance/loaders'
 export * from '@lidofinance/modal'
+export * from '@lidofinance/popover'
 export * from '@lidofinance/popup-menu'
 export * from '@lidofinance/select'
 export * from '@lidofinance/stack'
 export * from '@lidofinance/text'
 export * from '@lidofinance/theme'
+export * from '@lidofinance/tooltip'
 export * from '@lidofinance/utils'

packages/popover/src/PopoverRootStyles.ts

@@ -7,7 +7,7 @@ export const PopoverWrapperStyle = styled.div<{ $backdrop: boolean }>`
   left: 0;
   margin: 0;
   padding: 0;
-  width: ${({ $backdrop }) => ($backdrop ? '100%' : '0px')};
+  width: 100%;
   height: ${({ $backdrop }) => ($backdrop ? '100%' : '0px')};
 `
 

packages/select/src/index.ts

@@ -1,3 +1,4 @@
 export { default as Select } from './Select'
+export { default as SelectIcon } from './SelectIcon'
 export { default as Option } from './Option'
 export * from './types'

packages/tooltip/.npmignore

@@ -0,0 +1,4 @@
+tsconfig.json
+*.test.js
+*.story.js
+src

packages/tooltip/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Lido
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/tooltip/README.md

@@ -0,0 +1,18 @@
+# Tooltip Component
+
+React component for Lido Finance projects.
+Part of [Lido UI Components](https://github.com/lidofinance/ui/#readme)
+
+## Install
+
+```bash
+yarn add @lidofinance/tooltip
+```
+
+## Usage
+
+```ts
+import { Tooltip } from '@lidofinance/tooltip'
+```
+
+Check out our Storybook at [https://ui.lido.fi](https://ui.lido.fi)

packages/tooltip/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@lidofinance/tooltip",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "license": "MIT",
+  "homepage": "https://github.com/lidofinance/ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lidofinance/ui.git",
+    "directory": "packages/tooltip"
+  },
+  "bugs": {
+    "url": "https://github.com/lidofinance/ui/issues"
+  },
+  "keywords": [
+    "lido",
+    "lidofinance",
+    "styled-components",
+    "component",
+    "react-component",
+    "react"
+  ],
+  "dependencies": {
+    "@lidofinance/hooks": "workspace:*",
+    "@lidofinance/popover": "workspace:*",
+    "@lidofinance/theme": "workspace:*",
+    "@lidofinance/utils": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "16 || 17",
+    "react-dom": "16 || 17",
+    "react-is": "16 || 17",
+    "styled-components": "5"
+  },
+  "devDependencies": {
+    "@lidofinance/icons": "workspace:*",
+    "@storybook/react": "6.2.9",
+    "@types/react": "17.0.6",
+    "@types/react-dom": "17.0.5",
+    "@types/react-is": "17.0.0",
+    "@types/styled-components": "5.1.9",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-is": "17.0.2",
+    "styled-components": "5.3.0"
+  }
+}

packages/tooltip/src/Tooltip.stories.tsx

@@ -0,0 +1,47 @@
+import { Story, Meta } from '@storybook/react'
+import { Question } from '@lidofinance/icons'
+import { PopoverOffset, PopoverPlacement } from '@lidofinance/popover'
+import { TooltipProps } from './types'
+import Tooltip from './Tooltip'
+
+const getOptions = (enumObject: Record<string, string | number>) =>
+  Object.values(enumObject).filter((value) => typeof value === 'string')
+
+export default {
+  component: Tooltip,
+  title: 'Dialogs/Tooltip',
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    title:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum voluptates pariatur culpa consectetur velit iste rem, aspernatur voluptatem aperiam itaque obcaecati vero non quis id iure vitae, quae quibusdam quidem.',
+    offset: 'xs',
+    placement: 'bottom',
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    offset: {
+      options: getOptions(PopoverOffset),
+      control: 'inline-radio',
+    },
+    placement: {
+      options: getOptions(PopoverPlacement),
+      control: 'radio',
+    },
+  },
+} as Meta
+
+export const Basic: Story<TooltipProps> = (props) => (
+  <Tooltip {...props}>
+    <span>Hover me</span>
+  </Tooltip>
+)
+
+export const Icon: Story<TooltipProps> = (props) => (
+  <Tooltip {...props}>
+    <Question />
+  </Tooltip>
+)

packages/tooltip/src/Tooltip.tsx

@@ -0,0 +1,51 @@
+import {
+  ForwardedRef,
+  forwardRef,
+  Children,
+  useRef,
+  cloneElement,
+  useState,
+} from 'react'
+import { TooltipPopoverStyle } from './TooltipStyles'
+import { useMergeRefs } from '@lidofinance/hooks'
+import { isElement } from 'react-is'
+import { TooltipProps } from './types'
+
+function Tooltip(props: TooltipProps, ref?: ForwardedRef<HTMLDivElement>) {
+  const { children, title, ...rest } = props
+  const [state, setState] = useState(false)
+
+  const child = Children.only(children)
+  if (!isElement(child)) throw new Error('Child must be a React element')
+
+  const anchorRef = useRef<HTMLElement>(null)
+  const mergedRef = useMergeRefs([child.ref, anchorRef])
+
+  return (
+    <>
+      {cloneElement(child, {
+        ref: mergedRef,
+        onMouseEnter(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+          setState(true)
+          child.props.onMouseEnter?.(event)
+        },
+        onMouseLeave(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+          setState(false)
+          child.props.onMouseLeave?.(event)
+        },
+      })}
+      {state && (
+        <TooltipPopoverStyle
+          backdrop={false}
+          anchorRef={anchorRef}
+          ref={ref}
+          {...rest}
+        >
+          {title}
+        </TooltipPopoverStyle>
+      )}
+    </>
+  )
+}
+
+export default forwardRef(Tooltip)

packages/tooltip/src/TooltipStyles.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+import { Popover } from '@lidofinance/popover'
+
+export const TooltipPopoverStyle = styled(Popover)`
+  padding: 12px;
+  background: ${({ theme }) => theme.colors.secondary};
+  color: ${({ theme }) => theme.colors.secondaryContrast};
+  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
+  line-height: 1.5em;
+  max-width: 256px;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.md}px;
+  box-shadow: ${({ theme }) =>
+    `${theme.boxShadows.sm} ${theme.colors.shadowLight}`};
+`

packages/tooltip/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip'
+export * from './types'

packages/tooltip/src/types.ts

@@ -0,0 +1,10 @@
+import { LidoComponentProps } from '@lidofinance/utils'
+export type { Theme } from '@lidofinance/theme'
+
+export type TooltipProps = LidoComponentProps<
+  'div',
+  {
+    children: React.ReactElement & React.RefAttributes<HTMLElement>
+    as?: never
+  }
+>

packages/tooltip/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/esm",
+    "noEmit": false,
+    "emitDeclarationOnly": true
+  },
+  "exclude": ["node_modules", "dist", "**/*.stories.*", "**/*.test.*"],
+  "include": ["src/**/*"]
+}

yarn.lock

@@ -2323,11 +2323,13 @@ __metadata:
     "@lidofinance/link": "workspace:*"
     "@lidofinance/loaders": "workspace:*"
     "@lidofinance/modal": "workspace:*"
+    "@lidofinance/popover": "workspace:*"
     "@lidofinance/popup-menu": "workspace:*"
     "@lidofinance/select": "workspace:*"
     "@lidofinance/stack": "workspace:*"
     "@lidofinance/text": "workspace:*"
     "@lidofinance/theme": "workspace:*"
+    "@lidofinance/tooltip": "workspace:*"
     "@lidofinance/utils": "workspace:*"
   languageName: unknown
   linkType: soft
@@ -2580,6 +2582,32 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@lidofinance/tooltip@workspace:*, @lidofinance/tooltip@workspace:packages/tooltip":
+  version: 0.0.0-use.local
+  resolution: "@lidofinance/tooltip@workspace:packages/tooltip"
+  dependencies:
+    "@lidofinance/hooks": "workspace:*"
+    "@lidofinance/icons": "workspace:*"
+    "@lidofinance/popover": "workspace:*"
+    "@lidofinance/theme": "workspace:*"
+    "@lidofinance/utils": "workspace:*"
+    "@storybook/react": 6.2.9
+    "@types/react": 17.0.6
+    "@types/react-dom": 17.0.5
+    "@types/react-is": 17.0.0
+    "@types/styled-components": 5.1.9
+    react: 17.0.2
+    react-dom: 17.0.2
+    react-is: 17.0.2
+    styled-components: 5.3.0
+  peerDependencies:
+    react: 16 || 17
+    react-dom: 16 || 17
+    react-is: 16 || 17
+    styled-components: 5
+  languageName: unknown
+  linkType: soft
+
 "@lidofinance/utils@workspace:*, @lidofinance/utils@workspace:packages/utils":
   version: 0.0.0-use.local
   resolution: "@lidofinance/utils@workspace:packages/utils"