@clement_lores/admin-design-system 1.0.0

package/src/utils/portal-utils.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable arrow-body-style */
+import React, { FC, useEffect, useState } from 'react'
+import ReactDOM from 'react-dom'
+
+import generateId from './generate-id.js'
+
+// TODO: handle iframe case with ref.current.ownerDocument
+export const PortalUtils = {
+  appendElement: (element: HTMLDivElement): void => {
+    window.document.body.appendChild(element)
+  },
+
+  removeElement: (id: string): void => {
+    const domElement = window.document.getElementById(id)
+    domElement?.remove()
+  },
+
+  createPortalForKey: function createPortalForKey<Props>(
+    idKey: string,
+    Component: FC<Props>,
+  ): FC<Props & JSX.IntrinsicAttributes> {
+    const Portal: FC<Props & JSX.IntrinsicAttributes> = (props) => {
+      const [id] = useState(generateId(idKey))
+      const [portalElement] = useState<HTMLDivElement>(window.document.createElement('div'))
+
+      useEffect(() => {
+        portalElement.id = id
+        PortalUtils.appendElement(portalElement)
+
+        return () => {
+          PortalUtils.removeElement(id)
+        }
+      })
+
+      return ReactDOM.createPortal(
+        (
+          <Component {...props} />
+        ), portalElement,
+      )
+    }
+    return Portal
+  },
+}
+
+export default PortalUtils

package/src/utils/reset.styles.ts

@@ -0,0 +1,98 @@
+/* cSpell:disable */
+import { css, createGlobalStyle } from '@styled-components'
+
+/**
+ * Resets css styles which can be applied to element created by styled-component
+ *
+ * ### Example
+ *
+ * ```javascript
+ * import { reset } from '@adminjs/design-system'
+ *
+ * const myContentComponent = styled`
+ *   ${reset};
+ * `
+ * ```
+ * @new in version 3.3
+ * @memberof module:@adminjs/design-system
+ */
+const reset: ReturnType<typeof css> = css`
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+    display: none;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+`
+
+/* cSpell:enable */
+
+/**
+ * Resets css component which should be applied to the top of the html
+ *
+ * ### Example
+ *
+ * ```jsx
+ * import { Reset } from '@adminjs/design-system'
+ *
+ * <ThemeProvider theme={theme}>
+ *   <Reset />
+ *   <Box>
+ *     { ... }
+ *   </Box>
+ * </ThemeProvider>
+ * ```
+ * @new in version 3.3
+ * @memberof module:@adminjs/design-system
+ */
+const Reset = createGlobalStyle`${reset}`
+
+export {
+  Reset,
+  reset,
+}

package/src/utils/select-styles.ts

@@ -0,0 +1,52 @@
+import type { Props } from 'react-select'
+import type { DefaultTheme } from '@styled-components'
+
+const selectStyles = (theme: DefaultTheme): Props['styles'] => ({
+  control: (baseStyles) => ({
+    ...baseStyles,
+    boxShadow: 'none',
+    background: 'transparent',
+    borderColor: theme.colors.inputBorder,
+  }),
+  input: (baseStyles) => ({
+    ...baseStyles,
+    color: theme.colors.grey100,
+  }),
+  singleValue: (baseStyles) => ({
+    ...baseStyles,
+    color: theme.colors.grey100,
+  }),
+  menu: (baseStyles) => ({
+    ...baseStyles,
+    boxShadow: 'none',
+    background: theme.colors.container,
+    border: theme.borders.input,
+    zIndex: 100,
+  }),
+})
+
+const filterStyles = (theme: DefaultTheme): Props['styles'] => ({
+  control: (provided) => ({
+    ...provided,
+    boxShadow: 'none',
+    background: 'transparent',
+    borderColor: theme.colors.inputBorder,
+  }),
+  input: () => ({
+    color: theme.colors.grey100,
+    gridArea: '1/1/2/3',
+    gridTemplateColumns: '0px min-content',
+  }),
+  singleValue: () => ({
+    color: theme.colors.grey100,
+    gridArea: '1/1/2/3',
+  }),
+  menu: (provided) => ({
+    ...provided,
+    borderColor: theme.colors.border,
+    background: theme.colors.filterBg,
+    zIndex: 5,
+  }),
+})
+
+export { filterStyles, selectStyles }

package/src/utils/story-wrapper.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { Box, BoxProps, Label } from '../index.js'
+
+export type StoryWrapperProps = BoxProps & {
+  label: string
+  children?: React.ReactNode,
+  gap?: number
+}
+
+const StoryWrapper: React.FC<StoryWrapperProps> = (props) => {
+  const { label, children, gap = 16, ...other } = props
+  return (
+    <Box variant="grey">
+      <Label>{label}</Label>
+      <Box bg="white" p="xxl" width={1} style={{ gap }} {...other}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+export default StoryWrapper

package/src/utils/styled.ts

@@ -0,0 +1,7 @@
+import _styled from 'styled-components'
+
+const styled = typeof _styled === 'function' ? _styled : _styled.default
+
+// eslint-disable-next-line no-restricted-exports
+export { styled as default, styled }
+export * from 'styled-components'

package/src/utils/theme-get.ts

@@ -0,0 +1,57 @@
+import { getValueAndUnit } from 'polished'
+
+export function themeGet(
+  kind: string,
+  value?: string | number,
+  offset?: number | string,
+): any {
+  return ({ theme }) => {
+    const themeVal = value ? theme[kind][value] : theme[kind]
+
+    if (themeVal && offset) {
+      let offsetValue: number
+      if (typeof offset === 'string') {
+        ([offsetValue] = getValueAndUnit(offset))
+      } else {
+        offsetValue = offset
+      }
+      const [pxValue, unit] = getValueAndUnit(themeVal)
+      return `${pxValue + offsetValue}${unit}`
+    }
+
+    return themeVal
+  }
+}
+
+export default themeGet
+
+/**
+ *
+ * Handy utility function which simplifies taking values from the {@link Theme}.
+ *
+ * ### Example
+ *
+ * ```javascript
+ * import { Box, themeGet } from '@adminjs/design-system'
+ *
+ * const myComponent = styled(Box)`
+ *   padding: ${themeGet('space', 'xl')};
+ *   font: ${themeGet('font')};
+ *   margin-top: ${themeGet('space', 'xl', -2)};
+ *
+ *   margin-bottom: ${(props) => themeGet('space', props.disabled ? 'xl' : 'xxl')(props)};
+ * `
+ *
+ * ```
+ *
+ * @param {string} kind           One of the keys in the {@link Theme} interface. For example:
+ *                                `fontWeights`
+ * @param {string} [value]        Value for the key
+ * @param {string | number} [offset]    optional offset. When you want to take xxl + 2pixels
+ *                                you can do this by passing +2 as the offset.
+ * @return {ThemeFunction}  function taking props as an argument
+ *
+ * @new in version 3.3
+ * @function themeGet
+ * @memberof Theme
+ */

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "outDir": "./build-sb",
+    "target": "esnext",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "declaration": true,
+    "declarationDir": "./types",
+    "emitDeclarationOnly": false,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "noImplicitThis": true,
+    "skipLibCheck": true,
+    "moduleResolution": "nodenext",
+    "module": "nodenext",
+    "typeRoots": ["./vendor-types"],
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "paths": {
+      "@styled-components": ["src/utils/styled.js"]
+    },
+    "plugins": [
+      { "transform": "typescript-transform-paths", "afterDeclarations": true }
+    ]
+  },
+  "include": [
+    "./src/**/*",
+    "./spec/**/*"
+  ],
+  "exclude": [
+    "./src/**/*.spec.*"
+  ]
+}

package/types/src/atoms/avatar/avatar.d.ts

@@ -0,0 +1,10 @@
+import { MarginProps } from 'styled-system';
+export type AvatarProps = MarginProps & {
+    alt?: string;
+    src?: string;
+};
+export declare const Avatar: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    alt?: string | undefined;
+    src?: string | undefined;
+}, never>;
+export default Avatar;

package/types/src/atoms/avatar/avatar.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Avatar from './avatar.jsx';
+export declare const Default: StoryObj<typeof Avatar>;
+export declare const WithLetter: StoryObj<typeof Avatar>;
+declare const meta: Meta<typeof Avatar>;
+export default meta;

package/types/src/atoms/avatar/index.d.ts

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

package/types/src/atoms/badge/badge.d.ts

@@ -0,0 +1,51 @@
+import { SpaceProps, TypographyProps } from 'styled-system';
+import { VariantType } from '../../theme.js';
+import { NewColorProps as ColorProps } from '../../utils/color-props.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';
+};
+/**
+ * @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
+ */
+declare const Badge: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & {
+    /**
+     * Color variant
+     */
+    variant?: VariantType | undefined;
+    /**
+     * Outline version
+     */
+    outline?: boolean | undefined;
+    /**
+     * Size variant
+     */
+    size?: "default" | "sm" | "lg" | undefined;
+}, never>;
+export { Badge };
+export default Badge;

package/types/src/atoms/badge/badge.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Badge } from './index.js';
+export declare const Default: StoryObj<typeof Badge>;
+export declare const Examples: StoryFn;
+declare const meta: Meta<typeof Badge>;
+export default meta;

package/types/src/atoms/badge/index.d.ts

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

package/types/src/atoms/box/box.d.ts

@@ -0,0 +1,47 @@
+import { PropsWithChildren } from 'react';
+import { SpaceProps, LayoutProps, FlexboxProps, BorderProps, PositionProps, ShadowProps, BorderRadiusProps } from 'styled-system';
+import { NewColorProps as ColorProps } from '../../utils/color-props.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;
+};
+/**
+ * @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}
+ */
+declare const Box: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    /** If box should be rendered as flex. You can pass boolean or FlexboxProps['flex'] */
+    flex?: FlexboxFlexProp;
+    /** Box variants */
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    /** If set to true it makes css changes as 500ms transitions */
+    animate?: boolean | undefined;
+    /** Optional class name passed down to the wrapper */
+    className?: string | undefined;
+}, never>;
+export { Box };
+export default Box;

package/types/src/atoms/box/box.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Box } from './index.js';
+export declare const Default: StoryObj;
+export declare const simpleWhiteGrayWrapper: StoryFn;
+export declare const positioningButtons: StoryFn;
+declare const meta: Meta<typeof Box>;
+export default meta;

package/types/src/atoms/box/index.d.ts

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

package/types/src/atoms/button/button-css.d.ts

@@ -0,0 +1,18 @@
+import { css } from "../../utils/styled";
+/**
+ * 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 declare const ButtonCSS: ReturnType<typeof css>;
+export default ButtonCSS;

package/types/src/atoms/button/button-props.d.ts

@@ -0,0 +1,38 @@
+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/types/src/atoms/button/button.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * @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
+ */
+declare const Button: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    className: string;
+} & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    variant?: "text" | import("../../theme.js").VariantType | "contained" | "outlined" | undefined;
+    color?: "text" | "success" | "info" | "warning" | "primary" | "secondary" | "danger" | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "md" | undefined;
+    rounded?: boolean | undefined;
+    label?: string | undefined;
+} & {
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+}, "className">;
+export { Button };
+export default Button;

package/types/src/atoms/button/button.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Button } from './index.js';
+export declare const Default: StoryObj;
+export declare const Examples: StoryFn;
+declare const meta: Meta<typeof Button>;
+export default meta;

package/types/src/atoms/button/index.d.ts

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

package/types/src/atoms/check-box/check-box.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export declare const CheckboxRadioContainer: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {}, never>;
+export type CheckBoxProps = React.HTMLProps<HTMLInputElement>;
+/**
+ * @typedef {object} CheckBoxProps
+ * @alias CheckBoxProps
+ * @memberof module:@adminjs/design-system.CheckBox
+ * @property {string} [...] All props default to _checkbox_ html input like `onChange`,
+ *                          `checked` etc.
+ */
+/**
+ * @classdesc
+ *
+ * <img src="components/checkbox.png" />
+ *
+ * HTML CheckBox
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { CheckBox, CheckBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-checkbox--default StoryBook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <CheckBox id="checkbox1"/>
+ *      <Label inline htmlFor="checkbox1" ml="default">Some example label</Label>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const CheckBox: React.FC<CheckBoxProps>;
+export { CheckBox };
+export default CheckBox;

package/types/src/atoms/check-box/check-box.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { CheckBox } from './index.js';
+export declare const Default: StoryObj;
+export declare const AllStates: StoryFn;
+declare const meta: Meta<typeof CheckBox>;
+export default meta;

package/types/src/atoms/check-box/index.d.ts

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