GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix storybook for react components lib

Browse Source
This commit is contained in:
fmtabbara
2024-07-09 11:40:55 +01:00
parent 6c8d5c129d
commit 10ade80da0
40 changed files with 1559 additions and 974 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pnpm-lock.yaml
Generated
+1471 -510
View File
File diff suppressed because it is too large Load Diff
sdk/typescript/packages/react-components/.storybook/main.js
+18 -36
View File
@@ -1,40 +1,22 @@
/* eslint-disable no-param-reassign */
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
module.exports = {
export const framework = {
name: '@storybook/react-vite',
options: {},
};
export const docs = {
autodocs: true,
};
export const typescript = {
reactDocgen: 'react-docgen-typescript',
};
const config = {
framework: '@storybook/react-vite',
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
framework: '@storybook/react',
core: {
builder: 'webpack5',
},
// webpackFinal: async (config, { configType }) => {
// // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// // You can change the configuration based on that.
// // 'PRODUCTION' is used when building the static version of storybook.
webpackFinal: async (config) => {
config.module.rules.forEach((rule) => {
// look for SVG import rule and replace
// NOTE: the rule before modification is /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
if (rule.test?.toString().includes('svg')) {
rule.test = /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
}
});
// handle asset loading with this
config.module.rules.unshift({
test: /\.svg(\?.*)?$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
});
config.resolve.extensions = ['.tsx', '.ts', '.js'];
config.resolve.plugins = [new TsconfigPathsPlugin()];
// Return the altered config
return config;
},
features: {
emotionAlias: false,
},
};
export default config;
sdk/typescript/packages/react-components/.storybook/preview.js → sdk/typescript/packages/react-components/.storybook/preview.jsx
View File
sdk/typescript/packages/react-components/package.json
+6 -2
View File
@@ -13,7 +13,9 @@
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build"
},
"dependencies": {
"@cosmjs/math": "^0.27.1",
@@ -36,7 +38,8 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
"@storybook/react": "^6.5.15",
"@storybook/react": "^8.1.11",
"@storybook/react-vite": "^8.1.11",
"@types/flat": "^5.0.5",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
@@ -47,6 +50,7 @@
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"storybook": "^8.1.11",
"typescript": "^5.2.2",
"vite": "^5.3.1",
"vite-plugin-dts": "^3.9.1",
sdk/typescript/packages/react-components/src/index.ts
-1
View File
@@ -1 +0,0 @@
// no-op
sdk/typescript/packages/react-components/src/playground/buttons.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { Button, Stack } from '@mui/material';
export const PlaygroundButtons: FCWithChildren = () => (
export const PlaygroundButtons = () => (
<Stack spacing={2} direction="row">
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
sdk/typescript/packages/react-components/src/playground/theme/MUIThemeExplorer.tsx
+9 -2
View File
@@ -4,13 +4,20 @@ import type { Theme } from '@mui/material/styles';
import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
import { Box } from '@mui/material';
const MUIThemeExplorerItem: FCWithChildren<{
const MUIThemeExplorerItem = ({
theme,
item,
parentKey,
path,
isArrayItem,
}: {
path: string;
parentKey: string;
theme: Theme;
item: any;
isArrayItem?: boolean;
}> = ({ theme, item, parentKey, path, isArrayItem }) => {
children: React.ReactNode;
}) => {
if (!item) {
return null;
}
sdk/typescript/packages/react-components/src/playground/theme/PaletteSwatches.tsx
+9 -3
View File
@@ -1,16 +1,22 @@
import React from 'react';
import { Theme } from '@mui/material/styles';
import * as React from 'react';
import { Box, Grid, Typography } from '@mui/material';
import flatten from 'flat';
const SWATCH_SIZE = '40px';
const PaletteSwatch: FCWithChildren<{
const PaletteSwatch = ({
theme,
path,
value,
width,
}: {
theme: Theme;
path: string;
value: string;
width?: string;
}> = ({ theme, path, value, width }) => (
chidlren: React.ReactNode;
}) => (
<>
<Box
sx={{
sdk/typescript/packages/react-components/src/stories/Introduction.stories.mdx
-10
View File
@@ -1,10 +0,0 @@
import { Meta } from '@storybook/addon-docs';
import { NymLogo } from '../components/logo/NymLogo';
<Meta title="Introduction" />
<NymLogo height={100} />
# Nym Design System
This is the Nym design system.
sdk/typescript/packages/react-components/src/stories/Playground.stories.js
-21
View File
@@ -1,21 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/Playground.stories.tsx
+1
View File
@@ -1,3 +1,4 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { useTheme } from '@mui/material';
import { Playground } from '../playground/Playground';
sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.js
-28
View File
@@ -1,28 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/account/WalletAddressFormField.stories.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Box } from '@mui/material';
import { WalletAddressFormField } from '@lib/components/account';
import { WalletAddressFormField } from '../../../lib/components/account/WalletAddressFormField';
export default {
title: 'Accounts/Wallet Address',
sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.js
-56
View File
@@ -1,56 +0,0 @@
"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,
};
sdk/typescript/packages/react-components/src/stories/client-address/ClientAddress.stories.tsx
+6 -5
View File
@@ -1,15 +1,16 @@
import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Box } from '@mui/material';
import { ClientAddressDisplay } from '@lib/components/client-address';
import { ClientAddress } from '../../../lib/components/client-address/ClientAddress';
export default {
title: 'Wallet / Client Address',
component: ClientAddressDisplay,
} as ComponentMeta<typeof ClientAddressDisplay>;
component: ClientAddress,
} as ComponentMeta<typeof ClientAddress>;
const Template: ComponentStory<typeof ClientAddressDisplay> = (args) => (
const Template: ComponentStory<typeof ClientAddress> = (args) => (
<Box display="flex" alignContent="center">
<ClientAddressDisplay {...args} />
<ClientAddress {...args} />
</Box>
);
sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.js
-36
View File
@@ -1,36 +0,0 @@
"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,
};
sdk/typescript/packages/react-components/src/stories/clipboard/CopyToClipboard.stories.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Box, Typography } from '@mui/material';
import { CopyToClipboard } from '@lib/components/clipboard';
import { CopyToClipboard } from '../../../lib/components/clipboard/CopyToClipboard';
export default {
title: 'Decorators / Copy to clipboard',
sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.js
-19
View File
@@ -1,19 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/coins/CoinMark.stories.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Stack, Typography } from '@mui/material';
import { CoinMark } from '@lib/components/coins';
import { CoinMark } from '../../../lib/components/coins/CoinMark';
export default {
title: 'Branding/Coin Mark',
sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.js
-19
View File
@@ -1,19 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/coins/CoinMarkTestnet.stories.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Stack, Typography } from '@mui/material';
import { CoinMarkTestnet } from '@lib/components/coins';
import { CoinMarkTestnet } from '../../../lib/components/coins/CoinMarkTestnet';
export default {
title: 'Branding/Coin Mark (testnet)',
sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.js
-19
View File
@@ -1,19 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/currency/Currency.stories.tsx
+3 -1
View File
@@ -1,6 +1,8 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Stack } from '@mui/material';
import { Currency } from '@lib/components/currency';
import { Currency } from '../../../lib/components/currency/Currency';
import { amounts } from './CurrencyAmount.stories';
export default {
sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.js
-45
View File
@@ -1,45 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/currency/CurrencyAmount.stories.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Stack } from '@mui/material';
import { CurrencyAmount } from '@lib/components/currency';
import { CurrencyAmount } from '../../../lib/components/currency/CurrencyAmount';
export default {
title: 'Currency/Currency amount',
sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.js
-34
View File
@@ -1,34 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/currency/CurrencyFormField.stories.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Stack } from '@mui/material';
import { CurrencyFormField } from '@lib/components/currency';
import { CurrencyFormField } from '../../../lib/components/currency/CurrencyFormField';
export default {
title: 'Currency/Currency form field',
sdk/typescript/packages/react-components/src/stories/link/Link.stories.js
-19
View File
@@ -1,19 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/link/Link.stories.tsx
+2 -1
View File
@@ -1,7 +1,8 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Typography } from '@mui/material';
import { Link as LinkIcon } from '@mui/icons-material';
import { Link } from '@lib/components/link';
import { Link } from '../../../lib/components/link/Link';
export default {
title: 'Basics/Link',
sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.js
-15
View File
@@ -1,15 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/logo/Logo.stories.tsx
+4 -1
View File
@@ -1,5 +1,8 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { NymLogo, NymWordmark, NymIcon } from '@lib/components/logo';
import { NymLogo } from '../../../lib/components/logo/NymLogo';
import { NymIcon } from '../../../lib/components/logo/NymIcon';
import { NymWordmark } from '../../../lib/components/logo/NymWordmark';
export default {
title: 'Branding/Nym Logo',
sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.js
-28
View File
@@ -1,28 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/mixnodes/IdentityKeyFormField.stories.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Box } from '@mui/material';
import { IdentityKeyFormField } from '@lib/components';
import { IdentityKeyFormField } from '../../../lib/components/mixnodes/IdentityKeyFormField';
export default {
title: 'Mixnodes/Identity Key',
sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.js
-31
View File
@@ -1,31 +0,0 @@
"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' };
sdk/typescript/packages/react-components/src/stories/networks/NetworkSelector.stories.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { NetworkSelector, type Network } from '@lib/components/networks';
import { NetworkSelector, type Network } from '../../../lib/components/networks/NetworkSelector';
export default {
title: 'Networks/Network Selector',
sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.js
-13
View File
@@ -1,13 +0,0 @@
"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;
sdk/typescript/packages/react-components/src/stories/tooltip/Tooltip.stories.tsx
+1
View File
@@ -1,3 +1,4 @@
import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Tooltip } from '@lib/components/tooltip';
sdk/typescript/packages/react-components/tsconfig.app.json
+4 -6
View File
@@ -1,7 +1,5 @@
{
"compilerOptions": {
"rootDir": "./lib",
"outDir": "./dist",
"declaration": true,
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
@@ -19,7 +17,7 @@
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"typeRoots": ["./dist/index.d.ts"],
"typeRoots": [],
/* Linting */
"strict": true,
@@ -28,10 +26,10 @@
"noFallthroughCasesInSwitch": true,
/* Paths */
"baseUrl": ".",
"baseUrl": "./",
"paths": {
"@src/*": ["src/*"],
"@lib/*": ["lib/*"],
"@src/*": ["./src/*"],
"@lib/*": ["./lib/*"],
"@assets/*": ["../../../../assets/*"]
}
},
sdk/typescript/packages/react-components/tsconfig.json
+7 -1
View File
@@ -4,7 +4,13 @@
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"noEmit": true,
"noImplicitAny": false
"noImplicitAny": false,
"baseUrl": ".",
"paths": {
"@src/*": ["./src/*"],
"@lib/*": ["./lib/*"],
"@assets/*": ["../../../../assets/*"]
}
},
"files": [],
"references": [
sdk/typescript/packages/react-components/vite.config.ts
+1 -3
View File
@@ -5,7 +5,6 @@ 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,
@@ -23,10 +22,9 @@ export default defineConfig({
},
emptyOutDir: true,
},
plugins: [
react(),
tsconfigPaths(),
react(),
svgr(),
dts({
rollupTypes: true,