@clement_lores/admin-design-system 1.0.0

package/src/molecules/drop-down/drop-down-item.tsx

@@ -0,0 +1,95 @@
+import { rgba } from 'polished'
+import type { PropsWithChildren } from 'react'
+import { styled } from '@styled-components'
+import { space, variant } from 'styled-system'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import type { VariantType } from '../../theme.js'
+import { cssClass } from '../../utils/index.js'
+import DropDownMenu from './drop-down-menu.jsx'
+
+const variantsShared = (theme, color) => ({
+  color,
+  [`& .${cssClass('DropDownItemAction')}`]: {
+    color,
+  },
+  '&:hover': {
+    bg: rgba(theme.colors[color], 0.03),
+  },
+})
+
+const colorVariants = variant<any, VariantType>({
+  prop: 'colorVariant',
+  variants: {
+    primary: (theme) => variantsShared(theme, 'primary100'),
+    danger: (theme) => variantsShared(theme, 'error'),
+    success: (theme) => variantsShared(theme, 'success'),
+    info: (theme) => variantsShared(theme, 'info'),
+    secondary: (theme) => variantsShared(theme, 'accent'),
+    light: (theme) => variantsShared(theme, 'grey80'),
+    default: (theme) => variantsShared(theme, 'text'),
+  },
+})
+
+/**
+ * Props passed to DropDownItem
+ * Extends {@link BoxProps}
+ *
+ * @memberof DropDown
+ * @extends BoxProps
+ */
+export type DropDownItemProps = PropsWithChildren &
+  BoxProps & {
+    colorVariant?: VariantType
+    onClick?: (e: Event) => void
+  }
+
+/**
+ * @component
+ * @private
+ */
+export const DropDownItem = styled(Box)<DropDownItemProps>`
+  color: ${({ theme }) => theme.colors.text};
+  font-family: ${({ theme }) => theme.font};
+  ${({ onClick }: any) => (onClick ? 'cursor: pointer;' : '')};
+  text-decoration: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+  text-align: left;
+
+  &:hover {
+    background: ${({ theme }) => rgba(theme.colors.text, 0.03)};
+  }
+
+  & .${cssClass('Icon')} {
+    padding-right: ${({ theme }) => theme.space.default};
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  & > ${DropDownMenu} {
+    position: absolute;
+    top: 0;
+    display: none;
+  }
+
+  &:hover > ${DropDownMenu} {
+    display: flex;
+  }
+
+  & a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  padding: ${({ theme }) => `${theme.space.lg} ${theme.space.xxl}`};
+
+  ${space};
+  ${colorVariants};
+`
+
+DropDownItem.displayName = 'DropDownItem'
+
+export default DropDownItem

package/src/molecules/drop-down/drop-down-menu.tsx

@@ -0,0 +1,45 @@
+import { styled } from '@styled-components'
+import { PropsWithChildren } from 'react'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { DEFAULT_STICK, DropDownStickProp } from './drop-down.jsx'
+import { cssClass } from '../../utils/index.js'
+
+/**
+ * Props passed to DropDownMenu element.
+ * Extends {@link BoxProps}
+ *
+ * @memberof DropDown
+ */
+export type DropDownMenuProps = PropsWithChildren<BoxProps & {
+  isVisible?: boolean;
+  stick?: DropDownStickProp;
+}>
+
+/**
+ * @component
+ * @private
+ */
+export const DropDownMenu = styled(Box).attrs<DropDownMenuProps>((props) => ({
+  className: cssClass([`DropDown-Stick-${props.stick || DEFAULT_STICK}`, 'DropDownMenu'], props.className),
+}))<DropDownMenuProps>`
+  background: ${({ theme }) => theme.colors.container};
+  display: inline-block;
+  position: absolute;
+  z-index: 40;
+  flex-direction: column;
+  box-shadow: ${({ theme }) => theme.shadows.card};
+  border-radius: ${({ theme }) => theme.space.sm};
+  ${({ isVisible }): string => (isVisible !== false ? '' : 'display: none;')};
+
+  &.${cssClass('DropDown-Stick-left')} .${cssClass('DropDownMenu')} {
+    left: 100%;
+  }
+  &.${cssClass('DropDown-Stick-right')} .${cssClass('DropDownMenu')} {
+    right: 100%;
+  }
+`
+
+DropDownMenu.displayName = 'DropDownMenu'
+
+export default DropDownMenu

package/src/molecules/drop-down/drop-down-trigger.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@styled-components'
+
+/**
+ * @component
+ * @private
+ */
+export const DropDownTrigger = styled.span`
+  display: inline-block;
+`
+DropDownTrigger.displayName = 'DropDownTrigger'
+
+export default DropDownTrigger

package/src/molecules/drop-down/drop-down.doc.md

@@ -0,0 +1,74 @@
+<img src="components/drop-down.png" />
+
+A Simple set of components allowing you to create dropdowns.
+
+### Usage
+
+```javascript
+import {
+  DropDown,
+  DropDownTrigger,
+  DropDownMenu,
+  DropDownItem
+} from '@adminjs/design-system'
+
+return (
+  <DropDown>
+    <DropDownTrigger>
+      <Button>
+        <Icon icon="MoreHorizontal" />
+        This is trigger
+      </Button>
+    </DropDownTrigger>
+    <DropDownMenu>
+      <DropDownItem>
+        <Link href="/some">
+          <Icon icon="Video" />
+          Some menu item
+        </Link>
+      </DropDownItem>
+    </DropDownMenu>
+  </DropDown>
+)
+```
+
+It contains a couple of sub-components:
+
+- `DropDown` - an actual wrapper for an entire DropDown
+- `DropDownTrigger` - it has to be right inside the DropDown.
+  It is what the user sees when the DropDown is not hovered
+- `DropDownMenu` - wraps elements which are hidden by default.
+  Shown after hovering Trigger
+- `DropDownItem` - it is a wrapper for a menu item list.
+  It can next contain either a `Link` or `Button`.
+
+Props:
+- DropDownMenu extends {@link PositionProps}, so you can add prop like `top="xl"`
+- DropDownItem extends {@link SpaceProps}
+- DropDownTrigger also extends {@link SpaceProps}
+
+
+### Example
+
+```reactComponent
+return (
+  <Box p="xxl" pb="x5">
+    <DropDown>
+      <DropDownTrigger>
+        <Button>
+          <Icon icon="MoreHorizontal" />
+          Hover me to see dropdown
+        </Button>
+      </DropDownTrigger>
+      <DropDownMenu>
+        <DropDownItem>
+          Menu item 1
+        </DropDownItem>
+        <DropDownItem>
+          Menu item 2
+        </DropDownItem>
+      </DropDownMenu>
+    </DropDown>
+  </Box>
+)
+```

package/src/molecules/drop-down/drop-down.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Badge, Box, Button, Icon, Text } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { DropDown, DropDownItem, DropDownMenu, DropDownProps, DropDownTrigger } from './index.js'
+
+export const Default: StoryObj<DropDownProps & { onClick: (e) => void }> = {
+  render: ({ onClick, ...props }) => {
+    const handleClick = (event) => {
+      event.preventDefault()
+      onClick(event)
+    }
+
+    return (
+      <StoryWrapper label="Button trigger with nested DropDownItems">
+        <Box height="200px">
+          <DropDown {...props}>
+            <DropDownTrigger>
+              <Button>Get your cursor here!</Button>
+            </DropDownTrigger>
+            <DropDownMenu>
+              <DropDownItem onClick={handleClick}>
+                <Icon icon="Video" />
+                Some menu item
+              </DropDownItem>
+              <DropDownItem onClick={handleClick}>
+                <Icon icon="Headphones" />
+                Other item
+                <DropDownMenu>
+                  <DropDownItem onClick={handleClick} color="danger">
+                    <Icon icon="Edit" />
+                    Some danger item
+                  </DropDownItem>
+                </DropDownMenu>
+              </DropDownItem>
+            </DropDownMenu>
+          </DropDown>
+        </Box>
+      </StoryWrapper>
+    )
+  },
+}
+
+export const Custom: StoryObj<{ onClick: (e) => void }> = {
+  render: ({ onClick }) => {
+    const handleClick = (event) => {
+      event.preventDefault()
+      onClick(event)
+    }
+
+    return (
+      <StoryWrapper label="Badge trigger with TextContent">
+        <DropDown>
+          <DropDownTrigger>
+            <Badge>Get your cursor here!</Badge>
+          </DropDownTrigger>
+          <DropDownMenu>
+            <Box p="xxl" width={300}>
+              <Text>
+                <h3>I am inside dropdown Menu</h3>
+                <Button onClick={handleClick}>Click me if you dare</Button>
+              </Text>
+            </Box>
+          </DropDownMenu>
+        </DropDown>
+      </StoryWrapper>
+    )
+  },
+}
+
+const meta: Meta<typeof DropDown> = {
+  title: 'DesignSystem/Molecules/DropDown',
+  args: {
+    stick: 'left',
+  },
+  argTypes: {
+    stick: { options: ['left', 'right'], control: { type: 'select' } },
+  },
+}
+
+export default meta

package/src/molecules/drop-down/drop-down.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable default-case */
+import React, { useLayoutEffect, useRef, useState } from 'react'
+import { styled } from '@styled-components'
+
+import { BoxProps } from '../../atoms/box/index.js'
+
+const StyledDropDown = styled.div`
+  position: relative;
+  display: inline-block;
+`
+
+export const DEFAULT_STICK = 'left'
+
+/**
+ * Available values for {@link DropDown}.stick prop
+ * @memberof DropDown
+ */
+export type DropDownStickProp = 'left' | 'right'
+
+/**
+ * Props passed to DropDown element.
+ * @property {string} [...] Other props from {@link BoxProps}
+ * @memberof DropDown
+ * @extends BoxProps
+ */
+export type DropDownProps = {
+  /** Indicates if menu should stick to left or right */
+  stick?: DropDownStickProp;
+  children?: React.ReactNode;
+} & BoxProps
+
+type PositionProps = {
+  left?: number,
+  right?: number,
+  top: number,
+}
+
+/**
+ * @load ./drop-down.doc.md
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-dropdown--default Storybook}
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ */
+const DropDown: React.FC<DropDownProps> = (props) => {
+  const { children, stick = DEFAULT_STICK, ...boxProps } = props
+  const [isVisible, setIsVisible] = useState(false)
+  const [initialHeight, setInitialHeight] = useState<number | null>(null)
+
+  const ref = useRef<HTMLDivElement>(null)
+  const [menuPosition, setMenuPosition] = useState<PositionProps | null>()
+
+  useLayoutEffect(() => {
+    if (ref.current && !initialHeight) {
+      const { offsetHeight } = ref.current
+      setInitialHeight(offsetHeight)
+
+      switch (stick) {
+      case 'left':
+        setMenuPosition({ left: 0, top: offsetHeight })
+        break
+      case 'right':
+        setMenuPosition({ right: 0, top: offsetHeight })
+      }
+    }
+  }, [ref.current])
+
+  const elements = React.Children.map(children, (child: any) => {
+    const type = child && child.type && child.type.displayName
+    if (type === 'DropDownTrigger') {
+      // getting rid of DropDownTrigger and render just what was inside
+      return React.cloneElement(child.props.children)
+    }
+    if (type === 'DropDownMenu') {
+      return React.cloneElement(child, {
+        isVisible,
+        stick,
+        ...menuPosition,
+      })
+    }
+    return child
+  })
+  return (
+    <StyledDropDown
+      {...boxProps as any}
+      onMouseEnter={(): void => setIsVisible(true)}
+      onMouseLeave={(): void => setIsVisible(false)}
+      ref={ref}
+    >
+      {elements}
+    </StyledDropDown>
+  )
+}
+
+DropDown.displayName = 'DropDown'
+
+export { DropDown }
+export default DropDown

package/src/molecules/drop-down/index.ts

@@ -0,0 +1,5 @@
+export * from './drop-down.jsx'
+export * from './drop-down-item.jsx'
+export * from './drop-down-item-action.jsx'
+export * from './drop-down-menu.jsx'
+export * from './drop-down-trigger.jsx'

package/src/molecules/drop-zone/drop-zone-image.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const DropZoneImage = (): React.ReactElement => (
+  <svg width="80" height="72" viewBox="0 0 80 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="5.85" y="9.35" width="68.3" height="55.3" rx="1.65" fill="white" stroke="#3B3552" strokeWidth="0.7" />
+    <rect x="8.5" y="12" width="63" height="38" rx="1" fill="currentColor" fillOpacity="0.05" />
+    <circle cx="23.5" cy="27" r="8" fill="currentColor" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M30 16L49.5 50H10.5L30 16Z" fill="#3B3552" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M53 25L69.5 50H36.5L53 25Z" fill="#3B3552" />
+    <path d="M2.5 52V10C2.5 7.79086 4.29086 6 6.5 6H61.5" stroke="#3B3552" strokeWidth="0.7" strokeLinecap="round" />
+  </svg>
+
+)
+
+export default DropZoneImage

package/src/molecules/drop-zone/drop-zone-item.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { styled } from '@styled-components'
+
+import { Box } from '../../atoms/box/index.js'
+import { Icon } from '../../atoms/icon/index.js'
+import { Button } from '../../atoms/button/index.js'
+import { Text } from '../../atoms/text/index.js'
+import { humanFileSize } from '../../utils/index.js'
+
+const DropZoneImg = styled.div<{ src: string }>`
+  width: 100%;
+  height: 100%;
+  background-image: url('${({ src }) => src}');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  border-radius: ${({ theme }) => theme.space.sm};
+`
+
+const Wrapper = styled.div`
+  padding: ${({ theme }) => theme.space.md};
+  display: flex;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.space.lg};
+  gap: ${({ theme }) => theme.space.lg};
+
+  border: ${({ theme }) => theme.borders.default};
+  border-color: ${({ theme }) => theme.colors.grey40};
+  border-radius: ${({ theme }) => theme.space.sm};
+`
+
+/**
+ * @memberof DropZoneItem
+ * @alias DropZoneItemProps
+ */
+export type DropZoneItemProps = {
+  /**
+   * Actual file buffer
+   */
+  file?: File
+  /**
+   * Handler function triggered after clicking remove
+   */
+  onRemove?: () => void
+  /**
+   * Preview image. If `file` is given and it is a image then `src` will be
+   * overridden by this image.
+   */
+  src?: string
+  /**
+   * filename. If 'file' is given it overrides what was given as a `filename`
+   */
+  filename?: string
+}
+
+/**
+ * @classdesc
+ *
+ * <img src="components/drop-zone-item.png" />
+ *
+ * Single uploaded file. Usually it is used within {@link DropZone}, but it can also be
+ * reused anywhere
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { DropZoneItem, DropZoneItemProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @see DropZoneItem
+ * @hideconstructor
+ * @see DropZoneItemProps
+ * @example
+ * return (
+ *  <DropZoneItem
+ *    src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.npr.org%2F2019%2F05%2F17%2F724262019%2Fgrumpy-cat-dies-her-spirit-will-live-on-family-says&psig=AOvVaw2ZKtTEZr8N43fx9x-lTITa&ust=1581083274368000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKidqqyIvecCFQAAAAAdAAAAABAD"
+ *    filename="shut-up-it-works.png"
+ *  />
+ * )
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ */
+const DropZoneItem: React.FC<DropZoneItemProps> = (props) => {
+  const { file, onRemove, filename } = props
+  let { src } = props
+  if (file && ['image/png', 'image/jpeg', 'image/gif'].includes(file.type)) {
+    src = URL.createObjectURL(file)
+  }
+
+  return (
+    <Wrapper>
+      <Box flex alignItems="center" justifyContent="center" width={40} height={40}>
+        {src ? <DropZoneImg src={src} /> : <Icon icon="Paperclip" />}
+      </Box>
+      <Box flex flexDirection="column" style={{ gap: 4 }}>
+        <Text variant="sm" fontWeight={500} lineHeight="default">
+          {file?.name || filename}
+        </Text>
+        {file && (
+          <Text variant="sm" color="grey80" lineHeight="default">
+            {new Date(file.lastModified).toLocaleString()} {humanFileSize(file.size, 'MB')}
+          </Text>
+        )}
+      </Box>
+      {onRemove && (
+        <Button
+          ml="auto"
+          mr="md"
+          variant="light"
+          size="icon"
+          type="button"
+          rounded
+          onClick={onRemove}
+        >
+          <Icon icon="X" />
+        </Button>
+      )}
+    </Wrapper>
+  )
+}
+
+DropZoneItem.displayName = 'DropZoneItem'
+
+export { DropZoneItem }
+export default DropZoneItem

package/src/molecules/drop-zone/drop-zone.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { DROPZONE_DEFAULT_TRANSLATIONS, DropZone, DropZoneProps } from './index.js'
+
+export const Default: StoryObj<
+  DropZoneProps & { maxSize: number; mimeTypes: string[] } & typeof DROPZONE_DEFAULT_TRANSLATIONS
+> = {
+  render: ({
+    multiple,
+    maxSize,
+    mimeTypes,
+    uploadLimitIn,
+    placeholder,
+    acceptedSize,
+    acceptedType,
+    unsupportedSize,
+    unsupportedType,
+  }) => (
+    <DropZone
+      multiple={multiple}
+      validate={{ maxSize, mimeTypes }}
+      uploadLimitIn={uploadLimitIn}
+      translations={{ placeholder, acceptedSize, acceptedType, unsupportedSize, unsupportedType }}
+    />
+  ),
+}
+
+const meta: Meta<typeof DropZone> = {
+  title: 'DesignSystem/Molecules/DropZone',
+  component: DropZone,
+  args: {
+    multiple: false,
+    validate: {
+      maxSize: 10240000,
+      mimeTypes: ['application/pdf', 'image/png'],
+    },
+    uploadLimitIn: 'MB',
+    placeholder: DROPZONE_DEFAULT_TRANSLATIONS.placeholder,
+    acceptedSize: DROPZONE_DEFAULT_TRANSLATIONS.acceptedSize,
+    acceptedType: DROPZONE_DEFAULT_TRANSLATIONS.acceptedType,
+    unsupportedSize: DROPZONE_DEFAULT_TRANSLATIONS.unsupportedSize,
+    unsupportedType: DROPZONE_DEFAULT_TRANSLATIONS.unsupportedType,
+  } as any,
+  argTypes: {
+    multiple: {
+      description: 'If drop zone should handle multiple uploads',
+      control: { type: 'boolean' },
+    },
+    maxSize: {
+      name: 'validate.maxSize',
+      description:
+        'Maximum size of the uploaded file in bytes. If not defined - all files are allowed',
+      control: { type: 'number' },
+    },
+    mimeTypes: {
+      name: 'validate.mimeTypes',
+      description: 'Allowed file types',
+      control: { type: 'object' },
+    },
+    uploadLimitIn: {
+      description: 'Upload limit display',
+      options: ['B', 'KB', 'MB', 'GB', 'TB'],
+      control: { type: 'select' },
+    },
+    placeholder: {
+      name: 'translations.placeholder',
+      description: 'Translated placeholder',
+      control: { type: 'text' },
+    },
+    acceptedSize: {
+      name: 'translations.acceptedSize',
+      description: 'Translated accepted size label',
+      control: { type: 'text' },
+    },
+    acceptedType: {
+      name: 'translations.acceptedType',
+      description: 'Translated accepted type label',
+      control: { type: 'text' },
+    },
+    unsupportedSize: {
+      name: 'translations.unsupportedSize',
+      description: 'Translated validation error for unsupported size',
+      control: { type: 'text' },
+    },
+    unsupportedType: {
+      name: 'translations.unsupportedType',
+      description: 'Translated validation error for unsupported type',
+      control: { type: 'text' },
+    },
+  } as any,
+}
+
+export default meta