@vonaffenfels/slate-editor 1.0.1

package/src/SidebarEditor/SidebarEditorField.js

@@ -0,0 +1,249 @@
+import {
+    Button, Icon, Note,
+} from "@contentful/forma-36-react-components";
+
+export const SidebarEditorField = ({
+    field,
+    sdk,
+    storybookElement,
+    fieldKey,
+    value,
+    onChange,
+}) => {
+    const deleteMVPEntry = (fieldKey, index) => {
+        let newMVPValue = JSON.parse(JSON.stringify(storybookElement.attributes[fieldKey]));
+
+        newMVPValue.splice(index, 1);
+
+        if (onChange) {
+            onChange(fieldKey, newMVPValue);
+        }
+    };
+
+    const getInputByField = (field, fieldKey) => {
+        switch (field?.control?.type) {
+            case "text":
+                return <input
+                    type="text"
+                    value={value}
+                    onChange={e => onChange(fieldKey, e.target.value)} />;
+            case "boolean":
+                return (
+                    <div>
+                        <input
+                            type="checkbox"
+                            checked={value}
+                            onChange={e => onChange(fieldKey, e.target.checked)} />
+                    </div>
+                );
+            case "select":
+                return (
+                    <select
+                        value={value}
+                        onChange={e => onChange(fieldKey, e.target.value)}>
+                        {Object.keys(field.control.options).map(key => (
+                            <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
+                        ))}
+                    </select>
+                );
+            case "number":
+                return (
+                    <input
+                        type="number"
+                        value={value}
+                        onChange={e => onChange(fieldKey, e.target.value)} />
+                );
+            case "range":
+                return (
+                    <input
+                        type="range"
+                        min={field.control.min}
+                        max={field.control.max}
+                        step={field.control.step}
+                        value={value}
+                        onChange={e => onChange(fieldKey, e.target.value)} />
+                );
+            case "object":
+                return (
+                    <textarea
+                        value={value}
+                        onChange={e => onChange(fieldKey, e.target.value)} />
+                );
+            case "radio":
+                return (
+                    <div>
+                        {Object.keys(field.control.options).map((key, index) => (
+                            <div key={`radio-option-${key}`}>
+                                <input id={`${fieldKey}-${index}`} type="radio" value={key} name={fieldKey} />
+                                <label htmlFor={`${fieldKey}-${index}`}>{field.control.options[key]}</label>
+                            </div>
+                        ))}
+                    </div>
+                );
+            case "inline-radio":
+                return (
+                    <div>
+                        {Object.keys(field.control.options).map((key, index) => (
+                            <div key={`inline-radio-option-${key}`} className="inline-check-wrapper">
+                                <input id={`${fieldKey}-${index}`} type="radio" value={key} name={fieldKey} />
+                                <label htmlFor={`${fieldKey}-${index}`}>{field.control.options[key]}</label>
+                            </div>
+                        ))}
+                    </div>
+                );
+            case "check":
+                return (
+                    <div>
+                        {Object.keys(field.control.options).map((key, index) => (
+                            <div key={`check-option-${key}`}>
+                                <input id={`${fieldKey}-${index}`} type="checkbox" value={key} name={fieldKey} />
+                                <label htmlFor={`${fieldKey}-${index}`}>{field.control.options[key]}</label>
+                            </div>
+                        ))}
+                    </div>
+                );
+            case "inline-check":
+                return (
+                    <div>
+                        {Object.keys(field.control.options).map((key, index) => (
+                            <div key={`inline-check-option-${key}`} className="inline-check-wrapper">
+                                <input id={`${fieldKey}-${index}`} type="checkbox" value={key} name={fieldKey} />
+                                <label htmlFor={`${fieldKey}-${index}`}>{field.control.options[key]}</label>
+                            </div>
+                        ))}
+                    </div>
+                );
+            case "color":
+                return (
+                    <input
+                        type="color"
+                        value={value}
+                        onChange={e => onChange(fieldKey, e.target.value)} />
+                );
+            case "date":
+                return (
+                    <input
+                        type="date"
+                        value={value}
+                        onChange={e => onChange(fieldKey, e.target.value)} />
+                );
+            case "multi-select":
+                return (
+                    <select
+                        multiple
+                        value={value}
+                        onChange={e => onChange(fieldKey, e.target.value)}>
+                        {Object.keys(field.control.options).map(key => (
+                            <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
+                        ))}
+                    </select>
+                );
+            case "contentful-content":
+                return (
+                    <Button
+                        onClick={() => {
+                            sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
+                                onChange(fieldKey, content);
+                            });
+                        }}
+                        isFullWidth>Auswählen</Button>
+                );
+            case "contentful-contents":
+                return (
+                    <Button
+                        onClick={() => {
+                            sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
+                                onChange(fieldKey, contents);
+                            });
+                        }}
+                        isFullWidth>Auswählen</Button>
+                );
+            case "cloudinary-image":
+                return (
+                    <Button
+                        onClick={() => {
+                            sdk.dialogs.openCurrentApp({
+                                width: "fullWidth",
+                                title: "Select Image",
+                                shouldCloseOnOverlayClick: true,
+                                shouldCloseOnEscapePress: true,
+                                parameters: {type: "cloudinary"},
+                            }).then((image) => {
+                                onChange(fieldKey, image);
+                            });
+                        }}
+                        isFullWidth>Auswählen</Button>
+                );
+            case "cloudinary-images":
+                return (
+                    <Button
+                        onClick={() => {
+                            sdk.dialogs.openCurrentApp({
+                                width: "fullWidth",
+                                title: "Select Images",
+                                shouldCloseOnOverlayClick: true,
+                                shouldCloseOnEscapePress: true,
+                                parameters: {
+                                    type: "cloudinary",
+                                    multiple: true,
+                                },
+                            }).then((images) => {
+                                onChange(fieldKey, images);
+                            });
+                        }}
+                        isFullWidth>Auswählen</Button>
+                );
+            case "mvp":
+                return (
+                    <>
+                        {storybookElement?.attributes[fieldKey]?.map((f, index) => {
+                            return (
+                                <div className="mb-4" key={`mvp-${index}`}>
+                                    <div className="mb-2 flex items-center">
+                                        <b className="grow">{field.name} [{index.toString()}]</b>
+                                        <div className="cursor-pointer p-1" onClick={() => deleteMVPEntry(fieldKey, index)}><Icon icon="Delete" /></div>
+                                    </div>
+                                    {Object.keys(field.control.fields).map((key, mvpIndex) => {
+                                        let mvpField = field.control.fields[key];
+
+                                        value = storybookElement.attributes?.[fieldKey]?.[index]?.[key];
+
+                                        return (
+                                            <div key={`mvp-field-${key}`}>
+                                                <SidebarEditorField
+                                                    field={mvpField}
+                                                    fieldKey={fieldKey}
+                                                    value={value}
+                                                    storybookElement={storybookElement}
+                                                    sdk={sdk}
+                                                    onChange={(fK, value) => onChange(
+                                                        fK, value, key, index,
+                                                    )} />
+                                            </div>
+                                        );
+                                    })}
+                                    <hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}} />
+                                </div>
+                            );
+                        })}
+                        <Button onClick={() => onChange(fieldKey, [...storybookElement.attributes[fieldKey], {}])}>Neue Zeile</Button>
+                    </>
+                );
+            default:
+                return <Note noteType="negative">Keine Konfiguration zu Feldtyp "{field?.control?.type}" gefunden</Note>;
+        }
+    };
+
+    const inputField = getInputByField(field, fieldKey);
+
+    if (!inputField) {
+        return null;
+    }
+
+    return (
+        <div key={`${field.name}`} className="mb-2">
+            <label>{field.name}</label>
+            {inputField}
+        </div>
+    );
+};

package/src/SidebarEditor.css

@@ -0,0 +1,90 @@
+* {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+}
+
+#sidebar-editor {
+    background-color: rgb(247, 249, 250);
+    height: 100%;
+    overflow-y: auto;
+    flex-basis: 400px;
+    flex-shrink: 0;
+    padding: 61px 16px 16px 16px;
+}
+
+select {
+    font-size: 0.875rem !important;
+    color: rgb(90, 101, 124) !important;
+    background-color: white !important;
+    border: 1px solid #cfd9e0 !important;
+    border-radius: 6px !important;
+    box-shadow: none !important;
+    filter: none !important;
+}
+
+p, label {
+    color: rgb(90, 101, 124);
+}
+
+label {
+    display: block;
+    margin: 0 0 4px 0 !important;
+}
+
+input[type="text"],
+input[type="number"],
+input[type="color"],
+input[type="date"],
+textarea {
+    display: block;
+    font-size: 0.875rem !important;
+    color: rgb(90, 101, 124) !important;
+    background-color: white !important;
+    border: 1px solid #cfd9e0 !important;
+    border-radius: 6px !important;
+    box-shadow: none !important;
+    filter: none !important;
+    width: 100% !important;
+    padding: 8px 0.75rem;
+}
+
+input[type="color"] {
+    padding: 0;
+}
+
+input[type="range"] {
+    display: block;
+    width: 100%;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+    margin-right: 4px;
+}
+
+/* button[data-test-id="cf-ui-button"] span {
+    color: #036fe3 !important;
+}
+
+button[data-test-id="cf-ui-button"] svg {
+    fill: #036fe3 !important;
+}
+
+button[data-test-id="cf-ui-button"]:hover span {
+    color: #FFFFFF !important;
+}
+
+button[data-test-id="cf-ui-button"]:hover svg {
+    fill: #FFFFFF !important;
+} */
+
+.inline-check-wrapper {
+    display: inline-block;
+    margin-right: 8px;
+}
+
+button {
+    width: 100%;
+    padding: 8px !important;
+    color: #036fe3 !important;
+    border: 1px solid #036fe3 !important;
+}

package/src/SidebarEditor.js

@@ -0,0 +1,236 @@
+import {
+    Accordion,
+    AccordionItem,
+    Button,
+    FormLabel,
+    Note,
+    Switch,
+    Heading,
+    IconButton,
+    Icon,
+} from "@contentful/forma-36-react-components";
+
+import "./SidebarEditor.css";
+import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
+import {ToolMargin} from "./Tools/Margin";
+
+const SidebarEditor = ({
+    sdk,
+    storybookElement,
+    storybookStories,
+    onClose,
+    onChange,
+    onDelete,
+    onMove,
+}) => {
+    const fields = {
+        fields: {},
+        tables: {},
+    };
+
+    const story = storybookStories.find(v => storybookElement.block === v.id);
+
+    if (story) {
+        Object.keys(story.argTypes).forEach(key => {
+            const argType = story.argTypes[key];
+
+            if (argType.table?.category) {
+                if (fields.tables[argType.table.category]) {
+                    fields.tables[argType.table.category][key] = argType;
+                } else {
+                    fields.tables[argType.table.category] = {[key]: argType};
+                }
+            } else {
+                fields.fields[key] = argType;
+            }
+        });
+    }
+
+    const handleFieldValueChange = (
+        fieldKey, value, mvpFieldKey, mvpIndex,
+    ) => {
+        if (onChange) {
+            if (mvpFieldKey !== undefined && mvpIndex !== undefined) {
+                let newMVPValue = storybookElement.attributes[fieldKey].map((f, index) => {
+                    if (index === mvpIndex) {
+                        return {
+                            ...f,
+                            [mvpFieldKey]: value,
+                        };
+                    }
+
+                    return f;
+                });
+
+                onChange({
+                    ...storybookElement,
+                    attributes: {
+                        ...storybookElement.attributes,
+                        [fieldKey]: newMVPValue,
+                    },
+                });
+            } else {
+                onChange({
+                    ...storybookElement,
+                    attributes: {
+                        ...storybookElement.attributes,
+                        [fieldKey]: value,
+                    },
+                });
+            }
+        }
+    };
+
+    return (
+        <div id="sidebar-editor">
+            <BlockSelect stories={storybookStories} active={storybookElement} onChange={onChange}/>
+            {storybookElement?.block && (
+                <div>
+                    <div>
+                        <div className="flex">
+                            <div className="grow">
+                                <Heading>{storybookElement.block}</Heading>
+                            </div>
+                            {!!onClose && <div className="cursor-pointer p-1" onClick={onClose}><Icon icon="Close" /></div>}
+                        </div>
+                        <VariantSelect story={story} onChange={onChange}/>
+                    </div>
+                    <div className="flex items-center">
+                        <select
+                            value={storybookElement.attributes.blockWidth}
+                            onChange={e => handleFieldValueChange("blockWidth", e.target.value)}
+                            className="grow">
+                            <option disabled>Breite wählen</option>
+                            <option value={undefined}>Volle Breite</option>
+                            <option value={"article"}>Artikel Breite</option>
+                            <option value={"site"}>Seiten Breite</option>
+                            <option value={"small"}>Klein</option>
+                        </select>
+                        <div className="cursor-pointer p-2" title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")}>
+                            ↑
+                        </div>
+                        <div className="cursor-pointer p-2" title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")}>
+                            ↓
+                        </div>
+                        <div className="p-2 pt-3">
+                            <ToolMargin
+                                margin={storybookElement.attributes.margin}
+                                onChange={value => handleFieldValueChange("margin", value)} />
+                        </div>
+                        <div className="cursor-pointer p-2" title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
+                            🗑
+                        </div>
+                    </div>
+                    <hr className="my-4" style={{borderColor: "rgb(174, 193, 204)"}}/>
+                </div>
+            )}
+            {!!story && (
+                <>
+                    {Object.keys(fields.fields).map(key => {
+                        const field = fields.fields[key];
+
+                        return <SidebarEditorField
+                            sdk={sdk}
+                            value={storybookElement?.attributes?.[key]}
+                            key={key}
+                            storybookElement={storybookElement}
+                            fieldKey={key}
+                            field={field}
+                            onChange={(
+                                key, value, mvpField, mvpIndex,
+                            ) => handleFieldValueChange(
+                                key, value, mvpField, mvpIndex,
+                            )}
+                        />;
+                    })}
+                    <Accordion>
+                        {Object.keys(fields.tables).map(tableKey => {
+                            return (
+                                <AccordionItem key={`accordion-item-${tableKey}`} title={tableKey}>
+                                    {Object.keys(fields.tables[tableKey]).map(key => {
+                                        const field = fields.tables[tableKey][key];
+
+                                        return <SidebarEditorField
+                                            sdk={sdk}
+                                            value={storybookElement?.attributes?.[key]}
+                                            key={key}
+                                            fieldKey={key}
+                                            story={storybookElement}
+                                            field={field}
+                                            onChange={value => handleFieldValueChange(key, value)}
+                                        />;
+                                    })}
+                                </AccordionItem>
+                            );
+                        })}
+                    </Accordion>
+                </>
+            )}
+        </div>
+    );
+};
+
+const VariantSelect = ({
+    story,
+    onChange,
+}) => {
+    const stories = story?.stories?.filter(s => s.title !== story.title) || [];
+
+    if (stories.length <= 1 || !onChange) {
+        return null;
+    }
+
+    return <select
+        className="mt-2"
+        onChange={e => onChange && onChange({
+            block: story.id,
+            attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
+        })}>
+        <option>Preset wählen</option>
+        {stories.map(s => (
+            <option key={`variant-option-${s.title}`} value={s.title}>{s.title}</option>
+        ))}
+    </select>;
+};
+
+const BlockSelect = ({
+    stories,
+    active,
+    onChange,
+}) => {
+    if (!onChange) {
+        return null;
+    }
+
+    const onSelectChange = (story) => {
+        if (!story) {
+            return onChange({}); // reset to empty
+        }
+
+        // reset to the first story
+        onChange({
+            block: story.id,
+            attributes: {...(story?.stories?.[0]?.args || {})},
+        });
+    };
+
+    return (
+        <select
+            className="mt-2"
+            onChange={e => onSelectChange(stories.find(s => s.id === e.target.value))}
+        >
+            <option>Element wählen</option>
+            {stories.map(s => (
+                <option
+                    key={`variant-option-${s.id}`}
+                    selected={active?.block === s.id}
+                    value={s.id}
+                >
+                    {s.title}
+                </option>
+            ))}
+        </select>
+    );
+};
+
+export default SidebarEditor;