@clement_lores/admin-design-system 1.0.0

package/build/atoms/table/table.stories.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Button, CheckBox, Icon, Link, Text } from "../index.js";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableRow } from "./index.js";
+export const Default = {
+  render: ({
+    onClick
+  }) => {
+    const handleClick = event => {
+      event.preventDefault();
+      onClick(event);
+    };
+    const header = ['Name', 'Surname', 'Gender', 'Age'];
+    const data = [['John', 'Doe', 'Male', '57'], ['Joanna', 'K', 'Female', '32'], ['Patrick', 'Jogs', 'Male', '35'], ['Elisabeth', 'Briggs', 'Female', '28'], ['Jda', 'Karo', 'Female', '22']];
+    return /*#__PURE__*/React.createElement(StoryWrapper, {
+      label: ""
+    }, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, /*#__PURE__*/React.createElement(Text, {
+      as: "span"
+    }, "Selected items "), /*#__PURE__*/React.createElement(Button, {
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "Trash"
+    }), "Remove")), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, null, /*#__PURE__*/React.createElement(CheckBox, null)), header.map((head, i) => /*#__PURE__*/React.createElement(TableCell, {
+      key: head,
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: "/"
+    }, head, i === 0 && /*#__PURE__*/React.createElement(Icon, {
+      icon: "ChevronUp"
+    })))))), /*#__PURE__*/React.createElement(TableBody, null, data.map(row => /*#__PURE__*/React.createElement(TableRow, {
+      key: row[0]
+    }, /*#__PURE__*/React.createElement(TableCell, null, /*#__PURE__*/React.createElement(CheckBox, null)), row.map(item => /*#__PURE__*/React.createElement(TableCell, {
+      key: item
+    }, item)))))));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Atoms/Table',
+  component: Table,
+  argTypes: {
+    onClick: {
+      action: 'clicked'
+    }
+  }
+};
+export default meta;

package/build/atoms/tabs/index.js

@@ -0,0 +1,2 @@
+export * from "./tab.js";
+export * from "./tabs.js";

package/build/atoms/tabs/tab.js

@@ -0,0 +1,29 @@
+import React, { useLayoutEffect } from 'react';
+import { useTabs } from "./tabs.js";
+/**
+ * Renders children inside Tabs component. Each Tab will add a single tab in
+ * the navigation bar.
+ */
+export const Tab = ({
+  id,
+  label,
+  children
+}) => {
+  const {
+    currentTab,
+    registerTab,
+    unregisterTab
+  } = useTabs();
+  useLayoutEffect(() => {
+    registerTab(id, label);
+    return () => unregisterTab(id);
+  });
+  if (id !== currentTab) {
+    return null;
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+Tab.displayName = 'Tab';
+export default Tab;

package/build/atoms/tabs/tabs.js

@@ -0,0 +1,118 @@
+import React, { createContext, useCallback, useState, useMemo, useContext } from 'react';
+import { styled, css } from "../../../build/utils/styled.js";
+import assert from "../../utils/assert.js";
+const StyledButton = styled.button`
+  background: none;
+  border: none;
+  padding: ${({
+  theme
+}) => `${theme.space.lg} ${theme.space.xl}`};
+  cursor: pointer;
+  border-bottom: 2px solid ${({
+  theme
+}) => theme.colors.border};
+  color: ${({
+  theme
+}) => theme.colors.grey60};
+  user-select: none;
+  ${({
+  theme
+}) => ({
+  fontFamily: theme.font,
+  fontSize: theme.fontSizes.md,
+  lineHeight: theme.lineHeights.lg
+})};
+
+  ${({
+  active,
+  theme
+}) => active && css`
+    border-color: ${theme.colors.primary100};
+    color: ${theme.colors.primary100};
+  `}
+`;
+const StyledContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledHeader = styled.div`
+  display: flex;
+`;
+const StyledSpacer = styled.div`
+  flex-grow: 1;
+  border-bottom: 2px solid ${({
+  theme
+}) => theme.colors.border};
+`;
+
+/**
+ * Tabs component renders a tab navigation bar that lets the user select a Tab
+ * to display below. Children of the selected Tab are then rendered below the
+ * navigation bar.
+ */
+export const Tabs = ({
+  currentTab,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange = () => {},
+  children,
+  fullWidth = true,
+  headerComponent: Header = StyledHeader,
+  buttonComponent: Button = StyledButton,
+  contentComponent: Content = StyledContent
+}) => {
+  const [tabs, setTabs] = useState([]);
+  const registerTab = useCallback((id, title) => {
+    setTabs(currentTabs => {
+      if (currentTabs.find(t => t.id === id)) {
+        // eslint-disable-next-line no-console
+        console.error(`There are multiple Tab components with ID '${id}'`);
+      }
+      return [...currentTabs, {
+        id,
+        title
+      }];
+    });
+  }, []);
+  const unregisterTab = useCallback(id => setTabs(newTabs => newTabs.filter(t => t.id !== id)), []);
+  const memoizedContext = useMemo(() => ({
+    currentTab,
+    registerTab,
+    unregisterTab
+  }), [currentTab, registerTab, unregisterTab]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line no-use-before-define
+    React.createElement(TabContext.Provider, {
+      value: memoizedContext
+    }, /*#__PURE__*/React.createElement(StyledContent, {
+      role: "tablist"
+    }, /*#__PURE__*/React.createElement(Header, null, tabs.map(({
+      id,
+      title
+    }) => /*#__PURE__*/React.createElement(Button, {
+      role: "tab",
+      active: id === currentTab,
+      key: id,
+      onClick: () => onChange(id),
+      tabId: id
+    }, title)), fullWidth && /*#__PURE__*/React.createElement(StyledSpacer, null)), /*#__PURE__*/React.createElement(Content, {
+      role: "tabpanel"
+    }, children)))
+  );
+};
+export const TabContext = /*#__PURE__*/createContext({
+  registerTab: () => {
+    // eslint-disable-next-line no-console
+    console.error('Tab used outside of Tabs component. Tab needs to be a child of Tabs.');
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  unregisterTab: () => {},
+  currentTab: ''
+});
+export const useTabs = () => {
+  const ctx = useContext(TabContext);
+  assert(TabContext, 'useTabs is used outside TabContext');
+  return ctx;
+};
+Tabs.displayName = 'Tabs';
+export default Tabs;

package/build/atoms/tabs/tabs.stories.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Box } from "../index.js";
+import { Tab, Tabs } from "./index.js";
+export const Default = () => {
+  const [selectedTab, setSelectedTab] = useState('first');
+  return /*#__PURE__*/React.createElement(Tabs, {
+    currentTab: selectedTab,
+    onChange: setSelectedTab
+  }, /*#__PURE__*/React.createElement(Tab, {
+    id: "first",
+    label: "First tab"
+  }, "First"), /*#__PURE__*/React.createElement(Tab, {
+    id: "second",
+    label: "Second tab"
+  }, /*#__PURE__*/React.createElement(Box, {
+    color: "primary100"
+  }, "Second")), /*#__PURE__*/React.createElement(Tab, {
+    id: "third",
+    label: "Third tab"
+  }, "Third"));
+};
+const meta = {
+  title: 'DesignSystem/Atoms/Tabs',
+  component: Tabs
+};
+export default meta;

package/build/atoms/text/index.js

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

package/build/atoms/text/text.js

@@ -0,0 +1,77 @@
+import { typography, space, variant, color, layout } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import contentCSS from "../../utils/content-styles.js";
+import { cssClass } from "../../utils/css-class.js";
+const variants = variant({
+  variants: {
+    xs: {
+      fontSize: 'xs'
+    },
+    sm: {
+      fontSize: 'sm'
+    },
+    lg: {
+      fontSize: 'lg'
+    }
+  }
+});
+
+/**
+ * Prop Types of a Text component.
+ * Apart from variant it extends all {@link ColorProps}, {@link SpaceProps} and
+ * {@link TypographyProps}
+ *
+ * @memberof Text
+ * @alias TextProps
+ * @property {string} [...] Other props from {@link ColorProps}, {@link SpaceProps}
+ *                          and {@link TypographyProps}
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/text.png" />
+ *
+ * Use the Text component to control font size, weight, alignment, and color.
+ * By default it is rendered as a `div` but you can change this to other (like `span`)
+ * by using `as` prop,
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Text, TextProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see TextProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-text--default Storybook}
+ * @hideconstructor
+ * @example <caption>Lorem ipsum</caption>
+ * return (
+ * <Box>
+ *   <Text>
+ *    In publishing and graphic design,
+ *    Lorem ipsum is a <b>placeholder</b> text commonly used to demonstrate the
+ *    visual form of a document or a typeface without relying on meaningful
+ *    content.
+ *   </Text>
+ *   <Text mt="default" variant="sm">This text was from Wikipedia</Text>
+ * </Box>
+ * )
+ * @section design-system
+ */
+const Text = styled.div`
+  ${contentCSS};
+  ${typography};
+  ${space};
+  ${layout};
+  ${color};
+  ${variants};
+`;
+Text.defaultProps = {
+  className: cssClass('Text')
+};
+Text.displayName = 'Text';
+export { Text };
+export default Text;

package/build/atoms/text-area/index.js

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

package/build/atoms/text-area/text-area.js

@@ -0,0 +1,58 @@
+import { space, typography, layout } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { InputCSS } from "../input/index.js";
+import { cssClass } from "../../utils/css-class.js";
+
+/**
+ * Prop Types of a TextArea component.
+ * It extends all {@link SpaceProps}, {@link TypographyProps} and {@link LayoutProps}
+ * @memberof TextArea
+ * @alias TextAreaProps
+ * @property {string} [...] All props default to _textarea_ html component like `onChange`,
+ *                          `value` etc.
+ * @property {string} [...] Props from {@link SpaceProps}, {@link TypographyProps}
+ *                          and {@link LayoutProps} + they extend {@link InputProps}
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/textarea.png" />
+ *
+ * Wrapped `textarea` html element.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { TextArea, TextAreaProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-textarea--default Storybook}
+ * @see TextAreaProps
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="textarea1">Some example label</Label>
+ *      <TextArea id="textarea1" width={1/2} />
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const TextArea = styled.textarea`
+  ${InputCSS}
+  ${space};
+  ${layout};
+  ${typography};
+`;
+TextArea.defaultProps = {
+  px: 'default',
+  py: 'default',
+  fontSize: 'default',
+  className: cssClass('TextArea')
+};
+TextArea.displayName = 'TextArea';
+export { TextArea };
+export default TextArea;

package/build/atoms/text-area/text-area.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { Box } from "../index.js";
+import { TextArea } from "./index.js";
+export const Default = () => /*#__PURE__*/React.createElement(Box, {
+  width: 1
+}, /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Regular example"
+}, /*#__PURE__*/React.createElement(TextArea, {
+  id: "input1",
+  placeholder: "Simple textarea field...",
+  width: 1
+})), /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Without border and huge"
+}, /*#__PURE__*/React.createElement(TextArea, {
+  id: "input2",
+  placeholder: "Huge borderless",
+  width: 1,
+  borderless: true,
+  variant: "xl"
+})));
+const meta = {
+  title: 'DesignSystem/Atoms/TextArea',
+  component: TextArea
+};
+export default meta;

package/build/atoms/tooltip/index.js

@@ -0,0 +1,5 @@
+export * from "./tooltip.js";
+export * from "./tooltip-content.js";
+export * from "./tooltip-control.js";
+export * from "./tooltip-props.js";
+export * from "./tooltip-styled.js";

package/build/atoms/tooltip/tooltip-content.js

@@ -0,0 +1,10 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../box/index.js";
+
+/**
+ * @component
+ * @private
+ */
+export const TooltipContent = styled(Box)``;
+TooltipContent.displayName = 'TooltipContent';
+export default TooltipContent;

package/build/atoms/tooltip/tooltip-control.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from 'react';
+import useWindowSize from "../../hooks/use-window-size.js";
+import { StyledTooltip } from "./tooltip-styled.js";
+/**
+ * @component
+ * @private
+ * @memberof Tooltip
+ */
+export const TooltipControl = props => {
+  const {
+    title,
+    childRef,
+    direction = 'bottom',
+    ContentElement,
+    size
+  } = props;
+  const tooltipRef = useRef(null);
+  const [dimension, setDimension] = useState(null);
+  const [position, setPosition] = useState(null);
+  const [elementPosition, setElementPosition] = useState(null);
+  const windowSize = useWindowSize();
+  useEffect(() => {
+    if (childRef.current) {
+      const {
+        width: clientWidth,
+        top: offsetTop,
+        left: offsetLeft,
+        height: clientHeight
+      } = childRef.current.getBoundingClientRect();
+      setElementPosition({
+        width: clientWidth,
+        top: offsetTop,
+        left: offsetLeft,
+        height: clientHeight
+      });
+    }
+  }, [childRef, windowSize?.width, windowSize?.height]);
+  useEffect(() => {
+    if (tooltipRef.current) {
+      const {
+        clientWidth,
+        clientHeight
+      } = tooltipRef.current;
+      setDimension({
+        width: clientWidth,
+        height: clientHeight
+      });
+    }
+  }, [tooltipRef?.current?.clientWidth, tooltipRef?.current?.clientHeight, title]);
+  useEffect(() => {
+    if (!elementPosition || !dimension) {
+      return;
+    }
+
+    // eslint-disable-next-line default-case
+    switch (direction) {
+      case 'bottom':
+        {
+          setPosition({
+            top: elementPosition.top + elementPosition.height,
+            left: elementPosition.left + elementPosition.width / 2 - dimension.width / 2
+          });
+          break;
+        }
+      case 'top':
+        {
+          setPosition({
+            top: elementPosition.top - dimension.height,
+            left: elementPosition.left + elementPosition.width / 2 - dimension.width / 2
+          });
+          break;
+        }
+      case 'left':
+        {
+          setPosition({
+            top: elementPosition.top + elementPosition.height / 2 - dimension.height / 2,
+            left: elementPosition.left - dimension.width
+          });
+          break;
+        }
+      case 'right':
+        {
+          setPosition({
+            top: elementPosition.top + elementPosition.height / 2 - dimension.height / 2,
+            left: elementPosition.left + elementPosition.width
+          });
+          break;
+        }
+    }
+  }, [elementPosition, dimension, direction]);
+  const isVisible = !!(dimension && position);
+  return /*#__PURE__*/React.createElement(StyledTooltip, {
+    ref: tooltipRef,
+    left: position?.left || '-1110px',
+    top: position?.top || '-1110px',
+    size: size,
+    direction: direction,
+    isVisible: isVisible
+  }, ContentElement || title);
+};
+TooltipControl.displayName = 'TooltipControl';
+export default TooltipControl;

package/build/atoms/tooltip/tooltip-props.js

@@ -0,0 +1 @@
+export {};

package/build/atoms/tooltip/tooltip-styled.js

@@ -0,0 +1,129 @@
+import { styled, css } from "../../../build/utils/styled.js";
+import themeGet from "../../utils/theme-get.js";
+import { Box } from "../box/index.js";
+const ARROW_WIDTH = 7;
+const topCSS = css`
+  margin-top: -${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};
+
+  &::after, &::before {
+    top: 100%;
+    left: 50%;
+  }
+
+  &::after {
+    margin-left: -${ARROW_WIDTH}px;
+    border-color: ${themeGet('colors', 'grey20')} transparent transparent transparent;
+  }
+
+  &::before {
+    margin-left: -${ARROW_WIDTH - 1}px;
+    border-color: ${themeGet('colors', 'highlight')} transparent transparent transparent;
+  }
+`;
+const bottomCSS = css`
+  margin-top: ${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};
+
+  &::after, &::before {
+    bottom: 100%;
+    left: 50%;
+  }
+
+  &::after {
+    margin-left: -${ARROW_WIDTH}px;
+    border-color: transparent transparent ${themeGet('colors', 'grey20')} transparent;
+  }
+
+  &::before {
+    margin-left: -${ARROW_WIDTH - 1}px;
+    border-color: transparent transparent ${themeGet('colors', 'highlight')} transparent;
+  }
+`;
+const leftCSS = css`
+  margin-left: -${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};
+
+  &::after, &::before {
+    left: 100%;
+    top: 50%;
+  }
+
+  &::after {
+    margin-right: -${ARROW_WIDTH}px;
+    margin-top: -${ARROW_WIDTH}px;
+    border-color: transparent transparent transparent ${themeGet('colors', 'grey20')};
+  }
+
+  &::before {
+    margin-right: -${ARROW_WIDTH - 1}px;
+    margin-top: -${ARROW_WIDTH - 1}px;
+    border-color: transparent transparent transparent ${themeGet('colors', 'highlight')};
+  }
+`;
+const rightCSS = css`
+  margin-left: ${props => props.isVisible ? themeGet('space', 'lg')(props) : '0px'};
+
+  &::after, &::before {
+    right: 100%;
+    top: 50%;
+  }
+
+  &::after {
+    margin-left: -${ARROW_WIDTH}px;
+    margin-top: -${ARROW_WIDTH}px;
+    border-color: transparent ${themeGet('colors', 'grey20')} transparent transparent;
+  }
+
+  &::before {
+    margin-left: -${ARROW_WIDTH - 1}px;
+    margin-top: -${ARROW_WIDTH - 1}px;
+    border-color: transparent ${themeGet('colors', 'highlight')} transparent transparent;
+  }
+`;
+const getPadding = props => {
+  const px = props.size === 'lg' ? 'xl' : 'md';
+  const py = props.size === 'lg' ? 'lg' : 'sm';
+  return `${themeGet('space', py)(props)} ${themeGet('space', px)(props)}`;
+};
+const StyledTooltip = styled(Box)`
+  transition: opacity 0.2s, margin 0.2s;
+
+  position: absolute;
+
+  opacity: ${({
+  isVisible
+}) => isVisible ? '1' : '0'};
+  
+  padding: ${props => getPadding(props)};
+
+  pointer-events: none;
+  
+  &::after {
+    content: " ";
+    position: absolute;
+    border-style: solid;
+    border-width: 7px;
+    z-index: 1;
+  }
+  &::before {
+    content: " ";
+    position: absolute;
+    border-style: solid;
+    border-width: 6px;
+    z-index: 2;
+  }
+
+  ${props => ({
+  top: topCSS,
+  bottom: bottomCSS,
+  left: leftCSS,
+  right: rightCSS
+})[props.direction]}
+`;
+StyledTooltip.defaultProps = {
+  borderColor: 'grey20',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  bg: 'highlight',
+  borderRadius: '3px'
+};
+export default StyledTooltip;
+export { StyledTooltip };