open-index/open-npm huggingface dataset:
npm package: @imwebme/ds-react-components
Description: 🚨 tf-o-template-ds 임시라이브러리입니다 기존 `ds-react-components`라는 라이브러리로 유지보수 되고있었습니다.
Author: imwebme
Latest version: 0.0.29

# 🚨 tf-o-template-ds 임시라이브러리입니다

🚨 tf-o-template-ds 임시라이브러리입니다 기존 `ds-react-components`라는 라이브러리로 유지보수 되고있었습니다.

`ds-react-components` 라이브러리를 공용적으로 사용하기에는 문제가있었습니다.
- emotion
- 번들러 설정 babel
- twin.macro

처음 셋팅할때는 위 설정이 없어도 되도록 라이브러리를 개발했지만 css-in-js의 head에 스타일을 주입하는 로직이 문제가있었습니다.

  라이브러리에있는 emotion이 head에 스타일을 주입하는 것과 `ds-react-components`를 가져와 사용하는 쪽에서 emotion을 사용할때 `ds-react-components`가 후순위로 렌더링되면서 head에 style 속성의 우선순위가 사용하는 사용자의 마음대로 지정할 수 없는 문제가있었습니다.

일단 애플리케이션을 만드는 쪽에서도 동일한 기술스택을 사용하고있어서 `peerDependencies`로 설정해서 사용하는쪽에서 emotion으로 렌더링하게끔 사용성을 잡고 프로젝트를 시작하였습니다.

그래서! 아래와 같은 문제?가 있습니다. 사용하는 쪽에서도 `emotion` `babel` `twin.macro` 설정을 해야한다.

다음 피쳐로 위 문제들을 해결하는 방법으로 재설계를 하려하였지만 @minsoo-web 전담하여 개발해주실거라서

`ds-react-components`는 `tf-o-template-ds`로 변경합니다.

동일 기능의 디자인시스템 컴포넌트가 생성되면 마이그레이션을 하는 방향으로 가겠습니다.

---

<div align="center">
  <h3>디자인 시스템을 적용한 리액트 컴포넌트</h3>

![](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![](https://img.shields.io/badge/Typescript-3178C6?logo=typescript&logoColor=white)
  
[![](https://img.shields.io/npm/v/@imwebme/tf-o-template-ds/latest)](https://www.npmjs.com/package/@imwebme/tf-o-template-ds/v/latest)
[![](https://img.shields.io/npm/v/@imwebme/tf-o-template-ds/dev)](https://www.npmjs.com/package/@imwebme/tf-o-template-ds/v/dev)

</div>

## development

`.env` 추가하기

```shell
npm install
npm rnu dev
```

## spec

- npm 자동배포
  - changeset
npm package: @imwebme/eslint-config
Description: imweb ESLint configs for Javascript
Author: imwebme
Latest version: 1.2.4

[![Publish Package to Github](https://github.com/imwebme/eslint-config/actions/workflows/deploy.yaml/badge.svg)](https://github.com/imwebme/eslint-config/actions/workflows/deploy.yaml) [![Publish Package to NPM](https://badgen.net/npm/v/@imwebme/eslint-config)](https://www.npmjs.com/package/@imwebme/eslint-config)

# @imwebme/eslint-config

A rule set of imwebme's ESLint configurations

- eslint:recommended [List of available rules - ESLint - Pluggable JavaScript linter](https://eslint.org/docs/rules/)
- @typescript-eslint/recommended [typescript-eslint/packages/eslint-plugin at main · typescript-eslint/typescript-eslint](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin)

## Installation

```
npm install --save-dev @imwebme/eslint-config
```

or

```
yarn --dev @imwebme/eslint-config
```

## Usage

### Javascript

`.eslintrc.js`
```js
module.exports = {
  extends: [
    '@imwebme/eslint-config'
  ]
}
```

`.eslintrc`
```
{
  "extends": [
    "@imwebme/eslint-config"
  ]
}
```

### @imwebme/eslint-config/typescript

> * @typescript-eslint/eslint-plugin
> * typescript

#### Typescript

`.eslintrc.js`
```js
module.exports = {
  extends: [
    '@imwebme/eslint-config',
    '@imwebme/eslint-config/typescript'
  ]
}
```

`.eslintrc`
```
{
  "extends": [
    "@imwebme/eslint-config",
    "@imwebme/eslint-config/typescript"
  ]
}
```

### @imwebme/eslint-config/react

> * eslint-plugin-react

#### Javascript + React

`.eslintrc.js`
```js
{
  "extends": [
    '@imwebme/eslint-config',
    '@imwebme/eslint-config/react',
  ],
}
```

`.eslintrc`
```
{
  "extends": [
    "@imwebme/eslint-config",
    "@imwebme/eslint-config/react"
  ]
}
```

#### Typescript + React

`.eslintrc.js`
```js
module.exports = {
  extends: [
    '@imwebme/eslint-config',
    '@imwebme/eslint-config/typescript',
    '@imwebme/eslint-config/react'
  ]
}
```

`.eslintrc`
```
{
  "extends": [
    "@imwebme/eslint-config",
    "@imwebme/eslint-config/typescript",
    "@imwebme/eslint-config/react"
  ]
}
```

### @imwebme/eslint-config/prettier

> * eslint-plugin-prettier

#### Prettier

`.prettierrc`
```js
{
  "extends": [
    '@imwebme/eslint-config',
    '@imwebme/eslint-config/prettier',
  ],
}
```
npm package: @imwebme/eslint-config-ds
Description: design-system eslint settings created with imweb ESlint settings
Author: imwebme
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

```js
// .eslintrc.cjs
module.exports = {
  "parserOptions": {
      "ecmaVersion": "latest"
  },
  extends: [
    '@imwebme/eslint-config-zynk/react',
  ]
}
```

`airbnb`룰베이스

- `react/jsx-props-no-spreading` 라이브러를 만들다보니 props를 전체 spreading 할일이 많아서 error에서 제거
npm package: @imwebme/eslint-config-tf-o
Author: imwebme
Latest version: 0.0.2

```js
// .eslintrc.cjs
module.exports = {
  "parserOptions": {
      "ecmaVersion": "latest"
  },
  extends: [
    '@imwebme/eslint-config-ds/react',
  ]
}
```

`airbnb`룰베이스

- `react/jsx-props-no-spreading` 라이브러를 만들다보니 props를 전체 spreading 할일이 많아서 error에서 제거