8e6c066b99
* feat: scaffold fills components * feat: add query for fills and populate data in basic table * feat: refactor portfolio page to use grid and add fills container * feat: add infinite scroll for fills * feat: try with data provider, get infinite scroll working * chore: remove infinite scrolling as subsequent pr will add it * chore: reorder columns * chore: remove Autosizer from portfolio grid children as its not needed * chore: move fills tab to the end * feat: add storybook, format cells * feat: add unit test for fills table * feat: convert lib to next lib * feat: add pagination variables to fills query to only get latest 300 * fix: fills data provider update function to return result of produce * fix: yarn.lock * fix: cypress run by moving test helpers * fix: re add test helpers for unit tests * fix: global connection tests * fix: use fills from mocks * feat: add update handler for fills * chore: move value formatter functions into module scope
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import './styles.css';
|
|
import { ThemeContext } from '@vegaprotocol/react-helpers';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export const parameters = {
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
backgrounds: { disable: true },
|
|
themes: {
|
|
default: 'dark',
|
|
list: [
|
|
{ name: 'dark', class: ['dark', 'bg-black'], color: '#000' },
|
|
{ name: 'light', class: '', color: '#FFF' },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const decorators = [
|
|
(Story, context) => {
|
|
// storybook-addon-themes doesnt seem to provide the current selected
|
|
// theme in context, we need to provid it in JS as some components
|
|
// rely on it for rendering
|
|
const [theme, setTheme] = useState(context.parameters.themes.default);
|
|
|
|
useEffect(() => {
|
|
const observer = new MutationObserver((mutationList) => {
|
|
if (mutationList.length) {
|
|
const body = mutationList[0].target;
|
|
if (body.classList.contains('dark')) {
|
|
setTheme('dark');
|
|
} else {
|
|
setTheme('light');
|
|
}
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, { attributes: true });
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div style={{ width: '100%', height: 500 }}>
|
|
<ThemeContext.Provider value={theme}>
|
|
<Story />
|
|
</ThemeContext.Provider>
|
|
</div>
|
|
);
|
|
},
|
|
];
|