🔮 Motif UI Library

A UI component library for Resuminator and its peer projects. Motif is based on Material-UI to build consistent, performant, and beautiful UIs quickly. It provides useful wrappers around the MUI components allowing even more customization.

🧩 Installation

Motif is currently NOT available as an NPM package but you may install it for any Resuminator product in the following way

With npm

npm install -S git+ssh://git@github.com:resuminator/motif.git

With yarn

yarn add git+ssh://git@github.com:resuminator/motif.git

👨🏻‍💻 Usage

Once you have installed the library, you can causally import the components and use them in the following way

import { CustomButton } from "@resuminator/motif";

const App = () => <CustomButton />

⚙ Setting up development environment

Motif library is build using Typescript React and uses ES Lint rules to envoke consistency across the library. We use Prettier to sanitize our code. The configurations for both are given in the repository itself.

Start by forking the repository and then clone your private repository directly on your system.

$ git clone https://github.com/<your-username>/motif.git

Set the upstream for fetching changes later

$ git remote add upstream https://github.com/resuminator/motif.git

Finally fetch all the remotes by executing

$ git fetch --all

Once the repository is correctly initialized install all the dependencies and run the Storybook to see all the components in the library.

npm install

npm run storybook

🚘 Roadmap

The library shall be follwoing the design guide and the wireframes and mockups from our Figma project - Resuminator Redesign. The roadmap will be updated accordingly with the required components. For reference we're following the Browk UI Kit on Figma Community.

If you wish to contribute or create a component, feel free to open an issue indicating clearly which component you wish to work on.

⚛ Atoms - the smallest units

'Atoms' are the smallest units which shall later make up the 'molecules' which in-turn make up 'elements' for the application. We'll be customizing some of the components from the MUI kit and export the rest of them as is. Follow the progress below.

Theming

Typography

UI Kit

Color Scheme

Buttons

Secondary (Light & Dark)

Primary (Light & Dark)

With Loader

Outlined

Flat

Chip/Badges

Contained

Outlined

Tags

Pro Badge

Checkbox

Default

With Label

Inputs

Default

With Hover

With Color

With Icon (Left/Right/Both)

With Search

Dialogs

Default

Alert

Notice

With Action

With Form

Tabs

Default

With line highlight

With color highlight

Tooltip

With Hover

With Direction

With Action

Toggle

With Icon

With Label

Cards

Rounded Card (4px, 8px, 16px)

Flat Cards

With Hover

Shadows

Default

Colored

Hover

Active

Logo Types

Emblem

Emblem with Text

Only Text

🤗 Community and Support

We're a budding community of developers and designers. Resuminator believes in building in public and thrives through a community who are willing to support and contribute to Resuminator and its products.

• Join the #design channel on Resuminator's Discord Server where we discuss upcoming designs and collaborate to add more sass to our product represents.

• Reach us out on our email (hello@resuminator.in) for any suggestions and support.

• Join our GitHub Discussions Community for feedback and support on Resuminator or its products.