open-index/open-npm huggingface dataset:
npm package: @mavvy/m3-ui
Description: Material 3 UI React and Tailwind
Author: Marc Jeric Espiritu
Latest version: 1.2.12

# M3-UI - Material 3 React and Tailwind (Beta)

## Material Design at Its Core

Elevate your web development projects with M3-UI, a sleek and versatile React component library built on the foundations of Material Design.

Highly customizable using CSS Variables or you can just simply add Tailwind css classes to the components!

## Setup

### Install

```bash
npm install @mavvy/m3-ui
```

### Setup Tailwind

Make sure you already setup your tailwind on your app

[Install Tailwind](https://tailwindcss.com/docs/guides/create-react-app)

### Configuration

tailwind.config.ts

```javascript
const preset = require('@mavvy/m3-ui/preset');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: preset.content,
  theme: {
    extend: preset.theme.extend,
  },
  plugins: preset.plugins
};
```

globals.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 77 152 41;
    --icon-font-family: Material Symbols Outlined;
  }
}
```

html
```html
<head>
  <link
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    rel="stylesheet"
  />
</head>
```


## Components

See all the components at:

[M3-UI Documentation](https://m3-ui-doc.vercel.app/)


## CSS Variables

```bash
--color-primary
--color-primary-light
--color-primary-dark
--color-on-primary
--color-primary-container
--color-on-primary-container
--color-secondary
--color-secondary-light
--color-on-secondary
--color-secondary-container
--color-on-secondary-container
--color-tertiary
--color-on-tertiary
--color-tertiary-container
--color-on-tertiary-container
--color-surface-container-low
--color-surface-container-lowest
--color-surface-container
--color-surface-container-high
--color-surface-container-highest
--color-on-surface-container-highest
--color-on-surface
--color-on-surface-variant
--color-outline
--color-outline-variant
--color-error
--color-on-error
--color-error-container
--color-on-error-container
--color-scrim
--color-inverse-surface
--color-on-inverse-surface
```

## Types

### Color

```bash
primary
on-primary
primary-container
secondary
on-secondary
secondary-container
tertiary
on-tertiary
tertiary-container
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
on-surface
on-surface-variant
surface-container
outline
outline-variant
success
info
warning
error
on-error
on-error-container
inverse-surface
on-inverse-surface
```

### Icon Variant
```bash
outlined
rounded
sharp
```
### Size
```bash
small
medium
large
```

### Text Variant
```bash
display
headline
title
label
body
```
npm package: @mavvy/minigql-plugin-miniserver
Description: Intallation
Author: Marc Jeric Espiritu
Latest version: 1.2.3

## Usage

Intallation

```bash
npm install @mavvy/minigql-plugin-miniserver
```

Add the plugin configuration

```bash
// minigql.plugins.js
import miniserverPlugin from '@mavvy/minigql-plugin-miniserver';

export default [
  miniserverPlugin({
    services: {
      product: {
        url: 'http://localhost:3001/api',
        methods: ['products', 'productById', 'addProduct'],
      },
    },
    options: {}
  }),
];
```

### Usage
Call the service on you resolver
```javascript
// resolvers/myProducts
export const resolverType = 'Query';

export const returnType = '[Product]';

export const handler = async ({services}) => {
  const res = await services.product.products();

  return res.data;
}
```

```javascript
// resolvers/addProduct.ts

export const resolverType = 'Mutation';

export const inputVariable = 'AddProductInput!';

export const returnType = 'Product';

export async function handler({ services, input }) {
  const res = await services.product.addProduct(input);

  return res.data;
}

```

#### @mavvy/miniserver handler

This one should reside on your miniserver app

```javascript
// handlers/productList.ts

export async function handler({ currentModel }) {
  const data = await currentModel.find();

  return data.map((doc: any) => ({
    id: doc.id,
    name: doc.name,
  }));
}
```

```javascript
// handlers/addProduct.ts

export async function handler({ currentModel, input }) {
  const doc = await currentModel.create(input);

  return {
    id: doc.id,
    name: doc.name,
  };
}
```

See more on [@mavvy/miniserver](https://github.com/mavvy22/miniserver)