This repository has been archived by the owner on Apr 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #35 from gnosis/development
Release 0.2.0
- Loading branch information
Showing
42 changed files
with
2,518 additions
and
1,552 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,11 @@ | ||
| { | ||
| "extends": ["react-app", "prettier", "prettier/react", "plugin:import/errors"], | ||
| "plugins": ["prettier", "import"], | ||
| "parserOptions": { | ||
| "ecmaVersion": 9 | ||
| } | ||
| } | ||
| "parser": "@typescript-eslint/parser", | ||
| "extends": [ | ||
| "react-app", | ||
| "prettier", | ||
| "prettier/react", | ||
| "plugin:import/errors", | ||
| "plugin:@typescript-eslint/recommended" | ||
| ], | ||
| "plugins": ["prettier", "import"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,108 @@ | ||
| # safe-react-components | ||
|
|
||
| [Live example](https://components.gnosis-safe.io/) | ||
|  | ||
|  | ||
|  | ||
|
|
||
| This repository contains a set of React components written in typescript. | ||
|
|
||
| These components are being used to build the [Safe Multisig](https://github.com/gnosis/safe-react) web and desktop app. | ||
|
|
||
| As Safe Multisig allows to integrate third party applications ("Safe Apps"), these components can also be used to build Safe Apps with the following benefits: | ||
|
|
||
| - **Native feel:** Build your Safe Apps with a similar style as the one used Safe-multisig. This makes your Safe Apps feel almost like a native feature of the Safe Multisig. | ||
| - **Responsive:** Most of the components will are optimized to render properly in different resolutions. | ||
| - **Blockchain-focused:** Some components solve common blockchain-related problems like inputs for ETH addresses and bigNumbers, identicon images, and more. | ||
| - **Save time:** No need to build all components from scratch. | ||
|
|
||
| ## How to install | ||
|
|
||
| ```bash | ||
| yarn add @gnosis.pm/safe-react-components | ||
|
|
||
| npm install @gnosis.pm/safe-react-components | ||
| ``` | ||
|
|
||
| ## Integration | ||
|
|
||
| This library makes use of [material-ui - 4.X.X](https://material-ui.com/) and [styled-componentes - 5.X.X]() as `peer dependencies`, this means you must install it in your Safe App. Make sure to provide the same version as the one being used by the current version of this library. | ||
|
|
||
|
|
||
| Once everything is installed, you have to instantiate a [ThemeProvider](https://styled-components.com/docs/api#themeprovider) from [styled-components](http://styled-components.com/). | ||
|
|
||
| This example uses the theme exported by safe-react-components. Here, you can extend this theme to customize it to your needs. | ||
|
|
||
| ```js | ||
| import { ThemeProvider } from 'styled-components'; | ||
| import { theme } from '@gnosis.pm/safe-react-components'; | ||
|
|
||
| import App from './App'; | ||
|
|
||
| export default () => ( | ||
| <ThemeProvider theme={theme}> | ||
| <App /> | ||
| </ThemeProvider> | ||
| ); | ||
| ``` | ||
|
|
||
| ### Using the same fonts as Safe-multisig | ||
|
|
||
| If you want your app to have the same fonts as the one used by Safe Multisig you need to do the following. | ||
|
|
||
| ```js | ||
| import { createGlobalStyle } from 'styled-components'; | ||
| import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'; | ||
| import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'; | ||
|
|
||
| const GlobalStyle = createGlobalStyle` | ||
| @font-face { | ||
| font-family: 'Averta'; | ||
| font-display: swap; | ||
| src: local('Averta'), local('Averta Bold'), | ||
| url(${avertaFont}) format('woff2'), | ||
| url(${avertaBoldFont}) format('woff'); | ||
| } | ||
| `; | ||
|
|
||
| export default GlobalStyle; | ||
| ``` | ||
|
|
||
| And then include it in the root of your Safe App. | ||
|
|
||
| ```js | ||
| import React from "react"; | ||
| import ReactDOM from "react-dom"; | ||
| import GlobalStyles from './global'; | ||
|
|
||
| import App from './App'; | ||
|
|
||
| ReactDOM.render( | ||
| <> | ||
| <GlobalStyles /> | ||
| <App> | ||
| </>, | ||
| document.getElementById('root') | ||
| ); | ||
| ``` | ||
|
|
||
| ## Using the components | ||
|
|
||
| You can import every component exported from @gnosis.pm/safe-react-components in the same way. | ||
|
|
||
| ```js | ||
| import { Text } from '@gnosis.pm/safe-react-components'; | ||
|
|
||
| const App = () => { | ||
| return <Text size="lg">some text</Text>; | ||
| }; | ||
|
|
||
| export default App; | ||
| ``` | ||
|
|
||
| ## Storybook | ||
|
|
||
| You can find documentation and examples of all our components in this [storybook](https://components.gnosis-safe.io/). | ||
|
|
||
| ## Examples | ||
|
|
||
| At Gnosis we have developed some example Safe Apps. Here is the [repository](https://github.com/gnosis/safe-react-apps). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React from 'react'; | ||
|
|
||
| export default { | ||
| sm: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 16 16"> | ||
| <g fill="none" fillRule="evenodd"> | ||
| <path d="M0 0H16V16H0z" /> | ||
| <path | ||
| className="icon-color" | ||
| fillRule="nonzero" | ||
| d="M8.026 2.196c1.596-1.595 4.182-1.595 5.777 0 1.543 1.543 1.594 4.012.155 5.615l-.155.163-2.013 2.013c-1.512 1.512-3.933 1.599-5.548.21-.418-.36-.466-.99-.106-1.41.36-.418.991-.466 1.41-.106.777.668 1.922.666 2.697.013l.133-.122L12.39 6.56c.815-.813.815-2.134 0-2.948-.814-.815-2.134-.815-2.949 0-.39.39-1.023.39-1.414 0-.39-.39-.39-1.024 0-1.415z" | ||
| /> | ||
| <path | ||
| className="icon-color" | ||
| fillRule="nonzero" | ||
| d="M4.21 6.014c1.494-1.495 3.879-1.599 5.496-.256.425.353.483.983.13 1.408-.325.392-.887.472-1.306.205l-.102-.074c-.778-.646-1.908-.635-2.673.01l-.132.122L3.611 9.44c-.814.814-.814 2.134 0 2.949.814.814 2.135.814 2.95 0 .39-.391 1.023-.391 1.413 0 .39.39.39 1.023 0 1.414-1.595 1.595-4.183 1.595-5.777 0C.655 12.26.603 9.794 2.043 8.189l.154-.163L4.21 6.014z" | ||
| /> | ||
| </g> | ||
| </svg> | ||
| ), | ||
| md: ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24"> | ||
| <g fill="none" fillRule="evenodd"> | ||
| <path d="M0 0H24V24H0z" /> | ||
| <path | ||
| className="icon-color" | ||
| fillRule="nonzero" | ||
| d="M11.795 4.229l.599-.58c2.198-2.198 5.761-2.198 7.959 0 2.139 2.139 2.197 5.57.173 7.779l-.173.18-3.019 3.02c-2.197 2.196-5.76 2.196-7.959 0-.212-.212-.406-.44-.579-.68-.323-.447-.223-1.072.225-1.396.447-.323 1.072-.223 1.396.225.11.153.235.3.372.436 1.366 1.366 3.552 1.414 4.976.147l.155-.146 3.018-3.02c1.418-1.417 1.418-3.714 0-5.131-1.366-1.366-3.55-1.415-4.985-.136l-.157.147-.61.591c-.396.384-1.03.374-1.414-.022-.354-.367-.373-.934-.062-1.322l.085-.092z" | ||
| /> | ||
| <path | ||
| className="icon-color" | ||
| fillRule="nonzero" | ||
| d="M6.667 9.376c2.198-2.198 5.762-2.198 7.96 0 .156.155.3.318.436.488.342.433.269 1.062-.164 1.405-.433.343-1.062.27-1.405-.164-.087-.11-.18-.215-.28-.315-1.367-1.366-3.553-1.415-4.978-.146l-.155.146-3.018 3.018c-1.417 1.417-1.417 3.714 0 5.132 1.366 1.367 3.55 1.415 4.972.15l.155-.146.753-.763c.388-.393 1.02-.397 1.414-.009.363.358.394.925.092 1.32l-.083.094-.757.768c-2.199 2.198-5.762 2.198-7.96 0-2.139-2.14-2.197-5.57-.174-7.78l.173-.18 3.02-3.018z" | ||
| /> | ||
| </g> | ||
| </svg> | ||
| ) | ||
| }; |
Oops, something went wrong.