Giter Club home page Giter Club logo

integration-ds's Introduction

integration-ds

A design system for integration-ds UI components, built on @design-systems/cli.

๐Ÿ‘ Philosophy

This is a design system intended for UI components currently being built or tested in integration-ds.

Included with this repo:

  • Scaffolding for shared components and packages.
  • Automatic CI/CD pipeline on circleCI.
    • PR canary builds to NPM (using auto).
    • Canary builds of Storybook (guides included in docs).
    • Accessibility audits.
    • Bundle size monitoring.
  • An instance of the Storybook documentation site with custom plugins.
  • Theme support.
  • Advanced development using Typescript.

Components in this repository will ideally not clone functionality from other design systems, unless necessary for a time-boxed experiment.

๐Ÿš€ Usage

To use a component from this repo you will first need to install the component into your project.

For an example we will try to use the @integration-ds/card component.

npm i @integration-ds/card
# or with yarn
yarn add @integration-ds/card

Then to use the component in your code just import it!

import Card from '@integration-ds/card';

๐Ÿ’… CSS

To use the components you have to import the css files along with the components.

import Card from '@integration-ds/card';
import '@integration-ds/card/dist/main.css';

Or you can use our babel preset to do this automatically for you.

First install the preset

npm i --save-dev @integration-ds/babel-preset
# or
yarn add -D @integration-ds/babel-preset

In your babel config add the following preset:

{
  "presets": ["@integration-ds/babel-preset"]
}

Now whenever you import one of the @integration-ds components, babel will automatically include the correct CSS file!

๐Ÿค Contributing

To create a new component:

yarn run create

Follow the prompts and you will have a new sub-package for your component!

# First link the package
yarn
# Then start developing
cd components/<Component Name>
yarn run dev

Before submitting a pull request ensure that all of the following work:

  1. yarn build
  2. yarn lint
  3. yarn test

How to use the scripts

Inside the package.json there are a bunch of scripts that this repo uses to run the project in development and to build the project.

Below you can read a description of scripts you should use while developing in this project.

  • yarn dev: Builds everything and starts a storybook with all components
  • yarn test: Run jest over the test files
  • yarn lint: Lint all files using eslint
  • yarn clean: Remove all dependencies, build files, and generated files from the project
  • yarn create: Create a new components withing the repo
  • yarn create:package: Create a new package withing the repo
  • yarn playroom: Start a playroom with all of your components. This is where .snippet files are used
  • yarn size: Determine how your changes effect the size of all sub-packages

Package Level scripts

Every command works at both the monorepo and package level. The means you can run some script from just the package/component for a faster development experience.

  • yarn dev: Build any dependency in the monorepo the component depends on, and start a storybook with just the component
  • yarn test: Test just the component
  • yarn lint: Lint just the component
  • yarn clean: Clean the generated files for just the component
  • yarn size: Determine how your changes effect the size of the component

integration-ds's People

Watchers

James Cloos avatar Andrew Lisowski avatar Tyler Krupicka avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.