mamawosh-timeslot-picker

Mama Wosh Timeslot Picker

A curated UI component for selecting a date & a block of time.

• Mama Wosh Timeslot Picker
• System Requirements
  • Installing version-bump-prompt
• Usage
  • Prerequisites
  • Commands
  • Example
• API
• Develop
  • Install all dependencies
  • Run the example as you edit
• Build
• Test
• Publish

System Requirements

Install the latest versions of the following software (some have been given minimum viable versions):

• Node.js v8.2.0, which is prepackaged with
  • NPM v5.2.0, which is prepackaged with
    • NPX v5.2.0
• Yarn (the /example folder uses this instead of NPM, highly recommended)
• Visual Studio Code (highly recommended) or Sublime Text
• version-bump-prompt will help automatically adjust the semantic version of the library before you publish any new changes

Installing version-bump-prompt

Have NPM install it globally.

npm install --global version-bump-prompt

Usage

Prerequisites

Before installing this package, make sure that the latest versions of these packages have already added to your dependencies:

• react
• react-dom
• All @types/* definitions for the packages mentioned if your project uses typescript.

Commands

Install this package:

NPM

npm install --save @mamawosh/timeslot-picker

Yarn

yarn add @mamawosh/timeslot-picker

Example

To be added.

API

To be added.

Develop

Install all dependencies

The /example folder uses Yarn, not NPM. We recommend that you install Yarn, too. When you run npm install, the scripts automatically download everything you need for both the library and its /example. If you need to run this yourself, read on.

Install all dependencies:

npm run install-all

This is the equivalent of...

npm install
cd example
yarn
cd ..

Run the example as you edit

To run the example, you'll need to build the distributable copy of the library's source code first as the example depends on the local copy, rather than the NPM registry copy. In order to make things easy, we made a convenience command available:

npm run develop

Every change you make & save to the source code will update the distributable copy in the /example/src/@mamawosh/timeslot-picker folder. Do not edit the code there.

In order to use this library in the example provided, import it like you would with a normal NPM module:

import React from 'react';
import { TimeslotPicker } from '@mamawosh/timeslot-picker';

class TimeslotForm extends React.Component {
  render() {
    // Your implementations here.
    return (
      <div>
        <TimeslotPicker />
      </div>
    );
  }
} 

Build

If you need a distributable copy for any particular reason, you can generate it through the source code.

Run the following command to create a distributable copy:

npm run build

The distributables will be produced in the /dist folder of your local copy of this library.

You can also tell the script to rebuild the distributables every time you edit & save your code:

npm run build-watch

However, for such cases, we recommend the Develop instructions as they require fewer steps.

Test

This library is tested using Jest.

Run the following command to test the code:

npm test

Publish

Update the version of the package using version-bump-prompt (see online instructions). Here's an example of a patch update in beta mode:

bump patch --beta

You can also update the versions manually, but it is not recommended.

Login & verify that the update shows no problems during the dry run:

npm login
npm publish --access public --dry-run

Run the following once all is good:

npm publish --access public