Reusable, highly customisable and very lightweight notion share widget component in React + Storybook
-
The share component needs to have as little logic as possible, in a way a dumb component, meaning, it just renders. It dictates how the data needs to be structured so that this idea is maintained. All the majority of the logic needs to be handled from the consuming side. Having too much logic results in making a highly coupled component with little to no reusability and poor customisations.
-
No third party libraries were used in making this. Did not want to bloat the component size by importing additional dependencies, every component was designed in house without the use of external dependencies.
-
Context API and other Redux based solutions (too heavy) - State is managed this way for a reason. React Context is designed to share data that can be considered “global” for a tree of React components. It is primarily used when some data needs to be accessible by many components at different nesting levels. Component reuse becomes increasingly difficult if not used sparingly. Component Composition is used wherever necessary.
-
Basic keyboard navigation using divs is enabled. However, it can be made better by using customHooks for keyboard events on down and up keys and handling the tabIndex and element focus programatically. NOTE: Usage of too much refs is NOT ideal too.
-
Include smaller reusable components as stories and add more control via props.
-
This codebase is structured in a way so that publishing it as an npm package is easier in the future. The dependencies , peerDependencies and devDependencies are extensively structured to be easily expendable in the future. Very light weight.
-
Need to cover Unit tests with jest.
// node version - 16.15.1
// npm version - 8.11.0
npm install
npm build-storybook
npm storybook