Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add readme #1

Merged
merged 10 commits into from
Nov 27, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
# Componentz

![npm](https://img.shields.io/npm/v/@euk-labs/componentz)
![NPM](https://img.shields.io/npm/l/@euk-labs/componentz)
![GitHub Workflow Status](https://img.shields.io/github/workflow/status/Eureka-Shoulders/componentz/CI)
![npm](https://img.shields.io/npm/dw/@euk-labs/componentz)

Componentz is an MUI-based UI library that can provide simple and performative ways to use components.
devzgabriel marked this conversation as resolved.
Show resolved Hide resolved

The goal is not to replace the MUI, but to be an extension

## Installation

Using npm:

```bash
npm i @euk-labs/componentz
```

Using yarn:

```bash
yarn add @euk-labs/componentz
```

### Dependencies

- MUI: A UI library that serves as the basis for the project
- MobX is used to generate Stores and Hooks powered by these stores to make a beautiful reactive way to control the data on your interfaces.

## Usage

We've separated the logical part of the component, which has the minimum responsibilities to be as generic as possible, so we use the Mobx state manager to make this component control.
devzgabriel marked this conversation as resolved.
Show resolved Hide resolved

The complete documentation form components is being built, we will soon make it available.
devzgabriel marked this conversation as resolved.
Show resolved Hide resolved

A simple example of what a component's usage pattern looks like:

```ts
import { useUIStore, Breadcrumb } from '@euk-labs/componentz';
import { Box } from '@mui/material';
import { useEffect } from 'react';

function About() {
// A hook that delivers all the control of a part of the application, in this case the UI
const uiStore = useUIStore();

useEffect(() => {
// Controlling the state
uiStore.breadcrumb.setPaths([
{
label: 'Home',
link: '/',
},
{
label: 'About',
link: '/about',
},
]);
}, []);

return (
<Box>
// Rendering the Breadcrumb component on any DOM level
<Breadcrumb />
// You can add your JSX code here
<Box>...</Box>
</Box>
);
}

export default Home;
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)