open-index/open-npm huggingface dataset:
npm package: @rsm/fractal-pug-adapter
Description: Use Pug templates inside Fractal
Author: Dennis Morhardt
Latest version: 0.5.0

# Fractal Pug Adapter

> Use [Pug](https://pugjs.org/) templates inside [Fractal](https://fractal.build/)

## Install

```bash
$ yarn add @rsm/fractal-pug-adapter
```

## Usage

Inside your Fractal configuration (`fractal.config.js` or something like that):

```js
fractal.components.engine('@rsm/fractal-pug-adapter');
```

If you want to extend [the Pug complier options](https://pugjs.org/api/reference.html#options) or add globals to the Pug templates:

```js
const pugAdapter = require('@rsm/fractal-pug-adapter');

fractal.components.engine(pugAdapter({
  options: {
    doctype: 'xml', // A pug options
    foo: 'bar', // A custom global
  },
}));
```

## Changelog

### 0.5.0

* Add support for tenant context (only with `@rsm/kuchenblech`)

### 0.4.0

* Support high level context reference

### 0.3.1

* Resolve context everytime

### 0.3.0

* Resolve context on includes

### 0.2.0

* Refactor apdater

### 0.1.0

* First release

## License

MIT © [ressourcenmangel GmbH](https://ressourcenmangel.de)
npm package: @rsm/kuchenblech
Description: A theme for Fractal, a powerful styleguide tool.
Latest version: 0.13.0

# Kuchenblech

> Enhanced theme for [Fractal](https://fractal.build/), a tool to help you build & document web component libraries

## 🚧 Requirements

* [node.js](https://nodejs.org/) v7.x.x
* [yarn](https://yarnpkg.com/) v0.24.0 or newer for dependency management
* IDE or editor with [EditorConfig](http://editorconfig.org/) enabled

## 🚦 Getting started

- Watch for changes: In the project root run `npm run webpack:watch`
- Start Fractal: Enter desired project folder (i.e. `/tests/simple`) and run `yarn fractal start` this should open the local URL in your browser.

## Kuchenblech deployment

A big part of this setup is about how we work with the *Kuchenblech* theme. Its open-source repository is maintained by our [ressourcenmangel organization on GitHub](https://github.com/ressourcenmangel).

You can use the *Kesselblech* theme in the *Kuchenblech* boilerplate with the related [npm package](https://www.npmjs.com/package/@rsm/kuchenblech). If you want to contribute and use the new version in this repository, you have to commit your changes to the GitHub repository and publish it with a new version tag on [**npm**](https://www.npmjs.com).

1. Commit your changes with a [proper commit message](#commits) to the [GitHub repository](https://github.com/ressourcenmangel/kuchenblech)
2. Create a version commit:
    * Add your changes to the [changelog](#changelog)
    * Update the version number in `package.json` and the changelog.
    * Commit message: "🔖 Version X.X.X"
3. Add a tag with version to this commit ("X.X.X")
4. Push to master branch (make sure to push all tags!)
5. Publish on **npm**
    * Run `npm login` and fill in your login data from your **npm** account (make sure you have the rights to publish in the *@rsm* namespace)
    * Run `npm publish`
npm package: @rsm/zauberstab
Description: Opinionated SCSS helpers and utils on top of sass-mq
Author: Dennis Morhardt
Latest version: 0.3.0

# Zauberstab

> Opinionated SCSS helpers and utils on top of [sass-mq](https://sass-mq.github.io/sass-mq/).

## Install

```bash
$ yarn add @rsm/zauberstab
```

## Usage

Your `node_modules` must be included in SCSS `includePaths`/`--include-path`.

```scss
@import '@rsm/zauberstab/zauberstab';
```

## Changelog

### 0.3.0

* Rename mq-px2rem to zb-px2rem and use root base font

### 0.2.2

* Add missing mq-px2rem() function

### 0.2.1

* Move zb-helpers-breakpoint-inner() mixin to file start

### 0.2.0

* Reorder zb-link arguments

### 0.1.0

* First release

## License

MIT © [ressourcenmangel GmbH](https://ressourcenmangel.de)
npm package: @rsmax/plugin-less
Description: Rsmax Less 插件
Latest version: 1.0.1

# @rsmax/plugin-less

增加 Less 支持。

## 安装

```bash
$ npm install @rsmax/plugin-less --save
```

## 使用

```js
const less = require('@rsmax/plugin-less');

module.exports = {
  plugins: [less()],
};
```

## 配置

同 `less-loader` 的[配置](https://github.com/webpack-contrib/less-loader#options)。

## LICENSE

[MIT](LICENSE)
npm package: @rsmax/plugin-sass
Description: Remax Sass 插件
Author: Wei Zhu
Latest version: 1.0.1

# @remax/plugin-sass

增加 Sass 支持。

## 安装

```bash
$ npm install sass @remax/plugin-sass --save
```

## 使用

```js
const sass = require('@remax/plugin-sass');

module.exports = {
  plugins: [sass()],
};
```

## 配置

同 `sass-loader` 的[配置](https://github.com/webpack-contrib/sass-loader#options)。

## LICENSE

[MIT](LICENSE)
npm package: @rsmax/plugin-stylus
Description: Rsmax Stylus 插件
Author: Wei Zhu
Latest version: 1.0.1

# @rsmax/plugin-stylus

增加 Stylus 支持。

## 安装

```bash
$ npm install @rsmax/plugin-stylus --save
```

## 使用

```js
const stylus = require('@rsmax/plugin-stylus');

module.exports = {
  plugins: [stylus()],
};
```

## 配置

同 `stylus-loader` 的[配置](https://github.com/shama/stylus-loader)。

## LICENSE

[MIT](LICENSE)
npm package: @rsmax/postcss-px2units
Description: postcss plugin
Author: yingye
Latest version: 0.2.2

English | [简体中文](./README_CN.md)

# postcss-px2units

[![Build Status](https://travis-ci.org/yingye/postcss-px2units.svg?branch=master)](https://travis-ci.org/yingye/postcss-px2units)
[![npm version](https://badge.fury.io/js/postcss-px2units.svg)](https://badge.fury.io/js/postcss-px2units)
[![change-log](https://img.shields.io/badge/changelog-md-blue.svg)](https://github.com/yingye/postcss-px2units/blob/master/CHANGELOG.md)

A plugin for [PostCSS](https://github.com/ai/postcss) that generates rpx units from pixel units, it also can generate units which you want.

## Install

```
$ npm install postcss-px2units --save-dev
```

## Usage

### Input/Output

With the default settings, we will get this output.

```css
/* input */
p {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 1px; /* no */
}

/* output */
p {
  margin: 0 0 20rpx;
  font-size: 32rpx;
  line-height: 1.2;
  letter-spacing: 1px;
}
```

### Example

```js
var fs = require('fs');
var postcss = require('postcss');
var pxtorem = require('postcss-pxtorem');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
    replace: false
};
var processedCss = postcss(pxtorem(options)).process(css).css;

fs.writeFile('main-rem.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('Rem file written.');
});
```

### options

Type: Object | Null

Default:

```js
{
  divisor: 1,
  multiple: 1,
  decimalPlaces: 2,
  comment: 'no',
  targetUnits: 'rpx'
}
```

Detail:

- divisor(Number): divisor, replace pixel value with pixel / divisor.
- multiple(Number): multiple, replace pixel value with pixel * multiple.
- decimalPlaces(Number): the number of decimal places. For example, the css code is `width: 100px`, we will get the vaule is `Number(100 / divisor * multiple).toFixed(decimalPlaces)`.
- comment(String): default value is 'no'. For example, if you set it 'not replace', the css code `width: 100px; /* not replace */` will be translated to `width: 100px;`
- targetUnits(String): The units will replace pixel units, you can set it 'rem'.

### Use with gulp-postcss

```js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits = require('postcss-pxtounits');

gulp.task('css', function () {
  return gulp.src('./test/src/css/**/*.css')
    .pipe(postcss([pxtounits()]))
    .pipe(gulp.dest('./test/dist/css'));
});
```

## Tips

If you want to use it in WePY, please use [wepy-plugin-px2units](https://github.com/yingye/wepy-plugin-px2units).
npm package: @rsmdc/card
Description: The Material Components for the web card component.
Latest version: 1.1.39

# Card
## example
### default card
```html
<x-card>
  <x-card-header>
    <x-card-title>title</x-card-title>
    <x-card-subtitle>subtitle</x-card-subtitle>
  </x-card-header>
  <x-card-description>
    description
  </x-card-description>
  <x-card-actions>
    <x-button />
    ...
  </x-card-actions>
</x-card>

```
```scss
x-card {
  > x-card-media {
    @include rs-card-media-type(16-9);
    @include rs-card-media-image(url('sample.png'));
  }
}
```  
### add media
```html
<x-card>
  <x-card-media />
  <x-card-header>
    <x-card-title>title</x-card-title>
    <x-card-subtitle>subtitle</x-card-subtitle>
  </x-card-header>
  <x-card-description>
    description
  </x-card-description>
  <x-card-actions>
    <x-button />
    ...
  </x-card-actions>
</x-card>

```
```scss
x-card {
  > x-card-media {
    @include rs-card-media-type(16-9);
    @include rs-card-media-image(url('sample.png'));
  }
}
```  
NOTES:  
If you use `x-card-media`, you must use these mixins:
* rs-card-media-type  
To set media size.
* rs-card-media-image  
To set media image.

### add primary contents
```html
<x-card>
  <x-card-contents>
    <x-card-header>
      <x-card-title>title</x-card-title>
      <x-card-subtitle>subtitle</x-card-subtitle>
    </x-card-header>
  </x-card-contents>
  <x-card-description>description</x-card-description>
  <x-card-actions>
    <x-button />
    ...
  </x-card-actions>
</x-card>

```
`x-card-contents` means primary contents in card, the area can tap and select.  
If you want to tap some parts of card, inclose applicable parts by `x-card-contents`.

## feature
### custom elements
* `x-card`
  * `x-card-contents`
  * `x-card-media`
  * `x-card-header`
    * `x-card-title`
    * `x-card-subtitle`
  * `x-card-description`
  * `x-card-actions`

### attributes
Nothing.
### types
* card
  * default
  * outlined
* media
  * 16-9
  * square
* actions
  * full-bleed
npm package: @rsmdc/top-app-bar
Description: The Material Components for the web top app bar component.
Latest version: 1.1.39

# Top app bar
## example
### default top-app-bar
```html
<x-app-bar>
  <app-bar-nav />
  <app-bar-title>title<app-bar-titel>
  <app-bar-actions>
    <app-bar-item>icon1</app-bar-item>
    <app-bar-item>icon2</app-bar-item>
  </app-bar-actions>
<x-app-bar>
```
### fixed top-app-bar
```html
<x-app-bar>
  <app-bar-nav />
  <app-bar-title>title<app-bar-titel>
  <app-bar-actions>
    ...
  </app-bar-actions>
<x-app-bar>
```
```scss
x-app-bar {
  @include rs-top-app-bar-type(fixed);  
}
```
### prominent dense top-app-bar
```html
<x-app-bar>
  <app-bar-nav />
  <app-bar-title>title<app-bar-titel>
  <app-bar-actions>
    ...
  </app-bar-actions>
<x-app-bar>
```
```scss
x-app-bar {
  @include rs-top-app-bar-type(prominent, dense);
}
```
## feature
### custom elements
  * `x-app-bar`
    * `app-bar-nav`
    * `spp-bar-title`
    * `app-bar-actions`
      * `app-bar-item`
### mixins
* rs-top-app-bar-type($types...)
* rs-top-app-bar-ink-color($color)  
  and more...

### top-app-bar types
* normal (default)
* dense
* prominent
* fixed
* short
  * collapsed
npm package: @rsmnarts/nestjs-firebase
Description: @nestjs with firebase
Latest version: 9.0.1

# nestjs-firebase

![Actions Status](https://github.com/g59/nestjs-plugins/workflows/Node%20CI/badge.svg)
[![npm version](https://badge.fury.io/js/@rsmnarts%2Fnestjs-firebase.svg)](https://badge.fury.io/js/@rsmnarts%2Fnestjs-firebase)

## Install

```
npm install nestjs-firebase
```

## Usage

```typescript
@Module({
  imports: [
    FirebaseModule.forRoot({
      googleApplicationCredential: "path/to/credential file.json",
    }),
  ],
})
export class AppModule {}

// using in service class
export class Service {
  constructor(
    @InjectFirebaseAdmin() private readonly firebase: FirebaseAdmin,
  ) {}
}
```

## Contributing

PRs accepted.

## License

[MIT](https://github.com/g59/nestjs-plugins/blob/main/LICENSE) © g59
npm package: @rsmnarts/windmill-react-ui
Description: React UI component library built with Tailwind CSS
Author: Risman
Latest version: 0.7.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Windmill React UI

The component library for fast and accessible development of gorgeous interfaces.

<p>
  <a href="https://codecov.io/gh/estevanmaito/windmill-react-ui"><img src="https://codecov.io/gh/estevanmaito/windmill-react-ui/branch/master/graph/badge.svg" alt="codecov" /></a>
  <img src="https://github.com/estevanmaito/windmill-react-ui/workflows/Build/badge.svg" alt="Build" />
  <a href="https://www.npmjs.com/package/@windmill/react-ui"><img src="https://img.shields.io/npm/v/@windmill/react-ui" alt="npm" /></a>
  <a href="https://github.com/estevanmaito/windmill-react-ui/blob/master/LICENSE"><img src="https://img.shields.io/github/license/estevanmaito/windmill-react-ui" alt="MIT License" /></a>
</p>

Projects using it: [Windmill Dashboard React](https://github.com/estevanmaito/windmill-dashboard-react)

## Mission

Be the most accessible it can be out of the box and the fastest way to production.

[Go to docs to see complete, live examples](https://windmillui.com/react-ui)

## 🚀 Usage

Install

```sh
npm i @windmill/react-ui
```

Inside `tailwind.config.js`

```js
const windmill = require('@windmill/react-ui/config')
module.exports = windmill({
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
})
```

Then place `Windmill` at the root of your project (the order doesn't matter, as long as your application is inside).

```js
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Windmill } from '@windmill/react-ui'

ReactDOM.render(
  <Windmill>
    <App />
  </Windmill>,
  document.getElementById('root')
)
```

Use components inside your project

```js
import { Button } from '@windmill/react-ui'

function App() {
  return <Button>Hi there!</Button>
}

export default App
```

## 🔌 Contributing

- Fork
- Clone
- `npm install`
- `npm run storybook`

It will start a local server at `localhost:6006` with all components rendered.

⚠ Use `npm run cz` instead of `git commit`! It will guide you through some short questions and guarantee that you commit message is standardized.

Commit will also trigger linting and test coverage.