From 3d6dcbd80866fad6e2b156e84421c4298d4f6e67 Mon Sep 17 00:00:00 2001 From: Francis Bulus Date: Mon, 17 Jan 2022 05:38:08 +0100 Subject: [PATCH 01/15] setting up quick guide status check --- src/Editmode.jsx | 17 ++++++++++++++--- src/useChunk.js | 23 +++++++++++------------ 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/Editmode.jsx b/src/Editmode.jsx index b06ed34..c97ca0a 100644 --- a/src/Editmode.jsx +++ b/src/Editmode.jsx @@ -27,6 +27,17 @@ export function Editmode({ throw new Error(" is missing a valid projectId"); } const cacheId = projectId + "_provider"; + useEffect(() => { + let quickGuideUrl = `/quick_guide_status/${projectId}`; + api + .get(quickGuideUrl) + .then((res) => { + console.log(res.data); + }) + .catch((error) => { + console.error(error); + }); + }, []); useEffect(() => { let params = new URL(document.location.href).searchParams; branchId ? setbranch(branchId) : setbranch(params.get("em_branch_id")); @@ -45,13 +56,13 @@ export function Editmode({ script.src = "https://unpkg.com/editmode-magic-editor@~1/dist/magic-editor.js"; - + if (!window["magicEditorInjected"]) { script.setAttribute("async", ""); document.body.append(script); - window["magicEditorInjected"] = true + window["magicEditorInjected"] = true; } - + if (!cachedItem) { api .get(`/projects/${projectId}`) diff --git a/src/useChunk.js b/src/useChunk.js index a2933c5..3b891df 100644 --- a/src/useChunk.js +++ b/src/useChunk.js @@ -9,15 +9,16 @@ import { getCachedData, storeCache, setDefaultContent, - tryParse + tryParse, } from "./utilities"; export function useChunk( defaultContent, { identifier, type, contentKey, field } ) { - defaultContent = setDefaultContent(defaultContent) - const { projectId, defaultChunks, branch, next } = useContext(EditmodeContext); + defaultContent = setDefaultContent(defaultContent); + const { projectId, defaultChunks, branch, next } = + useContext(EditmodeContext); let [chunk, setChunk] = useState(undefined); if (!contentKey) { @@ -53,18 +54,16 @@ export function useChunk( }?project_id=${projectId}&${branchParams}`; if (branchId) cacheId += branchId; let cachedChunk = getCachedData(cacheId); - let newChunk = cachedChunk - && tryParse(cachedChunk) - || fallbackChunk - || { - chunk_type: type || "single_line_text", - content: defaultContent, - content_key: contentKey, - }; + let newChunk = (cachedChunk && tryParse(cachedChunk)) || + fallbackChunk || { + chunk_type: type || "single_line_text", + content: defaultContent, + content_key: contentKey, + }; if (newChunk) setChunk(newChunk); - // Fetch new data + // Fetch new data let error; api .get(url) From 277de1e4b919dc9572a3b9d5c6656d60b6908a95 Mon Sep 17 00:00:00 2001 From: Francis Bulus Date: Mon, 17 Jan 2022 06:05:06 +0100 Subject: [PATCH 02/15] build out mini onboarding lib structure --- src/onboarding/components/Step.js | 183 ++++++++++++++++++ src/onboarding/components/Steps.js | 39 ++++ .../components/renderOnboardingPopup.js | 18 ++ src/onboarding/index.js | 17 ++ src/onboarding/steps/editing/StepFive.js | 32 +++ src/onboarding/steps/editing/StepFour.js | 142 ++++++++++++++ src/onboarding/steps/editing/StepOne.js | 32 +++ src/onboarding/steps/editing/StepThree.js | 133 +++++++++++++ src/onboarding/steps/editing/StepTwo.js | 150 ++++++++++++++ src/onboarding/styles/style.css | 109 +++++++++++ src/onboarding/utils/CONSTANTS.js | 17 ++ src/onboarding/utils/addDefaults.js | 22 +++ src/onboarding/utils/createContainer.js | 13 ++ src/onboarding/utils/removeContainer.js | 6 + 14 files changed, 913 insertions(+) create mode 100644 src/onboarding/components/Step.js create mode 100644 src/onboarding/components/Steps.js create mode 100644 src/onboarding/components/renderOnboardingPopup.js create mode 100644 src/onboarding/index.js create mode 100644 src/onboarding/steps/editing/StepFive.js create mode 100644 src/onboarding/steps/editing/StepFour.js create mode 100644 src/onboarding/steps/editing/StepOne.js create mode 100644 src/onboarding/steps/editing/StepThree.js create mode 100644 src/onboarding/steps/editing/StepTwo.js create mode 100644 src/onboarding/styles/style.css create mode 100644 src/onboarding/utils/CONSTANTS.js create mode 100644 src/onboarding/utils/addDefaults.js create mode 100644 src/onboarding/utils/createContainer.js create mode 100644 src/onboarding/utils/removeContainer.js diff --git a/src/onboarding/components/Step.js b/src/onboarding/components/Step.js new file mode 100644 index 0000000..7ff708a --- /dev/null +++ b/src/onboarding/components/Step.js @@ -0,0 +1,183 @@ +import React, { useState } from "react"; +import { removeContainerElement } from "../utils/removeContainer"; +// import { useRouter } from "next/router"; +// import Router from "next/router"; + +const cn = (...args) => args.filter(Boolean).join(" "); + +export const Step = ({ + step, + isActive, + displayNext, + goToNextStep, + displayFinish, + goToPreviousStep, + displayPrevious, +}) => { + // const router = useRouter(); + const validateFields = () => { + return !step.fields.reduce((valid, field) => { + if (!field.validation) { + return valid & true; + } + return valid & RegExp(field.validation, "gm").test(field.value); + }, true); + }; + + let defaultButtonState = false, + onSubmitCallback = () => { + // This function will be replaced by a custom function + }; + if (step.type === "form") { + defaultButtonState = step.fields.length === 0 ? false : validateFields(); + } else if (step.type === "component") { + defaultButtonState = true; + } + + const [form, setForm] = useState( + Object.assign( + {}, + { + invalid: defaultButtonState, + }, + ...step.fields.map((field) => ({ [field.name]: field.value || "" })) + ) + ); + + if (!isActive) return null; + + const complete = () => { + removeContainerElement(); + // router?.push("/"); + // Router.push({ + // pathname: "/", + // }); + }; + + let buttonText, buttonFunction; + if (displayFinish) { + buttonText = "Finish"; + buttonFunction = complete; + } else if (displayNext) { + buttonText = "Next"; + buttonFunction = goToNextStep; + } + if (step.type === "form" && step.onSubmit) { + const defaultButtonFunction = buttonFunction; + buttonFunction = () => { + if (form.invalid) { + return; + } + const { invalid, ...formData } = form; + step.onSubmit(formData); + defaultButtonFunction(); + }; + } else if (step.type === "component") { + const defaultButtonFunction = buttonFunction; + buttonFunction = () => { + if (onSubmitCallback) { + onSubmitCallback(); + } + defaultButtonFunction(); + }; + } + + const validateForm = (name, value) => { + const validation = step.fields.reduce((data, field) => { + if (!field.validation) { + return data & true; + } + if (field.name === name) { + return data & RegExp(field.validation, "gm").test(value); + } + return data & RegExp(field.validation, "gm").test(form[field.name]); + }, true); + // Valid + return !validation; + }; + + let updateForm; + if (step.type === "form") { + updateForm = (event) => { + const { name, value } = event.target; + setForm({ + ...form, + [name]: value, + invalid: validateForm(name, value), + }); + }; + } + + const setButtonState = (state) => { + setForm({ + ...form, + invalid: state, + }); + }; + + let CustomComponent = null; + if (step.type === "component" && step.component) { + CustomComponent = step.component; + } + + const setOnSubmit = (onSubmit) => { + onSubmitCallback = onSubmit; + }; + + return ( +
+ {step.title &&
{step.title}
} + {step.description && ( +
{step.description}
+ )} + {step.type === "form" && ( +
+ {step.fields.map((field, index) => ( +
+ {field.label && ( + + )} + +
+ ))} +
+ )} + {CustomComponent && ( + + )} +
+ + +
+
+ ); +}; diff --git a/src/onboarding/components/Steps.js b/src/onboarding/components/Steps.js new file mode 100644 index 0000000..8997351 --- /dev/null +++ b/src/onboarding/components/Steps.js @@ -0,0 +1,39 @@ +import React from "react"; + +class Steps extends React.Component { + constructor(props) { + super(props); + + this.state = { + currentStep: 0, + totalSteps: this.props.children.length - 1, + }; + } + + goToPreviousStep = () => { + this.setState({ currentStep: this.state.currentStep - 1 }); + }; + + goToNextStep = () => { + this.setState({ currentStep: this.state.currentStep + 1 }); + }; + + render() { + const children = React.Children.map(this.props.children, (child, index) => { + const { currentStep, totalSteps } = this.state; + + return React.cloneElement(child, { + isActive: index === currentStep, + displayPrevious: currentStep > 0, + displayNext: currentStep < totalSteps, + displayFinish: currentStep === totalSteps, + goToPreviousStep: () => this.goToPreviousStep(), + goToNextStep: () => this.goToNextStep(), + }); + }); + + return children; + } +} + +export { Steps }; diff --git a/src/onboarding/components/renderOnboardingPopup.js b/src/onboarding/components/renderOnboardingPopup.js new file mode 100644 index 0000000..73a7a6a --- /dev/null +++ b/src/onboarding/components/renderOnboardingPopup.js @@ -0,0 +1,18 @@ +import React from "react"; +import { Steps } from "./Steps"; +import { Step } from "./Step"; +import { removeContainerElement } from "../utils/removeContainer"; + +export const renderOnboardingPopup = (config) => ( + <> +
+ + {config.steps.map((step, index) => ( + + ))} + + +); diff --git a/src/onboarding/index.js b/src/onboarding/index.js new file mode 100644 index 0000000..f0f6821 --- /dev/null +++ b/src/onboarding/index.js @@ -0,0 +1,17 @@ +import { render } from "react-dom"; +import "./styles/style.css"; +import { createContainerElement } from "./utils/createContainer"; +import { addDefaults } from "./utils/addDefaults"; +import { renderOnboardingPopup } from "./components/renderOnboardingPopup"; + +const quickOnboarding = (config) => { + if (!Array.isArray(config.steps) || !config.steps.length) { + console.error("Invalid configuration for Onboarding"); + } + const container = createContainerElement(); + + const configWithDefaults = addDefaults(config); + render(renderOnboardingPopup(configWithDefaults), container); +}; + +export default quickOnboarding; diff --git a/src/onboarding/steps/editing/StepFive.js b/src/onboarding/steps/editing/StepFive.js new file mode 100644 index 0000000..89ec942 --- /dev/null +++ b/src/onboarding/steps/editing/StepFive.js @@ -0,0 +1,32 @@ +import React from "react"; + +const StepFive = () => { + return ( +
+
+
+
+
+

+ Wrapping Up +

+

+ We point you towards resources on the broader Editmode ecosystem + in this section. +

+
+
+
+ App screenshot +
+
+
+
+ ); +}; + +export default StepFive; diff --git a/src/onboarding/steps/editing/StepFour.js b/src/onboarding/steps/editing/StepFour.js new file mode 100644 index 0000000..7c97c46 --- /dev/null +++ b/src/onboarding/steps/editing/StepFour.js @@ -0,0 +1,142 @@ +export default function StepFour() { + return ( +
+
+ +
+
+
+

+ + A LITTLE BIT ON THE + + + Admin Panel + +

+
+
+

+ The admin panel is a more robust way of managing the content for + your project(s), via a dashboard-like view, and it can be accessed + by visiting editmode.com and authenticating. +

+

+ It is currently the only way to create non-template projects and add + collaborators (for shared content management capabilities) to your + projects and set permissions. +

+
+
+ App screenshot +
+
+
+ ); +} + +// https://i.imgur.com/sJpZgju.jpg diff --git a/src/onboarding/steps/editing/StepOne.js b/src/onboarding/steps/editing/StepOne.js new file mode 100644 index 0000000..b2cc027 --- /dev/null +++ b/src/onboarding/steps/editing/StepOne.js @@ -0,0 +1,32 @@ +import React from "react"; + +const StepOne = () => { + return ( +
+
+
+
+
+

+ Managing Content +

+

+ In this section, you'll learn how about the two ways - the Magic + Editor and the Admin Panel - in which you can edit content. +

+
+
+
+ App screenshot +
+
+
+
+ ); +}; + +export default StepOne; diff --git a/src/onboarding/steps/editing/StepThree.js b/src/onboarding/steps/editing/StepThree.js new file mode 100644 index 0000000..adea522 --- /dev/null +++ b/src/onboarding/steps/editing/StepThree.js @@ -0,0 +1,133 @@ +export default function StepThree() { + return ( +
+
+ +
+
+
+

+ + Demo + + + The Magic Editor in Action + +

+
+
+

+ Seamless inline edits being made with no code changes required. +

+
+
+ App screenshot +
+
+
+ ); +} diff --git a/src/onboarding/steps/editing/StepTwo.js b/src/onboarding/steps/editing/StepTwo.js new file mode 100644 index 0000000..e38029a --- /dev/null +++ b/src/onboarding/steps/editing/StepTwo.js @@ -0,0 +1,150 @@ +export default function StepTwo() { + return ( +
+
+ +
+
+
+

+ + Introducing + + + The Magic Editor + +

+
+
+

+ The Magic Editor lets you make changes to your theme inline i.e + directly on the page that the content appears. +

+
+

+ + How it Works + +

+
+ +
    +
  • + Step 1: Hit the keyboard + shortcut - CMD/CTRL + Shift + E - to activate the editor{" "} +
    • +
  • + Step 2: Find the content you + want to change, and modify it as you please. +
    • +
  • + Step 3: When you're done, click + "Save Changes" on the Editmode bar at the top-right corner of your + screen +
    • +
+
+
+
+ ); +} diff --git a/src/onboarding/styles/style.css b/src/onboarding/styles/style.css new file mode 100644 index 0000000..d0b7622 --- /dev/null +++ b/src/onboarding/styles/style.css @@ -0,0 +1,109 @@ +.full-screen { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.react-onboarding-pro-container { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 999; + display: flex; + justify-content: center; + align-items: center; +} +.react-onboarding-pro-blur-background { + backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + transition: 200ms ease-in-out all; +} +.rop-step { + width: calc(100% - 20px); + max-width: 800px; + margin: 20px; + min-height: 300px; + border-radius: 10px; + box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13); + padding: 20px 20px 55px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + background-color: white; +} +.rop-title { + font-weight: bold; + font-size: 1.2rem; + text-align: center; + line-height: 2.5rem; +} +.rop-description { + text-align: center; +} +.rop-button-container { + text-align: right; + width: calc(100% - 40px); + position: absolute; + bottom: 20px; +} +.rop-button { + padding: 8px 24px; + font-size: 14px; + border-radius: 5px; + /* background-color: #363636; */ + background-color: #3f51b5; + color: white; + border: none; + cursor: pointer; + letter-spacing: 1px; +} +.rop-button:hover, +.rop-button:focus { + background-color: black; + /* background-color: #3f51b5; */ + outline: none; +} +.rop-button[disabled] { + background-color: #969696; +} +.rop-form { + width: 100%; + max-width: 600px; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: center; +} +.rop-input-container { + display: flex; + flex-direction: column; + margin: 5px; +} +.rop-input-label { + margin: 0 0 2px 2px; + font-size: 14px; + color: #363636; +} +.rop-form .rop-input { + line-height: 1.5rem; + font-size: 16px; + padding: 2px 5px; + letter-spacing: 1px; + border-radius: 5px; + border: 2px solid #eee; +} +.rop-form .rop-input:focus { + border-color: #ddd; + outline: none; +} + +@media only screen and (max-width: 600px) { + .react-onboarding-pro-container { + align-items: flex-end; + } +} diff --git a/src/onboarding/utils/CONSTANTS.js b/src/onboarding/utils/CONSTANTS.js new file mode 100644 index 0000000..2f1a4d1 --- /dev/null +++ b/src/onboarding/utils/CONSTANTS.js @@ -0,0 +1,17 @@ +export const CONTAINER_CLASS = 'react-onboarding-pro-container'; +export const DEFAULT_STEP_CONFIG = { + title: '', + description: '', + type: '', + component: null, + props: {}, + fields: [], + onSubmit: () => { } +} +export const DEFAULT_FIELD_CONFIG = { + label: '', + name: '', + type: '', + placeholder: '', + validation: '' +} diff --git a/src/onboarding/utils/addDefaults.js b/src/onboarding/utils/addDefaults.js new file mode 100644 index 0000000..59799b3 --- /dev/null +++ b/src/onboarding/utils/addDefaults.js @@ -0,0 +1,22 @@ +import { DEFAULT_STEP_CONFIG, DEFAULT_FIELD_CONFIG } from "./CONSTANTS"; + + +export const addDefaults = (config) => { + config.steps = config.steps.map(step => { + return Object.assign( + {}, + DEFAULT_STEP_CONFIG, + step, + { + fields: (step.fields || []).map(field => { + return Object.assign( + {}, + DEFAULT_FIELD_CONFIG, + field + ) + }) + } + ) + }); + return config; +} diff --git a/src/onboarding/utils/createContainer.js b/src/onboarding/utils/createContainer.js new file mode 100644 index 0000000..65c6d30 --- /dev/null +++ b/src/onboarding/utils/createContainer.js @@ -0,0 +1,13 @@ +import { CONTAINER_CLASS } from "./CONSTANTS"; + +export const createContainerElement = () => { + let containerDiv = document.querySelector(`.${CONTAINER_CLASS}`); + if (containerDiv) { + return containerDiv; + } + containerDiv = document.createElement('div'); + containerDiv.classList.add(CONTAINER_CLASS); + containerDiv.classList.add('full-screen'); + document.body.append(containerDiv); + return containerDiv; +} \ No newline at end of file diff --git a/src/onboarding/utils/removeContainer.js b/src/onboarding/utils/removeContainer.js new file mode 100644 index 0000000..918be28 --- /dev/null +++ b/src/onboarding/utils/removeContainer.js @@ -0,0 +1,6 @@ +import { CONTAINER_CLASS } from "./CONSTANTS"; + +export const removeContainerElement = () => { + let containerDiv = document.querySelector(`.${CONTAINER_CLASS}`); + containerDiv.remove(); +}; From 7c4fc897090f82a9491539668ab8412477486fea Mon Sep 17 00:00:00 2001 From: Francis Bulus Date: Mon, 17 Jan 2022 06:10:20 +0100 Subject: [PATCH 03/15] add core convepts section to onboarding --- .../steps/coreConcepts/Steps/StepFive.js | 93 +++++++++++ .../steps/coreConcepts/Steps/StepFour.js | 95 +++++++++++ .../steps/coreConcepts/Steps/StepOne.js | 32 ++++ .../steps/coreConcepts/Steps/StepSix.js | 134 +++++++++++++++ .../steps/coreConcepts/Steps/StepThree.js | 25 +++ .../steps/coreConcepts/Steps/StepTwo.js | 156 ++++++++++++++++++ 6 files changed, 535 insertions(+) create mode 100644 src/onboarding/steps/coreConcepts/Steps/StepFive.js create mode 100644 src/onboarding/steps/coreConcepts/Steps/StepFour.js create mode 100644 src/onboarding/steps/coreConcepts/Steps/StepOne.js create mode 100644 src/onboarding/steps/coreConcepts/Steps/StepSix.js create mode 100644 src/onboarding/steps/coreConcepts/Steps/StepThree.js create mode 100644 src/onboarding/steps/coreConcepts/Steps/StepTwo.js diff --git a/src/onboarding/steps/coreConcepts/Steps/StepFive.js b/src/onboarding/steps/coreConcepts/Steps/StepFive.js new file mode 100644 index 0000000..449875a --- /dev/null +++ b/src/onboarding/steps/coreConcepts/Steps/StepFive.js @@ -0,0 +1,93 @@ +export default function StepThree() { + return ( +
+
+ +
+
+
+

+ + Core Concept #2 + + + Collections + +

+
+
+

+ A collection is a group of chunks with the same fields. For example, you might have a "Team Member" collection, which has the fields First Name, Last Name, Title and Headshot.

+
+

Fields can hold different types of information. For example, the First Name field above would hold text, whereas the Headshot field would hold an image.

+
+
+
+
+ ) + } + \ No newline at end of file diff --git a/src/onboarding/steps/coreConcepts/Steps/StepFour.js b/src/onboarding/steps/coreConcepts/Steps/StepFour.js new file mode 100644 index 0000000..5925d86 --- /dev/null +++ b/src/onboarding/steps/coreConcepts/Steps/StepFour.js @@ -0,0 +1,95 @@ +export default function StepTwo() { + return ( +
+
+ +
+
+
+

+ + Core Concept #1 + + + Chunks + +

+
+
+

+ A chunk is a piece of content that takes the form of plain text, rich text or an image.

+
+

A chunk is represented by an alphanumeric identifier, which can be used to identify and access that chunk from elsewhere.

+
+

Chunks can store anything from a single heading to links, paragraphs and formatting. +

+
+
+
+ ) + } + \ No newline at end of file diff --git a/src/onboarding/steps/coreConcepts/Steps/StepOne.js b/src/onboarding/steps/coreConcepts/Steps/StepOne.js new file mode 100644 index 0000000..edc9d0f --- /dev/null +++ b/src/onboarding/steps/coreConcepts/Steps/StepOne.js @@ -0,0 +1,32 @@ +import React from "react"; + +const StepZero = () => { + return ( +
+
+
+
+
+

+ Welcome +

+

+ In this section, you'll learn a little a bit about what Editmode + does. +

+
+
+
+ App screenshot +
+
+
+
+ ); +}; + +export default StepZero; diff --git a/src/onboarding/steps/coreConcepts/Steps/StepSix.js b/src/onboarding/steps/coreConcepts/Steps/StepSix.js new file mode 100644 index 0000000..0361181 --- /dev/null +++ b/src/onboarding/steps/coreConcepts/Steps/StepSix.js @@ -0,0 +1,134 @@ +export default function StepFour() { + return ( +
+
+ +
+
+
+

+ + Core Concept #3 + + + Tags + +

+
+
+

+ Tags help you group chunks together to make it easier to keep track + of them on editmode.com +

+
+

+ Say, you have a page on your website with a chunk for your heading + and description. To easily find these chunks, it is useful to be + able to group them. +

+
+
+
+
+ ); +} diff --git a/src/onboarding/steps/coreConcepts/Steps/StepThree.js b/src/onboarding/steps/coreConcepts/Steps/StepThree.js new file mode 100644 index 0000000..ce1d829 --- /dev/null +++ b/src/onboarding/steps/coreConcepts/Steps/StepThree.js @@ -0,0 +1,25 @@ +import React from 'react' + +const StepOne = () => { +return ( +
+
+
+
+
+

+ Core Concepts +

+

In this section, you'll learn the definitions of core concepts in Editmode like chunks, collections, and tags.

+
+
+
+ App screenshot +
+
+
+
+) +} + +export default StepOne \ No newline at end of file diff --git a/src/onboarding/steps/coreConcepts/Steps/StepTwo.js b/src/onboarding/steps/coreConcepts/Steps/StepTwo.js new file mode 100644 index 0000000..a3dbe76 --- /dev/null +++ b/src/onboarding/steps/coreConcepts/Steps/StepTwo.js @@ -0,0 +1,156 @@ +export default function StepHalf() { + return ( +
+
+ +
+
+
+

+ + Welcome To + + + Editmode + +

+
+
+

+ Editmode is one place in which you - or your team - can create, + manage and update content for your website or web app in a safe, + secure way. +

+

+ It's designed to eliminate code alterations when making changes to + content of all kinds. +

+
+

+ + A FEW THINGS YOU CAN DO WITH EDITMODE + +

+
+ +
    +
  • + {/* Step 1: Hit the keyboard + shortcut - CMD/CTRL + Shift + E - to activate the editor{" "} */} + Make content changes to websites and web apps without involving a + developer +
    • +
  • Modify content inline on your website
    • +
  • + Collaborate on content changes and share internally before + publishing +
    • +
+
+
+
+ ); +} From 8e20111aa7ef7dae1ae73107bae7c1c4fdbc60a9 Mon Sep 17 00:00:00 2001 From: Francis Bulus Date: Mon, 17 Jan 2022 06:11:44 +0100 Subject: [PATCH 04/15] move core concept steps in steps root --- src/onboarding/steps/coreConcepts/{Steps => }/StepFive.js | 0 src/onboarding/steps/coreConcepts/{Steps => }/StepFour.js | 0 src/onboarding/steps/coreConcepts/{Steps => }/StepOne.js | 0 src/onboarding/steps/coreConcepts/{Steps => }/StepSix.js | 0 src/onboarding/steps/coreConcepts/{Steps => }/StepThree.js | 0 src/onboarding/steps/coreConcepts/{Steps => }/StepTwo.js | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename src/onboarding/steps/coreConcepts/{Steps => }/StepFive.js (100%) rename src/onboarding/steps/coreConcepts/{Steps => }/StepFour.js (100%) rename src/onboarding/steps/coreConcepts/{Steps => }/StepOne.js (100%) rename src/onboarding/steps/coreConcepts/{Steps => }/StepSix.js (100%) rename src/onboarding/steps/coreConcepts/{Steps => }/StepThree.js (100%) rename src/onboarding/steps/coreConcepts/{Steps => }/StepTwo.js (100%) diff --git a/src/onboarding/steps/coreConcepts/Steps/StepFive.js b/src/onboarding/steps/coreConcepts/StepFive.js similarity index 100% rename from src/onboarding/steps/coreConcepts/Steps/StepFive.js rename to src/onboarding/steps/coreConcepts/StepFive.js diff --git a/src/onboarding/steps/coreConcepts/Steps/StepFour.js b/src/onboarding/steps/coreConcepts/StepFour.js similarity index 100% rename from src/onboarding/steps/coreConcepts/Steps/StepFour.js rename to src/onboarding/steps/coreConcepts/StepFour.js diff --git a/src/onboarding/steps/coreConcepts/Steps/StepOne.js b/src/onboarding/steps/coreConcepts/StepOne.js similarity index 100% rename from src/onboarding/steps/coreConcepts/Steps/StepOne.js rename to src/onboarding/steps/coreConcepts/StepOne.js diff --git a/src/onboarding/steps/coreConcepts/Steps/StepSix.js b/src/onboarding/steps/coreConcepts/StepSix.js similarity index 100% rename from src/onboarding/steps/coreConcepts/Steps/StepSix.js rename to src/onboarding/steps/coreConcepts/StepSix.js diff --git a/src/onboarding/steps/coreConcepts/Steps/StepThree.js b/src/onboarding/steps/coreConcepts/StepThree.js similarity index 100% rename from src/onboarding/steps/coreConcepts/Steps/StepThree.js rename to src/onboarding/steps/coreConcepts/StepThree.js diff --git a/src/onboarding/steps/coreConcepts/Steps/StepTwo.js b/src/onboarding/steps/coreConcepts/StepTwo.js similarity index 100% rename from src/onboarding/steps/coreConcepts/Steps/StepTwo.js rename to src/onboarding/steps/coreConcepts/StepTwo.js From dd4ac2f59996d1946604431c2b0ea12cbca1bfa9 Mon Sep 17 00:00:00 2001 From: Francis Bulus Date: Mon, 17 Jan 2022 07:19:40 +0100 Subject: [PATCH 05/15] export render for onboarding --- src/index.js | 1 + src/onboarding/index.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 642353e..2c1b30e 100644 --- a/src/index.js +++ b/src/index.js @@ -10,3 +10,4 @@ export { useCollectionChunks } from "./useCollectionChunks"; export { CustomChunkCollection } from "./CustomChunkCollection.jsx"; export { ChunkCollectionContext } from "./ChunkCollectionContext.js"; export { CollectionItemWrapper } from "./CollectionItemWrapper.jsx"; +export { renderOnboarding } from "./onboarding/index.js"; diff --git a/src/onboarding/index.js b/src/onboarding/index.js index f0f6821..bb05adb 100644 --- a/src/onboarding/index.js +++ b/src/onboarding/index.js @@ -4,7 +4,7 @@ import { createContainerElement } from "./utils/createContainer"; import { addDefaults } from "./utils/addDefaults"; import { renderOnboardingPopup } from "./components/renderOnboardingPopup"; -const quickOnboarding = (config) => { +export const renderOnboarding = (config) => { if (!Array.isArray(config.steps) || !config.steps.length) { console.error("Invalid configuration for Onboarding"); } @@ -14,4 +14,4 @@ const quickOnboarding = (config) => { render(renderOnboardingPopup(configWithDefaults), container); }; -export default quickOnboarding; +export default renderOnboarding; From 71f7e13f2e88749a5e597a036473a6f65d8c8010 Mon Sep 17 00:00:00 2001 From: Francis Bulus Date: Mon, 17 Jan 2022 08:05:50 +0100 Subject: [PATCH 06/15] fix jsx problem for onboarding --- src/ChunkCollection.jsx | 15 +- src/index.js | 2 +- .../{Step.js => OnboardingStep.jsx} | 13 +- .../{Steps.js => OnboardingSteps.jsx} | 4 +- ...dingPopup.js => renderOnboardingPopup.jsx} | 10 +- src/onboarding/index.js | 17 --- src/onboarding/index.jsx | 95 ++++++++++++ src/onboarding/steps/coreConcepts/StepFive.js | 93 ------------ .../steps/coreConcepts/StepFive.jsx | 137 +++++++++++++++++ src/onboarding/steps/coreConcepts/StepFour.js | 95 ------------ .../steps/coreConcepts/StepFour.jsx | 138 ++++++++++++++++++ .../coreConcepts/{StepOne.js => StepOne.jsx} | 4 +- .../coreConcepts/{StepSix.js => StepSix.jsx} | 3 +- .../steps/coreConcepts/StepThree.js | 25 ---- .../steps/coreConcepts/StepThree.jsx | 32 ++++ .../coreConcepts/{StepTwo.js => StepTwo.jsx} | 4 +- .../editing/{StepFive.js => StepFive.jsx} | 0 .../editing/{StepFour.js => StepFour.jsx} | 1 + .../steps/editing/{StepOne.js => StepOne.jsx} | 0 src/onboarding/steps/editing/StepSix.jsx | 138 ++++++++++++++++++ .../editing/{StepThree.js => StepThree.jsx} | 1 + .../steps/editing/{StepTwo.js => StepTwo.jsx} | 1 + 22 files changed, 567 insertions(+), 261 deletions(-) rename src/onboarding/components/{Step.js => OnboardingStep.jsx} (94%) rename src/onboarding/components/{Steps.js => OnboardingSteps.jsx} (92%) rename src/onboarding/components/{renderOnboardingPopup.js => renderOnboardingPopup.jsx} (63%) delete mode 100644 src/onboarding/index.js create mode 100644 src/onboarding/index.jsx delete mode 100644 src/onboarding/steps/coreConcepts/StepFive.js create mode 100644 src/onboarding/steps/coreConcepts/StepFive.jsx delete mode 100644 src/onboarding/steps/coreConcepts/StepFour.js create mode 100644 src/onboarding/steps/coreConcepts/StepFour.jsx rename src/onboarding/steps/coreConcepts/{StepOne.js => StepOne.jsx} (96%) rename src/onboarding/steps/coreConcepts/{StepSix.js => StepSix.jsx} (98%) delete mode 100644 src/onboarding/steps/coreConcepts/StepThree.js create mode 100644 src/onboarding/steps/coreConcepts/StepThree.jsx rename src/onboarding/steps/coreConcepts/{StepTwo.js => StepTwo.jsx} (98%) rename src/onboarding/steps/editing/{StepFive.js => StepFive.jsx} (100%) rename src/onboarding/steps/editing/{StepFour.js => StepFour.jsx} (99%) rename src/onboarding/steps/editing/{StepOne.js => StepOne.jsx} (100%) create mode 100644 src/onboarding/steps/editing/StepSix.jsx rename src/onboarding/steps/editing/{StepThree.js => StepThree.jsx} (99%) rename src/onboarding/steps/editing/{StepTwo.js => StepTwo.jsx} (99%) diff --git a/src/ChunkCollection.jsx b/src/ChunkCollection.jsx index 0c645ed..4c5a867 100644 --- a/src/ChunkCollection.jsx +++ b/src/ChunkCollection.jsx @@ -1,4 +1,4 @@ -// @ts-check +// @ts-nocheck import React, { useEffect, useState, useContext } from "react"; import { ChunkCollectionContext } from "./ChunkCollectionContext"; import { EditmodeContext } from "./EditmodeContext"; @@ -105,7 +105,7 @@ export function ChunkCollection({ {typeof children === "function" ? children(getChunk, chunk, index) : children} -
+ ))} {chunks.length && ( @@ -114,9 +114,7 @@ export function ChunkCollection({ value={placeholderChunk} >