Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@zebra-fed/zds-react-desktop

Package Overview
Dependencies
14
Maintainers
4
Versions
99
Issues
File Explorer

Advanced tools

@zebra-fed/zds-react-desktop

Zebra Desktop. A React component library.

    0.9.3latest

Version published
Maintainers
4
Yearly downloads
5,733
increased by149.7%

Weekly downloads

Readme

Source

Zebra Design System React Desktop Components

Install

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>

import { StripesTheme } from '@zebra-fed/zds-react-desktop/StripesTheme'; <StripesTheme> <App /> </StripesTheme>;

Dev instructions

To publish to NPM: package.json Increment version number

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:

$ yarn start

Navigate to 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:

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:

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.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc