{"_id":"@bertilxi/decentraland-ui","name":"@bertilxi/decentraland-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bertilxi/decentraland-ui","version":"0.1.0","description":"Decentraland's UI components and styles","main":"lib/index.js","module":"dist/index.js","typings":"lib/index.d.ts","scripts":{"test":"jest","start":"node --openssl-legacy-provider ./node_modules/.bin/start-storybook -p 6006","build":"npm run build:lib && npm run build:dist ","build:lib":"rimraf lib && node --openssl-legacy-provider ./node_modules/.bin/webpack --config webpack.config.js","build:storybook":"node --openssl-legacy-provider ./node_modules/.bin/build-storybook && cp ./static/* ./storybook-static && node postbuild","build:dist":"rimraf dist && tsc -p . -d --outDir dist --declarationDir dist --sourceMap false --skipLibCheck && postcss --base src --dir dist 'src/**/*.css'","check:prettier":"prettier -c 'src/**/*.{js,ts,json,yml,md,tsx,html,css}'","check:code":"eslint . --max-warnings=0","fix:code":"npm run check:code -- --fix","fix:prettier":"prettier --write ./src","now-build":"build-storybook && cp ./static/* ./storybook-static && mv ./storybook-static ./public","semantic-release":"semantic-release","commitmsg":"validate-commit-msg"},"repository":{"type":"git","url":"git+https://github.com/decentraland/ui.git"},"keywords":["decentraland","ui","react","semantic-ui","components","styles","themes"],"author":{"name":"Decentraland"},"license":"MIT","bugs":{"url":"https://github.com/decentraland/ui/issues"},"homepage":"https://github.com/decentraland/ui#readme","devDependencies":{"@storybook/addon-a11y":"^6.5.16","@storybook/addon-essentials":"^6.5.16","@storybook/addon-storysource":"^6.5.16","@storybook/builder-webpack4":"^6.5.16","@storybook/react":"^6.5.16","@storybook/source-loader":"^6.5.16","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^12.1.5","@testing-library/user-event":"^12.1.5","@types/deep-equal":"^1.0.1","@types/jest":"^28.1.3","@types/react":"^16.4.1","@types/react-test-renderer":"^16.0.1","@typescript-eslint/eslint-plugin":"4.26.0","@typescript-eslint/parser":"4.26.0","autoprefixer":"^9.7.4","babel-loader":"^8.3.0","copy-webpack-plugin":"^5.1.1","css-loader":"^2.1.1","cssnano":"^4.1.10","eslint":"7.28.0","eslint-config-prettier":"8.3.0","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","mini-css-extract-plugin":"^0.7.0","postcss":"^8.4.32","postcss-assets":"^5.0.0","postcss-cli":"^7.1.2","postcss-copy":"^7.1.0","postcss-loader":"^3.0.0","postcss-preset-env":"^6.6.0","postcss-svg":"^3.0.0","prettier":"^2.3.1","rimraf":"^2.7.1","semantic-release":"^15.13.24","storybook":"^6.5.16","style-loader":"^0.23.1","ts-jest":"^28.0.8","ts-loader":"^6.0.2","typescript":"^4.6.4","url-loader":"^2.0.0","webpack":"^4.33.0","webpack-cli":"^3.3.2"},"dependencies":{"@dcl/schemas":"^16.0.0","@dcl/ui-env":"^1.5.1","balloon-css":"^0.5.0","classnames":"^2.3.2","dayjs":"^1.11.10","deep-equal":"^2.0.5","ethereum-blockies":"^0.1.1","events":"^3.3.0","fp-future":"^1.0.1","mitt":"^3.0.1","parallax-js":"^3.1.0","react":"^18.3.1","react-dom":"^18.3.1","react-responsive":"^9.0.0-beta.3","react-semantic-ui-datepickers":"^2.17.2","react-tile-map":"^0.4.1","recharts":"^2.3.2","semantic-ui-css":"^2.4.1","semantic-ui-react":"^2.0.3","uuid":"^9.0.1"},"engines":{"node":">=18"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"publishConfig":{"provenance":false},"_id":"@bertilxi/decentraland-ui@0.1.0","gitHead":"06ffe10ea1dcd2464d4608423657a0d369b28d57","_nodeVersion":"22.13.1","_npmVersion":"11.1.0","dist":{"integrity":"sha512-y+ktCP07sTQI3pORJjAc146JtaxOil3bZtuxZNjolQTAcFAmQzpu4cGf7CLa612DpcfZbrlDTCM/nL5YmUq2jQ==","shasum":"267e9bb309544ad07fe2b4a70157aad0a397dd8e","tarball":"https://registry.npmjs.org/@bertilxi/decentraland-ui/-/decentraland-ui-0.1.0.tgz","fileCount":1918,"unpackedSize":18967507,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBlc6zTcsJjhi4s5hNha63bYXO4h2WseGP9SnGZAhmU4AiA6cH1QlZMNuxOTAf3qxzRtw5OkxiReFTnBc4+Mx7a69g=="}]},"_npmUser":{"name":"bertilxi","email":"bertilxi@gmail.com"},"directories":{},"maintainers":[{"name":"bertilxi","email":"bertilxi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/decentraland-ui_0.1.0_1738989701807_0.9948932982683019"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-08T04:41:41.725Z","0.1.0":"2025-02-08T04:41:42.447Z","modified":"2025-02-08T04:41:42.695Z"},"maintainers":[{"name":"bertilxi","email":"bertilxi@gmail.com"}],"description":"Decentraland's UI components and styles","homepage":"https://github.com/decentraland/ui#readme","keywords":["decentraland","ui","react","semantic-ui","components","styles","themes"],"repository":{"type":"git","url":"git+https://github.com/decentraland/ui.git"},"author":{"name":"Decentraland"},"bugs":{"url":"https://github.com/decentraland/ui/issues"},"license":"MIT","readme":"<img src=\"https://ui.decentraland.org/decentraland_256x256.png\" height=\"128\" width=\"128\" />\n\n# Decentraland UI [![CircleCI](https://circleci.com/gh/decentraland/ui.svg?style=svg)](https://circleci.com/gh/decentraland/ui) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nThis is basically `semantic-ui-react` themed with Decentrland's look & feel + some of our own components\n\nSee: [ui.decentraland.org](https://ui.decentraland.org)\n\n## Usage\n\nInstall it:\n\n```bash\nnpm install --save decentraland-ui\n```\n\nImport Decentraland UI's styles in your App's entry point\n\n```jsx\nimport 'decentraland-ui/lib/styles.css'\n```\n\nNow you can use Decentraland UI's components:\n\n```jsx\nimport React from 'react'\nimport { Button } from 'decentraland-ui'\n\nexport class MyApp extends React.Component {\n  render() {\n    return <Button>Sabe</Button>\n  }\n}\n```\n\n### Without React\n\nYou can also use `decentraland-ui` as a CSS framework just by adding this tag in your `<head>`:\n\n```html\n<link href=\"https://ui.decentraland.org/styles.css\" rel=\"stylesheet\" />\n```\n\nAnd then using [Semantic UI](https://semantic-ui.com/) classes like this:\n\n```html\n<button class=\"ui button\">Click me!</button>\n```\n\n🏌\n\n## Minimizing bundle size\n\nYou can import just the essential component and reduce the size of your bundles, like this:\n\n```jsx\n// import css\nimport 'semantic-ui-css/semantic.min.css'\nimport 'balloon-css/balloon.min.css'\nimport 'decentraland-ui/dist/themes/base-theme.css'\nimport 'decentraland-ui/dist/themes/alternative/light-theme.css'\n// or import 'decentraland-ui/dist/themes/alternative/dark-theme.css'\n\n// Then import just the components you will use\nimport Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid'\nimport { Button } from 'decentraland-ui/dist/components/Button/Button'\nimport { Card } from 'decentraland-ui/dist/components/Card/Card'\n```\n\n## Alternative themes\n\nYou can use one of our alternative themes by importing in after Decentraland UI's styles, like this:\n\n```jsx\nimport 'decentraland-ui/lib/styles.css'\nimport 'decentraland-ui/lib/dark-theme.css'\n```\n\nOr you can create your own theme like this:\n\n```css\n/* my-theme.css */\n:root {\n  /* global */\n  --background: #ffffff;\n  --danger: #ffa900;\n  --error: #ff0000;\n\n  /* buttons */\n  --primary: #ff2d55;\n  --secondary: #f3f2f5;\n  --primary-hover: #ff3d61;\n  --secondary-hover: #ecebed;\n\n  /* on modals */\n  --secondary-on-modal: #f3f2f5;\n  --secondary-on-modal-hover: #ecebed;\n  --card-on-modal: #ffffff;\n\n  /* text */\n  --text: #16141a;\n  --secondary-text: #676370;\n  --text-on-primary: #ffffff;\n  --text-on-secondary: #16141a;\n\n  /* ui */\n  --divider: #67637033;\n  --dropdown: #ffffff;\n  --dropdown-hover: #f3f2f5;\n  --popup: #16141a;\n  --popup-text: #ffffff;\n  --navbar-popup: #ffffff;\n  --navbar-popup-hover: #f3f2f5;\n  --card: #ffffff;\n  --outline: 1px solid #00000005;\n  --toast: #16141a;\n  --toast-text: #ffffff;\n  --modal: #ffffff;\n  --dimmer: #ffffffdd;\n  --clear-divider: #a09ba8;\n\n\n  /* shadows */\n  --shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);\n  --shadow-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);\n  --shadow-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.16);\n  --shadow-4: 0px 8px 16px 12px rgba(0, 0, 0, 0.1);\n\n  --shadow-color-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);\n  --shadow-color-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);\n  --shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.24);\n\n  /* svgs */\n  --brightness: brightness(0.1); /* black svgs */\n}\n```\n\n## Development\n\nPrerequisites: Node.js v16 (or compatible)\n\nInstall dependencies and start Storybook:\n\n```\n$ npm install\n$ npm start\n```\n\n## CI/CD\n\nWe deploy automatically to [ui.decentraland.org](https://ui.decentraland.org) and release a new version via `semantic-release`\n","readmeFilename":"README.md"}