@clement_lores/admin-design-system 1.0.0

package/src/molecules/modal/modal.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import { Box, Button, Label, VariantType } from '../../index.js'
+import { Modal, ModalInline, ModalProps } from './index.js'
+
+const variants: VariantType[] = [
+  'danger',
+  'primary',
+  'success',
+  'info',
+  'secondary',
+  'default',
+  'light',
+]
+
+export const Default: StoryObj<ModalProps> = {
+  render: (props) => {
+    const { label, icon, title, variant, subTitle } = props
+    const [isVisible, setIsVisible] = useState(false)
+    const modalProps = {
+      label,
+      icon,
+      title,
+      variant,
+      subTitle,
+      onOverlayClick: () => setIsVisible(false),
+      onClose: () => setIsVisible(false),
+      buttons: [{ label: 'Cancel' }, { label: 'Delete', variant }],
+    }
+
+    return (
+      <Box variant="grey">
+        <Label>Inline modal: ModalInline</Label>
+        <Box py="xxl" width={1}>
+          <ModalInline {...modalProps} />
+        </Box>
+        <Box>
+          <Label>Modal Trigger</Label>
+          <Button onClick={() => setIsVisible(!isVisible)}>Toggle Modal</Button>
+          {isVisible && <Modal {...modalProps} />}
+        </Box>
+      </Box>
+    )
+  },
+}
+
+const meta: Meta<typeof Modal> = {
+  title: 'DesignSystem/Molecules/Modal',
+  component: Modal,
+  args: {
+    variant: variants[0],
+    title: 'Are you sure you want to delete this car?',
+    subTitle: 'This item will be deleted immediately. You can’t undo this action.',
+    icon: 'AlertTriangle',
+    label: 'Warning',
+  },
+  argTypes: {
+    variant: { options: variants, control: { type: 'select' } },
+    title: { control: { type: 'text' } },
+    subTitle: { control: { type: 'text' } },
+    icon: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+  },
+}
+
+export default meta

package/src/molecules/modal/modal.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+import React from 'react'
+
+import PortalUtils from '../../utils/portal-utils.jsx'
+import ModalWrapper from './modal-wrapper.jsx'
+import { ModalProps } from './modal-props.js'
+
+const ModalPortal = PortalUtils.createPortalForKey('MODAL', ModalWrapper)
+
+/**
+ * @load ./modal.doc.md
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ * @hideconstructor
+ * @new In version 3.3
+ */
+export const Modal: React.FC<ModalProps> = (props) => (
+  <ModalPortal {...props} />
+)
+
+Modal.displayName = 'Modal'
+
+export default Modal

package/src/molecules/navigation-element/index.ts

@@ -0,0 +1,3 @@
+export * from './navigation-element.jsx'
+export * from './navigation-element-styled.js'
+export * from './navigation-element-props.js'

package/src/molecules/navigation-element/navigation-element-props.ts

@@ -0,0 +1,43 @@
+/* eslint-disable no-use-before-define */
+import React from 'react'
+
+import type { IconProps } from '../../atoms/icon/index.js'
+
+/**
+ * Prop Types of a NavigationElement component.
+ *
+ * @memberof NavigationElement
+ * @alias NavigationElementProps
+ */
+export type NavigationElementProps = {
+  /** Link href property */
+  href?: string;
+  /** Icon name */
+  icon?: IconProps['icon'];
+  /**
+   * Indicates if navigation element should be open(able). If set to undefined: element wont be
+   * "openable". Tf set to either false or true - element will be open or close.
+   */
+  isOpen?: boolean;
+  /** If element should be selected */
+  isSelected?: boolean
+  /** Label of the element */
+  label: string,
+  /** Element uniq ID  */
+  id?: string,
+  /** On Click handler */
+  onClick?: NavigationElementOnClickHandler;
+}
+
+/**
+ * Handler function for a NavigationElementProps['onClick']
+ *
+ * @memberof NavigationElement
+ * @alias NavigationElementOnClickHandler
+ */
+export type NavigationElementOnClickHandler = (
+  /** React.MouseEvent */
+  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  /** All props (along with the `id`) are also passed to the handler */
+  props: NavigationElementProps
+) => void

package/src/molecules/navigation-element/navigation-element-styled.ts

@@ -0,0 +1,57 @@
+import { rgba } from 'polished'
+import { styled } from '@styled-components'
+
+import { Box } from '../../atoms/box/index.js'
+import { Title } from '../../atoms/typography/index.js'
+import { themeGet } from '../../utils/index.js'
+import { NavigationElementProps } from './navigation-element-props.js'
+
+export type StyledNavigationElementProps = Pick<NavigationElementProps, 'isSelected' | 'isOpen'>
+
+export const StyledNavigationElement: any = styled(Box)<StyledNavigationElementProps>`
+  padding: ${themeGet('space', 'md', '-1px')} ${themeGet('space', 'lg')};
+  text-decoration: none;
+  color: ${({ theme }) => theme.colors.text};
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.1s ease-in;
+  user-select: none;
+
+  & > * {
+    align-self: center;
+  }
+
+  & > .icon-box, & > .arrow-box {
+    flex-shrink: 0;
+    color: ${({ theme }) => theme.colors.grey60};
+  }
+
+  & > .icon-box {
+    padding-right: ${themeGet('space', 'lg')};
+  }
+
+  & > ${Title} {
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    ${({ isSelected }) => isSelected && { fontWeight: 500 }}
+  }
+ 
+  ${({ theme, isSelected }) => isSelected && {
+    backgroundColor: rgba(theme.colors.primary100, 0.2),
+    color: theme.colors.primary100,
+    '& > .icon-box': {
+      color: 'inherit',
+    },
+  }}
+
+  ${({ theme, isSelected }) => !isSelected && {
+    '&:hover': {
+      backgroundColor: rgba(theme.colors.text, 0.2),
+    },
+  }};
+
+  
+`

package/src/molecules/navigation-element/navigation-element.doc.md

@@ -0,0 +1,69 @@
+<img src="components/navigation-element.png" />
+
+This component is responsible for rendering elements on the sidebar navigation.
+
+### Usage
+
+```javascript
+import { NavigationElement } from '@adminjs/design-system'
+
+return (
+  <NavigationElement
+    href="#"
+    open={true}
+    isSelected={false}
+    icon="Activity"
+    label="Activities"
+    onClick={(event, props) => {console.log(event, props)}}
+  />
+)
+```
+
+### Prop types
+
+By default all the data are passed via {@link NavigationElementProps} - check them out below.
+
+
+### Example
+
+This is a working example of a NavigationElement:
+
+```reactComponent
+    const MyComponent = () => {
+    const [isSelected, setIsSelected] = React.useState(false)
+    const [isOpen, setIsOpen] = React.useState(false)
+    const icon = 'Activity'
+    const label = 'Activities'
+    
+    const onClickHandler = (event) => {
+     event.preventDefault()
+     console.log(isOpen)
+     setIsOpen(!isOpen)
+    }
+
+    return (
+      <Box>
+        <NavigationElement
+          href="#"
+          isOpen={isOpen}
+          isSelected={isSelected}
+          icon="Activity"
+          label="Activities"
+          onClick={onClickHandler}
+        />
+        {isOpen ? (
+          <Text p="md">some data below. You can also nest NavigationElements</Text>
+        ) : ''}
+        <NavigationElement
+          href="#"
+          icon="ShoppingCart"
+          label="Orders"
+          onClick={(event) => event.preventDefault()}
+        />
+      </Box>
+    )
+  }
+return (
+  <MyComponent />
+)
+```

package/src/molecules/navigation-element/navigation-element.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import { Box } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { NavigationElement, NavigationElementProps } from './index.js'
+
+export const Default: StoryObj<NavigationElementProps> = {
+  render: (props) => {
+    const [isOpen, setOpen] = useState(false)
+
+    const handleClick = (event) => {
+      event.stopPropagation()
+      event.preventDefault()
+      setOpen(!isOpen)
+    }
+
+    return (
+      <StoryWrapper label="Navigation Element">
+        <Box px="xl" py="xxl" width="300px" border="bg">
+          <NavigationElement {...props} href="#" isOpen={isOpen} onClick={handleClick} />
+        </Box>
+      </StoryWrapper>
+    )
+  },
+}
+
+const meta: Meta<typeof NavigationElement> = {
+  title: 'DesignSystem/Molecules/NavigationElement',
+  args: {
+    label: 'Dashboard',
+    icon: 'Activity',
+    isSelected: false,
+  },
+  argTypes: {
+    isSelected: { control: { type: 'boolean' } },
+    icon: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+  },
+}
+
+export default meta

package/src/molecules/navigation-element/navigation-element.tsx

@@ -0,0 +1,65 @@
+import React, { MouseEvent as ReactMouseEvent } from 'react'
+
+import { Box } from '../../atoms/box/index.js'
+import { Icon } from '../../atoms/icon/index.js'
+import { Title } from '../../atoms/typography/index.js'
+import { NavigationElementProps } from './navigation-element-props.js'
+import { StyledNavigationElement } from './navigation-element-styled.js'
+
+// The longest part of the label which makes it no-wrap: ellipsis
+// example: `MongooseWithLongNameAnd with space` should be truncated because 15 lines doesn't fit
+// the width of the navbar. But "Postgres with long name and spaces" shouldn't be truncated because
+// its "parts" doesn't exceed 15 chars each.
+const PART_LENGTH_TO_ELLIPSIS = 15
+
+/**
+ * @load ./navigation-element.doc.md
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see NavigationElementProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-navigation-element--default Storybook}
+ * @section design-system
+ * @new In version 3.3
+ */
+export const NavigationElement: React.FC<NavigationElementProps> = (props) => {
+  const { isOpen, icon, onClick, label, isSelected, href } = props
+
+  const expandable = typeof isOpen !== 'undefined'
+  const chevron = isOpen ? 'ChevronUp' : 'ChevronDown'
+
+  const hasLongName = label.split(' ').reduce((memo, part) => (memo.length > part.length ? memo : part), '').length
+    > PART_LENGTH_TO_ELLIPSIS
+
+  const handleNavigationClick = (
+    event: ReactMouseEvent<HTMLAnchorElement, MouseEvent>,
+  ) => (onClick ? onClick(event, props) : undefined)
+
+  return (
+    <StyledNavigationElement
+      flex
+      flexDirection="row"
+      as="a"
+      isSelected={isSelected}
+      isOpen={isOpen}
+      href={href}
+      onClick={handleNavigationClick}
+    >
+      {icon && (
+        <Box className="icon-box" as="span">
+          <Icon icon={icon} />
+        </Box>
+      )}
+      <Title style={{ whiteSpace: hasLongName ? 'nowrap' : 'normal' }}>{label}</Title>
+      {expandable && (
+        <Box className="arrow-box" as="span">
+          <Icon icon={chevron} />
+        </Box>
+      )}
+    </StyledNavigationElement>
+  )
+}
+
+NavigationElement.displayName = 'NavigationElement'
+
+export default NavigationElement

package/src/molecules/pagination/index.ts

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

package/src/molecules/pagination/pagination.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Text } from '../../index.js'
+import { Pagination, PaginationProps } from './index.js'
+
+export const Default: StoryObj<PaginationProps> = {
+  render: (props) => (
+    <Text py="xl" textAlign="center">
+      <Pagination {...props} onChange={(item) => item} />
+    </Text>
+  ),
+}
+
+const meta: Meta<typeof Pagination> = {
+  title: 'DesignSystem/Molecules/Pagination',
+  component: Pagination,
+  args: {
+    total: 10,
+    page: 5,
+    perPage: 1,
+  },
+}
+
+export default meta

package/src/molecules/pagination/pagination.tsx

@@ -0,0 +1,182 @@
+import JWPaginate from 'jw-paginate'
+import React from 'react'
+import { styled } from '@styled-components'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { Button, ButtonProps } from '../../atoms/button/index.js'
+import { Icon } from '../../atoms/icon/index.js'
+import { cssClass } from '../../utils/css-class.js'
+
+const MIN_PAGES_FOR_FIRST_PAGE_BUTTON = 3
+const FIRST_PAGE = 1
+
+/**
+ * @alias PaginationProps
+ * @memberof Pagination
+ */
+export type PaginationProps = {
+  /**
+   * Current page
+   */
+  page: number;
+  /**
+   * Items per page
+   */
+  perPage: number;
+  /**
+   * Total number of items
+   */
+  total: number;
+  /**
+   * location. You can pass window.location or the location object
+   * given by ReactRouter
+   */
+  location?: Location;
+
+  /**
+   * Triggers when user clicks any of the button
+   */
+  onChange: (pageNumber: number) => void;
+}
+
+const PaginationButton = (props: ButtonProps) => ({ size: 'icon' as const, variant: props.variant || 'text' as const })
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const PaginationLink: any = styled(Button).attrs(PaginationButton)<ButtonProps>`
+  min-width: 28px;
+  height: 28px;
+  line-height: 12px;
+  padding: 3px 6px;
+  text-align: center;
+`
+
+PaginationLink.defaultProps = {
+  className: cssClass('PaginationLink'),
+}
+
+const PaginationWrapper = styled(Box)<BoxProps>`
+  display: inline-block;
+  padding: 2px;
+ 
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  & > :hover {
+    text-decoration: none;
+  }
+  & > :first-child {
+    border-right: 1px solid ${({ theme }) => theme.colors.border};
+  }
+  & > :last-child {
+    border-left: 1px solid ${({ theme }) => theme.colors.border};
+  }
+`
+
+/**
+ * @classdesc
+ *
+ * <img src="components/pagination.png" />
+ *
+ * Pagination component
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Pagination, PaginationProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see PaginationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-pagination--default Storybook}
+ * @example
+ * const location = { search: ''}
+ * return (
+ *   <Text py="xl" textAlign="center">
+ *     <Pagination
+ *      total={100}
+ *      page={4}
+ *      perPage={10}
+ *      location={location}
+ *      onChange={(item) => alert(`clicked ${item}`)}
+ *   />
+ *   </Text>
+ * )
+ * @section design-system
+ */
+const Pagination: React.FC<PaginationProps> = (props) => {
+  const { total, page, perPage, onChange, ...rest } = props
+  const currentPage = page || FIRST_PAGE
+  const paginate = JWPaginate(total, currentPage, perPage)
+
+  const isFirstPage = currentPage === paginate.startPage
+  const isLastPage = currentPage === paginate.endPage
+
+  const prevPage = isFirstPage ? currentPage : currentPage - 1
+  const nextPage = isLastPage ? currentPage : currentPage + 1
+
+  if (paginate.totalPages === FIRST_PAGE || total === 0) {
+    return null
+  }
+
+  return (
+    <PaginationWrapper className={cssClass('Pagination')} {...rest}>
+      {
+        total >= MIN_PAGES_FOR_FIRST_PAGE_BUTTON
+          ? (
+            <PaginationLink
+              data-testid="first"
+              variant="text"
+              onClick={() => (!isFirstPage ? onChange(FIRST_PAGE) : undefined)}
+            >
+              <Icon icon="SkipBack" />
+            </PaginationLink>
+          )
+          : null
+      }
+      <PaginationLink
+        data-testid="previous"
+        variant="text"
+        onClick={() => (!isFirstPage ? onChange(prevPage) : undefined)}
+      >
+        <Icon icon="ChevronLeft" />
+      </PaginationLink>
+      {paginate.pages.map((p) => (
+        <PaginationLink
+          key={p}
+          onClick={(): void => onChange(p)}
+          variant={p === currentPage ? 'contained' : 'text'}
+          className={cssClass('PaginationLink', p === currentPage ? 'current' : '')}
+          data-testid={`page-${p}`}
+        >
+          {p}
+        </PaginationLink>
+      ))}
+      <PaginationLink
+        data-testid="next"
+        variant="text"
+        onClick={() => (!isLastPage ? onChange(nextPage) : undefined)}
+      >
+        <Icon icon="ChevronRight" />
+      </PaginationLink>
+      {
+        total >= MIN_PAGES_FOR_FIRST_PAGE_BUTTON
+          ? (
+            <PaginationLink
+              data-testid="last"
+              variant="text"
+              onClick={() => (!isLastPage ? onChange(paginate.totalPages) : undefined)}
+            >
+              <Icon icon="SkipForward" />
+            </PaginationLink>
+          )
+          : null
+      }
+
+    </PaginationWrapper>
+  )
+}
+
+Pagination.displayName = 'Pagination'
+
+export { Pagination }
+export default Pagination

package/src/molecules/rich-text-editor/components/heading-select.tsx

@@ -0,0 +1,42 @@
+import { Editor } from '@tiptap/react'
+import React, { FC } from 'react'
+
+import MenuButton from './menu-button.jsx'
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6
+
+interface HeadingSelectProps {
+  editor: Editor
+}
+
+const HeadingSelect: FC<HeadingSelectProps> = (props) => {
+  const { editor } = props
+  const headingLevels: Level[] = [1, 2, 3, 4, 5, 6]
+
+  return (
+    <>
+      {headingLevels.map((level) => {
+        const name = `heading.${level}`
+        return (
+          <MenuButton
+            editor={editor}
+            key={name}
+            name={name}
+            onClick={() => editor.chain().focus().toggleHeading({ level }).run()}
+            icon="FontSize"
+            attributes={{ level }}
+          >{` ${level}`}
+          </MenuButton>
+        )
+      })}
+      <MenuButton
+        editor={editor}
+        name="paragraph"
+        onClick={() => editor.chain().focus().setParagraph().run()}
+        icon="Paragraph"
+      />
+    </>
+  )
+}
+
+export default HeadingSelect

package/src/molecules/rich-text-editor/components/image-button.tsx

@@ -0,0 +1,49 @@
+import { Editor } from '@tiptap/react'
+import React, { FC, useEffect, useRef, useState } from 'react'
+
+import MenuButton from './menu-button.jsx'
+
+interface ImageButtonProps {
+  editor: Editor
+}
+
+const ImageButton: FC<ImageButtonProps> = (props) => {
+  const { editor } = props
+  const [image, setImage] = useState<FileReader['result']>()
+  const fileInput = useRef<HTMLInputElement>(null)
+
+  const handleInputChange = (event) => {
+    const { files } = event.target
+    if (!files.length) return
+    const reader = new FileReader()
+    reader.readAsDataURL(files[0])
+    reader.onload = (e) => {
+      setImage(e.target?.result)
+    }
+  }
+
+  const handleButtonClick = () => {
+    if (fileInput.current) fileInput.current.click()
+  }
+
+  useEffect(() => {
+    if (image && typeof image === 'string') {
+      editor.chain().focus().setImage({ src: image }).run()
+    }
+  }, [image])
+
+  return (
+    <>
+      <MenuButton
+        editor={editor}
+        key="image"
+        name="image"
+        onClick={handleButtonClick}
+        icon="Image"
+      />
+      <input type="file" ref={fileInput} onChange={handleInputChange} style={{ display: 'none' }} />
+    </>
+  )
+}
+
+export default ImageButton