@clement_lores/admin-design-system 1.0.0

package/.babelrc.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+  "plugins": [
+    ["module-resolver", {
+      "cwd": "./build/",
+      "root": ["./src/"],
+      "alias": {
+        "@styled-components": "./utils/styled.js"
+      }
+    }],
+    ["replace-import-extension", { "extMapping": { ".jsx": ".js" }}],
+  ],
+  "presets": [
+    "@babel/preset-react",
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "18"
+      },
+      "loose": true,
+      "modules": false,
+    }],
+    "@babel/preset-typescript"
+  ]
+}

package/.eslintrc

@@ -0,0 +1,50 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": ["airbnb", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["*.json", "yarn.lock", "*.md", "types/*", "node_modules/*"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 20,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "semi": ["error", "never"],
+    "no-unused-vars": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-filename-extension": "off",
+    "react/require-default-props": "off",
+    "react/display-name": "off",
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "object-curly-newline": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "import/prefer-default-export": "off",
+    "react/function-component-definition": "off",
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": "warn"
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "react/prop-types": "off",
+        "react/jsx-props-no-spreading": "off"
+      }
+    },
+    {
+      "files": ["*stories.tsx"],
+      "rules": {
+        "import/no-extraneous-dependencies": "off"
+      }
+    }
+  ]
+}

package/.firebaserc

@@ -0,0 +1,17 @@
+{
+  "projects": {
+    "default": "adminjs-docs"
+  },
+  "targets": {
+    "adminjs-docs": {
+      "hosting": {
+        "adminjs-storybook": [
+          "adminjs-storybook"
+        ],
+        "adminjs-storybook-beta": [
+          "adminjs-storybook-beta"
+        ]
+      }
+    }
+  }
+}

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "es5"
+}

package/.releaserc

@@ -0,0 +1,36 @@
+{
+  "branches": [
+    "+([0-9])?(.{+([0-9]),x}).x",
+    "master",
+    "next",
+    {
+      "name": "beta-v4",
+      "prerelease": true
+    },
+    {
+      "name": "beta",
+      "prerelease": true
+    }
+  ],
+  "plugins": [
+    ["@semantic-release/commit-analyzer", {
+      "preset": "angular",
+      "releaseRules": [
+        {"type": "feat", "scope": "small", "release": "patch"},
+        {"type": "chore", "scope": "deps", "release": "patch"},
+        {"scope": "no-release", "release": false}
+      ]
+    }],
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    "@semantic-release/github",
+    "@semantic-release/git",
+    [
+      "semantic-release-slack-bot",
+      {
+        "notifyOnSuccess": true,
+        "notifyOnFail": false
+      }
+    ]
+  ]
+}

package/.storybook/main.mjs

@@ -0,0 +1,103 @@
+import path from 'path'
+
+import ResolveTypeScriptPlugin from 'resolve-typescript-plugin'
+import TypeScriptConfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  webpackFinal: (config) => {
+    if (!config.module) config.module = { rules: [] }
+    if (!config.module.rules) config.module.rules = []
+    if (!config.resolve) config.resolve = {}
+
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      use: 'ts-loader',
+    })
+
+    config.resolve.alias = {
+      atoms: path.resolve(__dirname, '../src/atoms/'),
+      hooks: path.resolve(__dirname, '../src/hooks/'),
+      molecules: path.resolve(__dirname, '../src/molecules/'),
+      organisms: path.resolve(__dirname, '../src/organisms/'),
+      templates: path.resolve(__dirname, '../src/templates/'),
+      utils: path.resolve(__dirname, '../src/utils/'),
+    }
+
+    config.resolve.extensions = ['.js', '.jsx', '.json']
+
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      /**
+       * See https://github.com/storybookjs/storybook/issues/15962
+       * and https://github.com/softwareventures/resolve-typescript-plugin
+       */
+      new ResolveTypeScriptPlugin(),
+      new TypeScriptConfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ]
+
+    return config
+  },
+  babel: () => ({
+    plugins: [
+      [
+        'styled-components',
+        { displayName: true },
+      ],
+      [
+        'module-resolver',
+        {
+          cwd: './build/',
+          root: ['./src/'],
+          alias: {
+            '@styled-components': './utils/styled.js',
+          },
+        },
+      ],
+    ],
+    presets: [
+      '@babel/preset-react',
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: '20',
+          },
+          loose: true,
+          modules: false,
+        },
+      ],
+      '@babel/preset-typescript',
+    ],
+  }),
+  core: {
+    disableTelemetry: true,
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+        jsx: 'preserve',
+      },
+    },
+  },
+  docs: {
+    autodocs: true,
+  },
+}
+
+export default config

package/.storybook/manager.mjs

@@ -0,0 +1,49 @@
+import { create } from '@storybook/theming'
+import { addons } from '@storybook/manager-api'
+
+export const theme = create({
+  base: 'light',
+
+  colorPrimary: '#3040D6',
+  colorSecondary: '#3040D6',
+
+  appBg: '#F4F8FC',
+  appContentBg: '#FFFFFF',
+  appBorderColor: '#D5D9E0',
+  appBorderRadius: 8,
+
+  fontBase: 'Roboto, sans-serif',
+  fontCode: 'monospace',
+
+  textColor: '#0B1C34',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  barTextColor: '#0B1C34',
+  barSelectedColor: '#3040D6',
+  barBg: '#FFFFFF',
+
+  inputBg: '#FFFFFF',
+  inputBorder: '#D5D9E0',
+  inputTextColor: '#0B1C34',
+  inputBorderRadius: 0,
+
+  brandTitle: 'AdminJS Design System',
+  brandUrl: 'https://adminjs.co/',
+  brandImage: 'https://demo.adminjs.co/app/frontend/assets/logo.svg',
+  brandTarget: '_blank',
+})
+
+addons.setConfig({
+  theme,
+})
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  enableShortcuts: true,
+  isToolshown: true,
+  theme,
+  initialActive: 'sidebar',
+})

package/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<script>
+  window.global = window;
+</script>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />

package/.storybook/preview.mjs

@@ -0,0 +1,53 @@
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+import ThemeDecorator from './theme-decorator.js'
+import { theme } from './manager.mjs'
+
+/** @type { import('@storybook/react').Preview['parameters'] } */
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  docs: {
+    source: {
+      language: 'tsx',
+      type: 'auto',
+    },
+    theme,
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    exclude: [/^on[A-Z].*/, /^aria\-.*/],
+    sort: 'requiredFirst',
+    expanded: true,
+    hideNoControlsWarning: true,
+  },
+  options: {
+    storySort: {
+      order: ['Default'],
+    },
+  },
+  dependencies: {
+    withStoriesOnly: true,
+    hideEmpty: true,
+  },
+  viewport: { viewports: MINIMAL_VIEWPORTS },
+}
+
+/** @type { import('@storybook/react').Preview['decorators'] } */
+export const decorators = [ThemeDecorator]
+
+/** @type { import('@storybook/react').Preview['globalTypes'] } */
+export const globalTypes = {
+  theme: {
+    title: 'Theme',
+    description: 'Theme for components',
+    defaultValue: 'default',
+    toolbar: {
+      icon: 'paintbrush',
+      dynamicTitle: true,
+      items: ['default', 'red', 'green', 'orange'],
+    },
+  },
+}

package/.storybook/theme-decorator.js

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react'
+import { ThemeProvider } from '@styled-components'
+
+import { Box } from '../build/atoms/box/box.js'
+import { GlobalStyle } from '../build/global.js'
+import * as theme from '../build/theme.js'
+
+const themes = {
+  default: { ...theme },
+  red: { ...theme, colors: { ...theme.colors, primary100: '#b71c1c' } },
+  green: { ...theme, colors: { ...theme.colors, primary100: '#1b5e20' } },
+  orange: { ...theme, colors: { ...theme.colors, primary100: '#f57f17' } },
+}
+
+const ThemeDecorator = (StoryFn, { globals: { theme: themeKey } }) => {
+  const selectedTheme = useMemo(() => themes[themeKey], [themeKey])
+  return (
+    <ThemeProvider theme={selectedTheme}>
+      <GlobalStyle />
+      <Box width={1}>
+        <StoryFn />
+      </Box>
+    </ThemeProvider>
+  )
+}
+
+export default ThemeDecorator

package/README.md

@@ -0,0 +1,132 @@
+# @adminjs/design-system
+
+This package consists of all DesignSystem components from [AdminJS](https://adminjs.co) so you can use all of them outside the `adminjs` core.
+
+It was created with the help of 2 amazing packages:
+
+- [styled-components](https://styled-components.com)
+- [styled-system](https://styled-stystem.com)
+
+Make sure to check them out to use the full potential of this design system.
+
+## Installation
+
+```sh
+yarn add @adminjs/design-system
+```
+
+Design System needs a `theme` so to use it you have to use `ThemeProvider` from `styled-components` like this:
+
+```tsx
+import { ThemeProvider } from 'styled-components'
+
+// theme is the default theme, which you can alter
+import { theme, Button, Box, Icon } from '@adminjs/design-system'
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <Box>
+      <Button>
+        <Icon icon="Plus" />
+        Click Me
+      </Button>
+      <Button variant="contained" ml="xl">
+        I am important
+      </Button>
+    </Box>
+  </ThemeProvider>
+)
+
+export default App
+```
+
+## Changing theme
+
+Design System provides you with the default [theme](https://adminjs.co/Theme.html). It contains all the parameters like paddings, colors, font sizes etc. For the list of all available parameters take a look at the [Theme spec](https://adminjs.co/Theme.html).
+
+But nothing stands in a way of you changing the default theme. To do that you can use `combineStyles` method:
+
+```tsx
+import { combineStyles } from '@adminjs/design-system`
+
+const myTheme = combineStyles({
+  colors: {
+    primary100: '#000'
+  }
+})
+
+// ...
+<ThemeProvider theme={myTheme}>
+```
+
+## Changing particular components
+
+Sometimes you might want to change the look and feel of a particular component - not the entire theme. You can achieve that with `styled` method provided by `@adminjs/design-system/styled-components`:
+
+```tsx
+import { Button } from '@adminjs/design-system'
+import { styled } from '@adminjs/design-system/styled-components'
+
+const MyRoundedButton = styled(Button)`
+  border-radius: 100px;
+`
+```
+
+and then you can use it like a normal button component:
+
+```html
+<MyRoundedButton variant="outlined" color="primary"> Rounded I am </MyRoundedButton>
+```
+
+## Components
+
+For the list of all the components and their documentation go to [adminjs.co](https://adminjs.co) or visit our [Storybook](https://adminjs-storybook.web.app/).
+
+## Bundled packages
+
+This npm package comes with bundled versions as well. You can find them under:
+
+- `node_modules/@adminjd/design-system/bundle.development.js`
+- `node_modules/@adminjs/design-system/bundle.production.js` (minified)
+
+(they can also be bundled by using `bundle` script: `yarn bundle` or `NODE_ENV=production yarn bundle`)
+
+To use them you will have to host them (put them in your 'public' folder) and then put them into the HEAD of your page:
+
+```html
+<head>
+  <!-- ... -->
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script
+    crossorigin
+    src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.js"
+  ></script>
+  <script crossorigin src="/bundle.development.js"></script>
+  <!-- ... -->
+</head>
+```
+
+## Contribute
+
+If you find any UI errors - feel free to create a PR.
+
+## Storybook
+
+This repository contains also stories of components, which you can also find on our [Storybook](https://adminjs-storybook.web.app/) page. To run the storybook locally just run:
+
+```sh
+yarn storybook
+```
+
+## License
+
+AdminJS is copyrighted © 2023 rst.software. It is a free software, and may be redistributed under the terms specified in the [LICENSE](LICENSE.md) file.
+
+## About rst.software
+
+<img src="https://pbs.twimg.com/profile_images/1367119173604810752/dKVlj1YY_400x400.jpg" width=150>
+
+We’re an open, friendly team that helps clients from all over the world to transform their businesses and create astonishing products.
+
+- We are available for [hire](https://www.rst.software/estimate-your-project).
+- If you want to work for us - check out the [career page](https://www.rst.software/join-us).

package/build/atoms/avatar/avatar.js

@@ -0,0 +1,44 @@
+import { space } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+export const Avatar = styled.div`
+  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/build/atoms/avatar/avatar.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Avatar from "./avatar.js";
+export const Default = {};
+export const WithLetter = {
+  render: ({
+    alt
+  }) => /*#__PURE__*/React.createElement(Avatar, {
+    alt: alt
+  }, alt.split(' ').map(w => w.charAt(0)).join(''))
+};
+const meta = {
+  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/build/atoms/avatar/index.js

@@ -0,0 +1 @@
+export * from "./avatar.js";

package/build/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'
+```
+

package/build/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>
+)
+```