@clement_lores/admin-design-system 1.0.0

package/src/molecules/rich-text-editor/rich-text-editor.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable react/require-default-props */
+import CharacterCount from '@tiptap/extension-character-count'
+import Image from '@tiptap/extension-image'
+import Link from '@tiptap/extension-link'
+import Table from '@tiptap/extension-table'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import TableRow from '@tiptap/extension-table-row'
+import TextAlign from '@tiptap/extension-text-align'
+import Typography from '@tiptap/extension-typography'
+// Note: Types for @tiptap/react are temporarily ignored due to:
+// https://github.com/ueberdosis/tiptap/issues/3488
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React, { FC, useCallback } from 'react'
+
+import MenuBar from './components/menu-bar.jsx'
+import { EditorWrapper } from './rich-text-editor.styled.jsx'
+
+interface EditorOptions {
+  [key: string]: any;
+}
+interface RichTextEditorOptions extends Partial<EditorOptions> {
+  limit?: number
+}
+
+interface RichTextEditorProps {
+  value: any
+  onChange: (value: string) => void
+  options?: RichTextEditorOptions
+}
+
+const RichTextEditor: FC<RichTextEditorProps> = (props) => {
+  const { value, onChange, options = {} } = props
+  const handleUpdate = useCallback(({ editor }) => {
+    onChange(editor.getHTML())
+  }, [])
+
+  const { limit, extensions = [], ...restOptions } = options
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      CharacterCount.configure({ limit, mode: 'nodeSize' }),
+      Image,
+      Link.configure({ openOnClick: false }),
+      Table,
+      TableCell,
+      TableHeader,
+      TableRow,
+      TextAlign.configure({ types: ['heading', 'paragraph', 'image'] }),
+      Typography,
+      ...extensions,
+    ],
+    content: value,
+    onUpdate: handleUpdate,
+    injectCSS: true,
+    ...restOptions,
+  })
+
+  return (
+    <>
+      <MenuBar editor={editor} />
+      <EditorWrapper>
+        <EditorContent editor={editor} />
+        {options.limit && (
+          <span className="characterCount">
+            {value?.length}/{limit}
+          </span>
+        )}
+      </EditorWrapper>
+    </>
+  )
+}
+
+RichTextEditor.displayName = 'RichTextEditor'
+
+export { RichTextEditor }
+export default RichTextEditor

package/src/molecules/rich-text-editor/useTiptapCommands.ts

@@ -0,0 +1,50 @@
+import { Editor } from '@tiptap/react'
+
+interface TiptapCommand {
+  name: string
+  onClick: () => void
+  icon: string
+  attributes?: Record<string, any>
+}
+
+interface useTiptapCommandsProps {
+  editor: Editor | null
+}
+
+const useTiptapCommands = (props: useTiptapCommandsProps): TiptapCommand[] => {
+  const { editor } = props
+
+  if (!editor) return []
+
+  function command(name: string, callback: () => void, icon: string): TiptapCommand {
+    return {
+      name,
+      onClick: callback,
+      icon,
+    }
+  }
+
+  return [
+    command('bold', () => editor.chain().focus().toggleBold().run(), 'Bold'),
+    command('italic', () => editor.chain().focus().toggleItalic().run(), 'Italic'),
+    command('strike', () => editor.chain().focus().toggleStrike().run(), 'Strikethrough'),
+    command('code', () => editor.chain().focus().toggleCode().run(), 'Code'),
+
+    command('textAlign.left', () => editor.chain().focus().setTextAlign('left').run(), 'AlignLeft'),
+    command('textAlign.center', () => editor.chain().focus().setTextAlign('center').run(), 'AlignCenter'),
+    command('textAlign.right', () => editor.chain().focus().setTextAlign('right').run(), 'AlignRight'),
+    command('textAlign.justify', () => editor.chain().focus().setTextAlign('justify').run(), 'AlignJustify'),
+
+    command('bulletList', () => editor.chain().focus().toggleBulletList().run(), 'BulletList'),
+    command('orderedList', () => editor.chain().focus().toggleOrderedList().run(), 'OrderedList'),
+    command('blockquote', () => editor.chain().focus().toggleBlockquote().run(), 'Quote'),
+    command('link', () => editor.chain().focus().unsetLink().run(), 'Link'),
+
+    command('hard break', () => editor.chain().focus().setHardBreak().run(), 'Pagebreak'),
+    command('undo', () => editor.chain().focus().undo().run(), 'Undo'),
+    command('redo', () => editor.chain().focus().redo().run(), 'Redo'),
+    command('clear marks', () => editor.chain().focus().unsetAllMarks().run(), 'Clear'),
+  ]
+}
+
+export default useTiptapCommands

package/src/molecules/select/index.ts

@@ -0,0 +1,2 @@
+export * from './select.jsx'
+export * from './select-async.jsx'

package/src/molecules/select/select-async.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-named-default */
+import noop from 'lodash/noop.js'
+import React, { FC } from 'react'
+import { AsyncProps, default as ReactAsyncSelect } from 'react-select/async'
+
+import useSelectTheme from './select-theme.js'
+import { cssClass, filterStyles, selectStyles } from '../../utils/index.js'
+
+interface SelectProps<Option = unknown, IsMulti extends boolean = false>
+  extends AsyncProps<Option, IsMulti, any> {
+  value: Option
+  onChange?: (selected) => void
+  variant?: 'default' | 'filter'
+}
+
+let SelectComponent: typeof ReactAsyncSelect
+if ((ReactAsyncSelect as any).default) {
+  SelectComponent = (ReactAsyncSelect as any).default
+} else {
+  SelectComponent = ReactAsyncSelect
+}
+
+export const SelectAsync: FC<SelectProps> = (props) => {
+  const { value, onChange, variant, ...selectProps } = props
+  const { theme, selectTheme } = useSelectTheme()
+  const styles = variant === 'filter' ? filterStyles(theme) : selectStyles(theme)
+
+  const handleChange = (selected) => {
+    if (typeof onChange === 'function') onChange(selected)
+  }
+
+  return (
+    <SelectComponent
+      className={cssClass('Select')}
+      theme={selectTheme}
+      value={value}
+      styles={styles}
+      onChange={handleChange}
+      isClearable
+      {...selectProps}
+    />
+  )
+}
+
+SelectAsync.defaultProps = {
+  variant: 'default',
+  onChange: noop,
+}
+SelectAsync.displayName = 'SelectAsync'
+
+export default SelectAsync

package/src/molecules/select/select-theme.ts

@@ -0,0 +1,41 @@
+import { rgba } from 'polished'
+import { useEffect, useState } from 'react'
+import type { ThemeConfig } from 'react-select'
+import type { DefaultTheme } from '@styled-components'
+import { useTheme } from '@styled-components'
+
+import * as defautTheme from '../../theme.js'
+
+const useSelectTheme = (): { theme: DefaultTheme; selectTheme: ThemeConfig } => {
+  const theme = useTheme()
+  const [currentTheme, setCurrentTheme] = useState<DefaultTheme>(defautTheme)
+
+  useEffect(() => {
+    if (theme) {
+      setCurrentTheme(theme)
+    }
+  }, [theme])
+
+  const selectTheme: ThemeConfig = (config) => ({
+    ...config,
+    borderRadius: 2,
+    spacing: {
+      ...config.spacing,
+      controlHeight: 32,
+      baseUnit: 3,
+    },
+    colors: {
+      ...config.colors,
+      primary: currentTheme.colors.primary100,
+      danger: currentTheme.colors.error,
+      dangerLight: currentTheme.colors.errorLight,
+      primary25: rgba(currentTheme.colors.black, 0.06),
+      primary50: rgba(currentTheme.colors.black, 0.125),
+      primary75: rgba(currentTheme.colors.black, 0.25),
+    },
+  })
+
+  return { theme: currentTheme, selectTheme }
+}
+
+export default useSelectTheme

package/src/molecules/select/select.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import filter from 'lodash/filter.js'
+import React, { useState } from 'react'
+import { PublicBaseSelectProps } from 'react-select/base'
+
+import { Box, FormGroup } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Select, SelectAsync } from './index.js'
+
+const options = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+]
+
+export const Default: StoryFn<PublicBaseSelectProps<any, boolean, any>> = (props) => {
+  const { isMulti } = props
+  const [value, setValue] = useState()
+
+  return (
+    <Box width={1}>
+      <StoryWrapper label="Select example">
+        <FormGroup>
+          <Select
+            value={value}
+            onChange={(selected) => setValue(selected)}
+            options={options}
+            isMulti={isMulti}
+          />
+        </FormGroup>
+      </StoryWrapper>
+    </Box>
+  )
+}
+
+export const Async: StoryFn = () => {
+  const [valueAsync, setValueAsync] = useState()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const loadOptions = async (inputValue: string): Promise<any[]> => {
+    setIsLoading(true)
+    const found = filter(options, ({ value }) => value.includes(inputValue))
+    setIsLoading(false)
+    return Promise.resolve(found)
+  }
+
+  return (
+    <Box width={1}>
+      <StoryWrapper label="Select async example">
+        <FormGroup>
+          <SelectAsync
+            value={valueAsync}
+            onChange={(selected) => setValueAsync(selected)}
+            loadOptions={loadOptions}
+            isLoading={isLoading}
+          />
+        </FormGroup>
+      </StoryWrapper>
+    </Box>
+  )
+}
+
+const meta: Meta<typeof Select> = {
+  title: 'DesignSystem/Molecules/Select',
+  component: Select,
+  parameters: { controls: { include: ['variant', 'isMulti'] } },
+  args: {
+    variant: 'default',
+    isMulti: false,
+  },
+  argTypes: {
+    variant: { options: ['default', 'filter'], control: { type: 'select' } },
+    isMulti: { control: { type: 'boolean' } },
+  },
+}
+
+export default meta

package/src/molecules/select/select.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-named-default */
+import noop from 'lodash/noop.js'
+import React, { FC } from 'react'
+import { Props, default as ReactSelect } from 'react-select'
+
+import { cssClass, filterStyles, selectStyles } from '../../utils/index.js'
+import useSelectTheme from './select-theme.js'
+
+interface SelectProps extends Props {
+  value: any
+  onChange?: (selected) => void
+  variant?: 'default' | 'filter'
+}
+
+let SelectComponent: typeof ReactSelect
+if ((ReactSelect as any).default) {
+  SelectComponent = (ReactSelect as any).default
+} else {
+  SelectComponent = ReactSelect
+}
+
+export const Select: FC<SelectProps> = (props) => {
+  const { value, onChange, variant, isMulti, ...selectProps } = props
+  const { theme, selectTheme } = useSelectTheme()
+  const styles = variant === 'filter' ? filterStyles(theme) : selectStyles(theme)
+
+  const handleChange: Props['onChange'] = (selected) => {
+    if (typeof onChange === 'function') onChange(selected)
+  }
+
+  return (
+    <SelectComponent
+      className={cssClass('Select')}
+      value={value}
+      theme={selectTheme}
+      styles={styles}
+      onChange={handleChange}
+      isClearable
+      isMulti={isMulti}
+      {...selectProps}
+    />
+  )
+}
+
+Select.defaultProps = {
+  variant: 'default',
+  onChange: noop,
+}
+Select.displayName = 'Select'
+
+export default Select

package/src/molecules/stepper/index.ts

@@ -0,0 +1,2 @@
+export * from './step.jsx'
+export * from './stepper.jsx'

package/src/molecules/stepper/step.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { SpaceProps, space } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { Icon } from '../../atoms/icon/index.js'
+import { Text } from '../../atoms/text/index.js'
+import { Box, BoxProps } from '../../atoms/box/index.js'
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * Handler which is invoked when user clicks given step
+ *
+ * @alias OnStepClickHandler
+ * @memberof Step
+ */
+export type OnStepClickHandler = (
+  /**
+   * The same number what was passed to a {@link Step}
+   */
+  number?: number | string
+) => boolean | void
+
+/**
+ * @alias StepProps
+ * @memberof Step
+ */
+export type StepProps = {
+  /** number presented in a circle */
+  number?: number | string;
+  /** indicates if given step is done */
+  completed?: boolean;
+  /** indicates if given step is active */
+  active?: boolean;
+  /** turn off any  */
+  disabled?: boolean;
+  /** handler which passes a number of the step in an argument */
+  onClick?: OnStepClickHandler;
+  /** Optional className */
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Circle = styled(Box)<BoxProps>`
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 9999px;
+  text-align: center;
+`
+
+Circle.defaultProps = {
+  py: 'default',
+  px: 'default',
+  minWidth: '34px',
+  height: '34px',
+}
+
+type StyledStepProps = SpaceProps & Pick<StepProps, 'active' | 'disabled'>
+
+const StyledStep = styled.div<StyledStepProps>`
+  flex: 1 1 0px;
+  display: flex;
+  flex-direction: row;
+
+  & > ${Box} {
+    ${({ disabled }): string => (!disabled ? 'cursor: pointer' : '')};
+    border-bottom: 2px solid ${({ active, theme }): string => (active ? theme.colors.primary100 : 'transparent')};
+  }
+  
+  ${space};
+`
+
+/**
+ * @classdesc
+ *
+ * <img src="components/step.png" />
+ *
+ * Step represents one of the tab in placed inside {@link Stepper} component.
+ * You can use it alone or with before-mentioned {@link Stepper}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Step, StepProps } from '@adminjs/design-system'
+ * ```
+ *
+ *
+ * @hideconstructor
+ * @see Stepper
+ * @see StepProps
+ * @see OnStepClickHandler
+ * @subcategory Molecules
+ * @component
+ * @example <caption>Regular step</caption>
+ * return (
+ *   <Box p="default">
+ *     <Step number="1">Normal Step</Step>
+ *  </Box>
+ * )
+ *
+ * @example <caption>Active steps</caption>
+ * return (
+ *   <Box p="default">
+ *     <Step number="1" active>I am active</Step>
+ *  </Box>
+ * )
+ *
+ * @example <caption>Active steps</caption>
+ * return (
+ *   <Box p="default">
+ *     <Step number="1" completed>This was done !!!</Step>
+ *  </Box>
+ * )
+ *
+ * @example <caption>Clickable step</caption>
+ * const onClick = () => alert('Why did you click me?')
+ *
+ * return (
+ *   <Box p="default">
+ *     <Step number="1" onClick={onClick}>Click me if you dare</Step>
+ *  </Box>
+ * )
+ * @section design-system
+ */
+const Step: React.FC<StepProps> = (props) => {
+  const { number, completed, children, active, disabled, onClick, className } = props
+
+  return (
+    <StyledStep
+      active={active}
+      disabled={disabled || !onClick}
+      className={cssClass('Step', className)}
+    >
+      <Box
+        flexShrink={1}
+        flexGrow={0}
+        flex
+        flexDirection="row"
+        pt="lg"
+        pb="default"
+        onClick={(): boolean | void => !disabled && onClick && onClick(number)}
+      >
+        <Circle
+          bg={completed ? 'grey40' : 'transparent'}
+          borderColor={active ? 'primary100' : 'grey40'}
+          color={active ? 'primary100' : 'grey40'}
+        >
+          {completed ? (
+            <Icon icon="Check" color="white" />
+          ) : number}
+        </Circle>
+        <Text my="sm" pl="default" py="sm" color={active || completed ? 'grey100' : 'grey40'}>
+          {children}
+        </Text>
+      </Box>
+    </StyledStep>
+  )
+}
+
+Step.displayName = 'Step'
+
+export { Step }
+export default Step

package/src/molecules/stepper/stepper.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React, { SetStateAction, useState } from 'react'
+
+import { Box, Button } from '../../index.js'
+import { Step, Stepper } from './index.js'
+
+const steps = [
+  { number: 1, label: 'Do this first' },
+  { number: 2, label: "Don't forget this" },
+  { number: 3, label: 'And finally this' },
+]
+
+export const clickableSteps: StoryFn = () => {
+  const [currentStep, setCurrentStep] = useState(1)
+
+  return (
+    <Stepper>
+      {steps.map(({ number, label }) => (
+        <Step
+          key={number}
+          active={currentStep === number}
+          completed={currentStep > number}
+          onClick={(idx?: number | string) => setCurrentStep(idx as SetStateAction<number>)}
+          number={number}
+        >
+          {label}
+        </Step>
+      ))}
+    </Stepper>
+  )
+}
+
+export const stepsWithBottomNavigation: StoryFn = () => {
+  const [currentStep, setCurrentStep] = useState(1)
+
+  return (
+    <Box>
+      <Stepper>
+        {steps.map(({ number, label }) => (
+          <Step
+            key={number}
+            active={currentStep === number}
+            completed={currentStep > number}
+            onClick={(idx?: number | string) => setCurrentStep(idx as SetStateAction<number>)}
+            number={number}
+          >
+            {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>
+  )
+}
+
+const meta: Meta<typeof Stepper> = {
+  title: 'DesignSystem/Molecules/Stepper',
+  component: Stepper,
+}
+
+export default meta