Macs-widgets NPM

First things first

Firstly, clone this repository and build it.

The script will build to the dist/ folder.

 npm run build

You may want to use scoped naming i.e. "@myscope/use-my-hook"

More info: https://docs.npmjs.com/using-npm/scope.html

How to use package in local dev

Outside of the widget local repo, set up a testing react app using this command

 // make sure this is run outside of the asu-widget folder
 npx create-react-app widget-test --template typescript

The widget must be built, see above. If built, in your widget-test folder, run this:

 // ex ../asu-widget/ on my machine
 npm install path/to/asu-widget/

Development commands

 // watch
 npm run start

 // builds the dist folder
 npm run build

 // starts tests
 npm run test

Local testing and yarn link

To locally test the package, do the following:

Let's assume your package name is "asu-widget" and your CRA is "widget-test".

Let's also assume they are in one workspace.

workspace
  - asu-widget
  - widget-test

a) in hook folder, run

yarn link

b) assuming you have a workspace, create a sample CRA app

npx create-react-app widget-test --template typescript

c) navigate to your CRA app folder

cd widget-test

d) run command

 yarn link use-my-counter

e) In your CRA app, you can now user package, as it's linked locally

  import { useGraph2D, usePermutationGrid, usePermutationTree } from "asu-graph-widget";

  ...

  const App: React.FC = () => {
    const { element: GraphElement } = useGraph2D();
    const {
      element: PermutationElementPP1,
      selectedItems: selectedItemsPP1,
      selectedCount: selectedCountPP1,
    } = usePermutationGrid({
      setA: ["1", "2", "3", "4", "5", "6"],
      setB: ["1", "2", "3", "4", "5", "6"],
      variant: "points",
    });

    const {
      element: PermutationElementPP2,
      selectedItems: selectedItemsPP2,
      selectedCount: selectedCountPP2,
    } = usePermutationGrid({
      setA: ["M", "A", "T", "H"],
      setB: ["1", "2", "3", "4", "5", "6"],
      variant: "combos",
    });

    const {
      element: PermutationElementPP3,
      selectedItems: selectedItemsPP3,
      selectedCount: selectedCountPP3,
    } = usePermutationTree({
      sets: [
        ["Ham", "Tuna", "Veggie"],
        ["Rye", "Wheat", "Focaccia"],
        ["American", "Swiss"],
      ],
      variant: "left-right",
    });

    return (
      <div className="App">
        <div>{GraphElement} </div>
        <div>Selected Items: {selectedItemsPP1}</div>
        <div>Selected Count: {selectedCountPP1}</div>
        <div>{PermutationElementPP1}</div>

        <div>Selected Items: {selectedItemsPP2}</div>
        <div>Selected Count: {selectedCountPP2}</div>
        <div>{PermutationElementPP2}</div>

        <div>Selected Items: {selectedItemsPP3}</div>
        <div>Selected Count: {selectedCountPP3}</div>
        <div>{PermutationElementPP3}</div>
      </div>
    );
  };

f) However, this will give you an error due to different copy of React and in CRA app. To counter that let's assume that we have workspace

workspace
  - asu-widget
  - widget-test

We navigate to asu-widget and type (this will link the React versions locally).

Please amend the path to your needs.

 npm link ../widget-test/node_modules/react

We should be good to go to work locally.

Deployment to NPM

Login to correct NPM account

npm login

Versioning

Increase the version number as per NPM guides https://docs.npmjs.com/about-semantic-versioning.

// increases the first digit i.e. from 0.5.4 to 1.0.0
npm version major

// increases the second digit i.e. from 0.0.3 to 0.1.0
npm version minor

// increases the third digit i.e. from 0.0.1 to 0.0.2
npm version patch