|
|
A PubSweet component is a [Node.js](https://nodejs.org/api/modules.html) module that can extend or change functionality of the [server](/Introduction: server) and/or [client](/Introduction: client) of a PubSweet app.
|
|
|
|
|
|
<!--- Mihail Dunaev: maybe link to the pubsweet webpage with more info on components? https://pubsweet.org/docs/components/index.html --->
|
|
|
|
|
|
Components build on the core modules to provide the actual functionality of a PubSweet app. By combining the components you need, you can build any publishing platform or workflow you can imagine.
|
|
|
|
|
|
Start using them straight away, or see how components work with an example.
|
|
|
|
|
|
#Next steps
|
|
|
Learn how to use components in your app.
|
|
|
Take a look at the component library to see what existing components can do
|
|
|
See our component developer guide to learn how to create your components.
|
|
|
#An example: user login
|
|
|
The login component provides basic user login functionality in the client. It does this by exporting:
|
|
|
|
|
|
redux actions for authenticating and de-authenticating users with the server
|
|
|
redux reducers for managing user data and authentication tokens
|
|
|
a React login form that provides a login interface and uses the login redux actions and reducers
|
|
|
a default style for the form
|
|
|
You can install the login component and instantly have login functionality in your app. You can also pick and choose which parts of the component you use. You example you could build your own React login form and still make use of the redux actions and reducers from the login component, or keep the existing form but provide a new style.
|
|
|
|
|
|
**UI Components**
|
|
|
|
|
|
A list of UI components that can be used can be found [here](https://ui-demo-ypx34u.gateway.ps.semioticsquares.com/).
|
|
|
|
|
|
**Pubsweet Components**
|
|
|
|
|
|
|Component | Readme?|
|
|
|
|:-----:|:-----:|
|
|
|
|[AWS S3](https://gitlab.coko.foundation/pubsweet/pubsweet/tree/master/packages/components/packages/AWSS3)|[Yes](https://gitlab.coko.foundation/pubsweet/pubsweet/blob/master/packages/components/packages/AWSS3/README.md)|
|
|
|
|[AWS SES](https://gitlab.coko.foundation/pubsweet/pubsweet/tree/master/packages/components/packages/AWSSES)|[Yes](https://gitlab.coko.foundation/pubsweet/pubsweet/blob/master/packages/components/packages/AWSSES/README.md)|
|
|
|
|[Blog](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/Blog)| [Yes](https://gitlab.coko.foundation/pubsweet/pubsweet-components/blob/master/packages/Blog/Blog.md)|
|
|
|
|[Draft.js](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/Draft.js)|[Yes](https://gitlab.coko.foundation/pubsweet/pubsweet-components/blob/master/packages/Draft.js/Draft.md) - needs an update|
|
|
|
|[Epub](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/Epub)|No|
|
|
|
|[Epub Frontend](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/EpubFrontend)|No|
|
|
|
|[Form Group](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/FormGroup)|[Yes](https://gitlab.coko.foundation/pubsweet/pubsweet-components/blob/master/packages/FormGroup/README.md)|
|
|
|
|[HTML](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/HTML)|[Yes](https://gitlab.coko.foundation/pubsweet/pubsweet-components/blob/master/packages/HTML/HTML.md) - needs an update|
|
|
|
|[InkBackend](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/InkBackend)|No|
|
|
|
|[InkFrontend](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/InkFrontend)|No|
|
|
|
|[Login](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/Login)|No|
|
|
|
|[Manage](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/Manage)|No|
|
|
|
|[MediumDraft](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/MediumDraft)|No|
|
|
|
|[Navigation](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/Navigation)|No|
|
|
|
|[PasswordResetBackend](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/PasswordResetBackend)|No|
|
|
|
|[PasswordResetFrontend](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/PasswordResetFrontend)|No|
|
|
|
|[PostsManager](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/PostsManager)|No|
|
|
|
|[Signup](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/Signup)|No|
|
|
|
|[SortableList](https://gitlab.coko.foundation/pubsweet/pubsweet/tree/master/packages/components/packages/SortableList)|[Yes](https://gitlab.coko.foundation/pubsweet/pubsweet/blob/master/packages/components/packages/SortableList/SortableList.md)|
|
|
|
|[TeamsManager](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/TeamsManager)|No|
|
|
|
|[UsersManager](https://gitlab.coko.foundation/pubsweet/pubsweet-components/tree/master/packages/UsersManager)|No| |
|
|
A PubSweet component is a JavaScript module that can extend or change the functionality of a PubSweet application. Developers and designers can use any combination of components they can imagine to build the publishing platform they need.
|
|
|
|
|
|
PubSweet components are broadly divided into two categories: server components and client components, depending on whether they aim to extend `pubsweet‐server` or `pubsweet‐client`, respectively. Both types are expected to follow the naming convention of `pubsweet‐component‐` or `@pubsweet/component‐` to allow for easy discoverability.
|
|
|
|
|
|
PubSweet components export certain keys from their main file. This export makes them loadable by PubSweet applications and tooling.
|
|
|
|
|
|
# Server components
|
|
|
A server component can export the following keys:
|
|
|
* `server`: This key allows Express.js routes and/or middleware to extend the server. The value for this key is a function that returns another function that accepts an Express.js app as its first argument. This function can do whatever it wants with the app (eg. add new routes, apply middleware functions). Take a look at the [password reset component(https://gitlab.coko.foundation/pubsweet/pubsweet/tr ee/master/packages/components/PasswordReset-server) for a starting point.
|
|
|
* `typeDefs`: GraphQL type definitions
|
|
|
* `resolvers`: GraphQL resolvers
|
|
|
## Example
|
|
|
```javascript
|
|
|
module.exports = {
|
|
|
server: () => app => {
|
|
|
app.get('someroute', someRouteFunction)
|
|
|
app.use(someMiddleware)
|
|
|
},
|
|
|
typeDefs: 'GraphQL type definitions',
|
|
|
resolvers: { }
|
|
|
}
|
|
|
```
|
|
|
# Client components
|
|
|
All client component options are exported under the client key. The options that can be nested under this key are as follows:
|
|
|
components: An array of functions that return React components
|
|
|
## Example
|
|
|
```
|
|
|
module.exports = {
|
|
|
client: {
|
|
|
components: [
|
|
|
() => someReactComponent,
|
|
|
() => anotherReactComponent
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
# A component example
|
|
|
The login (https://gitlab.coko.foundation/pubsweet/pubsweet/tree/ma ster/packages/components/Login) component is a good standing example of a client component. It (predictably) provides basic user login functionality in the client. It does this by exporting a React login form that provides a login interface and uses the login GraphQL Query's and mutations to authenticate users.
|
|
|
|
|
|
You can install the login component and instantly have login functionality in your app. You can also pick and choose which parts of the component you use.
|
|
|
|
|
|
# Next steps
|
|
|
* Learn how to use components in your app.
|
|
|
* Take a look at the component library to see what existing components can do
|
|
|
* See our component developer guide to learn how to create your components. |