open-index/open-npm huggingface dataset:
npm package: @leveluptuts/comboquery
Description: Inspired by: https://github.com/apollographql/graphql-tag/issues/169#issuecomment-568752182
Author: Scott Tolinski
Latest version: 0.1.2

# GraphQL Combo Query

Inspired by: https://github.com/apollographql/graphql-tag/issues/169#issuecomment-568752182

## Usage

`npm install @leveluptuts/comboquery`

```tsx
import SINGLE_POST_QUERY from './graphql/SinglePost.graphql'
import USER_QUERY from './graphql/UserQuery.graphql'
// Import your queries OR write them separately with gql``
const SomeComponent = () => {
  const { slug } = useParams()
	const COMBO_QUERY = comboQuery([SINGLE_POST_QUERY, USER_QUERY])

	// This example is using Apollo React Hooks
	const { loading, data, error } = useQuery(COMBO_QUERY, {
    variables: { slug },
	})

	// ... the rest of your stuffs

```

## Level Up Tutorials

https://www.leveluptutorials.com

Cutting-edge, focused & high quality video tutorials for web developers and designers

## Syntax

https://syntax.fm/

A Tasty Treats Podcast for Web Developers.
npm package: @leveluptuts/drop-in
Description: # Drop In
Author: Scott Tolinski
Latest version: 0.2.1

# @leveluptuts/drop-in

# Drop In

![Jaws Aaron Homoki](https://media.giphy.com/media/kXkLDDRVOPKcU/source.gif)

[![NPM](https://img.shields.io/npm/v/@leveluptuts/fresh?color=82d8d8&logoColor=524763&style=for-the-badge)](https://www.npmjs.com/package/@leveluptuts/fresh)

## Demo

https://levelup-drop-in.netlify.com/

## Install

```bash
yarn add @leveluptuts/drop-in
```

## Usage

### The Syntax

```jsx
import { DropIn, DragItem } from '@leveluptuts/drop-in';

function Component() {
  return (
    <DropIn data={data}>
      {activeColors.map(({ background, height }) => (
        <DragItem key={background}>
          <Square background={background} height={height} />
        </DragItem>
      ))}
    </DropIn>
  );
}
```

### More options

```jsx
import { DropIn, DragItem } from '@leveluptuts/drop-in';

function Component() {
  return (
    <DropIn data={data} whileHover={{ scale: 1.02 }} whileTap={{ scale: 1.04 }}>
      {activeColors.map(({ background, height }) => (
        <DragItem key={background}>
          <Square background={background} height={height} />
        </DragItem>
      ))}
    </DropIn>
  );
}
```

## API

### DropIn

The parent of an array of components

| Prop       | Type              | Default         | Description                                            |
| ---------- | ----------------- | --------------- | ------------------------------------------------------ |
| children   | ArrayOfComponents |                 | An array of React Components                           |
| data       | ArrayOfData       |                 | The data that powers the children                      |
| onDrop     | func              | (data) => data  | OPTIONAL \_ function that runs on drop, sends new data |
| whileTap   | Framer Property   | { scale: 1.12 } | OPTIONAL \_ object that sets the animation state       |
| whileHover | Framer Property   | { scale: 1.03 } | OPTIONAL \_ object that sets the animation state       |

### DragItem

The item to be moved

| Prop     | Type                      | Default | Description                               |
| -------- | ------------------------- | ------- | ----------------------------------------- |
| key      | string                    |         | A unique key                              |
| children | Component or Element      |         | The thing inside the thing you're moving  |
| element  | dom element for drag item | 'div'   | A string of the dom element being dragged |

## FAQ

## Contributing

`yarn`
`yarn start`

#### (in another tab) to run example

`cd example`
`yarn`
`yarn start`

## Prior Art and Inspirations

Lots of this code has been adopted from https://codesandbox.io/s/framer-motion-drag-to-reorder-r4qme

## License

MIT © [leveluptuts](https://github.com/leveluptuts)
npm package: @leveluptuts/motion-elements
Description: # Motion Elements
Author: Scott Tolinski
Latest version: 0.1.3

# @leveluptuts/motion-elements

# Motion Elements

![Mr Wave On ](https://media3.giphy.com/media/JfitEsaTduKME/giphy.gif?cid=790b761122f3c5cd6b97584b994b9277159214ab2fea8be7&rid=giphy.gif)

## Demo

## Install

```bash
yarn add @leveluptuts/motion-elements
```

## Usage

### The Syntax

```jsx
import { Accordion } from '@leveluptuts/motion-elements';

...
<Accordion>
	<p>Another example</p>
</Accordion>
...
```

### More options

```jsx
import React, { useState } from 'react';
import { Accordion } from '@leveluptuts/motion-elements';

const App = () => {
	const [isToggled, setToggle] = useState(true);
	return (
		<div>
			<button onClick={() => setToggle(prev => !prev)}>Toggle</button>
			<Accordion isToggled={isToggled} useButton={false}>
				<p>Some text.</p>
			</Accordion>
		</div>
	)
```

## API

### Accordion

The parent of an array of components

| Prop      | Type       | Default        | Description                                                   |
| --------- | ---------- | -------------- | ------------------------------------------------------------- |
| children  | Components |                | An array of React Components                                  |
| isToggled | Boolean    |                | OPTIONAL \_ The bool that toggles the accordion               |
| useButton | Boolean    | (data) => data | OPTIONAL \_ if you want to bring your own b, byob if you will |

## Contributing

`yarn`
`yarn start`

#### (in another tab) to run example

`cd example`
`yarn`
`yarn start`

## Prior Art and Inspirations

This lib is just basic wrappers around https://www.framer.com/motion/
npm package: @leveluptuts/prettier-config
Description: My personal Prettier config
Author: Scott Tolinski
Latest version: 1.0.1

# `@leveluptuts/prettier-config`

> My personal [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ yarn add --dev @leveluptuts/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@leveluptuts/prettier-config"
}
```