zwui

Abstract

This is ZWUI, a collection of React.js components to simplify user interface development at Zeilenwerk. It's very much a work in progress.

(!) This is an internal project and package of Zeilenwerk. You're welcome to use and re-use it, but it comes without warranty or support.

Using ZWUI

In your React app, install the npm package zwui to get started (beware that this may not reflect the latest changes in the repository):

npm install zwui --save

Then import and use the components you want:

import React, {Component} from 'react'
import {
  Button
} from 'zwui'

export default class Demo extends Component {
  render(){
    return <Button label="Click me!" onClick={() => console.log("Button was clicked")} />
  }
}

Documentation

The documentation for the components are baked into the project itself, which is a regular React app. Clone the repository, install all the dependencies and run the app to see examples and the documentation:

npm install
npm start

Developing

The guiding principles of ZWUI are the following:

• Make components that save time: We don't try to reinvent the wheel, but provide our future selves with easy solutions to everyday problems. We don't need to create a Button component in every project when we can create it here.
• Make components that feel natural: Try to follow the conventions of Zeilenwerk and the larger React community when designing and naming components and their props. A Button just naturally has a onClick handler. Good (component) design is invisible.
• Make components that just work: The components should be usable without having to use a whole ecosystem of other components: Plug and play / import and use. Do one thing only, and do that well.
• Make components that are universally adaptable: Only add components and behaviours that are abstract enough to be re-used. If you want a component to behave in a way that only benefits a project-specific use case, copy the component into your project and edit it there. But remember to think your use case through; maybe a more abstract implementation of the behaviour may benefit your project and other use cases.

Publishing a new package version

To publish a new version to npm, you'll need to do the following:

• Increase the version number in package.json
• Run the prepared task yarn package to create the needed files in dist/
• Commit the generated files and push them
• Upload the package to npm with npm publish