@preply/ui NPM | npm.io

7.0.0 • Published 30 days ago

Install

Weekly downloads

8,088

License

ISC

Repository

Last release

30 days ago

Preply React UI library

Usage

You can normally import needed components to your app like import { Button } from '@preply/ui'

But ideally (and required if u want to use MUI based components like Avatar) you should firstly wrap your react app with Provider (exported from @preply/ui), which consist of:

reset css
some global styles and font
Theme provider for MUI components (see required note below)

If u use MUI-based components (like Avatar) - make sure u have next line on the top of your element): <noscript id="jss-insertion-point"></noscript> - it will escape u the need of having redundant &&& in styles of styled-components when adjusting those components. And don't worry, MUI's styles are scoped with hashes - similar like SC does.

Contributing

Run dev env (Storybook)

Run npm start

Components

Add your component in client/@preply/ui/src
Create a {COMPONENTNAME}.stories.tsx to make it visible in storybook
Make it exportable in client/@preply/ui/src/index.js

Icons

To add your custom icon (one colored), add it to client/@preply/ui/src/SvgIcons Make sure your svg icon doesn't have fill or any color attribute and it is possible to set it color via css e.g. fill: red
Make it exportable in client/@preply/ui/src/SvgIcons/index.js
You can access this icon in your project via importing Icon from UI and use it Icon.SomeIconName

Publishing

We have CD flow on Jenkins for our npm libs So whenever you need to publish lib: 1) Increment version in @preply/ui/package.json guide what version numbers mean 2) 2.1) client-<service_name>-<version> for example: client-ui-1.2.3 or client-chat-1.2.3 or client-video-1.2.3 for LATEST tag 2.2) client-<service_name>-<version>-beta for example: client-ui-1.2.3-beta for BETA tag 3) schedule tag build in jenkins: https://jenkins.preply.com/job/apollo/view/tags/ Please publish LATEST tag from master only, or at least merge PR in master just after you published tag, to avoid situation that LATEST tag code not presented in master

Find the most recent (time-wise, not semver-wise) storybook here: storybook.preply.org.

@material-ui/core @material-ui/styles @types/color classnames color jss prettier prop-types rc-tooltip react-modal react-rating react-router-dom react-select style-inject

@infinitebrahmanuniverse/nolb-_pre @everything-registry/sub-chunk-736 @zalastax/nolb-_pre

0.0.0-beta-d24bd80722c98f7d8ffeccbf16cc9c4f9e01a719

1 month ago

0.0.0-beta-8a469e41af993184839457fae880894ccb11ecbd

1 month ago

0.0.0-beta-de5e456fc15ac960bd1da8aabe1c9a269b24db1c

1 month ago

0.0.0-beta-40a2fafdb9e4be4ad78f5f03121dd993e5d7bd2d

30 days ago

0.0.0-beta-c771427a5a8224f2cf16ece7e9d331c43f20d097

30 days ago

0.0.0-beta-97286c63f9afea5b21c9ba6f196d605b9ee88a5e

30 days ago

0.0.0-beta-b3a33f281754304c2bea58e2a4433d75708757d6

30 days ago

0.0.0-beta-af59de691db6e0d3acd9846fee95ea8fce975ab0

1 month ago

0.0.0-beta-eda0b79f7b284beec3e2bdc31639a86f9231686f

30 days ago

30 days ago

0.0.0-beta-459d8de950ddf91066f88fa52a7d32ce4f34dc4d

30 days ago

0.0.0-beta-3910a1b60e0c45f419e0dd25a7fbd366e4b4ed41

30 days ago

0.0.0-beta-6ce02c0317b75617c438d200627786e2b9434326

30 days ago

0.0.0-beta-d46ec629d928d880e31b06b2e9afa259cd2598e0

30 days ago

0.0.0-beta-90f49f3f4abff9a355f9f0b4bd2b99f5dd0600e2

1 month ago

0.0.0-beta-6f01c73e8455290097eddf8061da435b5057f2f3

1 month ago

0.0.0-beta-5a1d88c681d704cd22616deed9aa2624313577ef

1 month ago

0.0.0-beta-d69637598579241270e12f2b4e3f277faa6d876e

1 month ago

0.0.0-beta-27d1fca6dbf62c7adcb3982e989a3101a9acaf31

1 month ago

0.0.0-beta-09778ae59af17e5701c394cdf494e09ea5707416

1 month ago

0.0.0-beta-69fae977ef75b67fe9b38717af22755cc7c41c8a

1 month ago

0.0.0-beta-705442e8669711c5b09f3016bc50476adc72cb4b

1 month ago

0.0.0-beta-6e16cd5a9653cf1cdc5f2b3aa58e497fcfca8f72

1 month ago

0.0.0-beta-557a12efdb9c8080afbd0e62f67cca2fed03fe4d

1 month ago

0.0.0-beta-734239f18a560a28a891222a06660fcc7bfe7c3e

1 month ago

0.0.0-beta-a48f3055916e6beed78f852fb95c997573c3442f

1 month ago

0.0.0-beta-7bb135919ec21ef3eaa74940367e7efdb68fef7c

1 month ago

0.0.0-beta-dfa02141b9eeb3b4bbb2f46c000da28c282d8929

1 month ago

0.0.0-beta-45a78e43016924e82713c3a9417ead00396ba0dd

1 month ago

0.0.0-beta-58f279189af08aa5521db1abbf59de16a55d12e9

1 month ago

0.0.0-beta-b99f246e61d69ed7dfdca66deda9ac41805482fc

1 month ago

0.0.0-beta-f1bd51309536441d613a8d99b83a7b340d7bc70d

1 month ago

0.0.0-beta-5aff4e3adcdc932dca5b7bb262b18c80a3039951

1 month ago

0.0.0-beta-1c5fd7b848320ece5c535ce4572a31060c4f4b5f

1 month ago

0.0.0-beta-44b8e29dba7db9728c8ee712b110b9332aff9ce2

1 month ago

0.0.0-beta-f660afc2c30c13f6c5ae7765654090211c221cdf

1 month ago

0.0.0-beta-a76fada6d385cd940efafff00a9204b9c0e35033

1 month ago

0.0.0-beta-16a0bf940be6aeb9bd78e1c3be9c49453321669a

1 month ago

0.0.0-beta-83361121503395f52a098304abe69a52bf047cbd

1 month ago

0.0.0-beta-4205638c34d7a39d7dfa617b404cabaafbdc2241

1 month ago

0.0.0-beta-e9324fef743580c252eb09889d24bca3815431d9

1 month ago

0.0.0-beta-1f11064f8dec0bf4c59c9486edc02eeef5f78134

1 month ago

0.0.0-beta-472a29f9d76af2383863658d4076c08cdc20d1dc

1 month ago

0.0.0-beta-34336fed7d93f5c4cc50c87ecc62b0954f77b676

1 month ago

0.0.0-beta-80c8235681c149545073fbd5a52cb1ec5579010a

1 month ago

0.0.0-beta-05e2f10c22444a66ac2088104df328189f3728ca

1 month ago

0.0.0-beta-dbf6aafda5c16637cc16cb7b0827b63c9f81c308

1 month ago

0.0.0-beta-715eb05e6d8660380823d3f12efc8168639f2494

5 months ago

0.0.0-beta-bab241dafa3d2af8b65b7daeedae07982d4f916c

7 months ago

0.0.0-beta-4fda76767d476bad92cde833fc3a5b021fe504d4

7 months ago

0.0.0-beta-0ec1bfb7d2090bb7f8cd75b49b298699afbd9e43

7 months ago

0.0.0-beta-a889d956469f486755b9052429d266db201daccd

7 months ago

0.0.0-beta-26fc745b4aa144de0df627d6f2785938fca93124

7 months ago

0.0.0-beta-1ccb5346bcb442d973dd3f679366355b11285d86

7 months ago

0.0.0-beta-7afb28d8184b8b367ff006aea8460cb28978f500

10 months ago

0.0.0-beta-3117992639fc9d48008e65e1f06527f3c0b4dac5

7 months ago

1 year ago

0.0.0-beta-c7870629c951a759fa29e664207463275f355454

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-beta-3ec0c8b3dcd03163a9e5821bc09eed719c4cb3ec

1 year ago

1 year ago

0.0.0-beta-aee007f4a7d8912e07237b8a4e82fee2b929ff91

2 years ago

2 years ago

0.0.0-beta-3a295fac58dcf25f1aa2799c72a1272c51fc8c1e

1 year ago

0.0.0-beta-66f702bdcbda42ab97e5f18ec0108a9ffaaac847

2 years ago

0.0.0-beta-cb046653a6d7b2ca43eae9d858b1d279ab8ca83f

2 years ago

0.0.0-beta-6d40d4409677c8d2d11d1238ed6e89360e5766fe

2 years ago

0.0.0-beta-579727f6ec4484963f163c252bd68a24b16c3e3d

2 years ago

0.0.0-beta-c52df8abd6b4ddcc9296639dfa62aa667ed865bf

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-beta-99cd2d2cedc8f3d9542d2f68cc3ca4ba7efabcbd

3 years ago

0.0.0-beta-3fe2139764584cd9562d1cdba74715ef3eeb8f5e

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-beta-60253b2018cd6d5f972feeeb9d42489562cc6873

3 years ago

3 years ago

0.0.0-beta-851a3617e59ec966edb1826cfedb9482e08c0572

3 years ago

0.0.0-beta-374f286729ef95ea3f2b1adf553876da88845b2c

3 years ago

0.0.0-beta-09fcf6e361a5ffab50f09b720b422427fddb9146

3 years ago

0.0.0-beta-9ded75da9b0633621c17a24cd19e6913a72f0f8a

3 years ago

0.0.0-beta-01e067b0f9030d5ff01f697f0236e0034264e0a7

3 years ago

0.0.0-beta-3b10a364a3e054243a1d1846abb36e62eaebbff6

3 years ago

0.0.0-beta-044ed37061c0e16683b79e298eb16aca5fc4700c

3 years ago

3 years ago

3 years ago

0.0.0-beta-e010aab6ddff3b1d135ad5001bab8e2a7a569a0b

3 years ago

3 years ago

0.0.0-beta-c71f3c52da967a90a67bcc68f2d9d5db84471c53

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-beta-8e12b5bef1a8e61e642be1a42609c34586ebd8ae

3 years ago

0.0.0-beta-d4c34aade7b2ed5a62002e33e0c18eb64d6fbca4

3 years ago

0.0.0-beta-e05658f6676f84d8577f168013fb99d2b6d7df49

3 years ago

3 years ago

3 years ago

0.0.0-beta-2c7c7bbcefda29752c942cbb8ca8ef357325b7e6

3 years ago

0.0.0-beta-6ee6562ba4971865620fc3e5ff550c8698942a9a

3 years ago

0.0.0-beta-938bc1d705e0158a8a4fa01d769f4cd61cc75e8f

3 years ago

0.0.0-beta-d33345bef258a183f659bbc689d76bebf86b892e

3 years ago

0.0.0-beta-d8e88d373e74c8a7e4aec1a8d3eee00ac4043ac4

3 years ago

0.0.0-beta-a574d0a37cfe78f41f009b30c6bb6e16b151ce10

3 years ago

0.0.0-beta-3a3dcf666880b6810a806b54c783001d22bb937c

3 years ago

0.0.0-beta-819368742df0a33525c74bb728bde70e5f727962

3 years ago

0.0.0-beta-c5448ae325aff45f5de75b7265e559a31bc1ba53

3 years ago

0.0.0-beta-32544443a3e04a973728026627e73a80dfeee99f

3 years ago

0.0.0-beta-7c1ac629ad220550ecabd6343d3f6d0612f9e070

3 years ago

3 years ago

0.0.0-beta-3d44a7e92f439459ff0a92e44181f2c6cfd75e81

3 years ago

0.0.0-beta-fb1459f85e8be161d4f7e98925cf42d20d4ed2a2

3 years ago

3 years ago

3 years ago

0.0.0-beta-d00ebb64a35662fef53a46f2dbc53e107fa48a0e

3 years ago

3 years ago

0.0.0-beta-6e86feb546ef0151703f82bae7b9c93e6d3353cd

4 years ago

4 years ago

0.0.0-beta-d64dd937512a04c9d4c96c8f4813f751f1e4335f

4 years ago

0.0.0-beta-f2c9298154ce32a265211a7e68c10f72bbf31e72

4 years ago

4 years ago

0.0.0-beta-36e0c370342bf71d898229fb4b3be973a3a3e182

4 years ago

0.0.0-beta-b678e8b974eb51df326cbbee4599009c81183107

4 years ago

0.0.0-beta-afe808bd4464ad4c934691c26b2b9edc8900d0e9

4 years ago

0.0.0-beta-6a9bb000006e5937aa40c22b98eedadc3fb5c9e5

4 years ago

0.0.0-beta-57216126f270f831801365882c3211bb62a1a01f

4 years ago

0.0.0-beta-e747f87ed89f8c78f3db004a3df43a05faedb32d

4 years ago

0.0.0-beta-f10fab75d2332b8e554e5e96b5d8ca76c612bc69

4 years ago

4 years ago

0.0.0-beta-4c1f24cc4c3b4be415b9f611c0f4de73cb59f221

4 years ago

0.0.0-beta-7736db120333f6af663eb7c4148cbf9ebb658321

4 years ago

0.0.0-beta-8e64d6b3e6e694ed6a9bbd1efe5bf058ff91872f

4 years ago

0.0.0-beta-5070bd556d424ccdcddd2279b47d868b3d063e40

4 years ago

0.0.0-beta-2c4e72aa41a75d39adcf3cbc39295d6fa924fa7b

4 years ago

0.0.0-beta-f28bcf178a861a3867117882e9f3714c915b9271

4 years ago

0.0.0-beta-d6ddd79418189accb5e74c15590382a4c0eac58a

4 years ago

0.0.0-beta-aea108bf6e3a94f04a1a6885825e7602c7279abc

4 years ago

0.0.0-beta-58e3429543c9795e724d50119110215b476b997a

4 years ago

0.0.0-beta-87714e31feee9e92fb0bd99ad419db111f575d66

4 years ago

0.0.0-beta-6f9b99757de51cdf5f02076ac0eedd75621f1a36

4 years ago

0.0.0-beta-8527788ac0f4672862b282fee8aed9cb175eb5c6

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.0-beta-ad9e040e2f046e383605533a9a456d65db58b98f

4 years ago

0.0.0-beta-7dbfc7b35bea866eb7354d5c320e94a8a63cb62d

4 years ago

0.0.0-beta-5aef3e3a34721375b126c2bf9d6950286ae8ae3d

4 years ago

0.0.0-beta-361d4c2b9411c6bbfe72d1e5f33b711e8ee497eb

4 years ago

0.0.0-beta-6205b754d9ca956cf56808cdd1b6e55a1c553cb8

4 years ago

4 years ago

0.0.0-beta-0ac3ffbefe5658d06d1a76f00862509f67996fd1

4 years ago

0.0.0-beta-4936b03205075ae2b665ce6e65d39c69aa0c7623

4 years ago

0.0.0-beta-900d6d8c9663ae4b4f6d7b0dd25304108a12dd04

4 years ago

0.0.0-beta-4177b27e333802f96a3f892adecb099cdf610283

4 years ago

4 years ago

0.0.0-beta-d5c7ae2ec571fa1fcd1e9f900f0b684741f5a93b

4 years ago

0.0.0-beta-a243eb0865a10ac17fe72b19fd03464a5bfc4016

4 years ago

0.0.0-beta-64336c04a3d9fad56fa054f39d4c1b232c2afdee

4 years ago

0.0.0-beta-d21522deefb18bacb95541fae4d88674a2fd6222

4 years ago

0.0.0-beta-dd42ec3a5ded44f552ee00e9196a72a06a5b6ab1

4 years ago

0.0.0-beta-9b42dcf4b4ac84719368154faf4660c7f4e50f1f

4 years ago

0.0.0-beta-a4922a8abc8672db25e247e724899b3614b5e590

4 years ago

0.0.0-beta-1d54b50d62d973869eb137a08fdfb14319c28b54

4 years ago

0.0.0-beta-d13d604ea86d633d60bfc0bf3e0b7e0ad488db93

4 years ago

0.0.0-beta-2ffb812620c85aec0b852aacf3b2938a58d67f17

4 years ago

0.0.0-beta-7070736eb20b25f81e1b4fdf91ec67c2769aa25a

4 years ago

0.0.0-beta-db7f57034f27b7e988047e47ae271b91413f38de

4 years ago

0.0.0-beta-383dccc7c35d63a1a93a7e6b1844e2c6a46b166e

4 years ago

0.0.0-beta-8f85039cf0b72686cf1e69925c639893c413ce41

4 years ago

0.0.0-beta-4ab9e89f87b5746cc9a6a6962493858df017302a

4 years ago

0.0.0-beta-1d89636d60f0ca1cc5d37984f73f12170c6f87ec

4 years ago

0.0.0-beta-09225da0130289a8b0a047cf81c6d7edcdf5a425

4 years ago

0.0.0-beta-94d061c7300fff19abe5601835f84fd9ecc96bd4

4 years ago

0.0.0-beta-0556b5375ff98ac549ad91429e1eb1882d19f80c

4 years ago

0.0.0-beta-155ab0e6659f1eeabdcfe6f726f9b931ab384517

4 years ago

0.0.0-beta-2979bd2302b462354fa63deda7ecdea9894cc722

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.0-tooltip.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.0-button.less.3

4 years ago

5.4.15-button.less.1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5.4.12-CloseButton1

4 years ago

5.4.12-CloseButton

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5.4.9-CLoseButton

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5.3.1-button-fix.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5.2.1-less-constants.0

4 years ago

5.2.1-less-constants.1

4 years ago

4 years ago

4 years ago

4 years ago

5.0.0-css-modules.6

4 years ago

5.0.0-css-modules.3

4 years ago

5.0.0-css-modules.2

4 years ago

4 years ago

4.12.0-rollup.0

4 years ago

4.12.0-css-modules.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago