Adds a Paginator (Pagination Component)

[peterMuriuki]

Adds a Headless Pagination Component

[peterMuriuki]

Blocked:

me@thinkpad-t440s ~/D/o/js-tools (pagination)> 
yarn babel src -d dist --root-mode upward --extensions '.ts,.tsx'  --ignore '**/*.test.ts,**/*.test.tsx,**/tests,**/__tests__'
yarn run v1.12.3
$ /home/peter/Desktop/onaio/js-tools/node_modules/.bin/babel src -d dist --root-mode upward --extensions .ts,.tsx --ignore '**/*.test.ts,**/*.test.tsx,**/tests,**/__tests__'
babel:
  src does not exist
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Package.json script section:

"scripts": {
    "test": "jest",
    "lint-js": "eslint '{packages,stories}/**/*.{js,jsx}'",
    "lint-ts": "tslint -c tslint.json '{packages/**/src,stories}/**/*.{ts,tsx}'",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "clean-build": "rimraf packages/**/dist"
  }

me: 😕

[peterMuriuki]

@moshthepitt ☝️

[peterMuriuki]

Also mpower might need this very soon, if not already. Am hoping that we can get this published as soon as possible after the above is fixed and the review.

[moshthepitt]

@p-netm please ping me when you're ready for a review

[moshthepitt]

@p-netm the babel command and the tsc command should be run from within the individual package's directory. Could you please update the README in this PR?

[moshthepitt]

Why is there no dist/index.js file - imho we should have this 1) for consistency and 2) it is specified in package.json?

[moshthepitt]

Can we remove the lodash dependency? I think we are only using the range function, which we can trivially define - no?

e.g.

const range = (start: number, stop: number, step = 1) =>
    Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step)

[moshthepitt]

What is the reason for not making this work via React Router, instead of using click handlers?

[peterMuriuki]

Why is there no dist/index.js file - imho we should have this 1) for consistency and 2) it is specified in package.json?

@moshthepitt is the file dist/index.js auto generated during transpiling?

[moshthepitt]

@p-netm for that to happen you need an index.tsx in the root package directory.

[moshthepitt]

@p-netm is there a test for RoutedPaginator that shows rendered Link components?

[moshthepitt]

@p-netm I really like this "headless" approach. Good job.

I think what's left is:

• Add docstrings to Paginator/index.tsx
• Add documentation about this approach being headless, what that means, how to work with it, and an example (probably best to go with a bootstrap example)