From 7de43540b962a313fedbf57811bada3996f371f4 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Mon, 8 Jul 2024 12:33:00 +0100 Subject: [PATCH] bundle react components library with vite --- .../packages/react-components/README.md | 74 ++++-------- .../packages/react-components/index.html | 12 ++ .../account/WalletAddressFormField.tsx | 11 +- .../components/banners/MaintenanceBanner.tsx | 7 +- .../client-address/ClientAddress.tsx | 13 +- .../components/clipboard/CopyToClipboard.tsx | 6 +- .../components/coins/CoinMark.tsx | 11 +- .../lib/components/coins/CoinMarkTestnet.tsx | 13 ++ .../components/currency/Currency.tsx | 13 +- .../components/currency/CurrencyAmount.tsx | 24 ++-- .../components/currency/CurrencyFormField.tsx | 11 +- .../currency/CurrencyWithCoinMark.tsx | 13 +- .../react-components/lib/components/index.ts | 22 ++++ .../{src => lib}/components/link/Link.tsx | 5 +- .../{src => lib}/components/logo/LogoProps.ts | 4 +- .../lib/components/logo/NymIcon.tsx | 5 + .../lib/components/logo/NymLogo.tsx | 4 + .../components/logo/NymLogoBW.tsx | 3 +- .../components/logo/NymWordmark.tsx | 7 +- .../mixnodes/IdentityKeyFormField.tsx | 11 +- .../components/networks/NetworkSelector.tsx | 16 +-- .../password-strength/PasswordStrength.tsx | 22 ++-- .../components/textfields/Mnemonic.tsx | 8 +- .../components/textfields/Password.tsx | 16 ++- .../lib/components/textfields/index.ts | 2 + .../components/tooltip/Tooltip.tsx | 5 +- .../lib/components/tooltip/index.ts | 1 + .../components/warnings/Error.tsx | 1 - .../react-components/lib/hooks/index.ts | 1 + .../{src => lib}/hooks/useIsMounted.ts | 0 .../packages/react-components/lib/index.ts | 2 + .../packages/react-components/package.json | 112 ++++++------------ .../packages/react-components/src/App.css | 42 +++++++ .../packages/react-components/src/App.tsx | 20 ++++ .../src/components/coins/CoinMarkTestnet.tsx | 17 --- .../src/components/logo/NymIcon.tsx | 5 - .../src/components/logo/NymLogo.tsx | 5 - .../packages/react-components/src/index.css | 68 +++++++++++ .../packages/react-components/src/main.tsx | 16 +++ .../src/playground/Playground.tsx | 1 - .../src/playground/buttons.tsx | 1 - .../src/playground/checkboxes.tsx | 1 - .../react-components/src/playground/fonts.tsx | 2 - .../src/playground/switches.tsx | 1 - .../react-components/src/playground/theme.tsx | 1 - .../src/stories/Playground.stories.js | 21 ++++ .../src/stories/Playground.stories.tsx | 1 - .../account/WalletAddressFormField.stories.js | 28 +++++ .../WalletAddressFormField.stories.tsx | 3 +- .../client-address/ClientAddress.stories.js | 56 +++++++++ .../client-address/ClientAddress.stories.tsx | 3 +- .../clipboard/CopyToClipboard.stories.js | 36 ++++++ .../clipboard/CopyToClipboard.stories.tsx | 3 +- .../src/stories/coins/CoinMark.stories.js | 19 +++ .../coins/CoinMark.stories.tsx | 3 +- .../stories/coins/CoinMarkTestnet.stories.js | 19 +++ .../coins/CoinMarkTestnet.stories.tsx | 3 +- .../src/stories/currency/Currency.stories.js | 19 +++ .../currency/Currency.stories.tsx | 3 +- .../currency/CurrencyAmount.stories.js | 45 +++++++ .../currency/CurrencyAmount.stories.tsx | 4 +- .../currency/CurrencyFormField.stories.js | 34 ++++++ .../currency/CurrencyFormField.stories.tsx | 25 ++-- .../src/stories/link/Link.stories.js | 19 +++ .../link/Link.stories.tsx | 3 +- .../src/stories/logo/Logo.stories.js | 15 +++ .../logo/Logo.stories.tsx | 5 +- .../mixnodes/IdentityKeyFormField.stories.js | 28 +++++ .../mixnodes/IdentityKeyFormField.stories.tsx | 3 +- .../networks/NetworkSelector.stories.js | 31 +++++ .../networks/NetworkSelector.stories.tsx | 4 +- .../src/stories/tooltip/Tooltip.stories.js | 13 ++ .../tooltip/Tooltip.stories.tsx | 3 +- .../react-components/src/vite-env.d.ts | 2 + .../react-components/temp_package.json | 96 +++++++++++++++ .../react-components/tsconfig.app.json | 39 ++++++ .../packages/react-components/tsconfig.json | 24 ++-- .../react-components/tsconfig.node.json | 13 ++ .../packages/react-components/vite.config.ts | 35 ++++++ 79 files changed, 987 insertions(+), 306 deletions(-) create mode 100644 sdk/typescript/packages/react-components/index.html rename sdk/typescript/packages/react-components/{src => lib}/components/account/WalletAddressFormField.tsx (92%) rename sdk/typescript/packages/react-components/{src => lib}/components/banners/MaintenanceBanner.tsx (93%) rename sdk/typescript/packages/react-components/{src => lib}/components/client-address/ClientAddress.tsx (71%) rename sdk/typescript/packages/react-components/{src => lib}/components/clipboard/CopyToClipboard.tsx (88%) rename sdk/typescript/packages/react-components/{src => lib}/components/coins/CoinMark.tsx (59%) create mode 100644 sdk/typescript/packages/react-components/lib/components/coins/CoinMarkTestnet.tsx rename sdk/typescript/packages/react-components/{src => lib}/components/currency/Currency.tsx (83%) rename sdk/typescript/packages/react-components/{src => lib}/components/currency/CurrencyAmount.tsx (79%) rename sdk/typescript/packages/react-components/{src => lib}/components/currency/CurrencyFormField.tsx (95%) rename sdk/typescript/packages/react-components/{src => lib}/components/currency/CurrencyWithCoinMark.tsx (85%) create mode 100644 sdk/typescript/packages/react-components/lib/components/index.ts rename sdk/typescript/packages/react-components/{src => lib}/components/link/Link.tsx (94%) rename sdk/typescript/packages/react-components/{src => lib}/components/logo/LogoProps.ts (63%) create mode 100644 sdk/typescript/packages/react-components/lib/components/logo/NymIcon.tsx create mode 100644 sdk/typescript/packages/react-components/lib/components/logo/NymLogo.tsx rename sdk/typescript/packages/react-components/{src => lib}/components/logo/NymLogoBW.tsx (64%) rename sdk/typescript/packages/react-components/{src => lib}/components/logo/NymWordmark.tsx (52%) rename sdk/typescript/packages/react-components/{src => lib}/components/mixnodes/IdentityKeyFormField.tsx (93%) rename sdk/typescript/packages/react-components/{src => lib}/components/networks/NetworkSelector.tsx (87%) rename sdk/typescript/packages/react-components/{src => lib}/components/password-strength/PasswordStrength.tsx (86%) rename sdk/typescript/packages/react-components/{src => lib}/components/textfields/Mnemonic.tsx (86%) rename sdk/typescript/packages/react-components/{src => lib}/components/textfields/Password.tsx (83%) create mode 100644 sdk/typescript/packages/react-components/lib/components/textfields/index.ts rename sdk/typescript/packages/react-components/{src => lib}/components/tooltip/Tooltip.tsx (94%) create mode 100644 sdk/typescript/packages/react-components/lib/components/tooltip/index.ts rename sdk/typescript/packages/react-components/{src => lib}/components/warnings/Error.tsx (91%) create mode 100644 sdk/typescript/packages/react-components/lib/hooks/index.ts rename sdk/typescript/packages/react-components/{src => lib}/hooks/useIsMounted.ts (100%) create mode 100644 sdk/typescript/packages/react-components/lib/index.ts create mode 100644 sdk/typescript/packages/react-components/src/App.css create mode 100644 sdk/typescript/packages/react-components/src/App.tsx delete mode 100644 sdk/typescript/packages/react-components/src/components/coins/CoinMarkTestnet.tsx delete mode 100644 sdk/typescript/packages/react-components/src/components/logo/NymIcon.tsx delete mode 100644 sdk/typescript/packages/react-components/src/components/logo/NymLogo.tsx create mode 100644 sdk/typescript/packages/react-components/src/index.css create mode 100644 sdk/typescript/packages/react-components/src/main.tsx create mode 100644 sdk/typescript/packages/react-components/src/stories/Playground.stories.js create mode 100644 sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/account/WalletAddressFormField.stories.tsx (93%) create mode 100644 sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/client-address/ClientAddress.stories.tsx (93%) create mode 100644 sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/clipboard/CopyToClipboard.stories.tsx (90%) create mode 100644 sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/coins/CoinMark.stories.tsx (92%) create mode 100644 sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/coins/CoinMarkTestnet.stories.tsx (91%) create mode 100644 sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/currency/Currency.stories.tsx (96%) create mode 100644 sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/currency/CurrencyAmount.stories.tsx (95%) create mode 100644 sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/currency/CurrencyFormField.stories.tsx (68%) create mode 100644 sdk/typescript/packages/react-components/src/stories/link/Link.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/link/Link.stories.tsx (92%) create mode 100644 sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/logo/Logo.stories.tsx (68%) create mode 100644 sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/mixnodes/IdentityKeyFormField.stories.tsx (93%) create mode 100644 sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/networks/NetworkSelector.stories.tsx (90%) create mode 100644 sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.js rename sdk/typescript/packages/react-components/src/{components => stories}/tooltip/Tooltip.stories.tsx (91%) create mode 100644 sdk/typescript/packages/react-components/src/vite-env.d.ts create mode 100644 sdk/typescript/packages/react-components/temp_package.json create mode 100644 sdk/typescript/packages/react-components/tsconfig.app.json create mode 100644 sdk/typescript/packages/react-components/tsconfig.node.json create mode 100644 sdk/typescript/packages/react-components/vite.config.ts diff --git a/sdk/typescript/packages/react-components/README.md b/sdk/typescript/packages/react-components/README.md index 7581c9fc33..0d6babeddb 100644 --- a/sdk/typescript/packages/react-components/README.md +++ b/sdk/typescript/packages/react-components/README.md @@ -1,58 +1,30 @@ -# Nym Shared React Components +# React + TypeScript + Vite -This package contains shared React components that are used in other Nym projects. +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. -It uses the following packages: +Currently, two official plugins are available: -- [shared MUI theme](../mui-theme/README.md) -- [webpack config](../webpack/README.md) -- [MUI](https://https://mui.com/) -- Typescript -- React +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh -## Building +## Expanding the ESLint configuration -``` -yarn -yarn build +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js +export default { + // other rules... + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], + tsconfigRootDir: __dirname, + }, +} ``` -## Development - -Run watch mode with: - -``` -yarn watch -``` - -Or you can run Storybook with: - -``` -yarn storybook -``` - -Or you can run the [example project](../react-webpack-with-theme-example/README.md) in dev mode and this package in watch mode, and test results in the example project's dev server output. - -## Playground - -There are [playground components](./src/playground/index.tsx) that are intended to be used during development to see the effects are changes to the MUI theme or shared components at a glance. - -They are available in Storybook from [src/stories/Playground.stories.tsx](./src/stories/Playground.stories.tsx). - -> ℹ️ **Tip**: use the playground to make sure components stay consistent and you don't break other components while making changes - -## Shared assets - -This project uses [shared asset files](../../assets/README.md) such as favicons and logos. - -> ℹ️ **Tip**: use to keep your project consistent with Nym's branding and so that it automatically receives changes when the shared assets change. Please try to avoid duplicating the files in the shared assets directory. - -## Publishing - -This package is not published to NPM ... yet. - -## TODO - -- ugprade to React 18 -- upgrade Storybook -- upgrade MUI +- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` +- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list diff --git a/sdk/typescript/packages/react-components/index.html b/sdk/typescript/packages/react-components/index.html new file mode 100644 index 0000000000..88d627c0db --- /dev/null +++ b/sdk/typescript/packages/react-components/index.html @@ -0,0 +1,12 @@ + + + + + + Nym React Components + + +
+ + + diff --git a/sdk/typescript/packages/react-components/src/components/account/WalletAddressFormField.tsx b/sdk/typescript/packages/react-components/lib/components/account/WalletAddressFormField.tsx similarity index 92% rename from sdk/typescript/packages/react-components/src/components/account/WalletAddressFormField.tsx rename to sdk/typescript/packages/react-components/lib/components/account/WalletAddressFormField.tsx index a928bd007a..26dbdd6710 100644 --- a/sdk/typescript/packages/react-components/src/components/account/WalletAddressFormField.tsx +++ b/sdk/typescript/packages/react-components/lib/components/account/WalletAddressFormField.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; import { ChangeEvent } from 'react'; -import { InputAdornment, TextField } from '@mui/material'; +import { InputAdornment, TextField, SxProps } from '@mui/material'; import { TextFieldProps } from '@mui/material/TextField/TextField'; import { validateWalletAddress } from '@nymproject/types'; import DoneIcon from '@mui/icons-material/Done'; -import { SxProps } from '@mui/system'; -export const WalletAddressFormField: FCWithChildren<{ +export type WalletAddressFormFieldProps = { showTickOnValid?: boolean; fullWidth?: boolean; required?: boolean; @@ -20,7 +19,9 @@ export const WalletAddressFormField: FCWithChildren<{ textFieldProps?: TextFieldProps; errorText?: string; sx?: SxProps; -}> = ({ +}; + +export const WalletAddressFormField = ({ required, fullWidth, placeholder, @@ -33,7 +34,7 @@ export const WalletAddressFormField: FCWithChildren<{ onValidate, textFieldProps, showTickOnValid = true, -}) => { +}: WalletAddressFormFieldProps) => { const [value, setValue] = React.useState(initialValue); const [validationError, setValidationError] = React.useState(); diff --git a/sdk/typescript/packages/react-components/src/components/banners/MaintenanceBanner.tsx b/sdk/typescript/packages/react-components/lib/components/banners/MaintenanceBanner.tsx similarity index 93% rename from sdk/typescript/packages/react-components/src/components/banners/MaintenanceBanner.tsx rename to sdk/typescript/packages/react-components/lib/components/banners/MaintenanceBanner.tsx index 6400203708..e52b4e2877 100644 --- a/sdk/typescript/packages/react-components/src/components/banners/MaintenanceBanner.tsx +++ b/sdk/typescript/packages/react-components/lib/components/banners/MaintenanceBanner.tsx @@ -1,14 +1,13 @@ -import * as React from 'react'; import { Box, Collapse, Alert, IconButton, Typography, Divider } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; -import { SxProps } from '@mui/system'; +import { SxProps } from '@mui/material'; -export interface BannerProps { +export type BannerProps = { open: boolean; onClick: () => void; height?: number; sx?: SxProps; -} +}; export const MaintenanceBanner = (props: BannerProps) => { const { open, onClick, height, sx } = props; diff --git a/sdk/typescript/packages/react-components/src/components/client-address/ClientAddress.tsx b/sdk/typescript/packages/react-components/lib/components/client-address/ClientAddress.tsx similarity index 71% rename from sdk/typescript/packages/react-components/src/components/client-address/ClientAddress.tsx rename to sdk/typescript/packages/react-components/lib/components/client-address/ClientAddress.tsx index 9fdb409c28..5191e0baec 100644 --- a/sdk/typescript/packages/react-components/src/components/client-address/ClientAddress.tsx +++ b/sdk/typescript/packages/react-components/lib/components/client-address/ClientAddress.tsx @@ -1,22 +1,21 @@ -import React from 'react'; import { Box, Typography, Tooltip } from '@mui/material'; import { CopyToClipboard } from '../clipboard/CopyToClipboard'; -const AddressTooltip: FCWithChildren<{ visible?: boolean; address?: string }> = ({ visible, address, children }) => { +type AddressTooltipProps = { visible?: boolean; address?: string; children: React.ReactNode }; + +const AddressTooltip = ({ visible, address, children }: AddressTooltipProps) => { if (!visible || !address) { - // eslint-disable-next-line react/jsx-no-useless-fragment return <>{children}; } return ( - {/* eslint-disable-next-line react/jsx-no-useless-fragment */} <>{children} ); }; -type ClientAddressProps = { +export type ClientAddressProps = { address: string; withLabel?: boolean; withCopy?: boolean; @@ -24,7 +23,7 @@ type ClientAddressProps = { showEntireAddress?: boolean; }; -export const ClientAddressDisplay = ({ +export const ClientAddress = ({ withLabel, withCopy, smallIcons, @@ -48,5 +47,3 @@ export const ClientAddressDisplay = ({ {withCopy && } ); - -export const ClientAddress = ({ ...props }: ClientAddressProps) => ; diff --git a/sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.tsx b/sdk/typescript/packages/react-components/lib/components/clipboard/CopyToClipboard.tsx similarity index 88% rename from sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.tsx rename to sdk/typescript/packages/react-components/lib/components/clipboard/CopyToClipboard.tsx index b5520663ee..64aa82da94 100644 --- a/sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.tsx +++ b/sdk/typescript/packages/react-components/lib/components/clipboard/CopyToClipboard.tsx @@ -4,13 +4,15 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import DoneIcon from '@mui/icons-material/Done'; import { useClipboard } from 'use-clipboard-copy'; -export const CopyToClipboard: FCWithChildren<{ +export type CopyToClipboardProps = { value: string; tooltip?: React.ReactNode; onCopy?: (value: string) => void; smallIcons?: boolean; sx?: SxProps; -}> = ({ value, tooltip, onCopy, smallIcons, sx }) => { +}; + +export const CopyToClipboard = ({ value, tooltip, onCopy, smallIcons, sx }: CopyToClipboardProps) => { const copy = useClipboard(); const [showConfirmation, setShowConfirmation] = React.useState(false); const handleCopy = (e: React.MouseEvent) => { diff --git a/sdk/typescript/packages/react-components/src/components/coins/CoinMark.tsx b/sdk/typescript/packages/react-components/lib/components/coins/CoinMark.tsx similarity index 59% rename from sdk/typescript/packages/react-components/src/components/coins/CoinMark.tsx rename to sdk/typescript/packages/react-components/lib/components/coins/CoinMark.tsx index c788ee1797..1df0209645 100644 --- a/sdk/typescript/packages/react-components/src/components/coins/CoinMark.tsx +++ b/sdk/typescript/packages/react-components/lib/components/coins/CoinMark.tsx @@ -1,13 +1,14 @@ -import * as React from 'react'; import { PaletteMode, useTheme } from '@mui/material'; -import TokenLight from '@assets/token/token-light.svg'; -import TokenDark from '@assets/token/token-dark.svg'; +import TokenLight from '@assets/token/token-light.svg?react'; +import TokenDark from '@assets/token/token-dark.svg?react'; -export const CoinMark: FCWithChildren<{ +export type CoinMarkProps = { mode?: PaletteMode; width?: number | string; height?: number | string; -}> = ({ mode, ...props }) => { +}; + +export const CoinMark = ({ mode, ...props }: CoinMarkProps) => { const theme = useTheme(); const modeWithTheme = mode || theme.palette.mode; if (modeWithTheme === 'light') { diff --git a/sdk/typescript/packages/react-components/lib/components/coins/CoinMarkTestnet.tsx b/sdk/typescript/packages/react-components/lib/components/coins/CoinMarkTestnet.tsx new file mode 100644 index 0000000000..7690833b17 --- /dev/null +++ b/sdk/typescript/packages/react-components/lib/components/coins/CoinMarkTestnet.tsx @@ -0,0 +1,13 @@ +import { useTheme } from '@mui/material'; +import TokenLight from '@assets/token/token-light-testnet.svg?react'; +import TokenDark from '@assets/token/token-dark-testnet.svg?react'; +import { CoinMarkProps } from './CoinMark'; + +export const CoinMarkTestnet = ({ mode, ...props }: CoinMarkProps) => { + const theme = useTheme(); + const modeWithTheme = mode || theme.palette.mode; + if (modeWithTheme === 'light') { + return ; + } + return ; +}; diff --git a/sdk/typescript/packages/react-components/src/components/currency/Currency.tsx b/sdk/typescript/packages/react-components/lib/components/currency/Currency.tsx similarity index 83% rename from sdk/typescript/packages/react-components/src/components/currency/Currency.tsx rename to sdk/typescript/packages/react-components/lib/components/currency/Currency.tsx index 56f201bc74..ca06da1958 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/Currency.tsx +++ b/sdk/typescript/packages/react-components/lib/components/currency/Currency.tsx @@ -1,16 +1,23 @@ -import * as React from 'react'; import type { DecCoin } from '@nymproject/types'; import { Stack, SxProps } from '@mui/material'; import { CurrencyWithCoinMark } from './CurrencyWithCoinMark'; import { CURRENCY_AMOUNT_SPACING, CurrencyAmount } from './CurrencyAmount'; -export const Currency: FCWithChildren<{ +export type CurrencyProps = { majorAmount?: DecCoin; showDenom?: boolean; showCoinMark?: boolean; coinMarkPrefix?: boolean; sx?: SxProps; -}> = ({ majorAmount, sx, showDenom = true, showCoinMark = false, coinMarkPrefix = false }) => { +}; + +export const Currency = ({ + majorAmount, + sx, + showDenom = true, + showCoinMark = false, + coinMarkPrefix = false, +}: CurrencyProps) => { if (!majorAmount || !majorAmount.amount) { return ( diff --git a/sdk/typescript/packages/react-components/src/components/currency/CurrencyAmount.tsx b/sdk/typescript/packages/react-components/lib/components/currency/CurrencyAmount.tsx similarity index 79% rename from sdk/typescript/packages/react-components/src/components/currency/CurrencyAmount.tsx rename to sdk/typescript/packages/react-components/lib/components/currency/CurrencyAmount.tsx index 948bd9d663..93adc449fc 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/CurrencyAmount.tsx +++ b/sdk/typescript/packages/react-components/lib/components/currency/CurrencyAmount.tsx @@ -1,13 +1,11 @@ -/* eslint-disable react/no-array-index-key */ -import * as React from 'react'; import type { DecCoin } from '@nymproject/types'; import { Stack, SxProps, Typography } from '@mui/material'; export const CURRENCY_AMOUNT_SPACING = 0.35; -const toReverseChunks = (value: String, size: number = 3): Array => { +const toReverseChunks = (value: string, size: number = 3): Array => { const reversed = value.split('').reverse(); - const chunks: Array> = []; + const chunks: Array> = []; let chunksIndex = 0; reversed.forEach((char, index) => { if (index > 0 && index % size === 0) { @@ -21,8 +19,8 @@ const toReverseChunks = (value: String, size: number = 3): Array => { return chunks.map((chars) => chars.reverse().join('')).reverse(); }; -const toChunks = (value: String, size: number = 3): Array => { - const chunks: Array> = []; +const toChunks = (value: string, size: number = 3): Array => { + const chunks: Array> = []; let chunksIndex = 0; value.split('').forEach((char, index) => { if (index > 0 && index % size === 0) { @@ -36,11 +34,13 @@ const toChunks = (value: String, size: number = 3): Array => { return chunks.map((chars) => chars.join('')); }; -export const CurrencyAmountString: FCWithChildren<{ +export type CurrencyAmountStringProps = { majorAmount?: string; showSeparators?: boolean; sx?: SxProps; -}> = ({ majorAmount, sx, showSeparators = true }) => { +}; + +export const CurrencyAmountString = ({ majorAmount, sx, showSeparators = true }: CurrencyAmountStringProps) => { if (!majorAmount) { return ( @@ -93,8 +93,12 @@ export const CurrencyAmountString: FCWithChildren<{ ); }; -export const CurrencyAmount: FCWithChildren<{ +export type CurrencyAmountProps = { majorAmount?: DecCoin; showSeparators?: boolean; sx?: SxProps; -}> = ({ majorAmount, ...props }) => ; +}; + +export const CurrencyAmount = ({ majorAmount, ...props }: CurrencyAmountProps) => ( + +); diff --git a/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.tsx b/sdk/typescript/packages/react-components/lib/components/currency/CurrencyFormField.tsx similarity index 95% rename from sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.tsx rename to sdk/typescript/packages/react-components/lib/components/currency/CurrencyFormField.tsx index 72646dc488..a8cbfde897 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.tsx +++ b/sdk/typescript/packages/react-components/lib/components/currency/CurrencyFormField.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import { ChangeEvent } from 'react'; -import { InputAdornment, TextField } from '@mui/material'; -import { SxProps } from '@mui/system'; +import { InputAdornment, TextField, SxProps } from '@mui/material'; import { CurrencyDenom, DecCoin } from '@nymproject/types'; import { CoinMark } from '../coins/CoinMark'; const MAX_VALUE = 1_000_000_000_000_000; const MIN_VALUE = 0.000001; -export const CurrencyFormField: FCWithChildren<{ +export type CurrencyFormFieldProps = { autoFocus?: boolean; required?: boolean; fullWidth?: boolean; @@ -22,7 +21,9 @@ export const CurrencyFormField: FCWithChildren<{ onChanged?: (newValue: DecCoin) => void; onValidate?: (newValue: string | undefined, isValid: boolean, error?: string) => void; sx?: SxProps; -}> = ({ +}; + +export const CurrencyFormField = ({ autoFocus, required, placeholder, @@ -36,7 +37,7 @@ export const CurrencyFormField: FCWithChildren<{ sx, showCoinMark = true, denom = 'nym', -}) => { +}: CurrencyFormFieldProps) => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [value, setValue] = React.useState(initialValue); const [validationError, setValidationError] = React.useState(validationErrorProp); diff --git a/sdk/typescript/packages/react-components/src/components/currency/CurrencyWithCoinMark.tsx b/sdk/typescript/packages/react-components/lib/components/currency/CurrencyWithCoinMark.tsx similarity index 85% rename from sdk/typescript/packages/react-components/src/components/currency/CurrencyWithCoinMark.tsx rename to sdk/typescript/packages/react-components/lib/components/currency/CurrencyWithCoinMark.tsx index 674ba507a9..6a39cc5a12 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/CurrencyWithCoinMark.tsx +++ b/sdk/typescript/packages/react-components/lib/components/currency/CurrencyWithCoinMark.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { DecCoin } from '@nymproject/types'; import { Stack, SxProps } from '@mui/material'; import { useTheme } from '@mui/material/styles'; @@ -6,13 +5,21 @@ import { CoinMark } from '../coins/CoinMark'; import { CoinMarkTestnet } from '../coins/CoinMarkTestnet'; import { CurrencyAmount } from './CurrencyAmount'; -export const CurrencyWithCoinMark: FCWithChildren<{ +export type CurrencyWithCoinMarkProps = { majorAmount?: DecCoin; fontSize?: number; prefix?: boolean; showSeparators?: boolean; sx?: SxProps; -}> = ({ majorAmount, fontSize, prefix, showSeparators, sx }) => { +}; + +export const CurrencyWithCoinMark = ({ + majorAmount, + fontSize, + prefix, + showSeparators, + sx, +}: CurrencyWithCoinMarkProps) => { const theme = useTheme(); const size = fontSize || theme.typography.htmlFontSize; if (!majorAmount) { diff --git a/sdk/typescript/packages/react-components/lib/components/index.ts b/sdk/typescript/packages/react-components/lib/components/index.ts new file mode 100644 index 0000000000..703a6f35de --- /dev/null +++ b/sdk/typescript/packages/react-components/lib/components/index.ts @@ -0,0 +1,22 @@ +export * from './account/WalletAddressFormField'; +export * from './banners/MaintenanceBanner'; +export { ClientAddress } from './client-address/ClientAddress'; +export { CopyToClipboard } from './clipboard/CopyToClipboard'; +export { CoinMark } from './coins/CoinMark'; +export { CoinMarkTestnet } from './coins/CoinMarkTestnet'; +export { Currency } from './currency/Currency'; +export { CurrencyAmount } from './currency/CurrencyAmount'; +export { CurrencyFormField } from './currency/CurrencyFormField'; +export { CurrencyWithCoinMark } from './currency/CurrencyWithCoinMark'; +export { Link } from './link/Link'; +export { NymIcon } from './logo/NymIcon'; +export { NymLogo } from './logo/NymLogo'; +export { NymLogoBW } from './logo/NymLogoBW'; +export { NymWordmark } from './logo/NymWordmark'; +export { IdentityKeyFormField } from './mixnodes/IdentityKeyFormField'; +export { NetworkSelector } from './networks/NetworkSelector'; +export { PasswordStrength } from './password-strength/PasswordStrength'; +export { MnemonicInput } from './textfields/Mnemonic'; +export { PasswordInput } from './textfields/Password'; +export { Tooltip } from './tooltip/Tooltip'; +export { Error } from './warnings/Error'; diff --git a/sdk/typescript/packages/react-components/src/components/link/Link.tsx b/sdk/typescript/packages/react-components/lib/components/link/Link.tsx similarity index 94% rename from sdk/typescript/packages/react-components/src/components/link/Link.tsx rename to sdk/typescript/packages/react-components/lib/components/link/Link.tsx index a68f07c03d..58ce7f1eba 100644 --- a/sdk/typescript/packages/react-components/src/components/link/Link.tsx +++ b/sdk/typescript/packages/react-components/lib/components/link/Link.tsx @@ -1,14 +1,13 @@ -import * as React from 'react'; import { Box, Typography, Link as MUILink, LinkProps as MUILinkProps } from '@mui/material'; import { OpenInNew } from '@mui/icons-material'; -export interface LinkProps { +export type LinkProps = { text?: string; icon?: React.ReactNode; noIcon?: boolean; fontWeight?: number | string; fontSize?: number | string; -} +}; export const Link = (props: MUILinkProps & LinkProps) => { const { text, icon, underline, noIcon, children, fontWeight, fontSize } = props; diff --git a/sdk/typescript/packages/react-components/src/components/logo/LogoProps.ts b/sdk/typescript/packages/react-components/lib/components/logo/LogoProps.ts similarity index 63% rename from sdk/typescript/packages/react-components/src/components/logo/LogoProps.ts rename to sdk/typescript/packages/react-components/lib/components/logo/LogoProps.ts index 24ef2d0b35..6ecae2b97a 100644 --- a/sdk/typescript/packages/react-components/src/components/logo/LogoProps.ts +++ b/sdk/typescript/packages/react-components/lib/components/logo/LogoProps.ts @@ -1,4 +1,4 @@ -export interface LogoProps { +export type LogoProps = { height?: number | string; width?: number | string; -} +}; diff --git a/sdk/typescript/packages/react-components/lib/components/logo/NymIcon.tsx b/sdk/typescript/packages/react-components/lib/components/logo/NymIcon.tsx new file mode 100644 index 0000000000..965bf23291 --- /dev/null +++ b/sdk/typescript/packages/react-components/lib/components/logo/NymIcon.tsx @@ -0,0 +1,5 @@ +/// +import Logo from '@assets/logo/logo-circle-small.svg?react'; +import { LogoProps } from './LogoProps'; + +export const NymIcon = ({ height, width }: LogoProps) => ; diff --git a/sdk/typescript/packages/react-components/lib/components/logo/NymLogo.tsx b/sdk/typescript/packages/react-components/lib/components/logo/NymLogo.tsx new file mode 100644 index 0000000000..779e8a1549 --- /dev/null +++ b/sdk/typescript/packages/react-components/lib/components/logo/NymLogo.tsx @@ -0,0 +1,4 @@ +import Logo from '@assets/logo/logo-circle.svg?react'; +import { LogoProps } from './LogoProps'; + +export const NymLogo = ({ height, width }: LogoProps) => ; diff --git a/sdk/typescript/packages/react-components/src/components/logo/NymLogoBW.tsx b/sdk/typescript/packages/react-components/lib/components/logo/NymLogoBW.tsx similarity index 64% rename from sdk/typescript/packages/react-components/src/components/logo/NymLogoBW.tsx rename to sdk/typescript/packages/react-components/lib/components/logo/NymLogoBW.tsx index 4ca9ac644a..2fc029d919 100644 --- a/sdk/typescript/packages/react-components/src/components/logo/NymLogoBW.tsx +++ b/sdk/typescript/packages/react-components/lib/components/logo/NymLogoBW.tsx @@ -1,5 +1,4 @@ -import * as React from 'react'; -import Logo from '@assets/logo/logo-bw.svg'; +import Logo from '@assets/logo/logo-bw.svg?react'; import { LogoProps } from './LogoProps'; export const NymLogoBW = ({ height, width }: LogoProps) => ; diff --git a/sdk/typescript/packages/react-components/src/components/logo/NymWordmark.tsx b/sdk/typescript/packages/react-components/lib/components/logo/NymWordmark.tsx similarity index 52% rename from sdk/typescript/packages/react-components/src/components/logo/NymWordmark.tsx rename to sdk/typescript/packages/react-components/lib/components/logo/NymWordmark.tsx index cbdc48bdf8..3b6f790ee1 100644 --- a/sdk/typescript/packages/react-components/src/components/logo/NymWordmark.tsx +++ b/sdk/typescript/packages/react-components/lib/components/logo/NymWordmark.tsx @@ -1,9 +1,10 @@ -import * as React from 'react'; -import Wordmark from '@assets/logo/logo-wordmark.svg'; +import Wordmark from '@assets/logo/logo-wordmark.svg?react'; import { useTheme } from '@mui/material'; import { LogoProps } from './LogoProps'; -export const NymWordmark: FCWithChildren = ({ height, width, fill }) => { +type NymWordmarkProps = LogoProps & { fill?: string }; + +export const NymWordmark = ({ height, width, fill }: NymWordmarkProps) => { const theme = useTheme(); return ; }; diff --git a/sdk/typescript/packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx b/sdk/typescript/packages/react-components/lib/components/mixnodes/IdentityKeyFormField.tsx similarity index 93% rename from sdk/typescript/packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx rename to sdk/typescript/packages/react-components/lib/components/mixnodes/IdentityKeyFormField.tsx index 692e666fe7..e5fad31e7e 100644 --- a/sdk/typescript/packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx +++ b/sdk/typescript/packages/react-components/lib/components/mixnodes/IdentityKeyFormField.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; import { ChangeEvent } from 'react'; -import { InputAdornment, TextField } from '@mui/material'; +import { InputAdornment, TextField, SxProps } from '@mui/material'; import { TextFieldProps } from '@mui/material/TextField/TextField'; import { validateKey } from '@nymproject/types'; import DoneIcon from '@mui/icons-material/Done'; -import { SxProps } from '@mui/system'; -export const IdentityKeyFormField: FCWithChildren<{ +export type IdentityKeyFormFieldProps = { showTickOnValid?: boolean; fullWidth?: boolean; required?: boolean; @@ -23,7 +22,9 @@ export const IdentityKeyFormField: FCWithChildren<{ sx?: SxProps; disabled?: boolean; autoFocus?: boolean; -}> = ({ +}; + +export const IdentityKeyFormField = ({ required, fullWidth, placeholder, @@ -39,7 +40,7 @@ export const IdentityKeyFormField: FCWithChildren<{ size, disabled, autoFocus, -}) => { +}: IdentityKeyFormFieldProps) => { const [value, setValue] = React.useState(initialValue); const [validationError, setValidationError] = React.useState(); diff --git a/sdk/typescript/packages/react-components/src/components/networks/NetworkSelector.tsx b/sdk/typescript/packages/react-components/lib/components/networks/NetworkSelector.tsx similarity index 87% rename from sdk/typescript/packages/react-components/src/components/networks/NetworkSelector.tsx rename to sdk/typescript/packages/react-components/lib/components/networks/NetworkSelector.tsx index 0bcf3ea7bd..12f9687f64 100644 --- a/sdk/typescript/packages/react-components/src/components/networks/NetworkSelector.tsx +++ b/sdk/typescript/packages/react-components/lib/components/networks/NetworkSelector.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { Button, List, ListItem, ListItemIcon, ListItemText, ListSubheader, Popover } from '@mui/material'; import { ArrowDropDown, CheckSharp } from '@mui/icons-material'; @@ -11,21 +11,21 @@ const networks: { networkName: Network; name: string }[] = [ { networkName: 'QA', name: 'QA' }, ]; -const NetworkItem: FCWithChildren<{ title: string; isSelected: boolean; onSelect: () => void }> = ({ - title, - isSelected, - onSelect, -}) => ( +type NetworkItemProps = { title: string; isSelected: boolean; onSelect: () => void }; + +const NetworkItem = ({ title, isSelected, onSelect }: NetworkItemProps) => ( {isSelected && } {title} ); -export const NetworkSelector: FCWithChildren<{ +export type NetworkSelectorProps = { network?: Network; onSwitchNetwork?: (newNetwork: Network) => void; -}> = ({ network, onSwitchNetwork }) => { +}; + +export const NetworkSelector = ({ network, onSwitchNetwork }: NetworkSelectorProps) => { const [anchorEl, setAnchorEl] = useState(null); const handleClick = (event: React.MouseEvent) => { diff --git a/sdk/typescript/packages/react-components/src/components/password-strength/PasswordStrength.tsx b/sdk/typescript/packages/react-components/lib/components/password-strength/PasswordStrength.tsx similarity index 86% rename from sdk/typescript/packages/react-components/src/components/password-strength/PasswordStrength.tsx rename to sdk/typescript/packages/react-components/lib/components/password-strength/PasswordStrength.tsx index 87ad9a3aa9..bb698a89a7 100644 --- a/sdk/typescript/packages/react-components/src/components/password-strength/PasswordStrength.tsx +++ b/sdk/typescript/packages/react-components/lib/components/password-strength/PasswordStrength.tsx @@ -1,15 +1,13 @@ -/* eslint-disable no-nested-ternary */ -import React from 'react'; import zxcvbn, { ZXCVBNScore } from 'zxcvbn'; import { LockOutlined } from '@mui/icons-material'; import { LinearProgress, Stack, Typography, Box } from '@mui/material'; const colorMap = { - 4: 'success' as 'success', - 3: 'success' as 'success', - 2: 'warning' as 'warning', - 1: 'error' as 'error', - 0: 'error' as 'error', + 4: 'success' as const, + 3: 'success' as const, + 2: 'warning' as const, + 1: 'error' as const, + 0: 'error' as const, }; const getText = (score: ZXCVBNScore) => { @@ -61,15 +59,13 @@ const getPasswordStrength = (score: ZXCVBNScore) => { } }; -export const PasswordStrength = ({ - password, - withWarnings, - handleIsSafePassword, -}: { +export type PasswordStrengthProps = { password: string; withWarnings?: boolean; handleIsSafePassword: (isSafe: boolean) => void; -}) => { +}; + +export const PasswordStrength = ({ password, withWarnings, handleIsSafePassword }: PasswordStrengthProps) => { const result = zxcvbn(password); handleIsSafePassword(result.score > 1); diff --git a/sdk/typescript/packages/react-components/src/components/textfields/Mnemonic.tsx b/sdk/typescript/packages/react-components/lib/components/textfields/Mnemonic.tsx similarity index 86% rename from sdk/typescript/packages/react-components/src/components/textfields/Mnemonic.tsx rename to sdk/typescript/packages/react-components/lib/components/textfields/Mnemonic.tsx index ab40c0241f..926cb77af9 100644 --- a/sdk/typescript/packages/react-components/src/components/textfields/Mnemonic.tsx +++ b/sdk/typescript/packages/react-components/lib/components/textfields/Mnemonic.tsx @@ -1,14 +1,16 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { Stack, TextField } from '@mui/material'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { Error } from '../warnings/Error'; -export const MnemonicInput: FCWithChildren<{ +export type MnemonicInputProps = { mnemonic: string; error?: string; onUpdateMnemonic: (mnemonic: string) => void; -}> = ({ mnemonic, error, onUpdateMnemonic }) => { +}; + +export const MnemonicInput = ({ mnemonic, error, onUpdateMnemonic }: MnemonicInputProps) => { const [showMnemonic, setShowMnemonic] = useState(false); return ( diff --git a/sdk/typescript/packages/react-components/src/components/textfields/Password.tsx b/sdk/typescript/packages/react-components/lib/components/textfields/Password.tsx similarity index 83% rename from sdk/typescript/packages/react-components/src/components/textfields/Password.tsx rename to sdk/typescript/packages/react-components/lib/components/textfields/Password.tsx index fde4ebb6c5..a80f1f14a3 100644 --- a/sdk/typescript/packages/react-components/src/components/textfields/Password.tsx +++ b/sdk/typescript/packages/react-components/lib/components/textfields/Password.tsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { Box, IconButton, Stack, TextField } from '@mui/material'; import { Visibility, VisibilityOff } from '@mui/icons-material'; import { Error } from '../warnings/Error'; -export const PasswordInput: FCWithChildren<{ +export type PasswordInputProps = { password: string; error?: string; label?: string; @@ -11,7 +11,17 @@ export const PasswordInput: FCWithChildren<{ autoFocus?: boolean; disabled?: boolean; onUpdatePassword: (password: string) => void; -}> = ({ password, label, placeholder, error, autoFocus, disabled, onUpdatePassword }) => { +}; + +export const PasswordInput = ({ + password, + label, + placeholder, + error, + autoFocus, + disabled, + onUpdatePassword, +}: PasswordInputProps) => { const [showPassword, setShowPassword] = useState(false); return ( diff --git a/sdk/typescript/packages/react-components/lib/components/textfields/index.ts b/sdk/typescript/packages/react-components/lib/components/textfields/index.ts new file mode 100644 index 0000000000..c820330055 --- /dev/null +++ b/sdk/typescript/packages/react-components/lib/components/textfields/index.ts @@ -0,0 +1,2 @@ +export * from './Mnemonic'; +export * from './Password'; diff --git a/sdk/typescript/packages/react-components/src/components/tooltip/Tooltip.tsx b/sdk/typescript/packages/react-components/lib/components/tooltip/Tooltip.tsx similarity index 94% rename from sdk/typescript/packages/react-components/src/components/tooltip/Tooltip.tsx rename to sdk/typescript/packages/react-components/lib/components/tooltip/Tooltip.tsx index 57956dd3ed..092be337bc 100644 --- a/sdk/typescript/packages/react-components/src/components/tooltip/Tooltip.tsx +++ b/sdk/typescript/packages/react-components/lib/components/tooltip/Tooltip.tsx @@ -1,8 +1,7 @@ -import * as React from 'react'; import { IconButton, Tooltip as MUITooltip } from '@mui/material'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; -export interface CustomTooltipProps { +export type CustomTooltipProps = { title: string; arrow?: boolean; id: string; @@ -22,7 +21,7 @@ export interface CustomTooltipProps { textColor?: string; bgColor?: string; maxWidth?: number; -} +}; const TooltipInfoIcon: React.ReactElement = ( ( diff --git a/sdk/typescript/packages/react-components/lib/hooks/index.ts b/sdk/typescript/packages/react-components/lib/hooks/index.ts new file mode 100644 index 0000000000..66d0f3a466 --- /dev/null +++ b/sdk/typescript/packages/react-components/lib/hooks/index.ts @@ -0,0 +1 @@ +export { useIsMounted } from './useIsMounted'; diff --git a/sdk/typescript/packages/react-components/src/hooks/useIsMounted.ts b/sdk/typescript/packages/react-components/lib/hooks/useIsMounted.ts similarity index 100% rename from sdk/typescript/packages/react-components/src/hooks/useIsMounted.ts rename to sdk/typescript/packages/react-components/lib/hooks/useIsMounted.ts diff --git a/sdk/typescript/packages/react-components/lib/index.ts b/sdk/typescript/packages/react-components/lib/index.ts new file mode 100644 index 0000000000..f76fd6f166 --- /dev/null +++ b/sdk/typescript/packages/react-components/lib/index.ts @@ -0,0 +1,2 @@ +export * from './components'; +export * from './hooks'; diff --git a/sdk/typescript/packages/react-components/package.json b/sdk/typescript/packages/react-components/package.json index 3e55174353..e3b8be7026 100644 --- a/sdk/typescript/packages/react-components/package.json +++ b/sdk/typescript/packages/react-components/package.json @@ -1,96 +1,56 @@ { "name": "@nymproject/react", + "private": true, "version": "1.0.0", - "license": "Apache-2.0", - "main": "dist/index.js", - "exports": { - ".": "./dist/index.js", - "./*": "./dist/components/*", - "./hooks/*": "./dist/hooks/*", - "./playground/*": "./dist/playground/*" + "type": "module", + "files": [ + "dist" + ], + "module": "./dist/index.js", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" }, - "typesVersions": { - "*": { - "*": [ - "dist/components/*" - ], - "hooks/*": [ - "dist/hooks/*" - ], - "playground/*": [ - "dist/playground/*" - ] - } - }, - "peerDependencies": { + "dependencies": { "@cosmjs/math": "^0.27.1", "@mui/icons-material": ">= 5", "@mui/lab": "^5.0.0-alpha.72", "@mui/material": ">= 5", "@mui/styles": ">= 5", "@mui/system": ">= 5", - "@nymproject/mui-theme": "workspace:1", + "@nymproject/mui-theme": "workspace:^1.0.0", "@nymproject/nym-validator-client": "^0.18.0", "@nymproject/types": "workspace:1", "bech32": "^1.1.4", "bs58": "4", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "flat": "^5.0.2", + "use-clipboard-copy": "^0.2.0", "zxcvbn": "^4.4.2" }, - "dependencies": { - "@mui/x-tree-view": "^7.10.0", - "flat": "^5.0.2", - "use-clipboard-copy": "^0.2.0" + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { - "@babel/core": "^7.17.5", - "@nymproject/eslint-config-react-typescript": "workspace:^1.0.0", - "@storybook/addon-actions": "^6.5.8", - "@storybook/addon-essentials": "^6.5.8", - "@storybook/addon-interactions": "^6.5.8", - "@storybook/addon-links": "^6.5.8", - "@storybook/builder-webpack5": "^6.5.8", - "@storybook/manager-webpack5": "^6.5.8", "@storybook/react": "^6.5.15", - "@storybook/testing-library": "^0.0.9", - "@svgr/webpack": "^6.1.1", - "@types/flat": "^5.0.2", - "@types/react": "^18.0.26", - "@types/react-dom": "^18.0.10", - "@types/zxcvbn": "^4.4.1", - "@typescript-eslint/eslint-plugin": "^5.13.0", - "@typescript-eslint/parser": "^5.13.0", - "babel-loader": "^8.2.3", - "babel-plugin-root-import": "^5.1.0", - "eslint": "^8.10.0", - "eslint-config-airbnb": "^19.0.4", - "eslint-config-airbnb-typescript": "^16.1.0", - "eslint-config-prettier": "^8.5.0", - "eslint-import-resolver-root-import": "^1.0.4", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jest": "^26.1.1", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.29.2", - "eslint-plugin-react-hooks": "^4.3.0", - "eslint-plugin-storybook": "^0.5.12", - "jest": "^27.1.0", - "prettier": "^2.8.7", - "rimraf": "^3.0.2", - "ts-jest": "^27.0.5", - "tsconfig-paths-webpack-plugin": "^3.5.2", - "typescript": "^4.6.2" - }, - "scripts": { - "clean": "rimraf dist", - "tsc": "tsc --noEmit true", - "build": "tsc --noEmit false", - "watch": "tsc --noEmit false -w", - "lint": "eslint src .storybook", - "lint:fix": "eslint src .storybook --fix", - "storybook": "start-storybook -p 6006", - "storybook:build": "build-storybook" - }, - "sideEffects": false + "@types/flat": "^5.0.5", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "@types/zxcvbn": "^4.4.4", + "@typescript-eslint/eslint-plugin": "^7.13.1", + "@typescript-eslint/parser": "^7.13.1", + "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.57.0", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-refresh": "^0.4.7", + "typescript": "^5.2.2", + "vite": "^5.3.1", + "vite-plugin-dts": "^3.9.1", + "vite-plugin-svgr": "^4.2.0", + "vite-tsconfig-paths": "^4.3.2" + } } diff --git a/sdk/typescript/packages/react-components/src/App.css b/sdk/typescript/packages/react-components/src/App.css new file mode 100644 index 0000000000..b9d355df2a --- /dev/null +++ b/sdk/typescript/packages/react-components/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/sdk/typescript/packages/react-components/src/App.tsx b/sdk/typescript/packages/react-components/src/App.tsx new file mode 100644 index 0000000000..cd219f3d5b --- /dev/null +++ b/sdk/typescript/packages/react-components/src/App.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { CoinMark, CoinMarkTestnet, NymLogo, NymLogoBW, NymWordmark } from '../dist/index'; +import { NymThemeProvider } from '@nymproject/mui-theme'; +import { Stack } from '@mui/system'; + +function App() { + return ( + + + + + + + + + + ); +} + +export default App; diff --git a/sdk/typescript/packages/react-components/src/components/coins/CoinMarkTestnet.tsx b/sdk/typescript/packages/react-components/src/components/coins/CoinMarkTestnet.tsx deleted file mode 100644 index 5f18999347..0000000000 --- a/sdk/typescript/packages/react-components/src/components/coins/CoinMarkTestnet.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { PaletteMode, useTheme } from '@mui/material'; -import TokenLight from '@assets/token/token-light-testnet.svg'; -import TokenDark from '@assets/token/token-dark-testnet.svg'; - -export const CoinMarkTestnet: FCWithChildren<{ - mode?: PaletteMode; - width?: number | string; - height?: number | string; -}> = ({ mode, ...props }) => { - const theme = useTheme(); - const modeWithTheme = mode || theme.palette.mode; - if (modeWithTheme === 'light') { - return ; - } - return ; -}; diff --git a/sdk/typescript/packages/react-components/src/components/logo/NymIcon.tsx b/sdk/typescript/packages/react-components/src/components/logo/NymIcon.tsx deleted file mode 100644 index f7d887dffa..0000000000 --- a/sdk/typescript/packages/react-components/src/components/logo/NymIcon.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from 'react'; -import Logo from '@assets/logo/logo-circle-small.svg'; -import { LogoProps } from './LogoProps'; - -export const NymIcon: FCWithChildren = ({ height, width }) => ; diff --git a/sdk/typescript/packages/react-components/src/components/logo/NymLogo.tsx b/sdk/typescript/packages/react-components/src/components/logo/NymLogo.tsx deleted file mode 100644 index 28f6534629..0000000000 --- a/sdk/typescript/packages/react-components/src/components/logo/NymLogo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from 'react'; -import Logo from '@assets/logo/logo-circle.svg'; -import { LogoProps } from './LogoProps'; - -export const NymLogo: FCWithChildren = ({ height, width }) => ; diff --git a/sdk/typescript/packages/react-components/src/index.css b/sdk/typescript/packages/react-components/src/index.css new file mode 100644 index 0000000000..6119ad9a8f --- /dev/null +++ b/sdk/typescript/packages/react-components/src/index.css @@ -0,0 +1,68 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/sdk/typescript/packages/react-components/src/main.tsx b/sdk/typescript/packages/react-components/src/main.tsx new file mode 100644 index 0000000000..ce72de0c93 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/main.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; + +const root = document.getElementById('root'); + +if (!root) { + throw new Error('Root element not found'); +} + +ReactDOM.createRoot(root).render( + + + , +); diff --git a/sdk/typescript/packages/react-components/src/playground/Playground.tsx b/sdk/typescript/packages/react-components/src/playground/Playground.tsx index 43a66355a9..ca3397cd1e 100644 --- a/sdk/typescript/packages/react-components/src/playground/Playground.tsx +++ b/sdk/typescript/packages/react-components/src/playground/Playground.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { PlaygroundButtons } from './buttons'; import { PlaygroundCheckboxes } from './checkboxes'; import { PlaygroundBasicSwitches } from './switches'; diff --git a/sdk/typescript/packages/react-components/src/playground/buttons.tsx b/sdk/typescript/packages/react-components/src/playground/buttons.tsx index 226ac527cd..6b99fa9815 100644 --- a/sdk/typescript/packages/react-components/src/playground/buttons.tsx +++ b/sdk/typescript/packages/react-components/src/playground/buttons.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { Button, Stack } from '@mui/material'; export const PlaygroundButtons: FCWithChildren = () => ( diff --git a/sdk/typescript/packages/react-components/src/playground/checkboxes.tsx b/sdk/typescript/packages/react-components/src/playground/checkboxes.tsx index a903fc1f59..d473a6f70b 100644 --- a/sdk/typescript/packages/react-components/src/playground/checkboxes.tsx +++ b/sdk/typescript/packages/react-components/src/playground/checkboxes.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import Checkbox from '@mui/material/Checkbox'; const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; diff --git a/sdk/typescript/packages/react-components/src/playground/fonts.tsx b/sdk/typescript/packages/react-components/src/playground/fonts.tsx index a7347c0191..5aa90cba0e 100644 --- a/sdk/typescript/packages/react-components/src/playground/fonts.tsx +++ b/sdk/typescript/packages/react-components/src/playground/fonts.tsx @@ -1,5 +1,3 @@ -import * as React from 'react'; - const CONTENT = 'The quick brown fox jumped over the white fence'; const WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]; diff --git a/sdk/typescript/packages/react-components/src/playground/switches.tsx b/sdk/typescript/packages/react-components/src/playground/switches.tsx index dde14e1e2b..e5a0714ffb 100644 --- a/sdk/typescript/packages/react-components/src/playground/switches.tsx +++ b/sdk/typescript/packages/react-components/src/playground/switches.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import Switch from '@mui/material/Switch'; const label = { inputProps: { 'aria-label': 'Switch demo' } }; diff --git a/sdk/typescript/packages/react-components/src/playground/theme.tsx b/sdk/typescript/packages/react-components/src/playground/theme.tsx index 8bab62e51b..49c34b20b5 100644 --- a/sdk/typescript/packages/react-components/src/playground/theme.tsx +++ b/sdk/typescript/packages/react-components/src/playground/theme.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { useTheme } from '@mui/material'; import { MUIThemeExplorer } from './theme/MUIThemeExplorer'; import { PaletteSwatches, PaletteSwatchesList } from './theme/PaletteSwatches'; diff --git a/sdk/typescript/packages/react-components/src/stories/Playground.stories.js b/sdk/typescript/packages/react-components/src/stories/Playground.stories.js new file mode 100644 index 0000000000..347dc544c2 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/Playground.stories.js @@ -0,0 +1,21 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ThemeExplorer = exports.Palette = exports.AllControls = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var Playground_1 = require("../playground/Playground"); +var theme_1 = require("../playground/theme"); +var MUIThemeExplorer_1 = require("../playground/theme/MUIThemeExplorer"); +exports.default = { + title: 'Playground', + component: Playground_1.Playground, +}; +var AllControls = function () { return (0, jsx_runtime_1.jsx)(Playground_1.Playground, {}); }; +exports.AllControls = AllControls; +var Palette = function () { return (0, jsx_runtime_1.jsx)(theme_1.PlaygroundPalette, {}); }; +exports.Palette = Palette; +var ThemeExplorer = function () { + var theme = (0, material_1.useTheme)(); + return (0, jsx_runtime_1.jsx)(MUIThemeExplorer_1.MUIThemeExplorer, { theme: theme }); +}; +exports.ThemeExplorer = ThemeExplorer; diff --git a/sdk/typescript/packages/react-components/src/stories/Playground.stories.tsx b/sdk/typescript/packages/react-components/src/stories/Playground.stories.tsx index 8cd33e57d5..1df23bc15f 100644 --- a/sdk/typescript/packages/react-components/src/stories/Playground.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/Playground.stories.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { useTheme } from '@mui/material'; import { Playground } from '../playground/Playground'; diff --git a/sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.js b/sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.js new file mode 100644 index 0000000000..53ac82581f --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.js @@ -0,0 +1,28 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.HideValidTick = exports.FullWidth = exports.WithPlaceholder = exports.WithLabel = exports.ReadOnlyErrorValue = exports.ReadOnlyValidValue = exports.ValidValue = exports.ErrorValue = exports.Empty = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var account_1 = require("@lib/components/account"); +exports.default = { + title: 'Accounts/Wallet Address', + component: account_1.WalletAddressFormField, +}; +var Empty = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, {}); }; +exports.Empty = Empty; +var ErrorValue = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { initialValue: "this is a bad value" }); }; +exports.ErrorValue = ErrorValue; +var ValidValue = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" }); }; +exports.ValidValue = ValidValue; +var ReadOnlyValidValue = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { readOnly: true, initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" })); }; +exports.ReadOnlyValidValue = ReadOnlyValidValue; +var ReadOnlyErrorValue = function () { return (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { readOnly: true, initialValue: "this is a bad value" }); }; +exports.ReadOnlyErrorValue = ReadOnlyErrorValue; +var WithLabel = function () { return ((0, jsx_runtime_1.jsx)(material_1.Box, { p: 2, children: (0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec", textFieldProps: { label: 'Identity Key' } }) })); }; +exports.WithLabel = WithLabel; +var WithPlaceholder = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { textFieldProps: { placeholder: 'Please enter an wallet address' } })); }; +exports.WithPlaceholder = WithPlaceholder; +var FullWidth = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { fullWidth: true, initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" })); }; +exports.FullWidth = FullWidth; +var HideValidTick = function () { return ((0, jsx_runtime_1.jsx)(account_1.WalletAddressFormField, { showTickOnValid: false, fullWidth: true, initialValue: "n1xr4w0kddak8d8zlfmu8sl6dk2r4p9uhhzzlaec" })); }; +exports.HideValidTick = HideValidTick; diff --git a/sdk/typescript/packages/react-components/src/components/account/WalletAddressFormField.stories.tsx b/sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.tsx similarity index 93% rename from sdk/typescript/packages/react-components/src/components/account/WalletAddressFormField.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.tsx index af85590431..f8e563096a 100644 --- a/sdk/typescript/packages/react-components/src/components/account/WalletAddressFormField.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Box } from '@mui/material'; -import { WalletAddressFormField } from './WalletAddressFormField'; +import { WalletAddressFormField } from '@lib/components/account'; export default { title: 'Accounts/Wallet Address', diff --git a/sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.js b/sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.js new file mode 100644 index 0000000000..13eac796ff --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.js @@ -0,0 +1,56 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.WithSmallIcons = exports.EmptyWithLabelAndCopy = exports.Empty = exports.ShowEntireAddress = exports.WithLabel = exports.WithCopy = exports.Default = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var client_address_1 = require("@lib/components/client-address"); +exports.default = { + title: 'Wallet / Client Address', + component: client_address_1.ClientAddressDisplay, +}; +var Template = function (args) { return ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignContent: "center", children: (0, jsx_runtime_1.jsx)(client_address_1.ClientAddressDisplay, __assign({}, args)) })); }; +exports.Default = Template.bind({}); +exports.Default.args = { + address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111', +}; +exports.WithCopy = Template.bind({}); +exports.WithCopy.args = { + address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111', + withCopy: true, + smallIcons: true, +}; +exports.WithLabel = Template.bind({}); +exports.WithLabel.args = { + withLabel: true, + address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111', +}; +exports.ShowEntireAddress = Template.bind({}); +exports.ShowEntireAddress.args = { + withLabel: true, + showEntireAddress: true, + address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111', +}; +exports.Empty = Template.bind({}); +exports.Empty.args = {}; +exports.EmptyWithLabelAndCopy = Template.bind({}); +exports.EmptyWithLabelAndCopy.args = { + withLabel: true, + withCopy: true, +}; +exports.WithSmallIcons = Template.bind({}); +exports.WithSmallIcons.args = { + address: 'n222gnd9k6rytn6tz7pf8d2d4dawl7e9cr26111', + withCopy: true, + smallIcons: true, +}; diff --git a/sdk/typescript/packages/react-components/src/components/client-address/ClientAddress.stories.tsx b/sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.tsx similarity index 93% rename from sdk/typescript/packages/react-components/src/components/client-address/ClientAddress.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.tsx index 304185826d..80ece1b2f1 100644 --- a/sdk/typescript/packages/react-components/src/components/client-address/ClientAddress.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import { Box } from '@mui/material'; -import { ClientAddressDisplay } from './ClientAddress'; +import { ClientAddressDisplay } from '@lib/components/client-address'; export default { title: 'Wallet / Client Address', diff --git a/sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.js b/sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.js new file mode 100644 index 0000000000..ccb271cd26 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.js @@ -0,0 +1,36 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.SmallIcon = exports.Default = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var clipboard_1 = require("@lib/components/clipboard"); +exports.default = { + title: 'Decorators / Copy to clipboard', + component: clipboard_1.CopyToClipboard, +}; +var Template = function (args) { + var value = args.value; + return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignContent: "center", children: [(0, jsx_runtime_1.jsx)(clipboard_1.CopyToClipboard, __assign({}, args)), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 1, children: value })] })); +}; +exports.Default = Template.bind({}); +exports.Default.args = { + tooltip: 'Copy identity key to clipboard', + value: '123456', +}; +exports.SmallIcon = Template.bind({}); +exports.SmallIcon.args = { + tooltip: 'Copy identity key to clipboard', + value: '123456', + smallIcons: true, +}; diff --git a/sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.stories.tsx b/sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.tsx similarity index 90% rename from sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.tsx index 0ef243cd45..864d387c76 100644 --- a/sdk/typescript/packages/react-components/src/components/clipboard/CopyToClipboard.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import { Box, Typography } from '@mui/material'; -import { CopyToClipboard } from './CopyToClipboard'; +import { CopyToClipboard } from '@lib/components/clipboard'; export default { title: 'Decorators / Copy to clipboard', diff --git a/sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.js b/sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.js new file mode 100644 index 0000000000..fec995db09 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.js @@ -0,0 +1,19 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Sizes = exports.DarkMode = exports.LightMode = exports.Auto = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var coins_1 = require("@lib/components/coins"); +exports.default = { + title: 'Branding/Coin Mark', + component: coins_1.CoinMark, +}; +var Auto = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { height: 250 }); }; +exports.Auto = Auto; +var LightMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { mode: "light", height: 250 }); }; +exports.LightMode = LightMode; +var DarkMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { mode: "dark", height: 250 }); }; +exports.DarkMode = DarkMode; +var sizes = [8, 10, 12, 16, 20, 32, 40, 64]; +var Sizes = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, children: sizes.map(function (size) { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 4, p: 1, alignItems: "center", borderBottom: "1px solid #444", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: { opacity: 0.5 }, width: "40px", children: [size, "px"] }), (0, jsx_runtime_1.jsx)(coins_1.CoinMark, { height: size }, size)] })); }) })); }; +exports.Sizes = Sizes; diff --git a/sdk/typescript/packages/react-components/src/components/coins/CoinMark.stories.tsx b/sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.tsx similarity index 92% rename from sdk/typescript/packages/react-components/src/components/coins/CoinMark.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.tsx index a7ed38de80..6b60e97eb6 100644 --- a/sdk/typescript/packages/react-components/src/components/coins/CoinMark.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Stack, Typography } from '@mui/material'; -import { CoinMark } from './CoinMark'; +import { CoinMark } from '@lib/components/coins'; export default { title: 'Branding/Coin Mark', diff --git a/sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.js b/sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.js new file mode 100644 index 0000000000..8194c24519 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.js @@ -0,0 +1,19 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Sizes = exports.DarkMode = exports.LightMode = exports.Auto = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var coins_1 = require("@lib/components/coins"); +exports.default = { + title: 'Branding/Coin Mark (testnet)', + component: coins_1.CoinMarkTestnet, +}; +var Auto = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { height: 250 }); }; +exports.Auto = Auto; +var LightMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { mode: "light", height: 250 }); }; +exports.LightMode = LightMode; +var DarkMode = function () { return (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { mode: "dark", height: 250 }); }; +exports.DarkMode = DarkMode; +var sizes = [8, 10, 12, 16, 20, 32, 40, 64]; +var Sizes = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", spacing: 2, children: sizes.map(function (size) { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 4, p: 1, alignItems: "center", borderBottom: "1px solid #444", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: { opacity: 0.5 }, width: "40px", children: [size, "px"] }), (0, jsx_runtime_1.jsx)(coins_1.CoinMarkTestnet, { height: size }, size)] })); }) })); }; +exports.Sizes = Sizes; diff --git a/sdk/typescript/packages/react-components/src/components/coins/CoinMarkTestnet.stories.tsx b/sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.tsx similarity index 91% rename from sdk/typescript/packages/react-components/src/components/coins/CoinMarkTestnet.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.tsx index bbe7389732..3ced4807f6 100644 --- a/sdk/typescript/packages/react-components/src/components/coins/CoinMarkTestnet.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Stack, Typography } from '@mui/material'; -import { CoinMarkTestnet } from './CoinMarkTestnet'; +import { CoinMarkTestnet } from '@lib/components/coins'; export default { title: 'Branding/Coin Mark (testnet)', diff --git a/sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.js b/sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.js new file mode 100644 index 0000000000..b006b7ec7c --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.js @@ -0,0 +1,19 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.WithSX = exports.Empty = exports.Testnet = exports.Mainnet = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var currency_1 = require("@lib/components/currency"); +var CurrencyAmount_stories_1 = require("./CurrencyAmount.stories"); +exports.default = { + title: 'Currency/Currency display', + component: currency_1.Currency, +}; +var Mainnet = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [(0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' }, showDenom: false }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' }, showCoinMark: true }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nym' }, showCoinMark: true, coinMarkPrefix: true }), CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nym' }, showCoinMark: true, coinMarkPrefix: true }, amount)); })] })); }; +exports.Mainnet = Mainnet; +var Testnet = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [(0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' } }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' }, showDenom: false }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' }, showCoinMark: true }), (0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: '42.123456', denom: 'nymt' }, showCoinMark: true, coinMarkPrefix: true }), CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nymt' }, showCoinMark: true, coinMarkPrefix: true }, amount)); })] })); }; +exports.Testnet = Testnet; +var Empty = function () { return (0, jsx_runtime_1.jsx)(currency_1.Currency, {}); }; +exports.Empty = Empty; +var WithSX = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nym' }, showCoinMark: true, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); }), CurrencyAmount_stories_1.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.Currency, { majorAmount: { amount: amount, denom: 'nym' }, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); })] })); }; +exports.WithSX = WithSX; diff --git a/sdk/typescript/packages/react-components/src/components/currency/Currency.stories.tsx b/sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.tsx similarity index 96% rename from sdk/typescript/packages/react-components/src/components/currency/Currency.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.tsx index 6a7c16c9df..82484cb9b7 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/Currency.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Stack } from '@mui/material'; -import { Currency } from './Currency'; +import { Currency } from '@lib/components/currency'; import { amounts } from './CurrencyAmount.stories'; export default { diff --git a/sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.js b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.js new file mode 100644 index 0000000000..6014e4340b --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.js @@ -0,0 +1,45 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.WithSX = exports.NoSeparatorsWithSX = exports.Empty = exports.Weird = exports.MaxRange = exports.NoSeparators = exports.WithSeparators = exports.amounts = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var currency_1 = require("@lib/components/currency"); +exports.default = { + title: 'Currency/Currency amount', + component: currency_1.CurrencyAmount, +}; +exports.amounts = [ + '0', + '0.1', + '0.01', + '0.001', + '0.0001', + '0.00001', + '1.000001', + '10.000001', + '100.000001', + '1000.000001', + '10000.000001', + '100000.000001', + '1000000.000001', + '10000000.000001', + '100000000.000001', + '1000000000.000001', + '10000000000.000001', + '100000000000.000001', + '1000000000000.000001', +]; +var WithSeparators = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' } }, amount)); }) })); }; +exports.WithSeparators = WithSeparators; +var NoSeparators = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' }, showSeparators: false }, amount)); }) })); }; +exports.NoSeparators = NoSeparators; +var MaxRange = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '1000000000000.000001', denom: 'nym' } }); }; +exports.MaxRange = MaxRange; +var Weird = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", children: [(0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000000000000.000000', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000000000000.00', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000.0000', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0000.000', denom: 'nym' } }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: '0.00', denom: 'nym' } })] })); }; +exports.Weird = Weird; +var Empty = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, {}); }; +exports.Empty = Empty; +var NoSeparatorsWithSX = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' }, showSeparators: false, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); }) })); }; +exports.NoSeparatorsWithSX = NoSeparatorsWithSX; +var WithSX = function () { return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", children: exports.amounts.map(function (amount) { return ((0, jsx_runtime_1.jsx)(currency_1.CurrencyAmount, { majorAmount: { amount: amount, denom: 'nym' }, sx: { fontSize: 14, color: 'red', fontWeight: 'bold', m: 1 } }, amount)); }) })); }; +exports.WithSX = WithSX; diff --git a/sdk/typescript/packages/react-components/src/components/currency/CurrencyAmount.stories.tsx b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.tsx similarity index 95% rename from sdk/typescript/packages/react-components/src/components/currency/CurrencyAmount.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.tsx index 0c6743022f..27bfcb525d 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/CurrencyAmount.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Stack } from '@mui/material'; -import { CurrencyAmount } from './CurrencyAmount'; +import { CurrencyAmount } from '@lib/components/currency'; export default { title: 'Currency/Currency amount', @@ -9,7 +8,6 @@ export default { } as ComponentMeta; export const amounts = [ - undefined, '0', '0.1', '0.01', diff --git a/sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.js b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.js new file mode 100644 index 0000000000..9dea0ce1f9 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.js @@ -0,0 +1,34 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.ReadOnly = exports.EmptyWithAutofocus = exports.Empty = exports.Zero = exports.MicroNym = exports.ErrorNegative = exports.ErrorToSmall = exports.ErrorToBig = exports.HideCoinMark = exports.FullWidth = exports.Testnet = exports.Mainnet = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var currency_1 = require("@lib/components/currency"); +exports.default = { + title: 'Currency/Currency form field', + component: currency_1.CurrencyFormField, +}; +var Mainnet = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nymt" }); }; +exports.Mainnet = Mainnet; +var Testnet = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nymt" }); }; +exports.Testnet = Testnet; +var FullWidth = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nym", fullWidth: true }); }; +exports.FullWidth = FullWidth; +var HideCoinMark = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nym", showCoinMark: false }); }; +exports.HideCoinMark = HideCoinMark; +var ErrorToBig = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "1_000_000_000_000_001", denom: "nym" }); }; +exports.ErrorToBig = ErrorToBig; +var ErrorToSmall = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "0.0000001", denom: "nym" }); }; +exports.ErrorToSmall = ErrorToSmall; +var ErrorNegative = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "-1", denom: "nym" }); }; +exports.ErrorNegative = ErrorNegative; +var MicroNym = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "0.000001", denom: "nym" }); }; +exports.MicroNym = MicroNym; +var Zero = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "0", denom: "nym" }); }; +exports.Zero = Zero; +var Empty = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, {}); }; +exports.Empty = Empty; +var EmptyWithAutofocus = function () { return (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { autoFocus: true }); }; +exports.EmptyWithAutofocus = EmptyWithAutofocus; +var ReadOnly = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 2, children: [(0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nym", readOnly: true }), (0, jsx_runtime_1.jsx)(currency_1.CurrencyFormField, { initialValue: "42.123456", denom: "nymt", readOnly: true })] })); }; +exports.ReadOnly = ReadOnly; diff --git a/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.stories.tsx b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.tsx similarity index 68% rename from sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.tsx index e418d3e280..0cdb17845a 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.tsx @@ -1,30 +1,29 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Stack } from '@mui/material'; -import { CurrencyFormField } from './CurrencyFormField'; +import { CurrencyFormField } from '@lib/components/currency'; export default { title: 'Currency/Currency form field', component: CurrencyFormField, } as ComponentMeta; -export const Mainnet = () => ; +export const Mainnet = () => ; -export const Testnet = () => ; +export const Testnet = () => ; -export const FullWidth = () => ; +export const FullWidth = () => ; -export const HideCoinMark = () => ; +export const HideCoinMark = () => ; -export const ErrorToBig = () => ; +export const ErrorToBig = () => ; -export const ErrorToSmall = () => ; +export const ErrorToSmall = () => ; -export const ErrorNegative = () => ; +export const ErrorNegative = () => ; -export const MicroNym = () => ; +export const MicroNym = () => ; -export const Zero = () => ; +export const Zero = () => ; export const Empty = () => ; @@ -32,7 +31,7 @@ export const EmptyWithAutofocus = () => ; export const ReadOnly = () => ( - - + + ); diff --git a/sdk/typescript/packages/react-components/src/stories/link/Link.stories.js b/sdk/typescript/packages/react-components/src/stories/link/Link.stories.js new file mode 100644 index 0000000000..d5e73b9b88 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/link/Link.stories.js @@ -0,0 +1,19 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.InTextExample = exports.WithCustomChildren = exports.NoIcon = exports.Default = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var icons_material_1 = require("@mui/icons-material"); +var link_1 = require("@lib/components/link"); +exports.default = { + title: 'Basics/Link', + component: link_1.Link, +}; +var Default = function () { return (0, jsx_runtime_1.jsx)(link_1.Link, { text: "link", href: "https://nymtech.net/", target: "_blank" }); }; +exports.Default = Default; +var NoIcon = function () { return (0, jsx_runtime_1.jsx)(link_1.Link, { text: "link", href: "https://nymtech.net/", target: "_blank", noIcon: true }); }; +exports.NoIcon = NoIcon; +var WithCustomChildren = function () { return ((0, jsx_runtime_1.jsx)(link_1.Link, { href: "https://nymtech.net/", target: "_blank", children: (0, jsx_runtime_1.jsx)(icons_material_1.Link, {}) })); }; +exports.WithCustomChildren = WithCustomChildren; +var InTextExample = function () { return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["You can find the Nym website ", (0, jsx_runtime_1.jsx)(link_1.Link, { href: "https://nymtech.net/", target: "_blank", text: "here" }), "."] })); }; +exports.InTextExample = InTextExample; diff --git a/sdk/typescript/packages/react-components/src/components/link/Link.stories.tsx b/sdk/typescript/packages/react-components/src/stories/link/Link.stories.tsx similarity index 92% rename from sdk/typescript/packages/react-components/src/components/link/Link.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/link/Link.stories.tsx index a1dd2b88ac..ad3a674739 100644 --- a/sdk/typescript/packages/react-components/src/components/link/Link.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/link/Link.stories.tsx @@ -1,8 +1,7 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Typography } from '@mui/material'; import { Link as LinkIcon } from '@mui/icons-material'; -import { Link } from './Link'; +import { Link } from '@lib/components/link'; export default { title: 'Basics/Link', diff --git a/sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.js b/sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.js new file mode 100644 index 0000000000..b94346b2fd --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.js @@ -0,0 +1,15 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.Wordmark = exports.Icon = exports.Logo = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var logo_1 = require("@lib/components/logo"); +exports.default = { + title: 'Branding/Nym Logo', + component: logo_1.NymLogo, +}; +var Logo = function () { return (0, jsx_runtime_1.jsx)(logo_1.NymLogo, { height: 250 }); }; +exports.Logo = Logo; +var Icon = function () { return (0, jsx_runtime_1.jsx)(logo_1.NymIcon, { height: 250 }); }; +exports.Icon = Icon; +var Wordmark = function () { return (0, jsx_runtime_1.jsx)(logo_1.NymWordmark, { height: 250 }); }; +exports.Wordmark = Wordmark; diff --git a/sdk/typescript/packages/react-components/src/components/logo/Logo.stories.tsx b/sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.tsx similarity index 68% rename from sdk/typescript/packages/react-components/src/components/logo/Logo.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.tsx index d63d54a664..878fe1674e 100644 --- a/sdk/typescript/packages/react-components/src/components/logo/Logo.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.tsx @@ -1,8 +1,5 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; -import { NymLogo } from './NymLogo'; -import { NymWordmark } from './NymWordmark'; -import { NymIcon } from './NymIcon'; +import { NymLogo, NymWordmark, NymIcon } from '@lib/components/logo'; export default { title: 'Branding/Nym Logo', diff --git a/sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.js b/sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.js new file mode 100644 index 0000000000..33fd2203f7 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.js @@ -0,0 +1,28 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.HideValidTick = exports.FullWidth = exports.WithPlaceholder = exports.WithLabel = exports.ReadOnlyErrorValue = exports.ReadOnlyValidValue = exports.ValidValue = exports.ErrorValue = exports.Empty = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var material_1 = require("@mui/material"); +var components_1 = require("@lib/components"); +exports.default = { + title: 'Mixnodes/Identity Key', + component: components_1.IdentityKeyFormField, +}; +var Empty = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, {}); }; +exports.Empty = Empty; +var ErrorValue = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { initialValue: "this is a bad value" }); }; +exports.ErrorValue = ErrorValue; +var ValidValue = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" }); }; +exports.ValidValue = ValidValue; +var ReadOnlyValidValue = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { readOnly: true, initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" })); }; +exports.ReadOnlyValidValue = ReadOnlyValidValue; +var ReadOnlyErrorValue = function () { return (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { readOnly: true, initialValue: "this is a bad value" }); }; +exports.ReadOnlyErrorValue = ReadOnlyErrorValue; +var WithLabel = function () { return ((0, jsx_runtime_1.jsx)(material_1.Box, { p: 2, children: (0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu", textFieldProps: { label: 'Identity Key' } }) })); }; +exports.WithLabel = WithLabel; +var WithPlaceholder = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { textFieldProps: { placeholder: 'Please enter an Identity Key' } })); }; +exports.WithPlaceholder = WithPlaceholder; +var FullWidth = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { fullWidth: true, initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" })); }; +exports.FullWidth = FullWidth; +var HideValidTick = function () { return ((0, jsx_runtime_1.jsx)(components_1.IdentityKeyFormField, { showTickOnValid: false, fullWidth: true, initialValue: "DZ6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyhu" })); }; +exports.HideValidTick = HideValidTick; diff --git a/sdk/typescript/packages/react-components/src/components/mixnodes/IdentityKeyFormField.stories.tsx b/sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.tsx similarity index 93% rename from sdk/typescript/packages/react-components/src/components/mixnodes/IdentityKeyFormField.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.tsx index c3b612a108..45baf6be37 100644 --- a/sdk/typescript/packages/react-components/src/components/mixnodes/IdentityKeyFormField.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.tsx @@ -1,7 +1,6 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; import { Box } from '@mui/material'; -import { IdentityKeyFormField } from './IdentityKeyFormField'; +import { IdentityKeyFormField } from '@lib/components'; export default { title: 'Mixnodes/Identity Key', diff --git a/sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.js b/sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.js new file mode 100644 index 0000000000..6220aacc52 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.js @@ -0,0 +1,31 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.WithValue = exports.Default = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var react_1 = require("react"); +var networks_1 = require("@lib/components/networks"); +exports.default = { + title: 'Networks/Network Selector', + component: networks_1.NetworkSelector, + argTypes: { + network: { + options: ['MAINNET', 'SANDBOX', 'QA'], + control: { type: 'radio' }, + }, + onSwitchNetwork: { type: 'function' }, + }, +}; +var Template = function (_a) { + var networkArg = _a.network, onSwitchNetwork = _a.onSwitchNetwork; + var _b = react_1.default.useState(networkArg), network = _b[0], setNetwork = _b[1]; + var handleClick = function (newNetwork) { + setNetwork(newNetwork); + if (onSwitchNetwork && newNetwork) { + onSwitchNetwork(newNetwork); + } + }; + return (0, jsx_runtime_1.jsx)(networks_1.NetworkSelector, { network: network || networkArg, onSwitchNetwork: handleClick }); +}; +exports.Default = Template.bind({}); +exports.WithValue = Template.bind({}); +exports.WithValue.args = { network: 'MAINNET' }; diff --git a/sdk/typescript/packages/react-components/src/components/networks/NetworkSelector.stories.tsx b/sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.tsx similarity index 90% rename from sdk/typescript/packages/react-components/src/components/networks/NetworkSelector.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.tsx index 01f2982950..9f1440e8e3 100644 --- a/sdk/typescript/packages/react-components/src/components/networks/NetworkSelector.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; +import React from 'react'; import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { NetworkSelector, Network } from './NetworkSelector'; +import { NetworkSelector, type Network } from '@lib/components/networks'; export default { title: 'Networks/Network Selector', diff --git a/sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.js b/sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.js new file mode 100644 index 0000000000..04f092e06a --- /dev/null +++ b/sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.js @@ -0,0 +1,13 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.NEStyle = exports.Default = void 0; +var jsx_runtime_1 = require("react/jsx-runtime"); +var tooltip_1 = require("@lib/components/tooltip"); +exports.default = { + title: 'Basics/Tooltip', + component: tooltip_1.Tooltip, +}; +var Default = function () { return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "tooltip", id: "field-name", placement: "top-start", arrow: true }); }; +exports.Default = Default; +var NEStyle = function () { return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "Level of stake saturation for this node. Nodes receive more rewards the higher their saturation level, up to 100%. Beyond 100% no additional rewards are granted. The current stake saturation level is: 1 million NYM, computed as S/K where S is total amount of tokens available to stakeholders and K is the number of nodes in the reward set.", id: "field-name", placement: "top-start", textColor: "#111826", bgColor: "#A0AED1", maxWidth: 230, arrow: true })); }; +exports.NEStyle = NEStyle; diff --git a/sdk/typescript/packages/react-components/src/components/tooltip/Tooltip.stories.tsx b/sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.tsx similarity index 91% rename from sdk/typescript/packages/react-components/src/components/tooltip/Tooltip.stories.tsx rename to sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.tsx index 873295874b..bce7b693c1 100644 --- a/sdk/typescript/packages/react-components/src/components/tooltip/Tooltip.stories.tsx +++ b/sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.tsx @@ -1,6 +1,5 @@ -import * as React from 'react'; import { ComponentMeta } from '@storybook/react'; -import { Tooltip } from './Tooltip'; +import { Tooltip } from '@lib/components/tooltip'; export default { title: 'Basics/Tooltip', diff --git a/sdk/typescript/packages/react-components/src/vite-env.d.ts b/sdk/typescript/packages/react-components/src/vite-env.d.ts new file mode 100644 index 0000000000..b1f45c7866 --- /dev/null +++ b/sdk/typescript/packages/react-components/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/sdk/typescript/packages/react-components/temp_package.json b/sdk/typescript/packages/react-components/temp_package.json new file mode 100644 index 0000000000..9e7b9b241a --- /dev/null +++ b/sdk/typescript/packages/react-components/temp_package.json @@ -0,0 +1,96 @@ +{ + "name": "@nymproject/react' + "version": "1.0.0", + "license": "Apache-2.0", + "main": "dist/index.js", + "exports": { + ".": "./dist/index.js", + "./*": "./dist/components/*", + "./hooks/*": "./dist/hooks/*", + "./playground/*": "./dist/playground/*" + }, + "typesVersions": { + "*": { + "*": [ + "dist/components/*" + ], + "hooks/*": [ + "dist/hooks/*" + ], + "playground/*": [ + "dist/playground/*" + ] + } + }, + "peerDependencies": { + "@cosmjs/math": "^0.27.1", + "@mui/icons-material": ">= 5", + "@mui/lab": "^5.0.0-alpha.72", + "@mui/material": ">= 5", + "@mui/styles": ">= 5", + "@mui/system": ">= 5", + "@nymproject/mui-theme": "workspace:1", + "@nymproject/nym-validator-client": "^0.18.0", + "@nymproject/types": "workspace:1", + "@nymproject/assets": "workspace:^1.0.0", + "bech32": "^1.1.4", + "bs58": "4", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "zxcvbn": "^4.4.2" + }, + "dependencies": { + "flat": "^5.0.2", + "use-clipboard-copy": "^0.2.0" + }, + "devDependencies": { + "@babel/core": "^7.17.5", + "@nymproject/eslint-config-react-typescript": "workspace:^1.0.0", + "@storybook/addon-actions": "^6.5.8", + "@storybook/addon-essentials": "^6.5.8", + "@storybook/addon-interactions": "^6.5.8", + "@storybook/addon-links": "^6.5.8", + "@storybook/builder-webpack5": "^6.5.8", + "@storybook/manager-webpack5": "^6.5.8", + "@storybook/react": "^6.5.15", + "@storybook/testing-library": "^0.0.9", + "@svgr/webpack": "^6.1.1", + "@types/flat": "^5.0.2", + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.10", + "@types/zxcvbn": "^4.4.1", + "@typescript-eslint/eslint-plugin": "^5.13.0", + "@typescript-eslint/parser": "^5.13.0", + "babel-loader": "^8.2.3", + "babel-plugin-root-import": "^5.1.0", + "eslint": "^8.10.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-airbnb-typescript": "^16.1.0", + "eslint-config-prettier": "^8.5.0", + "eslint-import-resolver-root-import": "^1.0.4", + "eslint-plugin-import": "^2.25.4", + "eslint-plugin-jest": "^26.1.1", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.29.2", + "eslint-plugin-react-hooks": "^4.3.0", + "eslint-plugin-storybook": "^0.5.12", + "jest": "^27.1.0", + "prettier": "^2.8.7", + "rimraf": "^3.0.2", + "ts-jest": "^27.0.5", + "tsconfig-paths-webpack-plugin": "^3.5.2", + "typescript": "^4.6.2" + }, + "scripts": { + "clean": "rimraf dist", + "tsc": "tsc --noEmit true", + "build": "tsc --noEmit false", + "watch": "tsc --noEmit false -w", + "lint": "eslint src .storybook", + "lint:fix": "eslint src .storybook --fix", + "storybook": "start-storybook -p 6006", + "storybook:build": "build-storybook" + }, + "sideEffects": false +} diff --git a/sdk/typescript/packages/react-components/tsconfig.app.json b/sdk/typescript/packages/react-components/tsconfig.app.json new file mode 100644 index 0000000000..c0f833004b --- /dev/null +++ b/sdk/typescript/packages/react-components/tsconfig.app.json @@ -0,0 +1,39 @@ +{ + "compilerOptions": { + "rootDir": "./lib", + "outDir": "./dist", + "declaration": true, + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + "typeRoots": ["./dist/index.d.ts"], + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + + /* Paths */ + "baseUrl": ".", + "paths": { + "@src/*": ["src/*"], + "@lib/*": ["lib/*"], + "@assets/*": ["../../../../assets/*"] + } + }, + "include": ["lib/**/*"] +} diff --git a/sdk/typescript/packages/react-components/tsconfig.json b/sdk/typescript/packages/react-components/tsconfig.json index 89d869a823..c91e5d175c 100644 --- a/sdk/typescript/packages/react-components/tsconfig.json +++ b/sdk/typescript/packages/react-components/tsconfig.json @@ -1,19 +1,17 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { "jsx": "react-jsx", - "noEmit": true, - "outDir": "./dist", - "declarationDir": "./dist" + "moduleResolution": "node", + "allowSyntheticDefaultImports": true, + "noEmit": true }, - "include": [ - "src/**/*.ts", - "src/**/*.tsx" - ], - "exclude": [ - "node_modules", - "dist", - "src/stories", - "**/*.stories.*" + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.node.json" + } ] } diff --git a/sdk/typescript/packages/react-components/tsconfig.node.json b/sdk/typescript/packages/react-components/tsconfig.node.json new file mode 100644 index 0000000000..3afdd6e384 --- /dev/null +++ b/sdk/typescript/packages/react-components/tsconfig.node.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true, + "noEmit": true + }, + "include": ["vite.config.ts"] +} diff --git a/sdk/typescript/packages/react-components/vite.config.ts b/sdk/typescript/packages/react-components/vite.config.ts new file mode 100644 index 0000000000..8b75684826 --- /dev/null +++ b/sdk/typescript/packages/react-components/vite.config.ts @@ -0,0 +1,35 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tsconfigPaths from 'vite-tsconfig-paths'; +import svgr from 'vite-plugin-svgr'; +import dts from 'vite-plugin-dts'; +import { resolve } from 'path'; + +// https://vitejs.dev/config/ +export default defineConfig({ + server: { + port: 3000, + }, + build: { + lib: { + // Could also be a dictionary or array of multiple entry points + entry: [resolve(__dirname, 'lib/index.ts')], + formats: ['es'], + }, + rollupOptions: { + // make sure to externalize deps that shouldn't be bundled + // into your library + external: ['react', 'react-dom', '@mui/material', '@mui/icons-material'], + }, + emptyOutDir: true, + }, + + plugins: [ + react(), + tsconfigPaths(), + svgr(), + dts({ + rollupTypes: true, + }), + ], +});