@clement_lores/admin-design-system 1.0.0

package/src/molecules/date-picker/date-picker.tsx

@@ -0,0 +1,329 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+import React, { useMemo } from 'react'
+import { styled } from '@styled-components'
+import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker'
+import MaskedInput, { MaskedInputProps } from 'react-text-mask'
+import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe.js'
+
+import styles from '../../utils/datepicker.styles.js'
+import { Icon } from '../../atoms/icon/index.js'
+import { PropertyType } from '../../utils/index.js'
+import { Box } from '../../atoms/box/index.js'
+import { cssClass } from '../../utils/css-class.js'
+
+const Mask = MaskedInput.default ?? MaskedInput
+const autocorrectedDatePipe = createAutoCorrectedDatePipe.default ?? createAutoCorrectedDatePipe
+
+const DatePickerIcon = styled(Icon)`
+  position: absolute;  
+  color: ${({ theme }) => theme.colors.primary100};
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: 100%;
+  min-width: 34px;
+  width: auto;
+`
+
+const StyledDatePicker = styled(Box)`
+  ${styles};
+  position: relative;
+
+  & .react-datepicker-wrapper {
+    width: 100%;
+    box-sizing: border-box;
+    border: ${({ theme }) => `1px solid ${theme.colors.grey40}`};
+    padding: 4px 8px;
+    font-size: 14px;
+    line-height: 24px;
+    border-radius: 2px;
+  }
+
+  & .react-datepicker-wrapper input {
+    border: none;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    color: ${({ theme }) => theme.colors.grey100};
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  & .react-datepicker {
+    border-radius: 0;
+    padding: ${({ theme }) => theme.space.default};
+    font-family: ${({ theme }) => theme.font};
+    z-index: 101;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  & .react-datepicker__navigation--next {
+    border-left-color: ${({ theme }) => theme.colors.primary60};
+    top: 16px;
+  }
+
+  & .react-datepicker__navigation--next:hover {
+    border-left-color: ${({ theme }) => theme.colors.primary100};
+  }
+
+  & .react-datepicker__navigation--previous {
+    border-right-color: ${({ theme }) => theme.colors.primary60};
+    top: 16px;
+  }
+
+  & .react-datepicker__navigation--previous:hover {
+    border-right-color: ${({ theme }) => theme.colors.primary100};
+  }
+
+  & .react-datepicker__navigation {
+    outline: none;
+  }
+
+  & .react-datepicker__year-read-view--down-arrow {
+    top: 5px;
+  }
+
+  & .react-datepicker__header {
+    background: ${({ theme }) => theme.colors.white};
+    font-size: ${({ theme }) => theme.fontSizes.default};
+    border: none;
+  }
+
+  & .react-datepicker__current-month {
+    font-weight: normal;
+    padding-bottom: ${({ theme }) => theme.space.lg};
+  }
+
+  & .react-datepicker__month {
+    margin-top: 0;
+  }
+
+  & .react-datepicker__day-name {
+    color: ${({ theme }) => theme.colors.primary60};
+  }
+
+  & .react-datepicker__day--outside-month {
+    color: ${({ theme }) => theme.colors.grey40};
+  }
+
+  & .react-datepicker__day--today.react-datepicker__day--keyboard-selected {
+    color: ${({ theme }) => theme.colors.white};
+  }
+
+  & .react-datepicker__day--selected {
+    color: ${({ theme }) => theme.colors.white};
+  }
+
+  & .react-datepicker__day--keyboard-selected:not(.react-datepicker__day--today) {
+    background: none;
+    color: ${({ theme }) => theme.colors.grey100};
+  }
+
+  & .react-datepicker__day:hover,
+  & .react-datepicker__day {
+    border-radius: 15px;
+  }
+
+  & .react-datepicker__day--selected {
+    background: ${({ theme }) => theme.colors.primary100};
+    border-radius: 15px;
+    color: ${({ theme }) => theme.colors.white};
+  }
+`
+
+const parseDateSafely = (newDate: any) => {
+  const timestamp = Date.parse(newDate)
+
+  if (!Number.isNaN(timestamp)) {
+    return new Date(timestamp)
+  }
+
+  return null
+}
+
+// https://github.com/text-mask/text-mask/issues/951
+const convertDateFnsFormatToDatePipeFormat = (format: string) => {
+  const tokens = format.split('')
+
+  return tokens.map((char) => {
+    if (char === 'M') return 'm'
+    if (char === 'm') return 'M'
+    return char
+  }).join('')
+}
+
+const defaultDateProps = {
+  date: {
+    format: 'yyyy/MM/dd',
+    placeholder: 'YYYY/MM/DD',
+    inputMask: [/\d/, /\d/, /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/],
+  },
+  datetime: {
+    format: 'yyyy/MM/dd HH:mm',
+    placeholder: 'YYYY/MM/DD HH:mm',
+    inputMask: [/\d/, /\d/, /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, ' ', /\d/, /\d/, ':', /\d/, /\d/],
+  },
+}
+
+type CustomProps = Partial<Omit<ReactDatePickerProps, 'value' | 'disabled' | 'onChange'>>
+
+type DateMaskOverride = ({
+  regex: string,
+  raw: undefined,
+} | {
+  raw: string,
+  regex: undefined,
+} | string)[]
+
+type InputMaskProps = Omit<MaskedInputProps, 'mask'> & { mask?: DateMaskOverride }
+
+/**
+ * Props for DatePicker
+ *
+ * @memberof DatePicker
+ * @alias DatePickerProps
+ * @property {any} {...}    Any custom props to pass down to the ReactDatePicker
+ * @see https://reactdatepicker.com/
+ */
+export type DatePickerProps = CustomProps & {
+  /**
+   * If datepicker should be disabled
+   */
+  disabled?: boolean;
+  /**
+   * selected date
+   */
+  value?: string | Date;
+  /**
+   * on change callback taking ISO string as a date
+   */
+  onChange: (date: string | null) => void;
+  /**
+   * property type, could be either 'date' or 'datetime'
+   */
+  propertyType?: PropertyType;
+  /**
+   * input mask props for text input in case you want to use it, see: https://github.com/text-mask/text-mask
+   */
+  inputMask?: InputMaskProps;
+}
+
+const parseCustomMask = (mask: DateMaskOverride) => mask.map((el) => {
+  if (typeof el === 'string') return el
+  if (el.raw) return el.raw
+  if (!el.regex) throw new Error('Invalid input mask')
+
+  return new RegExp(el.regex)
+})
+
+const getDateInputProps = (
+  // eslint-disable-next-line default-param-last
+  propertyType = 'datetime',
+  props: Pick<DatePickerProps, 'placeholderText' | 'dateFormat' | 'inputMask'>,
+) => {
+  const { dateFormat, placeholderText, inputMask } = props
+  const defaultProps = defaultDateProps[propertyType]
+  const format = dateFormat ?? defaultProps.format
+  const placeholder = placeholderText ?? defaultProps.placeholder
+  const mask = inputMask?.mask
+    ? parseCustomMask(inputMask.mask)
+    : defaultProps.inputMask
+  // eslint-disable-next-line max-len
+  const dateFormatPipe = autocorrectedDatePipe(convertDateFnsFormatToDatePipeFormat(format))
+
+  return { format, dateFormatPipe, placeholder, parsedMask: mask }
+}
+
+/**
+ * @classdesc
+ *
+ * <img src="components/date-picker.png" />
+ *
+ *
+ * Component responsible for showing dates. It is a wrapper to
+ * [react datepicker]{@link https://reactdatepicker.com/}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { DatePicker, DatePickerProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @see https://reactdatepicker.com/
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-datepicker--default Storybook}
+ * @see DatePickerProps
+ * @hideconstructor
+ *
+ * @example
+ * return (
+ * <Box width={1/2} height="300px">
+ *   <DatePicker onChange={(date) => console.log(date)}/>
+ * </Box>
+ * )
+ * @section design-system
+ */
+const DatePicker: React.FC<DatePickerProps> = (props) => {
+  const {
+    value,
+    onChange,
+    disabled,
+    propertyType,
+    inputMask = {},
+    placeholderText,
+    dateFormat,
+    ...other
+  } = props
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { mask: _mask, ...otherInputMaskProps } = inputMask as InputMaskProps
+
+  const handleChange = (newDate: Date | null) => {
+    onChange(parseDateSafely(newDate)?.toISOString?.() || '')
+  }
+
+  const dateValue = useMemo(() => parseDateSafely(value), [value])
+  const { dateFormatPipe, format, parsedMask, placeholder } = getDateInputProps(
+    propertyType,
+    { dateFormat, inputMask, placeholderText },
+  )
+
+  return (
+    <StyledDatePicker className={cssClass('DatePicker')}>
+      <ReactDatePicker
+        customInput={(
+          <Mask
+            pipe={dateFormatPipe}
+            mask={parsedMask}
+            keepCharPositions
+            guide
+            placeholder={placeholder}
+            disabled={disabled}
+            {...otherInputMaskProps}
+          />
+        )}
+        selected={dateValue}
+        onChange={handleChange}
+        showTimeInput={propertyType === 'datetime'}
+        dateFormat={format}
+        disabled={disabled}
+        {...other}
+      />
+      <DatePickerIcon icon="Calendar" color="primary100" />
+    </StyledDatePicker>
+  )
+}
+
+DatePicker.displayName = 'DatePicker'
+
+export { DatePicker }
+export default DatePicker

package/src/molecules/date-picker/index.ts

@@ -0,0 +1,2 @@
+export * from './date-picker.jsx'
+export * from './useDatePicker.js'

package/src/molecules/date-picker/useDatePicker.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+
+import { parseISO } from 'date-fns'
+
+import { formatDateProperty, PropertyType } from '../../utils/index.js'
+
+export const useDatePicker = ({ value, propertyType, disabled, onChange }:
+{
+  onChange: (date: Date) => void,
+  value?: string|Date,
+  propertyType?: PropertyType,
+  disabled?: boolean
+}): {
+  dateString?: string,
+  date?: Date,
+  isCalendarVisible: boolean,
+  setCalendarVisible: (isVisible: boolean) => void,
+  onDateChange: (newDate: Date) => void
+} => {
+  const [isCalendarVisible, setCalendarVisible] = useState(false)
+
+  let date: Date | undefined
+  let dateString: string | undefined
+  if (value && value.constructor.name !== 'Date') {
+    const dateStringValue = value as string
+
+    let dateNum: Date | undefined = parseISO(dateStringValue)
+    if (dateNum.toString() === 'Invalid Date') dateNum = undefined
+    if (dateNum) {
+      date = new Date(dateNum)
+      dateString = formatDateProperty(date, propertyType)
+    }
+  } else if (value && value.constructor.name === 'Date') {
+    dateString = formatDateProperty(value as Date, propertyType)
+  }
+  const onDateChange = (newDate: Date): void => {
+    if (!disabled) {
+      onChange(newDate)
+    }
+  }
+
+  return { dateString, date, isCalendarVisible, setCalendarVisible, onDateChange }
+}
+
+export default useDatePicker

package/src/molecules/drawer/drawer-content.tsx

@@ -0,0 +1,18 @@
+import { space, SpaceProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+/**
+ * @component
+ * @private
+ */
+export const DrawerContent = styled.section<SpaceProps>`
+  flex-grow: 1;
+  overflow: auto;
+  padding: ${({ theme }) => theme.space.x3} ${({ theme }) => theme.space.xxl} ${({ theme }) => theme.space.xl};
+  box-sizing: border-box;
+  ${space};
+`
+
+DrawerContent.displayName = 'DrawerContent'
+
+export default DrawerContent

package/src/molecules/drawer/drawer-footer.tsx

@@ -0,0 +1,19 @@
+import { space, SpaceProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+/**
+ * @component
+ * @private
+ */
+export const DrawerFooter = styled.section<SpaceProps>`
+  display: flex;
+  justify-content: space-around;
+  padding: ${({ theme }) => theme.space.xxl} ${({ theme }) => theme.space.lg};
+  text-align: center;
+  flex-shrink: 0;
+  ${space};
+`
+
+DrawerFooter.displayName = 'DrawerFooter'
+
+export default DrawerFooter

package/src/molecules/drawer/drawer.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Box, Button, Header, Icon, Text } from '../../index.js'
+import { FullFeaturedFormGroup } from '../form-group/form-group.stories.jsx'
+import { Drawer, DrawerContent, DrawerFooter } from './index.js'
+
+export const Default: StoryObj = {
+  render: (props) => (
+    <Drawer {...props}>
+      <DrawerContent>
+        <Header.H3>
+          <Button size="icon" rounded mr="lg">
+            <Icon icon="ChevronRight" />
+          </Button>
+          Edit
+        </Header.H3>
+        <Box my="x3" p={0}>
+          <Button>
+            <Icon icon="Info" />
+            Info
+          </Button>
+          <Button ml="lg">
+            <Icon icon="Trash2" />
+            Delete
+          </Button>
+        </Box>
+        <Header.H4>Primary Fields</Header.H4>
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a,
+          scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
+          Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis
+          vel hendrerit interdum, dui ligula ultricies purus, sed
+        </Text>
+        <FullFeaturedFormGroup />
+      </DrawerContent>
+      <DrawerFooter>
+        <Button variant="contained">Save</Button>
+      </DrawerFooter>
+    </Drawer>
+  ),
+}
+
+const meta: Meta<typeof Drawer> = {
+  title: 'DesignSystem/Molecules/Drawer',
+  component: Drawer,
+  args: {
+    isHidden: false,
+  },
+  argTypes: {
+    isHidden: { control: { type: 'boolean' } },
+  },
+}
+
+export default meta

package/src/molecules/drawer/drawer.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable no-shadow */
+import { space, SpaceProps, LayoutProps, variant, layout, color, ColorProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { cssClass } from '../../utils/css-class.js'
+import { DEFAULT_DRAWER_WIDTH } from '../../constants.js'
+
+/**
+ * Props for Drawer component. Apart from those described below it also extends all
+ * {@link SpaceProps}.
+ *
+ * @alias DrawerProps
+ * @extends SpaceProps
+ * @extends LayoutProps
+ * @extends ColorProps
+ * @memberof Drawer
+ */
+export type DrawerProps = SpaceProps & LayoutProps & ColorProps & {
+  /** Indicates if drawer should be hidden */
+  isHidden?: boolean;
+  /**
+   * Drawer variant
+   */
+  variant?: 'filter';
+}
+
+const variants = variant({
+  variants: {
+    filter: {
+      bg: 'filterBg',
+      width: '400px',
+      className: cssClass(['Drawer', 'Drawer_Filter']),
+    },
+  },
+})
+
+/**
+ * @classdesc
+ *
+ * <img src="components/drawer.png" />
+ *
+ * Drawer component renders a huge side area where {@link BaseActionComponent} renders
+ * all actions where {@link Action.showInDrawer} is set to true.
+ *
+ * You probably don't want to use it directly in your actions, but if you decide to set
+ * `showInDrawer` to true you will probably want to use `DrawerContent` or `DrawerFooter`
+ * components.
+ *
+ * All these components: Drawer, DrawerContent and Drawer Footer extends {@link SpaceProps}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Drawer, DrawerProps, DrawerContent, DrawerFooter } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see DrawerProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-drawer--default Storybook}
+ * @example
+ * return (
+ * <Box height="500px">
+ *   <Drawer>
+ *     <DrawerContent>
+ *       <Header.H3>
+ *         <Button size="icon" rounded mr="lg">
+ *           <Icon icon="ChevronRight" />
+ *         </Button>
+ *         Edit
+ *       </Header.H3>
+ *       <Box my="x3" p={0}>
+ *         <Button size="sm">
+ *           <Icon icon="Info" />
+ *           Info
+ *         </Button>
+ *         <Button size="sm" ml="lg">
+ *           <Icon icon="Trash" />
+ *           Delete
+ *         </Button>
+ *       </Box>
+ *
+ *     </DrawerContent>
+ *     <DrawerFooter>
+ *       <Button variant="contained">
+ *         Save
+ *       </Button>
+ *     </DrawerFooter>
+ *   </Drawer>
+ * </Box>
+ * )
+ *
+ * @section design-system
+ */
+const Drawer = styled.section<DrawerProps>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 100%;
+  z-index: 100;
+
+  transform: translateX(${({ isHidden }) => (isHidden ? '100%' : '0%')});
+  transition: transform 0.25s ease-in-out;
+
+  box-shadow: -1px 0px 0px #EEEEEF, -4px 0px 16px rgba(107, 119, 129, 0.1);
+  background-color: ${({ theme }) => theme.colors.container};
+  overflow-y: auto;
+  overflow-x: hidden;
+  
+  ${space};
+  ${color};
+  ${layout};
+  ${variants};
+`
+
+Drawer.defaultProps = {
+  width: DEFAULT_DRAWER_WIDTH,
+  className: cssClass('Drawer'),
+}
+Drawer.displayName = 'Drawer'
+
+export { Drawer }
+export default Drawer

package/src/molecules/drawer/index.ts

@@ -0,0 +1,3 @@
+export * from './drawer.jsx'
+export * from './drawer-content.jsx'
+export * from './drawer-footer.jsx'

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

@@ -0,0 +1,20 @@
+import { styled } from '@styled-components'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { cssClass } from '../../utils/index.js'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+export const DropDownItemAction = styled(Box).attrs<BoxProps>((props) => ({
+  className: cssClass('DropDownItemAction', props.className),
+}))`
+  ${({ onClick }: any) => (onClick ? 'cursor: pointer;' : '')};
+`
+
+DropDownItemAction.defaultProps = {
+  width: 1,
+  px: 'xxl',
+  py: 'lg',
+}
+DropDownItemAction.displayName = 'DropDownItemAction'
+
+export default DropDownItemAction