Added Accordion and AccordionItem Components

src/keystatic/components/general/accordion.ts

@@ -0,0 +1,32 @@
+import { listCollapseIcon } from '@keystar/ui/icon/icons/listCollapseIcon';
+import { repeating, wrapper } from '@keystatic/core/content-components';
+import { fields } from '@keystatic/core';
+
+const accordionComponents = {
+  Accordion: repeating({
+    label: 'Accordion',
+    icon: listCollapseIcon,
+    children: ['AccordionItem'],
+    schema: {},
+  }),
+  AccordionItem: wrapper({
+    label: 'Accordion Item',
+    forSpecificLocations: true,
+    schema: {
+      title: fields.text({
+        label: 'Title',
+        validation: {
+          length: {
+            min: 1,
+          },
+        },
+      }),
+      defaultOpen: fields.checkbox({
+        label: 'Open by default',
+        defaultValue: false,
+      }),
+    },
+  }),
+};
+
+export default accordionComponents;

src/keystatic/components/general/definitionlist.ts

@@ -2,7 +2,7 @@ import { listTreeIcon } from '@keystar/ui/icon/icons/listTreeIcon';
 import { fields } from '@keystatic/core';
 import { repeating, block } from '@keystatic/core/content-components';
 
-export const definitionlistComponents = {
+const definitionlistComponents = {
   DefinitionList: repeating({
     label: 'Definition List',
     icon: listTreeIcon,
@@ -11,6 +11,7 @@ export const definitionlistComponents = {
   }),
   DefinitionItem: block({
     label: 'Definition Item',
+    forSpecificLocations: true,
     schema: {
       term: fields.text({ label: 'Term' }),
       definitions: fields.array(
@@ -23,3 +24,5 @@ export const definitionlistComponents = {
     },
   }),
 };
+
+export default definitionlistComponents;

src/keystatic/components/general/grid.ts

@@ -2,7 +2,7 @@ import { grid2X2Icon } from '@keystar/ui/icon/icons/grid2X2Icon';
 import { fields } from '@keystatic/core';
 import { repeating, wrapper } from '@keystatic/core/content-components';
 
-export const gridComponents = {
+const gridComponents = {
   Row: repeating({
     label: 'Row',
     icon: grid2X2Icon,
@@ -59,3 +59,4 @@ export const gridComponents = {
     },
   }),
 };
+export default gridComponents;

src/keystatic/components/general/index.ts

@@ -1,9 +1,11 @@
-import { gridComponents } from '@/keystatic/components/general/grid';
-import { sidenoteComponents } from '@/keystatic/components/general/sidenote';
-import { definitionlistComponents } from '@/keystatic/components/general/definitionlist';
+import gridComponents from '@/keystatic/components/general/grid';
+import sidenoteComponents from '@/keystatic/components/general/sidenote';
+import definitionlistComponents from '@/keystatic/components/general/definitionlist';
+import accordionComponents from '@/keystatic/components/general/accordion';
 
 export const generalComponents = {
   ...gridComponents,
   ...sidenoteComponents,
   ...definitionlistComponents,
+  ...accordionComponents,
 };

src/keystatic/components/general/sidenote.ts

@@ -2,7 +2,7 @@ import { panelRightDashedIcon } from '@keystar/ui/icon/icons/panelRightDashedIco
 import { fields } from '@keystatic/core';
 import { inline } from '@keystatic/core/content-components';
 
-export const sidenoteComponents = {
+const sidenoteComponents = {
   Sidenote: inline({
     label: 'Sidenote',
     icon: panelRightDashedIcon,
@@ -57,3 +57,5 @@ export const sidenoteComponents = {
     },
   }),
 };
+
+export default sidenoteComponents;