chore: add tailwind and stitches (#75)

* styles: add stitches

* style: add tailwaind

* style: remove sizes

* chore: add storybook with sample story

* refactor: remove storybook eslint

* refactor: add tailwind with vite

* fix: fix storybook script

* style: dark mode

* style: add google fonts

* style: add radix colors

* style: add radix library

* refactor: remove light colors, not used for now

* chore: add comment to remove story example

ui/.eslintrc.js

@@ -1,29 +1,31 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-  ],
-  overrides: [],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  plugins: ['react', '@typescript-eslint', 'simple-import-sort'],
-  rules: {
-    '@typescript-eslint/explicit-function-return-type': [
-      'error',
-      { allowExpressions: true },
-    ],
-    '@typescript-eslint/no-namespace': 'off',
-    'simple-import-sort/imports': 2,
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    'no-console': 'error',
-  },
-};
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  overrides: [],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint', 'simple-import-sort'],
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': [
+      'error',
+      {
+        allowExpressions: true,
+      },
+    ],
+    '@typescript-eslint/no-namespace': 'off',
+    'simple-import-sort/imports': 2,
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'no-console': 'error',
+  },
+};

ui/.storybook/main.js

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

ui/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

ui/index.html

@@ -7,6 +7,10 @@
       type="image/svg+xml"
       href="https://lh3.googleusercontent.com/a-/ACNPEu94rLyADmAJ80HamM8yp4ddV3AzoaMz3whdBH0D=s80-p"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
@@ -19,3 +23,4 @@
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
+

ui/package.json

@@ -5,8 +5,11 @@
   "main": "index.js",
   "scripts": {
     "dev": "vite",
+    "dev:css": "tailwindcss -o ./tailwind.css --watch && yarn dev",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "export SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "author": "Fleek",
   "dependencies": {
@@ -15,7 +18,9 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@ethersproject/providers": "^5.7.2",
+    "@radix-ui/colors": "^0.1.8",
     "@reduxjs/toolkit": "^1.9.1",
+    "@stitches/react": "^1.2.8",
     "formik": "^2.2.9",
     "framer-motion": "^7.6.17",
     "path": "^0.12.7",
@@ -25,6 +30,16 @@
     "react-router-dom": "^6.4.4"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@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",
@@ -32,15 +47,20 @@
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^8.3.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jest": "^27.1.6",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "ethers": "^5.7.2",
+    "postcss": "^8.4.21",
     "prettier": "^2.8.0",
     "react-icons": "^4.7.1",
     "react-query": "^3.39.2",
+    "storybook-dark-mode": "^2.0.5",
+    "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.1",
     "typescript": "^4.9.3",
     "vite": "^3.2.4",

ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

ui/src/app.tsx

@@ -1,23 +1,24 @@
-import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
-import { WalletButton } from './components';
-import { initializeWallet } from './store';
-import { Home, MintSite, MintedSiteDetail } from './views';
-
-initializeWallet();
-
-export const App = () => {
-  return (
-    <>
-      <WalletButton />
-      <BrowserRouter>
-        <Routes>
-          <Route path="/mint-site" element={<MintSite />} />
-          <Route path="/home" element={<Home />} />
-          <Route path="/detail" element={<MintedSiteDetail />} />
-          <Route path="*" element={<Navigate to="/home" />} />
-        </Routes>
-      </BrowserRouter>
-    </>
-  );
-};
-
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
+import { WalletButton } from './components';
+import { initializeWallet } from './store';
+import { themeGlobals } from 'theme/stitches/globals';
+import { Home, MintSite, MintedSiteDetail } from './views';
+
+initializeWallet();
+
+export const App = () => {
+  themeGlobals();
+  return (
+    <>
+      <WalletButton />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/mint-site" element={<MintSite />} />
+          <Route path="/home" element={<Home />} />
+          <Route path="/detail" element={<MintedSiteDetail />} />
+          <Route path="*" element={<Navigate to="/home" />} />
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+};

ui/src/index.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from './app';
-import { ChakraProvider } from '@chakra-ui/react';
-import { theme } from './theme';
-import { Provider as ReduxProvider } from 'react-redux';
-import { store } from './store';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { refetchOnWindowFocus: false } },
-});
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-
-root.render(
-  <React.StrictMode>
-    <ReduxProvider store={store}>
-      <ChakraProvider theme={theme} resetCSS>
-        <QueryClientProvider client={queryClient}>
-          <App />
-        </QueryClientProvider>
-      </ChakraProvider>
-    </ReduxProvider>
-  </React.StrictMode>
-);
-
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './app';
+import { ChakraProvider } from '@chakra-ui/react';
+import { theme } from './theme';
+import { Provider as ReduxProvider } from 'react-redux';
+import { store } from './store';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import './styles.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false } },
+});
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <ReduxProvider store={store}>
+      <ChakraProvider theme={theme} resetCSS>
+        <QueryClientProvider client={queryClient}>
+          <App />
+        </QueryClientProvider>
+      </ChakraProvider>
+    </ReduxProvider>
+  </React.StrictMode>
+);

ui/src/stories/Button.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+//TODO: remove example stories
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

ui/src/stories/Button.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' '
+      )}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

ui/src/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

ui/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

ui/src/theme/stitches/foundations/colors.ts

@@ -0,0 +1,32 @@
+import {
+  amber,
+  amberDark,
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  red,
+  redDark,
+  slate,
+  slateDark,
+} from '@radix-ui/colors';
+
+//not in usage yet
+export const colors = {
+  ...gray,
+  ...slate,
+  ...blue,
+  ...red,
+  ...green,
+  ...amber,
+};
+export const darkColors = {
+  ...grayDark,
+  ...slateDark,
+  ...blueDark,
+  ...redDark,
+  ...greenDark,
+  ...amberDark,
+};

ui/src/theme/stitches/foundations/index.ts

@@ -0,0 +1 @@
+export * from './colors';

ui/src/theme/stitches/globals.ts

@@ -0,0 +1,18 @@
+import { globalCss } from '@stitches/react';
+
+export const themeGlobals = globalCss({
+  'html, body': {
+    height: '100%',
+    padding: 0,
+    margin: '25px 50px',
+    color: '#ECEDEE',
+    backgroundColor: 'black',
+
+    fontFamily: 'Manrope',
+
+    fontSize: '16px',
+    '@media (max-width: 850px)': {
+      fontSize: '13px',
+    },
+  },
+});

ui/src/theme/stitches/index.ts

@@ -0,0 +1 @@
+export * from './themes';

ui/src/theme/stitches/themes.ts

@@ -0,0 +1,54 @@
+import { createStitches } from '@stitches/react';
+import { darkColors } from './foundations';
+
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  theme: darkTheme,
+  createTheme,
+  config,
+} = createStitches({
+  theme: {
+    colors: {
+      ...darkColors,
+    },
+    space: {
+      xs: '0.32rem',
+      sm: '0.625rem',
+      md: '1.25rem',
+      lg: '2.375rem',
+      xl: '4.75rem',
+    },
+    fontSizes: {
+      sm: '0.75rem',
+      md: '1rem',
+      lg: '1.75rem',
+      'h-sm': '1rem',
+      'h-md': '1.5rem',
+      'h-lg': '2rem',
+    },
+    radii: {
+      xs: '0.25rem',
+      sm: '0.5rem',
+      md: '0.75rem',
+      lg: '1rem',
+      xl: '1.5rem',
+      full: '9999px',
+    },
+    borderWidths: {
+      default: '1px',
+      focus: '2px',
+    },
+    borderStyles: {
+      default: 'solid',
+    },
+  },
+  media: {
+    sm: '(max-width: 640px)',
+    md: '(max-width: 850px)',
+    lg: '(max-width: 1140px)',
+    large: '(min-width: 1140px)',
+  },
+});

ui/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.tsx'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};