Commit 283ce30b authored by Alexandros Georgantas's avatar Alexandros Georgantas

chore(app): vanilla editoria introduced

parents
Pipeline #13089 failed with stages
in 59 seconds
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-class-properties"
]
}
node_modules
\ No newline at end of file
set -e
use node
**/_build
**/node_modules
**/coverage
{
"parser": "babel-eslint",
"env": {
"es6": true,
"browser": true
},
"extends": ["pubsweet"],
"rules": {
"import/no-dynamic-require": 0,
"import/no-extraneous-dependencies": 0,
"sort-keys": 0
},
"overrides": [
{
"files": ["test/**/*.test.js"],
"globals": {
"fixture": true,
"text": true
}
}
]
}
.env
.env.*
coverage/
config/*.env
node_modules/
npm-debug.log
_build/*
config/local*
logs/*
pubsweet.log
tmp/
uploads/*
yarn-error.log
data
scripts/link.sh
{
"linters": {
"*.{js,jsx}": ["prettier --write", "eslint --fix", "stylelint", "git add"]
},
ignore: ["**/CHANGELOG.md"]
}
{
"singleQuote": true,
"semi": false,
"printWidth": 80,
"trailingComma": "all"
}
**/_build
**/node_modules
**/coverage
{
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
],
"plugins": ["stylelint-order"],
"processors": ["stylelint-processor-styled-components"],
"rules": {
"order/order": ["declarations", "rules", "at-rules"],
"order/properties-alphabetical-order": true
}
}
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
<a name="1.1.1"></a>
## [1.1.1](https://gitlab.coko.foundation/editoria/ucp/compare/v1.1.0...v1.1.1) (2018-12-19)
<a name="1.1.0"></a>
# 1.1.0 (2018-11-20)
### Features
* conventional commits added ([b98b958](https://gitlab.coko.foundation/editoria/ucp/commit/b98b958))
# Editoria
## 1.3.0
#### Wax
* Search / find and replace
* Notes pane is hidden if there are no notes in the document
* Note callouts work with track changes
* Track changes previous / next navigation
* Copy / cut and paste works with track changes
* Indicator for how many items exist in a collapsed comment discussion
* Performance improvements
* Find and Replace a single match and undo throws an Error
* Undo / Redo Notes on certain Occasions throws an Error
* Opening an Empty Chapter Save is Enabled and modal is triggered if you try to go back without any change in the Editor
* if Track Changes is on, user cannot remove an image
* Remove additions on cut operation in track changes if done from the same user
* With track Changes on if you accept a deleted note and undo throws an error
* With track Changes on if you delete a whole paragraph and undo throws an error
* Navigate Through Notes with left and right arrow
* Toggle on /off Native Spell Checker
* Full screen mode
* Track Spaces
* Image Captions
* Change note icon in the toolbar
* Add keyboard shortcuts for accept & reject track changes
* Small Caps
#### Maintenance
* Switch to using yarn instead of npm by default
* React 16
* Upgrade to latest pubsweet client
* Clean up component prop types and refs
* Switch to Postgres
* Docker container for the DB provided via yarn start:services
## 1.2.0
* Upgrade to latest Pubsweet server, client, and components
* Introduce password reset
#### Book Builder
* Preview exported book in Vivliostyle Viewer
* Chapters keep track of their own numbering (independently from parts) in the Body
* Renaming of fragments has been removed in favour of using the title tag in Wax
* Drag and drop fixes
#### Wax Editor
* Can now style multiple blocks/paragraphs at once, including lists
* Keyboard shortcuts
* Turn track changes on/off => ctrl/cmd+y
* Hide / show tracked changes => ctrl/cmd+shift+y
* Comments => ctrl/cmd+m
* Save => ctrl/cmd+s
* New Title style (which will also rename the fragment in the book builder)
* New Subtitle style
* New Bibliography Entry style
* Revamped track changes UI: Tools are now in the toolbar instead of inline, and line height in the document has been reduced
* Surface doesn't lose focus any more unless the user clicks outside of Wax
* Paragraph indentation
## 1.1.4
#### Wax Editor
* Fix for unsaved changes warning
## 1.1.3
* New design for the book builder, the dashboard and the theme
#### Dashboard
* Renamed 'remove' button to 'delete' for consistency with the book builder
* Double clicking on a book will take you to the book builder for that book, instead of opening the renaming interface
* The position of 'Edit' and 'Rename' actions have been swapped ('Edit' now comes first)
* Books now appear in alphabetical order
#### Book Builder
* Fixed issue with fragments disappearing when uploading multiple files
* Renamed 'Front Matter' and 'Back Matter' to 'Frontmatter' and 'Backmatter'
#### Wax Editor
* Introduce layouts
* Accept configuration options (`layout` and `lockWhenEditing`)
* It is now broken down into separate modules for better separation of concerns
* Pubsweet integration
* React integration
* Core
* Diacritics work within notes
# How to write new E2E tests
Editoria uses Cypress to run end to end tests.
Follow the steps below to get up and running:
Make sure your test db is running:
If you have already run `yarn start:services` you should have two Postgres Docker containers running (one for development and one for testing). It might be good to look at the `docker-compose.yml` file in the application’s root folder. Worth noting is that the test db doesn’t have a data folder, as no data is meant to be persisted.
Create and source a `test.env` file (by convention inside the config folder). This should be the same as the development environment file, apart from the following values:
```
NODE_ENV=’test’
POSTGRES_DB=’test’
POSTGRES_USER=’test’
POSTGRES_PASSWORD=’pass’
POSTGRES_PORT=’5433’
```
Once you’ve sourced the `test.env` file, run `yarn setupdb` and create an admin account with username `admin` and password `password`. If you’ve done this step once for the testing db, you don’t need to do it again.
Bring up the server with `yarn server`.
On another terminal window / tab, run `yarn cypress`. This should bring the Cypress app up.
You can run the existing tests by clicking on the “Run all tasks” button at the top right. The tests will run in a browser window.
To make a new test, simply create a new file (eg. `mytest_spec.js`) inside the Cypress/integration folder on your app. You can use the rest of the files in there for reference. If you need to test a page that needs an authenticated user, use the login command to sign in as a particular role (eg. cy.login(‘author’). Should you need to seed data before your tests, you can execute a seed script in a before hook (eg. `cy.exec(filePath)`). You can take a look at `dashboard_spec.js` for an example of this.
You’re all set!
# Detailed instructions on seeding the database before running a test
In order to test your app you need to have data in your database. That means before you run your tests you should seed your database.
You generally have three ways to facilitate this with Cypress:
* `cy.exec()` - to run system commands
* `cy.task()` - to run code in Node.js via the pluginsFile
* `cy.request()` - to make HTTP requests
In Editoria we are going to use the first approach. We are going to create scripts that can populate the database with data or scripts that truncate the database and then we executed with `cy.exec()`.
All we need is creating the script that we want to run for each test and call it before each test.
## Dashboard example
An example test could be a dashboard test, where certain books need to show up and be assigned to certain users.
So first thing is to create a script called e.g. `createBooksWithUsersAndTeams.js` which creates books and assigns’ them to admin and author user: https://gitlab.coko.foundation/editoria/ucp/blob/cypress/scripts/createBooksWithUsersAndTeams.js
And last but not least we should call that script by using ‘before’ and ‘beforeEach’ functions of Cypress like the example below.
```
beforeEach(() => {
cy.exec('node ./scripts/truncateDB.js')
cy.exec('node ./scripts/createBooksWithUsersAndTeams.js')
})
```
### Editoria 1.0, July 2017
Editoria was started as a collaboration between UCP and Coko, initial funding came from the Mellon Foundation.
Those involved in conceptualising, designing, and building Editoria (including the Wax Editor) from 0 to 1.0 include:
* Erich van Rijn
* Catherine Mitchell
* Kate Warne
* Cindy Fulton
* Lisa Schiff
* Justin Gonder
* Juliana Froggatt
* Adam Hyde
* Kristen Ratan
* Yannis Barlas
* Christos Kokosias
* Julien Taquet
* Alex Theg
* Alexandros Georgantas
* Giannis Kopanas
MIT License
Copyright (c) 2017 University of California Press
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
This diff is collapsed.
const logger = require('@pubsweet/logger')
const { startServer } = require('pubsweet-server')
startServer().catch(err => {
logger.error('FATAL ERROR, SHUTTING DOWN:', err)
process.exit(1)
})
import 'regenerator-runtime/runtime'
import React from 'react'
import ReactDOM from 'react-dom'
import { hot } from 'react-hot-loader'
import createHistory from 'history/createBrowserHistory'
import { Root } from 'pubsweet-client'
// Modals
import ModalProvider from 'editoria-common/src/ModalProvider'
import AddBookModal from 'pubsweet-component-editoria-dashboard/src/modals/AddBookModal'
import DeleteBookModal from 'pubsweet-component-editoria-dashboard/src/modals/DeleteBookModal'
import ArchiveBookModal from 'pubsweet-component-editoria-dashboard/src/modals/ArchiveBookModal'
import DeleteBookComponentModal from 'pubsweet-component-bookbuilder/src/ui/src/modals/DeleteBookComponentModal'
import BookTeamManagerModal from 'pubsweet-component-bookbuilder/src/TeamManager/ConnectedTeamManager'
import WarningModal from 'pubsweet-component-bookbuilder/src/ui/src/modals/WarningModal'
import ErrorModal from 'pubsweet-component-bookbuilder/src/ui/src/modals/ErrorModal'
import UnlockModal from 'pubsweet-component-bookbuilder/src/ui/src/modals/UnlockModal'
import MetadataModal from 'pubsweet-component-bookbuilder/src/ui/src/modals/MetadataModal'
import WorkflowModal from 'pubsweet-component-bookbuilder/src/ui/src/modals/WorkflowModal'
import UnlockedModal from 'pubsweet-component-wax/src/modals/UnlockedModal'
import CreateTemplateModal from 'pubsweet-component-editoria-templates/src/ui/src/modals/TemplateModal'
import UpdateTemplateModal from 'pubsweet-component-editoria-templates/src/ui/src/modals/ConnectedUpdateTemplateModal'
import DeleteTemplateModal from 'pubsweet-component-editoria-templates/src/ui/src/modals/DeleteTemplateModal'
import theme from './theme'
import routes from './routes'
const history = createHistory()
const modals = {
addBook: AddBookModal,
deleteBook: DeleteBookModal,
archiveBook: ArchiveBookModal,
deleteBookComponent: DeleteBookComponentModal,
bookTeamManager: BookTeamManagerModal,
warningModal: WarningModal,
unlockModal: UnlockModal,
metadataModal: MetadataModal,
workflowModal: WorkflowModal,
errorModal: ErrorModal,
unlockedModal: UnlockedModal,
createTemplateModal: CreateTemplateModal,
updateTemplateModal: UpdateTemplateModal,
deleteTemplateModal: DeleteTemplateModal,
}
const rootEl = document.getElementById('root')
ReactDOM.render(
<ModalProvider modals={modals}>
<Root history={history} routes={routes} theme={theme} />
</ModalProvider>,
rootEl,
)
export default hot(module)(Root)
import { css } from 'styled-components'
export default css`
color: #404040;
font-size: 16px;
margin-bottom: 0px;
text-decoration: none;
&:hover {
color: #404040;
text-decoration: none;
}
&:focus,
&:active {
color: #555;
font-weight: bold;
text-decoration: none;
}
`
import { css } from 'styled-components'
// This is not necessary is just a quick
// fix and should be deleted, is done
// temporary so not to mess around with pubsweet
export default css`
display: flex;
`
import { css } from 'styled-components'
export default css`
background-color: #404040;
background-image: none;
border: 1px solid transparent;
border-radius: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 20px;
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
width: 100%;
&:hover {
background-color: #404040;
}
`
import { css } from 'styled-components'
export default css`
border-left: 4px solid #404040;
border-right: 4px solid #d8d8d8;
padding-left: 40px !important;
padding-right: 40px !important;
`
import { css } from 'styled-components'
export default {
H1: css`
color: #404040;
margin-bottom: 5px;
margin-top: 5px;
padding-bottom: 20px;
padding-top: 0;
`,
}
import { css } from 'styled-components'
export default css`
margin-left: auto;
margin-right: auto;
width: 150px;
img {
filter: grayscale(100%);
margin-bottom: 30px;
margin-top: 30px;
max-width: 100%;
}
`
import styled from 'styled-components'
import { fadeIn, th } from '@pubsweet/ui-toolkit'
const Page = styled.div`
flex: auto;
/* font-family: ${th('fontInterface')}; */
height: 100%;
overflow-y: auto;
/* padding: calc(${th('gridUnit')} * 2); */
> div {
animation: ${fadeIn} 0.5s;
}
`
export default Page
// import React from 'react'
import styled from 'styled-components'
// HACK -- figure out why this is needed
// injectGlobal`
// html {
// height: 100%;
// }
// body {
// height: 100%;
// overflow: hidden;
// }
// `
const PageLayout = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`
export default PageLayout
import { css } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
export default {
// TODO
// -- input padding: breaking the grid?
// -- small placeholder text? maybe by default?
Label: css`
color: #404040;
margin-bottom: 5px;
`,
Input: css`
border: 2px solid #b0b0b0;
border-right: 4px solid #484848;
box-sizing: border-box;
color: ${props => {
switch (props.validationStatus) {
case 'success':
return props.theme.colorSuccess
case 'warning':
return props.theme.colorWarning
case 'error':
return props.theme.colorError
default:
return 'inherit'
}
}};
height: 34px;
padding: 6px 12px;
transition: ${th('transitionDuration')} ${th('transitionTimingFunction')};
&:focus {
border-color: ${th('colorPrimary')};
color: inherit;
}
&::placeholder {
font-size: ${th('fontSizeBaseSmall')};
line-height: ${th('lineHeightBaseSmall')};
}
`,
}
export { default as Action } from './Action'
export { default as AppBar } from './AppBar'
export { default as FormContainer } from './FormContainer'
export { default as TextField } from './TextField'
export { default as Heading } from './Heading'
export { default as Button } from './Button'
export { default as Logo } from './Logo'
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" charset="utf-8" src="/assets/app.js"></script>
</body>
</html>
import React, { Fragment } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import { createGlobalStyle } from 'styled-components'
// Users and Teams
// import UsersManager from 'pubsweet-component-users-manager/src/UsersManager'
import GlobalTeamsManager from 'pubsweet-component-editoria-global-teams/src/ConnectedGlobalTeams'
// Authentication
import Login from 'editoria-component-login/src/LoginContainer'
import Signup from 'editoria-component-signup/src/SignupContainer'
import PasswordReset from 'pubsweet-component-password-reset-frontend/PasswordReset'
// Editor
import Wax from 'pubsweet-component-wax/src/ConnectedWax'
import WithConfig from 'pubsweet-component-wax/src/WithConfig'
// Editoria
import BookBuilder from 'pubsweet-component-bookbuilder/src/ConnectedBookBuilder'
import Dashboard from 'pubsweet-component-editoria-dashboard/src/ConnectedDashboard'
import Templates from 'pubsweet-component-editoria-templates/src/ConnectedTemplates'
import PagedStyler from 'pubsweet-component-bookbuilder/src/PagedStyler/PagedStyler'
import Navigation from 'pubsweet-component-editoria-navigation/src/Navigation'
import PrivateRoute from 'pubsweet-component-editoria-navigation/src/PrivateRoute'
import Connected from 'pubsweet-component-editoria-navigation/src/ConnectedNavigation'
import PageLayout from './elements/PageLayout'
import Page from './elements/Page'
// Pass configuration to editor
const Editor = WithConfig(Wax, {
layout: 'editoria',
lockWhenEditing: true,
pollingTimer: 1500,
autoSave: false,
menus: {
topToolBar: 'topDefault',
sideToolBar: 'sideDefault',
overlay: 'defaultOverlay',
},
})
//
// debugger;
// console.log('temp', Templates)
const ConnectedNavigation = Connected(Navigation)
const GlobalStyle = createGlobalStyle`
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
#root,
#root > div {
height: 100%;
}
#root > div > div {
height: 100%;
}
}
`
export default (
<Fragment>
<GlobalStyle />
<Switch>
<Redirect exact path="/" to="/books" />
<Route
path="/login"
render={props => (
<Login {...props} logo="/assets/pubsweet-rgb-small.jpg" />
)}
/>
<Route
path="/signup"
render={props => (
<Signup {...props} logo="/assets/pubsweet-rgb-small.jpg" />
)}
/>
<Route component={PasswordReset} path="/password-reset" />
<PageLayout>
<ConnectedNavigation />
<Page>
<Switch>
<PrivateRoute component={Dashboard} exact path="/books" />
<PrivateRoute component={Templates} exact path="/templates" />
<PrivateRoute
component={PagedStyler}
path="/books/:id/pagedPreviewer/paged/:hashed"
/>
<PrivateRoute
component={BookBuilder}
path="/books/:id/book-builder"
/>
<PrivateRoute
component={Editor}
path="/books/:bookId/bookComponents/:bookComponentId"
/>
<PrivateRoute
component={Editor}
exact
path="/books/:bookId/bookComponents/:bookComponentId/preview"
/>
{/* <PrivateRoute component={UsersManager} path="/users" /> */}
<PrivateRoute component={GlobalTeamsManager} path="/globalTeams" />
</Switch>
</Page>
</PageLayout>
</Switch>
</Fragment>
)
/* eslint-disable import/extensions */
// import 'typeface-fira-sans'
import theme from '@pubsweet/coko-theme'
import { clone } from 'lodash'
import {
FormContainer,
TextField,
Heading,
Button,
Logo,
Action,