{"_id":"design-system-test","_rev":"151-a0b6000723e287d9cfa4510a2676f24f","name":"design-system-test","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"design-system-test","version":"1.0.0","author":"","license":"ISC","_id":"design-system-test@1.0.0","maintainers":[{"name":"venits","email":"tomasz.przybyl.it@gmail.com"}],"dist":{"shasum":"98f2b7de238a4fada51c0f732a1a0075e40c9bec","tarball":"https://registry.npmjs.org/design-system-test/-/design-system-test-1.0.0.tgz","fileCount":9,"integrity":"sha512-zL5daAR6yowmEBQBHse364OGFGProO2hxz1jZ43SJ0sBtQ/1W6aRs62kF/LUOnQ6MeNZntPOoWV1kQfWeZ8LXA==","signatures":[{"sig":"MEUCIDJtDy9yslBxU2+rVIlu67wXEG/IAe8vDah132yfzvChAiEAyES1We0ijy2Ql23TTUr3T4id7X9NPmQzp6pGq2HQrlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":504132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8ryWCRA9TVsSAnZWagAAbQ0P/0OV1wJOyFvoCqRu82GS\npR0qhjbU60Gb6tLRaC3l6v9zouBB6qf11mdvUVAu7FDZuMYnNfcFHZ64bcQF\n9AlcKnT19B7/X/pUeAHlsHBfZG7voAbE6aroUxvmlXF3/yQa7rQQKt12cfGw\nnUtP/r9gvxMT/P1zDp36lNzdIO6Q5kjURSXZvEZ358jWuU1x9lVQTzjaMbmB\ne982S1HsuJxnVTpji2jlCESRoBFqy5fjUQxQxalvDtAVeXDdLFtUEE0s1gXc\n0r9UYtXSuvltRaQhe4abrDv59y/54mSbAcmVgZiy8TmbMz1FA7gB/QzMGUBl\n3h7AmKF8BgLcNnfQkcM+EueqAyu/v4XGuuZ50j9Fx8v95n4hGGhmWlcUqFal\nOI+TZIV/WIc995Yn/rRWmxH5d2ntqGkGWe2hdfWlHxjH6J8qlRARGfhN6zUh\nTtfDg86eNnDCJtpexlMGIp6YEYDD6vCeK51rNPDssYGTJzsNW3g2rNMOIdSJ\nG3vUKftD6WTxdIWvrolN6slmZV4IY9f0zism2VpG67JBqW3R0zATyileTQA3\nGRICHaO6+VT/Gun4qwj89qp/tmMXAqbFYMUk0Umtx6QjqSd6Y2+MPBv6KSre\nWHwkL51ljTltSOAejB5tMBx+V336IgYw73TmhJ/0AOZ3M4fhojPEBVIMf1qi\nOvug\r\n=LB8G\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost/","verbose":true,"setupFiles":["./tests/setupTests.js"],"moduleNameMapper":{"^.+\\.(css|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/tests/fileMock.js"},"snapshotSerializers":["enzyme-to-json/serializer"]},"main":"dist/design-system.cjs.js","style":"dist/design-system.css","module":"dist/design-system.es.js","postcss":{},"typings":"dist/design-system.d.ts","_npmUser":{"name":"venits","email":"tomasz.przybyl.it@gmail.com"},"repository":{"type":"git"},"_npmVersion":"6.4.1","description":"LiveChat Design System React components with css styles","directories":{},"jsnext:main":"dist/design-system.es.js","_nodeVersion":"10.11.0","dependencies":{"classnames":"^2.2.6","@livechat/data-utils":"^0.2.3","react-transition-group":"^2.4.0","react-material-icon-svg":"1.7.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16","react-dom":"16"},"_npmOperationalInternal":{"tmp":"tmp/design-system-test_1.0.0_1542634645610_0.9878214112313548","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-11-19T13:37:25.610Z","modified":"2026-08-31T08:06:45.206Z","0.4.0":"2018-08-20T22:15:01.273Z","0.2.0":"2018-08-20T22:15:01.273Z","0.1.0":"2018-08-20T22:15:01.273Z","0.6.0":"2018-08-20T22:15:01.273Z","0.3.0":"2018-08-20T22:15:01.273Z","0.0.2":"2018-08-20T22:15:01.273Z","0.5.0":"2018-08-20T22:15:01.273Z","1.0.0":"2018-11-19T13:37:25.808Z"},"license":"ISC","repository":{"type":"git"},"description":"LiveChat Design System React components with css styles","maintainers":[{"email":"lukasz@powazka.eu","name":"lukiq"},{"email":"f.jaskolski@livechatinc.com","name":"f.jaskolski"},{"email":"m.sypko+npm@text.com","name":"msypko"},{"email":"admins@livechatinc.com","name":"bamboo-livechat"},{"email":"s.graczyk@text.com","name":"s.graczyk.livechat"},{"email":"mateuszburzynski@gmail.com","name":"andarist"},{"email":"npm@konradk.pl","name":"konradk"},{"email":"k.zajac@text.com","name":"k.zajac"},{"email":"l.krolak@livechatinc.com","name":"lkrolak"},{"email":"hubert.damian.staniszewski@gmail.com","name":"hstaniszewski"},{"email":"support@chatbot.com","name":"chatbot-com"},{"email":"jakub.sikora.en@gmail.com","name":"jakubsikora"},{"email":"jakub.walczak33@gmail.com","name":"wallchuck"},{"email":"walaszczykm@gmail.com","name":"walaszczykm"},{"email":"k.klarzynski@livechatinc.com","name":"klarzynskik"},{"email":"a.kacperczyk@livechatinc.com","name":"ale-kacperczyk"},{"email":"sambor@g.pl","name":"sambor"},{"email":"m.reszke@livechatinc.com","name":"mreszke"},{"email":"b.czop@livechatinc.com","name":"bbartek"},{"email":"m.debski@livechatinc.com","name":"mdebski"},{"email":"m.szwarc@livechatinc.com","name":"shwarcu"},{"email":"jakub@fedyczak.net","name":"jfedyczak"},{"email":"p.grzybek@livechatinc.com","name":"paulinag"},{"email":"o.tkach@text.com","name":"otkach-text"},{"email":"mszpyruk.dev@gmail.com","name":"mszpyruk"},{"email":"dzabrzenski@gmail.com","name":"dzabrzenski"},{"email":"wouga@wouga.info","name":"wouga"},{"email":"m.zielonka@livechat.com","name":"mzielonka"},{"email":"pasieka.grzegorz@gmail.com","name":"alithanar"},{"email":"m.sawicki@livechat.com","name":"msawickilc"},{"email":"jawinskidsgn@gmail.com","name":"jawinski"},{"email":"admins+npm_gh_actions@livechat.com","name":"gh-actions-livechat"},{"email":"o.polec@livechat.com","name":"oliwiapolec"},{"email":"arturfracala@gmail.com","name":"arturfracala"},{"email":"m.teczynski@livechat.com","name":"m.teczynski"},{"email":"b.olchowka@livechatinc.com","name":"bolchowka"},{"email":"b.stopyra@livechat.com","name":"bstopyra"},{"email":"r.kawka@livechat.com","name":"rkawka"},{"email":"j.pyzio@livechat.com","name":"jakubpyzio"},{"email":"joanna.sikora@livechat.com","name":"joanna.sikora"},{"email":"a.duziak@livechat.com","name":"artur-livechat"},{"email":"p.zawadzka@livechat.com","name":"p.zawadzka"},{"email":"w.fabjanczuk@text.com","name":"w.fabjanczuk"},{"email":"l.jeziorski@outlook.com","name":"lukaszjeziorski"},{"email":"p.stepien@livechat.com","name":"pastepi"},{"email":"wojciechdudek.gliwice@gmail.com","name":"wojciechdudek"},{"email":"lucas.sajdak@gmail.com","name":"l.sajdak"},{"email":"mateuszromek.net@gmail.com","name":"mrateo"},{"email":"michalwarcholinski@gmail.com","name":"mwarcholinski"},{"email":"tadekrzewuski@gmail.com","name":"tadekrzewuski"},{"email":"m.paszowski@livechatinc.com","name":"michalpaszczakowski"},{"email":"h.wyszynski@text.com","name":"hubert-wyszynski"},{"email":"j.gabory@text.com","name":"yrobag"},{"email":"kurzawa.patrycja@gmail.com","name":"pandalajka"},{"email":"m.gut@text.com","name":"gutmmm"},{"email":"a.cobo@text.com","name":"a.cobo"},{"email":"l.kierepka@text.com","name":"lkierepka-text"},{"email":"k.jarzyna@text.com","name":"k-jarzyna-text"},{"email":"filip.szczechowiak@gmail.com","name":"apocomilogin"},{"email":"k.homziuk@text.com","name":"karol-homziuk"},{"email":"l.myslinski@text.com","name":"lm-text"},{"email":"pawelwolkowskibass@gmail.com","name":"bassisto"},{"email":"a.bogacki@text.com","name":"abogacki-text"},{"email":"w.zbrozek@text.com","name":"wojzbr"},{"email":"l.wac@text.com","name":"waclukasz"},{"email":"k.balda@text.com","name":"kamilbalda"},{"email":"d.hrycalik@text.com","name":"dhtext"},{"email":"w.mrozek@text.com","name":"mrozekw"},{"email":"k.basiukajc@text.com","name":"textkamil"},{"email":"d.czerniakiewicz@text.com","name":"damiancz"},{"email":"b.stiskun@text.com","name":"b.stiskun-text"},{"email":"artospaj@gmail.com","name":"artospaj"},{"email":"t.guzik@text.com","name":"tguzik-text"},{"email":"n.mialik@text.com","name":"nataliamialik"},{"email":"v.kozlovskyi@text.com","name":"vladko_text"},{"email":"a.mucha@text.com","name":"amucha-text"}],"readme":"# LiveChat Design System\n\nReact components and css styles library for use in Livechat products.\nBy creating a uniform system, we want to deliver a harmonious experience to our customers.\nFor someone who’s already used one of our products, the transition to another one would be smooth and intuitive.\n\n## Table of Contents\n\n1. [Installation](#installation)\n2. [Contribution](#contribution)\n      1. [Getting started](#getting-started)\n      2. [NPM Scripts](#npm-scripts)\n      3. [Developing a Component](#developing-a-component)\n      4. [NPM Link](#npm-link)\n      4. [Document a Component](#document-a-component-with-styleguidist)\n      5. [Tests with Jest](#running-tests)\n      6. [Check tests coverage](#check-tests-coverage)\n      7. [Try the bundle](#try-the-bundle)\n3. [Changelog](CHANGELOG.md)\n\n## Installation\nTo install LiveChat Design System Components Library with npm, run the following command:\n```\nnpm install --save @livechat/design-system\n```\nLibary has separate css file with components styles. You need to import it in your app as well. You can find it in `node-modules/@livechat/design-system/dist/design-system.css`\n\n\n## Contribution\n### Getting started\n* Install [Node6 or Node8](https://nodejs.org/en/), preferably using [nvm](https://github.com/creationix/nvm)\n* Clone this repository: `git clone https://github.com/livechat/design-system` (or download zip)\n* CD to project directory: `cd design-system`\n* Install dependencies: `npm install`\n\n### NPM Scripts\n* `styleguide`: run styleguidist server with eslint at http://localhost:6060\n* `styleguide:build`: run styleguidist build\n* `start`: bundles the library with watch flag, usefull for development with external app instead of styleguidist\n* `build`: bundles the library with rollup to the dist dir\n* `prebuild`: removes build directory (before build script)\n* `prepare`: runs both before the package is packed and published and on local npm install\n* `predeploy`: runs before deploying design system guide to github pages\n* `deploy`: deploy design system guide to github pages\n* `test`: runs tests\n* `test:coverage`: runs tests with coverage report\n* `test:watch`: runs tests in watch mode\n\n### Developing a Component\nA typical UI component should comply with the following guidelines:\n\n* If it has no state, it should be declared as a [Dumb Component](#dumb-component).\n* Unless having another team member approval, all components should have `className` and `style` props declared.\n* It should have [tests](#running-tests).\n* It should have [Styleguidist examples](#document-the-component-with-styleguidist) about its usage.\n* All code must follow the configured code style.\n* For any design concept, follow styles from [Zeplin](https://zpl.io/a8K8YnE).\n* Component example file should contain html markup for aplications/websites which doesn't use React\n* Component should use scss style file\n* Css should be inspired by BEM, but doesn't need to follow it strickly \n* Style file should use defined sass variables, mixins etc.\n* Component should have typescript typings\n\nYou can view and test your component in two ways:\n- use styleguidist as development enviroment for your component\n- use npm link feature to see it in your app\n\n### NPM Link\nYou should start with executing these two commands:\n- design-system library root directory -> run `npm link`\n- app root directory -> run `npm link @livechat/design-system`\n\nYou can run build script after new changes (or use npm start) or if you are using webpack just add to webpack.config.js few lines to see changes without unnecessary bundling library:\n\n```\nconst designSystemComponentsPath = fs.realpathSync(\n  path.resolve(__dirname, '../node_modules/@livechat/design-system/src')\n);\nconst designSystemDistPath = fs.realpathSync(\n  path.resolve(__dirname, '../node_modules/@livechat/design-system/dist')\n);\n...\n  resolve: {\n    alias: Object.assign({}, {\n      '@livechat/design-system/dist': designSystemDistPath,\n      '@livechat/design-system': designSystemComponentsPath\n    }),\n  },\n...\n```\nThat way you will need to install classnames and configure css modules for library \n(in example new webpack config which runs dev server after command `npm start:ds`:\n```\n  rules: [\n    {\n      test: /\\.css$/,\n      include: [designSystemComponentsPath],\n      use: ExtractTextPlugin.extract({\n        fallback: 'style-loader',\n        use: [\n          {\n            loader: 'css-loader',\n            query: {\n              modules: true,\n              localIdentName: 'lc_[local]'\n            }\n          },\n          {\n            loader: 'postcss-loader',\n            options: {\n              ident: 'postcss',\n            }\n          },\n        ],\n      }),\n    },\n  ]\n```\n\nIf you want to learn more about npm link read [this basic article](https://poznajprogramowanie.pl/enhance-your-development-workflow-with-npm-link/)\n\n### Document a component with styleguidist\n* `npm run-script styleguidist`\n* Open a browser at `http://localhost:6060`\n\nStyleguidist monitors the `<root-dir>/src/components` directory for components. Nevertheless, examples are user-defined in a `<Component-name>.md` file within the subdirectory of the component. Remember to add your new component in `setup.js` to see it in docs.\n\n### Running tests\nUnit and snapshot tests, uses Jest as test runner.\n* `npm run test or npm run test:watch` for run the test optional with watching mode\n\n### Check tests coverage\nIstanbul is used for code coverage and reporting, so:\n* `npm run coverage` and check your testing skills\n\n### Try the bundle\n* `npm run build` for bundle library\n","readmeFilename":"README.md"}