@clement_lores/admin-design-system 1.0.0

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

@@ -0,0 +1,374 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import template from 'lodash/template.js'
+import { rgba } from 'polished'
+import { styled, css } from '@styled-components'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { Label } from '../../atoms/label/index.js'
+import { Text } from '../../atoms/text/index.js'
+import { DisplaySizeUnit, humanFileSize } from '../../utils/human-file-size.js'
+import { MessageBox } from '../message-box/index.js'
+import { DropZoneItem } from './drop-zone-item.jsx'
+import Image from './drop-zone-image.jsx'
+
+/**
+ * @memberof DropZone
+ * @alias FileSizeUnit
+ */
+type FileSizeUnit = DisplaySizeUnit
+
+const validateContentType = (mimeTypes: undefined | Array<string>, mimeType: string): boolean => {
+  if (!mimeTypes || !mimeTypes.length) {
+    return true
+  }
+  return mimeTypes.includes(mimeType)
+}
+
+const validateSize = (
+  maxSize: string | number | undefined,
+  size: string | number | null,
+): boolean => {
+  if (!maxSize) {
+    return true
+  }
+  if (!size) {
+    return true
+  }
+  return +maxSize >= +size
+}
+
+const inUnit = (size: string | number, unit?: FileSizeUnit): string => {
+  if (!size) {
+    return ''
+  }
+
+  return humanFileSize(size, unit)
+}
+
+export const DROPZONE_DEFAULT_TRANSLATIONS = {
+  placeholder: 'Drop your file here, or click to browse',
+  acceptedSize: 'Max size: {{maxSize}}',
+  acceptedType: 'Supports: {{mimeTypes}}',
+  unsupportedSize: 'File {{fileName}} is too big',
+  unsupportedType: 'File {{fileName}} has unsupported type: {{fileType}}',
+}
+
+const translate = (str: string, params?: Record<string, string | number>) => {
+  try {
+    return template(str, { interpolate: /\{\{(\w+)\}\}/g })(params)
+  } catch (e) {
+    return str
+  }
+}
+
+/**
+ * @returns {void}
+ * @memberof DropZone
+ * @alias OnDropDownChange
+ */
+export type OnDropZoneChange = (files: Array<File>) => void
+
+/**
+ * @memberof DropZone
+ * @alias DropZoneProps
+ */
+export type DropZoneProps = {
+  /**
+   * if drop zone should handle multiple uploads
+   */
+  multiple?: boolean
+  /**
+   * Initial files collection (in case you want to hold files state)
+   */
+  files?: Array<File>
+  /**
+   * Callback performed when the file is dropped/selected
+   */
+  onChange?: OnDropZoneChange
+  /**
+   * Validate options
+   */
+  validate?: {
+    /**
+     * Maximum size of the uploaded file in bytes. If not defined - all files are allowed.
+     */
+    maxSize?: number
+    /**
+     * Available mime types. When not defined - all mime types are allowed.
+     */
+    mimeTypes?: Array<string>
+  }
+  /**
+   * Upload limit display e.g.: 'KB' (upper case)
+   */
+  uploadLimitIn?: FileSizeUnit
+  /**
+   * Custom drop zone translations
+   * @default
+   * {
+   *   placeholder: 'Drop your image here, or click to browse',
+   *   acceptedSize: 'Max size: {{maxSize}}',
+   *   acceptedType: 'Supports: {{mimeTypes}}',
+   *   unsupportedSize: 'File {{fileName}} is too big',
+   *   unsupportedType: 'File {{fileName}} has unsupported type: {{fileType}}',
+   * }
+   */
+  translations?: Partial<typeof DROPZONE_DEFAULT_TRANSLATIONS>
+}
+
+const UploadInput = styled.input`
+  font-size: 100px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  bottom: 0;
+  cursor: pointer;
+  width: 100%;
+`
+
+const StyledDropZone: any = styled(Box)<{ isDragging: boolean } & BoxProps>`
+  border: 1px dashed ${({ theme }) => theme.colors.inputBorder};
+  border-radius: ${({ theme }) => theme.space.sm};
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary100};
+  }
+
+  ${({ isDragging }) => isDragging
+    && css`
+      background-color: ${({ theme }) => rgba(theme.colors.primary100, 0.05)};
+    `}
+
+  & ${Label} {
+    color: ${({ theme }) => theme.colors.grey60};
+    font-size: ${({ theme }) => theme.fontSizes.xs};
+    padding-right: 4px;
+    letter-spacing: 1px;
+  }
+`
+
+/**
+ * @classdesc
+ *
+ * <img src="components/drop-zone.png" />
+ *
+ * DropZone which can be used for uploading files.
+ *
+ * ### usage
+ *
+ * ```javascript
+ * import { DropZone, DropZoneProps } from '@adminjs/design-system'
+ * ```
+ *
+ * how to use it in your custom component.tsx (TypesScript):
+ * ```
+ * import React, { useState } from 'react'
+ * import { DropZone, Label, BasePropertyProps } from '@adminjs/design-system'
+ * import { unflatten } from 'flat'
+ *
+ * const UploadPhoto: React.FC<BasePropertyProps> = (props) => {
+ *   const { property, record, onChange } = props
+ *
+ *   const onUpload = (files: FileList) => {
+ *     const newRecord = {...record}
+ *     const file = files.length && files[0]
+ *
+ *     onChange({
+ *       ...newRecord,
+ *       params: {
+ *         ...newRecord.params,
+ *         [property.name]: file,
+ *       }
+ *     })
+ *     event.preventDefault()
+ *   }
+ *
+ *   return (
+ *     <Box>
+ *       <Label>{property.label}</Label>
+ *       <DropZone onChange={onUpload} />
+ *     </Box>
+ *   )
+ * }
+ * ```
+ * @hideconstructor
+ * @component
+ * @subcategory Molecules
+ * @see FileSizeUnit
+ * @see OnDropDownChange
+ * @see DropZoneProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-dropzone--default Storybook}
+ * @example <caption>Single file with validation</caption>
+ * const maxSize = 1024 * 100
+ * const mimeTypes = ['application/pdf']
+ * const onUpload = (files) => { alert(files,length ? files[0].name : 'no files' ) }
+ * return (
+ * <Box>
+ *   <DropZone
+ *     onChange={onUpload}
+ *     validate= { { maxSize, mimeTypes } }
+ *   />
+ * </Box>
+ * )
+ *
+ * @example <caption>Multi file of photos</caption>
+ * const mimeTypes = ['image/png']
+ * const onUpload = (files) => { alert(files.length ? files.length : 'no files' ) }
+ * return (
+ * <Box>
+ *   <DropZone
+ *     multiple
+ *     onChange={onUpload}
+ *     validate= { { mimeTypes } }
+ *   />
+ * </Box>
+ * )
+ * @section design-system
+ */
+const DropZone: React.FC<DropZoneProps> = (props) => {
+  const {
+    validate,
+    onChange,
+    multiple,
+    files: filesFromProps,
+    uploadLimitIn,
+    translations,
+    ...other
+  } = props
+  const [isDragging, setIsDragging] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [filesToUpload, setFilesToUpload] = useState<Array<File>>(filesFromProps ?? [])
+  const t = { ...DROPZONE_DEFAULT_TRANSLATIONS, ...translations }
+
+  useEffect(() => {
+    if (filesFromProps) {
+      setFilesToUpload(filesFromProps)
+    }
+  }, [filesFromProps])
+
+  const onDragEnter = (): void => setIsDragging(true)
+  const onDragLeave = (): void => setIsDragging(false)
+  const onDragOver = (): void => setIsDragging(true)
+
+  const removeItem = useCallback(
+    (index: number): void => {
+      const newItems = [...filesToUpload]
+      newItems.splice(index, 1)
+      if (onChange) {
+        onChange(newItems)
+      }
+      setFilesToUpload(newItems)
+    },
+    [filesToUpload, setFilesToUpload, onChange],
+  )
+
+  const onDrop = useCallback(
+    (event: React.DragEvent | React.SyntheticEvent): void => {
+      event.preventDefault()
+      setIsDragging(false)
+
+      const { files } = (event as React.DragEvent).dataTransfer || event.target
+      const validatedFiles: Array<File> = []
+
+      for (let i = 0; i < files.length; i += 1) {
+        const file = files.item(i) as File
+        if (!file) {
+          return
+        }
+        if (validate && !validateContentType(validate.mimeTypes, file.type)) {
+          setError(
+            translate(t.unsupportedType, {
+              fileName: file.name,
+              fileType: file.type,
+            }),
+          )
+          return
+        }
+        if (validate && !validateSize(validate.maxSize, file && file.size)) {
+          setError(translate(t.unsupportedSize, { fileName: file.name }))
+          return
+        }
+        validatedFiles.push(file)
+        setError(null)
+      }
+      let newFiles
+      if (!multiple && validatedFiles.length) {
+        newFiles = [validatedFiles[0]]
+      } else {
+        newFiles = [...filesToUpload, ...validatedFiles]
+      }
+      if (onChange) {
+        onChange(newFiles)
+      }
+      setFilesToUpload(newFiles)
+    },
+    [onChange, setFilesToUpload, setIsDragging],
+  )
+
+  const displayUploadLimit = useCallback(() => {
+    if (validate && validate.maxSize) {
+      return inUnit(validate.maxSize, uploadLimitIn)
+    }
+    return ''
+  }, [validate])
+
+  return (
+    <Box>
+      <StyledDropZone
+        onDragEnter={onDragEnter}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        isDragging={isDragging}
+        {...other}
+        p="xl"
+      >
+        <UploadInput type="file" onChange={(event): void => onDrop(event)} multiple={multiple} />
+        <Box>
+          <Box color="primary100">
+            <Image />
+          </Box>
+          <Text fontSize="sm">{t.placeholder}</Text>
+          <Box>
+            {validate && validate.maxSize ? (
+              <Text variant="xs" color="grey60" lineHeight="default" mt="sm">
+                {translate(t.acceptedSize, { maxSize: displayUploadLimit() })}
+              </Text>
+            ) : (
+              ''
+            )}
+            {validate && validate.mimeTypes && validate.mimeTypes.length ? (
+              <Text variant="xs" color="grey60" lineHeight="default" mt="sm">
+                {translate(t.acceptedType, { mimeTypes: validate.mimeTypes.join(', ') })}
+              </Text>
+            ) : (
+              ''
+            )}
+          </Box>
+        </Box>
+      </StyledDropZone>
+      {error && (
+        <MessageBox
+          mt="default"
+          variant="danger"
+          size="sm"
+          icon="AlertCircle"
+          message={error}
+          onCloseClick={(): void => setError(null)}
+        />
+      )}
+      {filesToUpload.map((file, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <DropZoneItem file={file} key={index} onRemove={(): void => removeItem(index)} />
+      ))}
+    </Box>
+  )
+}
+
+DropZone.displayName = 'DropZone'
+
+export { DropZone }
+export default DropZone

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

@@ -0,0 +1,2 @@
+export * from './drop-zone.jsx'
+export * from './drop-zone-item.jsx'

package/src/molecules/form-group/form-group.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import {
+  Box,
+  Button,
+  DropDown,
+  DropDownMenu,
+  DropDownTrigger,
+  Icon,
+  Input,
+  Label,
+} from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { FormGroup, FormMessage, InputGroup } from './index.js'
+
+export const FullFeaturedFormGroup: StoryFn = () => (
+  <FormGroup>
+    <Label required>Name</Label>
+    <InputGroup>
+      <DropDown>
+        <DropDownTrigger>
+          <Button variant="text" size="icon">
+            ==
+          </Button>
+        </DropDownTrigger>
+        <DropDownMenu top="xxl">
+          <Button variant="text" size="icon">
+            {'>='}
+          </Button>
+          <Button variant="text" size="icon">
+            {'<='}
+          </Button>
+          <Button variant="text" size="icon">
+            {'><'}
+          </Button>
+        </DropDownMenu>
+      </DropDown>
+      <Input />
+      <Label>100 KM</Label>
+      <Button size="icon">
+        <Icon icon="ArrowRight" />
+      </Button>
+    </InputGroup>
+    <FormMessage>With an message below</FormMessage>
+  </FormGroup>
+)
+
+export const Full: StoryFn = () => (
+  <Box width={1}>
+    <StoryWrapper label="Full featured FormGroup">
+      <FullFeaturedFormGroup />
+    </StoryWrapper>
+  </Box>
+)
+
+const meta: Meta<typeof FormGroup> = {
+  title: 'DesignSystem/Molecules/FormGroup',
+  component: FormGroup,
+}
+
+export default meta

package/src/molecules/form-group/form-group.tsx

@@ -0,0 +1,170 @@
+import { SpaceProps, space } from 'styled-system'
+import { styled, css } from '@styled-components'
+
+import { Label } from '../../atoms/label/index.js'
+import { Button } from '../../atoms/button/index.js'
+import { Input } from '../../atoms/input/index.js'
+import { CurrencyInput } from '../../atoms/currency-input/index.js'
+import { Link } from '../../atoms/link/index.js'
+import InputGroup from './input-group.jsx'
+
+const formGroupDisabledCSS = css`
+  color: ${({ theme }) => theme.colors.grey40};
+`
+
+const formGroupWithErrorCSS = css`
+  color: ${({ theme }) => theme.colors.error};
+  ${Input}, ${CurrencyInput} {
+    color: ${({ theme }) => theme.colors.error};
+    border-color: ${({ theme }) => theme.colors.error};
+  }
+  &&& ${Label} {
+    color: ${({ theme }) => theme.colors.error};
+    &:before {
+      color: ${({ theme }) => theme.colors.error};
+    }
+  }
+  &&& ${Label}, &&& ${Button}, &&& ${Link} {
+    border-color: ${({ theme }) => theme.colors.error};
+  }
+`
+
+/**
+ * Props for FormGroup. Apart from props defined here FormGroup supports also all {@link SpaceProps}
+ * @alias FormGroupProps
+ * @memberof FormGroup
+ */
+export type FormGroupProps = SpaceProps & {
+  /**
+   * If given FormGroup has error
+   */
+  error?: boolean;
+  /**
+   * If given FormGroup should be disabled
+   */
+  disabled?: boolean;
+  /**
+   * if given form group should be rendered in a filter
+   */
+  variant?: 'filter';
+}
+
+/**
+ * @classdesc
+ *
+ * <img src="components/form-group.png" />
+ *
+ * FormGroup comes with other, from-related components like: FormMessage and InputGroup.
+ * Together they allow you to build form elements.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { FormGroup, FormGroupProps, InputGroup, FormMessage } from '@adminjs/design-system'
+ * ```
+ *
+ * @hideconstructor
+ * @component
+ * @see FormGroupProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-formgroup--default Storybook}
+ * @subcategory Molecules
+ * @example <caption>Example 1: input with all sorts of buttons</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup>
+ *     <Label required>Name</Label>
+ *     <InputGroup>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *       <Input />
+ *       <Label>100 KM</Label>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *     </InputGroup>
+ *     <FormMessage>And the optional message</FormMessage>
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 2: the same input with errors</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup error>
+ *     <Label required>Name</Label>
+ *     <InputGroup>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *       <Input />
+ *       <Label>100 KM</Label>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *     </InputGroup>
+ *     <FormMessage>And the optional message</FormMessage>
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 3: disabled field</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup disabled>
+ *     <Label>Disabled field</Label>
+ *     <InputGroup>
+ *       <Input disabled />
+ *     </InputGroup>
+ *     <FormMessage />
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 4: with a link</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup>
+ *     <Label>Some form data with button link</Label>
+ *     <InputGroup>
+ *       <Input />
+ *       <Link href="#someHref">This is link</Link>
+ *     </InputGroup>
+ *     <FormMessage />
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @section design-system
+ */
+export const FormGroup = styled.div<FormGroupProps>`
+  width: 100%;
+  ${({ error }): any => (error ? formGroupWithErrorCSS : '')};
+  ${({ disabled }): any => (disabled ? formGroupDisabledCSS : '')};
+  ${space};
+
+  & > ${Input}, & > ${CurrencyInput} {
+    width: 100%;
+  }
+
+  & ${Input}, & ${CurrencyInput} {
+    ${({ variant, theme }): string => (variant === 'filter' ? `border-color: ${theme.colors.inputBorder}` : '')};
+    ${({ variant, theme }): string => (variant === 'filter' ? `color: ${theme.colors.text}` : '')};
+  }
+
+  & ${InputGroup} {
+    ${Label}, ${Button}:last-child, ${Link}:last-child {
+      ${({ variant, theme }): string => (variant === 'filter' ? `border-color: ${theme.colors.inputBorder}` : '')};
+    }
+  }
+
+  & [class*="DatePicker"] > .react-datepicker-wrapper {
+    ${({ variant, theme }): string => (variant === 'filter' ? `border-color: ${theme.colors.inputBorder}` : '')};
+  }
+  & [class*="DatePicker"] > .react-datepicker-wrapper input {
+    ${({ variant, theme }): string => (variant === 'filter' ? `color: ${theme.colors.text}` : '')};
+  }
+`
+
+FormGroup.defaultProps = {
+  mb: 'lg',
+}
+FormGroup.displayName = 'FormGroup'
+
+export default FormGroup

package/src/molecules/form-group/form-message.tsx

@@ -0,0 +1,20 @@
+import { styled } from '@styled-components'
+
+import { Text } from '../../atoms/text/index.js'
+
+/**
+ * @component
+ * @private
+ */
+const FormMessage = styled(Text)`
+  box-sizing: border-box;
+  vertical-align: middle;
+  height: ${({ theme }) => theme.space.xl};
+  margin: ${({ theme }) => theme.space.sm} 0 0;
+  font-weight: normal;
+  font-size: ${({ theme }) => theme.fontSizes.sm};
+`
+
+FormMessage.displayName = 'FormMessage'
+
+export default FormMessage

package/src/molecules/form-group/index.ts

@@ -0,0 +1,3 @@
+export * from './form-group.jsx'
+export { default as InputGroup } from './input-group.jsx'
+export { default as FormMessage } from './form-message.jsx'

package/src/molecules/form-group/input-group.tsx

@@ -0,0 +1,59 @@
+import { styled } from '@styled-components'
+
+import { Button } from '../../atoms/button/index.js'
+import { Input } from '../../atoms/input/index.js'
+import { Label } from '../../atoms/label/index.js'
+import { Link } from '../../atoms/link/index.js'
+
+/**
+ * @component
+ * @private
+ */
+const InputGroup = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  ${Input} {
+    flex-grow: 1;
+  }
+  ${Input}:not(:last-child) {
+    border-right: none;
+  }
+  ${Label}, & > ${Button}, & > ${Link}:last-child {
+    padding: ${({ theme }) => theme.space.sm};
+    border: solid ${({ theme }) => theme.colors.inputBorder};
+    border-width: 1px 1px 1px 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin: 0;
+    color: ${({ theme }) => theme.colors.grey40};
+  }
+
+  ${Label}, ${Button}, ${Link} {
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  ${Label}, ${Link} {
+    line-height: ${({ theme }) => theme.lineHeights.lg};
+  }
+
+  ${Button}:first-child, ${Link}:first-child {
+    border-right: 0;
+  }
+
+  ${Input}:hover {
+    & + ${Label}, & + ${Button}, & + ${Link} {
+      border-color: ${({ theme }) => theme.colors.grey60};
+    }
+  } 
+  ${Input}:focus {
+    & + ${Label}, & + ${Button}, & + ${Link} {
+      border-color: ${({ theme }) => theme.colors.primary100};
+    }
+  }
+`
+
+InputGroup.displayName = 'InputGroup'
+
+export default InputGroup