chore: remove storybook (#192)

ui/.storybook/main.js

@@ -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,
-  },
-};

ui/.storybook/preview-head.html

@@ -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>

ui/.storybook/preview.js

@@ -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();
-  },
-];

ui/package.json

@@ -9,9 +9,7 @@
     "build": "yarn graphclient build && vite build",
     "postinstall": "graphclient build",
     "preview": "vite preview",
-    "prod": "yarn build && npx serve dist -s",
+    "prod": "yarn build && npx serve dist -s"
-    "storybook": "export SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
-    "build-storybook": "build-storybook"
   },
   "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",

ui/src/components/core/button/button.stories.tsx

@@ -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>
-);

ui/src/components/core/icon/icon.stories.tsx

@@ -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>
-);

ui/src/components/core/input/input.stories.tsx

@@ -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 />
-    </>
-  );
-};