# sp-design

> The root package for the design system of Check Point.

Latest version **0.0.0** (published 2022-05-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install sp-design
pnpm add sp-design
yarn add sp-design
bun add sp-design
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2022-05-12 |
| First published | 2022-05-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=15.0.0 |
| Dependencies | 3 |
| Unpacked size | 12.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cssberries |

## Links

- npm: https://www.npmjs.com/package/sp-design
- Repository: https://github.com/dome9/cp-design
- Homepage: https://github.com/dome9/cp-design#readme
- Issues: https://github.com/dome9/cp-design/issues
- npm.io page: https://npm.io/package/sp-design

## Dependencies (3)

- [replace-in-file](https://npm.io/package/replace-in-file.md) ^6.3.2
- [react-split-pane](https://npm.io/package/react-split-pane.md) ^0.1.92
- [react-text-format](https://npm.io/package/react-text-format.md) ^2.0.28

## Recent versions

- 0.0.0 (latest) — 2022-05-12

## README

# cp-design-system

The design system of Check Point.

## Getting Started - Use Package

### Prerequisites

1. Add dome9 registry
   - add registry to your project/global npm config (.npmrc)
    `@dome9:registry=https://npm.pkg.github.com/`
   - Or set via command line to .npmrc:
    `npm config set @dome9:registry=https://npm.pkg.github.com/`
2. Enable install packages from GitHub Package Registry
   - Create personal access token from your Github Settings -> Developer settings -> Personal access tokens
   - Generate new token with at least ['read:packages'] scope
   - Add the token to your project/global npm config (.npmrc):
    `//npm.pkg.github.com/:_authToken={github token}`
   - Or set via command line to .npmrc:
    `npm config set //npm.pkg.github.com/:_authToken={github token}`

### Install cp-design Package

  `npm i @dome9/cp-design`

### Usage of Components

Storybook [Link](https://mockupsangular.falconetix.com/storybook/index.html?path=/story/example-introduction--page).

TBD

### Usage of Design System utility classes with Tailwing CSS

In order to use the Design System utility classes, you firslty need to install Tailwind CSS in your project.

If you don't use Tailwind in your project, follow Tailwind CSS [Installation Guide](https://tailwindcss.com/docs/installation).

<strong>Be aware that Tailwind come with [pre-defined CSS base styles](https://tailwindcss.com/docs/preflight), which can affect your styles.</strong>

After installing Tailwing in your project, following those steps to integrate with the Design System:

1. Add cp-design preset to *tailwind.config.js* file:

    ``` js
    module.exports = {
      ...,
      presets: [
        require('@dome9/cp-design/packages/berries/tailwind-berries.config'),
      ],
    }
    ```

2. Add the 'theme' class to your top level element, for example:

    ``` html
    <div className="theme">Top Level Element</div>
    ```

3. Start using cp-design:

    ``` html
    <div className="bg-brand">Check Point Design System</div>
    ```

## Getting Started - Contributors

TBD

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