Skip to content

Commit

Permalink
chore(product-components): update the storybook to 8.5.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@vojtatranta
vojtatranta committed Feb 11, 2025
1 parent b2de51f commit b5d31fb
Show file tree
Hide file tree
Showing 6 changed files with 354 additions and 2,549 deletions.
56 changes: 50 additions & 6 deletions packages/product-components/.storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,66 @@ function getAbsolutePath(value) {
}

module.exports = {
stories: ['../src/**/*.stories.*'],
stories: ['../src/**/*.@(mdx|stories.*)'],
logLevel: 'debug',

addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-controls'),
getAbsolutePath('@storybook/addon-viewport'),
getAbsolutePath('@storybook/addon-actions'),
'@chromatic-com/storybook'
],

staticDirs: ['../public', { from: '../../suite-data/files', to: '/static' }],

framework: {
name: getAbsolutePath('@storybook/react-webpack5'),
options: {},
name: getAbsolutePath("@storybook/nextjs"),
options: {}
},
babel: options => {
options.presets.push('@babel/preset-typescript');

return options;
typescript: {
check: false, // Disable type checking
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
skipChildrenPropWithoutDoc: false,
},
},

webpackFinal: config => {
// Add TypeScript support
config.module.rules.push({
test: /\.tsx?$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
['@babel/preset-react', { runtime: 'automatic' }],
'@babel/preset-typescript',
],
},
},
],
});

// NOTE: remove the previous loaders from handling the svgs
const imageRule = config.module.rules.find(rule => rule?.['test']?.test('.svg'));
if (imageRule) {
imageRule['exclude'] = /\.svg$/;
}

// Configure SVG files to match the main project's webpack config
config.module.rules.push({
test: /\.(gif|jpe?g|png|svg)$/,
type: 'asset/resource',
});

return config;
},

docs: {}
};
25 changes: 25 additions & 0 deletions packages/product-components/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';

import { StoryWrapper } from '@trezor/components';

export const decorators = [
(Story, context) => {
const story = () => React.createElement(Story, null);

return context?.parameters?.noWrapper
? story()
: React.createElement(StoryWrapper, null, story());
},
];

export const parameters = {
options: {
showPanel: true,
showInfo: true,
panelPosition: 'right',
},
theme: {
base: 'light',
},
};
export const tags = ['autodocs'];
22 changes: 0 additions & 22 deletions packages/product-components/.storybook/preview.jsx
View file

This file was deleted.

108 changes: 56 additions & 52 deletions packages/product-components/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,58 @@
{
"name": "@trezor/product-components",
"version": "1.0.0",
"private": true,
"main": "src/index",
"author": "SatoshiLabs s.r.o.",
"license": "SEE LICENSE IN LICENSE.md",
"sideEffects": false,
"scripts": {
"lint": "yarn lint:js && yarn lint:styles",
"lint:styles": "npx stylelint './src/**/*{.ts,.tsx}' --cache --config ../../.stylelintrc",
"lint-fix": "npx eslint ./src --fix",
"type-check": "yarn g:tsc --build tsconfig.json",
"type-check:watch": "yarn type-check -- --watch",
"storybook": "storybook dev -p 9004 -c .storybook",
"storybook-build": "storybook build -c .storybook -o .build-storybook"
},
"dependencies": {
"@suite-common/validators": "workspace:*",
"@suite-common/wallet-config": "workspace:*",
"@suite-common/wallet-utils": "workspace:*",
"@trezor/components": "workspace:*",
"@trezor/connect": "workspace:*",
"@trezor/dom-utils": "workspace:*",
"@trezor/env-utils": "workspace:*",
"@trezor/react-utils": "workspace:*",
"@trezor/theme": "workspace:*",
"@trezor/urls": "workspace:*",
"@trezor/utils": "workspace:*",
"framer-motion": "^11.0.3",
"react": "18.2.0",
"react-hook-form": "^7.54.2",
"react-intl": "^6.6.8",
"react-svg": "^16.1.33",
"styled-components": "^6.1.8",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@storybook/addon-actions": "^7.6.13",
"@storybook/addon-controls": "^7.6.13",
"@storybook/addon-links": "^7.6.13",
"@storybook/addon-viewport": "^7.6.13",
"@storybook/addons": "^7.6.13",
"@storybook/client-api": "^7.6.13",
"@storybook/react": "^7.6.13",
"@storybook/react-webpack5": "^7.6.13",
"@storybook/theming": "^7.6.13",
"@trezor/eslint": "workspace:*",
"@types/react": "18.2.79",
"storybook": "^7.6.13",
"stylelint": "^16.2.1",
"typescript-styled-plugin": "^0.18.3"
}
"name": "@trezor/product-components",
"version": "1.0.0",
"private": true,
"main": "src/index",
"author": "SatoshiLabs s.r.o.",
"license": "SEE LICENSE IN LICENSE.md",
"sideEffects": false,
"scripts": {
"lint": "yarn lint:js && yarn lint:styles",
"lint:styles": "npx stylelint './src/**/*{.ts,.tsx}' --cache --config ../../.stylelintrc",
"lint-fix": "npx eslint ./src --fix",
"type-check": "yarn g:tsc --build tsconfig.json",
"type-check:watch": "yarn type-check -- --watch",
"storybook": "storybook dev -p 9004 -c .storybook",
"storybook-build": "storybook build -c .storybook -o .build-storybook"
},
"dependencies": {
"@suite-common/validators": "workspace:*",
"@suite-common/wallet-config": "workspace:*",
"@suite-common/wallet-utils": "workspace:*",
"@trezor/components": "workspace:*",
"@trezor/connect": "workspace:*",
"@trezor/dom-utils": "workspace:*",
"@trezor/env-utils": "workspace:*",
"@trezor/react-utils": "workspace:*",
"@trezor/theme": "workspace:*",
"@trezor/urls": "workspace:*",
"@trezor/utils": "workspace:*",
"framer-motion": "^11.0.3",
"react": "18.2.0",
"react-hook-form": "^7.54.2",
"react-intl": "^6.6.8",
"react-svg": "^16.1.33",
"styled-components": "^6.1.8",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@chromatic-com/storybook": "^3",
"@storybook/addon-actions": "^8.5.4",
"@storybook/addon-controls": "^8.5.4",
"@storybook/addon-links": "^8.5.4",
"@storybook/addon-viewport": "^8.5.4",
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
"@storybook/addons": "^7.6.17",
"@storybook/client-api": "^7.6.17",
"@storybook/nextjs": "^8.5.4",
"@storybook/react": "^8.5.4",
"@storybook/test": "^8.5.4",
"@storybook/theming": "^8.5.4",
"@trezor/eslint": "workspace:*",
"@types/react": "18.2.79",
"file-loader": "^6.2.0",
"storybook": "^8.5.4",
"stylelint": "^16.2.1",
"typescript-styled-plugin": "^0.18.3"
}
}
94 changes: 63 additions & 31 deletions packages/product-components/src/components/CoinLogo/coins.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,70 @@ export type LegacyNetworkSymbol =
| 'vtc'
| 'btg';

// Import SVGs
import ada from '../../images/coins/ada.svg';
import arb from '../../images/coins/arb.svg';
import base from '../../images/coins/base.svg';
import bch from '../../images/coins/bch.svg';
import bsc from '../../images/coins/bsc.svg';
import btc from '../../images/coins/btc.svg';
import btc_test from '../../images/coins/btc_test.svg';
import btg from '../../images/coins/btg.svg';
import dash from '../../images/coins/dash.svg';
import dgb from '../../images/coins/dgb.svg';
import doge from '../../images/coins/doge.svg';
import dsol from '../../images/coins/dsol.svg';
import eos from '../../images/coins/eos.svg';
import etc from '../../images/coins/etc.svg';
import eth from '../../images/coins/eth.svg';
import ltc from '../../images/coins/ltc.svg';
import nem from '../../images/coins/nem.svg';
import nmc from '../../images/coins/nmc.svg';
import op from '../../images/coins/op.svg';
import pol from '../../images/coins/pol.svg';
import sol from '../../images/coins/sol.svg';
import tada from '../../images/coins/tada.svg';
import thol from '../../images/coins/thol.svg';
import tsep from '../../images/coins/tsep.svg';
import txrp from '../../images/coins/txrp.svg';
import vtc from '../../images/coins/vtc.svg';
import xlm from '../../images/coins/xlm.svg';
import xrp from '../../images/coins/xrp.svg';
import xtz from '../../images/coins/xtz.svg';
import zec from '../../images/coins/zec.svg';

export const COINS: Record<NetworkSymbol | LegacyNetworkSymbol, string> = {
ada: require('../../images/coins/ada.svg'),
arb: require('../../images/coins/arb.svg'),
base: require('../../images/coins/base.svg'),
bch: require('../../images/coins/bch.svg'),
bsc: require('../../images/coins/bsc.svg'),
btc: require('../../images/coins/btc.svg'),
btg: require('../../images/coins/btg.svg'),
dash: require('../../images/coins/dash.svg'),
dgb: require('../../images/coins/dgb.svg'),
doge: require('../../images/coins/doge.svg'),
dsol: require('../../images/coins/dsol.svg'),
eos: require('../../images/coins/eos.svg'),
etc: require('../../images/coins/etc.svg'),
eth: require('../../images/coins/eth.svg'),
ltc: require('../../images/coins/ltc.svg'),
op: require('../../images/coins/op.svg'),
pol: require('../../images/coins/pol.svg'),
nem: require('../../images/coins/nem.svg'),
nmc: require('../../images/coins/nmc.svg'),
regtest: require('../../images/coins/btc_test.svg'),
sol: require('../../images/coins/sol.svg'),
tada: require('../../images/coins/tada.svg'),
test: require('../../images/coins/btc_test.svg'),
thol: require('../../images/coins/thol.svg'),
tsep: require('../../images/coins/tsep.svg'),
txrp: require('../../images/coins/txrp.svg'),
vtc: require('../../images/coins/vtc.svg'),
xlm: require('../../images/coins/xlm.svg'),
xrp: require('../../images/coins/xrp.svg'),
xtz: require('../../images/coins/xtz.svg'),
zec: require('../../images/coins/zec.svg'),
ada,
arb,
base,
bch,
bsc,
btc,
btg,
dash,
dgb,
doge,
dsol,
eos,
etc,
eth,
ltc,
op,
pol,
nem,
nmc,
regtest: btc_test,
sol,
tada,
test: btc_test,
thol,
tsep,
txrp,
vtc,
xlm,
xrp,
xtz,
zec,
};

export const isCoinSymbol = (
Expand Down
Loading

0 comments on commit b5d31fb

Please sign in to comment.