@clement_lores/admin-design-system 1.0.0

package/build/atoms/placeholder/placeholder.js

@@ -0,0 +1,110 @@
+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); }
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import { layout } from 'styled-system';
+import { darken } from 'polished';
+import { styled, keyframes } from "../../../build/utils/styled.js";
+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`
+  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}
+ */
+
+/**
+ * @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 = ({
+  as: htmlAs,
+  ref,
+  ...other
+}) => /*#__PURE__*/React.createElement(StyledPlaceholder, _extends({
+  as: htmlAs
+}, other, {
+  className: cssClass('Placeholder')
+}));
+Placeholder.displayName = 'Placeholder';
+export { Placeholder };
+export default Placeholder;

package/build/atoms/placeholder/placeholder.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Box, Label } from "../index.js";
+import { Placeholder } from "./index.js";
+export const Default = {};
+export const textPlaceholder = () => /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, null, "Some name"), /*#__PURE__*/React.createElement(Placeholder, {
+  width: 400,
+  height: 14
+}));
+const meta = {
+  title: 'DesignSystem/Atoms/Placeholder',
+  component: Placeholder,
+  args: {
+    width: 200,
+    height: 200
+  }
+};
+export default meta;

package/build/atoms/radio/index.js

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

package/build/atoms/radio/radio.js

@@ -0,0 +1,146 @@
+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, { useState } from 'react';
+import { styled } from "../../../build/utils/styled.js";
+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;
+`;
+const radioBackground = (theme, checked, disabled) => {
+  if (checked) {
+    return disabled ? theme.colors.grey40 : theme.colors.primary100;
+  }
+  return theme.colors.white;
+};
+const StyledRadio = styled.span`
+  display: inline-block;
+  width: 16px;
+  cursor: pointer;
+  border: 1px solid ${({
+  theme,
+  checked,
+  disabled
+}) => 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
+}) => checked ? 'visible' : 'hidden'};
+  }
+
+  background: ${({
+  checked,
+  theme,
+  disabled
+}) => radioBackground(theme, checked, disabled)};
+`;
+/**
+ * @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 = props => {
+  const {
+    className,
+    checked,
+    onChange,
+    disabled,
+    ...restProps
+  } = props;
+  const [isChecked, setChecked] = useState(checked ?? false);
+  const actuallyChecked = checked ?? isChecked;
+  const handleChange = event => {
+    setChecked(!event.target.checked);
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(CheckboxRadioContainer, {
+    className: className
+  }, /*#__PURE__*/React.createElement(HiddenRadio, _extends({
+    checked: actuallyChecked,
+    onChange: handleChange
+    // eslint-disable-next-line @typescript-eslint/ban-types
+  }, restProps, {
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(StyledRadio, {
+    checked: actuallyChecked,
+    onClick: event => handleChange && handleChange(event),
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Circle, null)));
+};
+Radio.displayName = 'Radio';
+export { Radio };
+export default Radio;

package/build/atoms/radio/radio.stories.js

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

package/build/atoms/section/index.js

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

package/build/atoms/section/section.js

@@ -0,0 +1,45 @@
+/* eslint-disable import/prefer-default-export */
+import { styled } from "../../../build/utils/styled.js";
+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(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/build/atoms/section/section.stories.js

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

package/build/atoms/table/index.js

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

package/build/atoms/table/table-body.js

@@ -0,0 +1,15 @@
+import { styled } from "../../../build/utils/styled.js";
+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/build/atoms/table/table-caption.js

@@ -0,0 +1,39 @@
+import { styled } from "../../../build/utils/styled.js";
+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/build/atoms/table/table-cell.js

@@ -0,0 +1,38 @@
+import { color, layout, space } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+
+/**
+ * @component
+ * @private
+ */
+const TableCell = styled.td`
+  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/build/atoms/table/table-head.js

@@ -0,0 +1,33 @@
+import { styled } from "../../../build/utils/styled.js";
+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/build/atoms/table/table-row.js

@@ -0,0 +1,24 @@
+import { rgba } from 'polished';
+import { styled } from "../../../build/utils/styled.js";
+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;

package/build/atoms/table/table.js

@@ -0,0 +1,114 @@
+import { layout } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+
+/**
+ * @classdesc
+ *
+ * <img src="components/table.png" />
+ *
+ * Main Table wrapper. Along with _TableRow_, _TableCell_, _TableCaption_,
+ * _TableHead_ and _TableBody_ gives you the powerful tool for building tables.
+ *
+ * ### Related Components
+ *
+ * - _Table_: {@link LayoutProps} & standard table html props
+ * - _TableBody_: standard tbody html props
+ * - _TableCell_: {@link SpaceProps} & {@link ColorProps} & standard td html props
+ * - _TableHead_: standard thead html props
+ * - _TableRow_:  standard tr html props
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import {
+ *   Table,
+ *   TableRow,
+ *   TableCell,
+ *   TableCaption,
+ *   TableHead,
+ *   TableBody,
+ * } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @hideconstructor
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-table--default Storybook}
+ * @example
+ * return (
+ * <Box pt="x4">
+ * <Table>
+ *   <TableCaption>
+ *     <Text as="span">Monthly savings</Text>
+ *     <Button variant="text" size="sm">
+ *       <Icon icon="Trash" />
+ *       Remove
+ *     </Button>
+ *   </TableCaption>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCell><CheckBox /></TableCell>
+ *       <TableCell>
+ *         <Link href="#">
+ *           Name
+ *           <Icon icon="ChevronUp" />
+ *         </Link>
+ *       </TableCell>
+ *       <TableCell>
+ *         <Link href="#">
+ *           Last
+ *           <Icon icon="ChevronDown" />
+ *         </Link>
+ *       </TableCell>
+ *       <TableCell>Surname</TableCell>
+ *       <TableCell>Gender</TableCell>
+ *       <TableCell>Age</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell><CheckBox /></TableCell>
+ *       <TableCell>Value 1</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell><CheckBox /></TableCell>
+ *       <TableCell>Value 1</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * </Box>
+ * )
+ * @section design-system
+ */
+const Table = styled.table`
+  position: relative;
+  font-family: ${({
+  theme
+}) => theme.font};
+  color: ${({
+  theme
+}) => theme.colors.text};
+  border-left: 1px solid ${({
+  theme
+}) => theme.colors.border};
+  border-right: 1px solid ${({
+  theme
+}) => theme.colors.border};
+
+  ${layout};
+`;
+Table.displayName = 'Table';
+Table.defaultProps = {
+  width: 1,
+  className: cssClass('Table')
+};
+export default Table;