@clement_lores/admin-design-system 1.0.0

package/build/molecules/rich-text-editor/rich-text-editor.js

@@ -0,0 +1,60 @@
+/* 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, { useCallback } from 'react';
+import MenuBar from "./components/menu-bar.js";
+import { EditorWrapper } from "./rich-text-editor.styled.js";
+const RichTextEditor = 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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(EditorWrapper, null, /*#__PURE__*/React.createElement(EditorContent, {
+    editor: editor
+  }), options.limit && /*#__PURE__*/React.createElement("span", {
+    className: "characterCount"
+  }, value?.length, "/", limit)));
+};
+RichTextEditor.displayName = 'RichTextEditor';
+export { RichTextEditor };
+export default RichTextEditor;

package/build/molecules/rich-text-editor/rich-text-editor.stories.js

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Text } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { RichTextEditor } from "./rich-text-editor.js";
+const html = `
+<h1>Hello World</h1>
+<h2>Some header 2</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
+eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
+vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel
+interdum mattis neque.
+</p>
+<ol>
+<li>interdum mattis neque.</li>
+</ol>
+<h2>Second level</h2>
+<p>
+Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
+Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium
+urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus
+facilisis. Donec at dignissim dui. Ut et neque nisl.
+</p>
+<ul>
+<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+<li>Ut non enim metus.</li>
+</ul>
+<a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>
+<blockquote>
+And here it comes - the quote
+</blockquote>
+<h5>Header H5</h5>
+<p><code>var a = 'asd';</code></p>
+<pre>
+const a = 1;
+const b = 0;
+
+function sum(x, y) {
+    return x + y;
+}
+
+const c = sum(a, b);</pre>
+<p>And below there is a Table</p>
+<table>
+<thead>
+<tr><th>Name</th><th>Surname</th></tr>
+</thead>
+<tbody>
+<tr><td>Wojtek</td><td>Krysiak</td></tr>
+<tr><td>Joseph</td><td>Grad</td></tr>
+</tbody>
+</table>
+<p>text goes on...</p>
+`;
+export const Default = () => {
+  const [value, setValue] = useState(html);
+  const contentRef = useRef();
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.innerHTML = value;
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement(Box, {
+    flex: true,
+    style: {
+      gap: 48
+    }
+  }, /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Rich text editor"
+  }, /*#__PURE__*/React.createElement(RichTextEditor, {
+    onChange: content => setValue(content),
+    value: value
+  })), /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Text preview"
+  }, /*#__PURE__*/React.createElement(Text, {
+    ref: contentRef
+  })));
+};
+const meta = {
+  title: 'DesignSystem/Molecules/RichTextEditor',
+  component: RichTextEditor
+};
+export default meta;

package/build/molecules/rich-text-editor/rich-text-editor.styled.js

@@ -0,0 +1,46 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { InputCSS } from "../../atoms/input/index.js";
+import { Text } from "../../atoms/text/index.js";
+import { cssClass, themeGet } from "../../utils/index.js";
+export const EditorWrapper = styled(Text)`
+  position: relative;
+  ${InputCSS}
+
+  .ProseMirror-focused {
+    outline: none;
+  }
+
+  .characterCount {
+    position: absolute;
+    bottom: ${themeGet('space', 'md')};
+    right: ${themeGet('space', 'lg')};
+    color: ${themeGet('colors', 'grey40')};
+  }
+`;
+EditorWrapper.defaultProps = {
+  px: 'xl',
+  py: 'xl',
+  className: cssClass('EditorWrapper')
+};
+export const MenuBarWrapper = styled(Box)`
+  border: 1px solid ${themeGet('colors', 'inputBorder')};
+  border-bottom: none;
+
+  & .${cssClass('Icon')}:hover {
+    cursor: pointer;
+  }
+
+  & .${cssClass('Icon')} {
+    stroke: ${themeGet('colors', 'grey100')};
+  }
+
+  & .active .${cssClass('Icon')} {
+    stroke: ${themeGet('colors', 'primary100')};
+  }
+`;
+MenuBarWrapper.defaultProps = {
+  px: 'md',
+  py: 'md',
+  className: cssClass('MenuBarWrapper')
+};

package/build/molecules/rich-text-editor/useTiptapCommands.js

@@ -0,0 +1,15 @@
+const useTiptapCommands = props => {
+  const {
+    editor
+  } = props;
+  if (!editor) return [];
+  function command(name, callback, icon) {
+    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/build/molecules/select/index.js

@@ -0,0 +1,2 @@
+export * from "./select.js";
+export * from "./select-async.js";

package/build/molecules/select/select-async.js

@@ -0,0 +1,43 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable import/no-named-default */
+import noop from 'lodash/noop.js';
+import React from 'react';
+import { default as ReactAsyncSelect } from 'react-select/async';
+import useSelectTheme from "./select-theme.js";
+import { cssClass, filterStyles, selectStyles } from "../../utils/index.js";
+let SelectComponent;
+if (ReactAsyncSelect.default) {
+  SelectComponent = ReactAsyncSelect.default;
+} else {
+  SelectComponent = ReactAsyncSelect;
+}
+export const SelectAsync = 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 /*#__PURE__*/React.createElement(SelectComponent, _extends({
+    className: cssClass('Select'),
+    theme: selectTheme,
+    value: value,
+    styles: styles,
+    onChange: handleChange,
+    isClearable: true
+  }, selectProps));
+};
+SelectAsync.defaultProps = {
+  variant: 'default',
+  onChange: noop
+};
+SelectAsync.displayName = 'SelectAsync';
+export default SelectAsync;

package/build/molecules/select/select-theme.js

@@ -0,0 +1,36 @@
+import { rgba } from 'polished';
+import { useEffect, useState } from 'react';
+import { useTheme } from "../../../build/utils/styled.js";
+import * as defautTheme from "../../theme.js";
+const useSelectTheme = () => {
+  const theme = useTheme();
+  const [currentTheme, setCurrentTheme] = useState(defautTheme);
+  useEffect(() => {
+    if (theme) {
+      setCurrentTheme(theme);
+    }
+  }, [theme]);
+  const selectTheme = 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/build/molecules/select/select.js

@@ -0,0 +1,45 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable import/no-named-default */
+import noop from 'lodash/noop.js';
+import React from 'react';
+import { default as ReactSelect } from 'react-select';
+import { cssClass, filterStyles, selectStyles } from "../../utils/index.js";
+import useSelectTheme from "./select-theme.js";
+let SelectComponent;
+if (ReactSelect.default) {
+  SelectComponent = ReactSelect.default;
+} else {
+  SelectComponent = ReactSelect;
+}
+export const Select = props => {
+  const {
+    value,
+    onChange,
+    variant,
+    isMulti,
+    ...selectProps
+  } = props;
+  const {
+    theme,
+    selectTheme
+  } = useSelectTheme();
+  const styles = variant === 'filter' ? filterStyles(theme) : selectStyles(theme);
+  const handleChange = selected => {
+    if (typeof onChange === 'function') onChange(selected);
+  };
+  return /*#__PURE__*/React.createElement(SelectComponent, _extends({
+    className: cssClass('Select'),
+    value: value,
+    theme: selectTheme,
+    styles: styles,
+    onChange: handleChange,
+    isClearable: true,
+    isMulti: isMulti
+  }, selectProps));
+};
+Select.defaultProps = {
+  variant: 'default',
+  onChange: noop
+};
+Select.displayName = 'Select';
+export default Select;

package/build/molecules/select/select.stories.js

@@ -0,0 +1,80 @@
+import filter from 'lodash/filter.js';
+import React, { useState } from 'react';
+import { Box, FormGroup } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Select, SelectAsync } from "./index.js";
+const options = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}];
+export const Default = props => {
+  const {
+    isMulti
+  } = props;
+  const [value, setValue] = useState();
+  return /*#__PURE__*/React.createElement(Box, {
+    width: 1
+  }, /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Select example"
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Select, {
+    value: value,
+    onChange: selected => setValue(selected),
+    options: options,
+    isMulti: isMulti
+  }))));
+};
+export const Async = () => {
+  const [valueAsync, setValueAsync] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const loadOptions = async inputValue => {
+    setIsLoading(true);
+    const found = filter(options, ({
+      value
+    }) => value.includes(inputValue));
+    setIsLoading(false);
+    return Promise.resolve(found);
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    width: 1
+  }, /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Select async example"
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(SelectAsync, {
+    value: valueAsync,
+    onChange: selected => setValueAsync(selected),
+    loadOptions: loadOptions,
+    isLoading: isLoading
+  }))));
+};
+const meta = {
+  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/build/molecules/stepper/index.js

@@ -0,0 +1,2 @@
+export * from "./step.js";
+export * from "./stepper.js";

package/build/molecules/stepper/step.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import { space } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { Icon } from "../../atoms/icon/index.js";
+import { Text } from "../../atoms/text/index.js";
+import { Box } 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
+ */
+
+/**
+ * @alias StepProps
+ * @memberof Step
+ */
+
+const Circle = styled(Box)`
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 9999px;
+  text-align: center;
+`;
+Circle.defaultProps = {
+  py: 'default',
+  px: 'default',
+  minWidth: '34px',
+  height: '34px'
+};
+const StyledStep = styled.div`
+  flex: 1 1 0px;
+  display: flex;
+  flex-direction: row;
+
+  & > ${Box} {
+    ${({
+  disabled
+}) => !disabled ? 'cursor: pointer' : ''};
+    border-bottom: 2px solid ${({
+  active,
+  theme
+}) => 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 = props => {
+  const {
+    number,
+    completed,
+    children,
+    active,
+    disabled,
+    onClick,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledStep, {
+    active: active,
+    disabled: disabled || !onClick,
+    className: cssClass('Step', className)
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexShrink: 1,
+    flexGrow: 0,
+    flex: true,
+    flexDirection: "row",
+    pt: "lg",
+    pb: "default",
+    onClick: () => !disabled && onClick && onClick(number)
+  }, /*#__PURE__*/React.createElement(Circle, {
+    bg: completed ? 'grey40' : 'transparent',
+    borderColor: active ? 'primary100' : 'grey40',
+    color: active ? 'primary100' : 'grey40'
+  }, completed ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "Check",
+    color: "white"
+  }) : number), /*#__PURE__*/React.createElement(Text, {
+    my: "sm",
+    pl: "default",
+    py: "sm",
+    color: active || completed ? 'grey100' : 'grey40'
+  }, children)));
+};
+Step.displayName = 'Step';
+export { Step };
+export default Step;

package/build/molecules/stepper/stepper.js

@@ -0,0 +1,115 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Box } 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)`
+`;
+Stepper.defaultProps = {
+  flex: true,
+  flexDirection: ['column', 'row'],
+  borderBottom: '1px solid',
+  borderBottomColor: 'separator',
+  className: cssClass('Stepper')
+};
+Stepper.displayName = 'Stepper';
+export { Stepper };
+export default Stepper;