open-index/open-npm huggingface dataset:
npm package: @mvquezm/dragonfly_browser_types
Description: Types for Dragonfly Browser API
Author: M. Velázquez
Latest version: 1.0.2

# Dragonfly Browser API types

See https://github.com/mvquezm/dragonfly-browser for details and docs.


## Install

```bash
npm i @extr3mis/dragonfly_browser_types
```

## Usage

```typescript

import type { DragonflyApi } from "@extr3mis/dragonfly_browser_types";

let dragonflyApi = ('dragonflyApi' in navigator) ? navigator.dragonflyApi as DragonflyApi : undefined;

const enter3D = () => {
    dragonflyApi?.leia()?.enableBacklight(false);
}
```
npm package: @mvr-studio/chakra-stories
Description: Programmatic Stories component for Chakra UI.
Author: Tomasz Marciniak
Latest version: 0.0.6

# Chakra UI Stories

Programmatic Stories component for Chakra UI.

## Installation

```sh
$ yarn add @mvr-studio/chakra-stories
```

## Components

### Stories

`Stories` is the bare bone component of this library which renders indicators, content and additional data.

#### Usage

```tsx
import { Box } from '@chakra-ui/react'
import { Stories } from '@mvr-studio/chakra-stories'

const View = () => {
  return (
    <Stories>
      <Box>First</Box>
      <Box>Second</Box>
      <Box>Third</Box>
    </Stories>
  )
}
```

#### API

- children: `ReactNode[]`
- storyDuration?: `number` - Duration of each story in seconds.
- onStoriesCompleted?: `() => void` - Callback to fire when the last story finishes.
- indicator?:
  - activeColor?: `string` - Animated indicator active color.
  - inactiveColor?: `string` - Inactive indicator color.
- components?:
  - renderTopBar?: `({ currentStory, storiesCount }) => JSX.Element` - Function to render Top Bar with additional data.
  - renderBottomBar?: `({ currentStory, storiesCount }) => JSX.Element` - Function to render Bottom Bar with additional data.

### ModalStories

`ModalStories` is an extended version of `Stories`, which wraps `Stories` component into a Modal. It extends props of `Stories`, so you can use all the properties of `Stories` plus some more.

#### Usage

```tsx
import { useDisclosure, Box, Button } from '@chakra-ui/react'
import { ModalStories } from '@mvr-studio/chakra-stories'

const View = () => {
  const { isOpen, onOpen, onClose } = useDislcosure()

  return (
    <Box>
      <Button onClick={onOpen}>Open Stories</Button>
      <ModalStories isOpen={isOpen} onClose={onClose}>
        <Box>First</Box>
        <Box>Second</Box>
        <Box>Third</Box>
      </ModalStories>
    </Box>
  )
}
```

#### API

- All the properties of `Stories`
- isOpen: `boolean`
- onClose: `() => void`
- modalContentProps?: `ModalContentProps` - Accepts similar props to box. Refer to Chakra UI docs.
- onDragUp: `({ currentStory, storiesCount }) => void` - Callback for handling user's drag up gesture.

## External links

[Storybook](https://chakra-stories.netlify.app/)

[MVR Studio](https://mvr.studio/)
npm package: @mvr-studio/crxjs-vite-plugin
Description: Build Chrome Extensions with this Vite plugin.
Author: Jack and Amy Steam
Latest version: 0.1.0

# ![CRXJS](./banner-github.png)

[![npm (scoped)](https://img.shields.io/npm/v/@crxjs/vite-plugin.svg)](https://www.npmjs.com/package/@crxjs/vite-plugin)
[![GitHub last commit](https://img.shields.io/github/last-commit/crxjs/chrome-extension-tools.svg?logo=github)](https://github.com/crxjs/rollup-plugin-chrome-extension)
![GitHub action badge](https://github.com/crxjs/chrome-extension-tools/actions/workflows/vite-plugin.yml/badge.svg)

## CRXJS Vite Plugin

> Build a Chrome Extension with [Vite](https://vitejs.dev)⚡

CRXJS brings the Vite developer experience to Chrome Extensions:

- True HMR for extension pages and content scripts
- Simple config - everything is in the extension manifest
- Static asset imports with automatic web-accessible resources

## Getting Started

See the CRXJS documentation to
[get started in 90 seconds 🚀](https://crxjs.dev/vite-plugin)

## Supporting

If these plugins have helped you ship your product faster, please consider
[sponsoring me](https://github.com/sponsors/jacksteamdev) on GitHub.

## Contributing

We encourage pull requests! This is a
[pnpm monorepo](https://pnpm.io/workspaces), so use pnpm instead of Yarn or npm.
npm package: @mvr-studio/exo-css
Description: Framework agnostic CSS.
Author: Tomasz Marciniak
Latest version: 0.0.9

# ExoUI CSS

Framework agnostic CSS.

## Installation

```sh
$ yarn add @mvr-studio/exo-css
✨  Done in 3.52s.
```

## Usage

### Vue

```vue
<template>
  <div :class="theme">
    <button :class="buttonCss().className">Click me</button>
    <button :class="buttonCss({ scheme: 'primary' }).className">Click me</button>
  </div>
</template>
<script lang="ts">
import { createExoCss, composeButtonCss } from '@mvr-studio/exo-css'
const { theme, css } = createExoCss()
const buttonCss = composeButtonCss({ css })
export default {
  name: 'MyView',
  data: () => ({
    buttonCss,
    theme
  })
}
</script>
```

### Svelte

```svelte
<script lang="ts">
  import { createExoCss, composeButtonCss } from '@mvr-studio/exo-css'
  const { theme, css } = createExoCss()
  const buttonCss = composeButtonCss({ css }) as any
</script>

<div class={theme}>
  <button class={buttonCss().className}>Click me</button>
  <button class={buttonCss({ scheme: 'primary' }).className}>Click me</button>
</div>
```
npm package: @mvr-studio/graphql-codegen-plugin-schema-to-operations
Description: Easily generate GraphQL operations for provided schema. Our motivation was to create the plugin to create operations for further processing by GraphQL Codegen (in our case to generate SWR and graphql-request SDK out of the box for basic CRUD operations).
Author: Tomasz Marciniak
Latest version: 0.1.5

# GraphQL Codegen Plugin Schema To Operations

Easily generate GraphQL operations for provided schema. Our motivation was to create the plugin to create operations for further processing by GraphQL Codegen (in our case to generate SWR and graphql-request SDK out of the box for basic CRUD operations).

## Installation

Install the module:

```bash
$ yarn add @mvr-studio/graphql-codegen-plugin-schema-to-operations
```

Add it to your codegen.yaml:

```yaml
generates:
  operations.graphql:
    schema: ./schema.graphql # or external address pointing to schema
    plugins:
      - '@mvr-studio/graphql-codegen-plugin-schema-to-operations'
```

That's it. Now you can run the codegen.

## Usage

The plugin will likely transform given schema:

```gql
scalar Date

type AuthResponse {
  jwt: String!
}

type Mutation {
  logInUser(email: String!, password: String!): AuthResponse
}

type Query {
  me: User
}

enum Role {
  ADMIN
  USER
}

type User {
  id: String!
  email: String!
  name: String
  role: Role
  createdAt: Date!
  updatedAt: Date!
}
```

Into following operations:

```gql
query me_query {
  me {
    createdAt
    email
    id
    name
    role
    updatedAt
  }
}

mutation logInUser_mutation($email: String!, $password: String!) {
  logInUser(email: $email, password: $password) {
    jwt
  }
}
```

## Additional Config

### depthLimit

By default the plugin fetches fields for `depthLimit=1` depth. But the property is adjustable like:

```yaml
generates:
  operations.graphql:
    schema: ./schema.graphql # or external address pointing to schema
    config:
      depthLimit: 3
    plugins:
      - '@mvr-studio/graphql-codegen-plugin-schema-to-operations'
```

## Credits

[graphql-tools](https://github.com/ardatan/graphql-tools) - Thanks for the [schema processor](https://github.com/ardatan/graphql-tools/blob/master/packages/utils/src/build-operation-for-field.ts)
npm package: @mvr-studio/obsrvd
Description: Few kilobytes of a simple observable.
Author: Tomasz Marciniak
Latest version: 0.0.4

# Obsrvd

Dead simple Observable.

## Installation

```sh
yarn add @mvr-studio/obsrvd
```

## Observable

```tsx
import { Observable } from '@mvr-studio/obsrvd'

const simpleObserver = new Observable<boolean>(false)

const Component = () => {
  const [simpleState, setSimpleState] = useState<boolean>(simpleObserver.get())

  const handleOnClick = () => {
    return simpleObserver.set(true)
  }

  useEffect(() => {
    simpleObserver.subscribe(setSimpleState)
    return () => {
      simpleObserver.unsubscribe(setSimpleState)
    }
  }, [])
}
```

## useObservable

```tsx
import { Observable, useObservable } from '@mvr-studio/obsrvd'

const simpleObserver = new Observable<boolean>(false)

const Component = () => {
  const { value } = useObservable(simpleObserver)
  // Now, when `simpleObserver` gets set outside the component, `value` will be up to date.
}
```
npm package: @mvr-studio/protochakra
Description: ![Tests](https://github.com/mvr-studio/protochakra/actions/workflows/tests.yml/badge.svg)
Author: Tomasz Marciniak
Latest version: 0.1.4

# ProtoChakra

![Tests](https://github.com/mvr-studio/protochakra/actions/workflows/tests.yml/badge.svg)

Not production ready yet

Less Code & opinionated Chakra UI components library created for Rapid Development with React.
Meant to speed the development process of easy UIs up.

## Available Scripts

In the project directory, you can run:

### `yarn dist`

Creates a distribution of ProtoChakra targeted for both ESM and CommonJS.

### `yarn storybook`

Runs a localhost version of Storybook for live preview and local development purposes.

### `yarn cy:ct`

Runs Cypress Component Testing locally and let's you explore the specs for components.

### `yarn cy:run-ct`

Runs Cypress Component Testing in headless mode, same as in Continuous Integration pipeline.

## Learn More

[ProtoChakra Docs & Storybook](https://protochakra-docs.mvr.studio/)

[Website (made with ProtoChakra)](https://protochakra.mvr.studio/)

[Maintained by MVR Studio](https://mvr.studio/)