johnsonandjohnson / bodiless-js Goto Github PK

User Story

• AS A site builder
• I WANT to create new RichText Components using the same Design System used to create other @bodiless Components
• SO THAT I have a consistent Interface

Background/Description

Example: 
{code:java}
const simpleDesign = {
SuperScript: asSuperScript,
};
const basicDesign = {
Bold: asBold,
Italic: asItalic,
Underline: asUnderline,
Link: flow(asEditableLink(), asLink),
...simpleDesign,
RedText: addClasses('text-red-500'),
AlignLeft: asAlignLeft,
AlignRight: asAlignRight,
AlignJustify: asAlignJustify,
AlignCenter: asAlignCenter,
};
const fullFeaturedDesign = {
...basicDesign,
H1: asHeader1,
H2: asHeader2,
H3: asHeader3,
};

const EditorSimple = withDesign(simpleDesign)(RichText);
const EditorBasic = withDesign(basicDesign)(RichText);
const EditorFullFeatured = withDesign(fullFeaturedDesign)(RichText);{code}

Acceptance Criteria

AC1: The RichText Component takes a design prop that lets me use @bodiless design API to inject component to be used in the richText

AC2: I should be able to add HOC to the design to set richText component properties such as

Type (block mark or inline) (e.g. asBlock, asInline, asMark)
Button to use (withButton('icon'))
shortcut key (withShortcutKey('k')
if it is Void or not (asVoid)

AC3: for the following component if they are included in the Design then default settings should be used as well as a default component (the default should be what we currently use)

• Bold
• Italic
• Underline
• Link
• SuperScript
• AlignLeft
• AlignRight
• AlignJustify
• AlignCenter
• H1
• H2
• H3
  AC4: The documentation for using the API is updated

AC4: There are unit test for all of the helper functions

AC5: The following items should be added at the site level to the FullFeatureEditor

• Strike through withButon('strikethrough_s'), withShortcutKey('s'), asMark, asStrikethrough
• Quote block startWith(Div), withButton('format_quote'), asBlock, asBlockQuote,

Implementation Notes

References

Description

Describe the issue that you're seeing.

Steps to reproduce

1. Open not existing page, e.g https://master-[env]-[project].us-2.platformsh.site/flex

Expected result

404 page is expected to be open

Actual result

502 error opens

Description

Revert does not refresh the page and reverted changes may stay visible until the page is manually reloaded.

Steps to reproduce

• Edit copy
• Select the Revert Button (no need to put)
• Dialogue Window appears confirming Revert.

Expected result

• The page is refreshed and a copy is reverted back to original

Actual result

• The page is not automatically refreshed. Need to manually refresh for the revert to appear.

Affected Version

• Commit ID: 490e192

User Story

• AS A Content Editor
• I WANT to be able to clone a page from another bodiless site
• SO THAT I can easily reuse content

Background/Description

Acceptance Criteria

AC1.
There exists a tool which can take a url+site as input and create a new changeset for the site
which adds a page matching the page at the specified url.

AC2.
The above only works if the site at the specified URL is a bodiless site with a repository known to inventory services.

Implementation Notes

** All components utilized on the page are already included within site.
** If the components are not there, the editor may get 'WSOD' and need developer, it would not provide or try fix.

References

User Story

When a static site built it should not contain any Editor styles ( styles prefixed with bl- ). Currently, Flexbox page has bl-flex bl-flex-wrap editor styles.

Acceptance Criteria

AC1.
There are no bl- classes left on the static /flexbox page.

User Story

As a site builder, I want to add base component that allows me to add a mobile burger menu to my site.

Background/Description

Acceptance Criteria

AC1: The Example/Test Site includes a Hamburger Menu.

AC2: Menu's initial states starts with a hamburger Menu

AC3: WHEN the Hamburger Menu is clicked the Menu is expanded

AC4: Menu can use the same data that is used to render the full scale menu (AESQ-1854) 

• If the Main Menu labels are edited, the change is reflected in the Hamburger Menu

AC5: Level 1 & 2 items are closed on initial load

AC6: Any item which has children renders it's title with no link, when the title is tapped the children expand with an "Overview" item that links to the URL that was on the title (how CANVAS works today see [h|https://www.johnsonsbaby.com/baby-products] [https://con-na-penaten-ca-en.uat2.canvas-building.jjc-devops.com/] under the Products section)

AC7: The submenu displays the same in both edit and non-edit static environments 

AC8: Run the component against an accessibility checker like WAVE and record any issues as a GAP ticket. 

AC9: Documentation should include that there is no Edit UI in the Mobile version. Any updates to the Hamburger Menu should be done via the Desktop Full Menu version (AESQ-1854) 

Implementation Notes

Design: https://jhdfdc.axshare.com/#g=1&p=starterkit_palette resize to mobile to see burger menu.

Libraries:

https://github.com/negomi/react-burger-menu
DEMO: https://negomi.github.io/react-burger-menu/
Very active library (110 releases with 26 contrib users)
has tests
GitHub:

References

User Story

• AS A BodilesJS user
• I WANT to enable and configure tailwind in a standard way
• SO THAT I don't have to acquire some recondite knowledge to use BodilessJS

Background/Description

Currently, we activate tailwind in a nonstandard way. The Gatsby docs give lear instructions on how to do this, and we should not diverge:

Acceptance Criteria

Implementation Notes

IImplement using hte post-css method as described here: https://www.gatsbyjs.org/docs/tailwind-css/. Using the css-in-js method will cause problems for our "removeClasses" mechanism..

References

Description

Steps to reproduce

1. Open Home page, http://0.0.0.0:8005/
2. Add some text in RichTextEditor
3. Make some word as a link and add URL value
4. Apply Text Alignment to the text (select any option for that from the left menu)
5. Check URL of the link

Expected result

URL value retains after applying any style options.

Actual result

URL value is lost (reset to default '#')

Affected Version

0.0.37

User Story

As a content editor
I want to be able to replace one component with another
So I have control over the content on my page.

Acceptance Criteria

AC1.
There exists a "component switcher" component
Which adds a button to the menu
Allowing you to select what component it should render
Using the existing component selector.

AC2.
If content data exists for the first component
The new component gets the same data.

AC3.
If the new component has a different data schema
It will act as though it had no initial data
And the data for the original component will be ignored.

Implementation Note

Implement by creating a special case for flexbox.

User Story

• AS A site owner
• I WANT reduced css size on bodiless pages
• SO THAT there is a better load time experience for my visitors.

Background/Description

Acceptance Criteria

AC1.
When a page is loaded on the static site
Unnecessary css is not included.

• Remove Bodiless Admin CSS
• Purge unused site level CSS

AC2.
Tailwind CSS is included in the site using the standard post CSS method as documented in https://www.gatsbyjs.org/docs/tailwind-css/

Implementation/Testing Notes

https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/

• Should be tested locally and on Platform.SH
• Should run a full regression test; reviewing every page to make sure we haven't lost any styling.

References

User Story

• AS A Content Editor
• I WANT to be able to clone existing page and all its data in edit mode
• SO THAT I don't waste time recreating and adding components to a page already previous built.

Background/Description

Acceptance Criteria

AC1: WHEN the user is in the Edit UI and in Edit Mode
THEN there is a "Clone" icon in the Page sub Menu
AND when the User selects the Clone button
THEN The Clone form panel window opens
AND includes:

• Title "Clone (this) Page"
• URL. This field displays the parent path from the current page and the user can enter in a page URL
• There is an Edit link that makes the full path URL editable and the user can modify the entire string (works with current behavior for creating a new page on a subpage.)
• panel window has the expected features of checkmark and X with the expected behaviors.

AC2.
WHEN the user selects the checkmark from the clone panel
IF the page is using a template,
THEN the template and the data from the current page is replicated to the new location specified in the clone panel.
ELSE, the index file and the data from the current page is replicated to the new location specified in the clone panel,
AND the dialog message states the new page is created.

AC3.
The validation for the clone works the same as the what we currently have established for the Add New Page capability.
If the User adds a URL name that already exists they will get an error notice that the page already exists.

AC4. Documentation includes information regarding the content editor, site builder and architectural details/experiences for cloning an existing page.

Implementation Notes

References

• Wireframes: https://jhdfdc.axshare.com/#g=1&p=generic_ui&id=sxj4x9

We need a way to tie a component node-key to markup. For example, <a href='...' data-node-key="linkit" >some link</a>. Otherwise there is currently no way to validate if correct backend endpoint was hit

Originally posted by @wodenx in #79

Description

Describe the issue that you're seeing.

Steps to reproduce

1. fresh clone of monorepo after new release
2. npm run new "/path/to/new/site" -- --no-install
3. cd /path/to/new/site
4. git add . && git commit "Initial Commit"
5. npm i

Expected result

package-lock is unchanged, and versions of transitive dependencies are locked.

Actual result

package-lock is updated and transitive dependencies are upgraded.

Notes

• The same happens when using local packages (npm run sites:install or sites:update)
• To resolve we need to add steps for updating package-lock on example sites to the release process and to the sites:install script.

User Story

• AS A Bodiless-JS Developer
• I WANT changes delivered to the edit environment when I update a PR
• SO THAT it can be tested immediately.

Background/Description

Acceptance Criteria

AC1
When a PR is updated
The changes are delivered to the edit environment

AC2.
If the update does not involve modification of package-lock.json
The edit environment skips "lerna bootstrap"

AC3.
If the update only involves modification of site level code
The app is not restarted

AC4.
If the pr has a specific label ("testing-in-progress"?)
The changes are not pushed automatically.

Implementation Notes

Do this in Travis.

References

User Story

• AS A Content Editor
• I WANT to be able to navigate the site while in edit mode
• SO THAT I don't waste time switching back and forth to non-edit mode

Background/Description

Acceptance Criteria

AC1.
When I click on a link in edit mode
There is a follow-link button on the context menu

AC2.
When I click the follow link button
The browser acts as though I had clicked the actual link
(eg loads the target page)

Implementation Notes

References

Description

New page form freezes the screen after upgrading informed to latest version. The problem is caused by endless loop with rerendering of text field.

Steps to reproduce

1. ensure [email protected] is installed
2. open new page dialogue by clicking "New page" in the global context menu
3. type a character in the dialogue

Expected result

The user can see the typed character in the dialogue. The user can continue typing.

Actual result

The user does not see the typed character in the dialogue. The user can not type any characters. The browser window is frozen.

Description

Tried to run Bodiless-JS. Cloned the repo, ran 'npm install' and then ran 'npm run setup'. But, got some errors. Tried to run 'yarn setup', too. But, got same errors.

npm ERR! [email protected] bootstrap: `lerna bootstrap --hoist && node scripts/postinstall`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] bootstrap script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Also here is the error log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'bootstrap' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebootstrap', 'bootstrap', 'postbootstrap' ]
5 info lifecycle [email protected]~prebootstrap: [email protected]
6 info lifecycle [email protected]~bootstrap: [email protected]
7 warn lifecycle The node binary used for scripts is /tmp/yarn--1578979735716-0.5837744159527516/node but npm is using /usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
8 verbose lifecycle [email protected]~bootstrap: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~bootstrap: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/sabir/Downloads/Bodiless-JS-master/node_modules/.bin:/tmp/yarn--1578979735716-0.5837744159527516:/home/sabir/Downloads/Bodiless-JS-master/node_modules/.bin:/home/sabir/.config/yarn/link/node_modules/.bin:/home/sabir/.yarn/bin:/usr/libexec/lib/node_modules/npm/bin/node-gyp-bin:/usr/lib/node_modules/npm/bin/node-gyp-bin:/usr/bin/node_modules/npm/bin/node-gyp-bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
10 verbose lifecycle [email protected]~bootstrap: CWD: /home/sabir/Downloads/Bodiless-JS-master
11 silly lifecycle [email protected]~bootstrap: Args: [ '-c', 'lerna bootstrap --hoist && node scripts/postinstall' ]
12 silly lifecycle [email protected]~bootstrap: Returned: code: 1  signal: null
13 info lifecycle [email protected]~bootstrap: Failed to exec bootstrap script
14 verbose stack Error: [email protected] bootstrap: `lerna bootstrap --hoist && node scripts/postinstall`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
14 verbose stack     at EventEmitter.emit (events.js:198:13)
14 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
14 verbose stack     at ChildProcess.emit (events.js:198:13)
14 verbose stack     at maybeClose (internal/child_process.js:982:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/sabir/Downloads/Bodiless-JS-master
17 verbose Linux 5.0.0-37-generic
18 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "bootstrap"
19 verbose node v10.18.1
20 verbose npm  v6.13.4
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] bootstrap: `lerna bootstrap --hoist && node scripts/postinstall`
23 error Exit status 1
24 error Failed at the [email protected] bootstrap script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Steps to reproduce

1. Clone repo
2. Open directory
3. Open terminal and type 'npm install'
4. Then type 'npm run setup'

Expected result

Setup should complete without issues

Actual result

Some errors are occurring constantly.

Environment

System:
OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 10.18.1 - /usr/bin/node
Yarn: 1.21.1 - /usr/bin/yarn
npm: 6.13.4 - /usr/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.117
Firefox: 72.0.1
npmGlobalPackages:
gatsby-cli: 2.8.26

Description

The issue happens when html source of a page is invalid: e.g. there is a redundant double quote somewhere in a tag:

<div id="value" ">

Steps to reproduce

• set up "examples/starter/migration-settings.json" to target the broken page
• run npm run migrate

Expected result

The page is migrated.

Actual result

Migration fails with error:

{ SyntaxError: Unexpected token (90:285)

    at Object.raise (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:6325:17)

    at Object.unexpected (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:7642:16)

    at Object.jsxParseIdentifier (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3379:12)

    at Object.jsxParseNamespacedName (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3389:23)

    at Object.jsxParseAttribute (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3469:22)

    at Object.jsxParseOpeningElementAfterName (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3490:28)

    at Object.jsxParseOpeningElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3483:17)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3515:33)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElementAt (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3531:32)

    at Object.jsxParseElement (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3589:17)

    at Object.parseExprAtom (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:3596:19)

    at Object.parseExprSubscripts (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:8412:23)

    at Object.parseMaybeUnary (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:8392:21)

    at Object.parseExprOps (/Users/km/jj/jamstack/bodiless_starter/node_modules/@babel/parser/lib/index.js:8267:23) pos: 11699, loc: Position { line: 90, column: 285 } }

User Story

• AS A BodilessJS developer
• I WANT to enable source=maps for packages
• SO THAT I can debug them

Background/Description

Need to coordinate creation of sourcemaps when running in monorepo vs when running standalone.

Acceptance Criteria

AC1.
When I run any site which uses gatsby-theme-bodiless in the monorepo
Having used Lerna to link that site to bodiless packages
Sourcemaps for those packages are available in the browser.

AC2.
When I run any site which uses gatsby-theme-bodiless as a standalone site or using local packages
The code used for all bodiless packages is the ts-compiled code from the package's /lib folder
NOT the raw typescript from the package's /src folders.

AC3.
When i build any site which uses gatsby-theme-bodiless in standalone or local-packages mode
Sourcemaps are disabled for the build-html phase.

Implementation Notes

Currently we use tsConfigPathsPlugin to tell webpack to transpile our ts source directly when test-site is built in monorepo. We want to extend this to any site which is build using gatsby-theme-bodiless, and we want to be sure it is disabled when the site is run in standalone mode (or using local packages).

References

User Story

• AS A content editor,
• I WANT the ability to add components to my page
• SO THAT I can easily organize the content as directed by the Brand's design.

Background/Description

• Updates to the fly-out panel for the flexbox
• Assumption is that user will be using a screen at min. 1024px width and 768px height
• Expectation is that the Edit UI system will only be done on Desktop; Mobile and tablet are out of scope.
• The other panel windows should continue to work as-is, no changes are in scope.

Acceptance Criteria

AC1: opens at the top of the viewport and the height is 744 pixels (current size), the width is 714px.

User Story

• AS A bodiless maintainer
• I WANT e2e regression tests run on pull requests
• SO THAT i can be sure they don't break anything.

Background/Description

Acceptance Criteria

AC1.
When . a pull request is issued to this repository
A suite of cypress tests is executed

AC2.
If the tests fail, the build check is marked as "failed"

AC3.
The cypress failure logs are available for review.

Implementation Notes

References

Description

Upgrade dependency package gatsby-plugin-google-tagmanager to address the data layer name issue. See gatsbyjs/gatsby#20536 for more details.

Steps to reproduce

1. Enable GTM via set GOOGLE_TAGMANAGER_ENABLED to "1" and proper GTM code for GOOGLE_TAGMANAGER_ID
   in examples/test-site/.env.production

2. Serve site on http://localhost:9000/

Expected result

• No JS error in console.

Actual result

Console JS Error: "Uncaught TypeError: Cannot read property 'push' of undefined"

Removing content files do not trigger a rebuild - and, when rebuilt, may not actually update data.

STR1.

1. Visit edit environment
2. Modify a component ie. tout title
   3; Note json file created in directory.
   4; Delete json file

Expected Result

• Component data will automatically revert to the default value without manually reloading the page

Actual Result

• Component data remains in altered state from #2 above until manual page reload

Related Issue:

Related Issues

#65
#146

User Story

• AS A community developer
• I WANT an easy way to start a bodiless site
• SO THAT I don't waste time setting things up

Background/Description

Acceptance Criteria

AC1.
There exists a gatsby-starter-bodiless in the /examples folder of the monorepo.
Which can be used easily to start a new bodiless site.

AC2.
Any J&J specific dependencies
Are removed from getsby-starter-bodiless

AC3.
The new gatsby-starter-bodiless can be launched from within the monorepo
Just like the existing test-site.

AC4.
Both the starter and the existing test-site can be easily launched
Using locally packaged versions of all bodiless packages
From the current monorepo HEAD.

AC5.
Any bodiless site in an external repository can also be easily launched
Using locally packaged versions of all bodiless packages
From the current monorepo HEAD.

AC6.
Documentation is updated to reflect all new processes

Implementation Notes

References

User Story

As a site editor
I want gatsby rebuilds for multiple content changes to have less impact on performance
So that my work is not distrupted.

Background/Description

Originally, in scope of #14 metadata was added to the content json files to indicate which browser tab they originated in. This should not be committed to Git.
This is no longer the case, but we'd still like to optimize the way the backend works - in particular the number of gatsby builds which are triggered when you make multiple content changes in quick succession. This may inv

Acceptance Criteria

AC1.
When multiple content changes are pushed to the backend in quick succession
There is little to no downtime while gatsby is rebuilding.

Implementation Notes

See: #52 (comment)

References

#52

Overview

We are descoping the Pull Changes Button Functionality from the Content Edit UI in the Main Menu.

• Move Technical Details to README.md of bodiless-ui

User Story

As a Content Editor,
I want default values for content in a new item (eg list element) when it is added after a previous item was deleted
So that I can start from a clean slate

As a site owner
I want stale data deleted from my site
So that my repo is clean.
 

Background/Description

Acceptance Criteria

AC1: 
When I delete

• a list item or its sublist item from a menu or list
• a component from flexbox
• a link or image from richt text editor
  then all data owned by the deleted component or any of its children
  are deleted from disk.

AC2. 
When you commit, the deleted Json files are also committed

Implementation Notes

• Create a new delete method in content node which removes data from the store for that path and all sub-paths
• Create new route on backend which deletes the actual json files
• Consume the api in components (flexbox, list) which dynamically create children.
• We need to soft-delete items in GatsbyMobxStore (set a flag rather than removing from store) so that mechanisms for ensuring data integrity (preventing update with stale data per #14) continue to work.

References

Description

Steps to reproduce

STR

open a product page
click bv placeholder
enter "BV Product External ID" (update product external id if it is already added)
click save

Expected result

bv placeholder content is updated

Actual result

bv placeholder content is not updated

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

Affected Version

• If the issue was encountered on a site, please attach your package.json
• If the issue was encountered in the Bodiless-JS repo, please link to a
  commit or branch on which the issue occurs.

Description

Last typed chars disappear sporadically; some entered data is lost after refreshing a page

Steps to reproduce

1. open /list page
2. start adding the list items and fill them with text

Expected result

no content loss happens

Actual result

last chars in some items are lost after several seconds

Root cause

• stale data come from Gatsby backend and overwrite client data

Background

1. once user makes content changes, browser locks items, to which the user made changes, and sends data to backend. the item is unlocked on timeout. current timeout value is 5 seconds. if user touches an item then lock timeout is reset.
2. backend saves the data from 1. to json files
3. gatsby watches json files and triggers site rebuild once a json file is changes
4. after site is rebuilt, the data is sent back to the client.

issue: the data on step "4" can be stale. when the data from "4" is delivered to the browser and if the browser already released locks for the items, then the stale data overwrites more recent data. it looks for the user as some characters are disappeared.

Options how to solve the stale issue

Option 1. Increase item lock timeout.
Option 2. Do not expire item locks.
Option 3. Do not refresh with changes made in same browser
Option 4. Verify data before accepting it.
Option 4a. verify data in browser by sending a network request to backend
Option 4b. verify data in gatsby-node.js

Ideas how to improve simultaneous editing

• we can have a lock for each item on the server side. the client has to acquire the lock in order to make changes for an item. if an item is already locked on the server by a client, then the data originated from other clients is rejected.
• implement Operational transformation pattern

Description

Migration fails on Windows on bootstrap.

Steps to reproduce

• git clone https://github.com/beliayeu/Bodiless-JS
• npm ci
• npm run bootstrap

Actual: fails with an error
Expected: no errors

Note1: the problem is reproduced on windows
Note2: the same problem with applying patches for migration tool packages
Note3: similar problem with build:css ('DOTENV_CONFIG_PATH' is not recognized as an internal or external command,')

Expected result

No errors

Actual result

{code}

@bodiless/[email protected] postinstall Bodiless-JS\packages\bodiless-richtext
node bin/apply-patches.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] bootstrap: npx lerna bootstrap --hoist --strict
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] bootstrap script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
{code}

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

Affected Version

• If the issue was encountered on a site, please attach your package.json
• If the issue was encountered in the Bodiless-JS repo, please link to a
  commit or branch on which the issue occurs.

issue is created based on feedback in #79

in scope:

• make the improvements based on the feedback
• enhance selectors

User Story

• AS A Site Editor
• I WANT to receive components which have default content
• SO THAT I can quickly apply upstream updates

Background/Description

Acceptance Criteria

AC1.
A developer can supply default content for any component (making it a "contentful" component.

AC2.
Default content can be supplied for a single component, or a tree of nested subcomponents.

AC3.
The "contentful" component(s) will render their default content until the Editor overrides the content (edits the content)

AC4.
A content editor has the ability to revert to the default content for subcomponent by subcomponent.

AC5.
Default content and assets can be packaged with a component, and updates received by upgrading the component package. In such cases, any overridden content on the site will not be changed, but any subcomponent which has not been overridden will render the new default content.

AC6.
On the test site home page, the 2 touts are replaced with contentful components. The contentful components are available to use in flexbox areas.

AC7.
There are unit tests for this story.

Implementation Notes

• Wrap with a "withContent" HOC which provides a content node which supplies the default content when the store has no entry?
• Component children are deleted as well.
• https://www.gatsbyjs.org/docs/importing-assets-into-files/

References

Description

The link to Coding Standards ( https://github.com/johnsonandjohnson/Bodiless-JS/blob/master/packages/bodiless-documentation/doc/Development/Development/Release/Quality) in the Raising Pull Requests section is broken on https://github.com/johnsonandjohnson/Bodiless-JS/blob/master/packages/bodiless-documentation/doc/Development/Contributing.md

Description

I'm trying to follow documentation of new site creation and platform.sh initialization, but run into npm error.

Refs:
https://johnsonandjohnson.github.io/Bodiless-JS/#/About/GettingStarted?id=creating-a-new-site
https://johnsonandjohnson.github.io/Bodiless-JS/#/Development/OtherResources/Platform.sh?id=step-2-initialize-your-project-configuration-files

Steps to reproduce

New site creation:
git clone https://github.com/johnsonandjohnson/bodiless-js.git
cd bodiless-js
npm ci
npm run new
cd ~/gatsby-starter-bodiless
P.sh initialization:
npm i --save-dev @bodiless/psh
Add the following to your package.json scripts:
"init-psh": "bodiless-psh-init"
Install or update the configuration files:
npm run init-psh

Expected result

the following command run successfully:
npm run init-psh

Actual result

npm run init-psh

@bodiless/[email protected] init-psh /home/abullo/gatsby-starter-bodiless
bodiless-psh-init

Initializing platform.sh configuration...
Generating docs/package-lock.json...
exec error: Error: Command failed: npm --prefix ./docs install --package-lock-only
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @bodiless/gatsby-theme-bodiless@^0.0.35.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'docs'
npm ERR! notarget

Overview

As a Content Editor, I want the ability to close the component picker, so that I can start working on something else.

Task - remove the checkmark from the component pickers to improve the UX interaction for the user

User Story

• AS A bodiless maintainer
• I WANT to be able to test bodiless packages using local packages mechanism
• SO THAT I can be sure my changes don't break anything.

Steps to reproduce

1. Run npm run sites:clone-local starter
2. Run npm run sites:update starter
3. Go to cd sites/starter
4. Run npm run build
5. Run npm run start

Expected result

The app starts with no errors.

Actual result

There is an error in @bodiless/backend/src/server.js which breaks the build.

User Story

• AS A BodilessJs developer
• I WANT New package versions automatically published when tagged
• SO THAT I don't have to do it myself.

Background/Description

Acceptance Criteria

AC1.
When a new version tag is committed to any branch in GitHub
New package versions are published to NPM

Implementation Notes

See below

References

https://github.com/geut/lerna-travis-demo

Description

Steps to reproduce

1. migrate [your site].com with migration-settings. json shown below

{
  "url": "https://[your site].com/",
  "crawler": {
    "maxDepth": 100,
    "maxConcurrency": 1,
    "ignoreRobotsTxt": true
  },
  "transformers": [
  	  	{
      "rule": "replace",
      "selector": "base",
      "replacement": "",
      "context": "**" 
    }
  ]
}

2. Run migration and serve the static site.

3. Go to pages with link fragment based accordion element, that allowing user to click open accordions. Click on accordion.

Expected result

Accordion opens without page jumping.

Actual result

page jumps

User Story

• AS A member of the community
• I WANT easy access to bodiless documentation
• SO THAT I can learn about it with little or no effort

Background/Description

Acceptance Criteria

AC1. The bodiless docs site is available on github pages
AC2. The docs are regenerated on every push to master

Implementation Notes

References

Steps to reproduce

1. open http://0.0.0.0:8005/
2. scroll down to the bottom of the page
3. in Rich Text Editor, select text to open Menu -> Menu shows
4. Change focus to close Menu (click on any area outside of Menu)

Actual Results

The menu appears in the bottom of a page and disappears

User Story

• AS A content editor
• I WANT to know that a long running operation is in progress, and when it completes
• SO THAT i don't get confused

Background/Description

Current lengthy operations include create page, pull/push changes, revert, etc. These now terminate with an alert, and no progress indicator. This needs to be improved.

Acceptance Criteria

AC1. There is a bodiless core API to display a modal spinner AND an overlay throughout the screen while a time consuming operation is in progress. 

AC2: When the operation completes, the spinner may replaced by a dismissible status message ("Done") or a error message ("Error" Text grey 100) in the panel window with the X icon.

AC3. When the operation completes, the spinner may be dismissed without a status message.

AC4. If the operation does not complete within a timeout (set when invoking the library), it is replaced with an error message as in AC2.

AC5. The actual components used to render the spinner are injectable via a ui prop, and the defaults are exported from the bodiless-core-ui package.

AC6. The above spinner is implemented for the create page operation so that:

AC6a. When I confirm the create page operation the spinner is displayed
AC6b. When the create page operation completes successfully, I am immediately redirected to the new page.
AC6c. When the create page operation times out (10s) or errors (eg page already exists), the spinner is replaced by an error message as in AC3.

AC7a. When I confirm the revert operation the spinner is displayed until the operation success dialogue is shown.
AC7b. When the revert operation completes successfully, the page is reloaded
AC7c. When the revert page operation times out (10s) or errors (eg page already exists), the spinner is replaced by an error message as in AC3.

Implementation Notes

References

Design: https://jhdfdc.axshare.com/#g=1&p=generic_ui&id=sxj4x9: Click "File" then "Pull" then confirm by clicking the Check icon.

User Story

As a Developer, I want the example site to include components, so that I can test and review what my components look like. 

Background/Description

Tech Note:

• Adding the Meta Data of the Touts and putting them in the Flexbox so they are available with the component selector. 
• This includes adding the Tokens / Variant functionality 

Acceptance Criteria

AC1: Touts built previously are available in the component picker and can be added to a page as expected.

AC2: Fix bug where inserting first tout break the component.

AC3: New Touts are available on the Example site; replaces the hardcoded Touts currently being used with flexbox

Implementation Notes

References

Description #1 -- new sites don't use Lerna on platform.sh build

Starter Kit Platform.sh files get created with lerna commands that do not deploy well to platform.sh

Steps to reproduce

1. Create a new site per https://johnsonandjohnson.github.io/Bodiless-JS/#/About/GettingStarted?id=creating-a-new-site
2. https://johnsonandjohnson.github.io/Bodiless-JS/#/Development/OtherResources/Platform.sh?id=step-2-initialize-your-project-configuration-files
3. Deploy it to platform.sh

Expected result

Deploys correctly.

Actual result

Edit env fails with errors.

Environment

Platform.sh edit env failures.

Affected Version

• 0.0.39

Details

Sites do not have lerna running so I don't think:

When checking that a link backend endpoint is hit we still need to verify that the file was actually written to the filesystem.

Originally posted by @wodenx in #79

User Story

• AS A Site Builder
• I WANT to build packages that have the values set up
• SO THAT I do not have to add more work.

Acceptance Criteria

AC1:
There is a mechanism by which any bodiless package can implement logic to set environment variables for both edit (.env.development) and static (.env.production) applications

AC2.
The logic so implemented will be invoked during the build (static) or start (edit).

AC3.
The site may specify absolute values and/or logic to set environment variables, and if so, site-level logic will override logic implemented in any package.

AC4: Documentation is updated with where the variables are updated

AC5: The linked bugs are retested and no longer an issue.

AC6. Current default logic will be implemented in gatsby_theme_bodiless package

User Story

As a site builder/editor, I want to easily see that I can click on flexbox area and start adding components.

Wireframe: https://jhdfdc.axshare.com/#g=1&p=flexbox&id=bqple5

Background/Description

Acceptance Criteria

AC1: IF the user is on a page that has an empty Flexbox
THEN only on the empty Flexbox(s) there is visual representation indicating what area can be worked via the Flexbox

AC2: The design of the empty flexbox area matches what is in the wireframes (see attached screenshot)

Has a dotted line around the area
Has a placeholder message within the box area "Empty Flexbox"
The placeholder is translatable

AC3: When the user clicks in the outlined flexbox area then the + is added to the menu bar and works as before

AC4: This change does not render anything on the static site if nothing has been added via the flexbox.

AC5. The component used to render the placeholder is injectable via the ui prop.

Implementation Notes

References

Steps to reproduce

1. Open a page with elements that have richText editor with a placeholder text, e.g. /accordion
2. Size the page down

Expected result

Placeholder text is cut or moved to the next line, thus it doesn't go over the container borders.

Actual result

Text in the placeholder overflows the block.

Steps to reproduce

1. Open /richtext page
2. Add and Select some text in RichText Editor -> Style/Format Menu appears
3. Click any style icon e.g 'Italic'
4. Click Edit button at the left Menu to leave Edit mode

Actual Results

Menu bar is still visible.

Expected Results

The format bar disappears.