Skip to content

Instantly share code, notes, and snippets.

@mjackson

mjackson/package-info.json

Created February 6, 2018 00:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mjackson/20a337494ef893b260294154e8e5e2c5 to your computer and use it in GitHub Desktop.
Save mjackson/20a337494ef893b260294154e8e5e2c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
package-info.json
{
"_id": "@dollarshaveclub-engineering/ui",
"_rev": "2-5773c0c926d450044de3c87bc8233fad",
"name": "@dollarshaveclub-engineering/ui",
"description": "DSC Web UI",
"dist-tags": {
"latest": "2.6.4"
},
"versions": {
"2.6.3": {
"name": "@dollarshaveclub-engineering/ui",
"version": "2.6.3",
"description": "DSC Web UI",
"repository": {
"type": "git",
"url": "git+https://github.com/dollarshaveclub/ui.git"
},
"scripts": {
"build": "gulp",
"build-watch": "gulp watch",
"eslint": "eslint .",
"stylelint": "stylelint src/**/*.scss --syntax scss",
"lint": "npm run eslint && npm run stylelint",
"prepublish": "node scripts/build.js",
"start": "open http://localhost:8001/docs/ && python -m SimpleHTTPServer 8001",
"standardize": "web-standard node",
"update-repos": "./scripts/update-repos.sh",
"start-storybook": "start-storybook -p 6006 -c ./storybook -s ./storybook/static",
"build-storybook": "build-storybook -c ./storybook -s ./storybook/static -o ./docs",
"prepublishOnly": "npm run build"
},
"files": [
"dist/**/*",
"src/**/*",
"components/**/*"
],
"author": {
"name": "Jacob Kelley",
"email": "jacob.kelley@dollarshaveclub.com"
},
"license": "ISC",
"bugs": {
"url": "https://github.com/dollarshaveclub/ui/issues"
},
"homepage": "https://github.com/dollarshaveclub/ui#readme",
"devDependencies": {
"@dollarshaveclub/nodejs-server": "^1.1.1",
"@storybook/addon-actions": "^3.2.12",
"@storybook/addon-knobs": "^3.2.12",
"@storybook/addon-links": "^3.2.12",
"@storybook/addon-notes": "^3.2.12",
"@storybook/addon-options": "^3.2.12",
"@storybook/react": "^3.2.12",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^19.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-react-app": "^3.0.1",
"eslint": "^3.19.0",
"eslint-config-dollarshaveclub": "^2.2.1",
"express": "^4.15.3",
"gulp": "^3.9.1",
"gulp-banner": "^0.1.3",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"pretty": "^2.0.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"stylelint": "^8.0.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-order": "^0.6.0",
"stylelint-scss": "^1.5.1",
"web-standard": "git+ssh://git@github.com/dollarshaveclub/web-standard.git"
},
"dependencies": {
"babel-runtime": "^6.23.0",
"classnames": "^2.2.5",
"react-syntax-highlighter": "^5.7.1"
},
"gitHead": "daeda0cbd26a9c9d0f0afce216b8f2d27a64ee9c",
"_id": "@dollarshaveclub-engineering/ui@2.6.3",
"_npmVersion": "5.5.1",
"_nodeVersion": "8.7.0",
"_npmUser": {
"name": "dollarshaveclub-engineering",
"email": "engineering.services@dollarshaveclub.com"
},
"dist": {
"integrity": "sha512-YKwcTKGyZVTp8r7g0MwDEYGHSw+eCPmf6wd3gXaLHW+MOieEZeC0AOhGZN44EkBgvYxvBzGPjLaN16iWc7C8Jw==",
"shasum": "b2931c4b9ab5ace3ff6cf06ae791b9f91f87d561",
"tarball": "https://registry.npmjs.org/@dollarshaveclub-engineering/ui/-/ui-2.6.3.tgz"
},
"maintainers": [
{
"name": "dollarshaveclub-engineering",
"email": "engineering.services@dollarshaveclub.com"
}
],
"_npmOperationalInternal": {
"host": "s3://npm-registry-packages",
"tmp": "tmp/ui-2.6.3.tgz_1511938612369_0.338761999970302"
},
"directories": {}
},
"2.6.4": {
"name": "@dollarshaveclub-engineering/ui",
"version": "2.6.4",
"description": "DSC Web UI",
"repository": {
"type": "git",
"url": "git+https://github.com/dollarshaveclub-engineering/ui.git"
},
"scripts": {
"build": "gulp",
"build-watch": "gulp watch",
"eslint": "eslint .",
"stylelint": "stylelint src/**/*.scss --syntax scss",
"lint": "npm run eslint && npm run stylelint",
"prepublish": "node scripts/build.js",
"start": "open http://localhost:8001/docs/ && python -m SimpleHTTPServer 8001",
"standardize": "web-standard node",
"update-repos": "./scripts/update-repos.sh",
"start-storybook": "start-storybook -p 6006 -c ./storybook -s ./storybook/static",
"build-storybook": "build-storybook -c ./storybook -s ./storybook/static -o ./docs",
"prepublishOnly": "npm run build"
},
"files": [
"dist/**/*",
"src/**/*",
"components/**/*"
],
"author": {
"name": "Jacob Kelley",
"email": "jacob.kelley@dollarshaveclub.com"
},
"license": "ISC",
"bugs": {
"url": "https://github.com/dollarshaveclub/ui/issues"
},
"homepage": "https://github.com/dollarshaveclub/ui#readme",
"devDependencies": {
"@dollarshaveclub/nodejs-server": "^1.1.1",
"@storybook/addon-actions": "^3.2.12",
"@storybook/addon-knobs": "^3.2.12",
"@storybook/addon-links": "^3.2.12",
"@storybook/addon-notes": "^3.2.12",
"@storybook/addon-options": "^3.2.12",
"@storybook/react": "^3.2.12",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^19.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-react-app": "^3.0.1",
"eslint": "^3.19.0",
"eslint-config-dollarshaveclub": "^2.2.1",
"express": "^4.15.3",
"gulp": "^3.9.1",
"gulp-banner": "^0.1.3",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"pretty": "^2.0.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"stylelint": "^8.0.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-order": "^0.6.0",
"stylelint-scss": "^1.5.1",
"web-standard": "git+ssh://git@github.com/dollarshaveclub/web-standard.git"
},
"dependencies": {
"babel-runtime": "^6.23.0",
"classnames": "^2.2.5",
"react-syntax-highlighter": "^5.7.1"
},
"gitHead": "daeda0cbd26a9c9d0f0afce216b8f2d27a64ee9c",
"_id": "@dollarshaveclub-engineering/ui@2.6.4",
"_npmVersion": "5.5.1",
"_nodeVersion": "8.7.0",
"_npmUser": {
"name": "dollarshaveclub-engineering",
"email": "engineering.services@dollarshaveclub.com"
},
"dist": {
"integrity": "sha512-gCMizXX3S0oZLKQEHdZsvoFlTgVBV9P4dBeL+NOzAwRRZhNCZDy60RdH/KvZm40Vq0vEQm3yhtHV0QA2PW7p/g==",
"shasum": "8f712c2163ceef3fad8a148495bfbf4451fe0b5a",
"tarball": "https://registry.npmjs.org/@dollarshaveclub-engineering/ui/-/ui-2.6.4.tgz"
},
"maintainers": [
{
"name": "dollarshaveclub-engineering",
"email": "engineering.services@dollarshaveclub.com"
}
],
"_npmOperationalInternal": {
"host": "s3://npm-registry-packages",
"tmp": "tmp/ui-2.6.4.tgz_1511938721141_0.14013323397375643"
},
"directories": {}
}
},
"readme": "<img src=\"http://i.imgur.com/J5hKDEP.png\">\n\n[![CircleCI](https://circleci.com/gh/dollarshaveclub/ui/tree/master.svg?style=svg&circle-token=3ed53bb262ab4c466a49bc3c481726a098fa2765)](https://circleci.com/gh/dollarshaveclub/ui/tree/master)\n\nUI is a CSS framework for interfaces commonly built at Dollar Shave Club. [Jump to the code here.](/dist/ui.css) or [dive into the interface](http://dollarshaveclub.github.io/ui/).\n\n* [Guide](http://dollarshaveclub.github.io/ui/)\n* [Features](#features)\n* [Installing](#installing)\n* [Developing](#developing)\n* [Linting](#linting)\n* [Deploying](#deploying)\n* [Contributing](#contributing)\n\n***\n## Features\n* Easy to include, just use a `link` tag.\n* Small, clocking in at roughly <span class=\"size\">`25.6kb`</span>.\n* Create composable interfaces that are easy to make your own.\n* Technology/Framework Agnostic, but still developer friendly.\n* Generous documentation and examples.\n* Source of truth for DSCs current standards in design.\n\n## Installing\n\n#### HTML\nThe artifact of `ui` is a CSS file. Place the following code in the `head` of your document.\n```html\n<!-- For including the local development version -->\n<link rel=\"stylesheet\" href=\"/face-assets/ui/local/ui.css\">\n\n<!-- For including a particular version -->\n<link rel=\"stylesheet\" href=\"/face-assets/ui/1.0.0/ui.css\">\n```\nIf integrating with `face-assets`, you may include that exact URL which will enable automatic integration with every environment, including local.\n\nIf you are not integrating with `face-assets`, you can include the CSS file in your application however you see fit.\n\n#### NPM\nInstall UI via NPM\n```bash\nnpm i --save-dev git+ssh://git@github.com/dollarshaveclub/ui\n```\nYou are free to include `node_modules/ui/dist/ui.css` in your project however you see fit.\n\nIf you wish to import it via SASS, you must first specify the `ui` scss `src` folder as an `includePath` in your sass build configuration\n```javascript\n// Your sass build may be different. Reference SASS includePaths for more information\nconst sassOptions = {\n includePaths: [ './node_modules/ui/src/' ],\n}\n```\nThen you may import variables or mixins via `sass`\n```sass\n// Import UI Config or Mixins\n@import \"ui/config/colors\"\n@import \"ui/mixins/breakpoints\"\n```\n\n## Developing\nDeveloping with `ui` locally is easy.\n```sh\nnvm use # Ensure you're on the correct version of node\nnpm i # Install node dependencies\nnpm run build # Compile CSS and documentation\nnpm run build-watch # Builds & watch for changes\nnpm run prepublish # Builds UI react components and places them in dist/components\nnpm start # Serve documentation page\n```\n\nIf you have [`face-assets`](http://github.com/dollarshaveclub/face-assets) installed in your local dev environment, the build task will copy the CSS files there automatically which will allow you to reference the latest local build file from a simple URL.\n\n## Building and Using UI React components\nIn order to use the react components and render them in storybook or consuming react app, you will need to run `npm run prepublish`. `Prepublish` runs a build task to be able to use it as a dependency in the consuming apps.\n\nExample on how to include the component in your react components:\n```\nimport BreadcrumbsLarge from 'ui/dist/components/breadcrumbs/large'\n```\n\n## Linting\nLinting is required to merge any branch to `master`. They not only dictate any style guides we'd like to adhere to, but help enforce various rules such as nesting depth and use of hex colors.\n\nThe linting rules are still a work in progress. Please read the [contributing section](#contributing) if you want to add or modify any rules.\n\n```sh\napm install linter-stylelint # Install the StyleLint for Atom\nnpm run lint # Run all linters\nnpm run eslint # Lint JavaScript\nnpm run stylelint # Lint SCSS\n```\n\n## Deploying\nThis process is nearly identical to deploying `face-engine`.\n\n1. Make your changes in a feature branch while being sure to update the version number in `package.json`. Also be sure to commit all `dist` files!\n1. Merge to master through GitHub\n1. Wait for circle job to create a tag for the new UI changes\n1. In `face-assets`, run `npm run download-ui`, commit the resulting files, and deploy!\n\n## FAQ\n**How do I use this?**\n* _Include the CSS file into your application in any way you see fit, or refer to the install section for more information. Then just use the class names and DOM structures provided in the documentation_.\n\n**Why does this exist?**\n* _Core visual components should be standardized. This means that there is a right way and a wrong way to style certain things, which makes it much easier to get right than it does to get wrong. CSS is hard, and this set of styles aims to provide consistency and harmony to compensate for that._\n\n**Why SCSS?**\n* _SCSS was chosen because it is lexicographically easier to parse. This means that more libraries can interpret our styles and provide constructive feedback on things such as specificity, redundancy, and common predetermined conventions. SCSS = Acorn as ES6 = Babel. AST FTW._\n\n**I am on a different platform than the web and cannot adhere to these standards. What should I do?**\n* _The styles demonstrated in the kitchen sink are exemplary of designs current standards. While each platform's requirements may differ, it is worthwhile to consider the holistic intentions design has set forth. If you feel some things are strangely out of place, [consider opening a pull request](https://github.com/dollarshaveclub/ui/issues/new) to share your needs._\n\n**BEM is love. BEM is life. Right?**\n* _The core difficulties most of us face with CSS are the same things that makes it so powerful; that is largely the cascade. BEM is not meant to be a dogmatic solution to all of our issues. It provides a set of rules that enable us to develop interfaces in equally powerful ways while still managing the cascade._\n\n* _Not every classname will follow BEM conventions, but that is ok. Most classes tend to do so where applicable. Considerate code review helps thwart oddly specific rules, but also allow strategic advantages in the code._\n\n**I want access to the variables and mixins UI provides, not the CSS**\n* _Not a problem. Simply install `ui` with any package manager that supports git or github. Then simply build the `src/index.scss` file or build your own `scss` file that imports the desired `ui` files._\n\n## Contributing\nAnyone may contribute to `ui` as long as the proper checks have been passed. If you're interested in helping with the migration _to_ `ui`, anything in the [`UI - Transition`](https://github.com/dollarshaveclub/face-web/projects/1) project is \"up for grabs\". In favor of authoring code that meets UI standards, consider opening an issue or discussing with any UI counterparts beforehand.\n",
"maintainers": [
{
"name": "dollarshaveclub-engineering",
"email": "engineering.services@dollarshaveclub.com"
}
],
"time": {
"modified": "2017-11-29T06:58:41.262Z",
"created": "2017-11-29T06:56:52.519Z",
"2.6.3": "2017-11-29T06:56:52.519Z",
"2.6.4": "2017-11-29T06:58:41.262Z"
},
"homepage": "https://github.com/dollarshaveclub/ui#readme",
"repository": {
"type": "git",
"url": "git+https://github.com/dollarshaveclub-engineering/ui.git"
},
"author": {
"name": "Jacob Kelley",
"email": "jacob.kelley@dollarshaveclub.com"
},
"bugs": {
"url": "https://github.com/dollarshaveclub/ui/issues"
},
"license": "ISC",
"readmeFilename": "README.md",
"_attachments": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment