# streda_web_components

> Library provides set of web components for Bokita solutions

Latest version **1.0.6** (published 2022-05-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install streda_web_components
pnpm add streda_web_components
yarn add streda_web_components
bun add streda_web_components
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2022-05-13 |
| First published | 2022-05-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 18 |
| Unpacked size | 18.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jakubsnpm |

## Links

- npm: https://www.npmjs.com/package/streda_web_components
- Repository: https://DevOpsBokita@dev.azure.com/DevOpsBokita/Bokita/_git/streda-web-components
- npm.io page: https://npm.io/package/streda_web_components

## Dependencies (18)

- [yup](https://npm.io/package/yup.md) ^0.32.11
- [formik](https://npm.io/package/formik.md) ^2.2.9
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [react-cookie](https://npm.io/package/react-cookie.md) ^4.1.1
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.176
- [react-xarrows](https://npm.io/package/react-xarrows.md) ^1.5.2
- [styled-system](https://npm.io/package/styled-system.md) ^5.1.5
- [drag-drop-touch](https://npm.io/package/drag-drop-touch.md) ^1.3.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.1
- [@microsoft/signalr](https://npm.io/package/@microsoft/signalr.md) ^5.0.10
- [@types/styled-system](https://npm.io/package/@types/styled-system.md) ^5.1.10
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.3
- [moment-duration-format](https://npm.io/package/moment-duration-format.md) ^2.3.2
- [storybook-addon-themes](https://npm.io/package/storybook-addon-themes.md) ^6.1.0
- [themeprovider-storybook](https://npm.io/package/themeprovider-storybook.md) ^1.8.0
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.15

## Recent versions

- 1.0.6 (latest) — 2022-05-13
- 1.0.5 — 2022-05-13
- 1.0.4 — 2022-05-12
- 1.0.3 — 2022-05-12
- 1.0.2 — 2022-05-12
- 1.0.1 — 2022-05-12

## README

# streda-web-components

###### This repo can be found on [Web components repository](https://gitlab.tkhtechnology.com/ISO_001_BOKITA/bokita_web_components).

## Installation

1. Clone/download repo
2. `yarn install`

## Usage

**Development with Storybook**

**_Create new component_**
1. Create component in tsx extension
2. Create new file in the component folder named {ComponentName}/index.stories.tsx
* Storybook package will be looking for the files with *.stories.tsx extensions
3. Export storybook config inside created file with: 
    ```
    export default {
        title: '{storybookFolder/components}/{ComponentName}',
        component: ComponentName,
        argTypes: {
            Here we define all arguments that we will be using with storybook
            Mosty we can define props to play around with them
        },
    };
    ```
4. Export component with dafined component's properties:
    ```
    export const ComponentStorybookName: Story<{ComponentProps}> = (props) => {
        return <Component {...props}/>
    };
    ```
5. Run `yarn storybook` to compile the project on http://localhost:6006/

**Styled components**

**_Create new StyledComponent with html element_**

```
    const StyledComponentName = styled.{div, p, h1, etc...}`
        display: flex;
        box-sizing: border-box;
        border-radius: 4px;
        // Use theme prop to get access to declared variables for the given theme
        background: ${({ theme }) => theme.colors.background};
        margin-left: 16px;
        padding: 0 12px;
        margin-bottom: 4px;
    `;
```

**_Create new StyledComponent with html element and custom props_**

```
    const StyledComponentName = styled.{div, p, h1, etc...}<{prop: propType}>`
        display: flex;
        box-sizing: border-box;
        border-radius: 4px;
        // To check truthiness of the given prop
        background: ${({ prop }) => prop ? "red" : "green"};
        margin-left: 16px;
        padding: 0 12px;
        margin-bottom: 4px;
    `;
```

**_Create new StyledComponent that extends already created styled-component_**

```
    const StyledComponentName = styled(StyledComponentName)`
        // All styles that we want the creating component will be extended of
        display: flex;
    `;
```

More info about styled-components liblary [StyledComponents Lib](https://styled-components.com/docs).

## Making changes
1. Versioning: 
    * MajorVer -> Changes that break backward compatibility
    * MinorVer -> Backward compatible new features
    * PatchVer -> Backward compatible bug fixes
    * BetaVer -> Aren't considered major releases, so the package version number doesn't change

2. After every change we need to increase package version
    * For beta version we type {MajorVer}.{MinorVer}.{PatchVer}-{TaskNumber}.{BetaVer}
    * For stable version we use {MajorVer}.{MinorVer}.{PatchVer}

3. Once we made some changes in the projects we do have two options
    * Pubish package with beta tag `npm run build` && `npm publish --tag beta`    
    * Pubish package with stable version `npm run build` && `npm publish`

4. Once the version is tested on the FE project we need to make PR with stable version of the package

- After PR is approved we can change the package version in our FE projects

**All commands**

| Command                  | Description                                                                          |
| --------------------     | ------------------------------------------------------------------------------------ |
| `npm run build`          | Build the package to make it ready for publishing                                    |
| `npm run test`           | Run tests with jest                                                                  |
| `npm run test-ci`        | Run test to create coverage report file                                              |
| `npm run test:watch`     | Run test with watch mode                                                             |
| `npm run prepublishOnly` | Run tests                                                                            |
| `npm run lint`           | Run linter that will create report in lint.xml file                                  |
| `npm run storybook`      | Run Storybook extension on http://localhost:6006/                                    |
| `npm run build-storybook`| Build storybook project to make it hostable                                          |

## Tests & Coverage

Tests are stored in separate `tests` folder in the project. To run tests and analyze code coverage please use the `npm run test` command.
Coverage results are stored in `tests/__coverage__` folder as static HTML.

## CI

###### In test Jenkinsfile we have stages:
- **_Test_** that runs `npm run test-ci` to check if tha all test go through
- **_Linter_** tests that runs `npm run lint` looking for linters problems
- **_Sonar_** analysis to run sonar with the given package version

Test results can be exported to JUnit.xml file. Please run the `npm run test-ci` to create file in the `./tests/__CI__` directory.
You can also create OpenClover file stored in `./tests/__coverage__` directory or another file, using `npx jest --coverage --config=configs/jest.json --coverageReporters=<reporter_name>`. Form more details see:

- https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-reports/lib
- https://openclover.org/
- https://plugins.jenkins.io/clover/

---
_Source: https://npm.io/package/streda_web_components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._