asu-graph-widget v1.14.0
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
Deployment
Run the command and the package should be up.
npm publish --access public
What If I want to export a component?
You can do that too, following same pattern as you'd with hooks.
Bear in mind you'd propably need .tsx file and not .ts.
Share with the world
Share your work and learnings with the world! :)