State.update({ data: e.target.value })}
onBlur={(e) => {
- if (props.onBlur) {
+ if (typeof onBlur === "function") {
onBlur({ target: { value: e.target.value } });
}
}}
@@ -191,7 +212,7 @@ const TextInput = ({
value={state.data}
onChange={(e) => State.update({ data: e.target.value })}
onBlur={(e) => {
- if (props.onBlur) {
+ if (typeof onBlur === "function") {
onBlur({ target: { value: e.target.value } });
}
}}
diff --git a/src/devhub/components/molecule/Select.jsx b/src/devhub/components/molecule/Select.jsx
index fac69de9e..81b88d00b 100644
--- a/src/devhub/components/molecule/Select.jsx
+++ b/src/devhub/components/molecule/Select.jsx
@@ -1,6 +1,7 @@
const SelectInput = ({
className,
key,
+ inputProps: { className: inputClassName, ...inputProps },
label,
onChange,
options,
@@ -29,7 +30,7 @@ const SelectInput = ({
+
+);
diff --git a/src/devhub/entity/addon/blogv2/editor/form.jsx b/src/devhub/entity/addon/blogv2/editor/form.jsx
new file mode 100644
index 000000000..cf45b667a
--- /dev/null
+++ b/src/devhub/entity/addon/blogv2/editor/form.jsx
@@ -0,0 +1,209 @@
+const FormContainer = styled.div`
+ & > *:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+`;
+
+const {
+ title,
+ setTitle,
+ subtitle,
+ setSubtitle,
+ options,
+ category,
+ setCategory,
+ description,
+ setDescription,
+ debouncedUpdateState,
+ author,
+ setAuthor,
+ date,
+ setDate,
+ content,
+ setContent,
+} = props;
+
+const InputContainer = ({ heading, description, children }) => {
+ return (
+
+
{heading}
+ {description && (
+
{description}
+ )}
+ {children}
+
+ );
+};
+
+const TitleComponent = useMemo(() => {
+ return (
+
setTitle(e.target.value),
+ skipPaddingGap: true,
+ inputProps: {
+ max: 80,
+ required: true,
+ name: "title",
+ className:
+ "block w-full rounded-md border-0 px-1 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
+ },
+ }}
+ />
+ );
+}, []);
+
+const SubtitleComponent = useMemo(() => {
+ return (
+ setSubtitle(e.target.value),
+ skipPaddingGap: true,
+ inputProps: {
+ required: true,
+ max: 80,
+ name: "subtitle",
+ className:
+ "block w-full rounded-md border-0 px-1 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
+ },
+ }}
+ />
+ );
+}, []);
+
+const CategorySelect = useMemo(() => {
+ return (
+
+ );
+}, []);
+
+const DescriptionInput = useMemo(() => {
+ return (
+ setDescription(e.target.value),
+ value: description,
+ multiline: true,
+ placeholder: "Description",
+ inputProps: {
+ max: 500,
+ name: "description",
+ className:
+ "block w-full rounded-md border-0 px-1 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
+ },
+ skipPaddingGap: true,
+ }}
+ />
+ );
+}, []);
+
+const AuthorInput = useMemo(() => {
+ return (
+ setAuthor(e.target.value),
+ value: author,
+ placeholder: "Author",
+ inputProps: {
+ name: "author",
+ className:
+ "block w-full rounded-md border-0 px-1 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
+ },
+ skipPaddingGap: true,
+ }}
+ />
+ );
+}, []);
+
+const DateInput = () => {
+ return (
+ setDate(e.target.value)}
+ />
+ );
+};
+
+const ContentEditor = useMemo(() => {
+ return (
+
+ );
+}, []);
+
+return (
+
+
+ {TitleComponent}
+
+
+ {SubtitleComponent}
+
+
+ Choose the category that fits your blog best. Set up your categories
+ in the blog settings.
+
+ }
+ >
+ {CategorySelect}
+
+
+
+ {DescriptionInput}
+
+
+ {AuthorInput}
+
+
+
+
+
+
+ {ContentEditor}
+
+
+);
diff --git a/src/devhub/entity/addon/blogv2/editor/index.jsx b/src/devhub/entity/addon/blogv2/editor/index.jsx
new file mode 100644
index 000000000..49e855094
--- /dev/null
+++ b/src/devhub/entity/addon/blogv2/editor/index.jsx
@@ -0,0 +1,90 @@
+let theme = props.theme;
+let variables = props.variables;
+const parametersData = props.data;
+
+if (!variables) {
+ variables = ``;
+}
+
+if (!theme) {
+ theme = ``;
+}
+
+const Root = styled.div`
+ ${variables}
+ ${theme}
+
+ a {
+ text-decoration: none;
+ color: var(--base900);
+ }
+`;
+
+const Container = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+`;
+
+return (
+
+
+ {
+ const { onSubmit, getData, onDelete } = providerProps;
+ return (
+ layout > blogOverview
+ selectedBlog: props.selectedBlog,
+ BlogOverview: (p) => (
+
+ ),
+ BlogPostSettings: (p) => (
+
+ ),
+ Content: (p) => (
+
+ ),
+ }}
+ />
+ );
+ },
+ }}
+ />
+
+
+);
diff --git a/src/devhub/entity/addon/blogv2/editor/layout.jsx b/src/devhub/entity/addon/blogv2/editor/layout.jsx
new file mode 100644
index 000000000..fff6a1cc1
--- /dev/null
+++ b/src/devhub/entity/addon/blogv2/editor/layout.jsx
@@ -0,0 +1,148 @@
+const {
+ BlogOverview,
+ data: processedBlogData,
+ Content,
+ parametersData,
+ onSubmit,
+ BlogPostSettings,
+ selectedBlog,
+} = props;
+
+const [selectedItem, setSelectedItem] = useState(
+ selectedBlog ? selectedBlog : null
+);
+const [selectedItemChanged, setSelectedItemChanged] = useState(false);
+
+const [showScreen, setShowScreen] = useState(
+ selectedBlog ? "editor" : "overview"
+); // overview, editor, settings
+
+const openBlogPostSettings = () => {
+ setShowScreen(true);
+};
+
+const [isSwitchBlogModalOpen, setIsSwitchBlogModalOpen] = useState(false);
+
+// This function checks for unsaved changes and shows a modal if there are any
+const checkForUnsavedChanges = (item) => {
+ const unsavedChanges = selectedItemChanged;
+ // If the user has edited show the confirm modal otherwise just switch
+ if (unsavedChanges) {
+ setIsSwitchBlogModalOpen(item);
+ } else {
+ handleItemClick(item);
+ }
+};
+
+// This function
+const handleItemClick = (item) => {
+ if (item) {
+ setSelectedItem(item);
+ setShowScreen("editor");
+ } else {
+ setSelectedItem(null);
+ }
+ setSelectedItemChanged(false);
+};
+
+const goBack = () => {
+ setSelectedItem(null);
+ setShowScreen("overview");
+ setSelectedItemChanged(false);
+};
+
+const postHogHref = "https://eu.posthog.com/project/20896";
+
+return (
+
+ {showScreen === "settings" ? (
+
setShowScreen("overview")} />
+ ) : (
+ <>
+ {showScreen === "editor" ? null : (
+
+
Blog Posts
+
+
+ Analytics
+
+ {/* */}
+ {
+ handleItemClick("new");
+ setShowScreen("editor");
+ },
+ testId: "new-blog-post-button",
+ }}
+ />
+
+
+
+
+ setIsSwitchBlogModalOpen(false),
+ onConfirmClick: () => {
+ handleItemClick(isSwitchBlogModalOpen);
+ setIsSwitchBlogModalOpen(false);
+ },
+ title: "Are you sure you want to continue?",
+ content: "Unsaved changes will be lost.",
+ confirmLabel: "Continue",
+ cancelLabel: "Cancel",
+ buttonRoot: "btn-danger",
+ }}
+ />
+
+ {showScreen === "editor" && (
+
+
+
+ )}
+