# @zebra-fed/zds-react-desktop

> Zebra Desktop. A React component library.

Latest version **0.9.3** (published 2022-04-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @zebra-fed/zds-react-desktop
pnpm add @zebra-fed/zds-react-desktop
yarn add @zebra-fed/zds-react-desktop
bun add @zebra-fed/zds-react-desktop
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.9.3 |
| Published | 2022-04-13 |
| First published | 2020-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 747.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zebra-fed |
| Maintainers | marcadlington1, lwaltonz, benken, zebrafed |
| Keywords | react, zebra, components, desktop |

## Links

- npm: https://www.npmjs.com/package/@zebra-fed/zds-react-desktop
- Repository: https://bitbucket.org/zebrafed/zds-react-desktop
- Homepage: https://bitbucket.org/zebrafed/zds-react-desktop#readme
- Issues: https://bitbucket.org/zebrafed/zds-react-desktop/issues
- npm.io page: https://npm.io/package/@zebra-fed/zds-react-desktop

## Dependencies (14)

- [color](https://npm.io/package/color.md) ^3.1.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [ts-node](https://npm.io/package/ts-node.md) ^9.1.1
- [react-dnd](https://npm.io/package/react-dnd.md) ^15.1.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [styled-system](https://npm.io/package/styled-system.md) ^5.0.10
- [typeface-roboto](https://npm.io/package/typeface-roboto.md) ^0.0.54
- [@zebra-fed/icons](https://npm.io/package/@zebra-fed/icons.md) ^1.0.12
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.1.2
- [styled-components](https://npm.io/package/styled-components.md) ^4.2.1
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^15.1.2
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.22
- [@fontsource/ibm-plex-sans](https://npm.io/package/@fontsource/ibm-plex-sans.md) ^4.5.3
- [@fontsource/ibm-plex-sans-condensed](https://npm.io/package/@fontsource/ibm-plex-sans-condensed.md) ^4.5.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.9.3 (latest) — 2022-04-13
- 0.9.2 — 2022-04-13
- 0.9.1 — 2022-03-29
- 0.9.0 — 2022-03-24
- 0.6.62-1 — 2022-03-23
- 0.6.72 — 2022-03-22
- 0.6.71 — 2022-03-22
- 0.6.70 — 2022-03-21
- 0.6.69 — 2022-03-03
- 0.6.68 — 2022-03-03
- 0.6.67 — 2022-03-03
- 0.6.66 — 2022-02-21
- 0.6.65 — 2022-01-13
- 0.6.64 — 2022-01-13
- 0.6.63 — 2022-01-13
- … 84 more at https://npm.io/package/@zebra-fed/zds-react-desktop/versions

## README

# Zebra Design System React Desktop Components

## Install

```bash
  npm i -s @zebra-fed/zds-react-desktop
```

## Dependencies

-`@zebra-fed/icons`

## Usage

This library is build with theme in mind. To use the library, the entire react application must be wrapped in `<StripesTheme>`

```js
import { StripesTheme } from '@zebra-fed/zds-react-desktop/StripesTheme';

<StripesTheme>
  <App />
</StripesTheme>;
```

# Dev instructions

To publish to NPM:
`package.json`
Increment version number

```bash
yarn build
cd build
npm publish
```

Publish update to NPM

## Development

You can easily develop and interact with your components by using Storybook. To run the local server, simply run:

```bash
$ yarn start
```

Navigate to [http://localhost:6060](http://localhost:6060) to view your styleguidist. They should automatically update as you develop.

Styleguidist will pick up any Readme from the `README.md` file in a component folder.

# Building a SVG Library for your Application

The `<SVGIcon />` component requires the configuration of a iconLibrary passed through to the Stripes theme for it to pick up the symbols. This is configured like such:
```javascript
import { icons } from '../resources/iconLibrary';
const themeObj = {
  icons: icons,
};

<StripesTheme mode={'dark'} theme={themeObj}>
    // body of your app 
</StripesTheme>
```
The Stripes project exposes a script that will take a folder of SVG icons, iconography that is specific to your application, and compiles it into a single iconLibrary string that will be ingested into the Stripes theming engine.

The filename of the svg files will be used as the iconid property when referencing the icon in the `<SVGIcon />` tag within your app.

The script can be access via:
```bash
npm run buildIcons --folder ./resources/default
```
the argument that follows the --folder string will be the source folder for your svg files. It will recursively search through the folder and compile all svg objects into a single string.

---
_Source: https://npm.io/package/@zebra-fed/zds-react-desktop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._