0xjjpa commented 5 years ago

Introduction

As described in #20, we are currently facing a couple issues regarding our UI kit. In short, we have two major issues:

Our current setup is a CRA app that takes forever to load, when one wants to use/develop a component for our application.
We have no easy way to fetch individual components, so even though we can install our UI kit, one can't easily fetch one specific component like most UI libraries can do.

In the past, we had been using bitsrc.io, but has been quite challenging for local development. We'll favor NPM for the time being, so the solution should natively assume NPM deployment.

Requirements

Split the code for showcasing a specific component and our entire gallery. The gallery can still be a CRA application and might not need modification, but we need to setup an easy "view component" setup so someone can see only one component if so wishes. You can inspire yourself in the Aragon UI, x0 compositor, Neutrino components, Storybook or similar. Pick a light-weight library that doesn't take forever to load and can easily allow development of a component.
Setup the required scripts for deploying the library and add the documentation required for showcasing how the library can be:

Installed, used and reused in many react applications
Improved, added and redeployed.

Expected Deliverables

A gallery with all the current existing components.
A component viewer where one can view a specific component.
A project setup (through lerna, builder) that allows quickly versioning per component, and the capabilities to upgrade a component as required.
Documentation and demos on how to use our existing components through npm and easily integrate it in any React project.

To Submit:

Pull Request with changes to our gallery and components setup.
Any necessary refactor for our components to work easily and be integrated into any react project.
Documentation with tests, demos and examples for a project easily using a component, and instructions on how to add a new one to our kit.

Additional Information:

This is a bit of a lengthy task that requires modifying the setup of an existing project. Make sure to pick the adequate technology or setup in order to move forward as the idea is anyone can:

Preview our gallery in an easy way, with its current design
Preview a component in an easy way, with its current design
Develop a component in an easy way, with a better setup than we have
Integrate a component in an easy way, with a better setup than we have

Additional Notes

If you have any questions, please feel free to ask in the thread or ping us at our Gitter channel - https://gitter.im/Mybit-Foundation/DDF

Disclaimer

All work completed via the MyBit Decentralised Development Fund is property of the MyBit Foundation (CHE-177.186.963) and may be used, re-used, and/or distributed, re-distributed by the MyBit Foundation for financial gain. The contributor holds no warrant nor claims for any future payments resulting from monetisation schemes originating from the MyBit Foundation or any of its affiliates. Where law permits outside of open source regulations, the contributor is not permitted to distribute any work completed via the MyBit Decentralised Development Fund (DDF) for personal gain.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 100000.0 MYB (418.2 USD @ $0.0/MYB) attached to it as part of the MyBit AG fund.

If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
- Want to chip in? Add your own contribution here.
- Questions? Checkout Gitcoin Help or the Gitcoin Slack
- $41,364.48 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 10 months from now. Please review their action plans below:

1) pbteja1998 has been approved to start work.

I will work with the team to finalize libraries/packages that needs to be used, before I can make an action plan on how to proceed with this.

Learn more on the Gitcoin Issue Details page.

pbteja1998 commented 5 years ago

https://uimybitio-wgfcnalatl.now.sh/

The following things are done

Publishing as npm package - npm build-package && npm publish publishes the package
now creates the deployment which can be used for reviewing.
Documentation to add a new component is already present. There is no change in that.
Now the package containing all the components can be installed with npm install mybit-ui.
Importing a component to a react app can be done in the following way.
```
import {ComponentName} from 'mybit-ui';
```

Please tell me what else needs to be modified? ( @jjperezaguinaga )

0xjjpa commented 5 years ago

Hi @pbteja1998 , good work. Please wait for us to tackle a couple issues in our hands before moving on with this one. Might take a couple days for us, so bear with us for a bit ☺️

gitcoinbot commented 5 years ago

@pbteja1998 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

pbteja1998 commented 5 years ago

73

gitcoinbot commented 5 years ago

@pbteja1998 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

pbteja1998 commented 5 years ago

@jjperezaguinaga

0xjjpa commented 5 years ago

Hi @pbteja1998 ! Apologies for the huge delay following up with this, but I've finally had a chance to review your PR. Here are my comments:

I've successfully deployed the npm package with npm build-package && npm publish. Since it's going to be an organisation package (i.e. @mybit/ui we need to do npm publish --public. Please add a script task that does this, and call it deploy so we can do it one single step.
now is enough for visualising the gallery, but we need something else to visualise each component as we are developing them. As of right now, it's impossible to see a component while it's being developed, which is a requirement of the task. See x0 or Storybook as a reference on how we could do this.
Please update all the components and the package name to use @mybit/ui in the documentation. Not all the components have the correct or most up-to-date documentation, so please ensure each component has: demo, source code working, and proper instructions on install. Furthermore, update the README on the repository to include instructions on how to run the project locally, how to test the component, how to see the gallery, deploy the gallery, install the npm package and test it in a project. Create an online demo with Glitch and showcase all the components (you can use mine for a reference - https://jjperezaguinaga-create-react-app-instance.glitch.me/, just Remix the following one that has already a CRA instance preloaded and the @mybit/ui package installed. Embed the example the same way the following article does it. The golden question we want to answer when doing documentation is, "would this be the documentation I would like to see when opening this project?"
Currently we are installing the entire library, which is not ideal. If I want to use MyBit's logo, I don't want to install all the other components in my project. Please explore Lerna or other mono-repo wrapping solutions so we can deploy each component individually, test them individually, and reuse them individually.

Thank you for your hard work! If you have any questions, just ping me in Basecamp :)

gitcoinbot commented 5 years ago

@pbteja1998 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

[x] reminder (3 days)
[ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

@pbteja1998 due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

[x] reminder (3 days)
[x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 100000.0 MYB (761.2 USD @ $0.01/MYB) has been submitted by:

@pbteja1998

@mybit-coordinator please take a look at the submitted work:

PR by @pbteja1998

Learn more on the Gitcoin Issue Details page
Want to chip in? Add your own contribution here.
Questions? Checkout Gitcoin Help or the Gitcoin Slack
$51,862.61 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 100000.0 MYB (761.2 USD @ $0.01/MYB) attached to this issue has been approved & issued to @pbteja1998.

Learn more on the Gitcoin Issue Details page
Questions? Checkout Gitcoin Help or the Gitcoin Slack
$51,101.41 more funded OSS Work available on the Gitcoin Issue Explorer

MyBitFoundation / MyBit-UI-Toolkit.app

Converting our UI Toolkit into a mono-repo setup #72

Introduction

Requirements

Expected Deliverables

To Submit:

Additional Information:

Additional Notes

Disclaimer

73