@clement_lores/admin-design-system 1.0.0

package/src/molecules/stepper/stepper.tsx

@@ -0,0 +1,118 @@
+import { styled } from '@styled-components'
+
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * @classdesc
+ *
+ * <img src="components/stepper.png" />
+ *
+ * It provides wizard workflow where user can go through a couple of steps.
+ * Stepper makes sense when you use it along with {@link Step} component.
+ *
+ * It receives all the same props as {@link Box} - {@link BoxProps}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Stepper, StepperProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-stepper--clickable-steps Storybook}
+ * @example <caption>Clickable steps</caption>
+ * const { useState } = React
+ * const steps = [{
+ *   number: 1, label: "Do this first",
+ * }, {
+ *   number: 2, label: "Don't forget this",
+ * }, {
+ *   number: 3, label: "And finally this",
+ * }]
+ * const ComponentWithStepper = () => {
+ *   const [currentStep, setCurrentStep] = useState(1)
+ *   return (
+ *   <Box>
+ *     <Stepper>
+ *     {steps.map(step => (
+ *        <Step
+ *          active={currentStep === step.number}
+ *          completed={currentStep > step.number}
+ *          onClick={setCurrentStep}
+ *          number={step.number}
+ *        >
+ *          {step.label}
+ *        </Step>
+ *     ))}
+ *     </Stepper>
+ *   </Box>
+ *   )
+ * }
+ *
+ * return (<ComponentWithStepper />)
+ *
+ * @example <caption>Steps with bottom navigation</caption>
+ * const { useState } = React
+ * const steps = [{
+ *   number: 1, label: "Do this first",
+ * }, {
+ *   number: 2, label: "Don't forget this",
+ * }, {
+ *   number: 3, label: "And finally this",
+ * }]
+ * const ComponentWithStepper = () => {
+ *   const [currentStep, setCurrentStep] = useState(1)
+ *   return (
+ *   <Box>
+ *     <Stepper>
+ *     {steps.map(step => (
+ *        <Step
+ *          active={currentStep === step.number}
+ *          completed={currentStep > step.number}
+ *          number={step.number}
+ *        >
+ *          {step.label}
+ *        </Step>
+ *     ))}
+ *     </Stepper>
+ *     <Box mt="xl">
+ *       <Button
+ *         disabled={currentStep === 1}
+ *         mr="default"
+ *         onClick={() => setCurrentStep(currentStep - 1)}
+ *       >
+ *         Previous Step
+ *       </Button>
+ *       <Button
+ *         disabled={currentStep === 3}
+ *         variant="primary"
+ *         onClick={() => setCurrentStep(currentStep + 1)}
+ *       >
+ *         Next Step
+ *       </Button>
+ *     </Box>
+ *   </Box>
+ *   )
+ * }
+ *
+ * return (<ComponentWithStepper />)
+ *
+ * @section design-system
+ */
+const Stepper = styled(Box)<BoxProps>`
+`
+
+Stepper.defaultProps = {
+  flex: true,
+  flexDirection: ['column', 'row'],
+  borderBottom: '1px solid',
+  borderBottomColor: 'separator',
+  className: cssClass('Stepper'),
+}
+Stepper.displayName = 'Stepper'
+
+export { Stepper }
+export default Stepper

package/src/molecules/tinymce-editor/index.ts

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

package/src/molecules/tinymce-editor/tinymce-editor.styled.tsx

@@ -0,0 +1,22 @@
+import { styled } from '@styled-components'
+
+import { BoxProps } from '../../atoms/box/index.js'
+import { InputProps } from '../../atoms/input/index.js'
+import { Text, TextProps } from '../../atoms/text/index.js'
+import { cssClass } from '../../utils/index.js'
+
+export type EditorWrapperProps = TextProps & InputProps & BoxProps
+
+export const EditorWrapper = styled(Text)<EditorWrapperProps>`
+  position: relative;
+  z-index: 1;
+
+  & .tox-tinymce {
+    padding: 8px 4px;
+    border-width: 1.5px;
+  }
+`
+
+EditorWrapper.defaultProps = {
+  className: cssClass('EditorWrapper'),
+}

package/src/molecules/tinymce-editor/tinymce-editor.tsx

@@ -0,0 +1,110 @@
+import React, { useRef, useCallback } from 'react'
+import { Editor, IAllProps } from '@tinymce/tinymce-react'
+import type { Editor as TinyMCEEditor, EditorOptions } from 'tinymce'
+
+import { EditorWrapper } from './tinymce-editor.styled.js'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface TinymceEditorOptions extends Omit<Partial<IAllProps>, 'onEditorChange'> {
+  contentStyle?: string | null;
+  height?: string | null;
+}
+
+export interface TinymceEditorProps {
+  value: string
+  onChange: (value: string) => void
+  options?: TinymceEditorOptions
+}
+
+const TinyMCE: React.FC<TinymceEditorProps> = (props) => {
+  const editorRef = useRef<TinyMCEEditor | null>(null)
+  const { onChange, value, options = {} } = props
+  const {
+    plugins = null,
+    toolbar = null,
+    init = null,
+    contentStyle = null,
+    height = null,
+    ...otherProps
+  } = options
+
+  const handleUpdate = useCallback((newValue: string) => {
+    onChange(newValue)
+  }, [])
+
+  const handleInit: NonNullable<IAllProps['onInit']> = (_evt, editor) => {
+    editorRef.current = editor
+  }
+
+  const filePickerCallback: NonNullable<EditorOptions['file_picker_callback']> = (cb) => {
+    const input = document.createElement('input')
+    input.setAttribute('type', 'file')
+    input.setAttribute('accept', 'image/*')
+
+    /*
+      Note: In modern browsers input[type="file"] is functional without
+      even adding it to the DOM, but that might not be the case in some older
+      or quirky browsers like IE, so you might want to add it to the DOM
+      just in case, and visually hide it. And do not forget do remove it
+      once you do not need it anymore.
+    */
+
+    input.onchange = function fpOnChange(e) {
+      // eslint-disable-next-line react/no-this-in-sfc
+      const file = (e as any).target?.files?.[0]
+
+      const reader = new FileReader()
+      reader.onload = function fpOnLoad() {
+        /*
+          Note: Now we need to register the blob in TinyMCEs image blob
+          registry. In the next release this part hopefully won't be
+          necessary, as we are looking to handle it internally.
+        */
+        const id = `blobid${new Date().getTime()}`
+        const { blobCache } = (window as any).tinymce?.activeEditor?.editorUpload ?? {}
+        const base64 = (reader.result as string | null)?.split?.(',')?.[1]
+        const blobInfo = blobCache.create(id, file, base64)
+        blobCache.add(blobInfo)
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name })
+      }
+      reader.readAsDataURL(file)
+    }
+
+    input.click()
+  }
+
+  const defaultPlugins = ['image', 'code', 'table', 'link', 'media', 'codesample']
+  const defaultToolbar = [
+    'undo redo formatselect bold italic backolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent removeformat link image',
+  ]
+  const defaultInit = {
+    height: height !== null ? height : 500,
+    menubar: true,
+    plugins: plugins !== null ? plugins : defaultPlugins,
+    toolbar: toolbar !== null ? toolbar : defaultToolbar,
+    file_picker_types: 'file image media',
+    file_picker_callback: filePickerCallback,
+    content_style:
+      contentStyle !== null
+        ? contentStyle
+        : 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+  }
+
+  return (
+    <EditorWrapper>
+      <Editor
+        tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@8.6.0/tinymce.min.js"
+        onInit={handleInit}
+        onEditorChange={handleUpdate}
+        value={value}
+        init={init !== null ? init : defaultInit}
+        {...otherProps}
+      />
+    </EditorWrapper>
+  )
+}
+
+export { TinyMCE }
+export default TinyMCE

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

@@ -0,0 +1,2 @@
+export * from './value-group.jsx'
+export * from './value-group-props.js'

package/src/molecules/value-group/value-group-props.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react'
+
+/**
+ * Props passed to ValueGroup
+ *
+ * @memberof ValueGroup
+ * @alias ValueGroupProps
+ */
+export type ValueGroupProps = {
+  /** Value group label */
+  label: string,
+  /** Field value passed as a value */
+  value?: string | number | boolean,
+  /** Field value passed as children node */
+  children?: ReactNode,
+}

package/src/molecules/value-group/value-group.doc.md

@@ -0,0 +1,67 @@
+<img src="components/value-group.png" />
+
+ValueGroup is the way of styling all {key: value} properties from your database. It
+maintains paddings and adds errors.
+
+### Usage
+
+```javascript
+import { ValueGroup } from '@adminjs/design-system'
+
+return (
+  <ValueGroup
+    value={'wojciech.krysiak@softwarebrothers.co'}
+    label={'email address'}
+  />
+)
+```
+
+### Prop types
+
+By default all the data are passed via {@link ValueGroupProps} - check them out below.
+
+
+### Example
+
+#### Example styling for a form with headers and ValueGroup
+
+```reactComponent
+    const Bio = (
+    <div>
+    <p>
+      Co-founder and CTO at Software Brothers He graduated from 2 faculties at 2008: Electronic followed by Marketing and Management.
+    </p>
+    <p>
+      He's been working in IT industry since then. During that time he've built dozens of products for biggest brands, such as Coca-Cola or Canal+.
+    </p>
+    <p>He also created solutions for different international startups having hundreds of thousands of users. Now, apart from being a CTO of Software Brothers, Wojtek focuses on teaching developers how to code by giving keynotes, providing open source solutions on GitHub and running a jscasts.tv youtube channel.
+    </p>
+    </div>
+  )
+  
+  const values = [
+    { label: "Email", value: 'wojciech.krysiak@softwarebrothers.co' },
+    { label: "Name", value: 'Wojciech' },
+    { label: "Surname", value: 'Krysiak' },
+    { label: "Gender", value: 'Male' },
+    { label: "Age", value: 'You wish you know' },
+  ]
+
+  return (
+    <Box width={[1, 3/4]} margin="auto">
+      <Header.H3>User Data</Header.H3>
+      <Box flex>
+        <Box width={2/5}>
+          {values.map( val => (
+            <ValueGroup key={val.label} {...val} />
+          ))}
+        </Box>
+        <Box width={3/5}>
+          <ValueGroup label="Bio">
+            <Text>{Bio}</Text>
+          </ValueGroup>
+        </Box>
+      </Box>
+    </Box>
+  )
+```

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

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Box, CardTitle, Text } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { ValueGroup } from './index.js'
+
+export const Default: StoryObj<{ onClick: (e) => void }> = {
+  render: ({ onClick }) => {
+    const handleClick = (event) => {
+      event.preventDefault()
+      onClick(event)
+    }
+
+    const objects = [
+      { label: 'First Name', onClick: handleClick, value: 'Wojtek' },
+      { label: 'Last Name', onClick: handleClick, value: 'Krysiak' },
+    ]
+
+    return (
+      <StoryWrapper label="ValueGroup default settings">
+        <Box>
+          {objects.map((field) => (
+            <ValueGroup key={field.label} {...field} />
+          ))}
+          <ValueGroup label="value with styled children">
+            <CardTitle>With children which are wrapped with CardTitle</CardTitle>
+          </ValueGroup>
+          <ValueGroup label="With Multiline Content">
+            <Box variant="white" border="default">
+              <Text>
+                <h4>I am header</h4>
+                <p>And I am content</p>
+              </Text>
+            </Box>
+          </ValueGroup>
+        </Box>
+      </StoryWrapper>
+    )
+  },
+}
+
+const meta: Meta<typeof ValueGroup> = {
+  title: 'DesignSystem/Molecules/ValueGroup',
+  component: ValueGroup,
+}
+
+export default meta

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

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { Box } from '../../atoms/box/index.js'
+import { Label } from '../../atoms/label/index.js'
+import { Text } from '../../atoms/text/index.js'
+import { ValueGroupProps } from './value-group-props.js'
+
+/**
+ * @load ./value-group.doc.md
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see ValueGroupProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-value-group--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export const ValueGroup: React.FC<ValueGroupProps> = (props) => {
+  const { label, value, children } = props
+
+  return (
+    <Box mb="xl">
+      <Label variant="light">{label}</Label>
+      {value ? <Text>{value}</Text> : ''}
+      {children}
+    </Box>
+  )
+}
+
+ValueGroup.displayName = 'ValueGroup'
+
+export default ValueGroup

package/src/organisms/button-group/button-group.doc.md

@@ -0,0 +1,92 @@
+<img src="components/button-group.png" />
+
+The component which renders Buttons in a group. It allows you to handle an array of actions.
+
+### Usage
+
+```javascript
+import { ButtonGroup } from '@adminjs/design-system'
+```
+
+### Props
+
+ButtonGroup can be configured with the default props like `size` or `rounded` passed to all
+the Buttons via {@link ButtonInProps}. These props can be changed for each button by using
+{@link ButtonInGroupProps}
+
+### Full featured example
+
+This is a full featured example with lots of buttons.
+
+```reactComponent
+
+const rounded = false
+const size = 'default'
+
+const handleClick = (event, source) => {
+  alert('clicked')
+}
+
+const buttons = [{
+  label: 'Edit',
+  onClick: handleClick,
+  icon: 'Edit',
+}, {
+  label: 'Not Clickable',
+  source: 'thisWillGoBack',
+  icon: 'Copy',
+  variant: 'light',
+  buttons: [{
+    label: 'Option 1',
+    onClick: handleClick,
+    icon: 'Copy',
+    variant: 'primary',
+  }, {
+    label: 'Option 2',
+    onClick: handleClick,
+    icon: 'Copy',
+    buttons: [{
+      label: 'Option 2.1',
+      onClick: handleClick,
+      icon: 'Copy',
+    }, {
+      label: 'Option 2.2',
+      onClick: handleClick,
+      icon: 'Copy',
+    }],
+  }, {
+    label: 'Option 3',
+    icon: 'Copy',
+  }],
+}, {
+  label: 'Delete',
+  onClick: handleClick,
+  variant: 'danger',
+  icon: 'TrashCan',
+}, {
+  label: null,
+  variant: 'light',
+  icon: 'MenuHorizontal',
+  buttons: [{
+    label: 'Edit',
+    onClick: handleClick,
+    icon: 'Edit',
+    variant: 'light',
+  }, {
+    label: 'Duplicate',
+    onClick: handleClick,
+    icon: 'Copy',
+  }, {
+    label: 'Delete',
+    onClick: handleClick,
+    variant: 'danger',
+    icon: 'TrashCan',
+  }],
+}]
+
+return (
+  <Box height={200}>
+    <ButtonGroup buttons={buttons} rounded={rounded} size={size} />
+  </Box>
+)
+```

package/src/organisms/button-group/button-group.stories.tsx

@@ -0,0 +1,112 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Box, CardTitle, Label } from '../../index.js'
+import { ButtonGroup, ButtonGroupProps } from './index.js'
+
+export const Default: StoryObj<ButtonGroupProps & { onClick: (e, s) => void }> = {
+  render: ({ onClick, size, rounded }) => {
+    const handleClick = (event, source) => {
+      event.preventDefault()
+      onClick(event, source)
+    }
+
+    const buttons = [
+      {
+        label: 'Edit',
+        onClick: handleClick,
+        icon: 'Edit',
+      },
+      {
+        label: 'Not Clickable',
+        source: 'thisWillGoBack',
+        icon: 'Copy',
+        variant: 'light',
+        buttons: [
+          {
+            label: 'Option 1',
+            onClick: handleClick,
+            icon: 'Copy',
+            variant: 'primary',
+          },
+          {
+            label: 'Option 2',
+            onClick: handleClick,
+            icon: 'Copy',
+            buttons: [
+              {
+                label: 'Option 2.1',
+                onClick: handleClick,
+                icon: 'Copy',
+              },
+              {
+                label: 'Option 2.2',
+                onClick: handleClick,
+                icon: 'Copy',
+              },
+            ],
+          },
+          {
+            label: 'Option 3',
+            icon: 'Copy',
+          },
+        ],
+      },
+      {
+        label: 'Delete',
+        onClick: handleClick,
+        variant: 'danger',
+        icon: 'Trash2',
+      },
+      {
+        label: null,
+        variant: 'light',
+        icon: 'MenuHorizontal',
+        buttons: [
+          {
+            label: 'Edit',
+            onClick: handleClick,
+            icon: 'Edit',
+            variant: 'light',
+          },
+          {
+            label: 'Duplicate',
+            onClick: handleClick,
+            icon: 'Copy',
+          },
+          {
+            label: 'Delete',
+            onClick: handleClick,
+            variant: 'danger',
+            icon: 'Trash2',
+          },
+        ],
+      },
+    ]
+
+    return (
+      <Box variant="grey">
+        <Label>ButtonGroup</Label>
+        <Box variant="card" mb="xxl">
+          <CardTitle>Big buttons</CardTitle>
+          <ButtonGroup buttons={buttons as any} size={size} rounded={rounded} />
+        </Box>
+      </Box>
+    )
+  },
+}
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: 'DesignSystem/Organisms/ButtonGroup',
+  component: ButtonGroup,
+  args: {
+    size: 'default',
+    rounded: false,
+  },
+  argTypes: {
+    size: { options: ['sm', 'default', 'lg'], control: { type: 'select' } },
+    rounded: { control: { type: 'boolean' } },
+  },
+}
+
+export default meta

package/src/organisms/button-group/button-group.styled.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { styled, css } from '@styled-components'
+
+import { Box } from '../../atoms/box/index.js'
+import { Button } from '../../atoms/button/index.js'
+import { cssClass, themeGet } from '../../utils/index.js'
+import { DropDownItemAction } from '../../molecules/drop-down/index.js'
+import { ButtonGroupProps } from './button-group.types.js'
+
+export const BUTTON_IN_GROUP_CLASS_NAME = cssClass('ButtonGroupItem')
+
+export const buttonMargin = (props: Pick<ButtonGroupProps, 'size'>): ReturnType<typeof css> => {
+  const { size } = props
+  const margin = size === 'sm' ? 'md' : 'lg'
+  return css`
+    & > .${BUTTON_IN_GROUP_CLASS_NAME} {
+      margin-right: ${themeGet('space', margin)};
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  `
+}
+
+export const hasHandler = (props: any): ReturnType<typeof css> | string => {
+  if (!props.onClick && !props.href) {
+    return css`
+      &&& {
+        cursor: default;
+      }
+    `
+  }
+  return ''
+}
+
+export const hasLabel = (props: any): ReturnType<typeof css> | string => {
+  if (!props.hasLabel) {
+    return css`
+      border: none;
+      padding-left: ${themeGet('space', 'md')};
+      padding-right: ${themeGet('space', 'md')};
+      & > .${cssClass('Icon')} {
+        margin-right: 0;
+      }
+    `
+  }
+  return ''
+}
+
+export const StyledSingleButton = styled(Button)<{ hasLabel: boolean }>`
+  ${hasLabel};
+  ${hasHandler};
+`
+
+export const StyledDropDownItemAction = styled<any>(DropDownItemAction)`
+  ${hasLabel};
+`
+
+export const StyledButtonGroup = styled(Box)`
+  ${buttonMargin as any};
+`