open-index/open-npm huggingface dataset:
npm package: @pschaubroeck/cra-template-bsc-app
Description: BSC create-react-app template for standalone apps.
Author: developer@businessolver.com
Latest version: 0.1.3

# cra-template-bsc-app

This create-react-app template adds in standardized `eslint`, `prettier`, `browserlist` settings.  As well as lays the groundwork for standardizing unit tests with `enzyme` and `react-testing-library`.

## Installation

Run the following command.
```terminal
npx create-react-app my-app --template cra-template-bsc-app
```

## Additional Scripts

In the project directory, you can run:

### `yarn lint`

Runs `eslint`. It will output issues to the console as well as fix any fixable issues.

### `yarn lint:build`

Runs `eslint`. It will output issues to the console.

### `yarn format`

Runs `prettier`. It will output issues to the console as well as fix any fixable issues.

### `yarn format:build`

Runs `prettier`. It will output issues to the console.

### `yarn test:coverage`

Launches the test runner without the interactive watch mode.<br />
Generated code coverage reports will reside in /coverage
Generated junit compatible test results will reside in /src/__tests__/junit.xml
npm package: @pschaubroeck/cra-template-workspaces-app
Description: Lerna + Yarn Workspaces create react app template.
Author: developer@businessolver.com
Latest version: 0.1.4

# cra-template-code-standards

This create-react-app template adds in standardized `eslint`, `prettier`, `browserlist` settings.  As well as lays the groundwork for standardizing unit tests with `enzyme` and `react-testing-library`.

## Installation

Run the following command.
```terminal
npx create-react-app example --template file:../templates/cra-template-workspaces-app
```

package.json
Remove
```
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
	">0.2%",
	"not dead",
	"not op_mini all"
  ],
  "development": [
	"last 1 chrome version",
	"last 1 firefox version",
	"last 1 safari version"
  ]
}
```

update .env files
replace instances of `example` with your package name
this will be the folder where the app will be served from

delete .gitignore, it only exists to make template complete successfully

Add Scope to package name
```
"name": "@bsc-features/package-name-here",
```

## Additional Scripts

In the project directory, you can run:

### `yarn lint`

Runs `eslint`. It will output issues to the console as well as fix any fixable issues.

### `yarn lint:build`

Runs `eslint`. It will output issues to the console.

### `yarn format`

Runs `prettier`. It will output issues to the console as well as fix any fixable issues.

### `yarn format:build`

Runs `prettier`. It will output issues to the console.

### `yarn test:coverage`

Launches the test runner without the interactive watch mode.<br />
Generated code coverage reports will reside in /coverage
Generated junit compatible test results will reside in /src/__tests__/junit.xml
npm package: @pschaubroeck/eslint-config-bsc-app
Description: BSC eslint shared configuration
Author: developer@businessolver.com
Latest version: 0.1.3

# eslint-config-bsc-app

`eslint` shared configuration for Businessolver npm packages.

- eslint-config-bsc-app is pre-configured with a list of ignore files
- a generic ignore file, `.eslintignore`, can be found in this package for use within your apps.

## ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions:

- ESLint uses Espree for JavaScript parsing.
- ESLint uses an AST to evaluate patterns in code.
- ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

[Documentation](https://github.com/eslint/eslint)

## Info

Below is a list of all dependencies required by `create-react-app`'s eslint configuration `eslint-config-react-app`.  In additon to our own specs, these will be installed by using this configuration even if specified files are not needed (ie: typescript)
```
"@typescript-eslint/eslint-plugin": "2.x",
"@typescript-eslint/parser": "2.x",
"babel-eslint": "10.x",
"eslint": "6.x",
"eslint-plugin-flowtype": "3.x || 4.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-hooks": "1.x || 2.x"
```
npm package: @pschaubroeck/prettier-config-bsc-app
Description: BSC prettier shared configuration
Author: developer@businessolver.com
Latest version: 0.2.0

# prettier-config-bsc-app

`prettier` shared configuration for Businessolver npm packages.

- a generic ignore file, `.prettierignore`, can be found in this package for use within your apps.

## Prettier
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

[Documentation](https://github.com/prettier/prettier)
npm package: @pschaubroeck/stylelint-config-bsc-app
Description: BSC stylelint shared configuration
Author: developer@businessolver.com
Latest version: 0.1.1

# stylelint-config-bsc-app

`stylelint` shared configuration for Businessolver npm packages.

- a generic ignore file, `.stylelintignore`, can be found in this package for use within your apps.
- or add `ignoreFiles` to the `stylelint` package.json key
```

"ignoreFiles": [
	"coverage/**/*",
	"dist/**/*",
	"build/**/*",
	"node_modules/**/*",
	"public/**/*",
	"scripts/**/*",
	"static_storybook/**/*",
	".*/**/*",
	"**/*.{js,jsx,json,md,mdx,log,snap,lock,eot,svg,ttf,woff,woff2,yaml}",
	"*.{js,jsx,json,md,mdx,log,snap,lock,eot,svg,ttf,woff,woff2,yaml}",
	".*"
]
```

## Stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

- understands the latest CSS syntax including custom properties and level 4 selectors
- extracts embedded styles from HTML, markdown and CSS-in-JS object & template literals
- parses CSS-like syntaxes like SCSS, Sass, Less and SugarSS
- has over 170 built-in rules to catch errors, apply limits and enforce stylistic conventions
- supports plugins so you can create your own rules or make use of plugins written by the community
- automatically fixes the majority of stylistic violations
- is well tested with over 15000 unit tests
- supports shareable configs that you can extend or create
- is un-opinionated so that you can customize it to your exact needs

[Documentation](https://github.com/stylelint/stylelint)
npm package: @pschaubroeck/ui-datatable
Description: ui datatable library based on react-table
Author: developer@businessolver.com
Latest version: 1.0.0

# UI Datatable

UI Datatable is a ui wrapper of [react-table](https://github.com/tannerlinsley/react-table/tree/v7.0.4), created as a re-useable/accessible components for BusinesSolver react applications.

[Live Documentation](https://bamboo.businessolver.com/browse/UI-UID/latest/artifact/shared/static_storybook/index.html)

## What's New

-   v1 - initial components/documentation

## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

### Notable Dependencies

-   [react-bootstrap](https://react-bootstrap.netlify.app/)
-   [react-table](https://github.com/tannerlinsley/react-table/tree/v7.0.4)
-   [Storybook](https://www.learnstorybook.com/)

### Coding style

The `eslint` and `Prettier` are setup in the project. Even if you have the code formatted ugly, prettier will format the code for you.

-   Git hooks are pre-setup, `eslint` and `Prettier` will run automatically on commit.
-   Running eslint manually:

    ```terminal
    cd <project directory>
    npm run lint
    ```

-   Running Prettier manually:

    ```terminal
    cd <project directory>
    npm run format
    ```

## Installing

After cloning the project, navigate to the project in terminal and run the following command(s)

-   install project dependencies

    ```terminal
    cd <project directory>
    yarn
    ```

## Running the app locally

```terminal
cd <project directory>
npm run storybook
```

## Unit Tests

Unit testing uses a combination of `jest`, and `enzyme`. Test files should be packaged with the components themselves, and end with a `.test.js` suffix.

### Test Structure

-   Component
    -   defaultProps
        -   tests validity of default props
        -   tests validity of custom props
    -   Data types
        -   tests validity of PropTypes
    -   Events
    -   Conditionals
        -   tests for conditional rendering/logic inside components
    -   States
        -   tests various component states

### Running Tests

-   All tests

    ```terminal
    cd <project directory>
    npm run test
    ```

-   Running single test files

    ```terminal
    cd <project directory>
    npm run test -- <file prefix>.test.js

    ```

-   Debugging tests with console.log
    -   need to set `verbose` flag to false
    -   ex) `npm run test -- --verbose=false`

## Builds for deployment

```terminal
cd <project directory>
npm run format:build
npm run lint:build
npm run storybook:build
npm run build
npm run test:coverage
```