{"_id":"@asemirsk/ui","_rev":"27-894086a14b58a3700e3a5c72c5efa961","time":{"created":"2022-04-04T11:45:02.273Z","1.0.0-alpha-3.9.0":"2022-03-15T12:56:41.674Z","modified":"2022-05-25T09:17:54.573Z","1.0.0-alpha-3.1.0":"2022-03-15T13:54:17.093Z","1.0.0-beta.2":"2022-03-15T14:25:13.144Z","1.0.0-beta.3":"2022-03-15T14:37:42.915Z","1.0.0":"2022-03-15T14:40:39.573Z","1.0.1-beta.0":"2022-03-15T14:44:47.405Z","1.0.0-alpha-5.3.0":"2022-03-15T16:03:39.903Z","1.0.0-alpha.0":"2022-04-04T11:45:02.606Z","1.0.0-beta.5":"2022-04-04T13:57:41.666Z","1.0.0-beta.6":"2022-04-08T20:00:53.459Z","1.0.1-beta.6":"2022-04-08T20:05:05.188Z","1.0.1":"2022-04-08T20:09:45.885Z","1.0.2-beta.0":"2022-04-08T20:19:16.028Z","1.0.2":"2022-04-08T20:22:23.687Z","1.0.3":"2022-04-08T20:26:27.674Z","1.1.0":"2022-04-19T15:07:16.486Z","2.0.1-beta.0":"2022-04-29T14:35:19.903Z","2.0.1-beta.1":"2022-04-29T14:41:40.749Z","2.0.3-beta.0":"2022-04-29T14:49:50.362Z","2.0.3-beta.1":"2022-04-29T14:51:44.060Z","2.0.5-beta.0":"2022-04-29T15:06:51.126Z","2.0.6-beta.0":"2022-05-02T10:08:18.585Z","3.0.0":"2022-05-02T10:21:46.469Z","1.0.0-beta.16":"2022-05-06T09:17:16.876Z","1.0.0-canary-24-22.0":"2022-05-25T08:46:24.419Z","1.0.0-canary-24-23.0":"2022-05-25T09:07:58.297Z","1.0.0-canary-24-24.0":"2022-05-25T09:17:54.474Z"},"name":"@asemirsk/ui","dist-tags":{"alpha":"1.0.0-alpha.0","latest":"3.0.0","next":"1.0.0-beta.16","canary-24":"1.0.0-canary-24-24.0"},"versions":{"1.0.0-alpha.0":{"name":"@asemirsk/ui","version":"1.0.0-alpha.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-alpha.0+28ce15a","@asemirsk/fclasses":"1.0.0-alpha.0+28ce15a","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"28ce15a6b1c49e6f984d59ff1db29bac050fe78d","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.0-alpha.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xu/YIVlxb2pHS+4AE7SJpzzBTcKg1Hog2mN9KVnWMPa9vR6ykzVxDv463BA1MjHwDmJ1l+WPKeugaOYjxIm3pw==","shasum":"53af7b514988013f2d59a4a1bb567dd42c555321","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.0-alpha.0.tgz","fileCount":6,"unpackedSize":47438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASgr3ZaqXJhBDhM+VfBPNyVuenCuEx9fJDY+qTA9Z6fAiEAo1EiF8ZlnhfP5R/zH1pBsOOcgxS0wmE8vgZyKUIS1wE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSto+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofVw/9Hx1pBHAR1Dl9Eo01oipTFXOKjxZIIkYxXYeDTPjb1fiFTwPe\r\n9UmqqimUFY6JAXEQBDhA2ZsjouAOG9JOoYDSSkgmn/FhYX8JTadDNYzjNVDX\r\nzwwmfBYFs6qcboXt6Vnuk+kLyeCt+8OqRj8xBM8DBB8GIW4FNmLZEKGmRLw4\r\n7ieCQlYng/FHZO6aH79YW3A5xy796XMPyKMJSK2j5rg7Dez3lTG6s1ffDtvF\r\nYOBguCrF+gRkyrq9Hb5tmy+3tyiAwWY2P7rwi1OlpdClz5Leh1bOmGkcaOqB\r\n2NPCkKXa1uXXOffcxLZoELyDyk/n35lceU95xZxNayvuAGsrui4TnOx9tmxd\r\n14ktvcxV9+wyQVRNtptspETPr4o+P2rUtKlvl9sbFwABRftUA4zgrRZ2zYbQ\r\nCq/abGLw3y+Zr4nNZ0Nqq/kZ8UTFpEP5t4anlT2N6Q7cR2Gvy+yBoY7x+K65\r\n/Ko0tyGOck69ed7c328yjz669Q8+MJvyXeRgkBdtknY6eUK1WuzdSMDd3ZTh\r\nhATXGpl0WIXjBr5Uy2D5Q7psdQEqf6g2e119X8xuWX9DoKsCg4Bt7FTcRgTz\r\nkHH+ALB+gr4PozhdyDZZU2xF8BcmUno9D+DkfrpeGIShO3PRUZCo7az953no\r\nN6MYb1gf/46EmiWUvdDCnG0zo5ipV6sdJNs=\r\n=zBIk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0-alpha.0_1649072702321_0.672719599265581"},"_hasShrinkwrap":false},"1.0.0-beta.5":{"name":"@asemirsk/ui","version":"1.0.0-beta.5","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"^1.0.0-beta.5","@asemirsk/fclasses":"^1.0.0-beta.5","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"e6beb3c3e2c8fcff324e0e741ec5746fc55ec312","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.0-beta.5","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-iUqg8aU/1g8BxmZtnn1o0Vy/L07dfSSnQfX/JEUPvHt7hEeTtabtlhK7TKLrZAkoP85Rcke6pkZzoC7f+6qWJg==","shasum":"fa9a2e71f7357ca128b55f24582195cb02ac7145","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.0-beta.5.tgz","fileCount":6,"unpackedSize":47413,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7Ma7mX5GyHc2tCyOzpWhHKeyKaMZTaDEl1s9djmxPrwIhAMbmnZXLKTAyeyziknWLgWI1dqt4/tcq8hZa5foT7PrH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSvlVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriMxAAnYosVbI+kTwiFO5ez7ou4lOQh6E4sqtJnFIDOytiz7s7HAPm\r\nHyeIJZ2lOcbjHKDxjnCf9cqBRgzFB5sDAPNc2DNkRKDt7n9f2hPG3z4TdbUO\r\nd4Qzxfr8KeqyUZ0rw7NIjKgZ00wgdjc2aZiLtP6sFlJ39ZPi49KDvLD/KxG6\r\nxMsQ8KcAfsmie+NUeJqNB2nng9/HpQNIAwaQnRucRuYJeZS7Eqjd6V4pyH+Y\r\n7xu3iyX2eLL2w6h1cMVyZrAird1GZMZq1FQzwu5tFdOkQIWSu1GP35iZDvMS\r\nMJPwz3q6PgrUJCyuQiCQCs70lACPAAN8CpLHZ324+WCFzmO5Ws1pQx3HRteQ\r\nuPKBrfgwympaJRTgexhXfK3yPrvO7G5ZpgKAd+JJUPVqZklAB4lxeuxXjhNk\r\nkTV5lhc/n+2GnsPlDBxBob6/9beLqntD4w3/qdlEnNH9GH7gabvMHnd53p4y\r\nmHa92clU/4JqeZnJdQKlrGV9/ZgILCsVk2xBuW/P0buu7cC+DrIuXxz/x6uN\r\nDSEb430N/uCVWP36RGtaQTk28fg5MMuol2ZedrMYnsy3GsgyiRQgjXP7h742\r\ngCljTHkVVCvWSEyz+lAl1MieMaogh9ifxoNH1XPN9Vqs5ecLb7NotI42yVCH\r\nv4FKmy/Fa1aEJN01mhLLEdEzAEUmCU6eIVs=\r\n=cV77\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0-beta.5_1649080661541_0.6274776831052904"},"_hasShrinkwrap":false},"1.0.0-beta.6":{"name":"@asemirsk/ui","version":"1.0.0-beta.6","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^1.0.0-beta.6","@asemirsk/fclasses":"^1.0.0-beta.6","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"cbd97725152f2362bb86e6d4bba02043e3c4570e","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.0-beta.6","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-RozZLcqLUflsKfMWymWUcCVJDnLi4ke7eeqad3KEflMuh/FYlRebO+3lBOw9kwhkQn5W/MnpzE15G5Hjq0yU5A==","shasum":"fa33d188315c17098fc8676f06752dc79d1ff386","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.0-beta.6.tgz","fileCount":6,"unpackedSize":47451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAcgtjjW4d3yOal5UnO0uU8HnACoheKK8JI1u++GEjlQIhAN3U6h/E9Ri5DQLwI2FPcFUeY5lya8gzBOLR1l09TBrF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJR1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX8g//dS7J5QrYb1eE2+W4bvO5FtdE50xdv4YLIeil3JCcOttrOafS\r\nnccjM4Wk0zsALVJIyf3wrS+oxrVHxDr5wjhkLqBcVeZ17E/QRAIBHFHVk05v\r\nHe0npHJ9adDBK+wNKxiBY1rIerzkL98dLwBpRO6lxiNhnM49vsMYcN3gbVqA\r\ncgk0GiNNFkhnVpRDky1tZFy1CsfvSdYCIsv2y7q8jmgCn816IU22fEpfJb1W\r\nn2IiwYObZgJUl2FdqQkLNfL3a35fWt6JH6hmJ0Mfm/mPO6RyJElQvAl3pBxf\r\n3WWE2u07xcnd2GGxQDQCLrtCJhQl+gDUPGwXVF0sYL0J1ok8eiYGvJBdNASQ\r\ngfluOCGe6V1GFfvHoX+nVCFqPq+f9QMibQN5n5Q3BMkzBo810GXZZdSm/r71\r\np7fO9SkcKZ5RezZ1POKtQ6YH29X0TOO9NjOorJyg7sUihmv9VtlD8oZ90Rsz\r\ngX3CDIk9vMHeIVRT0NL/SuSXV9ROHQ5FuOFP1dxmy7dXwdxZd3jI04kuwyYT\r\nkmvpwqVpJO8WPdxXGfw7yn4QMlym8OWLSjmAG1HzT/00547ix7tUus2ExUHH\r\nKgxlWZGSOdg0G1yAECo2wDPipaA8daWGQh/oSO1NC9LyamqiWR4kjXWo4Uum\r\n4rbHH/4m2LoIHj7e1IqiOr5QW/8trK7jpjE=\r\n=UgrQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0-beta.6_1649448053338_0.26177006404592995"},"_hasShrinkwrap":false},"1.0.1-beta.6":{"name":"@asemirsk/ui","version":"1.0.1-beta.6","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.1-beta.6","@asemirsk/core":"^1.0.1-beta.6","@asemirsk/fclasses":"^1.0.1-beta.6","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"dfbcb3dab592c76bd48c138c275c1e27fbd9ca1d","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.1-beta.6","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-lDVqSdBOhrCawVn1lj4Z54LvgooR9L2GZ6PCAwYQacnOqr1OaSCEHlTZ+XATDyCg/F/4pYOcd257Yb/p0IAS6g==","shasum":"3f5a79912e029777454e68491a5a657dc4484191","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.1-beta.6.tgz","fileCount":6,"unpackedSize":47451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlnAKqs0CxZ1WESubdGQBntdXqtPfF2S4FIedWg30G1AiEA067aQCOLX5ihCphNiNpDmB12SohvI+VNZabb2G6RnIM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJVxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIYxAAhLf8xhLS77pIPYlIRt4unogFpgScZeIwCOJilLBqqwsiGiDh\r\nnU21DJphb3BRlPM6nNo3MP7MDlWGbosOtERYbPr2zZ5RssTBtirwyaSTibSu\r\nzzrinxfgeBD+Htk/ljqCeG/oevpL8GHJ6vQg8YpKrUfJNWHJg88kkY8ugP5t\r\nEnT+wz7KOsz4OsT3CRPdJh4mgq6Hw5HsYVfOQg8fCTyet/8exbMGEVoiceRe\r\nhBgeSDI5Q5MC1zndDOYxSlJFtxV11bEL1UKfhV6Ctjl2utFGCqJ9okpdOsIi\r\ncMOix14H/8Ide+5Hp/hQZ538adVGG4zjBJYhe5nuY3drhZR4n+QhVOWkR2mJ\r\ntJ+pX27ZIUYF9D3sYuhoIiFG1PsrA1Qstu6LcVFAGmZ2I5sC89bFxuMvElm/\r\noWMlOziI8gkajaSDoByWfrNMmXXX72Syh5fb9Wz9bBW0MgbTPhQAUQduRam2\r\nOYWoUejVJgHM6qA8kjk0EKR31z7zCwfuBta9sjUOlmaHfBRvxGzJf+o9gxqp\r\nrjCCGVikMoD779+SLMGvWQDHMu5KE3wzoIGOeTT5eFC/RXIfjW0N39cwDoLw\r\nGFRiUR+fHMo+bTWmX0a7jOEIp46qzG4Y6YxKHNZTDwG3lkyxpr78SWDUIjUR\r\nxbNqXSbBMoYs+Hru3h25r/OThDIJV0N1FKg=\r\n=wO3O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.1-beta.6_1649448305032_0.5749978857293427"},"_hasShrinkwrap":false},"1.0.1":{"name":"@asemirsk/ui","version":"1.0.1","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.1","@asemirsk/core":"^1.0.1","@asemirsk/fclasses":"^1.0.1","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"b943f745d8dc223a872b770f79f3e0db78f43486","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.1","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-iX+jeRBAv/gOycKRDlG4JUa+wGBCdnG5tcSgaZF9Cj9r+lNFAc08kz5D+5QcBTax0k19AKJPRAGh5NV0de9U4g==","shasum":"b845615784a115b8f5b514e4f4e1d42eb6d9b2ae","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.1.tgz","fileCount":6,"unpackedSize":47423,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBcRdTFKC5fMLt94AQHUIoO+CBC4xQRPpaioVHuw8a5QIhAIFLbH2pWBm0z3jq1B5zuRj/cxDbfvpj8BGGEPSsK7B8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJaJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/AQ//Q52q1SDizgZfeFExu6gNOyRqL6utZq30eWMRCWuCjsZJf2wd\r\n8f1U1RSvh2pQG53GKDwMwZFVc0d7uEmffCILegG3NxqNT7zZA/P0GAqSERX3\r\nb+jTB3ArCAvaq79JR3bCHbNzUkVHqiADA8DxF7IjkNWiWpqc3fzHfujh/LMx\r\nXw5zSN3i2sCZS9PPBWLpS+Cj/lXvjY07ZfiM2IhwBehiMbOywCvnfOe6RMqs\r\nXhMCwmAXVT+tPbQaxlg4qEL0d3jeToGuIPe8ML6sE+xE6Ca98bfyKeYrcByC\r\nKLlCtP0lwmo7SjbhfzBynHn+ADXdp3AqqifpvK0Hws/3y9LW+7CRWyRTPkTb\r\nsgqJsSdK/gZW4qrU1bToHVgfiAX51cZN73nhwiskO07XhSEUS5xd46v2ALWp\r\nvlUXsvMnTwpJ/rU4BYQ70i+HcX7wkxZGOZOJe04ru5jCj2BgWObK1wYwKgPv\r\nDFpVwLRRJ8TSBRXfzL4X8fRIwlJMgC9tpXJtQgxnZEkmF1C33draHBNRdVWD\r\nYJhVoJrsNrl17dj9YBe2pCSZQXzJkWIuj7Ec39b1XYWZAVo3oy8tlWRl3/xb\r\n0CWv8F7c8Jd30VOR2Jq+A0DXlJdLxiA3KFDuqkexc/4opajIMo9o4QxPNGp9\r\n8LVvhL+w0ob1/Mc3T0ODxZNdQDNeV7EsrvU=\r\n=uJ7u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.1_1649448585700_0.43533256361286865"},"_hasShrinkwrap":false},"1.0.2-beta.0":{"name":"@asemirsk/ui","version":"1.0.2-beta.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.2-beta.0","@asemirsk/core":"^1.0.2-beta.0","@asemirsk/fclasses":"^1.0.2-beta.0","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"da62659a8fb42aa89cdc8cae2f148c8dd8db5dcb","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.2-beta.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+vPedEcYcaSf465IL4LMX19IF/1Ur4ENGdJSL7fRZ6n917RQbsT9+wrga0tNwApK7WnfQlMotJRx/q9yo8pkVg==","shasum":"3b413cb9707e107423559c6a55335e43cddc9953","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.2-beta.0.tgz","fileCount":6,"unpackedSize":47451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8mJ/5Ev+2sjISCMf6PjgaH2yUWJ7rcT6ry7bX+p8uVAiEApgF2jstPo6r5oXWFgt3lsNrIGwM94BuLsZ0oDHkdeKw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJjEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH1BAAnt9kisXAzvqjoU277mKz3y8Vz8mNlCswuUsfGNy24KAH3x22\r\no5gB4hjEx6Ja2uyFSeKCLeC4ir+eRlQLWlfNSyr4cmwRO5fYxBmIq13w0NHz\r\nbnsoqriU1JQc1DlWBd+M54xZIQsklDD3nZwHjucjkUJzbsjKvD2vqlN0bSu8\r\nPxsca+U/FWh4apMMF2lC+UTaTsg+IPDO9o4cw8uOU6d40hWU4vSkyjG+XhBn\r\ngrWKpxWfrsR3+49JLFUtGVkHbsQ+ALJfoxfoh9SsnHuXCQwjEpIumqh0uoWV\r\nbLbJ0wO1dsYEatcNibkZvYGLa811KASvWTXsaqeydWUHHaDD1BA9mOtXVpSo\r\ny/5UnqcWo6ECVvK5/89x0mJct7pnYeNsDxnLa0/tkvvTbNPA2rz6srb7FSqV\r\n7p+IE/CIaj2V4/HLF5Mv2ti1MFR2PHuXOaftnMUswacUG0Kbqcbt23WOBj3W\r\n4BEDlILIvKBkcsbOyXGo+RNFnji/Y1b6yuGWeP4e5cYcKIemgMUIlZ7Whpzm\r\nSc9SJA0VSGrPpp+m8gGG0DH5i700jKlhGgyY6XrKycwXnE9fkt7QM7WmBAYB\r\n1yaIeGR4NkC7umvRZlvIhxiQ2U2/vdNv9+3Nu/9ytDc5Dh8WrD8kj/Er9LGP\r\nZoNP33LGJUSi3nsps0LnppbPP+ef/QZfwSs=\r\n=IEyL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.2-beta.0_1649449155895_0.509967411544044"},"_hasShrinkwrap":false},"1.0.2":{"name":"@asemirsk/ui","version":"1.0.2","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.2","@asemirsk/core":"^1.0.2","@asemirsk/fclasses":"^1.0.2","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"19cad7cb078a3029c7b40248078ddfa4d413bdcc","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.2","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Cezkt25VoIcShCDxKHKLwZv40LGVytZlXryqUQj56SP6BDwlWElbXlZEXKmXPFdQuPc1iMhVN68kBLLCP0xmDA==","shasum":"bfa2817ca81124baf33231475c9c2750604ffae5","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.2.tgz","fileCount":6,"unpackedSize":47423,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4DnFq1wFbTuzvX0S6IqFXxegUMFnNPd16wAAWiUslLQIgHjhHbXfGDN11rxsjPp1J9OmK++BMLe3GGG3a7dMfEaw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJl/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv7g/7ByDcOCCaGI++q0m1jLwpZ/s9BbL61+YkHMuF+MCmntyTggYv\r\nIhYnud0FI7t9CCFjzPhTMrU22OdcRgVGR0M+SDuUqL1rHca03EWoH4Fxw/1k\r\ner8h2Y3VFwIsELJUIg/pvdBpwVG92wNjrSu2oPbA5xS9e82UJC/eBZDYOZlT\r\ntiiWYOSuLrHkQWig4GyJgP5n4zsFT7JogTFmSeNyXI75fQloLOGOkBCX+VsG\r\nO4rVSHvVlLs/69rF9YXykVppYA3VnYjYiY9GobMGKftEp0lCHJP78DTjKni3\r\nWhUVRRA3emaRBLC+0m5pihE6f+IwqviZQUH6/I0KaZZy4M4Mu3DoL9Y8WJu4\r\nSv/UJAtgVURbhn/Q/VH3/N1Q0OOl2W1Iy0KY473fIvC/VT3ClYTmhC+dzqWF\r\nRRg54pkk22RLHCo+CMK8/pRKjN3NPlFW6FwnuMTUJMxkRTHaLxbb+3imxBTQ\r\nfZ2BL4M2BwH87D8uD3CeK6YzkZeZuBJIoy+fbY50rfrRq0DMhkQWh9u2LDBt\r\nqzqtcfHHyhZuD7uktQo77fevg1AvvijZNu+Z/MUix5fkN1Ji5e7mZW1aLlST\r\nsEtpTU3ApsK7cl7qd1s8Uo99NsuaJ0/Kvi8Gs++ioWWSPSWUy2RiQSHzUc56\r\nX7XNOPNePo6ncHhGr4LiNolcA78tsXiQ3ok=\r\n=XdYT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.2_1649449343541_0.2189153536235644"},"_hasShrinkwrap":false},"1.0.3":{"name":"@asemirsk/ui","version":"1.0.3","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.2","@asemirsk/core":"^1.0.3","@asemirsk/fclasses":"^1.0.3","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"b46d91ae36b8631daaeaf0e17b4197086a98c2f9","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.3","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-VWsmOYFOnyz11CZc6EpfOkuOyO8uhqHcWcMcerh3Z8SrVGNQJ/i5IGY2sdqTNJJJrKyE7r/A4U1TcwB/JfM6LA==","shasum":"56e6c3a5729cf0daf4f108c0ed579a6a3389e97c","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.3.tgz","fileCount":6,"unpackedSize":47423,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMzX9A9vuiLSKOG/RSjDm9nYrftUR1ZFNUQNg4NjQ19AiAd57aAGH4NugnU5kne748BybucfglYoDv/Wa1wzQJ4nQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJpzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDOg//VvSAb6sViM6ns21095s1T9ecoUwxrZOWSZXTlLQUQRTBUwKa\r\nDvL7WHkPnTywqvEOo0NE3aN8CtRCtiS381XVtlkFbanpgNEcVyeYC+nSJbCU\r\nsDpnGa5V1RFN1R/HBqDoF7ysvYwnMlFk8VRrmxLrqWve/rKZphgwJdiuMSl5\r\nxrvSNlBQKi37LraIpkOEia6GZ152VCSgFwJHCTluMsdnh3k/iLcxRsFtIB95\r\n+dVImT8d4pVn39ohbWIV3U1OJ0HdxKU63jT9+f2yCgBaReWl7oZoFH3kipXA\r\nbXQCcOs/eT6LopUdKIrPjq3YA6l+gRF1WGEMv2DY/rnXmK9cldcz6PcwHiGA\r\nEJanX+rXmJ+yYEBI9Z2ZUHT3S8ve+7yzi3VG16Nyr99ZMJ/e6cyhE+iRZuGt\r\npWDtj3LlsI6eEaFXUWaXfnv90JKLmuj0oqn7qYP1RnTYCtGjv65pcaA0ylf6\r\nbe75JcGxY2Rvy8BHULMLSkvRhEpG3NyPrURd/VWenuQWX+vAjVNxDR3IEgkF\r\nqgnKhuzLWol83PBcnAz2yfp9SZlTUT8jYiNyUB1arB3AQIQJqu087rihUrTt\r\n2E8AfQKIo3orbXx2YzbszUQdWbkZLjmKlQ8brMQSyz2OSoQyqj/DfIpaqDPe\r\n48G9TTeL6Qkq4iwupzKMkkM3HIczqG0w/zc=\r\n=IuZc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.3_1649449587500_0.08763807535405244"},"_hasShrinkwrap":false},"1.1.0":{"name":"@asemirsk/ui","version":"1.1.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.1.0","@asemirsk/core":"^1.1.0","@asemirsk/fclasses":"^1.1.0","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"e767bae774cc17eba5d92b638b7628cdc9236086","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.1.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vXqT15DAk6AGVIiVaHAJuax7fPxS1C8jZ9CjP3JmCGsfZTfizHiWHEUvqIy/iqupGrcnFWEfYjE1SvJK+eXAKQ==","shasum":"73dad88603d27dfdc787d54e27dea71d125d3b40","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.1.0.tgz","fileCount":7,"unpackedSize":48257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvOcbO6YI0xU9nIS2xtIwJw10ghSxNnmELTo8WLYpTDAiEAvGGQTHI/HfC88gUvYdLpEd6yaHfrHaBkb8IHUAQGibs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtAkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDJQ//ca5I7meiKkU1tZMPxOdSV/ftfc/YuqEfAtdwivImQKFiU1BZ\r\n76XMJOLGv6kDTjQTFAhKXsqLI2szCJM5ki1Z2x0/vX0bSy+MwjzMomaCYNZV\r\nZMiIW7LwvecwtZUnSQDB25Zix1xlUuFQnjZXg0IfPp10N+5uF4MYepGGRfFH\r\nJTwXvuOMS3n4G1JVy3aZNlC/BDXYeSvpfNsy9Kmo2n74Yg6Rsf7wq69yRIX3\r\nAWZhMmju3aLWAiFDf4XJg7YoOg/uhf3whXe2P7to99LJ1QiNLjjF4xCFhT4f\r\novsobkEHpV1zltdL8oB7lQbd4B2G7GkBJ+Os3kvMR00g6cAiCh2NTZcBJr3A\r\nkhmGM4H/lzE4u/IM3dTn37ScrHDRxrOyFVIOay3hbNDFDB+D+TSuGJhe96vq\r\ngOSTnFcLwnp705oHaB3LfcL0owpsDjMobxaa7g8FLQXAG7cMzH5MK/qGqGjT\r\nhjf7kDJzndLmqj5TCALBittOycgC1Bb54UDCCurSSUSEXS5+85zRA3QkAzBt\r\n798FUa2NdHxYoSCS1Z8zSwPPm/uO5atUHLJkFn30LBnyvkZcF82sD/+EwEfh\r\nLbcqTBXfPUqxt8CjQmiIcBVeAsoIoj8vM0HZNxKm00KNChGgAluNAYiZtdDD\r\nc/V6okes0AhValngxMBnVc1JabKF6VFP7cg=\r\n=6hjP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.1.0_1650380836316_0.8471403308012377"},"_hasShrinkwrap":false},"2.0.1-beta.0":{"name":"@asemirsk/ui","version":"2.0.1-beta.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.1-beta.0","@asemirsk/fclasses":"^2.0.1-beta.0","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"2aebb64eab582696b080b48c5f3475c2759f6408","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@2.0.1-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-iMDnmfAE/v1wgIPORPVX7Mp8ACBr9r3wM8hPQFHigcqTHYn0SSRaHBvm0ZYakICulQVyDtxTzqVvovHGxFakfw==","shasum":"31b32dfa90b1f868f80fe3cc60843e7fb9a560a7","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-2.0.1-beta.0.tgz","fileCount":7,"unpackedSize":48285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrWw8ucqcDu/lkmmzaPT6p4c9yIY0dZLBphaR170DQYAiAQ4/3CUdKfjNhpqlYAAfpPyFum2Bz/LowuJU1NXHKg/w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/enACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq11Q//aDQznGlhT2z6+67vAWb6DEDCsnMEzgY2SxFlsaGj2KBdgAOD\r\ngKP05D7mNpxlckLcwKzASkorohpWc7BQZSgxTt2Mm0oumx915OEE8KZzWqw1\r\nz5eh6c6jv/q4eRzUhxXQHF0mA9QYg+ZJjkJrRoGfg8VLpHhTbmdL535eMpMf\r\nYIEi0T51G708DApmxDV+tRLB14JdVMaVjqzQMeHNU/jzXNVu4jvQBeDZN9L5\r\nKNeonpzTDzKePAAFtjms6a7drggn1EgNwWeV67pYWyWAnptjzZLHWShuvykD\r\nazLR6hbhBsPOwJaftbeMCfcJSaRaFj9EG3c+kbQix2PA22SKiKhZQGcPap71\r\n5LQ/3yHFRxk5lAHRXsjKZsNrLjQM4NK9kmjZegX/6b47fbV9hFzw11VLK7Pa\r\nagfb8sRb93Nms7zxmOFtPc/QknHrSj/KuG+43M/1d+mw45qgAiboI8v4DFYS\r\nwnhnqT6XwWkHsOOE4xN4/aQinwlUJs+O5zAWSp4XLq5INY6JP/xAN32hnmK6\r\npeTW9W2WPW4kla1kuuQk5LFGM4BWzNAXCq738jwP9FNk8kMvftl/VHrEd9Vx\r\nwhKnx99x45yQH4q3/mdOYPJPax7UY7kGWtnOH4xlESq7gKfjBMNDya12/1D6\r\ncCwMGOQSD/zcp6/vcADClkk6N/bqHEDWv9I=\r\n=8dwU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_2.0.1-beta.0_1651242919724_0.6778985828996549"},"_hasShrinkwrap":false},"2.0.1-beta.1":{"name":"@asemirsk/ui","version":"2.0.1-beta.1","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.1-beta.1","@asemirsk/fclasses":"^2.0.1-beta.1","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"8651151ffab8ce28ac9424085c9325e3485ba177","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@2.0.1-beta.1","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-D4IsHmietNXt0JIjTYfosN+u0sWraxGvxFt4Aew4SFCWSUKMqbFvOPUEar8ybXsMlX+cBAwD3evrKt7PdgA9dQ==","shasum":"dfdc0c779e405d635d156b66248e6d323172e2fc","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-2.0.1-beta.1.tgz","fileCount":7,"unpackedSize":48285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJBeYGq7gfS+0tKBfEAdCbIE2toNiAA1O8e2f4Rg5mNAiBQhp6m/QW0IRIEnd+6kkwg7VIWza5uYJZsQkai4JQ4Sw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/kkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCmxAAnwzidCo2UooGWEMBLSqScTeZBhZvrAY8Lr+GCNr+glOvO8RW\r\nTmEgdgg+WuNCkGpaz5lj6KkRKk5WrUQFJeLMmmP9kiF3aPdOHSBdBMRS0FtY\r\nDdpbAsz+y1vKieDkmHX8nZNdkGbci1o9m2yzL16MdF1le5SSO+Gs7Sz1FGHf\r\nQSurnP5piuOT5RwDAzeXXDuXdqW+enxhDOhysnOCkLvn7L+IESBbf6vQxUVM\r\nkGJJsd06/Ki0ZDMJvuUeUfWMU+EDhCOVo/lG1COgj/S+RS5DGSnPXAU9Px5z\r\nmbX11zq+wzTtAh31WranbjyzK/SKGDTG2oFfAletPeTXwDBjPER1xpcRGwiC\r\ne7jJh27sqUMz7fOW6v1a0TsRcNiGlOinjjintxx5LMAwYghn+a2vHJ4dt2Z9\r\n4k8mAxSLvG/qKdtY1VW1DuCyjFbMd45K3r3qGnVo0ClfMyvOPGGZY6OzRaVX\r\nn8dfAoQlWkWCqGbi1lBzuRt3g1UUcIBs53UVuhLRQiHpjbSgPVj28QToX3cA\r\n37Ml/vKkOGaAB5JdlrYzaz+kxG5uRkfWwZbCcAZIrrcz+C8DbXKl8n4dMJ3S\r\nQUFUpksysufIquB7s4O9Z9vAW0/SnaQnXijz9KW29EIxvfHEnPebBt2c0ruG\r\neT4s6iscmcL0fjR4nHDMRKmAhkkJ/cQP6gw=\r\n=Rtt4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_2.0.1-beta.1_1651243300541_0.6505856276653743"},"_hasShrinkwrap":false},"2.0.3-beta.0":{"name":"@asemirsk/ui","version":"2.0.3-beta.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.3-beta.0","@asemirsk/fclasses":"^2.0.3-beta.0","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"95b0d427717d1ca0bfedc22f3f23323acc223e94","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@2.0.3-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-UsRPoFP17QOiIis5Tfn9c8eCCRLLWhxu6xu7w5ygRoyKYS+JwYtyq0x+dbdEHCrZhz2KGZRnNHrTZ76PE3UGCA==","shasum":"40579ac00c6b77c36c97c37632baa5d547d6f18e","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-2.0.3-beta.0.tgz","fileCount":7,"unpackedSize":48285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9wdIaoBi/dIjVp4BHXS88A7HqzDZ4lPSwjLw9qmFy/AIgIBiYIUZJ9MAGoJ60Q+4S+nLOn3FeUmzr2NhB7HUrM6o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/sOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK4A//VY0QLsE1eQ6X/OOaUo/+js0GaUXVcm5bt1BjsUITUANpKQ/n\r\nef5ON023HdSA9G8x1pVhpetJg6hlqUvC7Clgne2u5xZHna6ojHro9p/L/qSf\r\ndxsMni2XVtR5AWSOfdawy2hFVrvtxAaG7mNJQfQ8oJ1syMlfNyKhZcybpTma\r\nktU88SaVSGhdhpr9VBLjT2AAo59rg5ffeHG0BJ2pSoYDgKP6cah3E8sCX77S\r\nuR5sIaTyQiz5W8Kcq7oNMssnJZjkuVaXAp2Gpp8miE5HONGrpOkJP+pfRd4z\r\nfkzGicPF5z8zCtYtJt2Av/9unXTcazC92UEoFNslmMSqkg14W+6U4Cg+gkn/\r\n1D6VacC2nq4e1oiubSurPLC11KO1cwfPFCp/UEPuFD7xkpLlWX6EXVo5xnGH\r\nKIiqQFyzAgs5J2GgjaBlALljOYGVX9kjFFVn96NmVUv2ewAPNxOOn5NmUBrF\r\nChyEv4XXcx7W8hrtgxiBIxqwzh3srh99/kOvCp3irgsGPMzUrs7PlJoPCLUC\r\n2om9X7yH4C4ZjNvhODPpP85xqrupVVXELW49nV1w9GURSLzOT3oaoz8qnbBA\r\nr3yrtT5Dv3/piEN5DLin90T5Iy4yiP8dZ2sqzd0aAXS6cPqP6QZBCX53X0si\r\nA+11J8/C7dArZz1j9qXFs/B87P8DVj90pLc=\r\n=QaZ7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_2.0.3-beta.0_1651243790220_0.2506971931989941"},"_hasShrinkwrap":false},"2.0.3-beta.1":{"name":"@asemirsk/ui","version":"2.0.3-beta.1","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.3-beta.1","@asemirsk/fclasses":"^2.0.3-beta.1","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"1be4d3bb997d192b34b946c04f840a2a82b34a5b","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@2.0.3-beta.1","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eVOlrAxxaGj/ZsQh7ZYqBD5+xKtglYfPy2Ldm84rmZ/2AFKVAooCv792gOSoHNHYWoPGigbDIDzdtnd6UgA39g==","shasum":"630c4080f90b348e18d31a5889d34b9a601bc535","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-2.0.3-beta.1.tgz","fileCount":7,"unpackedSize":48285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqfuZt3qGdE/sw1uYHfp405XROIo9I+VuuvtQR6Tu9+wIhAJ4PkaNaFLPHb4cLPqtrW72x9TGIY/aaxss7sCLi+vBH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/uAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUMQ//VZcAxXswA1TITzxfKXs1EEst/T2lvBDoPmPCxwMhK+8UGkLm\r\n/uwpwi5ImsbYHIjvvolaTEYD+muQrrb5UO2bfgdEo8Uj1CCXCTsdpJuvV/aU\r\n3wDneqeY5iNVshDZFUmHPmVYI/EYJitNnrOEXOpRuLsElgdApX8Bn2eKpONn\r\nHI0WjiM5E9YsU+j3j3mS8q2bd2iQUp66KOX0w/S+JQakDwRx7XPqNVRqwV27\r\nI68saTfIC0NK8wHo7EJ7wiZARH5+i3A2hU+Wjk/jhRm1VXozF0o0Y8mz6/DZ\r\n27KwJN8947w31pEyDrft6VI2NFkETw9/ZSHWnCQ6wtYh9oSThl7tV865Mb2B\r\noj89OdIgyDIPR4MqFEvyu+/7MFw36mkGTJzbxK+BWH+LcrqouB9PQvzRcZgF\r\nustJG6NIC77qbRlPVVaYuth226py2I0oszVpPs10yB0ANhvLEG2Tc+iJONWB\r\nfvnRr+jzc33WWOgLavPH3dL5Efkg7uULVGWD1LKYl7GO334CcH1jFdoqJ+XE\r\n54ZrJs9EgJiy9ajit3X82fbpH8Eiubv+r0J7yOu9e+QYgasbzt1fYAuJ2lRh\r\nfQoSQHcyByzFweKYspYjao3tSv+UgEhWR4gxbVDgjSk/OtNPlKZjrXoKSxMQ\r\nGGZhVEYZJta1OQ/7fIsUbYFFs5TL/ZbYFfA=\r\n=JazG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_2.0.3-beta.1_1651243903865_0.4332253481457655"},"_hasShrinkwrap":false},"2.0.5-beta.0":{"name":"@asemirsk/ui","version":"2.0.5-beta.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.5-beta.0","@asemirsk/fclasses":"^2.0.5-beta.0","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"9b047b3a72ac828e21a6e31cb9a8e77e5225f5c9","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@2.0.5-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-5JgtweUwhPnUnG33o4JDG/KaYn8p0pkGy2Zzs0gS3YQDeMH3OwVRaMRZ0ITEt1zE09fspUrlKfn/bxy01mHMsg==","shasum":"919cd1890b4641289b9a38dbe36133bbb538cfa5","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-2.0.5-beta.0.tgz","fileCount":7,"unpackedSize":48285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaYl6WEz4U7venmCwvS+wM+6bicyQsQY+tRnhYhsycNwIgMiJdFQLTSqvRoVvhTdva1F/aZMrtIqtHmDuY4VcwcuE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/8LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsAg//X8ivUIzoPP5KG0qrNpAFwXT2DJFGZyqHQWDJRhR3my15aMKW\r\nOKW+E/jasHetl1eDEbIcU6l+6fuKfGQp/W4aWLtXYMoW7Q1bBdgQSzVTcvAW\r\nPs3ItZTFpUKnEW2q4HIFbaF843Ke8hyT3TWQdihyn7YMg3qrtY5Er99Mubrp\r\nyqyF1KCOHza3pE28MOU9d23QUqVKwk6k+Tj+fkguKRwtlrMvKB/MFX6VlIDz\r\nz6Pq5T7k5f4mC47FQ6VmjAOkXcvIIPt6DHaiGXGBDawGLPoWj86dKWZMhS5M\r\nloy8mGwl3q/Bnq/refCQ2d1uW0+UJ/OJPTqYFp+xScT9Dfgg9NKK/WX3uAub\r\n2DyRWDseYuLe4TEG8jIt5x+h36+iCFyndjEqrovYHej6C7VRGkELcjw3mCXG\r\nEvfGVyjzM6UJTxORejVbkguIkmBsbXv0pmtQzGAHrUwfBX3nbV8W3QDAfJG8\r\nykx0oytlcMyNcZt03eY8+tGK65bv+0+sB1+JQY0Er0gZQFsjeIRnFo6SzWAw\r\nyoh7NA+b8GncCONKnBtDoKr9IGdwvim7zAXAud9iIlIpUrjJTYzO0q4fOIuX\r\n4RmExlReYtjSewTU8p6i5vFe1Htfif/fm8c79M10IDEt3mtgI8b2qiSZcXF5\r\nu1PIRPL/9j/RYJTIVsg8omQIn80OFgBDQec=\r\n=BnoP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_2.0.5-beta.0_1651244810989_0.5984623057384808"},"_hasShrinkwrap":false},"2.0.6-beta.0":{"name":"@asemirsk/ui","version":"2.0.6-beta.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^2.0.6-beta.0","@asemirsk/fclasses":"^2.0.6-beta.0","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"e98b014aabae41353460b67b25ad4d50f0133fca","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@2.0.6-beta.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-d9rebK0XsGkzIi27IBhq/uwVdtjfw3g9AcmWYRgAFwza9r/9/6XWulPzwpBMlGZLVjiBVSOhfC1lQjqhRrKLAQ==","shasum":"bdcb6a314df5a573dc536d9ac3469b001936eba2","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-2.0.6-beta.0.tgz","fileCount":7,"unpackedSize":48285,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq9UjTFIuGqfw6hdBznQYlV//Y1YYAZBNh41fh60Q5kQIhALoybtpxtxiiHXcqcPoVzbGwV0xjDvDcget7ScKwyp8h"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJib62SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojxBAAk5Fp1rqstikZKEplQZYUXKKR8COg0VICoXD+M2eE7ZbyS86L\r\niLRsxm/xAjPMGSBMLVGR8GOmOWKt0aozorK8Q6igUG0TlIHcKBl1zJ45HYLq\r\nGvOUZc6stR+Z9cvXQkOoefYuRlTPJ8mD6Uw5yDhBlSUKIegO3+QH/49sTBXe\r\nMrbYU6k6u8vc9B0b5lNTvod1blhEhm6R89TolbdfXhYnCCHL9cBTDjtoqh9K\r\nhgG/MZlsK4VfMz3hSFJqPWtatwlYdU09ZzcqAr6zwqtgrDOQJRIzbBRKyNrF\r\niz3pTaY4P0VpboZieLPYAgwHXI3PT/PQ2Q6ooOg4VjwwfncJ6iB5gKa42Szj\r\ncoPqcBuQyfGc91FjO+ks1z42rR4IqrgxTbY5ZYaFmq/0p2YwSZyQgPJ6U9LK\r\nmEVOGpDaWxpUAw3E3J6u8kH9ssOdL+4280rm80pYglKI1XchKr+a2zXE1RtQ\r\nBdANvAmLPJMt3DpCX0dUgtSAjJ/d6ggMy4P78PV3YuuUI6SPe2Z1w5VC8Fzv\r\nLeMtbQrRHvQ9+vRvdy07xzT1lN8CqB3SVehdZ/YelKEGkvkHXHH3/yk0ZZ/p\r\nPrhjdGsm52vLzIyrBfOaebIsPlPpSXZAigXqBXmFkr7HVVo8KHHQV7i9bjvR\r\n/s8YlEO5WuUx/Tm0zDTQh0by4VNhVUuveSw=\r\n=KycV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_2.0.6-beta.0_1651486098421_0.8290454342951363"},"_hasShrinkwrap":false},"3.0.0":{"name":"@asemirsk/ui","version":"3.0.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.6","@asemirsk/core":"^3.0.0","@asemirsk/fclasses":"^3.0.0","autoprefixer":"^10.0.0","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.2.4"},"devDependencies":{"tailwindcss":"^2.0.2","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"6cf8b4df75f61c7e648a17bd5eafcd3965785c77","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@3.0.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-QjtwCEmTCfrvvdrzBCTvOoANwUGQMguZs+97RZuFCYWYlFZ+KYmiVcZNw5s8V+M5jIKFFGa5zOOLz8ibHhFnQA==","shasum":"51b91a95d71f0cbfe42c795a8023d152585c3ce0","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-3.0.0.tgz","fileCount":7,"unpackedSize":48264,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpx4j6gop/ay5TyxxbUXayTSK/90KshSPDzmwt0ueStAiEA57A9Z4c5J9AwZgx55t6I+MejtCnfaHNrHKdKPeW0Ots="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJib7C6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4zhAAmqPfXSgSRvmi7DA4NW/XGwaocfSrrJY8TZ0kBP4I7KeiAK8R\r\nCT+cs/mUcPs7QayUKHUi/PSPVN7EK8xM0O83mea3fSF8qZRBtVbxsRuZs0EQ\r\n2dgODqFW0LFVVtgpMnHwzo6T+JcrrvXF1wB/W2bkeJ5a8mpbeQAGQbb7aRh7\r\nhkAUFm5onedgsyizfb0NmdablvX0RN53QRz49NETBcgIuGDCcoySVtq5gNeq\r\niwVooXeKK6r16mI6SpNmvNOoBSROkNN0x9VNQyOqytrgBOvI4jWIhYWegJgT\r\nFK/orEOR+5VAxSuAIc5cmcHKSL/GZW65/p7i1sjS9cBwRSMJHFQdZLfndLD3\r\n4eeeK8vR7D1121Vop9NiFArzv+NjOCNocutgCE1FAv3EliQCSxTaN+iW8Wfa\r\nzF51Mdkn1KhnGvG/gYj84kGLMoXIY+0MxV4EVP8rHH/NxSO5CJyCDdFhrwKE\r\nfNgc7k9X5UkVhR/CvL2t1WtErNxSTJFEXZ4Lz/pAmID0omoI63yLqL9Rtd0Z\r\nVnh3hXtzogECLr2MXQGWySQFFXPjc15UnLiXFIxH+lRUFVCVnTl9QU2nn6eq\r\ne362Kr0M2ZheJc3LlksQspiNwS0qqwiyLkE6GjNtntOp146KF7Ea7UGswAQi\r\nUjiMg6walEcRvKKfq2IM7urYgwfTAzzZLgw=\r\n=IjCZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_3.0.0_1651486906294_0.004485736471908419"},"_hasShrinkwrap":false},"1.0.0-beta.16":{"name":"@asemirsk/ui","version":"1.0.0-beta.16","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p ./tsconfig.json && npm run build:css && npm run copy && npm run build:api-doc","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/cli":"^1.0.0-beta.15","@asemirsk/core":"^1.0.0-beta.16","@asemirsk/fclasses":"^1.0.0-beta.16","autoprefixer":"^10.4.2","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.4.12"},"devDependencies":{"tailwindcss":"^3.0.23","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"0ff46789373c0ccb710fa463d6cbd035aeb8eb1f","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block bl-material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.0-beta.16","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-IR/kwjAGAhj3HZiCN0MvzNVPnw73/x9uZcHKn8FsPCyR5a49ALEk6oy4UcNBngf5alvYw4WCFs8K0vBEOKSJwg==","shasum":"c55425f862605a5532a6e561062c49cec5fc3f46","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.0-beta.16.tgz","fileCount":7,"unpackedSize":27927,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGAcw7hCHqYuVImzHx/xRZzIBkWEXRIz7RVAq6WvKuoAiA5fbWq+p7WAMoDCvmEpLR/XnN9zjTmQXbnp5Iha8FL/w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidOecACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1ug/+IUVP6bGPMUTMP6W2XXEBD91kCjX+VnabLWvM6Kb/s+aYwNEw\r\nj5G0J1D87cHkVKZNrwn8+qpfgLdsp/c3rw4s4pAnQcg5mQ2ZtxLlFatUO3nu\r\nw9YrqbX8CNYdnH1mfgJcinqks/piqiU1GPktC8VXVMUEcJcpoZbHvg7kYSid\r\nGjtv9nLoS1Bt0NtsLyb72XkJYutIyZa1ORZ4RGVm5pdLEmmhf9MFtrsmCDai\r\nSbT9vkp76bnlGTghqJzp/79e1bE16b0gpqt8dROVc7CmfxwneqBc2CKnl5nL\r\nUQ8QVyKm7gD813mmSYPA3aNEewCchDfM0AW9OXnVNIx8xwmp3af0NRDOTib2\r\nfuocB6iTRMebfrXCi0te77pDT0Wjly/l55m/C6yqWZLGWTNsX4EqMcimOcqW\r\nu3W/Ocb2H84Tr57EtifmXL+RLyNiwyCPhkF9SvOv+YIUq/xlK5BSpJPEW9Ol\r\nrLLrDgw4yxtIIp0scuDeOHur4fRm7m2ju6AXZwa83CEw90Ia0oFFkOUrtEXI\r\n8av8Oct8SI+jiEDQ8xQythn2OdNCRI8xh0A5v4JIFs/B1ezr2TNNvnSgyXZU\r\nIb/NCmrbWQJ7JHiWkO72tFv0bEm3zVkVAktmr7kjNGCxF/tInINjOUgwoqNE\r\nQWncvto6rpp9VbcgpqScxyT27ZJV11lxROI=\r\n=6leG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0-beta.16_1651828636696_0.9819490266590831"},"_hasShrinkwrap":false},"1.0.0-canary-24-22.0":{"name":"@asemirsk/ui","version":"1.0.0-canary-24-22.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run build:lib && npm run build:css && npm run copy","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-canary-24-22.0+a48e91c","@asemirsk/fclasses":"1.0.0-canary-24-22.0+a48e91c","autoprefixer":"^10.4.2","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.4.12"},"devDependencies":{"postcss-cli":"9.1.0","tailwindcss":"^3.0.23","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"a48e91c77704024ccd08e24d4f85d1cd6971ccb1","readme":"# `@bodiless/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@bodiless/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block bl-material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@bodiless/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.0-canary-24-22.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-gjXYZumTq9riQmhraR4iLkzHlIo9hHYVgUyuokAJ5r+92avasVbSu6ueyBMuRI6MTlnAVbadAIK6/b0nxx2EnQ==","shasum":"7ff690ed62a2b8109bfb15948ed66056ae0b6f1e","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.0-canary-24-22.0.tgz","fileCount":7,"unpackedSize":27967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo83QSv4Rmq7D2ckWrJt7mPMWlzVH/RGfa8k4PFdvKHgIgJ5LFAzIs7fsKeeuTwxxLsUy1egsKwKm3Ccb0UlfgAyo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijezgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUOw//QZKpMlL4BU2nO0nvD7GoQx0w8wrF5kwLWLD/E5PK2YQdDhrY\r\njj+Ha9wIC9K9YPMlohOvy0ujzJtlBKkhrqwW/El8tHN6auMJ024AMBtlS/Ec\r\nccvVfQ3Y711Mic5k/gWfL+fwuz/vbJtdO/AlSW+FsGli3trIkx+hC+/EVO6j\r\nm8e6xzNgTDYJGsALjHAsnh+DJ8Y/e6GxD/frMiuDpbNSwq3fjaelWGbGebSA\r\n37HKRulVsNZb1yOOuAT/Avrj32SS2hJGXnAb2G81CLzUGDPzhrug3vnQ6UFW\r\nELTpPEG/Orty6zYkJQeF9gCFkuYuE5pJcF/utJGqx3BHVcUuQzCOyDZR7ETP\r\nXXwYIVHcVlivm+Mz+YjxQj5BtIAexX8Rx8CUIlz02VsRMLzQxerfuGA77dSt\r\naXL2wFOJU5HmdTZPG+AffE7xpTSYqZs0boWrYz/wfX9cERlPgERBHr28Ie1p\r\nKiF7NYvKi5+d4jxYk696r+DWamKD9mcxqGbFD3pGuQk6gY4Dt5LP1mLieRp8\r\n99x1FOOgNS4Qd7/3yWHtAj4QNlS78nNBFgcmIXuKI6ytakaW0oenOWaiO3ei\r\nKKXMV2hZgM0vaH5Y8C2KGY4USJq0Z9JzRVEDN6939FSE/H+al6hOhxuIbFQo\r\nW2mP78EB6LV3Tsan6i/WjOTHwTTtmC1zKl4=\r\n=6kdw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0-canary-24-22.0_1653468384327_0.3212844172670486"},"_hasShrinkwrap":false},"1.0.0-canary-24-23.0":{"name":"@asemirsk/ui","version":"1.0.0-canary-24-23.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run build:lib && npm run build:css && npm run copy","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-canary-24-23.0+2cab1ea","@asemirsk/fclasses":"1.0.0-canary-24-23.0+2cab1ea","autoprefixer":"^10.4.2","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.4.12"},"devDependencies":{"postcss-cli":"9.1.0","tailwindcss":"^3.0.23","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"2cab1eaf4ac4d1a8ef3ef53ba3228ff16f7504eb","readme":"# `@asemirsk/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@asemirsk/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block bl-material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@asemirsk/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.0-canary-24-23.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-VlVW6CV3b2KMO9znTgmGD8pjcf37QjluvgFzaDrC7qRs0dHmZwduNXZ8ePrpjlbAqn6Fmwqd2J3Wi3YLSaMWQg==","shasum":"071ef4cd4976bae1756c096471625a67ba32db6c","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.0-canary-24-23.0.tgz","fileCount":21,"unpackedSize":11021415,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqphNDZY7nQWh37Ie3+z6XRA6dKL89BD3C1NsLLmZiYAIhANzXirOfqHQQb5MW/+HVPJshrm8/uHcYTHyXnLkh3QTX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijfHuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9ABAAghJSqHM2ZmmHUT4FS/oVhO6M0omT7wffaHNQiKIOSdY1zy+c\r\nCokxW+/Ns0FDan2NwytZ6F4DrnmPvi6q3c4++dfNO7RJPOMIi5sh6T2lzom1\r\npcYogQdlrkY+WFytqI7UrYLgi3F5XbIhFsI9PcWTL1ZTihHiy76ACus/781s\r\nnDJnTJMuPmd3gUAVHI1xE7KWSwVSpmWSp2Snaw8nGmAqlKsbZjFfzMSIaY+o\r\n45YjeHtSvGZ2lyj/wHGWK+Uy8S/1gtpLpjbSNpzjITBMBZnIVJX3FgRTybBV\r\niLyJlYnAq3PTEdAXEPccQPqMoRB3WQTV6XFewuCWjVL5N8bSz/aFxLYeGFZt\r\nv6t+yxCInV6LuVomw+KkmD/wf613e88bzNA2x6RFKa7uDIjgXBqOGkweuOSq\r\nJvvAPxQ8b46MT7zW4r3alfCZ25qRqPN53t8JOknu+L5wCqK89+dkMcB43YIr\r\ncuQK4L77AelJn/97mQyylIn1NG6nkX3Q7MY+IvxbEXH1ZQpACW7jRZ9te7xL\r\ngVQlDiA7ZqIpWimzVyJiBhpJV0gZ56rW90LPHR+dFYbGZd1Mnxz5MGyEkVMU\r\nmJUQ0SSLKmAMazJb06mPkjfw6WUAPKnh8eWZb0q2ku1eYkELOuglzT2Bl9SD\r\nT78dPXpJXDa6wfITtjMAMutQlcBepTR7l70=\r\n=griO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0-canary-24-23.0_1653469678083_0.8761257387411516"},"_hasShrinkwrap":false},"1.0.0-canary-24-24.0":{"name":"@asemirsk/ui","version":"1.0.0-canary-24-24.0","description":"Common default UI elements for BodilessJS","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":["*.css"],"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run build:lib && npm run build:css && npm run copy","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","build:css":"postcss index.tailwind.css -o ./src/bodiless.index.css","copy":"copyfiles -u 1 \"./src/*.css\" \"./lib/\"","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\""},"dependencies":{"@asemirsk/core":"1.0.0-canary-24-24.0+af2c8ac","@asemirsk/fclasses":"1.0.0-canary-24-24.0+af2c8ac","autoprefixer":"^10.4.2","informed":"^3.34.0","lodash":"^4.17.19","postcss":"^8.4.12"},"devDependencies":{"postcss-cli":"9.1.0","tailwindcss":"^3.0.23","tailwindcss-dir":"^4.0.0"},"peerDependencies":{"rc-tooltip":"^5.1.1","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"af2c8ace172b3dc3a1f237c51eb55be1e21978bb","readme":"# `@asemirsk/ui`\n\nThis package contains shared UI elements for the default Bodiless edit\ninterface. UI elements which are used by more than one Bodiless package should\nbe defined here.\n\n## Exposing an \"injectible\" UI.\n\nIn general, any Bodiless component which exposes an edit interface or other\nadministrative UX should allow injection of the UI elements it needs by\naccepting a `ui` prop. The value for this prop should be a keyed set of\ncomponents. The structure of this object should be defined by a `UI`\ninterface. For example, consider a component which renders a message:\n\n```\ntype FullUI = {\n Wrapper: ComponentType> | string,\n Text: ComponentType> | string,\n DismissButton: ComponentType> | string,\n Icon: ComponentType> | string.\n};\n\nexport type UI = Partial;\n\nexport type Props = {\n message: string,\n icon: string,\n ui?: UI,\n};\n\nconst defaultUI: FullUI = {\n Wrapper: 'div',\n Text: 'span',\n DismissButton: 'button',\n Icon: 'i',\n};\n\nconst getUI = (ui: UI) => ({ ...defaultUI, ...ui });\n\nexport const MessageBox = ({ message, icon, ui }) => {\n const { Wrapper, Text, DismissButton, Icon } = getUI(ui);\n return (\n \n {icon}\n {message}\n \n \n );\n};\n```\n\n## Implementing the UI\n\nA library can now implement the UI by wrapping the \"clean\" version of the component\nwith a version which provides styled UI elements (the following example uses the `fclasses`\nlibrary to style using tailwind classes):\n\n```\nimport { stylable, addClasses } from '@asemirsk/fclasses';\nimport { MessageBox as CleanMessageBox, Props } from 'messagebox';\n\nconst Div = stylable>('div');\nconst Span = stylable>('span');\n\nconst ui: UI = {\n Wrapper: addClasses('bg-black text-white')(Div);\n Icon: addClasses('block bl-material-icon text-xl')(Span);\n};\n\nexport const MessageBox: FC = props = ;\n```\n\nNote - here we only provide overrides for two out of the four elements. The\nothers will fall back to their defaults.\n\n## Default UI\n\nEach package in the bodiless ecosystem should have a corresponding `-ui`\npackage which exports a default implementation of the UI for any admin\nor editorial interfaces it supplies. Wherever possible, this package\nshould make use of shared elements from this basic `bodiless-ui` package.\n\n## Components\n\n### <Spinner />\n\nAdds the spinner, which centers itself based on its container's dimensions.\n\nYou can also override the width and height if you want a bigger or smaller spinner by adding more style rules to the exposed `.bodiless-spinner` class [here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/bodiless-ui/src/Spinner.css). \n\n*Properties*\n\n|Name|Type|Default|Description|\n|-----|-----|-----|-----|\n|color |String | |The css class name, used to control a color of the spinner. |\n\n*Usage:*\n\n```tsx\nimport { Spinner } from '@asemirsk/ui';\nimport React, { Component } from 'react';\n\nexport default class Example extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n``` \n## Bodiless classes\n\nBodiless uses tailwind for the styling of bodiless editor. A site built with this tool also uses\ntailwind for site styling. This leads to two tailwind configs in use. Bodiless tailwind config\nresides in `packages/bodiless-ui/bodiless.tailwind.config.js`. We have prefaced it with the prefix `bl-`\nto isolate styling needed for the Bodiless editor. The site’s `tailwind.config.js` resides at site\nlevel (i.e. `examples/test-site or examples/starter`) and this is also built. Therefore we introduce\ntwo css files within the edit mode: prefixed (`bs-`) for bodiless editor and non-prefixed for the\nsite. The static mode would only serve the non-prefixed (at this point in time it is a future\nenhancement to remove the bodiless editor from static build).\n\nThe recommended guideline is to prefix any bodiless editor styling with `bl-` and any site level\nstyling without the prefix to continue this separation.\n\n## Technical Details\n\nThe default `tailwind.config` uses `rem` based grid styling system for paddings, margins, etc. While\n`rem`s may be good for `font-size` it brings some level of inconsistency when it used for margins,\npaddings, widths, etc. since it is based on the body font-size. In this PR we configured our\n`bodiless.tailwind.config` to use `px` instead of `rem`. It has a basic `5px` grid system ( all\nmargins, paddings, widths, etc. are measured with increments of 5 ) and can be extended as we need.\n\nSpacing class names are prefixed with `grid-{number}` prefix where ``{number}`` represents a\nmultiples of 5s. For example ``.bl-m-grid-2`` would be `margin: 10px`.\n\nThis grid system is broken down into multiple logical pieces to minimize the 'css' file size since\nnot all of the tailwind elements might need all of the values from the grid system. These parts\ninclude:\n\n* `defaultGrid` - For general use throughout the app.\n* `xlGrid` - Extra Large values that are\nhandy when we work with max-width, max-height etc.\n* `negativeGrid` - Useful when we need negative\nmargins or with top, bottom, left, right styles.\n* `percentGrid` - For the places where we need %\nvalues. (`bl-w-full` --> ``width: 100%``).\n\n### Use Case\n\nWe may not want to use all of the values from this grid system in certain `tailwind`\nelements to save some file `kb`. For example, we may not need the `defaultGrid` and `negativeGrid`\nvalues for `maxWidth` since these are small so we only include `xlGrid` and/or `percentGrid` for\n`maxWidth`:\n\n````\nmaxWidth: {\n ...xlGrid, ...percentGrid,\n}, \n```` \n\n#### Class Name Examples\n\n* ``.bl-p-grid-1`` --> ``padding: 5px;`` (`defaultGrid` values) \n* ``.bl-mt-xl-grid-0`` --> ``margin-top: 100px;`` (`xlGrid` values) \n* ``.bl--top-grid-4`` --> ``top: -20px;`` (`negativeGrid` values) \n* ``.bl-w-full`` --> ``width: 100%;`` (`percentGrid` values )\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@asemirsk/ui@1.0.0-canary-24-24.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-076Li1M1GR96TxOqr8uxOb19D8Piv830DYu66Le7ljVH6kFQQ6igDzlRl3JTp33STKwy+4ZnHSU6VaOq3OOHig==","shasum":"01a41432c8e02b45b35c186957067c0f316ea7ea","tarball":"https://registry.npmjs.org/@asemirsk/ui/-/ui-1.0.0-canary-24-24.0.tgz","fileCount":21,"unpackedSize":11021415,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgQ9L/sHvuaUZFybuokEkMKR8JUryWviehP721oKKWDgIhAPJX5C6hHqYY8nzzrC6Si2R/BO1q2xRzr79hSaBy3ljS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijfRCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCzxAAnFL04MljXoD2kE+jMs+eDvN9CaM9SvF0Bs/kuY1fRjVYkHl/\r\nfOhri0WEbk0r+aJSQDHUs52NFBlQnvhY2St94v1t+TUar9q1P0Dt2eQzEqom\r\nXdvW/S3BidnJZE4PqrvM12S1+gNze0Y59WRosnSjG0NJTfUySOgR+4qPcS5m\r\nzRLR9me3jG+/vh/91hqgPKVPC4DuLSxaCaqkYsSSrwWa9k90IXaQuWBOjzna\r\n4CCjyWA7Fnqc6yX6mtd2TWHv7FC3dw9oKljO0mTdA0uc42sPf6Y5fuJ1rNSr\r\nkPntS761H9c2TQWCOeFBezkg4fOV5vQwV1pF2fOq1kmGr8Z2YbUABGU0VJ3S\r\n91Kw0fZLyfAYmtwmOnZLGs4to1bYGf2Nh8E07OTWMjilOH2Vm/6w7mtn6oHj\r\nxQwWlWjZt5qaDWya7Oqbo1SpvR7VMVvHePTcA7I6YF4Mp1vxopPx42bxp5v8\r\ncbMiZf4fs8Xy9h7t+dKiGy5iwgHkMGk5UMkaMRla6w9TEje1F0f8ItWEBpWb\r\nCMuSxxo4e/SWrNNM0bRVn/QbCHBFtslN3rbzGp6uhvDMf5gf/iy6TY4Vsuq5\r\njw73ng9e75HPjF+qYaIiF8QANMa8kOg94/yW6FnMzuTBpFCej+AtRzBZHHbf\r\nvBUdqtqXp3wivo7WcJoCksfLY1OzpcpyUzU=\r\n=+K/6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asemirsk","email":"al.semirski@gmail.com"},"directories":{},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_1.0.0-canary-24-24.0_1653470274278_0.37260368607069094"},"_hasShrinkwrap":false}},"maintainers":[{"name":"asemirsk","email":"al.semirski@gmail.com"}],"description":"Common default UI elements for BodilessJS","homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}