@clement_lores/admin-design-system 1.0.0

package/src/atoms/tooltip/tooltip-control.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import useWindowSize from '../../hooks/use-window-size.js'
+import { PortalProps } from './tooltip-props.js'
+import { StyledTooltip } from './tooltip-styled.jsx'
+
+type PositionProps = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * @component
+ * @private
+ * @memberof Tooltip
+ */
+export const TooltipControl: React.FC<PortalProps> = (props) => {
+  const { title, childRef, direction = 'bottom', ContentElement, size } = props
+  const tooltipRef = useRef<HTMLElement>(null)
+  const [dimension, setDimension] = useState<Pick<PositionProps, 'width' | 'height'> | null>(null)
+  const [position, setPosition] = useState<Pick<PositionProps, 'left' | 'top'> | null>(null)
+  const [elementPosition, setElementPosition] = useState<PositionProps | null>(null)
+  const windowSize = useWindowSize()
+
+  useEffect(() => {
+    if (childRef.current) {
+      const {
+        width: clientWidth,
+        top: offsetTop,
+        left: offsetLeft,
+        height: clientHeight,
+      } = childRef.current.getBoundingClientRect()
+      setElementPosition({
+        width: clientWidth,
+        top: offsetTop,
+        left: offsetLeft,
+        height: clientHeight,
+      })
+    }
+  }, [
+    childRef,
+    windowSize?.width,
+    windowSize?.height,
+  ])
+
+  useEffect(() => {
+    if (tooltipRef.current) {
+      const { clientWidth, clientHeight } = tooltipRef.current
+      setDimension({
+        width: clientWidth,
+        height: clientHeight,
+      })
+    }
+  }, [
+    tooltipRef?.current?.clientWidth,
+    tooltipRef?.current?.clientHeight,
+    title,
+  ])
+
+  useEffect(() => {
+    if (!elementPosition || !dimension) {
+      return
+    }
+
+    // eslint-disable-next-line default-case
+    switch (direction) {
+    case 'bottom': {
+      setPosition({
+        top: elementPosition.top + elementPosition.height,
+        left: elementPosition.left + elementPosition.width / 2 - dimension.width / 2,
+      })
+      break
+    }
+    case 'top': {
+      setPosition({
+        top: elementPosition.top - dimension.height,
+        left: elementPosition.left + elementPosition.width / 2 - dimension.width / 2,
+      })
+      break
+    }
+    case 'left': {
+      setPosition({
+        top: elementPosition.top + elementPosition.height / 2 - dimension.height / 2,
+        left: elementPosition.left - dimension.width,
+      })
+      break
+    }
+    case 'right': {
+      setPosition({
+        top: elementPosition.top + elementPosition.height / 2 - dimension.height / 2,
+        left: elementPosition.left + elementPosition.width,
+      })
+      break
+    }
+    }
+  }, [elementPosition, dimension, direction])
+
+  const isVisible = !!(dimension && position)
+
+  return (
+    <StyledTooltip
+      ref={tooltipRef}
+      left={position?.left || '-1110px'}
+      top={position?.top || '-1110px'}
+      size={size}
+      direction={direction}
+      isVisible={isVisible}
+    >
+      { ContentElement || title }
+    </StyledTooltip>
+  )
+}
+
+TooltipControl.displayName = 'TooltipControl'
+
+export default TooltipControl

package/src/atoms/tooltip/tooltip-props.ts

@@ -0,0 +1,30 @@
+import { ReactNode, RefObject } from 'react'
+
+import { DirectionProps } from '../../utils/direction-props.js'
+import { BoxProps } from '../box/index.js'
+
+/**
+ * Props passed to the {@link Tooltip} component.
+ *
+ * @memberof Tooltip
+ * @alias TooltipProps
+ */
+export type TooltipProps = {
+  /** Text shown on the tooltip */
+  title?: string,
+  /** Direction of tooltip */
+  direction: DirectionProps,
+  /** Tooltip size */
+  size?: 'default' | 'lg'
+}
+
+export type PortalProps = TooltipProps & {
+  childRef: RefObject<HTMLElement>,
+  ContentElement?: ReactNode,
+}
+
+export type StyledTooltipProps = BoxProps & Pick<TooltipProps, 'direction'> & {
+  isVisible: boolean;
+}
+
+export default TooltipProps

package/src/atoms/tooltip/tooltip-styled.tsx

@@ -0,0 +1,138 @@
+import { styled, css } from '@styled-components'
+
+import themeGet from '../../utils/theme-get.js'
+import { Box } from '../box/index.js'
+import { StyledTooltipProps } from './tooltip-props.js'
+
+const ARROW_WIDTH = 7
+
+const topCSS = css<StyledTooltipProps>`
+  margin-top: -${(props) => (props.isVisible ? themeGet('space', 'lg')(props) : '0px')};
+
+  &::after, &::before {
+    top: 100%;
+    left: 50%;
+  }
+
+  &::after {
+    margin-left: -${ARROW_WIDTH}px;
+    border-color: ${themeGet('colors', 'grey20')} transparent transparent transparent;
+  }
+
+  &::before {
+    margin-left: -${ARROW_WIDTH - 1}px;
+    border-color: ${themeGet('colors', 'highlight')} transparent transparent transparent;
+  }
+`
+
+const bottomCSS = css<StyledTooltipProps>`
+  margin-top: ${(props) => (props.isVisible ? themeGet('space', 'lg')(props) : '0px')};
+
+  &::after, &::before {
+    bottom: 100%;
+    left: 50%;
+  }
+
+  &::after {
+    margin-left: -${ARROW_WIDTH}px;
+    border-color: transparent transparent ${themeGet('colors', 'grey20')} transparent;
+  }
+
+  &::before {
+    margin-left: -${ARROW_WIDTH - 1}px;
+    border-color: transparent transparent ${themeGet('colors', 'highlight')} transparent;
+  }
+`
+
+const leftCSS = css<StyledTooltipProps>`
+  margin-left: -${(props) => (props.isVisible ? themeGet('space', 'lg')(props) : '0px')};
+
+  &::after, &::before {
+    left: 100%;
+    top: 50%;
+  }
+
+  &::after {
+    margin-right: -${ARROW_WIDTH}px;
+    margin-top: -${ARROW_WIDTH}px;
+    border-color: transparent transparent transparent ${themeGet('colors', 'grey20')};
+  }
+
+  &::before {
+    margin-right: -${ARROW_WIDTH - 1}px;
+    margin-top: -${ARROW_WIDTH - 1}px;
+    border-color: transparent transparent transparent ${themeGet('colors', 'highlight')};
+  }
+`
+
+const rightCSS = css<StyledTooltipProps>`
+  margin-left: ${(props) => (props.isVisible ? themeGet('space', 'lg')(props) : '0px')};
+
+  &::after, &::before {
+    right: 100%;
+    top: 50%;
+  }
+
+  &::after {
+    margin-left: -${ARROW_WIDTH}px;
+    margin-top: -${ARROW_WIDTH}px;
+    border-color: transparent ${themeGet('colors', 'grey20')} transparent transparent;
+  }
+
+  &::before {
+    margin-left: -${ARROW_WIDTH - 1}px;
+    margin-top: -${ARROW_WIDTH - 1}px;
+    border-color: transparent ${themeGet('colors', 'highlight')} transparent transparent;
+  }
+`
+
+const getPadding = (props: StyledTooltipProps): string => {
+  const px = (props.size === 'lg' ? 'xl' : 'md')
+  const py = (props.size === 'lg' ? 'lg' : 'sm')
+  return `${themeGet('space', py)(props)} ${themeGet('space', px)(props)}`
+}
+
+const StyledTooltip: any = styled(Box)<StyledTooltipProps>`
+  transition: opacity 0.2s, margin 0.2s;
+
+  position: absolute;
+
+  opacity: ${({ isVisible }) => (isVisible ? '1' : '0')};
+  
+  padding: ${(props) => getPadding(props)};
+
+  pointer-events: none;
+  
+  &::after {
+    content: " ";
+    position: absolute;
+    border-style: solid;
+    border-width: 7px;
+    z-index: 1;
+  }
+  &::before {
+    content: " ";
+    position: absolute;
+    border-style: solid;
+    border-width: 6px;
+    z-index: 2;
+  }
+
+  ${(props) => ({
+    top: topCSS,
+    bottom: bottomCSS,
+    left: leftCSS,
+    right: rightCSS,
+  }[props.direction])}
+`
+
+StyledTooltip.defaultProps = {
+  borderColor: 'grey20',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  bg: 'highlight',
+  borderRadius: '3px',
+}
+
+export default StyledTooltip
+export { StyledTooltip }

package/src/atoms/tooltip/tooltip.doc.md

@@ -0,0 +1,61 @@
+<img src="components/tooltip.png" />
+
+Renders Tooltip
+
+### Usage
+
+```jsx
+import { Tooltip, TooltipContent } from '@adminjs/design-system'
+
+// Wrapping existing element with a tooltip
+return (
+  <Box>
+    <Tooltip title="I am tooltip">
+      <Button>I am tooltip</Button>
+    </Tooltip>
+  </Box>
+)
+
+// Adding more complicated content
+return (
+  <Box>
+    <Tooltip>
+      <TooltipContent>
+        <Text>I am text inside with <strong>BoldedText</strong></Text>
+      </TooltipContent>
+      <Button>I am tooltip</Button>
+    </Tooltip>
+  </Box>
+)
+```
+
+As you can see on the examples, there are 2 ways of passing tooltip message:
+
+1. by the `title` prop
+2. by the TooltipContent component
+
+The first way is the easiest, but the second allows you to put whatever styled content you like.
+
+### Props
+
+The Tooltip Component takes 3 custom props:
+
+- `title`
+- `direction` - default to `bottom`
+- `size`
+
+See {@link TooltipProps} below.
+
+### Example
+
+1. Direction and title
+
+```reactComponent
+return (
+  <Box p="xxl">
+    <Tooltip title="example info" direction="right">
+     <Button>indicator</Button>
+    </Tooltip>
+  </Box>
+)
+```

package/src/atoms/tooltip/tooltip.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Box, Button, H4, Text } from '../index.js'
+import { Tooltip, TooltipContent } from './index.js'
+
+const Direction = {
+  right: 'right',
+  left: 'left',
+  top: 'top',
+  bottom: 'bottom',
+} as const
+
+const Size = ['default', 'lg'] as const
+
+export const Default: StoryObj = {
+  render: (args) => (
+    <Box>
+      <StoryWrapper label="Regular example">
+        <Tooltip {...(args as any)}>
+          <Button>Standard text</Button>
+        </Tooltip>
+      </StoryWrapper>
+      <StoryWrapper label="Custom component as tooltip">
+        <Tooltip {...(args as any)}>
+          <TooltipContent>
+            <H4>Header</H4>
+            <Text>Some text inside the tooltip?</Text>
+          </TooltipContent>
+          <Button>Header with sth</Button>
+        </Tooltip>
+      </StoryWrapper>
+    </Box>
+  ),
+}
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'DesignSystem/Atoms/Tooltip',
+  component: Tooltip,
+  args: {
+    direction: Direction.top,
+    size: Size[0],
+    title: 'Example info',
+  },
+  argTypes: {
+    direction: { options: Object.values(Direction), control: { type: 'select' } },
+    size: { options: Size, control: { type: 'select' } },
+    title: { control: { type: 'text' } },
+  },
+}
+
+export default meta

package/src/atoms/tooltip/tooltip.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable max-len */
+import React, { PropsWithChildren, useState, useRef, forwardRef, ReactElement, ReactNode } from 'react'
+
+import PortalUtils from '../../utils/portal-utils.jsx'
+import { TooltipControl } from './tooltip-control.jsx'
+import Props from './tooltip-props.js'
+
+const TooltipPortal = PortalUtils.createPortalForKey('TOOLTIP', TooltipControl)
+
+/**
+ * @load ./tooltip.doc.md
+ * @component
+ * @subcategory Atoms
+ * @hideconstructor
+ * @new In version 3.3
+ * @section design-system
+ */
+export const Tooltip: React.FC<PropsWithChildren<Props>> = (props) => {
+  const { direction, title, children, size } = props
+  const childRef = useRef<HTMLElement>(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  let TriggerElement: ReactElement
+  let ContentElement: ReactNode
+  const childrenCount = React.Children.count(children)
+
+  if (childrenCount === 1) {
+    TriggerElement = children as ReactElement
+  } else if (childrenCount === 2) {
+    React.Children.forEach(children, (child) => {
+      const type = (child as any).type?.displayName
+      if (type === 'TooltipContent') {
+        ContentElement = child as ReactNode
+      } else {
+        TriggerElement = child as ReactElement
+      }
+    })
+  }
+
+  const onEnter = () => {
+    setIsVisible(true)
+  }
+
+  const onLeave = () => {
+    setIsVisible(false)
+  }
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const ChildWithRef = forwardRef((triggerProps, ref) => React.cloneElement(TriggerElement, {
+    ...triggerProps,
+    displayName: 'TooltipTrigger',
+    ref,
+  })) as any
+
+  return (
+    <>
+      <ChildWithRef
+        ref={childRef}
+        onMouseEnter={onEnter}
+        onMouseLeave={onLeave}
+      />
+      {isVisible && (
+        <TooltipPortal
+          title={title}
+          childRef={childRef}
+          size={size}
+          direction={direction}
+          ContentElement={ContentElement}
+        />
+      )}
+    </>
+  )
+}
+
+Tooltip.displayName = 'Tooltip'
+
+export default Tooltip

package/src/atoms/typography/caption-shared.ts

@@ -0,0 +1,13 @@
+import { typography, TypographyProps, space, SpaceProps } from 'styled-system'
+import { css } from '@styled-components'
+
+import themeGet from '../../utils/theme-get.js'
+
+export const CaptionShared: ReturnType<typeof css> = css<TypographyProps & SpaceProps>`
+  font-family: ${themeGet('font')};
+  font-weight: ${themeGet('fontWeights', 'normal')};
+  ${typography};
+  ${space};
+`
+
+export default CaptionShared

package/src/atoms/typography/caption.ts

@@ -0,0 +1,15 @@
+import { TypographyProps, SpaceProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import themeGet from '../../utils/theme-get.js'
+import CaptionShared from './caption-shared.js'
+
+export const Caption = styled('div')<TypographyProps & SpaceProps>`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'sm')};
+  line-height: ${themeGet('lineHeights', 'md')};
+`
+
+Caption.displayName = 'Caption'
+
+export default Caption

package/src/atoms/typography/card-title.ts

@@ -0,0 +1,19 @@
+import { TypographyProps, SpaceProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import themeGet from '../../utils/theme-get.js'
+import CaptionShared from './caption-shared.js'
+
+export const CardTitle = styled('div')<TypographyProps & SpaceProps>`
+  ${CaptionShared};
+  font-size: ${themeGet('fontSizes', 'md')};
+  line-height: ${themeGet('lineHeights', 'lg')};
+  margin: ${themeGet('space', 'lg')} 0;
+  * > &:first-child {
+    margin-top: 0;
+  }
+`
+
+CardTitle.displayName = 'CardTitle'
+
+export default CardTitle

package/src/atoms/typography/header.doc.md

@@ -0,0 +1,38 @@
+<img src="components/header.png" />
+
+The Header component is a base for all headers.
+
+### Usage
+
+```javascript
+import { H1, H2, H3, H4, H5, H6 } from '@adminjs/design-system'
+
+// or
+
+import { Header } from '@adminjs/design-system'
+// Header.H1
+```
+By default, the Heading component renders __H3__ element.
+
+### Example
+
+This is how headers looks
+
+```reactComponent
+return (
+<Box py="lg">
+  <Header.H1>H1 Header - 40</Header.H1>
+  <Text variant="sm" marginBottom={5}>Roboto 40 - line height - 40</Text>
+  <Header.H2>H2 Header - 32</Header.H2>
+  <Text variant="sm" marginBottom={5}>Roboto 32 - line height - 40</Text>
+  <Header.H3>H3 Header - 28</Header.H3>
+  <Text variant="sm" marginBottom={5}>Roboto 28 - line height - 32</Text>
+  <Header.H4>H4 Header - 24</Header.H4>
+  <Text variant="sm" marginBottom={5}>Roboto 24 - line height - 32</Text>
+  <Header.H5>H5 Header - 18</Header.H5>
+  <Text variant="sm" marginBottom={5}>Roboto 18 - line height - 24</Text>
+  <Header.H6>H6 Header - 16</Header.H6>
+  <Text variant="sm" marginBottom={5}>Roboto 16 - line height - 24</Text>
+</Box>
+)
+```

package/src/atoms/typography/header.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import { typography, TypographyProps, space, SpaceProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { Button } from '../button/index.js'
+import { Badge } from '../badge/index.js'
+import { cssClass } from '../../utils/css-class.js'
+import themeGet from '../../utils/theme-get.js'
+
+/**
+ * Prop Types of an Header components.
+ * Apart from all props for a standard hx elements it extends
+ * {@link TypographyProps} and {@link SpaceProps}
+ *
+ * @memberof Header
+ * @alias HeaderProps
+ * @property {string} [...] Other props from {@link TypographyProps}, {@link SpaceProps}
+ */
+export type HeaderProps = TypographyProps & SpaceProps
+
+const Base = styled.h3<HeaderProps>`
+  font-family: ${themeGet('font')};
+  vertical-align: middle;
+  padding: 0;
+  * {
+    vertical-align: middle;
+  }
+  & ${Button}, a {
+    vertical-align: bottom;
+  }
+  * > &:first-child {
+    margin-top: ${themeGet('space', 'sm')};
+  }
+  ${Badge} {
+    vertical-align: middle;
+  }
+
+  ${typography};
+  ${space};
+`
+
+Base.defaultProps = {
+  fontWeight: 'normal',
+  fontSize: 'h3',
+  lineHeight: 'xl',
+  className: cssClass(['Header', 'H3']),
+  marginTop: 'xxl',
+  marginBottom: 'xl',
+}
+
+export const H1 = styled((props) => <Base as="h1" {...props} />)``
+H1.defaultProps = {
+  fontSize: 'h1',
+  lineHeight: 'xxl',
+  className: cssClass(['Header', 'H1']),
+  marginTop: 'x4',
+  marginBottom: 'x3',
+}
+H1.displayName = 'H1'
+
+export const H2 = styled((props) => <Base as="h2" {...props} />)`
+  & ${Button}, a {
+    margin-bottom: 4px;
+  }
+`
+H2.defaultProps = {
+  fontSize: 'h2',
+  lineHeight: 'xxl',
+  className: cssClass(['Header', 'H2']),
+  marginTop: 'x3',
+  marginBottom: 'xxl',
+}
+H2.displayName = 'H2'
+
+export const H3 = Base
+H3.displayName = 'H3'
+
+export const H4 = styled((props) => <Base as="h4" {...props} />)``
+H4.defaultProps = {
+  fontSize: 'h4',
+  lineHeight: 'xl',
+  className: cssClass(['Header', 'H4']),
+  marginTop: 'xxl',
+  marginBottom: 'xl',
+}
+H4.displayName = 'H4'
+
+export const H5 = styled((props) => <Base as="h5" {...props} />)``
+H5.defaultProps = {
+  fontSize: 'xl',
+  lineHeight: 'lg',
+  className: cssClass(['Header', 'H5']),
+  marginTop: 'xl',
+  marginBottom: 'default',
+  fontWeight: 'normal',
+}
+H5.displayName = 'H5'
+
+export const H6 = styled((props) => <Base as="h6" {...props} />)``
+H6.defaultProps = {
+  fontSize: 'lg',
+  lineHeight: 'lg',
+  className: cssClass(['Header', 'H6']),
+  marginTop: 'lg',
+  marginBottom: 'default',
+  fontWeight: 'normal',
+}
+H6.displayName = 'H6'
+
+/**
+ * @load ./header.doc.md
+ * @component
+ * @subcategory Atoms
+ * @see HeaderProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-header--default Storybook}
+ * @hideconstructor
+ * @section design-system
+ */
+export const Header = H3 as any
+
+Header.H1 = H1
+Header.H2 = H2
+Header.H3 = H3
+Header.H4 = H4
+Header.H5 = H5
+Header.H6 = H6
+
+export default Header

package/src/atoms/typography/index.ts

@@ -0,0 +1,5 @@
+export * from './header.jsx'
+export * from './caption.js'
+export * from './card-title.js'
+export * from './small-text.js'
+export * from './title.js'