feat: Add all old components

package.json

@@ -26,7 +26,11 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "react-icons": "^4.2.0",
+    "react-modal": "^3.14.3",
     "react-table": "^7.7.0",
+    "slate": "^0.65.3",
+    "slate-react": "^0.65.3",
     "storybook-addon-theme-ui": "^0.1.5"
   },
   "devDependencies": {
@@ -40,6 +44,7 @@
     "@theme-ui/preset-base": "^0.10.1",
     "@types/faker": "^5.5.7",
     "@types/jest": "^26.0.24",
+    "@types/react-modal": "^3.12.1",
     "@types/react-table": "^7.7.2",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",

src/components.ts

@@ -1,3 +1,19 @@
+export * from './components/file-upload/components/file-delete-button';
+export * from './components/file-upload/components/file-upload-button';
+export * from './components/file-upload/components/file-upload-input';
+export * from './components/file-upload/document-file-upload';
+export * from './components/file-upload/image-file-upload';
+export * from './components/action-box-item';
+export * from './components/alert';
+export * from './components/editor';
+export * from './components/field-image';
+export * from './components/labeled-button';
+export * from './components/modal';
+export * from './components/select-alt';
+export * from './components/select-option';
+export * from './components/select';
+export * from './components/tag-field';
+export * from './components/tag-select';
 export * from './breadcrumb';
 export * from './list-item';
 export * from './table';

src/components/action-box-item.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { ButtonProps, Container, Flex, Grid } from 'theme-ui';
+
+export interface ActionBoxItemProps extends ButtonProps {
+  actions?: Array<ReactNode>;
+}
+
+export const ActionBoxItem: React.FC<ActionBoxItemProps> = ({
+  actions,
+  disabled,
+  children,
+}) => {
+  return (
+    <Container
+      sx={{
+        color: disabled ? 'secondary' : 'primary',
+        border: '5px solid',
+        borderColor: 'muted',
+        borderRadius: '8px',
+        p: 3,
+        m: 2,
+      }}
+    >
+      <Flex sx={{ alignItems: 'center' }}>
+        <Grid gap={2} columns={[1, 6, 6, 10]} sx={{ flexGrow: 1 }}>
+          {children}
+        </Grid>
+        {actions}
+      </Flex>
+    </Container>
+  );
+};
+
+ActionBoxItem.displayName = 'ListBox';

src/components/alert.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+  Alert as AlertTheme,
+  AlertProps as AlertThemeProps,
+  Close,
+} from 'theme-ui';
+
+export interface AlertProps {
+  onClose?: () => void;
+}
+
+export const Alert: React.FC<AlertProps & AlertThemeProps> = ({
+  children,
+  onClose,
+  ...rest
+}) => (
+  <AlertTheme {...rest} sx={{ position: 'relative', mb: 3 }}>
+    {children}
+    <Close sx={{ position: 'absolute', right: 10, top: 10 }} onClick={onClose} />
+  </AlertTheme>
+);

src/components/editor.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo, useState } from 'react';
+import { Node, createEditor } from 'slate';
+import { Editable, Slate, withReact } from 'slate-react';
+import { ForwardRef } from 'theme-ui';
+
+export interface EditorProps {
+  text: Node[];
+  onChange?: (value: Node[]) => void;
+}
+
+const noteDefaultValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: '' }],
+  },
+];
+
+export const Editor: ForwardRef<HTMLInputElement, EditorProps> =
+  React.forwardRef(({ text = noteDefaultValue, onChange = () => '' }, ref) => {
+    const editor = useMemo(() => withReact(createEditor()), []);
+    const [editorValue, setEditorValue] = useState(text);
+
+    return (
+      <Slate
+        editor={editor}
+        value={editorValue}
+        onChange={val => {
+          onChange(val);
+          setEditorValue(val);
+        }}
+        ref={ref}
+      >
+        <Editable
+          sx={{
+            mt: 3,
+            minHeight: '160px',
+          }}
+        />
+      </Slate>
+    );
+  });

src/components/field-image.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { HiOutlineUser } from 'react-icons/hi';
+import {
+  Box,
+  Label,
+  Input,
+  FieldProps,
+  Text,
+  Image,
+  Flex,
+  ForwardRef,
+  InputProps,
+  ThemeUIStyleObject,
+} from 'theme-ui';
+import { getMargin, getPos, omitMargin, omitPos } from '../util';
+
+export interface UserProps {
+  photoUrl: string;
+  firstName: string;
+  lastName: string;
+  roles: string[];
+}
+
+// TODO correctly type this interface and implement it to type props
+export interface FieldImageProps {
+  as: ForwardRef<any, InputProps>;
+  label: string;
+  name: string;
+  error: any;
+  sx: ThemeUIStyleObject;
+  userData: Partial<UserProps>;
+  children: any;
+}
+
+export const FieldImage = React.forwardRef(
+  (
+    { as: Control = Input, label, name, error, sx, userData, ...props }: FieldProps<any>,
+    ref
+  ) => {
+    return (
+      <Flex
+        {...getMargin(props)}
+        sx={{
+          p: 3,
+          mt: 3,
+          mb: 3,
+          borderRadius: '8px',
+          border: '3px solid',
+          borderColor: 'primary',
+          backgroundColor: 'background',
+          ...getPos(sx),
+        }}
+      >
+        <Flex
+          sx={{
+            width: '48px',
+            height: '48px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: '2px dashed',
+            borderRadius: '50%',
+            borderColor: 'accent',
+            mr: 4,
+            fontSize: '20px',
+          }}
+        >
+          {/* TODO: replace with Avatar component (shows user image or initials) */}
+          {userData ? (
+            <Image
+              src={
+                userData?.photoUrl ||
+                `https://eu.ui-avatars.com/api/?name=${userData?.firstName}+${userData?.lastName}&background=749F97&size=512`
+              }
+              variant="rounded"
+              sx={{ minWidth: 52, width: 52, height: 52 }}
+            />
+          ) : (
+            <HiOutlineUser />
+          )}
+        </Flex>
+        <Box sx={{ flexGrow: 1 }}>
+          <Label sx={{ fontWeight: 'bold', fontSize: 1 }} htmlFor={name}>
+            {label}
+          </Label>
+          <Control
+            ref={ref}
+            id={name}
+            name={name}
+            sx={{ border: 0, outline: 'none', p: 0, ...omitPos(sx) }}
+            {...omitMargin(props)}
+          />
+          {!!error && <Text sx={{ color: 'lightRed' }}>{error}</Text>}
+        </Box>
+      </Flex>
+    );
+  }
+);

src/components/file-upload/components/file-delete-button.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, ButtonProps } from 'theme-ui';
+
+export const FileDeleteButton: React.FC<ButtonProps> = ({ children, ...props }) => (
+  <Button
+    variant="danger"
+    type="button"
+    sx={{
+      display: 'inline-flex',
+      alignItems: 'center',
+    }}
+    {...props}
+  >
+    {children}
+  </Button>
+);

src/components/file-upload/components/file-upload-button.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FiLoader } from 'react-icons/fi';
+import { HiOutlineUpload } from 'react-icons/hi';
+import { Button, ButtonProps } from 'theme-ui';
+
+export type FileUploadButtonProps = {
+  loading?: boolean;
+} & ButtonProps;
+
+export const FileUploadButton: React.FC<FileUploadButtonProps> = ({
+  loading,
+  children,
+  ...props
+}) => (
+  <Button
+    variant="secondary"
+    type="button"
+    sx={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      color: 'text',
+      borderColor: 'text',
+    }}
+    disabled={loading}
+    {...props}
+  >
+    {children}
+    {!loading ? (
+      <HiOutlineUpload size={16} sx={{ ml: 2 }} />
+    ) : (
+      <FiLoader sx={{ height: '1rem', ml: 2 }} />
+    )}
+  </Button>
+);

src/components/file-upload/components/file-upload-input.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface FileUploadInputProps extends React.HTMLProps<HTMLInputElement> {
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  inputRef: { current: null | HTMLInputElement };
+}
+
+export const FileUploadInput: React.FC<FileUploadInputProps> = ({
+  inputRef,
+  ...rest
+}) => <input ref={inputRef} {...rest} type="file" sx={{ display: 'none' }} />;