@clement_lores/admin-design-system 1.0.0

package/build/utils/portal-utils.js

@@ -0,0 +1,31 @@
+/* eslint-disable arrow-body-style */
+import React, { 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 => {
+    window.document.body.appendChild(element);
+  },
+  removeElement: id => {
+    const domElement = window.document.getElementById(id);
+    domElement?.remove();
+  },
+  createPortalForKey: function createPortalForKey(idKey, Component) {
+    const Portal = props => {
+      const [id] = useState(generateId(idKey));
+      const [portalElement] = useState(window.document.createElement('div'));
+      useEffect(() => {
+        portalElement.id = id;
+        PortalUtils.appendElement(portalElement);
+        return () => {
+          PortalUtils.removeElement(id);
+        };
+      });
+      return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(Component, props), portalElement);
+    };
+    return Portal;
+  }
+};
+export default PortalUtils;

package/build/utils/reset.styles.js

@@ -0,0 +1,94 @@
+/* cSpell:disable */
+import { css, createGlobalStyle } from "../../build/utils/styled.js";
+
+/**
+ * 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 = 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/build/utils/select-styles.js

@@ -0,0 +1,47 @@
+const selectStyles = theme => ({
+  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 => ({
+  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/build/utils/story-wrapper.js

@@ -0,0 +1,22 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Box, Label } from "../index.js";
+const StoryWrapper = props => {
+  const {
+    label,
+    children,
+    gap = 16,
+    ...other
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    variant: "grey"
+  }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(Box, _extends({
+    bg: "white",
+    p: "xxl",
+    width: 1,
+    style: {
+      gap
+    }
+  }, other), children));
+};
+export default StoryWrapper;

package/build/utils/styled.js

@@ -0,0 +1,6 @@
+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/build/utils/theme-get.js

@@ -0,0 +1,51 @@
+import { getValueAndUnit } from 'polished';
+export function themeGet(kind, value, offset) {
+  return ({
+    theme
+  }) => {
+    const themeVal = value ? theme[kind][value] : theme[kind];
+    if (themeVal && offset) {
+      let offsetValue;
+      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/commitlint.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    '@commitlint/config-conventional',
+  ],
+}

package/config/rollup.js

@@ -0,0 +1,70 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import { minify } from 'rollup-plugin-esbuild-minify'
+import replace from '@rollup/plugin-replace'
+import presetEnv from '@babel/preset-env'
+import presetReact from '@babel/preset-react'
+import presetTs from '@babel/preset-typescript'
+
+const extensions = ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx']
+
+const plugins = [
+  resolve({ extensions }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+    'process.env.IS_BROWSER': 'true',
+    preventAssignment: true,
+  }),
+  commonjs(),
+  babel({
+    extensions,
+    babelrc: false,
+    babelHelpers: 'bundled',
+    presets: [
+      [presetEnv, {
+        targets: {
+          node: '18',
+        },
+        loose: true,
+        modules: false,
+      }],
+      presetReact,
+      presetTs,
+    ],
+  }),
+  ...(process.env.NODE_ENV === 'production' ? [minify()] : []),
+]
+
+export default {
+  input: 'entry.js',
+  plugins,
+  external: [
+    'react',
+    '@adminjs/design-system/styled-components',
+    'react-dom',
+    'react-router',
+    'react-router-dom',
+    'react-feather',
+  ],
+  output: {
+    file: process.env.NODE_ENV === 'production' ? 'bundle.production.js' : 'bundle.development.js',
+    sourcemap: process.env.NODE_ENV === 'production' ? false : 'inline',
+    name: 'AdminJSDesignSystem',
+    format: 'iife',
+    interop: 'auto',
+    inlineDynamicImports: true,
+    globals: {
+      react: 'React',
+      '@adminjs/design-system/styled-components': 'styled',
+      'react-dom': 'ReactDOM',
+      'react-router': 'ReactRouter',
+      'react-router-dom': 'ReactRouterDOM',
+      'react-feather': 'FeatherIcons',
+      'react-select': 'ReactSelect',
+      'react-select/async': 'ReactSelectAsync',
+      'react-select/creatable': 'ReactSelectCreatable',
+    },
+  },
+}

package/entry.js

@@ -0,0 +1,11 @@
+import ReactDatepicker from 'react-datepicker'
+import * as FeatherIcons from 'react-feather'
+
+import * as AdminJSDesignSystem from './build/index.js'
+import * as styled from './build/utils/styled.js'
+
+window.styled = window.styled || styled
+window.ReactDatepicker = window.ReactDatepicker || ReactDatepicker.default || ReactDatepicker
+window.FeatherIcons = window.FeatherIcons || FeatherIcons
+
+export default AdminJSDesignSystem

package/firebase.json

@@ -0,0 +1,17 @@
+{
+  "hosting": {
+    "public": "storybook-static",
+    "target": "adminjs-storybook",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,171 @@
+{
+  "name": "@clement_lores/admin-design-system",
+  "version": "1.0.0",
+  "description": "DesignSystem which AdminJS is built with",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "types": "./types/src/index.d.ts",
+      "require": "./build/index.js"
+    },
+    "./styled-components": {
+      "import": "./build/utils/styled.js",
+      "types": "./types/src/utils/styled.d.ts"
+    }
+  },
+  "repository": "git@github.com:loresclement/adminjs-design-system.git",
+  "author": "Clément LORES",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "release": "semantic-release",
+    "build": "babel src --out-dir build --copy-files --no-copy-ignored --extensions '.ts,.js,.jsx,.tsx'",
+    "types": "tsc",
+    "clean": "rm -fR types && rm -fR build",
+    "lint": "eslint './src/**/*' './vendor-types/**/*'",
+    "check:all": "yarn build && yarn lint",
+    "bundle": "rollup --config ./config/rollup.js",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:deploy": "firebase deploy --only hosting",
+    "dev": "yarn build && yarn types && yarn bundle",
+    "prepare": "husky install && ts-patch install -s"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "browserslist": [
+    "last 5 Chrome versions"
+  ],
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@commitlint/cli": "^17.5.0",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-storysource": "^7.6.3",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/manager-api": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/source-loader": "^7.6.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.3",
+    "@types/hoist-non-react-statics": "^3.3.7",
+    "@types/react": "^18.0.15",
+    "@types/react-datepicker": "^4.10.0",
+    "@types/react-text-mask": "^5.4.14",
+    "@types/styled-components": "^5.1.36",
+    "@types/styled-system": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "babel-plugin-module-resolver": "^5.0.3",
+    "babel-plugin-replace-import-extension": "^1.1.5",
+    "babel-plugin-styled-components": "^2.3.0",
+    "eslint": "^8.36.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "husky": "^9.1.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "resolve-typescript-plugin": "^2.0.1",
+    "rollup": "^4.62.0",
+    "rollup-plugin-esbuild-minify": "^1.3.0",
+    "semantic-release": "^25.0.5",
+    "semantic-release-slack-bot": "^4.0.2",
+    "source-map-loader": "^4.0.1",
+    "storybook": "^7.6.3",
+    "ts-loader": "^9.6.1",
+    "ts-patch": "^3.1.2",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.0.2",
+    "typescript-transform-paths": "^3.4.7"
+  },
+  "dependencies": {
+    "@hypnosphi/create-react-context": "^0.3.1",
+    "@tinymce/tinymce-react": "^6.3.0",
+    "@tiptap/core": "2.1.13",
+    "@tiptap/extension-bubble-menu": "2.1.13",
+    "@tiptap/extension-character-count": "2.1.13",
+    "@tiptap/extension-code": "2.1.13",
+    "@tiptap/extension-document": "2.1.13",
+    "@tiptap/extension-floating-menu": "2.1.13",
+    "@tiptap/extension-heading": "2.1.13",
+    "@tiptap/extension-image": "2.1.13",
+    "@tiptap/extension-link": "2.1.13",
+    "@tiptap/extension-table": "2.1.13",
+    "@tiptap/extension-table-cell": "2.1.13",
+    "@tiptap/extension-table-header": "2.1.13",
+    "@tiptap/extension-table-row": "2.1.13",
+    "@tiptap/extension-text": "2.1.13",
+    "@tiptap/extension-text-align": "2.1.13",
+    "@tiptap/extension-typography": "2.1.13",
+    "@tiptap/pm": "2.1.13",
+    "@tiptap/react": "2.1.13",
+    "@tiptap/starter-kit": "2.1.13",
+    "date-fns": "^4.4.0",
+    "flat": "^6.0.1",
+    "hoist-non-react-statics": "3.3.2",
+    "jw-paginate": "^1.0.4",
+    "lodash": "^4.18.1",
+    "polished": "^4.3.1",
+    "react-currency-input-field": "^3.6.10",
+    "react-datepicker": "^4.10.0",
+    "react-feather": "^2.0.10",
+    "react-phone-input-2": "^2.15.1",
+    "react-select": "^5.10.2",
+    "react-text-mask": "^5.5.0",
+    "styled-components": "5.3.9",
+    "styled-system": "^5.1.5",
+    "text-mask-addons": "^3.8.0",
+    "tinymce": "^8.6.0"
+  },
+  "resolutions": {
+    "@emotion/react": "11.10.6",
+    "@tiptap/core": "2.1.13",
+    "@tiptap/extension-bubble-menu": "2.1.13",
+    "@tiptap/extension-character-count": "2.1.13",
+    "@tiptap/extension-code": "2.1.13",
+    "@tiptap/extension-document": "2.1.13",
+    "@tiptap/extension-floating-menu": "2.1.13",
+    "@tiptap/extension-heading": "2.1.13",
+    "@tiptap/extension-image": "2.1.13",
+    "@tiptap/extension-link": "2.1.13",
+    "@tiptap/extension-table": "2.1.13",
+    "@tiptap/extension-table-cell": "2.1.13",
+    "@tiptap/extension-table-header": "2.1.13",
+    "@tiptap/extension-table-row": "2.1.13",
+    "@tiptap/extension-text": "2.1.13",
+    "@tiptap/extension-text-align": "2.1.13",
+    "@tiptap/extension-typography": "2.1.13",
+    "@tiptap/pm": "2.1.13",
+    "@tiptap/react": "2.1.13",
+    "@tiptap/starter-kit": "2.1.13",
+    "hoist-non-react-statics": "3.3.2",
+    "styled-components": "5.3.9"
+  }
+}

package/src/atoms/avatar/avatar.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import Avatar from './avatar.jsx'
+
+export const Default: StoryObj<typeof Avatar> = {}
+
+export const WithLetter: StoryObj<typeof Avatar> = {
+  render: ({ alt }) => (
+    <Avatar alt={alt}>
+      {alt
+        .split(' ')
+        .map((w) => w.charAt(0))
+        .join('')}
+    </Avatar>
+  ),
+}
+
+const meta: Meta<typeof Avatar> = {
+  title: 'DesignSystem/Atoms/Avatar',
+  component: Avatar,
+  args: {
+    src: 'https://images.unsplash.com/photo-1612144431180-2d672779556c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+    alt: 'Bubble Avatar',
+  },
+}
+
+export default meta

package/src/atoms/avatar/avatar.tsx

@@ -0,0 +1,44 @@
+import { MarginProps, space } from 'styled-system'
+import { styled } from '@styled-components'
+
+export type AvatarProps = MarginProps & {
+  alt?: string
+  src?: string
+}
+
+export const Avatar = styled.div<AvatarProps>`
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  overflow: hidden;
+  font-size: ${({ theme }) => theme.space.lg};
+  user-select: none;
+
+  &:before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: transparent;
+    background-image: url('${({ src }) => src}');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  background-color: ${({ theme }) => theme.colors.primary100};
+  color: ${({ theme }) => theme.colors.white};
+
+  ${space}
+`
+
+Avatar.displayName = 'Avatar'
+
+export default Avatar

package/src/atoms/avatar/index.ts

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

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

@@ -0,0 +1,10 @@
+Prop Types of a {@link Badge} component.
+Apart from those defined below it extends all {@link ColorProps}, {@link SpaceProps}
+and {@link TypographyProps}
+
+### Usage
+
+```typescript
+import { BadgeProps } from '@adminjs/design-system'
+```
+