@clement_lores/admin-design-system 1.0.0

package/src/atoms/button/button-css.tsx

@@ -0,0 +1,196 @@
+import { space, color as styledColor, typography, variant as styledVariant } from 'styled-system'
+import { darken, rgba } from 'polished'
+import { css, DefaultTheme } from '@styled-components'
+
+import { ColorVariants, VariantType } from '../../theme.js'
+import { cssClass, themeGet } from '../../utils/index.js'
+import { ButtonProps } from './button-props.js'
+
+const getColor = (theme: DefaultTheme) => (color: string): string => theme.colors[ColorVariants[color] || 'primary100']
+
+const legacyButtonVariants = (
+  ['danger', 'default', 'info', 'primary', 'secondary', 'success'] as VariantType[]
+).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' }: ButtonProps) => 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: ReturnType<typeof css> = css<ButtonProps>`
+  -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 }): string => (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/src/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/src/atoms/button/button-props.ts

@@ -0,0 +1,43 @@
+import { MouseEventHandler } from 'react'
+import { FlexboxProps, SpaceProps, TypographyProps } from 'styled-system'
+
+import { ColorVariant, VariantType } from '../../theme.js'
+import { NewColorProps as ColorProps } from '../../utils/color-props.js'
+
+/**
+ * @load ./button-props.doc.md
+ * @memberof Button
+ * @alias ButtonProps
+ * @property {string} [...] Other props from {@link ColorProps}, {@link SpaceProps}
+ *                          and {@link TypographyProps}
+ */
+export type ButtonProps = ColorProps &
+  SpaceProps &
+  TypographyProps &
+  FlexboxProps & {
+    /**
+     * Button variant
+     * @default 'contained'
+     */
+    variant?: 'contained' | 'outlined' | 'text' | VariantType
+    /**
+     * Button color variant
+     * @default 'primary'
+     */
+    color?: ColorVariant
+    /**
+     * Button size variant
+     */
+    size?: 'sm' | 'lg' | 'icon' | 'default' | 'md'
+    /**
+     * If button should be rounded
+     * @default false
+     */
+    rounded?: boolean
+    /**
+     * You can either pass an label prop - or use react Children.
+     */
+    label?: string
+  } & {
+    onClick?: MouseEventHandler<HTMLButtonElement>
+  }

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

@@ -0,0 +1,113 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Box, Icon, Label } from '../index.js'
+import { Button, ButtonProps } from './index.js'
+
+const ButtonVariant: ButtonProps['variant'][] = ['text', 'outlined', 'contained', 'light']
+const ButtonSize: ButtonProps['size'][] = ['default', 'sm', 'lg', 'icon']
+const ButtonColor: ButtonProps['color'][] = ['primary', 'secondary', 'danger', 'success', 'info']
+
+export const Default: StoryObj = {
+  render: (args) => <Button {...args}>Example button</Button>,
+}
+
+export const Examples: StoryFn = () => (
+  <Box width={1}>
+    <StoryWrapper label="Variants" flex>
+      {ButtonVariant.map((variant) => (
+        <Box key={variant}>
+          <Label>{variant}</Label>
+          <Button variant={variant}>{variant}</Button>
+        </Box>
+      ))}
+    </StoryWrapper>
+
+    <StoryWrapper label="Sizes">
+      {ButtonSize.map((size) => (
+        <>
+          <Label>{size}</Label>
+          <Box key={size} flex style={{ gap: 16 }}>
+            {ButtonVariant.map((variant) => (
+              <Button key={variant} size={size} variant={variant}>
+                {variant} {size}
+              </Button>
+            ))}
+          </Box>
+        </>
+      ))}
+    </StoryWrapper>
+
+    <StoryWrapper label="Colors">
+      {ButtonColor.map((color) => (
+        <>
+          <Label>{color}</Label>
+          <Box key={color} flex style={{ gap: 16 }}>
+            {ButtonVariant.map((variant) => (
+              <Button key={variant} color={color} variant={variant}>
+                {variant} {color}
+              </Button>
+            ))}
+          </Box>
+        </>
+      ))}
+    </StoryWrapper>
+
+    <StoryWrapper label="Rounded">
+      {ButtonSize.map((size) => (
+        <>
+          <Label>{size}</Label>
+          <Box key={size} flex style={{ gap: 16 }}>
+            {ButtonVariant.map((variant) => (
+              <Button key={variant} size={size} variant={variant} rounded>
+                {variant} rounded
+              </Button>
+            ))}
+          </Box>
+        </>
+      ))}
+    </StoryWrapper>
+
+    <StoryWrapper label="With icons">
+      {ButtonSize.map((size) => (
+        <>
+          <Label>{size}</Label>
+          <Box key={size} flex style={{ gap: 16 }}>
+            {ButtonVariant.map((variant) => (
+              <Button key={variant} size={size} variant={variant}>
+                <Icon icon="Plus" />
+                {size !== 'icon' && [variant, size].join(' ')}
+              </Button>
+            ))}
+          </Box>
+        </>
+      ))}
+    </StoryWrapper>
+  </Box>
+)
+
+const meta: Meta<typeof Button> = {
+  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/src/atoms/button/button.tsx

@@ -0,0 +1,39 @@
+import { styled, css } from '@styled-components'
+
+import { cssClass } from '../../utils/index.js'
+import ButtonCSS from './button-css.jsx'
+import type { ButtonProps } from './button-props.js'
+
+const addContent = css<ButtonProps>`
+  &: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),
+}))<ButtonProps>`
+  ${ButtonCSS};
+  ${({ label }) => (label ? addContent : '')};
+`
+
+Button.defaultProps = {
+  variant: 'text',
+  color: 'primary',
+  size: 'md',
+}
+
+Button.displayName = 'Button'
+
+export { Button }
+export default Button

package/src/atoms/button/index.ts

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

package/src/atoms/check-box/check-box.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Box, Label } from '../index.js'
+import { CheckBox } from './index.js'
+
+export const Default: StoryObj = {
+  render: (props) => (
+    <Box flexDirection="column" marginRight={15}>
+      <CheckBox id="default-checkbox" {...props} />
+      <Label inline htmlFor="default-checkbox" ml="default">
+        Check me!
+      </Label>
+    </Box>
+  ),
+}
+
+export const AllStates: StoryFn = () => (
+  <Box flex>
+    <Box flexDirection="column" marginRight={15}>
+      <CheckBox id="checkbox1" checked />
+      <Label inline htmlFor="checkbox1" ml="default">
+        Checked
+      </Label>
+    </Box>
+    <Box flexDirection="column" marginRight={15}>
+      <CheckBox id="checkbox2" />
+      <Label inline htmlFor="checkbox2" ml="default">
+        Unchecked
+      </Label>
+    </Box>
+    <Box flexDirection="column" marginRight={15}>
+      <CheckBox id="checkbox3" checked disabled />
+      <Label inline htmlFor="checkbox3" ml="default">
+        Disabled
+      </Label>
+    </Box>
+  </Box>
+)
+
+const meta: Meta<typeof CheckBox> = {
+  title: 'DesignSystem/Atoms/CheckBox',
+  component: CheckBox,
+}
+
+export default meta