open-index/open-npm huggingface dataset:
npm package: @nathancahill/storybook-addon-mock
Description: A storybook addon to mock http request
Author: Farhad Yasir
Latest version: 0.1.0

# Storybook Addon Mock

<a href="https://twitter.com/intent/follow?screen_name=nutboltu">
   <img src="https://img.shields.io/twitter/follow/nutboltu.svg?label=Follow%20@nutboltu" alt="Follow @nutboltu" />
</a>

[![NPM](https://nodei.co/npm/storybook-addon-mock.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/storybook-addon-mock/)

This addon allows you to mock fetch or xmlhttprequest requests in storybook. If your component depends on backend apis, and your backend apis are not ready yet to feed your component, then this addon provides mock apis to build your component.

![Screenshot](/docs/resources/storybook-addon-mock-preview.gif)

## Why we need this

There are few packages those help the developers to mock the backend apis while building components. But those packages aren't integrated properly in storybook and also there's no scope to play with those apis in the storybook. `storybook-addon-mock` provides a dedicated panel in the storybook which helps the developer to view and update the apis with multiple scenarios.

## How to use

Install the addon in your project as dev dependencies.

```bash
  yarn add -D storybook-addon-mock
```

### Using Storybook 6

Add the decorator in your addons, in `.storybook/main.js`:


```js
module.exports = {
  addons: [
    'storybook-addon-mock/register',
  ],
}

```

Add decorator in the stories.

```js
import React from 'react'
import withMock from 'storybook-addon-mock'
import Component from './Component'

export default {
  title: 'Component',
  component: Component,
  decorators: [withMock],
}

const Template = args => <Component {...args} />

export const Default = Template.bind({})
Default.parameters = {
   mockData: [{
      url: 'https://jsonplaceholder.typicode.com/todos/1',
      method: 'GET',
      status: 200,
      response: {
        data: 'This is a Mock Response!',
      },
   }],
}
```

Thanks to [shilman](https://github.com/storybookjs/storybook/issues/14817) for this solution


### Using older versions of Storybook

Add the register in your `.storybook/addons.js` file

```js
import 'storybook-addon-mock/register';
```

Add `withMock` as a decorator in the stories.

```js
import React from 'react';
import withMock from 'storybook-addon-mock';

storiesOf('Storybook Addon Mock', module)
  .addDecorator(withMock)
  .add('Getting Mock API Response', () => <ComponentWithAPICall />, {
    mockData: [{
      url: 'https://jsonplaceholder.typicode.com/todos/1',
      method: 'GET',
      status: 200,
      response: {
        data: 'This is a Mock Response!',
      },
    }],
  });
```

## License

MIT Licensed. Copyright (c) Farhad Yasir.
npm package: @nathanchase/nuxt-dayjs-module
Description: This is a Nuxt 3 compatible module built with the official Nuxt 3 (module-builder)(https://github.com/nuxt/module-builder) for (dayjs)(https://github.com/iamkun/dayjs/).
Author: Nathan Chase
Latest version: 1.0.15

# @nathanchase/nuxt-dayjs-module

This is a Nuxt 3 compatible module built with the official Nuxt 3 [module-builder](https://github.com/nuxt/module-builder) for [dayjs](https://github.com/iamkun/dayjs/). This is meant as a Nuxt 3 version of [dayjs-module](https://github.com/nuxt-community/dayjs-module) to satisfy [Nuxt 3 support](https://github.com/nuxt-community/dayjs-module/issues/376).

Usage:
```js
// ./nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nathanchase/nuxt-dayjs-module'
  ]
  ...
});
```

Add dayjs plugins (ex: [duration](https://day.js.org/docs/en/plugin/duration)) via configuration in nuxt.config like so:
```js
dayjs: {
    plugins: [
      'duration',
      'relativeTime',
      'advancedFormat',
      'weekday'
    ]
}
```

See [/playground/app.vue](https://github.com/nathanchase/dayjs/blob/master/playground/app.vue) for working examples.

On npm: [https://www.npmjs.com/package/@nathanchase/nuxt-dayjs-module](https://www.npmjs.com/package/@nathanchase/nuxt-dayjs-module)

## Development

- Run 'npm install' to install required packages.
- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start [playground](./playground) in development mode.
```
npm package: @nathancollins/lego-lib
Description: Webcomponent lego-lib following open-wc recommendations
Author: lego-lib
Latest version: 0.1.0

<p align="center">
  <img width="200" src="https://open-wc.org/hero.png"></img>
</p>

## Open-wc Starter App

[![Built with open-wc recommendations](https://img.shields.io/badge/built%20with-open--wc-blue.svg)](https://github.com/open-wc)

## Quickstart

To get started:

```bash
npm init @open-wc
# requires node 10 & npm 6 or higher
```

## Scripts

- `start` runs your app for development, reloading on file changes
- `start:build` runs your app after it has been built using the build command
- `build` builds your app and outputs it in your `dist` directory
- `test` runs your test suite with Karma
- `lint` runs the linter for your project

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.
npm package: @nathandevuono/dom-to-react
Description: A package that takes DOM nodes and transforms them into a React tree
Author: Nathan DeVuono
Latest version: 1.1.1

# DOM-to-React

It does what it says on the tin.

## Implementation

This library is basically a wrapper around `react-dom`'s render function to do some lifting for you in relation to loading attributes in as props.

## Usage

TL;DR - Function signature:
```ts
injectComponent(component: React.Component, element: Element, props = {}: Record<string, unknown>): void;
```

First include the package in your project:
```bash
npm i @nathandevuono/dom-to-react
```

Then use like this:

```js
import injectComponent from '@nathandevuono/dom-to-react';

import MyComponent from './components/MyComponent';

function injectMyComponent() {
    const myElement = document.querySelector('#my-element');

    injectComponent(MyComponent, myElement);
}

window.addEventListener("DOMContentLoaded", injectMyComponent);
```