Merge pull request #67 from gnosis/development

safe-react-components v0.3.0

.eslintrc

@@ -1,11 +1,22 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "react-app",
-    "prettier",
-    "prettier/react",
-    "plugin:import/errors",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
   ],
-  "plugins": ["prettier", "import"]
+  "plugins": ["react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off"
+  }
 }

.github/workflows/lint.yml

@@ -0,0 +1,9 @@
+name: 'my-workflow'
+on: [pull_request]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: bradennapier/eslint-plus-action@v3.4.0

.gitignore

@@ -16,6 +16,7 @@ yalc.lock
 /storybook-static
 
 # misc
+/.idea
 .DS_Store
 .env.local
 .env.development.local

.prettierrc

@@ -3,7 +3,7 @@
     "jsxBracketSameLine": true,
     "printWidth": 80,
     "singleQuote": true,
-    "trailingComma": "none",
+    "trailingComma": "es5",
     "tabWidth": 2,
     "useTabs": false
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",
@@ -16,6 +16,7 @@
     "build": "rimraf dist && webpack --mode production",
     "build-storybook": "build-storybook -s public --docs",
     "storybook": "start-storybook -p 9009 -s public --docs",
+    "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'",
     "prepare": "yarn build"
   },
   "author": "Gnosis (https://gnosis.pm)",
@@ -35,39 +36,37 @@
     "@storybook/addons": "5.3.19",
     "@storybook/preset-create-react-app": "2.1.2",
     "@storybook/react": "5.3.19",
-    "@testing-library/jest-dom": "5.11.0",
-    "@testing-library/react": "10.4.3",
-    "@testing-library/user-event": "10.3.1",
+    "@testing-library/jest-dom": "5.11.2",
+    "@testing-library/react": "10.4.7",
+    "@testing-library/user-event": "12.0.17",
     "@types/big.js": "^4.0.5",
     "@types/classnames": "^2.2.10",
-    "@types/jest": "26.0.3",
+    "@types/jest": "26.0.7",
     "@types/material-ui": "^0.21.7",
-    "@types/node": "14.0.14",
-    "@types/react": "16.9.41",
+    "@types/node": "14.0.27",
+    "@types/react": "16.9.43",
     "@types/react-dom": "16.9.8",
-    "@types/styled-components": "5.1.0",
+    "@types/styled-components": "5.1.1",
     "@types/yup": "0.29.3",
-    "@typescript-eslint/eslint-plugin": "^3.5.0",
-    "@typescript-eslint/parser": "^3.5.0",
+    "@typescript-eslint/eslint-plugin": "^3.7.1",
+    "@typescript-eslint/parser": "^3.7.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "8.1.0",
     "copy-webpack-plugin": "^5.1.1",
-    "eslint": "7.3.1",
+    "eslint": "7.5.0",
     "eslint-config-prettier": "6.11.0",
-    "eslint-config-react-app": "5.2.1",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.2",
-    "eslint-plugin-react-hooks": "4.0.4",
+    "eslint-plugin-react": "7.20.5",
+    "eslint-plugin-react-hooks": "4.0.8",
     "ethereum-blockies-base64": "^1.0.2",
+    "file-loader": "^6.0.0",
     "prettier": "2.0.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "rimraf": "^3.0.2",
     "styled-components": "5.1.1",
-    "typescript": "3.9.5",
+    "typescript": "3.9.7",
     "webpack": "4.43.0",
     "webpack-cli": "^3.3.10",
     "webpack-node-externals": "^1.7.2"

src/colors.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import { parseToHsl } from 'polished';
+
+import { Text, theme } from './index';
+
+const Grid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+`;
+
+const ColorWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 16px;
+`;
+
+const ColorDisplay = styled.div<{ color: string }>`
+  margin: 8px auto;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000000;
+  background-color: ${({ color }) => color};
+`;
+
+export default {
+  title: 'Colors',
+};
+
+export const ColorsSample = (): React.ReactElement => {
+  const colors = Object.keys(theme.colors)
+    .reduce((acc: { name: string; code: string }[], name: string) => {
+      if (typeof (theme.colors as Record<string, unknown>)[name] === 'string') {
+        acc.push({
+          name,
+          code: ((theme.colors as Record<string, unknown>)[
+            name
+          ] as string).toUpperCase(),
+        });
+      }
+      return acc;
+    }, [])
+    .sort(
+      ({ code: colorA }, { code: colorB }) =>
+        parseToHsl(colorA).lightness - parseToHsl(colorB).lightness
+    );
+
+  return (
+    <Grid>
+      {colors?.map(({ name, code }) => (
+        <ColorWrapper key={name}>
+          <ColorDisplay color={code} />
+          <Text size="md" center>
+            {name}
+          </Text>
+          <Text size="md" center>
+            {code}
+          </Text>
+        </ColorWrapper>
+      ))}
+    </Grid>
+  );
+};

src/dataDisplay/Card/card.stories.tsx

@@ -7,11 +7,11 @@ export default {
   title: 'Data Display/Card',
   component: Card,
   parameters: {
-    componentSubtitle: 'Useful to wrap content inside a styled container.'
-  }
+    componentSubtitle: 'Useful to wrap content inside a styled container.',
+  },
 };
 
-export const card = () => (
+export const SimpleCard = (): React.ReactElement => (
   <Card>
     <Title size="xs">Some text</Title>
   </Card>

src/dataDisplay/Card/index.tsx

@@ -2,12 +2,21 @@ import React from 'react';
 import styled from 'styled-components';
 import { rgba } from 'polished';
 
-const Card = styled.div`
+const StyledCard = styled.div`
   box-shadow: 1px 2px 10px 0
     ${({ theme }) => rgba(theme.colors.shadow.color, 0.08)};
   border-radius: 8px;
   padding: 24px;
   background-color: ${({ theme }) => theme.colors.white};
 `;
 
-export default ({ ...args }) => <Card {...args} />;
+type Props = {
+  className?: string;
+  children: React.ReactNode;
+};
+
+const Card = ({ className, children }: Props): React.ReactElement => (
+  <StyledCard className={className}>{children}</StyledCard>
+);
+
+export default Card;

src/dataDisplay/Divider/divider.stories.tsx

@@ -6,14 +6,22 @@ export default {
   title: 'Data Display/Divider',
   component: Divider,
   parameters: {
-    componentSubtitle: 'Used to separate content.'
-  }
+    componentSubtitle: 'Used to separate content.',
+  },
 };
 
-export const section = () => (
+export const Horizontal = (): React.ReactElement => (
   <>
     <div>Some content</div>
     <Divider />
     <div>Some content2</div>
   </>
 );
+
+export const Vertical = (): React.ReactElement => (
+  <div style={{ display: 'flex' }}>
+    <div>Some content</div>
+    <Divider orientation="vertical" />
+    <div>Some content2</div>
+  </div>
+);

src/dataDisplay/Divider/index.tsx

@@ -1,9 +1,28 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Divider = styled.div`
+type Props = {
+  className?: string;
+  orientation?: 'vertical' | 'horizontal';
+};
+
+const HorizontalDivider = styled.div`
   border-top: 2px solid ${({ theme }) => theme.colors.separator};
   margin: 16px 0;
 `;
 
-export default ({ ...args }) => <Divider {...args} />;
+const VerticalDivider = styled.div`
+  border-right: 2px solid ${({ theme }) => theme.colors.separator};
+  margin: 0 5px;
+  height: 100%;
+`;
+
+const Divider = ({ className, orientation }: Props): React.ReactElement => {
+  return orientation === 'vertical' ? (
+    <VerticalDivider className={className} />
+  ) : (
+    <HorizontalDivider className={className} />
+  );
+};
+
+export default Divider;

src/dataDisplay/FixedDialog/FixedDialog.stories.tsx

@@ -8,15 +8,15 @@ export default {
   parameters: {
     componentSubtitle: `It shows a Dialog, with a modal look and feels, but only being 
     rendered inside a container instead of taking position absolute.
-    `
-  }
+    `,
+  },
 };
 
-export const fixedDialog = () => (
+export const SimpleFixedDialog = (): React.ReactElement => (
   <FixedDialog
     title="Legal Disclaimer"
     body={<div>Some Body</div>}
-    onCancel={() => {}}
-    onConfirm={() => {}}
+    onCancel={() => undefined}
+    onConfirm={() => undefined}
   />
 );

src/dataDisplay/FixedDialog/index.tsx

@@ -51,7 +51,12 @@ type Props = {
   onConfirm: () => void;
 };
 
-const FixedDialog = ({ body, title, onConfirm, onCancel }: Props) => {
+const FixedDialog = ({
+  body,
+  title,
+  onConfirm,
+  onCancel,
+}: Props): React.ReactElement => {
   return (
     <Container>
       <Wrapper>