open-index/open-npm huggingface dataset:
npm package: @inkline/unocss
Description: <p align="center">     <a href="http://inkline.io/">         <img src="https://raw.githubusercontent.com/inkline/inkline.io/main/assets/images/logo/logo-black.svg" alt="Inkline logo" width=72 height=72>     </a> </p>
Latest version: 1.2.1

<p align="center">
    <a href="http://inkline.io/">
        <img src="https://raw.githubusercontent.com/inkline/inkline.io/main/assets/images/logo/logo-black.svg" alt="Inkline logo" width=72 height=72>
    </a>
</p>

<h1 align="center">@inkline/unocss</h1>

<p align="center">
    UnoCSS Atomic CSS Utility Classes generator Preset by <a href="https://github.com/alexgrozav">@alexgrozav</a>.
    <br/>
    <br/>
    <a href="https://inkline.io">Homepage</a>
    ·
    <a href="https://inkline.io/docs/introduction">Documentation</a>
    ·
    <a href="https://storybook.inkline.io/">Storybook</a>
    ·
    <a href="https://stackblitz.com/edit/inkline?file=src/App.vue">Playground</a>
    ·
    <a href="https://github.com/inkline/inkline/issues">Issue Tracker</a>
</p>

<br/>

<p align="center">
    <a href="https://www.npmjs.com/package/@inkline/inkline">
        <img src="https://img.shields.io/npm/v/@inkline/unocss.svg" alt="npm version">
    </a>
    <a href="https://www.npmjs.com/package/@inkline/inkline">
        <img src="https://img.shields.io/npm/dm/@inkline/unocss.svg" alt="Downloads">
    </a>
    <a href="https://chat.inkline.io">
        <img src="https://img.shields.io/discord/550436704482492429.svg" alt="Discord">
    </a>
</p>

<br/>
<br/>

## Installation

1. Install dependencies.

~~~bash
npm i -D unocss @inkline/unocss
~~~

2. Add the Inkline Unocss to your Vite.js configuration.

~~~ts
import { defineConfig } from 'vite';
import { inkline } from '@inkline/plugin/vite';
import { resolve } from 'path';
import unocss from '@unocss/vite';
import { presetInkline, UserOptions } from '@inkline/unocss';

const inklineConfig: UserOptions = {
    outputDir: resolve(__dirname, 'src/css/config')
};

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        inkline(inklineConfig),
        unocss({
            presets: [presetInkline(inklineConfig)]
        })
    ]
});
~~~

3. Replace the existing `utilities.scss` import with the `virtual:uno.css` import in your `main.ts` file:

```ts
- import '@inkline/inkline/css/utilities.scss?inline';
+ import 'virtual:uno.css';
```

4. Enjoy!


## Creator

### Alex Grozav

-   <https://grozav.com>
-   <https://twitter.com/alexgrozav>
-   <https://facebook.com/alexgrozav>
-   <https://github.com/alexgrozav>

If you use Inkline in your daily work and feel that it has made your life easier, please consider sponsoring me on [Github Sponsors](https://github.com/sponsors/alexgrozav). 💖

## Copyright and license

Released under [MIT License](https://github.com/inkline/unocss/blob/main/packages/docs/LICENSE).
npm package: @inkline/vue-cli-plugin-inkline
Description: Vue CLI Plugin for Inkline, the intuitive UI Components library that gives you the foundation for building high-quality, accessible, and customizable Vue.js Design Systems.
Author: Alex Grozav
Latest version: 3.0.2

# Inkline - Vue CLI Plugin
[![CI](https://github.com/inkline/vue-cli-plugin-inkline/actions/workflows/build.yml/badge.svg)](https://github.com/inkline/vue-cli-plugin-inkline/actions/workflows/build.yml)

[Vue CLI](https://github.com/vuejs/vue-cli) Plugin for [Inkline](https://github.com/inkline/inkline), the customizable
Vue.js UI/UX Library.

## Install for Vue 3

If you haven't yet installed Vue CLI, first follow the installation instructions [here](https://github.com/vuejs/vue-cli).

If you haven't created a project yet, generate a project using Vue CLI:

```bash
vue create my-app
cd my-app
```

**Before installing the Inkline plugin, make sure to commit or stash your changes in case you need to
revert.**

Add Inkline: 
```bash
vue add @inkline/vue-cli-plugin-inkline
```

## Install for Vue 2

Inkline for Vue 2 will stick to the `2.x` versions.

For Vue2:

```bash
vue add @inkline/vue-cli-plugin-inkline --vue2
```

### Configuration

Optionally, you can configure your Inkline Vue CLI Plugin using the following installation options.

First of all, Inkline uses Sass, so you will need to install it as a dependency:

```bash
yarn add --dev node-sass sass-loader
# If you still use NPM
npm install -D node-sass sass-loader
```

#### Tree Shaking and SCSS

To install a tree-shaking and SCSS ready Inkline setup:

```
vue add @inkline/vue-cli-plugin-inkline --vue2 --customizable
```
npm package: @inkofpixel/react-light-translations
Description: Heavily inspired by [react-intl](https://formatjs.io/docs/react-intl/)
Author: @forgng
Latest version: 1.0.3

# Uber minimal translation library for React
Heavily inspired by [react-intl](https://formatjs.io/docs/react-intl/)

```bash
yarn add react-light-tranlations
```

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { IntlProvider, useIntl } from 'react-light-translations';

const messages = {
  it: require('./lang/it.json'),
  en: require('./lang/en.json'),
};

const App = () => {
  const locale = 'en';
  return (
    <IntlProvider
      locale={locale}
      messages={messages[locale] as Record<string, string>}
    >
      <TestApp />
    </IntlProvider>
  );
};

function TestApp() {
  const { formatMessage } = useIntl();
  return (
    <div>
      <div>{formatMessage({ id: 'test' })}</div>
      <div>
        {formatMessage(
          { id: 'testWithVariable' },
          {
            variable: 'VARIABLE',
          }
        )}
      </div>
      <div>
        {formatMessage(
          { id: 'testWithElementVariable' },
          {
            variable: (
              <span style={{ fontWeight: 'bold' }}>VARIABLE ELEMENT</span>
            ),
          }
        )}
      </div>
      <div>
        {formatMessage(
          { id: 'testWithElementVariable' },
          {
            variable: (
              <span style={{ color: 'red' }}>
                {formatMessage({ id: 'test' })}
              </span>
            ),
          }
        )}
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));
```
npm package: @inkofpixel/shopify-builder
Description: An opinionated builder for Shopify.
Latest version: 0.0.16

# Shopify Builder

An opinionated builder for Shopify.

**This is currenty in alpha and not ready for production use. API will likely change**

# How to use

To use this tools you must have a predefined project structure.
(Pay attention to the _src_ folder)

```
+-- assets
+-- config
+-- layout
+-- locales
+-- snippets
+-- src
+-- templates
```

It's a standard shopify project structure with a **_src_** folder.
The structure of the **src** folder must be

```
+-- src
|   +-- lib
|   +-- scripts
|   |   +-- packages
|   |   |   +-- [package-name]
|   |   |   | 	index.(js|ts)
|   +-- sections
```

Where scripts contains JS **scripts** (like React) and sections **contains** liquid.

```bash
yarn add @inkofpixel/shopify-builder -D
```

Add this to the scripts of your package.json

```json
"dev": "shopify-builder watch",
"watch-scripts": "shopify-builder watch scripts",
"watch-sections": "shopify-builder watch sections",
"build-scripts": "shopify-builder build scripts",
"build-sections": "shopify-builder build sections"
```

add

```.gitignore
 *.iop.*
```

to .gitignore

add to theme

```js
<script src="{{ '[package-name].iop.js' | asset_url }}" ></script>
<script src="{{ 'runtime.iop.js' | asset_url }}" ></script>
<script src="{{ 'vendor.iop.js' | asset_url }}" ></script>
```