Commit 117581ff authored by Jure's avatar Jure

feat: introduce a small kitchen sink

parent 920e5cd5
Pipeline #12009 failed with stages
in 3 minutes
...@@ -8,10 +8,10 @@ import { Root } from 'pubsweet-client' ...@@ -8,10 +8,10 @@ import { Root } from 'pubsweet-client'
import theme from '@pubsweet/coko-theme' import theme from '@pubsweet/coko-theme'
import createHistory from 'history/createBrowserHistory' import { createBrowserHistory } from 'history'
import routes from './routes' import routes from './routes'
const history = createHistory() const history = createBrowserHistory()
const rootEl = document.getElementById('root') const rootEl = document.getElementById('root')
......
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import ConnectedNavigation from './Navigation/ConnectedNavigation' const App = ({ children, ...props }) => <div>{children}</div>
const App = ({ children, ...props }) => (
<div>
<ConnectedNavigation />
{children}
</div>
)
App.propTypes = { App.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
......
import React from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import AuthenticatedComponent from 'pubsweet-client/src/components/AuthenticatedComponent'
import ConnectedNavigation from './Navigation/ConnectedNavigation'
import HelloWorld from './HelloWorld'
import KitchenSink from './KitchenSink'
const Dashboard = () => (
<>
{/* Everything in the dashboard is for authenticated users only */}
<AuthenticatedComponent>
<ConnectedNavigation />
<Switch>
<Redirect exact path="/dashboard" to="/dashboard/hello-world" />
<Route component={HelloWorld} path="/dashboard/hello-world" />
<Route component={KitchenSink} path="/dashboard/kitchen-sink" />
</Switch>
</AuthenticatedComponent>
</>
)
export default Dashboard
import React from 'react'
const HelloWorld = () => (
<div>Hello World!</div>
)
export default HelloWorld
import React, { useState } from 'react'
import {
H1,
Link,
Icon,
StateItem,
TextArea,
TextField,
Steps,
CenteredColumn,
Section,
} from '@pubsweet/ui'
import { NoteEditor } from 'xpub-edit'
const HelloWorld = () => {
const stateItemValues = ['To Clean', 'Cleaning', 'Cleaned']
const [stateItemIndex, setIndex] = useState(0)
const [textAreaValue, setTextAreaValue] = useState(
'A text area you can write in...',
)
const [textFieldValue, setTextFieldValue] = useState(
'And a text field to write in too!',
)
const [currentStep, setCurrentStep] = useState(0)
return (
<CenteredColumn>
<H1>A little kitchen sink garden</H1>
<Section>
This is a small number of components available in PubSweet! For more go
to <Link to="http://pubsweet.coko.foundation">our docs.</Link>
</Section>
<Section>
<StateItem
index={stateItemIndex}
update={(_, nextIndex) => setIndex(nextIndex)}
values={stateItemValues}
/>
</Section>
<Section>
<TextArea
label="Foo"
onChange={event => setTextAreaValue(event.target.value)}
placeholder="so you can write some in here"
value={textAreaValue}
/>
</Section>
<Section>
<TextField
label="Foo"
onChange={event => setTextFieldValue(event.target.value)}
placeholder="so you can write some in here"
value={textFieldValue}
/>
</Section>
<Section>
<p>There are things like a step/wizard component:</p>
<Steps currentStep={currentStep} margin="40px 50px">
<Steps.Step title="First step" />
<Steps.Step title="Second step" />
<Steps.Step title="Third step" />
</Steps>
<button
onClick={() => {
if (currentStep > 0) {
setCurrentStep(currentStep - 1)
}
}}
>
Prev
</button>
<button
onClick={() => {
if (currentStep < 3) {
setCurrentStep(currentStep + 1)
}
}}
>
Next
</button>
</Section>
<Section>
<p>Or icons... </p>
<Icon size={6}>check_circle</Icon>
</Section>
<Section>
<p>Or more complete editors, like this one</p>
<NoteEditor
onBlur={value => console.log(value)}
onChange={value => console.log(value)}
placeholder="Enter a message…"
title="Note"
value="I'm a more complete editor!"
/>
</Section>
</CenteredColumn>
)
}
export default HelloWorld
import React from 'react'
import { Action, ActionGroup } from '@pubsweet/ui'
const LandingPage = () => (
<>
<div>Hello World! Your PubSweet application is running just fine!</div>
<ActionGroup>
<Action to="/login">Login</Action>
<Action to="/signup">Signup</Action>
<Action to="/dashboard">Dashboard</Action>
</ActionGroup>
</>
)
export default LandingPage
...@@ -5,16 +5,10 @@ import { compose, withProps } from 'recompose' ...@@ -5,16 +5,10 @@ import { compose, withProps } from 'recompose'
import { AppBar, Action } from '@pubsweet/ui' import { AppBar, Action } from '@pubsweet/ui'
const Navigation = ({ logoutUser, currentUser, client }) => { const Navigation = ({ logoutUser, currentUser, client }) => {
const links = [<Action to="/posts">Posts</Action>] const links = [
<Action to="/dashboard/hello-world">Hello World</Action>,
if (currentUser === null) return null <Action to="/dashboard/kitchen-sink">Kitchen Sink</Action>,
]
if (currentUser && currentUser.admin) {
links.push(
<Action to="/users">Users</Action>,
<Action to="/teams">Teams</Action>,
)
}
return ( return (
<div> <div>
......
...@@ -5,26 +5,20 @@ import { Route, Switch } from 'react-router-dom' ...@@ -5,26 +5,20 @@ import { Route, Switch } from 'react-router-dom'
import Login from 'pubsweet-component-login' import Login from 'pubsweet-component-login'
import Signup from 'pubsweet-component-signup' import Signup from 'pubsweet-component-signup'
import PasswordReset from 'pubsweet-component-password-reset-frontend/PasswordReset' import PasswordReset from 'pubsweet-component-password-reset-frontend/PasswordReset'
import AuthenticatedComponent from 'pubsweet-client/src/components/AuthenticatedComponent'
import App from './components/App' import App from './components/App'
import Posts from './components/Posts' // This is your presentation side of things
import LandingPage from './components/LandingPage'
import Editor from './components/CollabEditor/src/App.tsx' // And this is where your admin stuff goes
import Dashboard from './components/Dashboard'
const HelloWorld = () => (
<AuthenticatedComponent>
<div>Hello World!</div>
</AuthenticatedComponent>
)
export default ( export default (
<App> <App>
<Switch> <Switch>
<Route component={HelloWorld} path="/dashboard" /> <Route component={LandingPage} exact path="/" />
<Route component={Posts} path="/posts" /> <Route component={Dashboard} path="/dashboard" />
<Route component={Editor} path="/editor" />
<Route component={Login} path="/login" /> <Route component={Login} path="/login" />
<Route component={Signup} path="/signup" /> <Route component={Signup} path="/signup" />
<Route component={PasswordReset} path="/password-reset" /> <Route component={PasswordReset} path="/password-reset" />
......
...@@ -19,6 +19,7 @@ module.exports = [ ...@@ -19,6 +19,7 @@ module.exports = [
// The configuration for the client // The configuration for the client
name: 'app', name: 'app',
target: 'web', target: 'web',
mode: 'development',
context: path.join(__dirname, '..', 'app'), context: path.join(__dirname, '..', 'app'),
entry: { entry: {
app: ['react-hot-loader/patch', 'webpack-hot-middleware/client', './app'], app: ['react-hot-loader/patch', 'webpack-hot-middleware/client', './app'],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment