arch: move web folder into api & move api to top level

frontend/src/shared/components/CardComposer/CardComposer.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import CardComposer from '.';
+
+export default {
+  component: CardComposer,
+  title: 'CardComposer',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return <CardComposer isOpen onClose={action('on close')} onCreateCard={action('on create card')} />;
+};

frontend/src/shared/components/CardComposer/Styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import Button from 'shared/components/Button';
+import TextareaAutosize from 'react-autosize-textarea';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { mixin } from 'shared/utils/styles';
+
+export const CancelIcon = styled(FontAwesomeIcon)`
+  opacity: 0.8;
+  cursor: pointer;
+  font-size: 1.25em;
+  padding-left: 5px;
+`;
+export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
+  padding-bottom: 8px;
+  display: ${props => (props.isOpen ? 'flex' : 'none')};
+  flex-direction: column;
+`;
+
+export const ComposerControls = styled.div``;
+
+export const ComposerControlsSaveSection = styled.div`
+  display: flex;
+  float: left;
+  align-items: center;
+  justify-content: center;
+`;
+export const ComposerControlsActionsSection = styled.div`
+  float: right;
+`;
+export const AddCardButton = styled(Button)`
+  margin-right: 4px;
+  padding: 6px 12px;
+  border-radius: 3px;
+`;
+

frontend/src/shared/components/CardComposer/index.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+
+import {
+  CardComposerWrapper,
+  CancelIcon,
+  AddCardButton,
+  ComposerControls,
+  ComposerControlsSaveSection,
+  ComposerControlsActionsSection,
+} from './Styles';
+import Card from '../Card';
+
+type Props = {
+  isOpen: boolean;
+  onCreateCard: (cardName: string) => void;
+  onClose: () => void;
+};
+
+const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
+  const [cardName, setCardName] = useState('');
+  const $cardRef = useRef<HTMLDivElement>(null);
+  useOnOutsideClick($cardRef, true, onClose, null);
+  useOnEscapeKeyDown(isOpen, onClose);
+  return (
+    <CardComposerWrapper isOpen={isOpen}>
+      <Card
+        title={cardName}
+        ref={$cardRef}
+        taskID=""
+        taskGroupID=""
+        editable
+        onEditCard={(_taskGroupID, _taskID, name) => {
+          onCreateCard(name);
+          setCardName('');
+        }}
+        onCardTitleChange={name => {
+          setCardName(name);
+        }}
+      />
+      <ComposerControls>
+        <ComposerControlsSaveSection>
+          <AddCardButton
+            variant="relief"
+            onClick={() => {
+              onCreateCard(cardName);
+              setCardName('');
+            }}
+          >
+            Add Card
+          </AddCardButton>
+          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
+        </ComposerControlsSaveSection>
+        <ComposerControlsActionsSection />
+      </ComposerControls>
+    </CardComposerWrapper>
+  );
+};
+
+CardComposer.propTypes = {
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  onCreateCard: PropTypes.func.isRequired,
+};
+CardComposer.defaultProps = {
+  isOpen: true,
+};
+
+export default CardComposer;