diff --git a/apps/spotlight/src/components/Header.astro b/apps/spotlight/src/components/Header.astro index d4c982b8..2a0674f7 100644 --- a/apps/spotlight/src/components/Header.astro +++ b/apps/spotlight/src/components/Header.astro @@ -14,13 +14,13 @@ const getNavLinkClasses = (url: string) => { ---
-
+
diff --git a/apps/spotlight/src/layouts/ContentLayout.astro b/apps/spotlight/src/layouts/ContentLayout.astro index bc9a3134..25aae231 100644 --- a/apps/spotlight/src/layouts/ContentLayout.astro +++ b/apps/spotlight/src/layouts/ContentLayout.astro @@ -8,15 +8,15 @@ const { title } = Astro.props; --- -
-
-
-
-
- -
+
+
+
+
+
-
-
+
+ diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro index c01a78b8..d42b1948 100644 --- a/apps/spotlight/src/layouts/Layout.astro +++ b/apps/spotlight/src/layouts/Layout.astro @@ -56,7 +56,9 @@ const context = getAppContext();
- +
+ +
diff --git a/apps/spotlight/src/pages/manage/index.astro b/apps/spotlight/src/pages/manage/index.astro index 47478d3a..46fdd18a 100644 --- a/apps/spotlight/src/pages/manage/index.astro +++ b/apps/spotlight/src/pages/manage/index.astro @@ -1,8 +1,8 @@ --- import AppFormManager from '../../components/AppFormManager'; -import ContentLayout from '../../layouts/ContentLayout.astro'; +import Layout from '../../layouts/Layout.astro'; --- - + - + diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss index e5d0afb4..9359d3b7 100644 --- a/packages/design/sass/styles.scss +++ b/packages/design/sass/styles.scss @@ -29,11 +29,6 @@ p { font-weight: 700; } -a, -.usa-link, -.usa-button--unstyled { - color: color('violet-70v'); -} .hide { display: none; @@ -62,16 +57,6 @@ main { */ } -.usa-banner__inner, -.usa-header--extended .usa-navbar, -.usa-header--extended .usa-nav__inner, -.grid-container, -.usa-footer>.grid-container, -.usa-footer__primary-container, -.usa-footer__primary-section>.grid-container { - max-width: 75rem; -} - .usa-combo-box__input, .usa-input, .usa-input-group, @@ -82,20 +67,6 @@ main { height: 3rem; } -.usa-header { - background: #18161d; -} - -.usa-nav { - background: white; - - .usa-sidenav__item { - .usa-current { - color: color('violet-70v'); - } - } -} - .usa-sidenav{ .usa-sidenav__item { @@ -118,25 +89,6 @@ main { background: none; } -.usa-button-wrapper { - .usa-button { - margin: 0; - } -} -.usa-button, -.usa-menu-btn { - background-color: #54278f; - - &:hover { - background-color: #783cb9; - } -} - -.usa-header, -.usa-header a { - color: white; -} - .usa-table { width: 100%; @@ -214,36 +166,3 @@ iframe:focus { padding-bottom: 62.5%; height: 0; } - -.usa-footer__nav { - background: none; -} - -@media (min-width: 64em) { - .usa-nav__primary { - - &>.usa-nav__primary-item { - font-size: 1.3rem; - } - } - .usa-header--extended { - .usa-nav__primary-item { - - &>.usa-current::after, - &>.usa-nav__link:hover::after { - background-color: #783cb9; - } - } - - .usa-logo { - max-width: 100%; - } - } - - .usa-link:active, - .usa-link:visited, - .usa-file-input__choose, - .usa-nav__primary>.usa-nav__primary-item>a:hover { - color: #39215e; - } -} diff --git a/packages/design/src/FormManager/FormEdit/AddPattern.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx similarity index 94% rename from packages/design/src/FormManager/FormEdit/AddPattern.tsx rename to packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx index b2d04e21..fe40ebc0 100644 --- a/packages/design/src/FormManager/FormEdit/AddPattern.tsx +++ b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useFormEditStore } from './store'; -export const AddPattern = () => { +export const AddPatternDropdown = () => { const store = useFormEditStore(state => ({ availablePatterns: state.availablePatterns, addPattern: state.addPattern, diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx deleted file mode 100644 index a04ddaff..00000000 --- a/packages/design/src/FormManager/FormEdit/Preview.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; - -import { createFormSession } from '@atj/forms'; - -import Form, { PatternComponent, type ComponentForPattern } from '../../Form'; - -import { PreviewPattern } from './PreviewPattern'; -import { PatternPreviewSequence } from './PreviewSequencePattern'; -import { useFormEditStore } from './store'; - -export const PreviewForm = () => { - const uiContext = useFormEditStore(state => state.context); - const form = useFormEditStore(state => state.form); - - const disposable = createFormSession(form); // nullSession instead? - - return ( -
- ); -}; - -const createPreviewComponents = ( - components: ComponentForPattern -): ComponentForPattern => { - const previewComponents: ComponentForPattern = {}; - // TODO: Create a configurable way to to define preview components. - for (const [patternType, Component] of Object.entries(components)) { - previewComponents[patternType] = Component; - if (patternType === 'sequence') { - previewComponents[patternType] = - PatternPreviewSequence as PatternComponent; - } else { - previewComponents[patternType] = PreviewPattern; - } - } - return previewComponents; -}; diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx index 0e4ecb66..a17134ca 100644 --- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx @@ -4,12 +4,12 @@ import { PatternId, type FieldsetProps } from '@atj/forms'; import { FieldsetPattern } from '@atj/forms/src/patterns/fieldset'; import Fieldset from '../../../Form/components/Fieldset'; - -import { PatternEditActions } from '../PatternEditActions'; -import { PatternEditForm } from '../PatternEditForm'; import { useIsPatternSelected, usePattern } from '../store'; import { PatternEditComponent } from '../types'; +import { PatternEditActions } from './common/PatternEditActions'; +import { PatternEditForm } from './common/PatternEditForm'; + const FieldsetEdit: PatternEditComponent = props => { const isSelected = useIsPatternSelected(props.previewProps._patternId); return ( diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx index 4720c28d..ebe3dfe4 100644 --- a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx @@ -3,10 +3,14 @@ import React from 'react'; import { type FormSummaryProps, type PatternId } from '@atj/forms'; import FormSummary from '../../../Form/components/FormSummary'; -import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm'; import { useIsPatternSelected } from '../store'; import { PatternEditComponent } from '../types'; +import { + PatternEditForm, + usePatternEditFormContext, +} from './common/PatternEditForm'; + const FormSummaryEdit: PatternEditComponent = props => { const isSelected = useIsPatternSelected(props.previewProps._patternId); return ( diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx index 76274c1c..617cdc72 100644 --- a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx @@ -3,11 +3,15 @@ import React from 'react'; import { PatternId, TextInputProps } from '@atj/forms'; import TextInput from '../../../Form/components/TextInput'; -import { PatternEditActions } from '../PatternEditActions'; -import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm'; import { useIsPatternSelected, usePattern } from '../store'; import { PatternEditComponent } from '../types'; +import { PatternEditActions } from './common/PatternEditActions'; +import { + PatternEditForm, + usePatternEditFormContext, +} from './common/PatternEditForm'; + const InputPatternEdit: PatternEditComponent = props => { const isSelected = useIsPatternSelected(props.previewProps._patternId); return ( diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx index 78d2301b..f2133a5b 100644 --- a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx @@ -3,11 +3,15 @@ import React from 'react'; import { PatternId, type ParagraphProps } from '@atj/forms'; import Paragraph from '../../../Form/components/Paragraph'; -import { PatternEditActions } from '../PatternEditActions'; -import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm'; import { useIsPatternSelected } from '../store'; import { PatternEditComponent } from '../types'; +import { PatternEditActions } from './common/PatternEditActions'; +import { + PatternEditForm, + usePatternEditFormContext, +} from './common/PatternEditForm'; + const ParagraphPatternEdit: PatternEditComponent = props => { const isSelected = useIsPatternSelected(props.previewProps._patternId); return ( diff --git a/packages/design/src/FormManager/FormEdit/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx similarity index 97% rename from packages/design/src/FormManager/FormEdit/DraggableList.tsx rename to packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx index 165621cc..215b6d16 100644 --- a/packages/design/src/FormManager/FormEdit/DraggableList.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx @@ -16,50 +16,7 @@ import { verticalListSortingStrategy, } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; -import { useFormEditStore } from './store'; - -const SortableItem = ({ - id, - children, -}: { - id: UniqueIdentifier; - children: React.ReactNode; -}) => { - const { attributes, listeners, setNodeRef, transform, transition } = - useSortable({ id }); - const context = useFormEditStore(state => state.context); - - return ( -
-
-
- -
-
{children}
-
-
- ); -}; +import { useFormEditStore } from '../../store'; type DraggableListProps = React.PropsWithChildren<{ order: UniqueIdentifier[]; @@ -108,4 +65,45 @@ export const DraggableList: React.FC = ({ ); }; -export default DraggableList; +const SortableItem = ({ + id, + children, +}: { + id: UniqueIdentifier; + children: React.ReactNode; +}) => { + const { attributes, listeners, setNodeRef, transform, transition } = + useSortable({ id }); + const context = useFormEditStore(state => state.context); + + return ( +
+
+
+ +
+
{children}
+
+
+ ); +}; diff --git a/packages/design/src/FormManager/FormEdit/PreviewSequencePattern.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/index.tsx similarity index 90% rename from packages/design/src/FormManager/FormEdit/PreviewSequencePattern.tsx rename to packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/index.tsx index 800957bd..4bbd4d76 100644 --- a/packages/design/src/FormManager/FormEdit/PreviewSequencePattern.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/index.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { PatternProps, getPattern } from '@atj/forms'; - -import { PatternComponent } from '../../Form'; -import DraggableList from './DraggableList'; -import { useFormEditStore } from './store'; import { SequencePattern } from '@atj/forms/src/patterns/sequence'; +import { PatternComponent } from '../../../../Form'; + +import { DraggableList } from './DraggableList'; +import { useFormEditStore } from '../../store'; + // TODO: consider merging this component with DraggableList, to clean up // sematics around how its children are handled. export const PatternPreviewSequence: PatternComponent< diff --git a/packages/design/src/FormManager/FormEdit/components/SequencePatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/SequencePatternEdit.tsx deleted file mode 100644 index e9f005de..00000000 --- a/packages/design/src/FormManager/FormEdit/components/SequencePatternEdit.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React, { useState } from 'react'; -import { - DndContext, - closestCenter, - KeyboardSensor, - PointerSensor, - useSensor, - useSensors, -} from '@dnd-kit/core'; -import { - arrayMove, - SortableContext, - sortableKeyboardCoordinates, - useSortable, - verticalListSortingStrategy, -} from '@dnd-kit/sortable'; -import { CSS } from '@dnd-kit/utilities'; -import { useFormContext } from 'react-hook-form'; - -import { type Pattern } from '@atj/forms'; -import { type SequencePattern } from '@atj/forms/src/patterns/sequence'; -import { type FormEditUIContext, type PatternEditComponent } from '../types'; -import { useFormEditStore, usePattern } from '../store'; - -interface ItemProps { - id: string; - pattern: Pattern; - context: FormEditUIContext; -} - -const SortableItem = ({ id, pattern, context }: ItemProps) => { - const { attributes, listeners, setNodeRef, transform, transition } = - useSortable({ id }); - - const style = { - transform: CSS.Transform.toString(transform), - transition, - }; - - const Component = context.editComponents[pattern.type]; - - return ( -
  • -
    -
    - ::: - ::: -
    -
    - -
    -
    -
    • - ); -}; - -const SequencePatternEdit: PatternEditComponent = ({ - context, - previewProps, -}) => { - const { register, setValue } = useFormContext(); - const pattern = usePattern(previewProps._patternId); - const form = useFormEditStore(state => state.form); - const [patterns, setPatterns] = useState( - pattern.data.patterns.map((patternId: string) => { - return form.patterns[patternId]; - }) - ); - const sensors = useSensors( - useSensor(PointerSensor), - useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) - ); - return ( -
    - { - const { active, over } = event; - if (over === null) { - return; - } - if (active.id !== over.id) { - const oldIndex = patterns.findIndex(pattern => { - return pattern.id === active.id; - }); - const newIndex = patterns.findIndex(pattern => { - return pattern.id === over.id; - }); - const newOrder = arrayMove(patterns, oldIndex, newIndex); - setPatterns(newOrder); - setValue(pattern.id, { - ...pattern, - data: { - patterns: newOrder.map(pattern => pattern.id), - }, - } satisfies SequencePattern); - } - }} - > - -
      - - - - {patterns.map(patterns => ( - - ))} -
    -     -     -
    - ); -}; - -export default SequencePatternEdit; diff --git a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx index 5a3886fd..7353932a 100644 --- a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx @@ -3,10 +3,14 @@ import React from 'react'; import { type PatternId, SubmissionConfirmationProps } from '@atj/forms'; import SubmissionConfirmation from '../../../Form/components/SubmissionConfirmation'; -import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm'; import { useIsPatternSelected } from '../store'; import { PatternEditComponent } from '../types'; +import { + PatternEditForm, + usePatternEditFormContext, +} from './common/PatternEditForm'; + const SubmissionConfirmationEdit: PatternEditComponent< SubmissionConfirmationProps > = props => { diff --git a/packages/design/src/FormManager/FormEdit/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx similarity index 98% rename from packages/design/src/FormManager/FormEdit/PatternEditActions.tsx rename to packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx index 4a15d947..7b6c855a 100644 --- a/packages/design/src/FormManager/FormEdit/PatternEditActions.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx @@ -1,7 +1,8 @@ import React, { PropsWithChildren, ReactElement } from 'react'; -import { useFormEditStore } from './store'; import classNames from 'classnames'; +import { useFormEditStore } from '../../store'; + type PatternEditActionsProps = PropsWithChildren<{ children?: ReactElement; }>; diff --git a/packages/design/src/FormManager/FormEdit/PatternEditForm.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx similarity index 94% rename from packages/design/src/FormManager/FormEdit/PatternEditForm.tsx rename to packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx index ae5fd086..7a17a3fa 100644 --- a/packages/design/src/FormManager/FormEdit/PatternEditForm.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx @@ -3,7 +3,7 @@ import { FormProvider, useForm, useFormContext } from 'react-hook-form'; import { type PatternId, type PatternMap } from '@atj/forms'; -import { useFormEditStore, usePattern } from './store'; +import { useFormEditStore, usePattern } from '../../store'; type PatternEditFormProps = { patternId: PatternId; diff --git a/packages/design/src/FormManager/FormEdit/components/index.ts b/packages/design/src/FormManager/FormEdit/components/index.ts index ab76a646..0a4c3b7f 100644 --- a/packages/design/src/FormManager/FormEdit/components/index.ts +++ b/packages/design/src/FormManager/FormEdit/components/index.ts @@ -11,5 +11,6 @@ export const defaultPatternEditComponents: EditComponentForPattern = { 'form-summary': FormSummaryEdit, fieldset: FieldsetEdit, //sequence: SequencePatternEdit, + //sequence: PreviewSequencePattern, 'submission-confirmation': SubmissionConfirmationEdit, }; diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx index d773f095..1e260161 100644 --- a/packages/design/src/FormManager/FormEdit/index.tsx +++ b/packages/design/src/FormManager/FormEdit/index.tsx @@ -1,12 +1,13 @@ import React, { useEffect } from 'react'; -import { Blueprint } from '@atj/forms'; +import { Blueprint, createFormSession } from '@atj/forms'; import { type FormService } from '@atj/form-service'; -import ManagerNav from '../ManagerNav'; +import Form, { ComponentForPattern, PatternComponent } from '../../Form'; -import { AddPattern } from './AddPattern'; -import { PreviewForm } from './Preview'; +import { AddPatternDropdown } from './AddPatternDropdown'; +import { PreviewPattern } from './PreviewPattern'; +import { PatternPreviewSequence } from './components/PreviewSequencePattern'; import { FormEditProvider, useFormEditStore } from './store'; import { type FormEditUIContext } from './types'; @@ -27,7 +28,6 @@ export default function FormEdit({ return ( <> -

    Edit form

    Your form has been imported for web delivery.

    @@ -39,6 +39,8 @@ export default function FormEdit({ const EditForm = ({ saveForm }: { saveForm: (form: Blueprint) => void }) => { const { form } = useFormEditStore(); + const uiContext = useFormEditStore(state => state.context); + const disposable = createFormSession(form); // nullSession instead? useEffect(() => { saveForm(form); }, [form]); @@ -47,14 +49,43 @@ const EditForm = ({ saveForm }: { saveForm: (form: Blueprint) => void }) => {
    - +
    - +
    ); }; + +// TODO: We want to get rid of this and rely entirely on the injected +// editComponent configuration. +const createPreviewComponents = ( + components: ComponentForPattern +): ComponentForPattern => { + const previewComponents: ComponentForPattern = {}; + // TODO: Create a configurable way to to define preview components. + for (const [patternType, Component] of Object.entries(components)) { + previewComponents[patternType] = Component; + if (patternType === 'sequence') { + previewComponents[patternType] = + PatternPreviewSequence as PatternComponent; + } else { + previewComponents[patternType] = PreviewPattern; + } + } + return previewComponents; +}; diff --git a/packages/design/src/FormManager/FormList/CreateNew/index.tsx b/packages/design/src/FormManager/FormList/CreateNew/index.tsx index c5ab6127..a54a1caf 100644 --- a/packages/design/src/FormManager/FormList/CreateNew/index.tsx +++ b/packages/design/src/FormManager/FormList/CreateNew/index.tsx @@ -16,10 +16,7 @@ export default function CreateNew({ const { actions } = useDocumentImporter(formService, baseUrl); return (
    -
    ; } return ( - + + + + ); + }} + /> + { + const { formId } = useParams(); + if (formId === undefined) { + return
    formId is undefined
    ; + } + return ( + + Publish + ); }} />