@clement_lores/admin-design-system 1.0.0

package/src/atoms/badge/badge.doc.md

@@ -0,0 +1,90 @@
+<img src="components/badge.png" />
+
+Component representing a badge.
+
+### Usage
+
+```typescript
+import { Badge } from '@adminjs/design-system'
+
+const MyComponent = () => (
+  <Badge>My badge</Badge>
+)
+```
+
+### Props
+
+The Badge Component takes 3 custom props:
+
+- `variant`
+- `outline`
+- `size`
+
+Apart from them you can also pass {@link ColorProps}, {@link SpaceProps} and {@link TypographyProps}.
+See {@link BadgeProps} below.
+
+### Examples
+
+Check out the following examples.
+
+1. Mixed versions
+
+```reactComponent
+return (
+  <Box py="lg">
+    <Badge variant="primary" size="lg">My badge</Badge>
+    <Badge color="danger" size="sm" outline ml="xl">Danger Danger</Badge>
+    <Badge variant="success" ml="xl">Success</Badge>
+  </Box>
+)
+```
+
+2. Outline
+
+```reactComponent
+const variants = ['primary', 'danger', 'success', 'info', 'secondary']
+return (
+<Box py="lg">
+  <Badge mb="default" mr="default" outline>default</Badge>
+  {variants.map(variant => (
+    <Badge mb="default" variant={variant} mr="default" outline>{variant}</Badge>
+  ))}
+</Box>
+)
+```
+
+3. Different sizes
+
+```reactComponent
+return (
+<Box py="lg">
+  <Badge ml="default" variant="primary" size="sm">small</Badge>
+  <Badge ml="default" variant="primary">regular</Badge>
+  <Badge ml="default" variant="primary" size="lg">large</Badge>
+</Box>
+)
+```
+
+4. Color variants
+
+```reactComponent
+const variants = ['primary', 'danger', 'success', 'info', 'secondary']
+return (
+<Box py="lg">
+  <Badge mb="default" mr="default">default</Badge>
+  {variants.map(variant => (
+    <Badge mb="default" variant={variant} mr="default">{variant}</Badge>
+  ))}
+</Box>
+)
+```
+
+4. Mixed with other elements
+
+```reactComponent
+return (
+<Box py="lg">
+  <Header.H3>I am the header<Badge ml="default" mr="default">Count: 50021</Badge></Header.H3>
+</Box>
+)
+```

package/src/atoms/badge/badge.stories.tsx

@@ -0,0 +1,90 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Box, Header, Text as TextComponent } from '../index.js'
+import { Badge } from './index.js'
+
+enum BadgeVariant {
+  Default = 'default',
+  Primary = 'primary',
+  Danger = 'danger',
+  Success = 'success',
+  Info = 'info',
+  Secondary = 'secondary',
+}
+
+enum BadgeSize {
+  Small = 'sm',
+  Default = 'default',
+  Large = 'lg',
+}
+
+const variants = Object.values(BadgeVariant)
+const sizes = Object.values(BadgeSize)
+
+export const Default: StoryObj<typeof Badge> = {
+  render: (args) => <Badge {...args}>Badge example</Badge>,
+}
+
+export const Examples: StoryFn = () => (
+  <Box width={1}>
+    <StoryWrapper label="Badge regular">
+      <Badge variant="primary" mr="default">
+        primary
+      </Badge>
+      {variants.map((variant) => (
+        <Badge variant={variant} key={variant} mr="default">
+          {variant}
+        </Badge>
+      ))}
+    </StoryWrapper>
+    <StoryWrapper label="Badge outlined">
+      {variants.map((variant) => (
+        <Badge variant={variant} key={variant} mr="default" outline>
+          {variant}
+        </Badge>
+      ))}
+    </StoryWrapper>
+    <StoryWrapper label="Badge sizes">
+      {sizes.map((size) => (
+        <Badge variant="primary" size={size} key={size} mr="default">
+          {size}
+        </Badge>
+      ))}
+    </StoryWrapper>
+    <StoryWrapper label="With other elements">
+      <Header.H1>
+        H1. Header
+        <Badge ml="default">Badge</Badge>
+      </Header.H1>
+      <Header.H2>
+        H1. Header
+        <Badge ml="default" size="sm" variant="primary">
+          Small badge
+        </Badge>
+      </Header.H2>
+      <TextComponent mt="xxl">
+        Inside text
+        <Badge mx="default">Is something</Badge>
+      </TextComponent>
+    </StoryWrapper>
+  </Box>
+)
+
+const meta: Meta<typeof Badge> = {
+  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/src/atoms/badge/badge.tsx

@@ -0,0 +1,99 @@
+import { color, space, typography, SpaceProps, TypographyProps, variant } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { VariantType } from '../../theme.js'
+import { NewColorProps as ColorProps } from '../../utils/color-props.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}
+ */
+export type BadgeProps = SpaceProps & TypographyProps & ColorProps & {
+  /**
+   * Color variant
+   */
+  variant?: VariantType;
+  /**
+   * Outline version
+   */
+  outline?: boolean;
+  /**
+   * Size variant
+   */
+  size?: 'sm' | 'lg' | 'default';
+}
+
+const variantStyle = (variantColor: string, props: BadgeProps): Record<string, any> => ({
+  bg: variantColor,
+  borderColor: variantColor,
+  color: props.outline ? variantColor : 'white',
+})
+
+const colorVariant = (props: BadgeProps): Record<string, any> => 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<BadgeProps>`
+  border-radius: 20px;
+  border: 1px solid ${({ theme }) => theme.colors.grey40};
+  color: ${({ outline, theme }): string => (outline ? theme.colors.grey60 : theme.colors.white)};
+  vertical-align: middle;
+  font-family: ${({ theme }) => theme.font};
+  display: inline;
+  white-space: nowrap;
+
+  ${space};
+  ${color};
+  ${typography};
+  ${(props): any => colorVariant(props)};
+  ${sizeVariants};
+  ${({ outline }): string => (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/src/atoms/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge.jsx'

package/src/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/src/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/src/atoms/box/box.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Button, Header, Text } from '../index.js'
+import { Box, BoxProps } from './index.js'
+
+export const Default: StoryObj = {
+  render: (props) => <Box {...props}>Box example</Box>,
+}
+
+const variants: BoxProps['variant'][] = ['card', 'container', 'grey', 'transparent', 'white']
+
+export const simpleWhiteGrayWrapper: StoryFn = () => (
+  <Box variant="grey">
+    <Box variant="white">
+      <Text>This is the default wrapper in the application</Text>
+    </Box>
+  </Box>
+)
+
+export const positioningButtons: StoryFn = () => (
+  <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>
+)
+
+const meta: Meta<typeof Box> = {
+  title: 'DesignSystem/Atoms/Box',
+  component: Box,
+  parameters: {
+    controls: {
+      include: ['variant'],
+    },
+  },
+  argTypes: {
+    variant: { options: variants, control: { type: 'select' } },
+  },
+}
+
+export default meta

package/src/atoms/box/box.tsx

@@ -0,0 +1,131 @@
+import { PropsWithChildren } from 'react'
+import {
+  space,
+  SpaceProps,
+  color,
+  layout,
+  LayoutProps,
+  flexbox,
+  FlexboxProps,
+  border,
+  BorderProps,
+  position,
+  PositionProps,
+  variant,
+  grid,
+  shadow,
+  ShadowProps,
+  BorderRadiusProps,
+  borderRadius,
+} from 'styled-system'
+import { styled } from '@styled-components'
+
+import { NewColorProps as ColorProps } from '../../utils/color-props.js'
+import { cssClass } from '../../utils/css-class.js'
+
+type FlexboxFlexProp = boolean | FlexboxProps['flex']
+
+/**
+ * @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}.
+ */
+export type BoxProps = PropsWithChildren &
+  BorderProps &
+  BorderRadiusProps &
+  ColorProps &
+  LayoutProps &
+  Omit<FlexboxProps, 'flex'> &
+  PositionProps &
+  ShadowProps &
+  SpaceProps & {
+    /** If box should be rendered as flex. You can pass boolean or FlexboxProps['flex'] */
+    flex?: FlexboxFlexProp
+    /** Box variants */
+    variant?: 'grey' | 'white' | 'card' | 'transparent' | 'container'
+    /** If set to true it makes css changes as 500ms transitions */
+    animate?: boolean
+    /** Optional class name passed down to the wrapper */
+    className?: string
+  }
+
+const variants = variant<BoxProps>({
+  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<BoxProps>`
+  box-sizing: border-box;
+  min-width: 0;
+  ${({ flex }): string => (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 }): string => (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/src/atoms/box/index.ts

@@ -0,0 +1 @@
+export * from './box.jsx'