build: minify tailwind

.changeset/unlucky-geckos-doubt.md

@@ -0,0 +1,7 @@
+---
+'@stacks/connect-ui': minor
+'@stacks/connect': minor
+'@stacks/connect-react': minor
+---
+
+Add new UI to allow selecting which wallet to use

.gitignore

@@ -48,3 +48,5 @@ packages/connect-ui/connect
 web-ext-artifacts
 
 docs/
+
+storybook-static/

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@stacks/prettier-config'),
+  plugins: ['prettier-plugin-tailwindcss'],
+};

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

package.json

@@ -4,7 +4,6 @@
   "workspaces": [
     "packages/**"
   ],
-  "prettier": "@stacks/prettier-config",
   "scripts": {
     "build": "lerna run build",
     "build:connect": "lerna run build --scope @stacks/connect",
@@ -30,7 +29,7 @@
     "@stacks/eslint-config": "^2.0.0",
     "@stacks/prettier-config": "^0.0.10",
     "@stencil-community/eslint-plugin": "^0.5.0",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "eslint": "^8.49.0",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-import": "^2.28.1",
@@ -40,11 +39,12 @@
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
     "lerna": "^7.3.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^7.2.0",
-    "typedoc": "^0.25.1",
-    "typescript": "^5.2.2"
+    "typedoc": "^0.25.3",
+    "typescript": "^5.3.2"
   }
 }

packages/connect-react/package.json

@@ -2,7 +2,6 @@
   "name": "@stacks/connect-react",
   "version": "22.2.2",
   "license": "MIT",
-  "prettier": "@stacks/prettier-config",
   "scripts": {
     "build": "concurrently 'tsup src/index.ts' 'yarn types'",
     "prepublishOnly": "yarn build",

packages/connect-react/src/react/components/connect/context.tsx

@@ -5,7 +5,7 @@ enum States {
   UPDATE_AUTH_OPTIONS = 'data/update-auth-options',
 }
 
-type Action = { type: string; payload?: any };
+type Action = { type: States; payload?: any };
 
 type Dispatch = (action: Action) => void;
 
@@ -35,7 +35,7 @@ const initialState: State = {
   },
 };
 
-const connectReducer = (state: State, { type, payload }: { type: string; payload?: any }) => {
+const connectReducer = (state: State, { type, payload }: { type: States; payload?: any }) => {
   switch (type) {
     case States.UPDATE_AUTH_OPTIONS: {
       return {

packages/connect-ui/package.json

@@ -2,7 +2,6 @@
   "name": "@stacks/connect-ui",
   "version": "6.1.3",
   "license": "MIT",
-  "prettier": "@stacks/prettier-config",
   "scripts": {
     "build": "stencil build --docs",
     "dev": "stencil build --dev --watch",
@@ -19,7 +18,14 @@
   "devDependencies": {
     "@stencil/sass": "^1.5.2",
     "@types/node": "^14.6.0",
-    "puppeteer": "^9.0.0"
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.31",
+    "postcss-import": "^15.1.0",
+    "postcss-rename": "^0.6.1",
+    "stencil-tailwind-plugin": "^1.8.0",
+    "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7"
   },
   "publishConfig": {
     "access": "public"

packages/connect-ui/postcss.config.js

@@ -0,0 +1,9 @@
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('cssnano')
+  ]
+};

packages/connect-ui/src/components.d.ts

@@ -5,9 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { WebBTCProvider } from "./providers";
 export namespace Components {
     interface ConnectModal {
-        "authOptions": any;
+        "callback": Function;
+        "defaultProviders": WebBTCProvider[];
+        "installedProviders": WebBTCProvider[];
     }
 }
 declare global {
@@ -23,7 +26,9 @@ declare global {
 }
 declare namespace LocalJSX {
     interface ConnectModal {
-        "authOptions"?: any;
+        "callback"?: Function;
+        "defaultProviders"?: WebBTCProvider[];
+        "installedProviders"?: WebBTCProvider[];
     }
     interface IntrinsicElements {
         "connect-modal": ConnectModal;

packages/connect-ui/src/components/modal/modal.css

@@ -0,0 +1,11 @@
+:host {
+  all: initial;
+}
+
+.modal-body {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}