open-index/open-npm huggingface dataset:
npm package: @robertcooper/alfred-vscode
Description: Alfred workflow that allows you to browse and open Visual Studio Code (Insiders) projects
Author: Konstantin Büschel
Latest version: 2.1.0

# alfred-vscode

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![Github all releases](https://img.shields.io/github/downloads/kbshl/alfred-vscode/total.svg)](https://github.com/kbshl/alfred-vscode/releases/)
[![GitHub stars](https://img.shields.io/github/stars/kbshl/alfred-vscode.svg)](https://github.com/kbshl/alfred-vscode/stargazers/)
[![NPM total downloads](https://img.shields.io/npm/dt/alfred-vscode.svg)](https://www.npmjs.com/package/alfred-vscode)
[![NPM license](https://img.shields.io/npm/l/alfred-vscode.svg)](https://www.npmjs.com/package/alfred-vscode)

> [Alfred 3](https://www.alfredapp.com) workflow that allows you to browse and open [Visual Studio Code (Insiders)](https://code.visualstudio.com/) projects or simply open specified folders/files.

![alfred-vscode in action](docs/screenshot.png)

## Prerequisites

You need

- [Node.js 8+](https://nodejs.org)
- [Alfred 3](https://www.alfredapp.com) with the paid [Powerpack](https://www.alfredapp.com/powerpack/) upgrade
- [Visual Studio Code Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) - Only if you like to have a project manager for VS Code.
- [Visual Studio Code Command Line](https://code.visualstudio.com/docs/setup/mac)

## Installation

```bash
npm install --global alfred-vscode
```

**Note for Insiders Edition users:**

Remember to set the `vscodeEdition` variable to `code-insiders` in the Workflow Configuration!

**Note for VSCodium users:**

Remember to set the `vscodeEdition` variable to `codium` in the Workflow Configuration!

It defaults to `code`.

## Usage

### Projects

Simply type `vsc` followed by space to list all projects. Optionally type a query to search for a
specific project or group. The overall list shows 100 projects at max.

Select a project and press <kbd>Enter</kbd> to open it in VS Code or Code Insiders.

Hold <kbd>Alt</kbd> when pressing <kbd>Enter</kbd> to open the project path in Terminal - You can set
the terminal app in the Workflow variables view.

Hold <kbd>Shift</kbd> when pressing <kbd>Enter</kbd> to open the project path in Finder.

### Folders / Files

Type `vs` followed by space and search for a specific folder or file to open in Visual Studio Code.

Hold <kbd>Shift</kbd> when pressing <kbd>Enter</kbd> to open that folder or file in a new VS Code window.

## Special Thanks

Big Thanks goes to [Cloudstek](https://github.com/Cloudstek) for his [Alfred Atom Workflow](https://github.com/Cloudstek/alfred-atom) which I used as a base for this project.
npm package: @robertcordes/postcss-tailwind-hex
Description: PostCSS plugin that replaces Tailwind RGB(a) values with hexadecimal analogues
Author: Robert Cordes
Latest version: 2.0.0

# postcss-tailwind-hex

> [PostCSS](https://github.com/postcss/postcss) plugin that replaces Tailwind RGB(a) values with hexadecimal analogues


## Processing example

this code

```
.element {
    border: 2px solid rgba(0, 0, 0, var(--tw-text-opacity));
}
```

converts to

```
.element {
    border: 2px solid #000000;
}
```


## Installation

```
npm i --save-dev @diverently/postcss-tailwind-hex
```


## Usage

```
postcss([ require('postcss-tailwind-hex') ])
```
Please refer to [PostCSS documentation](https://github.com/postcss/postcss#usage) for you current environment.


### Options

#### `rgbOnly` [Boolean]
default: `false`

Process only rgb color values

#### `rgbaOnly` [Boolean]
default: `false`

Process only rgba color values

#### `silent` [Boolean]
default: `false`

Omit verbose conversion logging


## [License](LICENSE)
npm package: @robertito13/react-device-preview
Description: react-device-preview React component
Author: Roberto Vaccaro
Latest version: 2.0.3

# react-device-preview

React component to create CSS only preview of the device.
The css is part of [device.css](http://marvelapp.github.io/devices.css/)

### Install

```bash
$ npm i react-device-preview
```

### Usage

```js
import React, { Component } from 'react'
import ReactDevicePreview from 'react-device-preview'

class Something extends Component {
  render () {
    return (
      <div>
        <h1> iPhoneX </h1>

        <ReactDevicePreview
          device="iphonex"
          scale="0.6"
          >
          <h1> Hello World </h1>
        </ReactDevicePreview>

      </div>
    )
  }
}
```

#### Credits

https://github.com/bdryanovski/react-device-preview/
npm package: @robertkern/vue-material
Description: Material Design Components for Vue
Author: Robert Kern
Latest version: 0.1.6

# Material Design Components for Vue

`@robertkern/vue-material` is very much a work-in-progress implementation of the  [material-components-web](https://github.com/material-components/material-components-web) library as Vue components.

> Please don't expect this to work for you just yet :-)

```
import VueMdc from '@robertkern/vue-material'
import '@robertkern/vue-material.css'

Vue.use(VueMdc)
```

I'm recommending using the `@material` sass files so you can customize the colors.
In your own sass file you'll need to import the `@material` styles like the following.
You can choose to import fewer if you're not planning to use all components.

```
# Define your theme colors:
$mdc-theme-primary: #651fff;
$mdc-theme-accent: #2962ff;

@import "@material/button/mdc-button.scss";
@import "@material/card/mdc-card.scss";
@import "@material/checkbox/mdc-checkbox.scss";
@import "@material/dialog/mdc-dialog.scss";
@import "@material/drawer/mdc-drawer.scss";
@import "@material/form-field/mdc-form-field.scss";
@import "@material/icon-toggle/mdc-icon-toggle.scss";
@import "@material/layout-grid/mdc-layout-grid.scss";
@import "@material/list/mdc-list.scss";
@import "@material/menu/mdc-menu.scss";
@import "@material/radio/mdc-radio.scss";
@import "@material/ripple/mdc-ripple.scss";
@import "@material/select/mdc-select.scss";
@import "@material/snackbar/mdc-snackbar.scss";
@import "@material/textfield/mdc-textfield.scss";
@import "@material/theme/mdc-theme.scss";
@import "@material/toolbar/mdc-toolbar.scss";
@import "@material/typography/mdc-typography.scss";
```

# Docker
Build: `docker build -t robertkern/vue-material .`  
Run: `docker run -d --rm -p 8082:8080 robertkern/vue-material`  
Run and enter to bash: `docker run -it --rm --entrypoint bash -p 8080:8082 robertkern/vue-material`

# Dev
`./dev.sh`  
`cd ../../`  
`npm run build:watch`
npm package: @robertkirsz/useform
Description: A React Hook for handling forms
Author: Robert Kirsz
Latest version: 0.2.2

# useForm
A React Hook for handling forms

```bash
npm install @robertkirsz/useform
```

## Simplest usable example:

```js
import useForm from '@robertkirsz/useform'

function App() {
  const form = useForm({
    initialValues: { firstName: 'Kasia' },
    onSubmit: values => { /* Do something with values */ }
  })

  return (
    <form onSubmit={form.handleSubmit}>
      <input {...form.inputs.firstName} />
      <button type="submit">Submit</button>
    </form>
  )
}
```

## Validation:

```js
const form = useForm({
  initialValues: { firstName: '' },
  validators = { firstName: value => value === '' && 'Value required' }
})
```

## Warnings:

```js
const form = useForm({
  initialValues: { comment: '' },
  warningValidators = { comment: value => value === '' && 'You sure you have nothing to say?' }
})
```

## Setting values directly:

```js
form.setValue('firstName', 'Marzena')
```

## Triggering validation programatically:

```js
form.validateField('firstName')
form.touchField('firstName')
```
We need to "touch" the field first, because "untouched" fields don't show validation statuses.

## Setting validation errors directly:

```js
form.setError('firstName', 'Name must be "Marzenka"!')
form.touchField('firstName')
```

## Showing that the form is submitting:

For that, you need to return a [Promise](https://javascript.info/promise-basics) from your `onSubmit` function, like that:

```js
function App() {
  const form = useForm({
    initialValues: { firstName: 'Kasia' },
    onSubmit: values => new Promise(resolve => {
      /* Do something with values, probably you want to send them to a server */
      resolve()
    })
  })

  return (
    <form onSubmit={form.handleSubmit}>
      <input {...form.inputs.firstName} />
      <button type="submit">
        {form.isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  )
}
```