@clement_lores/admin-design-system 1.0.0

package/src/atoms/table/table.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Button, CheckBox, Icon, Link, Text } from '../index.js'
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableRow } from './index.js'
+
+export const Default: StoryObj<{ onClick: (e) => void }> = {
+  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 (
+      <StoryWrapper label="">
+        <Table>
+          <TableCaption>
+            <Text as="span">Selected items </Text>
+            <Button onClick={handleClick}>
+              <Icon icon="Trash" />
+              Remove
+            </Button>
+          </TableCaption>
+          <TableHead>
+            <TableRow>
+              <TableCell>
+                <CheckBox />
+              </TableCell>
+              {header.map((head, i) => (
+                <TableCell key={head} onClick={handleClick}>
+                  <Link href="/">
+                    {head}
+                    {i === 0 && <Icon icon="ChevronUp" />}
+                  </Link>
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map((row) => (
+              <TableRow key={row[0]}>
+                <TableCell>
+                  <CheckBox />
+                </TableCell>
+                {row.map((item) => (
+                  <TableCell key={item}>{item}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </StoryWrapper>
+    )
+  },
+}
+
+const meta: Meta<typeof Table> = {
+  title: 'DesignSystem/Atoms/Table',
+  component: Table,
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+}
+
+export default meta

package/src/atoms/table/table.tsx

@@ -0,0 +1,110 @@
+import { layout, LayoutProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+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<LayoutProps>`
+  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

package/src/atoms/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './tab.jsx'
+export * from './tabs.jsx'

package/src/atoms/tabs/tab.tsx

@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, useLayoutEffect } from 'react'
+
+import { useTabs } from './tabs.jsx'
+
+export interface TabProps extends PropsWithChildren {
+  /**
+   * ID of the Tab. It has to be a unique string
+   */
+  id: string
+  /**
+   * Title of the Tab that will be shown on the tab navigation bar.
+   */
+  label: string
+}
+
+/**
+ * Renders children inside Tabs component. Each Tab will add a single tab in
+ * the navigation bar.
+ */
+export const Tab: React.FC<TabProps> = ({ 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 <>{children}</>
+}
+
+Tab.displayName = 'Tab'
+
+export default Tab

package/src/atoms/tabs/tabs.stories.tsx

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

package/src/atoms/tabs/tabs.tsx

@@ -0,0 +1,165 @@
+import React, {
+  createContext,
+  useCallback,
+  useState,
+  useMemo,
+  PropsWithChildren,
+  useContext,
+  ComponentType,
+} from 'react'
+import { styled, css } from '@styled-components'
+
+import assert from '../../utils/assert.js'
+
+export interface TabsProps extends PropsWithChildren {
+  /**
+   * Controls which Tab is currently displayed. It should be the same as an ID
+   * of one of the tabs.
+   */
+  currentTab: string
+  /**
+   * Called with Tab ID when the user clicks on a tab navigation button.
+   */
+  onChange?: (tabId: string) => void
+  /**
+   * Whether tabs container should fill remaining space
+   */
+  fullWidth?: boolean
+  /**
+   * Custom component to use as the Tabs header instead of default 'div'.
+   */
+  headerComponent?: ComponentType<PropsWithChildren<any>>
+  /**
+   * Custom component to use as the Tab button instead of default 'button'.
+   */
+  buttonComponent?: ComponentType<PropsWithChildren<{
+    onClick: () => void
+    active: boolean
+    tabId: string
+    role?: string
+  }>>
+  /**
+   * Custom component to use as the Tabs content container instead of default 'div'.
+   */
+  contentComponent?: ComponentType<PropsWithChildren<{ role?: string }>>
+}
+
+interface TabData {
+  id: string
+  title: string
+}
+
+interface TabContextType {
+  registerTab: (id: string, title: string) => void
+  unregisterTab: (id: string) => void
+  currentTab: string
+}
+
+const StyledButton = styled.button<{ active: boolean }>`
+  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: React.FC<TabsProps> = ({
+  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<TabData[]>([])
+
+  const registerTab = useCallback((id: string, title: string) => {
+    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: string) => setTabs((newTabs) => newTabs.filter((t) => t.id !== id)),
+    [],
+  )
+
+  const memoizedContext = useMemo(
+    () => ({ currentTab, registerTab, unregisterTab }),
+    [currentTab, registerTab, unregisterTab],
+  )
+
+  return (
+    // eslint-disable-next-line no-use-before-define
+    <TabContext.Provider value={memoizedContext}>
+      <StyledContent role="tablist">
+        <Header>
+          {tabs.map(({ id, title }) => (
+            <Button role="tab" active={id === currentTab} key={id} onClick={() => onChange(id)} tabId={id}>
+              {title}
+            </Button>
+          ))}
+          {fullWidth && <StyledSpacer />}
+        </Header>
+        <Content role="tabpanel">{children}</Content>
+      </StyledContent>
+    </TabContext.Provider>
+  )
+}
+
+export const TabContext = createContext<TabContextType>({
+  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 = (): TabContextType => {
+  const ctx = useContext(TabContext)
+  assert(TabContext, 'useTabs is used outside TabContext')
+  return ctx
+}
+
+Tabs.displayName = 'Tabs'
+
+export default Tabs

package/src/atoms/text/index.ts

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

package/src/atoms/text/text.tsx

@@ -0,0 +1,98 @@
+import {
+  typography,
+  TypographyProps,
+  space,
+  SpaceProps,
+  variant,
+  color,
+  layout,
+  LayoutProps,
+} from 'styled-system'
+import { styled } from '@styled-components'
+
+import contentCSS from '../../utils/content-styles.js'
+import { cssClass } from '../../utils/css-class.js'
+import { NewColorProps as ColorProps } from '../../utils/color-props.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}
+ */
+export type TextProps = TypographyProps & SpaceProps & ColorProps & LayoutProps & {
+  /** Optional variant of a <Text /> component */
+  variant?: 'xs' | 'sm' | 'lg';
+  /** Define this if you want to render element as something other than div */
+  as?: string;
+}
+
+/**
+ * @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<TextProps>`
+  ${contentCSS};
+  ${typography};
+  ${space};
+  ${layout};
+  ${color};
+  ${variants};
+`
+
+Text.defaultProps = {
+  className: cssClass('Text'),
+}
+
+Text.displayName = 'Text'
+
+export { Text }
+export default Text

package/src/atoms/text-area/index.ts

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

package/src/atoms/text-area/text-area.stories.tsx

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

package/src/atoms/text-area/text-area.tsx

@@ -0,0 +1,63 @@
+import { space, typography, layout, TypographyProps } from 'styled-system'
+import { styled } from '@styled-components'
+
+import { InputCSS, InputProps } 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}
+ */
+export type TextAreaProps = TypographyProps & 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<TextAreaProps>`
+  ${InputCSS}
+  ${space};
+  ${layout};
+  ${typography};
+`
+
+TextArea.defaultProps = {
+  px: 'default',
+  py: 'default',
+  fontSize: 'default',
+  className: cssClass('TextArea'),
+}
+
+TextArea.displayName = 'TextArea'
+
+export { TextArea }
+export default TextArea

package/src/atoms/tooltip/index.ts

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

package/src/atoms/tooltip/tooltip-content.tsx

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