-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/mms-child-info-page
- Loading branch information
Showing
258 changed files
with
3,969 additions
and
2,433 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
name: Validate code in the merge queue (post merge) | ||
|
||
on: | ||
workflow_dispatch: | ||
merge_group: | ||
|
||
jobs: | ||
success: | ||
runs-on: ec2-runners | ||
container: | ||
image: public.ecr.aws/m3u4c4h9/island-is/actions-runner-public:latest | ||
steps: | ||
- name: Dump GitHub context | ||
env: | ||
GITHUB_CONTEXT: ${{ toJson(github) }} | ||
run: | | ||
echo "$GITHUB_CONTEXT" | ||
- name: Announce success | ||
run: echo "Build is successful" | ||
codeowners-check: | ||
name: Lint CODEOWNERS | ||
runs-on: ec2-runners | ||
env: | ||
CHECK: 'false' | ||
container: | ||
image: public.ecr.aws/m3u4c4h9/island-is/actions-runner-public:latest | ||
|
||
steps: | ||
- name: Codeowners validation | ||
run: | | ||
exit 0 |
15 changes: 15 additions & 0 deletions
15
apps/contentful-apps/components/editors/OverviewLinksEditor/OverviewLinksEditor.css.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { style } from '@vanilla-extract/css' | ||
|
||
export const itemContainer = style({ | ||
display: 'flex', | ||
flexFlow: 'column nowrap', | ||
gap: '16px', | ||
margin: '0 auto', | ||
maxWidth: '768px', | ||
}) | ||
|
||
export const createCategoryCardButtonContainer = style({ | ||
display: 'flex', | ||
justifyContent: 'center', | ||
marginTop: '32px', | ||
}) |
251 changes: 251 additions & 0 deletions
251
apps/contentful-apps/components/editors/OverviewLinksEditor/OverviewLinksEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,251 @@ | ||
import { useMemo, useState } from 'react' | ||
import { useDebounce } from 'react-use' | ||
import dynamic from 'next/dynamic' | ||
import { type EditorExtensionSDK } from '@contentful/app-sdk' | ||
import { | ||
Box, | ||
Button, | ||
FormControl, | ||
MenuItem, | ||
Select, | ||
} from '@contentful/f36-components' | ||
import { PlusIcon } from '@contentful/f36-icons' | ||
import { useSDK } from '@contentful/react-apps-toolkit' | ||
|
||
import { CustomSortableContext } from '../../sortable/CustomSortableContext' | ||
import { SortableEntryCard } from '../../sortable/SortableEntryCard' | ||
import { mapLocalesToFieldApis } from '../utils' | ||
import * as styles from './OverviewLinksEditor.css' | ||
|
||
const ContentfulField = dynamic( | ||
() => | ||
// Dynamically import via client side rendering since the @contentful/default-field-editors package accesses the window and navigator global objects | ||
import('../ContentfulField').then(({ ContentfulField }) => ContentfulField), | ||
{ | ||
ssr: false, | ||
}, | ||
) | ||
|
||
const createLocaleToFieldMapping = (sdk: EditorExtensionSDK) => { | ||
return { | ||
internalTitle: mapLocalesToFieldApis([sdk.locales.default], sdk, 'title'), | ||
displayedTitle: mapLocalesToFieldApis( | ||
sdk.locales.available, | ||
sdk, | ||
'displayedTitle', | ||
), | ||
overviewLinks: mapLocalesToFieldApis( | ||
[sdk.locales.default], | ||
sdk, | ||
'overviewLinks', | ||
), | ||
link: mapLocalesToFieldApis([sdk.locales.default], sdk, 'link'), | ||
hasBorderAbove: mapLocalesToFieldApis( | ||
[sdk.locales.default], | ||
sdk, | ||
'hasBorderAbove', | ||
), | ||
linkData: mapLocalesToFieldApis([sdk.locales.default], sdk, 'linkData'), | ||
} | ||
} | ||
|
||
const generateUniqueId = (linkData: LinkData): string => { | ||
let highestId = 0 | ||
for (const { id } of linkData.categoryCardItems) { | ||
if (Number(id) > highestId) highestId = Number(id) | ||
} | ||
return String(highestId + 1) | ||
} | ||
|
||
enum LinkDataVariant { | ||
IntroLinkImage = 'IntroLinkImage', | ||
CategoryCard = 'CategoryCard', | ||
} | ||
|
||
interface LinkData { | ||
variant: LinkDataVariant | ||
categoryCardItems: { | ||
id: string | ||
title: string | ||
description: string | ||
href: string | ||
}[] | ||
} | ||
|
||
const DEBOUNCE_TIME_IN_MS = 100 | ||
|
||
export const OverviewLinksEditor = () => { | ||
const sdk = useSDK<EditorExtensionSDK>() | ||
const localeToFieldMapping = useMemo(() => { | ||
return createLocaleToFieldMapping(sdk) | ||
}, [sdk]) | ||
|
||
const [linkData, setLinkData] = useState<LinkData>( | ||
sdk.entry.fields.linkData.getValue() || { | ||
variant: LinkDataVariant.IntroLinkImage, | ||
categoryCardItems: [], | ||
}, | ||
) | ||
|
||
useDebounce( | ||
() => { | ||
sdk.entry.fields.linkData.setValue(linkData) | ||
}, | ||
DEBOUNCE_TIME_IN_MS, | ||
[linkData], | ||
) | ||
|
||
return ( | ||
<Box | ||
paddingLeft="spacingS" | ||
paddingRight="spacingS" | ||
paddingTop="spacingL" | ||
paddingBottom="spacingL" | ||
className={styles.itemContainer} | ||
> | ||
<ContentfulField | ||
displayName="Internal Title" | ||
fieldID="internalTitle" | ||
localeToFieldMapping={localeToFieldMapping} | ||
sdk={sdk} | ||
/> | ||
|
||
<ContentfulField | ||
displayName="Has Border Above" | ||
fieldID="hasBorderAbove" | ||
localeToFieldMapping={localeToFieldMapping} | ||
sdk={sdk} | ||
/> | ||
|
||
<FormControl> | ||
<FormControl.Label>Variant</FormControl.Label> | ||
<Select | ||
value={linkData.variant} | ||
onChange={(event) => { | ||
setLinkData((prevLinkData) => ({ | ||
...prevLinkData, | ||
variant: event.target.value as LinkDataVariant, | ||
})) | ||
}} | ||
> | ||
<Select.Option value={LinkDataVariant.IntroLinkImage}> | ||
Intro Link Image | ||
</Select.Option> | ||
<Select.Option value={LinkDataVariant.CategoryCard}> | ||
Category Card | ||
</Select.Option> | ||
</Select> | ||
</FormControl> | ||
|
||
{linkData.variant === LinkDataVariant.CategoryCard && ( | ||
<ContentfulField | ||
displayName="Displayed Title" | ||
fieldID="displayedTitle" | ||
localeToFieldMapping={localeToFieldMapping} | ||
sdk={sdk} | ||
/> | ||
)} | ||
|
||
{linkData.variant === LinkDataVariant.IntroLinkImage && ( | ||
<ContentfulField | ||
displayName="Overview Links" | ||
fieldID="overviewLinks" | ||
localeToFieldMapping={localeToFieldMapping} | ||
sdk={sdk} | ||
widgetId="entryCardsEditor" | ||
/> | ||
)} | ||
|
||
{linkData.variant === LinkDataVariant.CategoryCard && ( | ||
<FormControl> | ||
<FormControl.Label>Overview Links</FormControl.Label> | ||
<CustomSortableContext | ||
containerClassName={styles.itemContainer} | ||
items={linkData.categoryCardItems} | ||
updateItems={(updatedItems: LinkData['categoryCardItems']) => { | ||
setLinkData((prevLinkData) => ({ | ||
...prevLinkData, | ||
categoryCardItems: updatedItems, | ||
})) | ||
}} | ||
renderItem={(item: LinkData['categoryCardItems'][number]) => ( | ||
<SortableEntryCard | ||
key={item.id} | ||
id={item.id} | ||
contentType="Category Card" | ||
title={item.title || 'Untitled'} | ||
description={item.description} | ||
actions={[ | ||
<MenuItem | ||
key="edit" | ||
onClick={async () => { | ||
const updatedItem = await sdk.dialogs.openCurrentApp({ | ||
parameters: { | ||
state: item, | ||
}, | ||
minHeight: 400, | ||
}) | ||
setLinkData((prevLinkData) => ({ | ||
...prevLinkData, | ||
categoryCardItems: prevLinkData.categoryCardItems.map( | ||
(prevItem) => { | ||
if (prevItem.id !== item.id) return prevItem | ||
return updatedItem | ||
}, | ||
), | ||
})) | ||
}} | ||
> | ||
Edit | ||
</MenuItem>, | ||
<MenuItem | ||
key="remove" | ||
onClick={() => { | ||
setLinkData((prevLinkData) => ({ | ||
...prevLinkData, | ||
categoryCardItems: | ||
prevLinkData.categoryCardItems.filter( | ||
({ id }) => item.id !== id, | ||
), | ||
})) | ||
}} | ||
> | ||
Remove | ||
</MenuItem>, | ||
]} | ||
/> | ||
)} | ||
/> | ||
<div className={styles.createCategoryCardButtonContainer}> | ||
<Button | ||
startIcon={<PlusIcon />} | ||
onClick={() => { | ||
setLinkData((prevLinkData) => ({ | ||
...prevLinkData, | ||
categoryCardItems: prevLinkData.categoryCardItems.concat({ | ||
id: generateUniqueId(prevLinkData), | ||
title: '', | ||
description: '', | ||
href: '', | ||
}), | ||
})) | ||
}} | ||
> | ||
Create new card | ||
</Button> | ||
</div> | ||
</FormControl> | ||
)} | ||
|
||
{linkData.variant === LinkDataVariant.CategoryCard && ( | ||
<ContentfulField | ||
displayName="See more link" | ||
fieldID="link" | ||
localeToFieldMapping={localeToFieldMapping} | ||
sdk={sdk} | ||
widgetId="entryLinkEditor" | ||
/> | ||
)} | ||
</Box> | ||
) | ||
} |
16 changes: 16 additions & 0 deletions
16
apps/contentful-apps/components/editors/OverviewLinksEditor/OverviewLinksEditorDialog.css.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { style } from '@vanilla-extract/css' | ||
|
||
export const topRow = style({ | ||
display: 'flex', | ||
justifyContent: 'flex-end', | ||
}) | ||
|
||
export const container = style({ | ||
padding: '16px', | ||
}) | ||
|
||
export const formContainer = style({ | ||
display: 'flex', | ||
flexFlow: 'column nowrap', | ||
gap: '16px', | ||
}) |
Oops, something went wrong.