andrico1234/beautiful-skill-tree

🌲🌲🌲Create beautiful skill trees for your web apps

Hey all ✌🏽

My name's Andrico and I'm a Frontend Developer at Anima. I'm currently obsessed with accessibility, web components and design systems.

I'm trying my hand combining all three with a2k.

I'm on Twitter and Polywork. I've also contributed to a small handful of OSS projects like React Admin, and you can find other bits, bobs, and a bunch of easter eggs, at andri.co.

beautiful-skill-tree's Issues

Collapsable trees

I'm stumped with this, when I collapse a skill tree using an accordion then the edges don't render into their correct places.

I've tried creating an accordions context that triggers the calculatePosition() function, but that doesn't seem to work. When the screen is manually resized, everything appears as normal.

As I write this I wonder if this is because the bottom node and top node positions are calculated in two different components, and one isn't calculated correctly... This isn't critical, and I've spent a lot of time on it so far.

Display progress for current tree

A nice rainbow bar that keeps to the style of the rest of the application

Explore: Skill tree navigation

• Tinder style swipe
• Navigation bar
• Search bar
• Collapsable trees

Mobile don't save states on window unload

Due to how mobile browsers work, the state of the tree only saves when the page gets refreshed. When the tab changes, app closes or the user shuts down the browser then the save state doesn't change. Implement an event listener that checks that utilises the Page visibility API to save state when the user is no longer viewing the page.

headingFontSize and headingFontColor don't do anything

Ensure that they're applied to the tree heading

Created from: #61

Lock/Unlock Skill Trees

BUG: Mobile straight edges are sometimes really straight angled edges

I have a feeling (but I might be wrong) that this linein SkillEdge.tsx is causing us some issues. I think it's some bad rounding which causes the pixels to be 1 or 2 off.

Research into donating to tree conservation charity

Refactor lines/edges

I ended up making a bit of a mess in the SkillEdge, Line, AngledLine components. I want to neaten these up so they're tight and the API is consistent between both Line and AngledLine components.

Side branches

Reset Skill Tree

This might be a good challenging item for someone with little React knowledge to work on.

We want a button that sets everything to 0. It will require familiarity with the context api, so do let me know if you want to pick this up and we can run through things.

Replacing the individual context provider with a single one could work. I initially went against this as it came at a performance cost, but this might have some clues as to how we can have a single provider and no unnecessary rerenders

https://frontarm.com/james-k-nelson/react-context-performance/

Merge custom theme object with default theme object

Update the theming so that a user can supply a partial theme object, where the omitted fields are filled in with the default styles.

Create a Gatsby example project

BST is used with calisthenicsskills, which is built using Gatsby.

SInce gatsby compiles sites to static on the server, it's important to not reference any globals like navigator or window directly in code that gets compiled on the server. Instead any references need to be contained within a componentDidMount(), or useEffect(), so that the global gets referenced at runtime.

It's difficult testing this with a separate site, so having a gatsby example site on the repo for the sole purpose of testing running/compiling with the local version of BST would be incredibly useful.

Remove Lodash dependency

Create 3 functions so we can remove lodash as a dependency

• mapValues
• isEmpty
• throttle

these don't need to be comprehensive or all encompasing, i'm using the default settings for all of them.

ensure that each function is tested.

BUG: Hidden skills are still tabbable

Prevent this from happening.

If the skill is not displayed remove the tabIndex value?

Are there performance implications to consider if we were to remove the elements form the dom and recreate them when the skill tree is toggled between visible/hidden

Large `nodeDesktopTextNodeWidth` causes the edges to break

Created from: #61

css theming

After skill-tree code has been migrated over to its own package. Convert the css code into something more appropriate e.g. style-components or glamourous

• convert css styles to styled-components
• add a theme provider to the top fo the skill tree
• convert static styles into customizable ones

Global:

• border
• border-radius

SkillTreeGroup:

• background-color
• font-family
• color
• margin

SkillNode:

• background-color (unlocked/locked)
• background-color (selected)
• hover border-color
• width (icon node)
• font-weight (text node)
• height (text node)
• width (text node)
• font-size

Skill edge:

• active-color
• border-color

Skill/Skill Tree filtering

..#47

Beta out in v1.1.0-beta.2

Add a `handleSelected` hook

Drag 'n' Drop Trees

Specify minimum node version

Update README to clearly explain how to run the package locally

related: #41

link lines misplaced with parent padding

It seams that the position of the lines between two nodes goes off the chart when any upper div uses padding or css library like Bootstrap (tested with v4). It seams that the css of those line use position: absolute which might be the problem with computed values...

In any case, keep up the good work !

Connect to children multiple parents

Hi,
great lib. I really enjoy the animations.
Is there a way to connect a child to two parents in the above tree? For example:
You have to achieve these two parents challenges to unlock the one child Kinda like this:

Merge custom user styles with default styles

Cascade deselection of prerequisite nodes

Whenever a prerequisite node is de-selected (current state set to anything other than 'selected' - usually 'unlocked'), its children still remain selected. This can be confusing because that node can then be unselected but cannot be selected again unless its prerequisite nodes are selected again.

If accepted, this issue would implement cascading behavior to the deselection of nodes. That is, it would be invalid for a node to be selected and its prerequisite node(s) not to be selected.

• Add tests to verify cascading deselection is enforced
• Change behavior in SkillNode to update the current state to not be 'selected' (and to be 'locked') if the current state of its parent is updated to no longer be 'selected'

Style improvements

• Add border shadow to the description tooltip to correctly convey elevation
• Replace the header focus outline colour with a custom one.

Medium article

Optional Nodes

This issue has been moved to the Skill Tree repo: https://github.com/andrico1234/beautiful-skill-tree/projects/1

Secret special surprise on completion

Control default hidden/visible state for trees

Semantic error TS7016: Could not find a declaration file for module

(typescript) Error: C:/xampp/htdocs/dev/beautiful-skill-tree-master/src/componen
ts/SkillNode.tsx(9,32): semantic error TS7016: Could not find a declaration file
for module '../../'. 'C:/xampp/htdocs/dev/beautiful-skill-tree-master/dist/inde
x.js' implicitly has an 'any' type.

fix: on tsconfig.json

"noImplicitAny": false,

Expose data from tree

Data to expose for now

• Total Skills
• Completed Skills

Focus states that don't look like booty

Currently the focus state is the same as the hover state, which is fine when tabbing across skills. The issue lies when a selected skill is unselected, and the user moves their mouse off of the de-selected node. It still remains in a 'hover-like' state, which creates an incongruity between the application's behaviour and the user's expectation.

The Skill Count's font should be set by Heading Font

In the image the Heading font is Roboto, and the node font is Raleway, but the Skill Count uses the node font.

Created from: #61

Styling optional nodes

I'd like to open the discussion about how optional nodes should appear when they are:

• locked
• unlocked
• selected

The appearance of the locked state may not need to change, but 'unlocked' should have a smaller degree of affordance to a required Node, to signify that it's not necessary to progress.

The appearance of the selected state should be so that in terms of the information hierarchy, it's less important than a required Node.

Explore: React-window for perf impovements

As the feature set increases, the performance for larger trees is looking like it might take a hit. Nothing to worry about just yet, but it might be worth keeping this in mind for the future.

https://react-window.now.sh/#/examples/list/variable-size

Expose states to user

In preparation of giving the calisthenics-skill-tree authentication and extending the app's behaviour, it makes sense to delegate the saving and loading of the skills data to the users.

Things to consider:

• performance degradation, we may need to hoist the skill data to the top level App context, to expose the data to the user (which could, or could not, have catastrophic consequences for subscribers of the context lower down in the DOM).
• the shape of the data exposed to the user, which may or may not be identical to how it's shaped now. i.e.

[{
  [skillKey]: {
    nodeState: NodeState,
    optional: boolean,
  }
}, {...}]

• how do we load the data back into the skill tree? this could lead to the package requiring more overhead to implement a simple skill tree, which goes against the philosophy of the package. A simple solution to this is giving the option to store data in localStorage to the application. Otherwise giving more complicated applications the ability to pass current state.

Add github link to NPM sidebar

Control skill's selected state

Write to localstorage onunload event

Writing an object to localstorage is an expensive operation and can result in a bottleneck on performance as we're writing to the store on every click.

Research into whether or not using 'beforeUnload' is a good solution to only write to local storage when the window goes to close. The state of the application remains in-memory in the mean time.

The event listener will added to the SkillProvider component.

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Please perform some performance testing before and after.

Replace current theme with styled-theming

It looks like the current implementation of themes for my app is proving expensive when it comes to the rendering of the components as each item has to look up the theme value from the provider. This looks like it solves the issue by declaring the themes from inside the component

https://jamie.build/styled-theming.html

Skilltree

Hi Andrico,

I am a part-time physics teacher in a secondary school (kid ages 13 - 16) and part-time freelance developer of web applications. I really like this library, so much that I was working on an application using this lib. Now I am using this application in my school as experiment. It is working very well so I am thinking about ways to earn coin.

https://skilltree-b6bba.firebaseapp.com/

I wanted to share the link to this application with you because your library was the main inspiration and made it possible to make it. Also I found some smaller and bigger issues with the library:

Node title class
Can you provide a way to add a class to the node title? Right now I have managed to style it by diving into the source code, but the CSS library Bulma has default override for h1 styling.

Theming options
Node desktop width: if you set this larger (or smaller) it will cause the lines to split or overlap.

Heading font: The number of skills in the heading of the skill tree, seem to be set by the font selected as Node Font and not Heading Font. As you can see in the screenshot below, I have set the heading font to Roboto and the node font to Raleway. The skill count is displayed in Raleway font.

Heading font color and size: Changing these values does not have any effect. I am able to set the heading font color by changing the node font color.

Saving the completed state

It would be nice if in the handleSave(
storage: ContextStorage,
treeId: string,
skills: SavedDataType,
) method you also provide access to the number of completed skills and the total number of skills (for all skilltrees in the group) as you are giving them already in the Skilltree Group.
These data are very helpful when trying to update progress bars for the students. Right now I have implemented this with getting textContent from the skilltree group.

Explore: relative positioning of edges

Expose progress data in the handleSave method

Instead of having several arguments, the handleSave method could have an Event object that contains all fo the relevant information.

This would be a breaking a change.

Created from: #61

Keyboard only use

Can currently tab to navigate the skill tree, but cannot use the enter button to select a node.
This needs to be added.

Bonus: Keypad navigable. Pressing up moves to the parent, pressing right/left moves to the siblings. Pressing down goes to the left most sibling

tooltipDescription can either be a string or a react node

also rename tooltipDescription to tooltipContent

Add skills leveling

Allow a Skill / SkillTree to have level (like Diablo 2) and allowing to gate the next skill "Tier" (like Borderlands) with a value.

Even if I dont need this feature for my actual work, I thought it would be a nice enhancement to the actual awesome lib of your. If I find some time, I might look into it.

Make the example site looks presentable

A sorely neglected part of the repo

This is a good opportunity to showcase some of the package's top features in clear detail.

A skill tree that shows of a variety of feature sets

Include features like:
Small trees
Larger trees
Custom styling
Tooltip Content
Descriptions
Collapsible/Non-collapsible trees
Filtering
Resetting data
Saving
Optional Nodes
Utilising the skill count/selected skill count information

And to make it all around presentable

I'd love to have a GitHub page where the example site is hosted

All of these don't need to be created over a single MR, but can be done as part of a much larger project.

I would love to have someone own this.

A great first issue for anyone wanting to become more familiar with the codebase.

Create bundle/release script

A script that in the package.json file that runs all the appropriate build and publishing commands. Shouldn't be too long, let's discuss the options we want to have enabled for both.

Build/Bundling is taken care by: https://github.com/palmerhq/tsdx

Publishing is taken care by: https://github.com/sindresorhus/np

Consider running the running of tests and blocking if code coverage isn't up to scratch