open-index/open-npm huggingface dataset:
npm package: @smarts/smart-components
Description: Smart Web Components
Latest version: 0.0.9

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Smart Components

This is the repository for web components from the Smartmatic Design System.

## Using these components

### Script tag

- Put these script tags in the head of your index.html:

  ```html
  <script
    type="module"
    src="https://unpkg.com/@diondre27/smart-components@latest/dist/smarts/smarts.esm.js"
  ></script>
  <script
    nomodule=""
    src="https://unpkg.com/@diondre27/smart-components@latest/dist/smarts/smarts.js"
  ></script>
  ```

- Then you can use the elements anywhere in your template, JSX, html etc

### Node Modules

- Run `npm install my-component --save`
- Put these script tags in the head of your index.html:
  ```html
  <script
    type="module"
    src="https://unpkg.com/@diondre27/smart-components@latest/dist/smarts/smarts.esm.js"
  ></script>
  <script
    nomodule=""
    src="https://unpkg.com/@diondre27/smart-components@latest/dist/smarts/smarts.js"
  ></script>
  ```
- Then you can use the elements anywhere in your template, JSX, html etc
npm package: @smarts/smart-styles
Description: Smart utility styles
Latest version: 0.0.8

# Smart Styles

The repository contains the Smartmatic Styles Library based on bootstrap providing utility and helper classes to follow the Design System.

## Using the Library

### Using the Entire Library

To use include the entire css library add this link to the head of your html

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@diondre27/smart-styles@latest/dist/smmt.css"
/>
```

### Using Individual CSS

The library also provides individual parts to be utilized such as the colors for example.

To use th add this link to the head of your html

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@diondre27/smart-styles@latest/dist/css/colors.css"
/>
```

Also available currently is:
Spacing: `https://unpkg.com/@diondre27/smart-styles@latest/dist/css/spacing.css`
Tokens: `https://unpkg.com/@diondre27/smart-styles@latest/dist/css/tokens.css`

### Using the SASS

The library also exposes the underlying sass files that produces the css above to be included within your own for easier customization and integration with your current workflow.

The files can be found as follows:
Spacing: `https://unpkg.com/@diondre27/smart-styles@latest/dist/scss/spacing.scss`
Tokens: `https://unpkg.com/@diondre27/smart-styles@latest/dist/scss/tokens.scss`
Colors: `https://unpkg.com/@diondre27/smart-styles@latest/dist/scss/colors.scss`
npm package: @smartshallot/eslint-config
Description: An ESLint Configuration Set.
Author: Xiaosong Gao
Latest version: 0.0.6
Deprecated: Change name to eslint-config-automatic.

# eslint-config

[![npm version](https://img.shields.io/npm/v/@smartshallot/eslint-config.svg?style=flat)](https://www.npmjs.com/package/@smartshallot/eslint-config)
[![Build Status](https://travis-ci.org/gaoxiaosong/eslint-config.svg?branch=master)](https://travis-ci.org/gaoxiaosong/eslint-config)

这是个人的ESLint规则配置，包括多个常用集合，对于每一条规则，提供简要注释和规则说明网址，没有使用其他的`extends`。

## 配置信息

在`rules`目录下，有一些规则库，可以作为单独的配置信息，放入ESLint配置文件中的`extends`里面。

例如，如果想引用`React Native`的规则，则在`extends`中添加如下代码：

```javascript
"extends": [
    "@smartshallot/rules/react-native",
]
```

其余依次类推，目前支持的配置如下所示：

* `base`：包含现有的每一条规则，按照分类组织文件结构。具体规则列表请参照ESLint官方网站：[规则文档](http://eslint.cn/docs/rules/)。
* `react`
* `react-native`：使用了插件[eslint-plugin-react-native](https://github.com/Intellicode/eslint-plugin-react-native)。
* `typescript`

如果只引用规则，那ESLint配置文件剩余的部分都需要自行完成，也可以使用`install`目录下相应的安装脚本来进行设置。

依旧以`react-native`为例，在`.eslintrc.js`中，设置如下：

```javascript
const config = {
    // ...
    "extends": [
        // ...
        "@smartshallot/rules/react-native",
    ],
    // ...
}

require('@smartshallot/install/react-native')(config);

module.exports = config;
```

注意：`install`中的脚本，只设置一个配置插件的设置项，如果要引用多个配置信息，则需要依次对`config`进行设置，可参照`module`目录中的文件写法。

## 整体集成

除了上述的只引用规则信息之外，还可以使用已经集成好的脚本，来生成相应的ESLint配置文件。

以TypeScript语言的`react-native`项目为例，对应于`module`目录下的`typescript-react-native.js`文件，需要在`.eslintrc.js`中，设置如下：

```javascript
const config = require('@smartshallot/module/typescript-react-native');
// 这里添加想修改的设置，也可以不添加
module.exports = config;
```

目前支持的集成设置类型如下：

* `javascript`：只使用JavaScript开发的项目，没有React相关代码。
* `javascript-react`：使用JavaScript开发的React项目。
* `javascript-react-native`：使用JavaScript开发的React Native项目。
* `typescript`：只使用TypeScript开发的项目，没有React相关代码。
* `typescript-react`：使用TypeScript开发的React项目。
* `typescript-react-native`：使用TypeScript开发的React Native项目。
npm package: @smartshallot/eslint-config-base
Description: An eslint configuration for base.
Author: Xiaosong Gao
Latest version: 0.0.2
Deprecated: Change name to @smartshallot/eslint-config.

# eslint-config-base

[![npm version](https://img.shields.io/npm/v/@smartshallot/eslint-config-base.svg?style=flat)](https://www.npmjs.com/package/@smartshallot/eslint-config-base)
[![Build Status](https://travis-ci.org/gaoxiaosong/eslint-config-base.svg?branch=master)](https://travis-ci.org/gaoxiaosong/eslint-config-base)

这是个人的ESLint基础规则配置，包含现有的每一条规则，并提供简要注释和规则说明网址，没有使用`eslint:recommended`。

具体规则列表请参照ESLint官方网站：[规则文档](http://eslint.cn/docs/rules/)。