Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

koine-ui-utils

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

koine-ui-utils

a library of common utils for RetroSockets

  • 0.4.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Koine UI Utils

a library of common utils for Koine

Installation

This package is available on npm as koine-ui-utils, and you can find it here.

To install the latest stable version with yarn:

$ yarn add koine-ui-utils

or with npm:

$ npm install koine-ui-utils --save

Up & Running

To install dependencies with Yarn, run:

$ yarn

or to install with npm, run:

$ npm install

Overview

There are three main exports from this lib:

  • buildGlobalStyles() - a function for building a global style string for styled-components injectGlobal function
  • padScale() - a function for scaling dimensions based on the theme's basePad dimensions
  • theme - an object containing all the attributes for our UI theme

buildGlobalStyles()

Below is an example use of this function:

import { injectGlobal } from 'styled-components';
import { buildGlobalStyles, theme }  from 'koine-ui-utils';

injectGlobal([buildGlobalStyles(theme)]);

padScale()

Below is an example use of this function:

import { padScale } from 'koine-ui-utils';
import { rem } from 'polished';

// `padScale` returns a raw number
// given `theme.dimensions.basePad` is `8`, a scale of 3 would return `24`
// wrapping this in `rem()` keeps the units consistent
// this example would return `padding: 2rem 3rem;`
const WideButton = styled.button`
  padding: ${rem(padScale(2))} ${rem(padScale(3))};
`;

theme

The theme object look like this:

{
  animations: {
    // css keyframes
    bounce
    slidedown
  },
  colors:
    base: {
      // graytones
      chrome000: STRING,
      chrome050: STRING,
      chrome100: STRING,
      chrome200: STRING,
      chrome300: STRING,
      chrome400: STRING,
      chrome500: STRING,
      chrome600: STRING,
      chrome700: STRING,
      chrome800: STRING,
      chrome900: STRING,

      // ui colors
      background: STRING,
      link: STRING,
      linkHover: STRING,
      linkVisited: STRING,
      overlay: STRING,
      shadow: STRING,
      shadowLight: STRING,
      text: STRING,
      textLight: STRING,
    },
    brand: {
      primary: STRING,
      secondary: STRING,
      tertiary: STRING,
      blue: STRING,
       purple: STRING,
      pink: STRING,
      orange: STRING,
      green: STRING,
      yellow: STRING,
    },
    status: {
      danger: STRING,
      default: STRING,
      info: STRING,
      success: STRING,
      warning: STRING,
    },
  },
  dimensions: {
    baseFontSize: NUMBER,
    basePad: NUMBER,
  },
  fonts: {
    primary: STRING,
    primaryFallback: STRING,
  },
  fontWeights: {
    light: NUMBER,
    normal: NUMBER,
    semiBold: NUMBER,
    bold: NUMBER,
  },
}

Local Development

Module Development Workflow

Helpful information on development workflow in this library lives here.

Linting

To run the linter once:

$ yarn lint

To run the watch task:

$ yarn lint:watch

Testing

To run the tests once:

$ yarn test

To run the watch script (for only relevant test files)

$ yarn test:watch

To run the watch script (for all test files)

$ yarn test:watchAll

To view the coverage report:

$ yarn test:coverage:report

Review

If you'd like to run the linters and tests at once (this is a nice check before pushing to Github or deploys), you can run:

$ npm run review

Build

NOTE: When you run build, Babel will create a build directory. This is what your users will interact with when they use your library. Nothing in lib gets shipped with your published module.

Run once:

$ npm run build

Run the watch script:

$ npm run build:watch

NOTE: the build script runs in the prepublish script just before you publish to npm.

Contributing

I am thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in the Contributing Guidelines.

License

MIT

FAQs

Package last updated on 02 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc