@clement_lores/admin-design-system 1.0.0

package/src/atoms/phone-input/phone-input.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { FormGroup } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Box, Button } from '../index.js'
+import { PhoneInput } from './index.js'
+
+export const Default: StoryObj = {
+  render: (args) => (
+    <Box width={1}>
+      <StoryWrapper label="Phone input example (https://github.com/bl00mber/react-phone-input-2)">
+        <FormGroup>
+          <PhoneInput {...args} />
+          <Button type="submit">Submit</Button>
+        </FormGroup>
+      </StoryWrapper>
+    </Box>
+  ),
+}
+
+export const Examples: StoryFn = () => (
+  <Box width={1}>
+    <StoryWrapper label="Phone input">
+      <PhoneInput id="input1" placeholder="Simple phone field..." />
+    </StoryWrapper>
+  </Box>
+)
+
+const meta: Meta<typeof PhoneInput> = {
+  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/src/atoms/phone-input/phone-input.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import ReactPhoneInputLib, { PhoneInputProps as ReactPhoneInputProps } from 'react-phone-input-2'
+import { space, typography, layout, TypographyProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { InputCSS, InputProps } from '../input/index.js'
+import PhoneInputStyles from '../../utils/phone-input.styles.js'
+import { cssClass } from '../../utils/css-class.js'
+
+const ReactPhoneInput = (ReactPhoneInputLib as any).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}
+ */
+export type PhoneInputProps = ReactPhoneInputProps &
+  TypographyProps &
+  InputProps &
+  React.HTMLAttributes<HTMLDivElement>
+
+/**
+ * @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)<PhoneInputProps>`
+  ${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/src/atoms/placeholder/index.ts

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

package/src/atoms/placeholder/placeholder.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { Box, Label } from '../index.js'
+import { Placeholder } from './index.js'
+
+export const Default: StoryObj = {}
+
+export const textPlaceholder: StoryFn = () => (
+  <Box>
+    <Label>Some name</Label>
+    <Placeholder width={400} height={14} />
+  </Box>
+)
+
+const meta: Meta<typeof Placeholder> = {
+  title: 'DesignSystem/Atoms/Placeholder',
+  component: Placeholder,
+  args: {
+    width: 200,
+    height: 200,
+  },
+}
+
+export default meta

package/src/atoms/placeholder/placeholder.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react'
+import { LayoutProps, layout } from 'styled-system'
+import { darken } from 'polished'
+import { styled, keyframes } from '@styled-components'
+
+import { cssClass } from '../../utils/css-class.js'
+
+const waveKeyframe = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+`
+
+const StyledPlaceholder = styled.div<LayoutProps>`
+  position: relative;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+
+  &::after {
+    animation: ${waveKeyframe} 1.6s linear 0.5s infinite;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      ${({ theme }) => darken(0.03, theme.colors.border)},
+      transparent
+    );
+    content: '';
+    position: absolute;
+    transform: translateX(-100%);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+  
+  background: ${({ theme }) => theme.colors.border};
+  background-size: 1000px 104px;
+  height: 338px;
+  border-radius: ${({ theme }) => theme.space.sm};
+  ${layout};
+`
+
+/**
+ * Prop Types of a Placeholder component.
+ * Apart from standard html props it extends {@link LayoutProps}
+ * @typedef {object} PlaceholderProps
+ * @memberof Placeholder
+ * @alias PlaceholderProps
+ * @property {string} [...] All props default to _div_ html component like `style`,
+ *                          `id` etc.
+ * @property {string} [...] Props from {@link LayoutProps}
+ */
+export type PlaceholderProps = LayoutProps & React.HTMLProps<HTMLDivElement> & {
+  as?: 'div' | 'span';
+}
+
+/**
+ * @classdesc
+ *
+ * <img src="components/placeholder.png" />
+ *
+ * Renders placeholder
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Placeholder, PlaceholderProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see PlaceholderProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-placeholder--default Storybook}
+ * @hideconstructor
+ * @example <caption>Image placeholder</caption>
+ * return (
+ *   <Box>
+ *     <Placeholder width={100} height={200} />
+ *   </Box>
+ * )
+ *
+ * @example <caption>Text placeholder</caption>
+ * return (
+ *   <Box>
+ *     <Label>Some name</Label>
+ *     <Placeholder width={400} height={14} />
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const Placeholder: React.FC<PlaceholderProps> = ({ as: htmlAs, ref, ...other }) => (
+  <StyledPlaceholder as={htmlAs} {...other} className={cssClass('Placeholder')} />
+)
+
+Placeholder.displayName = 'Placeholder'
+
+export { Placeholder }
+export default Placeholder

package/src/atoms/radio/index.ts

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

package/src/atoms/radio/radio.stories.tsx

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

package/src/atoms/radio/radio.tsx

@@ -0,0 +1,142 @@
+import React, { ChangeEvent, useState } from 'react'
+import { styled } from '@styled-components'
+
+import focusShadowStyle from '../../utils/focus-shadow.style.js'
+import { CheckboxRadioContainer } from '../check-box/index.js'
+
+const Circle = styled.span`
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin-left: -4px;
+  margin-top: -4px;
+  border-radius: 9999px;
+  background: ${({ theme }) => theme.colors.white};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+`
+
+// Hide checkbox visually but remain accessible to screen readers.
+// Source: https://polished.js.org/docs/#hidevisually
+const HiddenRadio = styled.input.attrs({ type: 'radio' })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`
+
+type StyledProps = {
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+const radioBackground = (theme, checked, disabled): string => {
+  if (checked) {
+    return disabled ? theme.colors.grey40 : theme.colors.primary100
+  }
+  return theme.colors.white
+}
+
+const StyledRadio = styled.span<StyledProps>`
+  display: inline-block;
+  width: 16px;
+  cursor: pointer;
+  border: 1px solid ${({ theme, checked, disabled }): string => (checked && !disabled ? theme.colors.primary100 : theme.colors.grey40)};
+  border-radius: 1000px;
+  height: 16px;
+  transition: all 150ms;
+  position: relative;
+
+  ${HiddenRadio}:focus + & {
+    ${({ theme }) => `box-shadow: ${focusShadowStyle(theme)}`};
+  }
+  ${HiddenRadio}:hover + & {
+    border-color: ${({ theme }) => theme.colors.grey60};
+  }
+  ${Circle} {
+    visibility: ${({ checked }): string => (checked ? 'visible' : 'hidden')};
+  }
+
+  background: ${({ checked, theme, disabled }): string => radioBackground(theme, checked, disabled)};
+`
+
+export type RadioProps = React.HTMLProps<HTMLInputElement>
+
+/**
+ * @typedef {object} RadioProps
+ * @alias RadioProps
+ * @memberof Radio
+ * @property {string} [...] All props default to _radio_ html input like `onChange`,
+ *                          `checked` etc.
+ */
+
+/**
+ /**
+ * @classdesc
+ *
+ * <img src="components/radio.png" />
+ *
+ * HTML Radio
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Radio, RadioProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @see RadioProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-radio--default StoryBook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Radio id="radio1"/>
+ *      <Label inline htmlFor="radio1" ml="default">Some example label</Label>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const Radio: React.FC<RadioProps> = (props) => {
+  const { className, checked, onChange, disabled, ...restProps } = props
+
+  const [isChecked, setChecked] = useState(checked ?? false)
+  const actuallyChecked = checked ?? isChecked
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    setChecked(!event.target.checked)
+    if (onChange) {
+      onChange(event)
+    }
+  }
+
+  return (
+    <CheckboxRadioContainer className={className}>
+      <HiddenRadio
+        checked={actuallyChecked}
+        onChange={handleChange}
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        {...restProps as {}}
+        disabled={disabled}
+      />
+      <StyledRadio
+        checked={actuallyChecked}
+        onClick={(event): void => handleChange && handleChange(event as any)}
+        disabled={disabled}
+      >
+        <Circle />
+      </StyledRadio>
+    </CheckboxRadioContainer>
+  )
+}
+
+Radio.displayName = 'Radio'
+
+export { Radio }
+export default Radio

package/src/atoms/section/index.ts

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

package/src/atoms/section/section.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Box, Button, CardTitle, Icon, Text } from '../index.js'
+import { Section } from './index.js'
+
+export const Default: StoryFn = () => (
+  <StoryWrapper label="Section default settings">
+    <Section>
+      <Box mb="xl">
+        <CardTitle>Some text within a section</CardTitle>
+      </Box>
+      <Section>
+        <Text>Section can be nested</Text>
+        <Box>
+          <Button size="sm" rounded>
+            <Icon icon="Plus" />
+            Add something
+          </Button>
+        </Box>
+      </Section>
+    </Section>
+  </StoryWrapper>
+)
+
+const meta: Meta<typeof Section> = {
+  title: 'DesignSystem/Atoms/Section',
+  component: Section,
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+}
+
+export default meta

package/src/atoms/section/section.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable import/prefer-default-export */
+import { styled } from '@styled-components'
+
+import { Box } from '../box/index.js'
+import { themeGet, cssClass } from '../../utils/index.js'
+
+/**
+ * @classdesc
+ *
+ * <img src="components/section.png" />
+ *
+ * Marks group of fields as a section. Has the same props as [Box]{@link BoxProps}
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Section } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-section--default Storybook}
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Section>
+ *     <Text>Some text within a section</Text>
+ *     <Section>
+ *       <Text>Section can be nested</Text>
+ *     </Section>
+ *   </Section>
+ * )
+ * @section design-system
+ */
+const Section = styled<any>(Box)`
+  border: 1px dashed ${({ theme }) => theme.colors.inputBorder};
+  padding: ${themeGet('space', 'lg')};
+`
+
+Section.defaultProps = {
+  className: cssClass('Section'),
+}
+
+Section.displayName = 'Section'
+
+export { Section }
+export default Section

package/src/atoms/table/index.ts

@@ -0,0 +1,6 @@
+export { default as Table } from './table.jsx'
+export { default as TableHead } from './table-head.jsx'
+export { default as TableBody } from './table-body.jsx'
+export { default as TableCell } from './table-cell.jsx'
+export { default as TableRow } from './table-row.jsx'
+export { default as TableCaption } from './table-caption.jsx'

package/src/atoms/table/table-body.tsx

@@ -0,0 +1,19 @@
+import { styled } from '@styled-components'
+
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * @component
+ * @private
+ */
+const TableBody = styled.tbody`
+
+`
+
+TableBody.defaultProps = {
+  className: cssClass('TableBody'),
+}
+
+TableBody.displayName = 'TableBody'
+
+export default TableBody

package/src/atoms/table/table-caption.tsx

@@ -0,0 +1,43 @@
+import { styled } from '@styled-components'
+
+import { Button } from '../button/index.js'
+import { themeGet, cssClass } from '../../utils/index.js'
+
+/**
+ * @component
+ * @private
+ */
+const TableCaption = styled.caption`
+  font-family: ${themeGet('font')};
+  padding: ${themeGet('space', 'sm')} ${themeGet('space', 'lg')};
+  text-align: left;
+  color: ${themeGet('colors', 'white')};
+  font-size: ${themeGet('fontSizes', 'default')};
+  line-height: ${themeGet('lineHeights', 'default')};
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -4px;
+  transform: translateY(-100%);
+  background: ${themeGet('colors', 'primary100')};
+  border-radius: 4px;
+  box-sizing: border-box;
+  vertical-align: middle;
+
+  &:first-child {
+    flex-grow: 1;
+  }
+
+  & ${Button} {
+    color: ${themeGet('colors', 'white')};
+    border-color: ${themeGet('colors', 'white')};
+  }
+`
+
+TableCaption.defaultProps = {
+  className: cssClass('TableCaption'),
+}
+
+TableCaption.displayName = 'TableCaption'
+
+export default TableCaption

package/src/atoms/table/table-cell.tsx

@@ -0,0 +1,35 @@
+import { LayoutProps, SpaceProps, color, layout, space } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { NewColorProps as ColorProps } from '../../utils/color-props.js'
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * @component
+ * @private
+ */
+const TableCell = styled.td<SpaceProps | ColorProps | LayoutProps>`
+  border-top: 1px solid ${({ theme }) => theme.colors.border};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+  font-size: ${({ theme }) => theme.fontSizes.default};
+  line-height: ${({ theme }) => theme.lineHeights.default};
+  word-break: break-word;
+  vertical-align: middle;
+  ${color}; 
+  ${space};
+  ${layout};
+
+  &.options {
+    text-align: right;
+  }
+`
+
+TableCell.defaultProps = {
+  p: 'lg',
+  color: 'text',
+  className: cssClass('TableCell'),
+}
+
+TableCell.displayName = 'TableCell'
+
+export default TableCell

package/src/atoms/table/table-head.tsx

@@ -0,0 +1,31 @@
+import { styled } from '@styled-components'
+
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * @component
+ * @private
+ */
+const TableHead = styled.thead`
+  background: rgba(0, 0, 0, 0.01);
+  
+  & td, & a {
+    color: ${({ theme }) => theme.colors.text};
+    font-size: ${({ theme }) => theme.fontSizes.sm};
+    font-weight: ${({ theme }) => theme.fontWeights.bold};
+    text-decoration: none;
+    white-space: nowrap;
+    
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`
+
+TableHead.defaultProps = {
+  className: cssClass('TableHead'),
+}
+
+TableHead.displayName = 'TableHead'
+
+export default TableHead

package/src/atoms/table/table-row.tsx

@@ -0,0 +1,26 @@
+import { rgba } from 'polished'
+import { styled } from '@styled-components'
+
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * @component
+ * @private
+ */
+const TableRow = styled.tr`
+  &.selected {
+    background: ${({ theme }) => rgba(theme.colors.primary100, 0.03)};
+  }
+
+  &:not(.selected):hover {
+    background: rgba(0, 0, 0, 0.01);
+  }
+`
+
+TableRow.defaultProps = {
+  className: cssClass('TableRow'),
+}
+
+TableRow.displayName = 'TableRow'
+
+export default TableRow