@clement_lores/admin-design-system 1.0.0

package/build/atoms/button/button.doc.md

@@ -0,0 +1,103 @@
+<img src="components/button.png" />
+
+Buttons make common actions immediately visible and easy to perform with one click or tap.
+They can be used for any type of action.
+
+### Usage
+
+```jsx
+import { Button, ButtonCSS } from '@adminjs/design-system'
+
+// regular button
+return (
+  <Button>Click Me</Button>
+)
+
+// Passing button body as a label
+return (
+  <Button label="My Button" />
+)
+
+// create a new Component looking like button
+const ButtonLikeComponent = styled.a`
+  ${ButtonCSS};
+`
+
+return (
+  <ButtonLikeComponent href="#">My styled link</ButtonLikeComponent>
+)
+```
+
+### Props
+
+The Button Component takes 4 custom props:
+
+- `variant`
+- `size`
+- `rounded`
+- `label`
+
+Apart from them you can also pass {@link ColorProps}, {@link SpaceProps}
+and {@link TypographyProps}. See {@link ButtonProps} below.
+
+### Examples
+
+1 .Color variants
+
+```reactComponent
+const variants = ['primary', 'danger', 'success', 'info', 'secondary', 'text', 'light']
+return (
+<Box py="lg">
+  <Button mb="default" mr="default">default</Button>
+  {variants.map(variant => (
+    <Button mb="default" variant={variant} mr="default">{variant}</Button>
+  ))}
+</Box>
+)
+```
+
+2. Size variants
+
+```reactComponent
+return (
+<Box py="lg">
+  <Button size="sm">Small</Button>
+  <Button ml="default">Regular size</Button>
+  <Button size="lg" ml="default">Large</Button>
+</Box>
+)
+```
+
+3. Icons
+
+```reactComponent
+return (
+<Box py="lg">
+ <Button mr="default">
+   <Icon icon="Settings" />
+   With icon
+ </Button>
+ <Button size="icon" mr="default"><Icon icon="Settings" /></Button>
+ <Button rounded size="icon" mr="default"><Icon icon="Settings" /></Button>
+ <Button color="danger" mr="default">
+   <Icon icon="Trash" />
+   Delete me
+ </Button>
+ <Button mr="default" variant="text" size="sm">
+   <Icon icon="Plus" />
+   Create new item
+ </Button>
+</Box>
+)
+```
+
+4. State
+
+```reactComponent
+return (
+<Box py="lg">
+  <Button disabled>Disabled</Button>
+  <Button ml="default" variant="primary" disabled>Disabled</Button>
+</Box>
+)
+```

package/build/atoms/button/button.js

@@ -0,0 +1,37 @@
+import { styled, css } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/index.js";
+import ButtonCSS from "./button-css.js";
+const addContent = css`
+  &:before {
+    content: '${({
+  label
+}) => label}';
+  }
+`;
+
+/**
+ * @load ./button.doc.md
+ * @component
+ * @see ButtonProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-button--default StoryBook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @section design-system
+ */
+
+const Button = styled.button.attrs(props => ({
+  className: cssClass('Button', props.className)
+}))`
+  ${ButtonCSS};
+  ${({
+  label
+}) => label ? addContent : ''};
+`;
+Button.defaultProps = {
+  variant: 'text',
+  color: 'primary',
+  size: 'md'
+};
+Button.displayName = 'Button';
+export { Button };
+export default Button;

package/build/atoms/button/button.stories.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Box, Icon, Label } from "../index.js";
+import { Button } from "./index.js";
+const ButtonVariant = ['text', 'outlined', 'contained', 'light'];
+const ButtonSize = ['default', 'sm', 'lg', 'icon'];
+const ButtonColor = ['primary', 'secondary', 'danger', 'success', 'info'];
+export const Default = {
+  render: args => /*#__PURE__*/React.createElement(Button, args, "Example button")
+};
+export const Examples = () => /*#__PURE__*/React.createElement(Box, {
+  width: 1
+}, /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Variants",
+  flex: true
+}, ButtonVariant.map(variant => /*#__PURE__*/React.createElement(Box, {
+  key: variant
+}, /*#__PURE__*/React.createElement(Label, null, variant), /*#__PURE__*/React.createElement(Button, {
+  variant: variant
+}, variant)))), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Sizes"
+}, ButtonSize.map(size => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, size), /*#__PURE__*/React.createElement(Box, {
+  key: size,
+  flex: true,
+  style: {
+    gap: 16
+  }
+}, ButtonVariant.map(variant => /*#__PURE__*/React.createElement(Button, {
+  key: variant,
+  size: size,
+  variant: variant
+}, variant, " ", size)))))), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Colors"
+}, ButtonColor.map(color => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, color), /*#__PURE__*/React.createElement(Box, {
+  key: color,
+  flex: true,
+  style: {
+    gap: 16
+  }
+}, ButtonVariant.map(variant => /*#__PURE__*/React.createElement(Button, {
+  key: variant,
+  color: color,
+  variant: variant
+}, variant, " ", color)))))), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Rounded"
+}, ButtonSize.map(size => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, size), /*#__PURE__*/React.createElement(Box, {
+  key: size,
+  flex: true,
+  style: {
+    gap: 16
+  }
+}, ButtonVariant.map(variant => /*#__PURE__*/React.createElement(Button, {
+  key: variant,
+  size: size,
+  variant: variant,
+  rounded: true
+}, variant, " rounded")))))), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "With icons"
+}, ButtonSize.map(size => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, size), /*#__PURE__*/React.createElement(Box, {
+  key: size,
+  flex: true,
+  style: {
+    gap: 16
+  }
+}, ButtonVariant.map(variant => /*#__PURE__*/React.createElement(Button, {
+  key: variant,
+  size: size,
+  variant: variant
+}, /*#__PURE__*/React.createElement(Icon, {
+  icon: "Plus"
+}), size !== 'icon' && [variant, size].join(' '))))))));
+const meta = {
+  title: 'DesignSystem/Atoms/Button',
+  component: Button,
+  args: {
+    variant: ButtonVariant[0],
+    size: ButtonSize[0],
+    color: ButtonColor[0],
+    disabled: false,
+    rounded: false
+  },
+  parameters: {
+    controls: {
+      include: ['variant', 'disabled', 'rounded', 'size', 'color']
+    }
+  },
+  argTypes: {
+    onClick: {
+      action: 'clicked'
+    },
+    variant: {
+      options: ButtonVariant,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: ButtonSize,
+      control: {
+        type: 'select'
+      }
+    },
+    color: {
+      options: ButtonColor,
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/button/index.js

@@ -0,0 +1,3 @@
+export * from "./button.js";
+export * from "./button-props.js";
+export * from "./button-css.js";

package/build/atoms/check-box/check-box.js

@@ -0,0 +1,177 @@
+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); }
+import React, { useEffect, useState } from 'react';
+import { styled, css } from "../../../build/utils/styled.js";
+import focusShadowStyle from "../../utils/focus-shadow.style.js";
+import { Label } from "../label/index.js";
+const Icon = styled.svg`
+  fill: none;
+  stroke: white;
+  stroke-width: 2px;
+`;
+export const CheckboxRadioContainer = styled.span`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  & + ${Label} {
+    margin-left: ${({
+  theme
+}) => theme.space.default};
+    vertical-align: middle;
+    margin-bottom: ${({
+  theme
+}) => theme.space.sm};
+  }
+`;
+
+// Hide checkbox visually but remain accessible to screen readers.
+// Source: https://polished.js.org/docs/#hidevisually
+const HiddenCheckbox = styled.input.attrs({
+  type: 'checkbox'
+})`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+const checkboxBackground = (theme, checked, disabled) => {
+  if (checked) {
+    return disabled ? theme.colors.grey40 : theme.colors.primary100;
+  }
+  return 'transparent';
+};
+const StyledCheckbox = styled.a`
+  display: inline-block;
+  width: 16px;
+  /* when it is placed within a container setting different font size */
+  font-size: 12px;
+  border: 1px solid ${({
+  theme,
+  checked,
+  disabled
+}) => checked && !disabled ? theme.colors.primary100 : theme.colors.inputBorder};
+  height: 16px;
+  background: ${({
+  checked,
+  theme,
+  disabled
+}) => checkboxBackground(theme, checked, disabled)};
+  transition: all 150ms;
+  position: relative;
+  border-radius: 2px;
+
+  ${HiddenCheckbox}:focus + & {
+    ${({
+  theme
+}) => `box-shadow: ${focusShadowStyle(theme)};`};
+  }
+  ${HiddenCheckbox}:hover + & {
+    border-color: ${({
+  theme
+}) => theme.colors.grey60};
+  }
+  ${Icon} {
+    visibility: ${props => props.checked ? 'visible' : 'hidden'};
+  }
+
+  ${({
+  disabled
+}) => !disabled && css`
+    cursor: pointer;
+  `}
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    width: 24px;
+    height: 24px;
+    opacity: 0;
+    background: ${({
+  theme
+}) => theme.colors.primary100};
+  }
+  &:after:before {
+    opacity: 0.1;
+  }
+`;
+/**
+ * @typedef {object} CheckBoxProps
+ * @alias CheckBoxProps
+ * @memberof module:@adminjs/design-system.CheckBox
+ * @property {string} [...] All props default to _checkbox_ html input like `onChange`,
+ *                          `checked` etc.
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/checkbox.png" />
+ *
+ * HTML CheckBox
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { CheckBox, CheckBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-checkbox--default StoryBook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <CheckBox id="checkbox1"/>
+ *      <Label inline htmlFor="checkbox1" ml="default">Some example label</Label>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const CheckBox = props => {
+  const {
+    className,
+    checked,
+    onChange,
+    disabled,
+    ...restProps
+  } = props;
+  const [isChecked, setChecked] = useState(checked ?? false);
+  const handleChange = event => {
+    if (disabled) return;
+    if (onChange) {
+      onChange(event);
+    } else {
+      setChecked(!event.target.checked);
+    }
+  };
+  useEffect(() => {
+    setChecked(checked ?? false);
+  }, [checked]);
+  return /*#__PURE__*/React.createElement(CheckboxRadioContainer, {
+    className: [className ?? '', 'adminjs_Checkbox'].join(' ')
+  }, /*#__PURE__*/React.createElement(HiddenCheckbox, _extends({
+    checked: isChecked,
+    onChange: handleChange
+    // eslint-disable-next-line @typescript-eslint/ban-types
+  }, restProps, {
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(StyledCheckbox, {
+    checked: isChecked,
+    disabled: disabled,
+    onClick: event => handleChange && handleChange(event)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "20 6 9 17 4 12"
+  }))));
+};
+CheckBox.displayName = 'CheckBox';
+export { CheckBox };
+export default CheckBox;

package/build/atoms/check-box/check-box.stories.js

@@ -0,0 +1,54 @@
+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); }
+import React from 'react';
+import { Box, Label } from "../index.js";
+import { CheckBox } from "./index.js";
+export const Default = {
+  render: props => /*#__PURE__*/React.createElement(Box, {
+    flexDirection: "column",
+    marginRight: 15
+  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+    id: "default-checkbox"
+  }, props)), /*#__PURE__*/React.createElement(Label, {
+    inline: true,
+    htmlFor: "default-checkbox",
+    ml: "default"
+  }, "Check me!"))
+};
+export const AllStates = () => /*#__PURE__*/React.createElement(Box, {
+  flex: true
+}, /*#__PURE__*/React.createElement(Box, {
+  flexDirection: "column",
+  marginRight: 15
+}, /*#__PURE__*/React.createElement(CheckBox, {
+  id: "checkbox1",
+  checked: true
+}), /*#__PURE__*/React.createElement(Label, {
+  inline: true,
+  htmlFor: "checkbox1",
+  ml: "default"
+}, "Checked")), /*#__PURE__*/React.createElement(Box, {
+  flexDirection: "column",
+  marginRight: 15
+}, /*#__PURE__*/React.createElement(CheckBox, {
+  id: "checkbox2"
+}), /*#__PURE__*/React.createElement(Label, {
+  inline: true,
+  htmlFor: "checkbox2",
+  ml: "default"
+}, "Unchecked")), /*#__PURE__*/React.createElement(Box, {
+  flexDirection: "column",
+  marginRight: 15
+}, /*#__PURE__*/React.createElement(CheckBox, {
+  id: "checkbox3",
+  checked: true,
+  disabled: true
+}), /*#__PURE__*/React.createElement(Label, {
+  inline: true,
+  htmlFor: "checkbox3",
+  ml: "default"
+}, "Disabled")));
+const meta = {
+  title: 'DesignSystem/Atoms/CheckBox',
+  component: CheckBox
+};
+export default meta;

package/build/atoms/check-box/index.js

@@ -0,0 +1 @@
+export * from "./check-box.js";

package/build/atoms/currency-input/currency-input.js

@@ -0,0 +1,63 @@
+import { space, typography, layout } from 'styled-system';
+import CurrencyInputFieldLib, { formatValue as formatCurrencyProperty } from 'react-currency-input-field';
+import { styled } from "../../../build/utils/styled.js";
+import { InputCSS } from "../input/index.js";
+import { cssClass } from "../../utils/css-class.js";
+const CurrencyInputField = CurrencyInputFieldLib.default ?? CurrencyInputFieldLib;
+const CurrencyInputComponent = CurrencyInputField.default ?? CurrencyInputField;
+
+/**
+ * Prop Types of a CurrencyInput component.
+ * CurrencyInput is based on `react-currency-input-field` @see {@link https://github.com/cchanxzy/react-currency-input-field React Currency Input Field Component}
+ * It extends all {@link SpaceProps}, {@link TypographyProps} and {@link LayoutProps} and {@link https://github.com/cchanxzy/react-currency-input-field#props React Currency Input Field Component Props}
+ * @memberof CurrencyInput
+ * @alias CurrencyInputProps
+ * @property {string} [...] All props default to _currencyinput_ html component like `onChange`,
+ *                          `value` etc.
+ * @property {string} [...] Props from {@link SpaceProps}, {@link TypographyProps}
+ *                          and {@link LayoutProps} + they extend {@link InputProps}
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/currency-input.png" />
+ *
+ * Wrapped `currencyinput` html element.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import { CurrencyInput, CurrencyInputProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-currencyinput--default Storybook}
+ * @see CurrencyInputProps
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="currencyinput1">Some example label</Label>
+ *      <CurrencyInput id="currencyinput1" intlConfig={{ locale: 'en-US', currency: 'GBP' }} />;
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const CurrencyInput = styled(CurrencyInputComponent)`
+  ${InputCSS}
+  ${space};
+  ${layout};
+  ${typography};
+
+  width: 100%;
+`;
+CurrencyInput.defaultProps = {
+  px: 'default',
+  py: 'sm',
+  className: cssClass('CurrencyInput')
+};
+CurrencyInput.displayName = 'CurrencyInput';
+export { CurrencyInput, formatCurrencyProperty };
+export default CurrencyInput;

package/build/atoms/currency-input/currency-input.stories.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { FormGroup } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Box, Button } from "../index.js";
+import { CurrencyInput } from "./index.js";
+export const Default = {
+  render: props => /*#__PURE__*/React.createElement(Box, {
+    width: 1
+  }, /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Currency input example"
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(CurrencyInput, props), /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    mt: "lg"
+  }, "Submit"))))
+};
+export const Examples = () => /*#__PURE__*/React.createElement(Box, {
+  width: 1
+}, /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Euro input"
+}, /*#__PURE__*/React.createElement(CurrencyInput, {
+  id: "input1",
+  placeholder: "Simple input field...",
+  intlConfig: {
+    locale: 'de-DE',
+    currency: 'EUR'
+  }
+})));
+const meta = {
+  title: 'DesignSystem/Atoms/CurrencyInput',
+  component: CurrencyInput,
+  args: {
+    variant: 'default',
+    borderless: false,
+    disabled: false,
+    prefix: '$',
+    suffix: '',
+    decimalSeparator: '.',
+    groupSeparator: ' ',
+    allowDecimals: true,
+    width: 1 / 2,
+    decimalsLimit: 2
+  },
+  argTypes: {
+    variant: {
+      options: ['sm', 'lg', 'xl', 'default'],
+      control: {
+        type: 'select'
+      }
+    },
+    borderless: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    width: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.1
+      }
+    },
+    prefix: {
+      control: {
+        type: 'text'
+      }
+    },
+    suffix: {
+      control: {
+        type: 'text'
+      }
+    },
+    decimalSeparator: {
+      control: {
+        type: 'text'
+      }
+    },
+    groupSeparator: {
+      control: {
+        type: 'text'
+      }
+    },
+    allowDecimals: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    decimalsLimit: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 5,
+        step: 1
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/currency-input/index.js

@@ -0,0 +1 @@
+export * from "./currency-input.js";