From 811d6056d1f8dfa9d38eae4bcd70df5bafc3f886 Mon Sep 17 00:00:00 2001 From: andrico Date: Sat, 13 Jul 2019 21:54:34 +0100 Subject: [PATCH] update readme --- README.md | 90 +++++++++++++------ example/index.tsx | 4 +- src/components/CalculateNodeCount.tsx | 4 +- src/components/SkillTreeGroup.tsx | 6 +- .../__tests__/CalculateNodeCount.test.tsx | 10 +-- src/context/SkillTreeGroupContext.tsx | 22 ++--- 6 files changed, 85 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 71c5aa1..ae7e71b 100644 --- a/README.md +++ b/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[] = []; - - -; + + + {skillCount => { + + }} + + ``` 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,7 +76,45 @@ 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 @@ -81,9 +122,6 @@ Go to your browser and you should see this: - [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. diff --git a/example/index.tsx b/example/index.tsx index 218167f..9dbccb2 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -10,10 +10,10 @@ const App = () => { return ( - {totalCount => { + {skillCount => { return ( -

Total skills: {totalCount}

+

Total skills: {skillCount}

{ const count = calculateNodeCount(data); - addToTotalCount(count); + addToSkillCount(count); }, []); return null; diff --git a/src/components/SkillTreeGroup.tsx b/src/components/SkillTreeGroup.tsx index 938683a..64b91d4 100644 --- a/src/components/SkillTreeGroup.tsx +++ b/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
{props.children(totalCount)}
; + const { skillCount } = useContext(SkillTreeGroupContext); + return
{props.children(skillCount)}
; } export default SkillTreeGroup; diff --git a/src/components/__tests__/CalculateNodeCount.test.tsx b/src/components/__tests__/CalculateNodeCount.test.tsx index dcd0617..7278ab2 100644 --- a/src/components/__tests__/CalculateNodeCount.test.tsx +++ b/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( - {totalCount => { - counter = totalCount; + {skillCount => { + counter = skillCount; return ; }} diff --git a/src/context/SkillTreeGroupContext.tsx b/src/context/SkillTreeGroupContext.tsx index 656c6c6..529afe4 100644 --- a/src/context/SkillTreeGroupContext.tsx +++ b/src/context/SkillTreeGroupContext.tsx @@ -5,27 +5,27 @@ interface Props { } interface ISkillContext { - totalCount: number; - addToTotalCount: (number: number) => void; + skillCount: number; + addToSkillCount: (number: number) => void; } const SkillTreeGroupContext = React.createContext({ - totalCount: 0, - addToTotalCount: () => null, + skillCount: 0, + addToSkillCount: () => null, }); interface State { - totalCount: number; + skillCount: number; } export class SkillTreeGroupProvider extends React.Component { 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, })); }; @@ -33,8 +33,8 @@ export class SkillTreeGroupProvider extends React.Component { return ( {this.props.children}