{"id":21280823,"url":"https://github.com/consensysmesh/rimble-web3-components","last_synced_at":"2025-07-11T10:32:51.805Z","repository":{"id":42353171,"uuid":"180890839","full_name":"ConsenSysMesh/rimble-web3-components","owner":"ConsenSysMesh","description":"React components for web3 that help developers build dApps faster with better user experiences","archived":false,"fork":false,"pushed_at":"2023-01-03T19:33:10.000Z","size":1725,"stargazers_count":35,"open_issues_count":22,"forks_count":7,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-14T11:14:59.664Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rimble-web3-components.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ConsenSysMesh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-11T23:00:32.000Z","updated_at":"2023-08-13T04:32:49.000Z","dependencies_parsed_at":"2023-02-01T09:16:21.130Z","dependency_job_id":null,"html_url":"https://github.com/ConsenSysMesh/rimble-web3-components","commit_stats":null,"previous_names":["consensys/rimble-web3-components"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Frimble-web3-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Frimble-web3-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Frimble-web3-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Frimble-web3-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ConsenSysMesh","download_url":"https://codeload.github.com/ConsenSysMesh/rimble-web3-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225715945,"owners_count":17512908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T10:41:15.207Z","updated_at":"2024-11-21T10:41:17.537Z","avatar_url":"https://github.com/ConsenSysMesh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rimble Web3 Components\n\nRimble Web3 Components provides drop-in React components using [Rimble-UI](https://github.com/ConsenSys/rimble-ui) for common UX patterns in decentralized applications. This monorepo includes a utility library and independently versioned packages for each of these components.\n\n## Requirements\n\n[Node](https://nodejs.org/en/) - [OS-dependent install instructions](https://nodejs.org/en/)\n\n[Yarn](https://yarnpkg.com/en/) - [OS-dependent install instructions](https://yarnpkg.com/en/docs/install)\n\n## Quick Start with Storybook Preview\n\nThis repo utilizes Storybook for component visualization and testing.\n\n```console\n// Clone the repo\ngit clone git@github.com:ConsenSys/rimble-web3-components.git\n\n// Change into the repository root\ncd rimble-web3-components\n\n// Install all dependencies from repository root directory\nyarn install\n\n// Watch for changes to all packages and automatically rebuild all packages. Use this with the `start storybook` command to preview components during development.\n\nyarn start\n```\n\nOpen a second terminal window\n\n```console\n// From a different terminal session, change directory to Storybook inside the root repository\ncd storybook\n\n// Install Storybook\nyarn install\n\n// Start Storybook\nyarn storybook\n```\n\nYou can now edit components that are in the `/package` directory and the changes will update in storybook.\n\n## Monorepo structure\n\n```text\n├── node_modules\n├── packages\n│   ├── ConnectionBanner\n│   │   ├── src\n│   │   ├── test\n│   │   ├── babel.config.js\n│   │   ├── eslint.config.js\n│   │   ├── jest.config.js\n│   │   ├── prettier.config.js\n│   │   ├── package.json\n│   │   └── task -\u003e ../../scripts/task\n│   ├── NetworkIndicator\n│   │   └── ... (same for all components)\n│   ├── Utils\n│   │   ├── src\n│   │   ├── test\n│   │   ├── babel.config.js\n│   │   ├── eslint.config.js\n│   │   ├── jest.config.js\n│   │   ├── prettier.config.js\n│   │   ├── package.json\n│   │   └── task -\u003e ../../scripts/task\n│   └── ...\n├── scripts\n│   └── task\n├── babel.config.js\n├── eslint.config.js\n├── jest.config.js\n├── lerna.json\n├── lint-staged.config.js\n├── package.json\n├── prettier.config.js\n└── rollup.config.js\n```\n\n### Monorepo organization\n\n- Yarn handles dependencies\n  - Root package defines shared development tooling (lint, prettier, babel)\n    - Default base config files for each tool exist in root\n    - Config files are shared by all packages\n  - Each package is for a releasable component or library\n    - All packages share same structure and tooling\n    - Config files for each tool are import defaults from root\n    - Config files for any tool can be extended for individual package needs\n    - Symlinks to a common `task` script that defines how tools are invoked by lerna\n    - Each package is versioned independently via the `lerna publish` command\n- Rollup transpiles via babel releasable packages\n- Lerna handles multiple package tasks (test, lint, publish)\n\n## Prepary packages for Pull Request or publishing\n\nBootstrap packages with lerna\n\n`lerna bootstrap`\n\nRun linting on all packages\n\n`lerna run lint`\n\nRun tests on all packages\n\n`lerna run test`\n\nCompile libraries with Rollup\n\n`yarn build`\n\nCommit changes to libraries\n\n`git commit -am “commit message”`\n\nVersion and publish updated packages to NPM\n\n`lerna publish`\n\n### Peer dependencies\n\n- rimble-ui\n\n  `yarn add rimble-ui`\n\n- styled-components\n\n  `yarn add styled-components`\n\n- prop-types\n\n  `yarn add prop-types`\n\n### Misc\n\nTo publish a new package to NPM you must first manually create the package via the command line.\n\n`npm publish --access public`\n\n## Developing new locally\n\n1.  Create new folder in the /packages directory\n1.  Add required files and structure (generator coming soon)\n1.  Code component\n1.  Create new component folder in `/storybook/src/stories`\n1.  Create new story for component\n1.  Import component to new story using relative paths\n\nPull requests will automatically generate an atomic build that is hosted on Netlify. The link to the hosted version will be posted in the PR.\n\n## Using components locally in another repo\n\n1.  Create link to local component in rimble-web3-components repository\n\n    ```console\n    cd packages/ConnectionBanner\n    yarn link\n    ```\n\n2.  Link to local component in rimble-app-demo repository\n\n    ```console\n    yarn link @rimble/connection-banner\n    ```\n\n3.  Modify webpack to [fix multiple issues of styled-components](https://www.styled-components.com/docs/faqs#how-can-i-fix-issues-when-using-npm-link-or-yarn-link)\n\n### If using create-react-app, follow these steps to resolve multiple instances of styled-component:\n\n1.  Need to customize webpack, but don’t want to eject:\n\n    - https://github.com/timarney/react-app-rewired/\n    - https://github.com/aze3ma/react-app-rewire-aliases\n\n2.  Add packages:\n\n    `yarn add -D react-app-rewired react-app-rewire-aliases`\n\n3.  Create new file in root directory:\n\n    `config-overrides.js`\n\n4.  Paste snippet in config-overrides.js:\n\n    ```js\n    const rewireAliases = require('react-app-rewire-aliases');\n    const { paths } = require('react-app-rewired');\n    const path = require('path');\n\n    /* config-overrides.js */\n    module.exports = function override(config, env) {\n      config = rewireAliases.aliasesOptions({\n        'styled-components': path.resolve(\n          `${paths.appSrc}/../node_modules/styled-components`,\n        ),\n      })(config, env);\n      return config;\n    };\n    ```\n\n### Issues\n\n[Open an issue](https://github.com/ConsenSys/rimble-web3-components/issues) for any bugs or feature requests\n\n### Contributing\n\nWe are open source and welcome your [contributions](https://github.com/ConsenSys/rimble-web3-components/CONTRIBUTIONS.md) !\n\n### License\n\nMIT © [ConsenSys](https://github.com/ConsenSys)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconsensysmesh%2Frimble-web3-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconsensysmesh%2Frimble-web3-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconsensysmesh%2Frimble-web3-components/lists"}