@clement_lores/admin-design-system 1.0.0

package/src/molecules/index.ts

@@ -0,0 +1,15 @@
+export * from './date-picker/index.js'
+export * from './drawer/index.js'
+export * from './drop-down/index.js'
+export * from './drop-zone/index.js'
+export * from './form-group/index.js'
+export * from './info-box/index.js'
+export * from './message-box/index.js'
+export * from './modal/index.js'
+export * from './navigation-element/index.js'
+export * from './pagination/index.js'
+export * from './rich-text-editor/index.js'
+export * from './tinymce-editor/index.js'
+export * from './select/index.js'
+export * from './stepper/index.js'
+export * from './value-group/index.js'

package/src/molecules/info-box/index.ts

@@ -0,0 +1 @@
+export * from './info-box.jsx'

package/src/molecules/info-box/info-box.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { Button, Icon, Text } from '../../index.js'
+import { InfoBox } from './info-box.jsx'
+
+export const Default: StoryFn = () => (
+  <InfoBox title="There are no cars in the system" illustration="Accept">
+    <Text>Currently there are no cars in the system</Text>
+    <Text>To create first click</Text>
+    <Button variant="contained" mt="lg">
+      <Icon icon="Plus" />
+      Create
+    </Button>
+  </InfoBox>
+)
+
+const meta: Meta<typeof InfoBox> = {
+  title: 'DesignSystem/Molecules/InfoBox',
+  component: InfoBox,
+}
+
+export default meta

package/src/molecules/info-box/info-box.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { styled } from '@styled-components'
+
+import { Illustration, IllustrationVariant } from '../../atoms/illustration/index.js'
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { H4 } from '../../atoms/typography/index.js'
+
+import { cssClass } from '../../utils/css-class.js'
+
+const StyledInfoBox = styled(Box)<BoxProps>`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+`
+
+/**
+ * @memberof InfoBox
+ * @alias InfoBoxProps
+ */
+export type InfoBoxProps = {
+  /** Title of an InfoBox */
+  title?: string;
+  /** Inner content - usually couple of {@link Text} nodes */
+  children: React.ReactNode;
+  /** Infobox illustration {@link Illustration} or custom element above title */
+  illustration?: IllustrationVariant | React.ReactElement;
+  /** Optional testId */
+  testId?: string;
+  variant?: BoxProps['variant'];
+}
+
+/**
+ * @classdesc
+ *
+ * <img src="components/info-box.png" />
+ *
+ * Used for all type of information like:
+ *
+ * > you don't have x - please add first one"
+ *
+ * in the system.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { InfoBox, InfoBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-infobox--default Storybook}
+ * @see InfoBoxProps
+ * @example
+ * return (
+ * <InfoBox title="There are no cars in the system">
+ *   <Text>Currently there are no cars in the system</Text>
+ *   <Text>To create first click</Text>
+ *   <Button mt="lg"><Icon icon="Plus" />Create</Button>
+ * </InfoBox>
+ * )
+ * @section design-system
+ */
+const InfoBox: React.FC<InfoBoxProps> = ({ children, title, illustration, variant = 'transparent', testId }) => (
+  <StyledInfoBox data-testid={testId} variant={variant} className={cssClass('InfoBox')}>
+    {illustration && typeof illustration === 'string' ? <Illustration variant={illustration} /> : illustration}
+    {title && <H4 mb="lg">{title}</H4>}
+    {children}
+  </StyledInfoBox>
+)
+
+InfoBox.displayName = 'InfoBox'
+
+export { InfoBox }
+export default InfoBox

package/src/molecules/message-box/index.ts

@@ -0,0 +1 @@
+export * from './message-box.jsx'

package/src/molecules/message-box/message-box.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Box } from '../../index.js'
+import { MessageBox, MessageBoxProps } from './message-box.jsx'
+
+export const Default: StoryObj<MessageBoxProps & { withInsideText: boolean }> = {
+  render: ({ withInsideText, ...props }) => (
+    <Box py="lg">
+      <MessageBox
+        onCloseClick={() => { /** noop */ }}
+        {...props}
+      >
+        {withInsideText && 'With inside text'}
+      </MessageBox>
+    </Box>
+  ),
+}
+
+const meta: Meta<typeof MessageBox> = {
+  title: 'DesignSystem/Molecules/MessageBox',
+  component: MessageBox,
+  args: {
+    variant: 'info',
+    size: 'sm',
+    message: 'Some message',
+  },
+  argTypes: {
+    variant: { options: ['danger', 'info', 'success', 'warning'], control: { type: 'select' } },
+    size: { options: ['sm', 'md', 'lg'], control: { type: 'select' } },
+    message: { control: { type: 'text' } },
+  },
+}
+
+export default meta

package/src/molecules/message-box/message-box.tsx

@@ -0,0 +1,185 @@
+/* eslint-disable max-len */
+import { DefaultTheme, styled } from '@styled-components'
+import React from 'react'
+import { SpaceProps, variant as styledVariant } from 'styled-system'
+
+import { Box } from '../../atoms/box/index.js'
+import { Button } from '../../atoms/button/index.js'
+import { Icon, IconProps } from '../../atoms/icon/index.js'
+import { Text } from '../../atoms/text/index.js'
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * Prop Types of a MessageBox component.
+ * Apart from those defined below it extends all {@link SpaceProps}
+ *
+ * @memberof MessageBox
+ * @alias MessageBoxProps
+ */
+type MessageBoxProps = {
+  /** Triggered when user clicks close button. If not given close button won't be seen */
+  onCloseClick?: () => void
+  /** Title content of a message */
+  message?: string
+  /**
+   * Variant
+   * @default 'info'
+   */
+  variant?: 'danger' | 'warning' | 'success' | 'info'
+  /** Icon which will be seen in the title */
+  icon?: IconProps['icon']
+  /** Size variant */
+  size?: 'sm'
+  /** Optional html style property */
+  style?: Record<string, string>
+  /** Optional children, when given component will be expanded */
+  children?: React.ReactNode
+}
+
+type Props = SpaceProps & MessageBoxProps
+export { Props as MessageBoxProps }
+
+const sizeVariants = styledVariant({
+  prop: 'size',
+  variants: {
+    sm: {
+      boxShadow: 'none',
+      [`& > ${cssClass('Button')}`]: {
+        margin: '0px',
+      },
+    },
+  },
+})
+
+const StyledMessageBox: any = styled(Box)<MessageBoxProps>`
+  line-height: ${({ theme }) => theme.lineHeights.default};
+  border-radius: 4px;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 12px 22px;
+  white-space: pre-wrap;
+
+  & .${cssClass('Icon')} {
+    display: flex;
+  }
+
+  ${sizeVariants};
+`
+
+/**
+ * @classdesc
+ *
+ * <img src="components/message-box.png" />
+ *
+ * Component responsible for rendering standard danger/info/success
+ * messages.
+ *
+ * It has 2 size versions: default and small. Also it can either contain or
+ * don't contain children, which causes different look.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { MessageBox, MessageBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see MessageBoxProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-messagebox--default Storybook}
+ * @example <caption>Different variants</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox message="Some default message" onCloseClick={() => alert('close clicked')} />
+ *   <MessageBox message="Error message" mt="default" variant="danger" onCloseClick={() => alert('close clicked')} />
+ *   <MessageBox message="Info message" mt="default" variant="info" onCloseClick={() => alert('close clicked')} />
+ *  </Box>
+ * )
+ * @example <caption>Different variants with children</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox message="Some default message" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *   <MessageBox message="Error message" mt="default" variant="danger" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *   <MessageBox message="Info message" mt="default" variant="info" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *  </Box>
+ * )
+ * @example <caption>Small with an icon and inside text</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox
+ *     size="sm"
+ *     message="Info message"
+ *     mt="default"
+ *     variant="info"
+ *     icon="MessageCircle"
+ *     onCloseClick={() => alert('close clicked')}
+ *   >
+ *     With inside text
+ *   </MessageBox>
+ *  </Box>
+ * )
+ * @section design-system
+ */
+export const MessageBox: React.FC<Props> = (props) => {
+  const { onCloseClick, message, icon, children, variant = 'info', size, ...other } = props
+
+  const variantIcon: Record<typeof variant, IconProps['icon']> = {
+    success: 'Check',
+    danger: 'XCircle',
+    info: 'Info',
+    warning: 'AlertCircle',
+  }
+  const variantBg: Record<typeof variant, keyof DefaultTheme['colors']> = {
+    success: 'successLight',
+    danger: 'errorLight',
+    info: 'infoLight',
+    warning: 'warningLight',
+  }
+  const variantIconBg: Record<typeof variant, keyof DefaultTheme['colors']> = {
+    success: 'success',
+    danger: 'error',
+    info: 'info',
+    warning: 'warning',
+  }
+
+  return (
+    <Box className={cssClass('MessageBox')} {...other}>
+      <StyledMessageBox as="div" bg={variantBg[variant]} size={size}>
+        <Box flex alignItems="center">
+          {variantIcon && (
+            <Icon
+              icon={icon || variantIcon[variant]}
+              bg={variantIconBg[variant]}
+              color="white"
+              p="sm"
+              marginRight="xl"
+              borderRadius="50%"
+            />
+          )}
+          <Box as="div" flexGrow={1}>
+            <Text fontWeight={children ? 500 : 400}>{message}</Text>
+          </Box>
+
+          {onCloseClick && (
+            <Button variant="text" size="icon" onClick={onCloseClick} rounded color={variant} ml="xl">
+              <Icon icon="X" />
+            </Button>
+          )}
+        </Box>
+        <Box marginLeft="x3">
+          <Text>{children}</Text>
+        </Box>
+      </StyledMessageBox>
+    </Box>
+  )
+}
+
+MessageBox.displayName = 'MessageBox'
+
+export default MessageBox

package/src/molecules/modal/index.ts

@@ -0,0 +1,4 @@
+export * from './modal-inline.jsx'
+export * from './modal-props.js'
+export * from './modal-styled.jsx'
+export * from './modal.jsx'

package/src/molecules/modal/modal-inline.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { Button } from '../../atoms/button/index.js'
+import { Icon } from '../../atoms/icon/index.js'
+import { Label } from '../../atoms/label/index.js'
+import { Text } from '../../atoms/text/index.js'
+import { H5 } from '../../atoms/typography/index.js'
+import { ModalProps } from './modal-props.js'
+import { ModalStyled } from './modal-styled.jsx'
+
+/**
+ * Modal which can be rendered inline instead of a "modal"
+ *
+ * @memberof Modal
+ * @component
+ * @hideconstructor
+ * @private
+ * @section design-system
+ */
+export const ModalInline: React.FC<ModalProps & Omit<BoxProps, 'variant'>> = (props) => {
+  const { title, subTitle, variant, onClose, children, buttons, label, icon, ...boxProps } = props
+  return (
+    <ModalStyled variant={variant as BoxProps['variant']} {...boxProps}>
+      {label && (
+        <Label size="lg" variant={variant} className="modal-label">
+          {icon && <Icon icon={icon} />}
+          {label}
+        </Label>
+      )}
+      {title && <H5>{title}</H5>}
+      {onClose && (
+        <Button className="close-button" size="icon" variant="text" onClick={onClose} rounded>
+          <Icon icon="X" />
+        </Button>
+      )}
+      {subTitle && <Text>{subTitle}</Text>}
+      {children}
+      {buttons && buttons.length && (
+        <Box flex flexDirection="row" justifyContent="flex-end" mt="xl">
+          {buttons.map((buttonProps, key) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Button key={key} mr="md" mt="sm" {...buttonProps} />
+          ))}
+        </Box>
+      )}
+    </ModalStyled>
+  )
+}
+
+ModalInline.displayName = 'ModalInline'
+
+export default ModalInline

package/src/molecules/modal/modal-props.ts

@@ -0,0 +1,43 @@
+import type { ButtonProps } from '../../atoms/button/index.js'
+import type { IconProps } from '../../atoms/icon/index.js'
+import { VariantType } from '../../theme.js'
+
+/**
+ * Props passed to Modal Component
+ *
+ * @memberof Modal
+ * @alias ModalProps
+ */
+export type ModalProps = {
+  /**
+   * dialog title
+   */
+  title?: string
+  /**
+   * optional subtitle
+   */
+  subTitle?: string
+  /**
+   * color variant
+   */
+  variant?: VariantType
+
+  /** Modal footer buttons */
+  buttons?: Array<ButtonProps>
+
+  /** Label which is seen above the text */
+  label?: string
+
+  /** Icon near the label */
+  icon?: IconProps['icon']
+
+  /** Handler function triggered when overlay is clicked */
+  onOverlayClick?: () => any
+
+  /**
+   * Function triggered when user clicks close button.
+   * If it is given - close button will appear.
+   */
+  onClose?: () => any
+  children?: React.ReactNode
+}

package/src/molecules/modal/modal-styled.tsx

@@ -0,0 +1,60 @@
+import { getValueAndUnit } from 'polished'
+import { variant as styledVariant } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import type { VariantType } from '../../theme.js'
+import themeGet from '../../utils/theme-get.js'
+
+const DEFAULT_WIDTH = 540
+const VARIANT_BORDER_WIDTH = 8
+
+const variantStyle = (color, props) => {
+  const newPadding = getValueAndUnit(themeGet('space', 'xxl')(props))[0] - VARIANT_BORDER_WIDTH
+  return {
+    borderLeftWidth: VARIANT_BORDER_WIDTH,
+    borderLeftStyle: 'solid',
+    borderLeftColor: color,
+    paddingLeft: newPadding,
+  }
+}
+
+const variants = (props) => styledVariant<any, VariantType>({
+  prop: 'variant',
+  variants: {
+    primary: variantStyle('primary100', props),
+    danger: variantStyle('error', props),
+    success: variantStyle('success', props),
+    info: variantStyle('info', props),
+    secondary: variantStyle('accent', props),
+    light: variantStyle('grey60', props),
+    default: {},
+  },
+})
+
+export const ModalStyled = styled(Box)<BoxProps>`
+  position: relative;
+  & > .close-button {
+    position: absolute;
+    top: ${themeGet('space', 'md')};
+    right: ${themeGet('space', 'md')};
+  }
+  & > .modal-label {
+    margin-bottom: 0;
+    margin-top: -${themeGet('space', 'xxl')};
+    padding-top: ${themeGet('space', 'sm')};
+  }
+  ${(props): any => variants(props)};
+`
+
+ModalStyled.defaultProps = {
+  pl: 'xxl',
+  pr: 'xl',
+  pt: 'x3',
+  pb: 'xxl',
+  bg: 'filterBg',
+  color: 'text',
+  width: [1, DEFAULT_WIDTH],
+}
+
+export default ModalStyled

package/src/molecules/modal/modal-wrapper.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { styled } from '@styled-components'
+
+import { ModalInline } from './modal-inline.jsx'
+import { ModalProps } from './modal-props.js'
+import { ModalStyled } from './modal-styled.jsx'
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { Overlay } from '../../atoms/overlay/index.js'
+
+const Wrapper = styled(Box)<BoxProps>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  & > ${ModalStyled} {
+    z-index: 1001;
+  }
+`
+
+export const ModalWrapper: React.FC<ModalProps> = (props) => {
+  const { onOverlayClick, ...otherProps } = props
+
+  const handleOverlayClick = onOverlayClick || (() => true)
+
+  return (
+    <Wrapper flex justifyContent="center" alignItems="center">
+      <Overlay onClick={handleOverlayClick} />
+      <ModalInline {...otherProps} />
+    </Wrapper>
+  )
+}
+
+ModalWrapper.displayName = 'ModalWrapper'
+
+export default ModalWrapper

package/src/molecules/modal/modal.doc.md

@@ -0,0 +1,138 @@
+<img src="components/modal.png" />
+
+Renders Modal
+
+### Usage:
+
+```javascript
+import { Modal, ModalProps, ModalInline } from '@adminjs/design-system'
+```
+
+Modal can be rendered either inline or as a regular Modal.
+
+#### Inline usage
+
+```jsx
+  <ModalInline {...modalProps} />
+```
+
+#### Modal usage
+
+```jsx
+const [isVisible, setIsVisible] = useState(false)
+modalProps = {
+  /** ... **/
+  onOverlayClick: () => setIsVisible(false),
+  onClose: () => setIsVisible(false),
+}
+
+<Box>
+  <Label>Modal Trigger</Label>
+  <Button
+    onClick={() => setIsVisible(!isVisible)}
+  >
+    Toggle Modal
+  </Button>
+  {isVisible && <Modal {...modalProps} />}
+</Box>
+```
+
+### Passing content
+
+You can also pass the values in 2 ways:
+
+1. by using just the {@link ModalProps} - as shown in the previous examples.
+2. by using the **Children**
+
+### Playground
+
+Let me show you 3 live examples of using the Modal component:
+
+#### Passing children
+
+The most versatile way, but, the one, which requires you to "design" the modal
+
+```reactComponent
+return (
+  <Box variant="grey">
+    <Box py="xxl" width={1}>
+      <ModalInline>
+        <Header.H4>I am header</Header.H4>
+        <Text>
+          I am info text
+        </Text>
+        <Box>
+          <Button>Confirm?</Button>
+        </Box>
+      </ModalInline>
+    </Box>
+  </Box>
+)
+```
+
+#### Passing props
+
+You have everything out of the box
+
+```reactComponent
+
+const variant = 'danger'
+
+const modalProps = {
+  label: 'Someone broke your car',
+  icon: 'Car',
+  title: 'Behold',
+  variant,
+  subTitle: 'Something wrong is happening!!!',
+  buttons: [
+    { label: 'Cancel' },
+    { label: 'Delete', variant },
+  ],
+}
+
+return (
+  <Box variant="grey">
+    <Box py="xxl" width={1}>
+      <ModalInline {...modalProps} />
+    </Box>
+  </Box>
+)
+```
+
+#### Real modal
+
+Handling modal visibility with the `useState` hook.
+
+```reactComponent
+const Wrapper = () => {
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  const variant = 'success'
+
+  const modalProps = {
+    label: 'Your car is 100% fine',
+    icon: 'Car',
+    title: 'It is ok',
+    variant,
+    subTitle: 'Something wrong is NOT happening!!!',
+    buttons: [
+      { label: 'Cancel' },
+      { label: 'Delete', variant },
+    ],
+    onOverlayClick: () => setIsVisible(false),
+    onClose: () => setIsVisible(false),
+  }
+  return (
+    <Box py="100px">
+      <Button
+        onClick={() => setIsVisible(!isVisible)}
+      >
+        Toggle Modal
+      </Button>
+      {isVisible && <Modal {...modalProps} />}
+    </Box>
+   )
+}
+
+return <Wrapper />
+```