pre brendan commit

.prettierrc

@@ -1,11 +1,19 @@
 {
-    "useTabs": false,
-    "printWidth": 100,
-    "tabWidth": 2,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "jsxBracketSameLine": false,
-    "semi": true,
-    "quoteProps": "consistent"
-  }
-  
+  "useTabs": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": false,
+  "semi": true,
+  "quoteProps": "consistent",
+  "importOrder": [
+    "^@sd/core/(.*)$",
+    "^@sd/interface/(.*)$",
+    "^@sd/client/(.*)$",
+    "^@sd/ui/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

.vscode/settings.json

@@ -10,7 +10,9 @@
     "quicktime",
     "repr",
     "svgr",
-    "tailwindcss"
+    "tailwindcss",
+    "trivago",
+    "tsparticles"
   ],
   "rust-analyzer.procMacro.enable": true,
   "rust-analyzer.diagnostics.enableExperimental": false

apps/desktop/tsconfig.json

@@ -18,7 +18,8 @@
     "baseUrl": "./",
     "paths": {
       "@sd/interface": ["../../packages/interface/src/index.ts"],
-      "@sd/ui": ["../../packages/ui/src"]
+      "@sd/ui": ["../../packages/ui/src/index.ts"],
+      "@sd/client": ["../../packages/client/src/index.ts"],
     }
   },
   "include": ["src"],

apps/desktop/vite.config.ts

@@ -28,7 +28,9 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@sd/interface': resolvePackage('@sd/interface')
+      '@sd/interface': resolvePackage('@sd/interface'),
+      '@sd/ui': resolvePackage('@sd/ui'),
+      '@sd/client': resolvePackage('@sd/client')
     }
   },
   build: {

apps/landing/components/Bubbles.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import Particles from 'react-tsparticles';
+import { loadFull } from 'tsparticles';
+
+export const Bubbles = () => {
+  const particlesInit = async (main) => {
+    console.log(main);
+    await loadFull(main);
+  };
+
+  const particlesLoaded = (container) => {
+    console.log(container);
+  };
+
+  return (
+    //@ts-ignore
+    <Particles
+      id="tsparticles"
+      init={particlesInit}
+      //@ts-ignore
+      loaded={particlesLoaded}
+      options={{
+        fpsLimit: 120,
+        interactivity: {
+          events: {
+            onClick: {
+              enable: true,
+              mode: 'push'
+            },
+            resize: true
+          }
+        },
+        particles: {
+          color: {
+            value: '#ffffff'
+          },
+          collisions: {
+            enable: true
+          },
+          move: {
+            direction: 'none',
+            enable: true,
+            outModes: {
+              default: 'bounce'
+            },
+            random: false,
+            speed: 0.2,
+            straight: false
+          },
+          number: {
+            density: {
+              enable: true,
+              area: 800
+            },
+            value: 80
+          },
+          opacity: {
+            value: 0.2
+          },
+          shape: {
+            type: 'circle'
+          },
+          size: {
+            value: { min: 0.5, max: 3 }
+          }
+        },
+        detectRetina: true
+      }}
+    />
+  );
+};

apps/landing/components/Layout.tsx

@@ -21,7 +21,7 @@ const Layout = ({ children, title = 'Spacedrive' }: Props) => (
         </Link>{' '}
       </nav> */}
     </header>
-    <div className="flex flex-col items-center h-screen p-1 bg-[#0B0B10] text-white">
+    <div className="flex flex-col items-center h-screen p-1 bg-[#000000] text-white">
       {children as any}
     </div>
     {/* <footer className="bg-gray-100 ">

apps/landing/components/global.scss

@@ -1,8 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-
-html {
-    // background-color: black;
-}
+@tailwind utilities;

apps/landing/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    externalDir: true
+  }
+};

apps/landing/package.json

@@ -9,18 +9,21 @@
   },
   "dependencies": {
     "@sd/interface": "*",
+    "@sd/ui": "*",
     "autoprefixer": "^10.4.4",
     "next": "latest",
     "postcss": "^8.4.12",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-tsparticles": "^2.0.6",
     "sass": "^1.50.0",
-    "tailwindcss": "^3.0.23"
+    "tailwindcss": "^3.0.23",
+    "tsparticles": "^2.0.6"
   },
   "devDependencies": {
     "@types/node": "^12.12.21",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
-    "typescript": "4.0"
+    "typescript": "^4.6.3"
   }
 }

apps/landing/pages/index.tsx

@@ -1,17 +1,26 @@
-import Link from 'next/link';
+// import Link from 'next/link';
 import Layout from '../components/Layout';
-
-// import Spacedrive interface
+import { Bubbles } from '../components/Bubbles';
+import { Button } from '@sd/ui';
 
 const IndexPage = () => (
   <Layout title="Spacedrive: The file explorer from the future.">
-    <h1 className="my-16 text-6xl font-black">The file explorer from the future</h1>
+    <img src="app-logo.svg" className="w-40 mt-20" />
+    <h1 className="mt-10 text-6xl font-black">The file explorer from the future</h1>
+    <p className="mt-1 mb-10 text-lg text-gray-450">
+      Spacedrive is the first file manager that puts the full power of the cloud in your hands.
+    </p>
+    <Button variant="primary" className="mb-10">
+      Download
+    </Button>
+
     <iframe
-      className="border border-gray-800 rounded-lg shadow-2xl"
+      className="z-50 border rounded-lg shadow-2xl border-gray-550"
       width={1200}
       height={600}
       src="http://localhost:8002?library_id=9068c6ec-cf90-451b-bb30-4174781e7bc6"
     />
+    <Bubbles />
   </Layout>
 );
 

apps/landing/tailwind.config.js

@@ -1,6 +1,103 @@
 module.exports = {
   content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'media',
+  mode: 'jit',
   theme: {
+    fontSize: {
+      'tiny': '.65rem',
+      'xs': '.75rem',
+      'sm': '.84rem',
+      'base': '1rem',
+      'lg': '1.125rem',
+      'xl': '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+      '7xl': '5rem'
+    },
+    extend: {
+      boxShadow: {
+        box: '0px 4px 9px rgba(0, 0, 0, 0.05)',
+        backdrop: '0px 4px 66px rgba(0, 0, 0, 0.08)'
+      },
+      bg: {
+        funky: 'linear-gradient(90.63deg,#46bcff 12.1%,#85edfb 50.85%,#e04cf8 91.09%)'
+      },
+      colors: {
+        primary: {
+          DEFAULT: '#2599FF',
+          50: '#FFFFFF',
+          100: '#F1F8FF',
+          200: '#BEE1FF',
+          300: '#8BC9FF',
+          400: '#58B1FF',
+          500: '#2599FF',
+          600: '#0081F1',
+          700: '#0065BE',
+          800: '#004A8B',
+          900: '#002F58'
+        },
+        gray: {
+          DEFAULT: '#505468',
+          50: '#F1F1F4',
+          100: '#E8E9ED',
+          150: '#E0E1E6',
+          200: '#D8DAE3',
+          250: '#D2D4DC',
+          300: '#C0C2CE',
+          350: '#A6AABF',
+          400: '#9196A8',
+          450: '#71758A',
+          500: '#303544',
+          550: '#20222d',
+          600: '#171720',
+          650: '#121219',
+          700: '#121317',
+          750: '#0D0E11',
+          800: '#0C0C0F',
+          850: '#08090D',
+          900: '#060609',
+          950: '#030303'
+        }
+      },
+      // fontFamily: { sans: ['Inter', ...defaultTheme.fontFamily.sans] }
+      extend: {
+        transitionTimingFunction: {
+          'css': 'ease',
+          'css-in': 'ease-in',
+          'css-out': 'ease-out',
+          'css-in-out': 'ease-in-out',
+          'in-sine': 'cubic-bezier(0.12, 0, 0.39, 0)',
+          'out-sine': 'cubic-bezier(0.61, 1, 0.88, 1)',
+          'in-out-sine': 'cubic-bezier(0.37, 0, 0.63, 1)',
+          'in-quad': 'cubic-bezier(0.11, 0, 0.5, 0)',
+          'out-quad': 'cubic-bezier(0.5, 1, 0.89, 1)',
+          'in-out-quad': 'cubic-bezier(0.45, 0, 0.55, 1)',
+          'in-cubic': 'cubic-bezier(0.32, 0, 0.67, 0)',
+          'out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)',
+          'in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)',
+          'in-quart': 'cubic-bezier(0.5, 0, 0.75, 0)',
+          'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)',
+          'in-out-quart': 'cubic-bezier(0.76, 0, 0.24, 1)',
+          'in-quint': 'cubic-bezier(0.64, 0, 0.78, 0)',
+          'out-quint': 'cubic-bezier(0.22, 1, 0.36, 1)',
+          'in-out-quint': 'cubic-bezier(0.83, 0, 0.17, 1)',
+          'in-expo': 'cubic-bezier(0.7, 0, 0.84, 0)',
+          'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
+          'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)',
+          'in-circ': 'cubic-bezier(0.55, 0, 1, 0.45)',
+          'out-circ': 'cubic-bezier(0, 0.55, 0.45, 1)',
+          'in-out-circ': 'cubic-bezier(0.85, 0, 0.15, 1)',
+          'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)',
+          'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+          'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)'
+        }
+      }
+    }
+  },
+  variants: {
     extend: {}
   },
   plugins: []

apps/landing/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/web/src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import SpacedriveInterface from '@sd/interface';
-import '@sd/ui/style';
+// import '@sd/ui/style';
 
 import { ClientCommand, ClientQuery } from '@sd/core';
 import { BaseTransport } from '@sd/client';

apps/web/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   -webkit-font-smoothing: antialiased;

apps/web/tsconfig.json

@@ -17,7 +17,8 @@
     "baseUrl": "./",
     "paths": {
       "@sd/interface": ["../../packages/interface/src/index.ts"],
-      "@sd/ui": ["../../packages/ui/src"]
+      "@sd/ui": ["../../packages/ui/src/index.ts"],
+      "@sd/client": ["../../packages/client/src/index.ts"],
     }
   },
   "include": ["src"],

apps/web/vite.config.ts

@@ -28,7 +28,9 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@sd/interface': resolvePackage('@sd/interface')
+      '@sd/interface': resolvePackage('@sd/interface'),
+      '@sd/ui': resolvePackage('@sd/ui'),
+      '@sd/client': resolvePackage('@sd/client')
     }
   },
   build: {

package.json

@@ -6,6 +6,7 @@
     "prep": "pnpm db:gen && pnpm core codegen && pnpm build-packages",
     "build-packages": "pnpm client build && pnpm ui build && pnpm interface build",
     "build": "turbo run build",
+    "landing-web": "turbo run dev --parallel --filter=@sd/landing --filter=@sd/web",
     "db:migrate": "pnpm core prisma migrate dev",
     "db:gen": "pnpm core prisma generate",
     "lint": "turbo run lint",

packages/client/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sd/client",
   "version": "0.0.0",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "source": "./src/index.ts",
   "private": true,
   "files": [
     "dist/**"
   ],
+  "exports": {
+    ".": "./src",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "test": "jest",
     "dev": "tsc -w",

packages/client/tsconfig.json

@@ -3,7 +3,7 @@
     "lib": ["esnext"],
     "module": "esnext",
     "outDir": "./dist",
-    "rootDir": "./lib",
+    "rootDir": "src",
     "jsx": "react"
   },
   "extends": "../config/tsconfig/base.json",

packages/interface/.prettierrc

@@ -0,0 +1,20 @@
+{
+  "useTabs": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": false,
+  "semi": true,
+  "quoteProps": "consistent",
+  "importOrder": [
+    "^@sd/core/(.*)$",
+    "^@sd/interface/(.*)$",
+    "^@sd/client/(.*)$",
+    "^@sd/ui/(.*)$",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

packages/interface/package.json

@@ -3,11 +3,6 @@
   "version": "1.0.0",
   "license": "MIT",
   "private": true,
-  "scripts": {
-    "dev": "vite",
-    "dev:build": "vite build --watch",
-    "build": "vite build"
-  },
   "resolutions": {
     "react-virtualized": "patch:react-virtualized@9.22.3#./path/to/react-virtualized-9.22.3.patch"
   },
@@ -50,6 +45,8 @@
     "zustand": "^3.7.2"
   },
   "devDependencies": {
+    "@honkhonk/vite-plugin-svgr": "^1.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/babel-core": "^6.25.7",
     "@types/byte-size": "^8.1.0",
     "@types/pretty-bytes": "^5.2.0",
@@ -65,7 +62,6 @@
     "concurrently": "^7.1.0",
     "prettier": "^2.6.2",
     "typescript": "^4.6.3",
-    "vite": "^2.9.1",
-    "@honkhonk/vite-plugin-svgr": "^1.1.0"
+    "vite": "^2.9.1"
   }
 }

packages/interface/src/App.tsx

@@ -12,7 +12,6 @@ import { Sidebar } from './components/file/Sidebar';
 import { SettingsScreen } from './screens/Settings';
 import { ExplorerScreen } from './screens/Explorer';
 import { useCoreEvents } from './hooks/useCoreEvents';
-import { Button } from './components/primitive';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { OverviewScreen } from './screens/Overview';
 import { SpacesScreen } from './screens/Spaces';
@@ -24,6 +23,7 @@ import LocationSettings from './screens/settings/LocationSettings';
 import { RedirectPage } from './screens/Redirect';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { BaseTransport, ClientProvider, setTransport } from '@sd/client';
+import { Button } from '@sd/ui';
 import { CoreEvent } from '@sd/core';
 import clsx from 'clsx';
 

packages/interface/src/components/file/Inspector.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Transition } from '@headlessui/react';
 import moment from 'moment';
-import { Button, Input, TextArea } from '../primitive';
+import { Input, TextArea } from '../primitive';
+import { Button } from '@sd/ui';
 import { ShareIcon } from '@heroicons/react/solid';
 import { Heart, Link } from 'phosphor-react';
 import { useExplorerState } from './FileList';

packages/interface/src/components/file/Sidebar.tsx

@@ -5,7 +5,7 @@ import { CirclesFour, EjectSimple, MonitorPlay, Planet } from 'phosphor-react';
 import React, { useContext, useEffect, useState } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 import { TrafficLights } from '../os/TrafficLights';
-import { Button } from '../primitive';
+import { Button } from '@sd/ui';
 import { Dropdown } from '../primitive/Dropdown';
 import { DefaultProps } from '../primitive/types';
 import { useBridgeCommand, useBridgeQuery } from '@sd/client';

packages/interface/src/components/layout/Modal.tsx

@@ -2,7 +2,7 @@ import { Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import React from 'react';
 import { XIcon } from '@heroicons/react/solid';
-import { Button } from '../primitive';
+import { Button } from '@sd/ui';
 import { useNavigate } from 'react-router-dom';
 import { MacOSTrafficLights } from '../file/Sidebar';
 

packages/interface/src/components/primitive/Dropdown.tsx

@@ -2,8 +2,8 @@ import React, { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/solid';
 import { DefaultOptions } from '@apollo/client';
-import { Button, ButtonProps } from '.';
 import clsx from 'clsx';
+import { Button, ButtonProps } from '@sd/ui';
 
 type Section = {
   name: string;

packages/interface/src/components/primitive/DropdownMenu.tsx

@@ -15,7 +15,7 @@ import {
 } from '@radix-ui/react-icons';
 import cx from 'clsx';
 import React, { ReactNode, useState } from 'react';
-import { Button } from './Button';
+import { Button } from '@sd/ui';
 
 interface RadixMenuItem {
   label: string;

packages/interface/src/components/primitive/index.tsx

@@ -1,3 +1,2 @@
-export * from './Button';
 export * from './Input';
 export * from './Toggle';

packages/interface/src/screens/settings/GeneralSettings.tsx

@@ -1,5 +1,6 @@
 import { InputContainer } from '../../components/primitive/InputContainer';
-import { Button, Input } from '../../components/primitive';
+import { Input } from '../../components/primitive';
+import { Button } from '@sd/ui';
 import React, { useState } from 'react';
 
 import Listbox from '../../components/primitive/Listbox';

packages/interface/src/screens/settings/LocationSettings.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '../../components/primitive';
+import { Button } from '@sd/ui';
 import { Dropdown } from '../../components/primitive/Dropdown';
 import DropdownMenu from '../../components/primitive/DropdownMenu';
 import { InputContainer } from '../../components/primitive/InputContainer';

packages/interface/src/screens/settings/SecuritySettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputContainer } from '../../components/primitive/InputContainer';
-import { Button } from '../../components/primitive';
+import { Button } from '@sd/ui';
 
 export default function SecuritySettings() {
   return (

packages/interface/src/vite-env.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare interface ImportMetaEnv {
-  VITE_OS: string;
-}
-
-declare module '@babel/core' {}

packages/interface/tsconfig.json

@@ -16,7 +16,12 @@
     "outDir": "dist",
     "declaration": true,
     "declarationMap": true,
-    "types": [ "@honkhonk/vite-plugin-svgr/client" ]
+    "types": [ "@honkhonk/vite-plugin-svgr/client" ],
+    "baseUrl": "./",
+    "paths": {
+      "@sd/ui": ["../ui/src/index.ts"],
+      "@sd/client": ["../client/src/index.ts"]
+    }
   },
   "include": ["src"],
 }

packages/interface/vite.config.ts

@@ -1,48 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import svgr from '@honkhonk/vite-plugin-svgr';
-
-import * as path from 'path';
-
-// Vite configured in "Library Mode", it will not run as a server.
-// https://vitejs.dev/config/
-export default defineConfig({
-  // for developer purposes only
-  server: {
-    port: 8003
-  },
-  plugins: [
-    react({
-      jsxRuntime: 'classic'
-    }),
-    svgr()
-  ],
-  esbuild: {
-    jsxInject: 'import {jsx as _jsx} from "react/jsx-runtime"'
-  },
-  root: 'src',
-  publicDir: './assets',
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src', 'index.ts'),
-      formats: ['es', 'cjs'],
-      fileName: (ext) => `index.${ext}.js`,
-      name: 'SpacedriveInterface'
-    },
-    outDir: path.resolve(__dirname, 'dist'),
-    rollupOptions: {
-      input: {
-        index: path.resolve(__dirname, 'src', 'index.ts')
-      },
-      external: ['react', 'react-dom'],
-      output: {
-        globals: {
-          'react': 'React',
-          'react-dom': 'ReactDOM'
-        }
-      }
-    },
-    target: 'esnext',
-    sourcemap: true
-  }
-});

packages/ui/package.json

@@ -1,15 +1,13 @@
 {
   "name": "@sd/ui",
   "version": "0.0.0",
-  "main": "./dist/index.d.ts",
-  "types": "./dist/index.js",
-  "sass": "./style/style.scss",
   "license": "MIT",
   "exports": {
     ".": "./src",
     "./postcss": "./style/postcss.config.js",
     "./tailwind": "./style/tailwind.config.js",
-    "./style": "./style/index.ts"
+    "./style": "./style/index.js",
+    "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsc"
@@ -17,12 +15,15 @@
   "dependencies": {
     "@headlessui/react": "^1.5.0",
     "clsx": "^1.1.1",
-    "react": "^18.0.0"
+    "postcss": "^8.4.12",
+    "react": "^18.0.0",
+    "tailwind": "^4.0.0"
   },
   "devDependencies": {
     "@sd/config": "workspace:*",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "sass": "^1.50.0",
     "typescript": "^4.6.3"
   }
 }

packages/ui/src/index.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import '../style';
 
-export * from './primitive';
+export * from './Button';

packages/ui/src/primitive/Button.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { ButtonHTMLAttributes, useState } from 'react';
-import { Switch } from '@headlessui/react';
-import clsx from 'clsx';
-
-const sizes = {
-  default: 'py-1 px-3 text-md font-medium',
-  sm: 'py-1 px-2 text-sm font-medium'
-};
-
-const variants = {
-  default: `
-    bg-gray-50 
-    shadow-sm
-    hover:bg-gray-100 
-    active:bg-gray-50  
-    dark:bg-gray-650
-    dark:hover:bg-gray-600
-    dark:active:bg-gray-700
-    dark:active:opacity-80
-    
-    border-gray-100 
-    hover:border-gray-200
-    active:border-gray-200
-    dark:border-gray-600 
-    dark:active:border-gray-600 
-    dark:hover:border-gray-600
-
-    text-gray-700
-    hover:text-gray-900 
-    active:text-gray-600 
-    dark:text-gray-200  
-    dark:active:text-white 
-    dark:hover:text-white 
-  `,
-  gray: `
-    bg-gray-100 
-    shadow-sm
-    hover:bg-gray-200 
-    active:bg-gray-100  
-    dark:bg-gray-800
-    dark:hover:bg-gray-700
-    dark:active:bg-gray-700
-    dark:active:opacity-80
-    
-    border-gray-200 
-    hover:border-gray-300
-    active:border-gray-200
-    dark:border-gray-700 
-    dark:active:border-gray-600 
-    dark:hover:border-gray-600
-
-    text-gray-700
-    hover:text-gray-900 
-    active:text-gray-600 
-    dark:text-gray-200  
-    dark:active:text-white 
-    dark:hover:text-white 
-    
-  `,
-  primary:
-      'bg-primary text-white shadow-sm border-primary-600 dark:border-primary-400 active:bg-primary-600 active:border-primary-700 hover:bg-primary-400 hover:border-primary-500',
-  selected: `bg-gray-100 dark:bg-gray-500 
-    text-black hover:text-black active:text-black dark:hover:text-white dark:text-white 
-    `
-};
-
-export type ButtonVariant = keyof typeof variants;
-export type ButtonSize = keyof typeof sizes;
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  loading?: boolean;
-  icon?: React.ReactNode;
-  noPadding?: boolean;
-  noBorder?: boolean;
-  pressEffect?: boolean;
-  justifyLeft?: boolean;
-}
-
-export const Button: React.FC<ButtonProps> = ({ loading, ...props }) => {
-  return (
-      <button
-          {...props}
-          className={clsx(
-              'flex border rounded-md transition-colors duration-100 cursor-default',
-              { 'opacity-5': loading, '!p-1': props.noPadding },
-              { 'justify-center': !props.justifyLeft },
-              sizes[props.size || 'default'],
-              variants[props.variant || 'default'],
-              { 'active:translate-y-[1px]': props.pressEffect },
-              { 'border-0': props.noBorder },
-              props.className
-          )}
-      >
-        {props.children}
-      </button>
-  );
-};

packages/ui/src/primitive/index.ts

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

packages/ui/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../config/tsconfig/react-library.json",
-  "include": ["src", "types"],
+  "include": ["src"],
   "compilerOptions": {
     "outDir": "dist",
   }