open-index/open-npm huggingface dataset:
npm package: @studytweaks/vuejs-cache
Description: Vuejs cache plugin
Author: Avinash Rijal
Latest version: 0.1.2

# Vuejs cache plugin

## Installation

### via npm

```bash
npm install @studytweaks/vuejs-cache
```

### via yarn

```bash
yarn add @studytweaks/vuejs-cache
```
## Requirements

This package need following packages installed in your app

  - pouchdb-browser@^6.4.3
  - vue@^2.5.16
  - vuex@^3.0.1

### Api requirements

Your api needs to attach a custom header for db version, the cache data is updated based on this version.

## Usage

Install Vuejs cache plugin as follows:

```js
# main.js

import cachePlugin from '@studytweaks/vuejs-cache'

Vue.use(cachePlugin, {options})

```

### Options

| Option                 | Description                                              | Type     | Required |
|:-----------------------|:---------------------------------------------------------|:---------|:---------|
| store                  | Main store to which the cache module is attached to      | Object   | true     |
| axios                  | The instance of axios used by app                        | Object   | true     |
| dbVersionHeaderKey     | Custom response header key for db version                | String   | true     |
| cacheRoute             | Route to fetch cache data                                | String   | true     |

Once you have registered the plugin. It attaches a `studytweaks_cache` module to the store, The cached data received from the cacheRoute can be accessed as

### using store

```js

store.studytweaks_cache.cache.<key>
```
Or

```js

store.studytweaks_cache.cache[<key>]
```

### use getters

```js
# File.vue

// ..
// ..
this.$store.getters['studytweaks_cache/cacheData'](key)

```
## Displaying message to users when updating cache

The cache module has a getter `updatingCache` that is true when the data is being fetched from the server.

you can use the getter to add visual clues about ongoing update.
npm package: @studytweaks/vuejs-layout
Description: Vuejs layout component
Author: Avinash Rijal
Latest version: 0.1.0

# studytweaks-vuejs-layout

## Components

### Layout

Main component. Import the component in your app's `main.js`, then include it in your app's template as the top-level component.

``` js
# main.js

import Layout from '@studytweaks/vuejs-layout'
Vue.use(Layout)
```

``` js
# App.vue

<template>
  <Layout>
    :appVersion="version"
    :enableSidebar="isLoggedIn"
    :enableSidebarToggle="isLoggedIn">
    <Logo slot="logo" />
    <Sidebar slot="sidebar" />
    <studytweaksUserMenu
      :divider="false"
      profile="profile"
      slot="nav-right" />
  </Layout>
</template>

<script>
import Logo from './components/Logo'
import Sidebar from './components/Sidebar'

export default {
  components: {
    Logo,
    Sidebar
  },

  computed: {
    isLoggedIn () {
      return this.$studytweaksAuth.isLoggedIn()
    },

    version () {
      return process.env.APP_VERSION
    }
  },

  name: 'app'
</script>
```

#### Props

| prop                | type         | default  | explanation         |
|:--------------------|:-------------|:---------|:--------------------|
| appVersion | String, any | | The app version to display in the footer |
| enableSidebar | Boolean, any | true | Whether to display the sidebar  |
| enableSidebarToggle | Boolean, any |̨ true | Whether to display the sidebar toggle |
| flatten | Boolean, any | true | Whether to flatten any nav components in the top nav (dropdowns will show expanded, and the dropdown toggle will be hidden) |
|layout | String, any | Flex | The layout to use. Currently "Flex" is the only avaiable value |

### Slots

#### logo

A component to be displayed as the top nav's `nav-brand` component.

#### main

The content fo the page.  This should include `<router-view />`.

#### nav-center

A component to be displayed as the top nav's centered nav. The Layout component expects this component to follow bootstrap's conventions for navs.

#### nav-right

A component to be displayed as the top nav's right-aligned nav. The Layout component expects this component to follow bootstrap's conventions for navs.

#### sidebar

A component to be displayed as the layout's sidebar.

### Version

Displays the app version is suitable style. By default, this is displayed in the footer.

#### Props

| prop       | type        | default | explanation         |
|:-----------|:------------|:--------|:--------------------|
| appVersion | String, any | | The app version to display in the footer |
npm package: @studyworld/code
Description: Набор конфигов для `prettier` и `eslint`
Latest version: 0.2.4

# @studyworld/code

Набор конфигов для `prettier` и `eslint`

## Как использовать

```
npm i --save-dev @studyworld/code
```

**package.json**

```
{
    // ...
    "prettier": "@studyworld/code/prettier",
    "eslintConfig": {
        "extends": "./node_modules/@studyworld/code/eslint"
    },
    // ...
}
```

## Prettier

### WebStorm

Go to *Preferences | Tools | File Watchers* and click **+** to add a new watcher.

In Webstorm 2018.2, select Prettier from the list, review the configuration, add any additional arguments if needed, and click OK.

In older IDE versions, select Custom and do the following configuration:

* **Name:** Prettier or any other name
* **File Type:** JavaScript (or Any if you want to run Prettier on all files)
* **Scope:** Project Files
* **Program:** full path to `.bin/prettier` or `.bin\prettier.cmd` in the project’s `node_module` folder. Or, if Prettier is installed globally, select `prettier` on macOS and Linux or `C:\Users\user_name\AppData\Roaming\npm\prettier.cmd` on Windows (or whatever `npm prefix -g` returns).
* **Arguments:** `--write $FilePath$`
* **Output paths to refresh:** `$FilePathRelativeToProjectRoot$`
* **Working directory:** `$ProjectFileDir$`
* **Auto-save edited files to trigger the watcher:** Uncheck to reformat on Save only.

## ESLint


### WebStorm

* In the *Settings/Preferences* dialog go to *Languages and Frameworks | JavaScript | Code Quality Tools | ESLint*.
* Select **Automatic ESLint configuration**.

### VS Code

* Install ESLint plugin from the *extensions marketplace*
* Enjoy!
npm package: @studyworld/kit
Description: Collection of design rules, tokens and UI components
Author: German Voytekhovich
Latest version: 0.0.34

<br/>
<br/>
<center>
    <img src="https://author24.ru/assets/images/main/logo_black.svg" alt="Author24" /> 
</center>
<br/>

**a24-kit** contains React UI component libraries for performer and customer repositories.

### Installation

```bash
yarn add @a24/kit
```

### Sandbox
To start the sandbox server. It will help during the development of the component

```bash
yarn sandbox
```

You can go to  **[localhost](http://localhost:8083/)**

### Import

Import UI components from the appropriate package

```tsx
import { Button } from "@a24-kit";

<Button>Text</Button>
```

* **hooks** - `@a24-kit/hooks`
* **helpers** - `@a24-kit/helpers`
* **icons** - `@a24-kit/icons`
* **common** - `@a24-kit/common` 


### Examples

`todo`

### Conventional commits

* **feat** (features): A new feature
* **fix** (Bug Fixes): A bug fix
* **refactor** (Code Refactoring): A code change that neither fixes a bug nor adds a feature
* **perf** (Performance Improvements): A code change that improves performance
* **revert** (Reverts): Revert something
* **docs** (Documentation): Documentation only changes
* **build** (Builds): Changes that affect the build system or external dependencies (example scopes: npm, yarn, esbuild, webpack, etc)
* **ci** (Continuous Integrations): Changes to CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
* **chore** (Chores): Changes which doesn't change source code or tests e.g. changes to the build process, auxiliary tools, libraries
* **style** (Styles): Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
* **test** (Tests): Adding missing tests or correcting existing tests

**Commit message structure**

```
<type>[optional scope]: <description>

[optional body]

[optional footer]
```

A commit that has the text BREAKING CHANGE: at the beginning of its optional body or footer section introduces a breaking API change

More details at **[conventionalcommits.org](https://www.conventionalcommits.org/)**

##### Examples

```
feat: add button
fix: button bug fix
feat!: breaking changes
chore(deps): update dependencies
```
npm package: @studyworld/kit-test
Description: Collection of design rules, tokens and UI components
Author: Vitaliy Leonov
Latest version: 1.2.0

### Команды

`yarn tokens` –– подтянет токены дизайн системы из Figma.

`yarn icons` –– достанен все актуальные иконки из Figma в формате React-компонента.

`yarn sandbox` –– запуск сервера-песочницы. Он поможет во время разработки компонента.

`yarn stodybook` –– запуск локального сторибука для разработки, как пользоваться - см `components/TestStoryComp/*.stories.*`

Сторибук –– [sw-kit.netlify.com](https://sw-kit.netlify.com/) _обновляется после каждого мержа в мастер_

## Conventional commits

**feat** -- новый функционал

**fix** -- исправление бага

**docs** -- добавление или изменение документации

**style** -- изменения, которые не влияют на исполнение кода (пробел, форматирование, пропущенная точка с запятой и т.д.)

**refactor** -- код, который и не исправляет баг и не добавляет новый функционал

**perf** -- код, который улучшает производительность

**test** -- добавление или изменение тестов

**build** -- изменения, которые влияют на процесс сборки

**chore** -- сторонние изменения которые не затрагивают ни тесты ни папки `component` или `theme`

**revert** -- откат последнего коммита