chore: remove storybook (#192)
This commit is contained in:
Camila Sosa Morales
GitHub
parent
d037565bfb
commit
33d1d53118
|
|
@ -1,16 +0,0 @@
|
|||
module.exports = {
|
||||
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
'storybook-dark-mode',
|
||||
],
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: '@storybook/builder-vite',
|
||||
},
|
||||
features: {
|
||||
storyStoreV7: true,
|
||||
},
|
||||
};
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script>
|
||||
window.global = window;
|
||||
</script>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import { dripStitches } from '../src/theme';
|
||||
import addons from '@storybook/addons';
|
||||
import { useEffect } from 'react';
|
||||
import { themes } from '@storybook/theming';
|
||||
|
||||
const channel = addons.getChannel();
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
darkMode: {
|
||||
dark: { ...themes.dark, backgroundColor: 'black' },
|
||||
// light: { ...themes.normal, backgroundColor: 'white' },
|
||||
},
|
||||
};
|
||||
|
||||
const { darkTheme: darkThemeClassName } = dripStitches;
|
||||
|
||||
export const decorators = [
|
||||
(renderStory) => {
|
||||
const { globalCss } = dripStitches;
|
||||
|
||||
const globalStyles = globalCss({
|
||||
'*, html': {
|
||||
'font-family': 'Manrope',
|
||||
},
|
||||
body: {
|
||||
backgroundColor: 'black',
|
||||
},
|
||||
});
|
||||
|
||||
globalStyles();
|
||||
|
||||
useEffect(() => {
|
||||
function switchColorMode(isDarkMode) {
|
||||
document.body.style.backgroundColor = isDarkMode ? 'black' : 'white';
|
||||
document.body.classList.remove('light', darkThemeClassName);
|
||||
document.body.classList.add(isDarkMode ? darkThemeClassName : 'light');
|
||||
}
|
||||
|
||||
channel.on('DARK_MODE', switchColorMode);
|
||||
return () => channel.off('DARK_MODE', switchColorMode);
|
||||
}, []);
|
||||
|
||||
return renderStory();
|
||||
},
|
||||
];
|
||||
|
|
@ -9,9 +9,7 @@
|
|||
"build": "yarn graphclient build && vite build",
|
||||
"postinstall": "graphclient build",
|
||||
"preview": "vite preview",
|
||||
"prod": "yarn build && npx serve dist -s",
|
||||
"storybook": "export SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
"prod": "yarn build && npx serve dist -s"
|
||||
},
|
||||
"author": "Fleek",
|
||||
"dependencies": {
|
||||
|
|
@ -43,15 +41,6 @@
|
|||
"devDependencies": {
|
||||
"@babel/core": "^7.20.12",
|
||||
"@graphprotocol/client-cli": "^2.2.19",
|
||||
"@storybook/addon-actions": "^6.5.15",
|
||||
"@storybook/addon-essentials": "^6.5.15",
|
||||
"@storybook/addon-interactions": "^6.5.15",
|
||||
"@storybook/addon-links": "^6.5.15",
|
||||
"@storybook/addons": "^6.5.15",
|
||||
"@storybook/builder-vite": "^0.2.7",
|
||||
"@storybook/react": "^6.5.15",
|
||||
"@storybook/testing-library": "^0.0.13",
|
||||
"@storybook/theming": "^6.5.15",
|
||||
"@types/jest": "^29.2.3",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
|
|
@ -71,7 +60,6 @@
|
|||
"prettier": "^2.8.0",
|
||||
"process": "^0.11.10",
|
||||
"react-query": "^3.39.2",
|
||||
"storybook-dark-mode": "^2.0.5",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"ts-loader": "^9.4.1",
|
||||
"typescript": "^4.9.3",
|
||||
|
|
|
|||
|
|
@ -1,94 +0,0 @@
|
|||
import { Flex } from '../../layout';
|
||||
import { Button } from './button';
|
||||
import { IconButton } from './icon-button';
|
||||
import { Icon as IconComponent } from '../icon';
|
||||
import { dripStitches } from '../../../theme';
|
||||
|
||||
export default {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
};
|
||||
|
||||
const { styled } = dripStitches;
|
||||
|
||||
const StoryFlex = styled(Flex, {
|
||||
display: 'flex',
|
||||
gap: '$2',
|
||||
flexWrap: 'wrap',
|
||||
});
|
||||
|
||||
export const Default = () => (
|
||||
<StoryFlex>
|
||||
<Button colorScheme="blue">Primary</Button>
|
||||
<Button>Default</Button>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
variant="outline"
|
||||
css={{ py: '$1', height: '$5', borderRadius: '$md' }}
|
||||
>
|
||||
Use for NFA
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme="gray"
|
||||
variant="outline"
|
||||
css={{ py: '$1', height: '$5', borderRadius: '$md' }}
|
||||
>
|
||||
NFA Repo
|
||||
</Button>
|
||||
</StoryFlex>
|
||||
);
|
||||
export const Icon = () => (
|
||||
<>
|
||||
<IconButton
|
||||
aria-label="Add"
|
||||
colorScheme="gray"
|
||||
variant="link"
|
||||
icon={<IconComponent name="info" />}
|
||||
/>
|
||||
<IconButton
|
||||
aria-label="Add"
|
||||
colorScheme="gray"
|
||||
variant="link"
|
||||
icon={<IconComponent name="back" />}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export const ConnectorButtons = () => (
|
||||
<StoryFlex>
|
||||
<Button
|
||||
size="lg"
|
||||
iconSpacing="40"
|
||||
variant="ghost"
|
||||
rightIcon={<IconComponent name="github" css={{ color: 'white' }} />}
|
||||
>
|
||||
GitHub
|
||||
</Button>
|
||||
<Button
|
||||
disabled
|
||||
size="lg"
|
||||
iconSpacing="40"
|
||||
variant="ghost"
|
||||
rightIcon={<IconComponent name="github" css={{ color: 'white' }} />}
|
||||
>
|
||||
GitHub
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
iconSpacing="40"
|
||||
variant="ghost"
|
||||
rightIcon={<IconComponent name="ethereum" />}
|
||||
>
|
||||
Connect Ethereum Wallet
|
||||
</Button>
|
||||
<Button
|
||||
disabled
|
||||
size="lg"
|
||||
iconSpacing="40"
|
||||
variant="ghost"
|
||||
rightIcon={<IconComponent name="ethereum" />}
|
||||
>
|
||||
Connect Ethereum Wallet
|
||||
</Button>
|
||||
</StoryFlex>
|
||||
);
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { Icon } from './icon';
|
||||
import { styled } from '@stitches/react';
|
||||
import { Flex } from '../../layout';
|
||||
|
||||
export default {
|
||||
title: 'Components/Icons',
|
||||
component: Icon,
|
||||
};
|
||||
|
||||
const StoryFlex = styled(Flex, {
|
||||
display: 'flex',
|
||||
gap: '$2',
|
||||
flexWrap: 'wrap',
|
||||
color: 'white',
|
||||
});
|
||||
|
||||
export const ConnectorIcons = () => (
|
||||
<StoryFlex>
|
||||
<Icon name="metamask" />
|
||||
<Icon name="github" />
|
||||
<Icon name="ethereum" />
|
||||
</StoryFlex>
|
||||
);
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { Input } from './';
|
||||
|
||||
export default {
|
||||
title: 'Components/Input',
|
||||
component: Input,
|
||||
};
|
||||
|
||||
export const Variants = () => {
|
||||
return (
|
||||
<>
|
||||
<Input size="sm" placeholder="Small" />
|
||||
<Input size="md" placeholder="Medium" required />
|
||||
<Input size="md" placeholder="Medium Invaild" aria-invalid />
|
||||
<Input size="lg" placeholder="Large" />
|
||||
<Input size="sm" placeholder="Small" disabled />
|
||||
<Input size="md" placeholder="Medium" disabled />
|
||||
<Input size="lg" placeholder="Large" disabled />
|
||||
</>
|
||||
);
|
||||
};
|
||||
7524
ui/yarn.lock
7524
ui/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue