@moja-global/mojaglobal-ui

Moja global UI library

Repository for the UI library — A Vue.js user-interface library for moja global projects

Introduction

Moja global is a collaboration under the Linux Foundation that aims for the widest possible collaboration on and use of credible tools to better manage the land sector. The flagship software is the Full Lands Integration Tool (FLINT), a tool to estimate emissions and sinks of greenhouse gasses from forestry and agriculture.

Moja global User-interface (UI) library aims to bring forward an intuitive, consistent, and easy-to-use interface that can help our developers within the User-Interface working group and users to quickly accomplish their tasks. The UI library aims to considerably improve our design & development workflow and meet the acceptable web accessibility requirements for our potential users. A UI library helps us mitigate popular UI-development issues like inconsistent user-experience, performance issues, accessibility requirements and more.

Technologies

• Vue.js
• Storybook
• Babel
• ESLint
• NPM

Components

Components	Planned	Implemented
Accordion	✔	✔
Alert	✔	✔
Button	✔	✔
Card	✔	✔
Datepicker	✔	✔
Dropdown	✔	✔
Footer	✔	✔
Modal	✔	✔
Navbar	✔	✔
Slider	✔	✔
Sponsor	✔	✔
Toggle	✔	✔

Find detailed description on our Storybook setup.

Installation

To setup the project on your local environment, follow the given steps:

1. Fork the moja-global/ui-library repository.
2. Clone the repository:

git clone https://github.com/<USERNAME>/ui-library.git && cd ui-library

Replace the <USERNAME> with your GitHub username. If you've already forked the repo, you'll want to ensure your fork is configured and that it's up to date. This will save you the headache of potential merge conflicts.

To sync your fork with the latest changes:

git checkout main
git fetch upstream
git merge upstream/main

3. Install the required dependencies:

yarn

4. To run the Storybook locally

yarn storybook

Go to localhost:6006_ to view the Storybook.

Contributing

Moja global welcomes contributions to the community website. If you have an idea for a new feature or a bug fix, please submit an issue or pull request. Our planned features can be found on our Issue Tracker. If you have any questions, please reach out to us on Slack.

Adding new components

1. Replace component_name with your own component name:

   cd mojaglobal-ui 
   mkdir component_name
   cd component_name  

2. Add all the files related to the component in this directory.

3. Export your component in ui-library/mojaglobal-ui/src/components/index.js

4. Add a story related to your component in the Storybook.

5. Add the details for the component on the README.md file.

To add new features or fix bugs, open the corresponding file and do the required changes in the file as well as in its corresponding story

License

Mozilla Public License 2.0