@clement_lores/admin-design-system 1.0.0

package/build/atoms/label/label.js

@@ -0,0 +1,144 @@
+import { color, space, typography, variant } from 'styled-system';
+import { styled, css } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+import themeGet from "../../utils/theme-get.js";
+const labelVariants = variant({
+  variants: {
+    primary: {
+      color: 'primary100',
+      [`& .${cssClass('Icon')} svg`]: {
+        stroke: 'primary100'
+      }
+    },
+    danger: {
+      color: 'error',
+      [`& .${cssClass('Icon')} svg`]: {
+        stroke: 'error'
+      }
+    },
+    success: {
+      color: 'success',
+      [`& .${cssClass('Icon')} svg`]: {
+        stroke: 'success'
+      }
+    },
+    info: {
+      color: 'info',
+      [`& .${cssClass('Icon')} svg`]: {
+        stroke: 'info'
+      }
+    },
+    secondary: {
+      color: 'accent',
+      [`& .${cssClass('Icon')} svg`]: {
+        stroke: 'accent'
+      }
+    },
+    light: {
+      color: 'grey60',
+      mb: 'sm',
+      fontWeight: 'light',
+      [`& .${cssClass('Icon')} svg`]: {
+        stroke: 'grey60'
+      }
+    },
+    default: {}
+  }
+});
+
+/**
+ * Prop Types of a Label component.
+ * Apart from those explicitly specified below it extends all {@link ColorProps},
+ * {@link SpaceProps} and {@link TypographyProps}
+ *
+ * @memberof Label
+ * @alias LabelProps
+ * @property {string} [...] All props default to _label_ html component like `htmlFor`,
+ *                          `id` etc.
+ * @property {string} [...] Other props from {@link ColorProps}, {@link SpaceProps}
+ *                          and {@link TypographyProps}
+ */
+
+const setDisabled = ({
+  disabled,
+  theme
+}) => disabled ? css`
+    color: ${theme.colors.grey40};
+    & .${cssClass('Icon')} svg {
+      stroke: ${theme.colors.grey40};
+    }
+  ` : css``;
+
+/**
+ * @classdesc
+ *
+ * <img src="components/label.png" />
+ *
+ * Styled form of **label** element.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Label, LabelProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see LabelProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-label--default Storybook}
+ * @hideconstructor
+ * @example <caption>2 Different versions</caption>
+ * return (
+ * <Box p="xl">
+ *   <Text>
+ *     <Label uppercase>Some uppercase label</Label>
+ *   </Text>
+ *   <Text mt="default">
+ *     <Label required>Label for required field</Label>
+ *   </Text>
+ * </Box>
+ * )
+ * @section design-system
+ */
+const Label = styled.label`
+  display: ${({
+  inline
+}) => inline ? 'inline-block' : 'block'};
+  font-family: ${themeGet('font')};
+  font-size: ${props => themeGet('fontSizes', props.size === 'lg' ? 'md' : 'sm')(props)};
+  line-height: ${themeGet('lineHeights', 'default')};
+  margin-bottom: ${({
+  theme,
+  inline
+}) => inline ? '0' : theme.space.default};
+
+  &:before {
+    content: "${({
+  required
+}) => required ? '*' : ''}";
+    color: ${themeGet('colors', 'primary100')};
+    margin-right: ${themeGet('space', 'sm')};
+    display: ${({
+  required
+}) => required ? 'block-inline' : 'none'};
+  }
+
+  & > .${cssClass('Icon')}:first-child {
+    margin-right: ${themeGet('space', 'md')};
+  }
+
+  ${({
+  uppercase
+}) => uppercase ? 'text-transform: uppercase;' : ''}
+  ${color};
+  ${typography};
+  ${space};
+  ${labelVariants};
+  ${props => setDisabled(props)};
+`;
+Label.defaultProps = {
+  className: cssClass('Label')
+};
+Label.displayName = 'Label';
+export { Label };
+export default Label;

package/build/atoms/label/label.stories.js

@@ -0,0 +1,61 @@
+/* eslint-disable react/jsx-closing-tag-location */
+
+import React from 'react';
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Box } from "../index.js";
+import { Label } from "./index.js";
+const variants = ['primary', 'danger', 'success', 'info', 'secondary'];
+export const Default = {
+  render: args => /*#__PURE__*/React.createElement(Box, {
+    width: 1
+  }, /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Label"
+  }, /*#__PURE__*/React.createElement(Label, args, "Example label")))
+};
+const meta = {
+  title: 'DesignSystem/Atoms/Label',
+  component: Label,
+  args: {
+    required: false,
+    uppercase: false,
+    disabled: false,
+    inline: false,
+    variant: 'default',
+    size: 'default'
+  },
+  argTypes: {
+    required: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    uppercase: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    inline: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    variant: {
+      options: variants,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: ['default', 'lg'],
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/link/index.js

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

package/build/atoms/link/link.js

@@ -0,0 +1,118 @@
+import { color, space, variant } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+const sizeVariants = variant({
+  prop: 'size',
+  variants: {
+    sm: {
+      fontSize: 'xs',
+      py: 'sm'
+    },
+    lg: {
+      fontSize: 'default'
+    }
+  }
+});
+const variants = variant({
+  variants: {
+    primary: {
+      color: 'primary100'
+    },
+    danger: {
+      color: 'error'
+    },
+    success: {
+      color: 'success'
+    },
+    info: {
+      color: 'primary60'
+    },
+    secondary: {
+      color: 'accent'
+    }
+  }
+});
+
+/**
+ * Prop Types of a Link component.
+ * Apart from those explicitly specified below it extends all {@link ColorProps},
+ * and {@link SpaceProps}
+ *
+ * @memberof Link
+ * @alias LinkProps
+ * @property {string} [...] All props default to _a_ html component like `href`,
+ *                          `onClick` etc.
+ * @property {string} [...] Other props from {@link ColorProps} and {@link SpaceProps}
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/link.png" />
+ *
+ * Styled form of Link element.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Link, LinkProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see LinkProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-link--default Storybook}
+ * @hideconstructor
+ * @example <caption>All color variants</caption>
+ * const variants = ['primary', 'danger', 'success', 'info', 'secondary']
+ * return (
+ * <Box py="xl">
+ *   {variants.map(variant => (
+ *      <Link href="#" variant={variant} mr="xl">{variant}</Link>
+ *   ))}
+ * </Box>
+ * )
+ * @example <caption>With icons</caption>
+ * return (
+ * <Box py="xl">
+ *   <Link href="#" mr="xl">
+ *     <Icon icon="Plus" />
+ *     With an icon
+ *   </Link>
+ * </Box>
+ * )
+ * @section design-system
+ */
+const Link = styled.a`
+  font-family: ${({
+  theme
+}) => theme.font};
+  vertical-align: middle;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+  & svg {
+    padding-right: ${({
+  theme
+}) => theme.space.default};
+    vertical-align: text-top;
+  }
+  ${({
+  uppercase
+}) => uppercase ? 'text-transform: uppercase;' : ''}
+  ${color};
+  ${space};
+  ${sizeVariants};
+  ${variants};
+`;
+Link.defaultProps = {
+  variant: 'primary',
+  color: 'grey60',
+  className: cssClass('Link')
+};
+Link.displayName = 'Link';
+export { Link };
+export default Link;

package/build/atoms/link/link.stories.js

@@ -0,0 +1,52 @@
+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 { Link } from "./index.js";
+var LinkVariant = /*#__PURE__*/function (LinkVariant) {
+  LinkVariant["Primary"] = "primary";
+  LinkVariant["Danger"] = "danger";
+  LinkVariant["Success"] = "success";
+  LinkVariant["Info"] = "info";
+  LinkVariant["Secondary"] = "secondary";
+  return LinkVariant;
+}(LinkVariant || {});
+var LinkSize = /*#__PURE__*/function (LinkSize) {
+  LinkSize["Sm"] = "sm";
+  LinkSize["Lg"] = "lg";
+  return LinkSize;
+}(LinkSize || {});
+const variants = Object.values(LinkVariant);
+const sizes = Object.values(LinkSize);
+export const Default = {
+  render: props => /*#__PURE__*/React.createElement(Link, _extends({}, props, {
+    href: "/"
+  }), "just a link")
+};
+const meta = {
+  title: 'DesignSystem/Atoms/Link',
+  component: Link,
+  args: {
+    uppercase: false,
+    variant: LinkVariant.Primary,
+    size: LinkSize.Sm
+  },
+  argTypes: {
+    uppercase: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    variant: {
+      options: variants,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: sizes,
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/loader/index.js

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

package/build/atoms/loader/loader.js

@@ -0,0 +1,83 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../box/index.js";
+import { cssClass } from "../../utils/css-class.js";
+const Spinner = styled.div.attrs({
+  className: 'lds-facebook'
+})`
+  & {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+  }
+  & div {
+    display: inline-block;
+    position: absolute;
+    left: 6px;
+    width: 13px;
+    background: ${({
+  theme
+}) => theme.colors.primary100};
+    animation: lds-facebook 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  }
+  & div:nth-child(1) {
+    left: 6px;
+    animation-delay: -0.24s;
+  }
+  & div:nth-child(2) {
+    left: 26px;
+    animation-delay: -0.12s;
+  }
+  & div:nth-child(3) {
+    left: 45px;
+    animation-delay: 0;
+  }
+  @keyframes lds-facebook {
+    0%, 80%, 100% {
+      top: 6px;
+      height: 51px;
+    }
+    40% {
+      top: 19px;
+      height: 26px;
+    }
+  }
+
+`;
+
+/**
+ * @classdesc
+ *
+ * <img src="components/loader.png" />
+ *
+ * Simple loader
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Loader } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-loader--default Storybook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @example
+ * return (
+ *   <Loader/>
+ * )
+ * @section design-system
+ */
+const Loader = () => /*#__PURE__*/React.createElement(Box, {
+  p: "x3",
+  style: {
+    textAlign: 'center'
+  },
+  "data-testid": "Loader",
+  className: cssClass('Loader')
+}, /*#__PURE__*/React.createElement(Spinner, null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null)));
+Loader.displayName = 'Loader';
+export { Loader };
+export default Loader;

package/build/atoms/loader/loader.stories.js

@@ -0,0 +1,7 @@
+import { Loader } from "./index.js";
+export const Default = {};
+const meta = {
+  title: 'DesignSystem/Atoms/Loader',
+  component: Loader
+};
+export default meta;

package/build/atoms/overlay/index.js

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

package/build/atoms/overlay/overlay.js

@@ -0,0 +1,19 @@
+import { styled } from "../../../build/utils/styled.js";
+import { zIndex } from 'styled-system';
+import { cssClass } from "../../utils/css-class.js";
+export const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+
+  ${zIndex}
+`;
+Overlay.defaultProps = {
+  className: cssClass('Overlay')
+};
+Overlay.displayName = 'Overlay';
+export default Overlay;

package/build/atoms/overlay/overlay.stories.js

@@ -0,0 +1,7 @@
+import { Overlay } from "./index.js";
+export const Default = {};
+const meta = {
+  title: 'DesignSystem/Atoms/Overlay',
+  component: Overlay
+};
+export default meta;

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

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

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

@@ -0,0 +1,69 @@
+import ReactPhoneInputLib from 'react-phone-input-2';
+import { space, typography, layout } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { InputCSS } from "../input/index.js";
+import PhoneInputStyles from "../../utils/phone-input.styles.js";
+import { cssClass } from "../../utils/css-class.js";
+const ReactPhoneInput = ReactPhoneInputLib.default ?? ReactPhoneInputLib;
+const ReactPhoneInputComponent = ReactPhoneInput.default ?? ReactPhoneInput;
+
+/**
+ * Prop Types of a PhoneInput component.
+ * CurrencyInput is based on `react-currency-input-field` @see {@link https://github.com/bl00mber/react-phone-input-2 React Phone Input Field Component}
+ * It extends all {@link SpaceProps}, {@link TypographyProps} and {@link LayoutProps} and {@link https://github.com/bl00mber/react-phone-input-2#options React Phone Input Field Component Props}
+ * @memberof PhoneInput
+ * @alias PhoneInputProps
+ * @property {string} [...] All props default to _phoneinput_ html component like `onChange`,
+ *                          `value` etc.
+ * @property {string} [...] Props from {@link SpaceProps}, {@link TypographyProps}
+ *                          and {@link LayoutProps} + they extend {@link InputProps}
+ */
+
+/**
+ * @classdesc
+ *
+ * Wrapped `phoneinput` html element.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import { PhoneInput, PhoneInputProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-phoneinput--default Storybook}
+ * @see PhoneInputProps
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="phoneinput1">Some example label</Label>
+ *      <PhoneInput id="phoneinput1" onChange={...} />;
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const PhoneInput = styled(ReactPhoneInputComponent)`
+  ${PhoneInputStyles}
+  width: 100%;
+  position: relative;
+  & > input {
+    ${InputCSS}
+    ${space}
+    ${typography}
+    ${layout}
+  }
+
+  .form-control, .flag-dropdown {
+    border-radius: 2px;
+  }
+`;
+PhoneInput.defaultProps = {
+  px: 'default',
+  py: 'sm',
+  className: cssClass('PhoneInput')
+};
+PhoneInput.displayName = 'PhoneInput';
+export { PhoneInput };
+export default PhoneInput;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FormGroup } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Box, Button } from "../index.js";
+import { PhoneInput } from "./index.js";
+export const Default = {
+  render: args => /*#__PURE__*/React.createElement(Box, {
+    width: 1
+  }, /*#__PURE__*/React.createElement(StoryWrapper, {
+    label: "Phone input example (https://github.com/bl00mber/react-phone-input-2)"
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(PhoneInput, args), /*#__PURE__*/React.createElement(Button, {
+    type: "submit"
+  }, "Submit"))))
+};
+export const Examples = () => /*#__PURE__*/React.createElement(Box, {
+  width: 1
+}, /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Phone input"
+}, /*#__PURE__*/React.createElement(PhoneInput, {
+  id: "input1",
+  placeholder: "Simple phone field..."
+})));
+const meta = {
+  title: 'DesignSystem/Atoms/PhoneInput',
+  component: PhoneInput,
+  args: {
+    borderless: false,
+    disabled: false,
+    variant: 'default',
+    width: 0.5
+  },
+  argTypes: {
+    borderless: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    variant: {
+      options: ['sm', 'lg', 'xl', 'default'],
+      control: {
+        type: 'select'
+      }
+    },
+    width: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.1
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/placeholder/index.js

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