As the name implies m3ntorship-ui is a UI-Package that consist of React components built with TypeScript and uses Storybook for playground display and UI testing.
Link to the package on npm here
This will be a guide on installation and usage, also if you are more curious or planning to contribute you can jump to the development guide .
Simply cd into your project directory and run the command
yarn add m3ntorship-ui
or
npm i m3ntorship-ui
Currently, our package has 11 components, and you can import them all the same way after installation.
import { ComponentName } from 'm3ntorship-ui';
You will also need to import the styling file for our components, in your app file or index
add the following (pick a global file on the project level so you only need to this once)
import 'm3ntorship-ui/dist/m3ntorship-ui.esm.css';
- Avatar
- Badge
- Button
- CheckBox
- IconButton
- InputField
- Link
- Progress
- Radio
- SelectInput
- Typography
We have a playground to try out all of our components here on Chromatic
you can use any of the methods GitHub allows you to, that would be:
-
Download a zip file (need to extract after downloading via software like 7zip or Winrar)
-
Clone via HTTP
-
Clone via SSH (Recommended and the way the guide is written)
if you need more info on SSH keys or how to set up one you can check the Github docs here.
For this project we recommend using yarn as your package manager, you can get to know more about installing yarn here.
Assuming you already cloned the project with:
git clone [email protected]:m3ntorship/m3ntorship-ui.git
The next step is to use the terminal and cd into the project directory:
cd m3ntorship-ui
In the project directory, you can run:
yarn
or
npm i
after the installation is done, you can start the project: while you can use any of the following to run the project in development mode:
yarn start
or
npm start
To view current components you need to run Storybook
yarn storybook
That should open a new tab in your browser that directs to http://localhost:6006 you can change the port from the package.json file
If you need to take a look at the configurations, this project was bootstrapped via TDSX, we recommend taking a look at their docs.
Mentorship is an open-source initiative to prepare aspiring software talents into being top-level professionals that are able to compete and stand out in the market!
Why is it written M3ntorship? isn't that kind of old??
"The name is written with (3) instead of just (E) because it sends a message, 3 is looking at the opposite direction of the E, and that's the message" Ahmed Ayoub, Founding Father of M3ntorship.
Wondering about usage and license, for this package we use the MIT License
Here is our list of contributors
We aim to make this a fully functioning library of components, so we aim at adding more components and improving our current work. When? Well,that's the beauty of open-source, no one knows 😉