update readme

README.md

@@ -2,44 +2,47 @@
 
 A small library to help get you implement beautiful, responsive, and satisfying skill trees to your React applications
 
+---
+
 ## Examples
 
 [Calisthenics Progressions](https://calisthenicsskills.com/)
 
+---
+
 ## Getting started
 
 `yarn add beautiful-skill-tree`
 
-The package exposes the two components `SkillTree` and `SkillTreeGroup`. You'll also need to import the style sheet `beautiful-skill-tree/styles.css`.
+The package exposes the thre components `SkillTree`, `SkillTreeGroup` and `SkillTreeGroupProvider`.You'll also need to import the style sheet `beautiful-skill-tree/styles.css`.
+
+The `SkillTree` is the component that takes your data and renders the tree of components.
+
+The `SkillTreeGroup` is the component that groups skill trees and will expose in the future expose various methods and properties related to the skill tree.
+
+The `SkillTreeGroupProvider` is the skill tree's context provider.
+
 For those that like their data typed, you can import the `Skill` type from the package.
 
-Wrap your application like this
+Wrap your application like this:
 
 ```typescript
-import { SkillTreeGroup, SkillTree, Skill } from 'beautiful-skill-tree';
+import { SkillTreeGroup, SkillTree, SkillTreeGroupProvider, Skill } from 'beautiful-skill-tree';
 import 'beautiful-skill-tree/styles.css';
 
 const data: Skill[] = [];
 
-<SkillTreeGroup>
-  <SkillTree id="skill-tree" title="Skill Tree" data={data} />
-</SkillTreeGroup>;
+<SkillTreeGroupProvider>
+  <SkillTreeGroup>
+    {skillCount => {
+      <SkillTree id="skill-tree" title="Skill Tree" data={data} />
+    }}
+    </SkillTreeGroup>
+<SkillTreeGroupProvider>
 ```
 
 Run your application's starting script, access localhost to find an empty skill tree. The skill tree group will be empty until data is passed to the skill tree.
 
-The type for the data tree is the following:
-
-```typescript
-type Skill[] = {
-	id: string;
-	title: string;
-	tooltipDescription: string;
-	icon?: string;
-	children: Skill[];
-}
-```
-
 Add the following data to your skill tree and see what happens:
 
 ```typescript
@@ -73,17 +76,52 @@ Go to your browser and you should see this:
 
 ![Skill Tree Demo](https://media.giphy.com/media/j2qzDGItebWCtFA7lW/giphy.gif)
 
-## Current Features
+---
+
+## Motivation
+
+Is there anything more satisfying than the feeling of progression; you know, improving at something you care deeply about? Not likely! Be it in video games, web development, or your physical capabilities, very little gives us a sense of pride and accomplishment than gaining new skills and using them. My motivation was to make skill trees that feel satisfying and fun to use.
+
+Unfortunately there aren't any React packages that enable us developers to easily create skill tree in their applications. This is where Beautiful Skill Tree comes in. BST is a small package that allows you to easily create your own skill trees that look great across devices and screen sizes.
+
+---
+
+## Component API
+
+### SkillTree
+
+#### id: `string` [*required*]
+
+#### title: `string` [*required*]
+
+#### data: `Skill` [*required*]
+
+### SkillTreeGroup
+
+#### children: `skillCount: React.ReactNode` [*required*]
+
+### Skill
+
+```typescript
+type Skill[] = {
+	id: string;
+	title: string;
+	tooltipDescription: string;
+	icon?: string;
+	children: Skill[];
+}
+```
+
+---
+
+## V1 Checklist
 
 - [x] Skill
 - [x] Animations
 - [x] Progress saving
 - [x] Tooltips
 - [x] Icons
 - [x] Responsive
-
-## Planned Features
-
 - [ ] Reset skill sree
 - [ ] CSS theming
 - [ ] Expose skill tree state
@@ -93,12 +131,8 @@ Go to your browser and you should see this:
 - [ ] Keyboard only use
 - [ ] Secret special surprise on tree completion
 
+---
+
 ## Contributing
 
 [contributing guidelines](/CONTRIBUTING.md)
-
-## Motivation
-
-Is there anything more satisfying than the feeling of progression; you know, improving at something you care deeply about? Not likely! Be it in video games, web development, or your physical capabilities, very little gives us a sense of pride and accomplishment than gaining new skills and using them. My motivation was to make skill trees that feel satisfying and fun to use.
-
-Unfortunately there aren't any React packages that enable us developers to easily create skill tree in their applications. This is where Beautiful Skill Tree comes in. BST is a small package that allows you to easily create your own skill trees that look great across devices and screen sizes.

example/index.tsx

@@ -10,10 +10,10 @@ const App = () => {
   return (
     <SkillTreeGroupProvider>
       <SkillTreeGroup>
-        {totalCount => {
+        {skillCount => {
           return (
             <React.Fragment>
-              <h2 style={{ padding: '0 16px' }}>Total skills: {totalCount}</h2>
+              <h2 style={{ padding: '0 16px' }}>Total skills: {skillCount}</h2>
               <SkillTree
                 id="squat"
                 title="Squat Progression"

src/components/CalculateNodeCount.tsx

@@ -17,11 +17,11 @@ function calculateNodeCount(data: Skill[]): number {
 }
 
 function CalculateNodeCount({ data }: Props) {
-  const { addToTotalCount } = useContext(SkillTreeGroupContext);
+  const { addToSkillCount } = useContext(SkillTreeGroupContext);
 
   useEffect(() => {
     const count = calculateNodeCount(data);
-    addToTotalCount(count);
+    addToSkillCount(count);
   }, []);
 
   return null;

src/components/SkillTreeGroup.tsx

@@ -2,12 +2,12 @@ import React, { useContext } from 'react';
 import SkillTreeGroupContext from '../context/SkillTreeGroupContext';
 
 interface Props {
-  children: (totalCount: number) => React.ReactNode;
+  children: (skillCount: number) => React.ReactNode;
 }
 
 function SkillTreeGroup(props: Props) {
-  const { totalCount } = useContext(SkillTreeGroupContext);
-  return <div className="SkillTreeGroup">{props.children(totalCount)}</div>;
+  const { skillCount } = useContext(SkillTreeGroupContext);
+  return <div className="SkillTreeGroup">{props.children(skillCount)}</div>;
 }
 
 export default SkillTreeGroup;

src/components/__tests__/CalculateNodeCount.test.tsx

@@ -9,13 +9,13 @@ import {
 } from '../../components/__mocks__/mockData';
 
 interface GetDummyCounterProps {
-  children: (totalCount: number) => JSX.Element;
+  children: (skillCount: number) => JSX.Element;
 }
 
 function GetDummyCounter({ children }: GetDummyCounterProps) {
-  const { totalCount } = useContext(SkillTreeGroupContext);
+  const { skillCount } = useContext(SkillTreeGroupContext);
 
-  return children(totalCount);
+  return children(skillCount);
 }
 
 function renderComponent(data: Skill[]) {
@@ -27,8 +27,8 @@ function renderComponent(data: Skill[]) {
 
   const api = render(
     <GetDummyCounter>
-      {totalCount => {
-        counter = totalCount;
+      {skillCount => {
+        counter = skillCount;
         return <CalculateSkillNodes data={data} />;
       }}
     </GetDummyCounter>

src/context/SkillTreeGroupContext.tsx

@@ -5,36 +5,36 @@ interface Props {
 }
 
 interface ISkillContext {
-  totalCount: number;
-  addToTotalCount: (number: number) => void;
+  skillCount: number;
+  addToSkillCount: (number: number) => void;
 }
 
 const SkillTreeGroupContext = React.createContext<ISkillContext>({
-  totalCount: 0,
-  addToTotalCount: () => null,
+  skillCount: 0,
+  addToSkillCount: () => null,
 });
 
 interface State {
-  totalCount: number;
+  skillCount: number;
 }
 
 export class SkillTreeGroupProvider extends React.Component<Props, State> {
   state = {
-    totalCount: 0,
+    skillCount: 0,
   };
 
-  addToTotalCount = (number: number): void => {
-    this.setState(({ totalCount }) => ({
-      totalCount: totalCount + number,
+  addToSkillCount = (number: number): void => {
+    this.setState(({ skillCount }) => ({
+      skillCount: skillCount + number,
     }));
   };
 
   render() {
     return (
       <SkillTreeGroupContext.Provider
         value={{
-          totalCount: this.state.totalCount,
-          addToTotalCount: this.addToTotalCount,
+          skillCount: this.state.skillCount,
+          addToSkillCount: this.addToSkillCount,
         }}
       >
         {this.props.children}