From b2eeaa338a30d2ad8d6787b5b6fe1ea3d3b87880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Fri, 11 Feb 2022 15:49:45 +0100 Subject: [PATCH] nx format --- README.md | 4 -- .../src/components/callout/callout.scss | 2 +- .../components/callout/callout.stories.tsx | 16 +++---- .../src/components/callout/callout.test.tsx | 28 +++++------ .../src/components/callout/callout.tsx | 8 ++-- .../src/components/callout/index.ts | 2 +- .../etherscan-link/etherscan-link.stories.tsx | 28 +++++------ .../etherscan-link/etherscan-link.test.tsx | 48 +++++++++---------- .../etherscan-link/etherscan-link.tsx | 25 +++++----- .../src/components/etherscan-link/index.ts | 2 +- libs/ui-toolkit/src/index.ts | 6 +-- libs/ui-toolkit/src/styles/_fonts.scss | 6 +-- libs/ui-toolkit/src/styles/index.scss | 10 ++-- libs/ui-toolkit/src/utils/web3.ts | 32 ++++++------- nx.json | 7 +-- 15 files changed, 108 insertions(+), 116 deletions(-) diff --git a/README.md b/README.md index 2eb718b16..912d92826 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ - - # NxMonorepo This project was generated using [Nx](https://nx.dev). @@ -79,8 +77,6 @@ Run `nx graph` to see a diagram of the dependencies of your projects. Visit the [Nx Documentation](https://nx.dev) to learn more. - - ## ☁ Nx Cloud ### Distributed Computation Caching & Distributed Task Execution diff --git a/libs/ui-toolkit/src/components/callout/callout.scss b/libs/ui-toolkit/src/components/callout/callout.scss index 00648849e..4f76110c3 100644 --- a/libs/ui-toolkit/src/components/callout/callout.scss +++ b/libs/ui-toolkit/src/components/callout/callout.scss @@ -1,4 +1,4 @@ -@import "../../styles/colors"; +@import '../../styles/colors'; .callout { display: flex; diff --git a/libs/ui-toolkit/src/components/callout/callout.stories.tsx b/libs/ui-toolkit/src/components/callout/callout.stories.tsx index 219cf2e41..080215c4c 100644 --- a/libs/ui-toolkit/src/components/callout/callout.stories.tsx +++ b/libs/ui-toolkit/src/components/callout/callout.stories.tsx @@ -1,10 +1,10 @@ -import React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Callout } from "."; +import { Callout } from '.'; export default { - title: "Callout", + title: 'Callout', component: Callout, } as ComponentMeta; @@ -17,20 +17,20 @@ Default.args = {}; export const Success = Template.bind({}); Success.args = { - intent: "success", + intent: 'success', }; export const Error = Template.bind({}); Error.args = { - intent: "error", + intent: 'error', }; export const Warning = Template.bind({}); Warning.args = { - intent: "warn", + intent: 'warn', }; export const Action = Template.bind({}); Action.args = { - intent: "action", + intent: 'action', }; diff --git a/libs/ui-toolkit/src/components/callout/callout.test.tsx b/libs/ui-toolkit/src/components/callout/callout.test.tsx index b6e543ded..f026cff08 100644 --- a/libs/ui-toolkit/src/components/callout/callout.test.tsx +++ b/libs/ui-toolkit/src/components/callout/callout.test.tsx @@ -1,28 +1,28 @@ -import { render, screen } from "@testing-library/react"; -import * as React from "react"; -import { Callout } from "."; +import { render, screen } from '@testing-library/react'; +import * as React from 'react'; +import { Callout } from '.'; -test("It renders content within callout", () => { +test('It renders content within callout', () => { render(Content); - expect(screen.getByTestId("callout")).toHaveTextContent("Content"); + expect(screen.getByTestId('callout')).toHaveTextContent('Content'); }); -test("It renders title and icon", () => { +test('It renders title and icon', () => { render(} title="title" />); - expect(screen.getByTestId("icon")).toBeInTheDocument(); - expect(screen.getByText("title")).toBeInTheDocument(); + expect(screen.getByTestId('icon')).toBeInTheDocument(); + expect(screen.getByText('title')).toBeInTheDocument(); }); -const intents = ["warn", "action", "error", "success"] as [ - "warn", - "action", - "error", - "success" +const intents = ['warn', 'action', 'error', 'success'] as [ + 'warn', + 'action', + 'error', + 'success' ]; intents.map((intent) => test(`Applies class for ${intent}`, () => { render(); - expect(screen.getByTestId("callout")).toHaveClass(`callout--${intent}`); + expect(screen.getByTestId('callout')).toHaveClass(`callout--${intent}`); }) ); diff --git a/libs/ui-toolkit/src/components/callout/callout.tsx b/libs/ui-toolkit/src/components/callout/callout.tsx index b90a000ac..b71a07563 100644 --- a/libs/ui-toolkit/src/components/callout/callout.tsx +++ b/libs/ui-toolkit/src/components/callout/callout.tsx @@ -1,5 +1,5 @@ -import "./callout.scss"; -import React from "react"; +import './callout.scss'; +import React from 'react'; export const Callout = ({ children, @@ -9,10 +9,10 @@ export const Callout = ({ }: { children?: React.ReactNode; title?: React.ReactElement | string; - intent?: "success" | "error" | "warn" | "action"; + intent?: 'success' | 'error' | 'warn' | 'action'; icon?: React.ReactNode; }) => { - const className = ["callout", intent ? `callout--${intent}` : ""].join(" "); + const className = ['callout', intent ? `callout--${intent}` : ''].join(' '); return (
{icon &&
{icon}
} diff --git a/libs/ui-toolkit/src/components/callout/index.ts b/libs/ui-toolkit/src/components/callout/index.ts index ccd1dc95b..0190da554 100644 --- a/libs/ui-toolkit/src/components/callout/index.ts +++ b/libs/ui-toolkit/src/components/callout/index.ts @@ -1 +1 @@ -export * from "./callout"; +export * from './callout'; diff --git a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.stories.tsx b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.stories.tsx index 089e1015f..0ab295604 100644 --- a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.stories.tsx +++ b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.stories.tsx @@ -1,17 +1,17 @@ -import React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { EtherscanLink } from "."; -import { EthereumChainIds, EthereumChainNames } from "../../utils/web3"; +import { EtherscanLink } from '.'; +import { EthereumChainIds, EthereumChainNames } from '../../utils/web3'; export default { - title: "EtherscanLink", + title: 'EtherscanLink', component: EtherscanLink, argTypes: { chainId: { options: Object.values(EthereumChainIds), control: { - type: "select", // Type 'select' is automatically inferred when 'options' is defined + type: 'select', // Type 'select' is automatically inferred when 'options' is defined labels: EthereumChainNames, }, }, @@ -25,27 +25,27 @@ const Template: ComponentStory = (args) => ( export const MainnetTx = Template.bind({}); MainnetTx.args = { chainId: EthereumChainIds.Mainnet, - tx: "foo", - text: "View transaction on Etherscan", + tx: 'foo', + text: 'View transaction on Etherscan', }; export const RopstenTx = Template.bind({}); RopstenTx.args = { chainId: EthereumChainIds.Ropsten, - tx: "foo", - text: "View transaction on Etherscan", + tx: 'foo', + text: 'View transaction on Etherscan', }; export const MainnetAddress = Template.bind({}); MainnetAddress.args = { chainId: EthereumChainIds.Mainnet, - address: "foo", - text: "View transaction on Etherscan", + address: 'foo', + text: 'View transaction on Etherscan', }; export const RopstenAddress = Template.bind({}); RopstenAddress.args = { chainId: EthereumChainIds.Ropsten, - address: "foo", - text: "View transaction on Etherscan", + address: 'foo', + text: 'View transaction on Etherscan', }; diff --git a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx index 8e7d9a146..806f4b2d4 100644 --- a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx +++ b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.test.tsx @@ -1,65 +1,65 @@ -import { render, screen } from "@testing-library/react"; -import * as React from "react"; -import { EtherscanLink } from "."; -import { EthereumChainIds } from "../../utils/web3"; +import { render, screen } from '@testing-library/react'; +import * as React from 'react'; +import { EtherscanLink } from '.'; +import { EthereumChainIds } from '../../utils/web3'; -test("It renders a link with the text", () => { +test('It renders a link with the text', () => { render( ); - expect(screen.getByText("foo")).toBeInTheDocument(); + expect(screen.getByText('foo')).toBeInTheDocument(); }); -test("It renders a link with the tx hash if no text is provided", () => { +test('It renders a link with the tx hash if no text is provided', () => { render(); - expect(screen.getByText("tx")).toBeInTheDocument(); + expect(screen.getByText('tx')).toBeInTheDocument(); }); -test("It renders a link with the address if no text is provided", () => { +test('It renders a link with the address if no text is provided', () => { render( ); - expect(screen.getByText("address")).toBeInTheDocument(); + expect(screen.getByText('address')).toBeInTheDocument(); }); -test("It links to etherscan if network is mainnet", () => { +test('It links to etherscan if network is mainnet', () => { render( ); - expect(screen.getByTestId("etherscan-link")).toHaveAttribute( - "href", - "https://etherscan.io/address/address" + expect(screen.getByTestId('etherscan-link')).toHaveAttribute( + 'href', + 'https://etherscan.io/address/address' ); }); -test("It links to ropsten etherscan if network is ropsten", () => { +test('It links to ropsten etherscan if network is ropsten', () => { render( ); - expect(screen.getByTestId("etherscan-link")).toHaveAttribute( - "href", - "https://ropsten.etherscan.io/address/address" + expect(screen.getByTestId('etherscan-link')).toHaveAttribute( + 'href', + 'https://ropsten.etherscan.io/address/address' ); }); test("Doesn't render for address if chainid is null", () => { render(); - expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); + expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument(); }); test("Doesn't render for tx if chainid is null", () => { render(); - expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); + expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument(); }); test("Doesn't render for address if chainid is unknown", () => { // @ts-ignore - render(); - expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); + render(); + expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument(); }); test("Doesn't render for tx if chainid is unknown", () => { // @ts-ignore - render(); - expect(screen.queryByTestId("etherscan-link")).not.toBeInTheDocument(); + render(); + expect(screen.queryByTestId('etherscan-link')).not.toBeInTheDocument(); }); diff --git a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.tsx b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.tsx index d6227e7c3..da08a8a8e 100644 --- a/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.tsx +++ b/libs/ui-toolkit/src/components/etherscan-link/etherscan-link.tsx @@ -1,12 +1,12 @@ -import React from "react"; -import { EthereumChainId } from "../../utils/web3"; +import React from 'react'; +import { EthereumChainId } from '../../utils/web3'; const etherscanUrls: Record = { - "0x1": "https://etherscan.io", - "0x3": "https://ropsten.etherscan.io", - "0x4": "https://rinkeby.etherscan.io", - "0x5": "https://goerli.etherscan.io", - "0x2a": "https://kovan.etherscan.io", + '0x1': 'https://etherscan.io', + '0x3': 'https://ropsten.etherscan.io', + '0x4': 'https://rinkeby.etherscan.io', + '0x5': 'https://goerli.etherscan.io', + '0x2a': 'https://kovan.etherscan.io', }; interface BaseEtherscanLinkProps { @@ -36,11 +36,12 @@ export const EtherscanLink = ({ }: EtherscanLinkProps) => { let hash: string; let txLink: string | null; - const createLink = React.useMemo(() => etherscanLinkCreator(chainId), [ - chainId, - ]); + const createLink = React.useMemo( + () => etherscanLinkCreator(chainId), + [chainId] + ); - if ("tx" in props) { + if ('tx' in props) { hash = props.tx; txLink = createLink ? createLink.tx(hash) : null; } else { @@ -85,4 +86,4 @@ function etherscanLinkCreator(chainId: EthereumChainId | null) { }; } -EtherscanLink.displayName = "EtherScanLink"; +EtherscanLink.displayName = 'EtherScanLink'; diff --git a/libs/ui-toolkit/src/components/etherscan-link/index.ts b/libs/ui-toolkit/src/components/etherscan-link/index.ts index d74c2ca28..6893bd488 100644 --- a/libs/ui-toolkit/src/components/etherscan-link/index.ts +++ b/libs/ui-toolkit/src/components/etherscan-link/index.ts @@ -1 +1 @@ -export { EtherscanLink } from "./etherscan-link"; +export { EtherscanLink } from './etherscan-link'; diff --git a/libs/ui-toolkit/src/index.ts b/libs/ui-toolkit/src/index.ts index f8e7bbd41..964b968c4 100644 --- a/libs/ui-toolkit/src/index.ts +++ b/libs/ui-toolkit/src/index.ts @@ -1,7 +1,7 @@ -import * as EthereumUtils from "./utils/web3"; +import * as EthereumUtils from './utils/web3'; export * from './lib/ui-toolkit'; -export { Callout } from "./components/callout"; -export { EtherscanLink } from "./components/etherscan-link"; +export { Callout } from './components/callout'; +export { EtherscanLink } from './components/etherscan-link'; export { EthereumUtils }; diff --git a/libs/ui-toolkit/src/styles/_fonts.scss b/libs/ui-toolkit/src/styles/_fonts.scss index 2e001e792..f22a97886 100644 --- a/libs/ui-toolkit/src/styles/_fonts.scss +++ b/libs/ui-toolkit/src/styles/_fonts.scss @@ -1,6 +1,6 @@ -$font-main: "Helvetica neue", "Helvetica", arial, sans-serif; -$font-mono: "Roboto Mono", monospace; -$font-pixelated: NeuePixelGrotesk, "Helvetica neue", "Helvetica", arial, +$font-main: 'Helvetica neue', 'Helvetica', arial, sans-serif; +$font-mono: 'Roboto Mono', monospace; +$font-pixelated: NeuePixelGrotesk, 'Helvetica neue', 'Helvetica', arial, sans-serif; .font-main { diff --git a/libs/ui-toolkit/src/styles/index.scss b/libs/ui-toolkit/src/styles/index.scss index 371f1a6ff..e488c5509 100644 --- a/libs/ui-toolkit/src/styles/index.scss +++ b/libs/ui-toolkit/src/styles/index.scss @@ -1,6 +1,6 @@ -@import "./colors"; -@import "./fonts"; -@import "./reset"; +@import './colors'; +@import './fonts'; +@import './reset'; html, body, @@ -125,8 +125,8 @@ button { // FORM ELEMENTS select, -input[type="text"], -input[type="password"] { +input[type='text'], +input[type='password'] { width: 100%; padding: 12px; border-radius: 4px; diff --git a/libs/ui-toolkit/src/utils/web3.ts b/libs/ui-toolkit/src/utils/web3.ts index 93338975c..8807b89de 100644 --- a/libs/ui-toolkit/src/utils/web3.ts +++ b/libs/ui-toolkit/src/utils/web3.ts @@ -1,23 +1,23 @@ -export type EthereumChainId = "0x1" | "0x3" | "0x4" | "0x5" | "0x2a"; +export type EthereumChainId = '0x1' | '0x3' | '0x4' | '0x5' | '0x2a'; export type EthereumChainName = - | "Mainnet" - | "Ropsten" - | "Rinkeby" - | "Goerli" - | "Kovan"; + | 'Mainnet' + | 'Ropsten' + | 'Rinkeby' + | 'Goerli' + | 'Kovan'; export const EthereumChainNames: Record = { - "0x1": "Mainnet", - "0x3": "Ropsten", - "0x4": "Rinkeby", - "0x5": "Goerli", - "0x2a": "Kovan", + '0x1': 'Mainnet', + '0x3': 'Ropsten', + '0x4': 'Rinkeby', + '0x5': 'Goerli', + '0x2a': 'Kovan', }; export const EthereumChainIds: Record = { - Mainnet: "0x1", - Ropsten: "0x3", - Rinkeby: "0x4", - Goerli: "0x5", - Kovan: "0x2a", + Mainnet: '0x1', + Ropsten: '0x3', + Rinkeby: '0x4', + Goerli: '0x5', + Kovan: '0x2a', }; diff --git a/nx.json b/nx.json index c9d889058..88ca8cb43 100644 --- a/nx.json +++ b/nx.json @@ -17,12 +17,7 @@ "default": { "runner": "@nrwl/nx-cloud", "options": { - "cacheableOperations": [ - "build", - "lint", - "test", - "e2e" - ], + "cacheableOperations": ["build", "lint", "test", "e2e"], "accessToken": "OTY4ZjdlZTItNGIwNy00NDcyLTllZjctOWIzYTg1NWE0Yzg1fHJlYWQtd3JpdGU=" } }