# IMGArena-UI

Package for common React elements used across multiple front-end teams at IMGArena

## How to use

To install a package simply run:

```bash
npm i @img-arena/ui-core
// or
yarn add @img-arena/ui-core
```

For the components to work correctly it is crutial that the part of the app using them is wrapped in provider. (example for `index.tsx` in CRA). Also for the styles to work correctly import them at the root level (for CRA it's `index.tsx` file)

```typescript
/* ... other imports */
import '@img-arena/ui-core/index.css';
import { ThemeProvider } from '@imgarena/ui-core';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);
```

## Preview

to preview components use the same workflow as for local development, or storybook:

```bash
npm run storybook
```

## Local development

To get started you have to run those two commands in separate terminals, but before that you have to install all dependencies.

To install dependencies run:

```bash
npm install npm-link-shared -g // skip this step if you have this already installed (to be deprecated)
npm run prestart
```

Building a package and watching for changes:

```bash
npm run build:watch
```

Starting a preview development server:

```bash
npm run dev:example
```


Package for common React elements used across multiple front-end team at IMGArena. 

@img-arena/ui-core

Package for common React elements used across multiple front-end team at IMGArena

img-arena-bot

pkaczmarski

footerz

renatasva

alliatimg

chrisimg

giridhar_mohan

johanlajiliimg

karolinaszuberska

melanoma-sub

noe-caratini-img

richardwrightimg

sambarker-img

sundeep.sandhu

santiago.angulo

alessio-imga

vikrant-imgarena

garysmithimg

aikhelis-img

imgdiegoleal

buddhaben

richjeffrey

sdaleyimg

danny-currie-imgarena

stephano-paraskeva-imgarena

aasarco

abay.ibrayev

abukar-abukar-imgarena

andrei-bogdan-imgarena

arindam-mazumdar

bogdan-boiculese-imgarena

dan-footman-imgarena

deepthi-justine-imgarena

edchamberlainimga

edgar-enuta-imgarena

elia-orsini-imgarena

ellyandzio

faisal-hussain-imgarena

ghazian-azfar2-imgarena

grzegorz-grunert-imgarena

james.middleton-imgarena

joon.park-imgarena

kdenverimg

lescochrane-img

lewis-king-imgarena

lukasz-trusz-imgarena

maciej-lisak-imgarena

mariana.lozynska

mateusz-curylo-imgarena

matghunter

mjimg

nickson-thanda-imgarena

nihal.shah-imgarena

patrick-sawyer-imgarena

pedro-mendes-imgarena

rafal-maciejewski-imgarena

xavier.cleetus.img

artur-krupski-imgarena

balasr21

cristianbaltaga

cskilton

daniel-walters-imgarena

davidstathamimg

deeptisemwal

elavrienko

eugeniusz-kurylo-imgarena

james-young-imgarena

johan-imgarena

marcin.goszczynski

pawel-czyzynski-imgarena

rhodri-arena

thomas-cave-imgarena

ui-core

(Experimental) An ambiguous license classifier was found.

What is an ambiguous license classifier?

Ambiguous License Classifier

Source files are encoded using a non-standard text encoding.

What is bad text encoding?

Bad text encoding

Package version is not a valid semantic version (semver).

What is bad semver?

Bad semver

Package has dependencies with an invalid semantic version. This could be a sign of beta, low quality, or unmaintained dependencies.

What is bad dependency semver?

Bad dependency semver

Source files contain bidirectional unicode control characters. This could indicate a Trojan source supply chain attack. See: trojansource.codes for more information.

What are bidirectional unicode control characters?

Bidirectional unicode control characters

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack.

What is bin script confusion?

Bin script confusion

This Chrome extension includes content scripts that execute JavaScript on specified websites.

What are Chrome extension content scripts?

Chrome Extension Content Script

This Chrome extension requests host permissions to access specific websites or domains.

What are Chrome extension host permissions?

Chrome Extension Host Permission

This Chrome extension requests permissions to access browser APIs, user data, or system features.

What are Chrome extension permissions?

Chrome Extension Permission

This Chrome extension requests wildcard host permissions that grant broad access to websites.

What are Chrome extension wildcard host permissions?

Chrome Extension Wildcard Host Permission

Semantic versions published out of chronological order.

What is a chronological version anomaly?

Chronological version anomaly

Project maintainer's SSH key has been compromised.

What is a compromised SSH key?

Compromised SSH key

(Experimental) Copyleft license information was found.

What do I need to know about license files?

Copyleft License

Contains a Critical Common Vulnerability and Exposure (CVE).

What is a critical CVE?

Title

Critical CVE

Contains a high severity Common Vulnerability and Exposure (CVE).

What is a CVE?

High CVE

Uses debug, reflection and dynamic code execution features.

What is debug access?

Debug access

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

What is a deprecated package?

Deprecated

(Experimental) Contains a known deprecated SPDX license exception.

What is a deprecated SPDX exception?

Deprecated SPDX exception

(Experimental) License is deprecated which may have legal implications regarding the package's use.

What is a deprecated license?

Deprecated license

Package name is similar to other popular packages and may not be the package you want.

What is a typosquat?

Possible typosquat attack

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

What is dynamic require?

Dynamic require

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

What is an empty package?

Empty package

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

What is environment variable access?

Environment variable access

(Experimental) Something was found which is explicitly marked as unlicensed.

Explicitly Unlicensed Item

Package optionally loads a dependency which is not specified within any of the package.json dependency fields. It may inadvertently be importing dependencies specified by other packages.

What are extraneous dependencies?

Name

Extraneous dependency

Contains a dependency which resolves to a file. This can obfuscate analysis and serves no useful purpose.

What are file dependencies?

File dependency

Accesses the file system, and could potentially read sensitive data.

What is filesystem access?

Filesystem access

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

What are wildcard dependencies?

Wildcard dependency

Generic ad-hoc alert, uploaded by user or produced by system diagnostics

Alert title

Generic alert

Contains a dependency which resolves to a remote git URL. Dependencies fetched from git URLs are not immutable and can be used to inject untrusted code or reduce the likelihood of a reproducible install.

What are git dependencies?

Git dependency

Contains a dependency which resolves to a GitHub URL. Dependencies fetched from GitHub specifiers are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

What are GitHub dependencies?

GitHub dependency

AI has identified unusual behaviors that may pose a security risk.

What is an AI-detected potential code anomaly?

AI-detected potential code anomaly

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

What is AI-detected potential typosquatting?

AI-detected possible typosquat

AI has identified this package as malware. This is a strong signal that the package may be malicious.

What is AI-detected potential malware?

AI-detected potential malware

AI has determined that this package may contain potential security issues or vulnerabilities.

What are AI-detected potential security risks?

AI-detected potential security risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Why is native code a concern?

Native code

Contains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.

What are high entropy strings?

High entropy strings

Contains unicode homoglyphs which can be used in supply chain confusion attacks.

What are unicode homoglyphs?

Unicode homoglyphs

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

What are http dependencies?

HTTP dependency

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

What is an install script?

Install scripts

Package has an invalid manifest file and can cause installation problems if you try to use it.

@img-arena/ui-core

IMGArena-UI

How to use

Preview

Local development

Keywords

Related posts

@img-arena/ui-core

IMGArena-UI

How to use

Preview

Local development

Keywords

Related posts

Introducing Tier 1 Reachability: Precision CVE Triage for Enterprise Teams

DuckDB npm Account Compromised in Continuing Supply Chain Attack