@clement_lores/admin-design-system 1.0.0

package/build/atoms/badge/badge.js

@@ -0,0 +1,86 @@
+import { color, space, typography, variant } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+
+/**
+ * @load ./badge-props.doc.md
+ * @memberof Badge
+ * @alias BadgeProps
+ * @property {string} [...] Other props from {@link ColorProps}, {@link SpaceProps}
+ *                          and {@link TypographyProps}
+ */
+
+const variantStyle = (variantColor, props) => ({
+  bg: variantColor,
+  borderColor: variantColor,
+  color: props.outline ? variantColor : 'white'
+});
+const colorVariant = props => variant({
+  variants: {
+    primary: variantStyle('primary100', props),
+    danger: variantStyle('error', props),
+    success: variantStyle('success', props),
+    info: variantStyle('info', props),
+    secondary: variantStyle('accent', props),
+    light: variantStyle('light', props),
+    default: {}
+  }
+});
+const sizeVariants = variant({
+  prop: 'size',
+  variants: {
+    sm: {
+      py: 'xs'
+    },
+    lg: {
+      py: '11px',
+      px: '14px'
+    },
+    default: {}
+  }
+});
+
+/**
+ * @load ./badge.doc.md
+ * @see BadgeProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-badge--default StoryBook}
+ * @component
+ * @hideconstructor
+ * @section design-system
+ * @subcategory Atoms
+ */
+const Badge = styled.span`
+  border-radius: 20px;
+  border: 1px solid ${({
+  theme
+}) => theme.colors.grey40};
+  color: ${({
+  outline,
+  theme
+}) => outline ? theme.colors.grey60 : theme.colors.white};
+  vertical-align: middle;
+  font-family: ${({
+  theme
+}) => theme.font};
+  display: inline;
+  white-space: nowrap;
+
+  ${space};
+  ${color};
+  ${typography};
+  ${props => colorVariant(props)};
+  ${sizeVariants};
+  ${({
+  outline
+}) => outline ? 'background: transparent;' : ''}
+`;
+Badge.defaultProps = {
+  px: 'default',
+  py: 'sm',
+  fontSize: 'sm',
+  bg: 'grey40',
+  className: cssClass('Badge')
+};
+Badge.displayName = 'Badge';
+export { Badge };
+export default Badge;

package/build/atoms/badge/badge.stories.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Box, Header, Text as TextComponent } from "../index.js";
+import { Badge } from "./index.js";
+var BadgeVariant = /*#__PURE__*/function (BadgeVariant) {
+  BadgeVariant["Default"] = "default";
+  BadgeVariant["Primary"] = "primary";
+  BadgeVariant["Danger"] = "danger";
+  BadgeVariant["Success"] = "success";
+  BadgeVariant["Info"] = "info";
+  BadgeVariant["Secondary"] = "secondary";
+  return BadgeVariant;
+}(BadgeVariant || {});
+var BadgeSize = /*#__PURE__*/function (BadgeSize) {
+  BadgeSize["Small"] = "sm";
+  BadgeSize["Default"] = "default";
+  BadgeSize["Large"] = "lg";
+  return BadgeSize;
+}(BadgeSize || {});
+const variants = Object.values(BadgeVariant);
+const sizes = Object.values(BadgeSize);
+export const Default = {
+  render: args => /*#__PURE__*/React.createElement(Badge, args, "Badge example")
+};
+export const Examples = () => /*#__PURE__*/React.createElement(Box, {
+  width: 1
+}, /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Badge regular"
+}, /*#__PURE__*/React.createElement(Badge, {
+  variant: "primary",
+  mr: "default"
+}, "primary"), variants.map(variant => /*#__PURE__*/React.createElement(Badge, {
+  variant: variant,
+  key: variant,
+  mr: "default"
+}, variant))), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Badge outlined"
+}, variants.map(variant => /*#__PURE__*/React.createElement(Badge, {
+  variant: variant,
+  key: variant,
+  mr: "default",
+  outline: true
+}, variant))), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Badge sizes"
+}, sizes.map(size => /*#__PURE__*/React.createElement(Badge, {
+  variant: "primary",
+  size: size,
+  key: size,
+  mr: "default"
+}, size))), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "With other elements"
+}, /*#__PURE__*/React.createElement(Header.H1, null, "H1. Header", /*#__PURE__*/React.createElement(Badge, {
+  ml: "default"
+}, "Badge")), /*#__PURE__*/React.createElement(Header.H2, null, "H1. Header", /*#__PURE__*/React.createElement(Badge, {
+  ml: "default",
+  size: "sm",
+  variant: "primary"
+}, "Small badge")), /*#__PURE__*/React.createElement(TextComponent, {
+  mt: "xxl"
+}, "Inside text", /*#__PURE__*/React.createElement(Badge, {
+  mx: "default"
+}, "Is something"))));
+const meta = {
+  title: 'DesignSystem/Atoms/Badge',
+  component: Badge,
+  args: {
+    variant: BadgeVariant.Primary,
+    size: BadgeSize.Default,
+    outline: false
+  },
+  argTypes: {
+    variant: {
+      options: variants,
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: sizes,
+      control: {
+        type: 'select'
+      }
+    },
+    outline: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/badge/index.js

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

package/build/atoms/box/box-props.doc.md

@@ -0,0 +1,16 @@
+Prop Types of a Box component.
+Apart from those defined below it extends all 
+
+- {@link SpaceProps}, 
+- {@link ColorProps}
+- {@link LayoutProps},
+- {@link FlexboxProps}, 
+- {@link PositionProps}
+- {@link BorderProps} 
+- and {@link ShadowProps}.
+
+### Usage
+
+```typescript
+import { BoxProps } from '@adminjs/design-system'
+```

package/build/atoms/box/box.doc.md

@@ -0,0 +1,75 @@
+<img src="components/box.png" />
+
+The Main component allowing you to define an entire layout of the application.
+It is one of the most powerful tools in the Design System. Thanks to multiple {@link BoxProps}
+it can serve as the main wrapper for your content or as the layout building block.
+
+### Usage
+
+```javascript
+import { Box } from '@adminjs/design-system'
+```
+
+### Props
+
+Apart from the props extended by the @styled-system:
+
+- {@link SpaceProps}, 
+- {@link ColorProps}
+- {@link LayoutProps},
+- {@link FlexboxProps}, 
+- {@link PositionProps}
+- {@link BorderProps} 
+- and {@link ShadowProps}.
+
+it introduced 3 new props: flex, variant, animate. See {@link BoxProps} for more details.
+
+### Flex
+
+One of the most used cases is to use Box as a flex container. Let me give you an example of how
+to do this with `flex` prop.
+
+```reactComponent
+return (
+<Box flex flexDirection="column">
+  <Box flex>
+    <Box bg="primary20" p="md" width={1/3}>Left Content</Box>
+    <Box bg="primary20" p="md" flexGrow={1}>Right Content</Box>
+  </Box>
+  <Box flex p="xxl" borderBottom="default">
+    Bottom Content
+  </Box>
+</Box>
+)
+```
+
+### Other examples
+
+1. Simple White/Gray wrapper
+
+```reactComponent
+return (
+<Box variant="grey">
+  <Box variant="white">
+    <Text>This is the default wrapper in the application</Text>
+  </Box>
+</Box>
+)
+```
+
+2. Positioning buttons
+
+```reactComponent
+return (
+<Box variant="grey">
+  <Box variant="white" flex flexDirection="row">
+    <Box flexGrow={1}>
+      <Header.H3>Some header</Header.H3>
+    </Box>
+    <Box flexShrink={0}>
+      <Button>Example Button On The Right</Button>
+    </Box>
+  </Box>
+</Box>
+)
+```

package/build/atoms/box/box.js

@@ -0,0 +1,97 @@
+import { space, color, layout, flexbox, border, position, variant, grid, shadow, borderRadius } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+
+/**
+ * @load ./box-props.doc.md
+ * @memberof Box
+ * @alias BoxProps
+ * @property {string} [...] Other props from {@link SpaceProps}, {@link ColorProps},
+ *                          {@link LayoutProps}, {@link FlexboxProps},
+ *                          {@link PositionProps} and {@link BorderProps}.
+ */
+
+const variants = variant({
+  variants: {
+    grey: {
+      flexGrow: 1,
+      bg: 'bg',
+      py: 'xl',
+      px: ['0', 'xl'],
+      className: cssClass(['Box', 'Box_Grey'])
+    },
+    container: {
+      flexGrow: 1,
+      bg: 'container',
+      py: 'xl',
+      px: ['0', 'xl'],
+      className: cssClass(['Box', 'Box_Container']),
+      borderRadius: 8
+    },
+    white: {
+      px: ['default', 'xxl'],
+      py: 'xxl',
+      bg: 'white',
+      className: cssClass(['Box', 'Box_White'])
+    },
+    card: {
+      p: 'xxl',
+      bg: 'white',
+      className: cssClass(['Box', 'Box_Card']),
+      boxShadow: 'card'
+    },
+    transparent: {
+      px: ['default', 'xxl'],
+      py: 'xxl',
+      bg: 'transparent',
+      className: cssClass(['Box', 'Box_Transparent'])
+    }
+  }
+});
+
+/**
+ * @load ./box.doc.md
+ * @hideconstructor
+ * @component
+ * @subcategory Atoms
+ * @section design-system
+ * @see BoxProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-box--simple-white-gray-wrapper StoryBook}
+ */
+const Box = styled.section`
+  box-sizing: border-box;
+  min-width: 0;
+  ${({
+  flex
+}) => flex && typeof flex === 'boolean' ? 'display: flex;' : ''}
+  font-family: ${({
+  theme
+}) => theme.font};
+  line-height: ${({
+  theme
+}) => theme.lineHeights.default};
+  font-size: ${({
+  theme
+}) => theme.fontSizes.default};
+  font-weight: normal;
+  ${({
+  animate
+}) => animate ? 'transition: all 500ms;' : ''};
+
+  ${space};
+  ${color};
+  ${layout};
+  ${flexbox};
+  ${grid};
+  ${border};
+  ${borderRadius}
+  ${shadow};
+  ${position};
+  ${variants};
+`;
+Box.defaultProps = {
+  className: cssClass('Box')
+};
+Box.displayName = 'Box';
+export { Box };
+export default Box;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button, Header, Text } from "../index.js";
+import { Box } from "./index.js";
+export const Default = {
+  render: props => /*#__PURE__*/React.createElement(Box, props, "Box example")
+};
+const variants = ['card', 'container', 'grey', 'transparent', 'white'];
+export const simpleWhiteGrayWrapper = () => /*#__PURE__*/React.createElement(Box, {
+  variant: "grey"
+}, /*#__PURE__*/React.createElement(Box, {
+  variant: "white"
+}, /*#__PURE__*/React.createElement(Text, null, "This is the default wrapper in the application")));
+export const positioningButtons = () => /*#__PURE__*/React.createElement(Box, {
+  variant: "grey"
+}, /*#__PURE__*/React.createElement(Box, {
+  variant: "white",
+  flex: true,
+  flexDirection: "row"
+}, /*#__PURE__*/React.createElement(Box, {
+  flexGrow: 1
+}, /*#__PURE__*/React.createElement(Header.H3, null, "Some header")), /*#__PURE__*/React.createElement(Box, {
+  flexShrink: 0
+}, /*#__PURE__*/React.createElement(Button, null, "Example Button On The Right"))));
+const meta = {
+  title: 'DesignSystem/Atoms/Box',
+  component: Box,
+  parameters: {
+    controls: {
+      include: ['variant']
+    }
+  },
+  argTypes: {
+    variant: {
+      options: variants,
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+export default meta;

package/build/atoms/box/index.js

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

package/build/atoms/button/button-css.js

@@ -0,0 +1,193 @@
+import { space, color as styledColor, typography, variant as styledVariant } from 'styled-system';
+import { darken, rgba } from 'polished';
+import { css } from "../../../build/utils/styled.js";
+import { ColorVariants } from "../../theme.js";
+import { cssClass, themeGet } from "../../utils/index.js";
+const getColor = theme => color => theme.colors[ColorVariants[color] || 'primary100'];
+const legacyButtonVariants = ['danger', 'default', 'info', 'primary', 'secondary', 'success'].reduce((acc, color) => ({
+  ...acc,
+  [color]: {
+    className: cssClass(['Button', 'Button_Legacy']),
+    borderColor: 'currentColor',
+    color: theme => getColor(theme)(color),
+    '&:hover': {
+      bg: theme => rgba(getColor(theme)(color), 0.05)
+    },
+    '&:focus, &:active': {
+      bg: theme => rgba(getColor(theme)(color), 0.1)
+    }
+  }
+}), {});
+const buttonVariants = ({
+  color = 'primary'
+}) => styledVariant({
+  variants: {
+    ...legacyButtonVariants,
+    contained: {
+      className: cssClass(['Button', 'Button_Contained']),
+      color: theme => theme.colors.white,
+      bg: theme => getColor(theme)(color),
+      borderColor: theme => getColor(theme)(color),
+      '&:hover': {
+        bg: theme => darken(0.15, getColor(theme)(color)),
+        borderColor: theme => darken(0.15, getColor(theme)(color))
+      },
+      '&:focus, &:active': {
+        bg: theme => darken(0.2, getColor(theme)(color)),
+        borderColor: theme => darken(0.2, getColor(theme)(color))
+      }
+    },
+    outlined: {
+      className: cssClass(['Button', 'Button_Outlined']),
+      borderColor: 'currentColor',
+      color: theme => getColor(theme)(color),
+      '&:hover': {
+        bg: theme => rgba(getColor(theme)(color), 0.05)
+      },
+      '&:focus, &:active': {
+        bg: theme => rgba(getColor(theme)(color), 0.1)
+      }
+    },
+    light: {
+      className: cssClass(['Button', 'Button_Light']),
+      color: theme => color && getColor(theme)(color),
+      borderColor: 'grey40',
+      [`& .${cssClass('Icon')} svg`]: {
+        stroke: 'grey80'
+      },
+      '&:hover': {
+        bg: theme => rgba(getColor(theme)(color), 0.05)
+      },
+      '&:focus, &:active': {
+        bg: theme => rgba(getColor(theme)(color), 0.1)
+      }
+    },
+    text: {
+      className: cssClass(['Button', 'Button_Text']),
+      color: theme => color && getColor(theme)(color),
+      borderColor: 'transparent',
+      '&:disabled': {
+        'border-color': 'transparent'
+      },
+      '&:hover': {
+        bg: theme => rgba(getColor(theme)(color), 0.05)
+      },
+      '&:focus, &:active': {
+        bg: theme => rgba(getColor(theme)(color), 0.1)
+      }
+    }
+  }
+});
+const sizeVariants = styledVariant({
+  prop: 'size',
+  variants: {
+    sm: {
+      fontSize: 'sm',
+      py: 'xs',
+      lineHeight: 'default',
+      px: 'lg',
+      [`& .${cssClass('Icon')}`]: {
+        marginTop: '-1px',
+        marginBottom: '-1px'
+      }
+    },
+    default: {
+      py: 'sm',
+      px: 'xxl',
+      lineHeight: 'lg'
+    },
+    md: {
+      py: 'sm',
+      px: 'xxl',
+      lineHeight: 'lg'
+    },
+    lg: {
+      py: 'default',
+      px: 'x3',
+      lineHeight: 'lg'
+    },
+    icon: {
+      py: 'default',
+      px: 'default',
+      lineHeight: 'sm',
+      minWidth: '34px',
+      height: '34px',
+      [`& .${cssClass('Icon')}`]: {
+        padding: 0,
+        margin: 0
+      }
+    }
+  }
+});
+
+/**
+ * Button CSS Styles which can be reused in another button-like component with styled-components
+ *
+ * Usage:
+ * ```
+ * import { ButtonCSS } from '@adminjs/design-system'
+ * import { Link } from 'react-router-dom'
+ *
+ * const MyStyledLink = styled(Link)`
+ *   ${ButtonCSS}
+ * `
+ * ```
+ * @memberof Button
+ * @alias ButtonCSS
+ */
+export const ButtonCSS = css`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  background-color: transparent;
+  outline: 0;
+  font-family: ${({
+  theme
+}) => theme.font};
+  font-size: ${themeGet('fontSizes', 'default')};
+  vertical-align: middle;
+  border-radius: ${themeGet('space', 'sm')};
+  user-select: none;
+  text-align: center;
+
+  border: 1px solid ${themeGet('colors', 'primary100')};
+  color: ${themeGet('colors', 'primary100')};
+
+  cursor: pointer;
+  text-decoration: none;
+  box-sizing: border-box;
+
+  & .${cssClass('Icon')} {
+    vertical-align: middle;
+    margin: 0 ${themeGet('space', 'md')} 0 0;
+    color: inherit;
+  }
+
+  transition: all 0.1s ease-in;
+
+  ${({
+  rounded
+}) => rounded ? 'border-radius: 9999px' : ''};
+
+  &:disabled {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.3);
+    cursor: auto;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba(0, 0, 0, 0.2);
+      border-color: transparent;
+    }
+  }
+
+  ${styledColor};
+  ${space};
+  ${typography};
+
+  ${buttonVariants};
+  ${sizeVariants};
+`;
+export default ButtonCSS;

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

@@ -0,0 +1,4 @@
+Prop Types of a Button component.
+
+Apart from those defined below it extends all {@link ColorProps}, {@link SpaceProps}
+and {@link TypographyProps}

package/build/atoms/button/button-props.js

@@ -0,0 +1 @@
+export {};