ci: setup

lib/vite-plugin-scope-tailwind

@@ -1 +0,0 @@
-Subproject commit cec13df7edcb480dfb111de3c74887f1c3ffb7e2

package.json

@@ -1,66 +1,74 @@
 {
-  "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/package.json",
+    "name": "@lumreb/sdk",
-  "name": "sdk",
+    "private": true,
-  "private": true,
+    "version": "0.1.0",
-  "version": "0.0.0",
+    "type": "module",
-  "type": "module",
+    "main": "src/index.ts",
-  "main": "./src/main.ts",
+    "types": "./src/main.ts",
-  "types": "./src/main.ts",
+    "scripts": {
-  "scripts": {
+        "prepare": "presetter bootstrap",
-    "dev": "vite",
+        "build": "run build",
-    "build-pkg": "tsc -p ./tsconfig.build.json && vite build",
+        "storybook": "storybook dev -p 6006",
-    "build": "zx ./scripts/build.mjs",
+        "build-storybook": "storybook build"
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    },
-    "preview": "vite preview",
+    "dependencies": {
-    "storybook": "storybook dev -p 6006",
+        "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
-    "build-storybook": "storybook build"
+        "@lumeweb/libkernel": "0.1.0-develop.65",
-  },
+        "@radix-ui/react-dialog": "^1.0.5",
-  "dependencies": {
+        "@radix-ui/react-icons": "^1.3.0",
-    "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
+        "@radix-ui/react-slot": "^1.0.2",
-    "@lumeweb/libkernel": "0.1.0-develop.65",
+        "class-variance-authority": "^0.7.0",
-    "@radix-ui/react-dialog": "^1.0.5",
+        "clsx": "^2.0.0",
-    "@radix-ui/react-icons": "^1.3.0",
+        "framer-motion": "^10.16.4",
-    "@radix-ui/react-slot": "^1.0.2",
+        "react": "^18.2.0",
-    "class-variance-authority": "^0.7.0",
+        "react-dom": "^18.2.0",
-    "clsx": "^2.0.0",
+        "tailwind-merge": "^1.14.0",
-    "framer-motion": "^10.16.4",
+        "tailwindcss-animate": "^1.0.7",
-    "react": "^18.2.0",
+        "vite-plugin-node-polyfills": "^0.15.0"
-    "react-dom": "^18.2.0",
+    },
-    "tailwind-merge": "^1.14.0",
+    "devDependencies": {
-    "tailwindcss-animate": "^1.0.7",
+        "@lumeweb/node-library-preset": "*",
-    "vite-plugin-node-polyfills": "^0.15.0",
+        "@radix-ui/react-dialog": "^1.0.5",
-    "vite-plugin-optimizer": "^1.4.2"
+        "@radix-ui/react-icons": "^1.3.0",
-  },
+        "@storybook/addon-essentials": "^7.4.6",
-  "devDependencies": {
+        "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
+        "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
+        "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-links": "^7.4.6",
+        "@storybook/blocks": "^7.4.6",
-    "@storybook/addon-onboarding": "^1.0.8",
+        "@storybook/react": "^7.4.6",
-    "@storybook/blocks": "^7.4.6",
+        "@storybook/react-vite": "^7.4.6",
-    "@storybook/react": "^7.4.6",
+        "@storybook/testing-library": "^0.2.2",
-    "@storybook/react-vite": "^7.4.6",
+        "@types/react": "^18.2.25",
-    "@storybook/testing-library": "^0.2.2",
+        "@types/react-dom": "^18.2.11",
-    "@types/react": "^18.2.15",
+        "@types/uniqid": "^5.3.2",
-    "@types/react-dom": "^18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@types/uniqid": "^5.3.2",
+        "@typescript-eslint/parser": "^6.7.4",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@vitejs/plugin-react": "^4.1.0",
-    "@typescript-eslint/parser": "^6.0.0",
+        "autoprefixer": "^10.4.16",
-    "@vitejs/plugin-react": "^4.0.3",
+        "class-variance-authority": "^0.7.0",
-    "autoprefixer": "^10.4.16",
+        "eslint": "^8.51.0",
-    "eslint": "^8.45.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-react-refresh": "^0.4.3",
+        "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-storybook": "^0.6.14",
+        "framer-motion": "^10.16.4",
-    "json": "^11.0.0",
+        "json": "^11.0.0",
-    "postcss": "^8.4.31",
+        "postcss": "^8.4.31",
-    "storybook": "^7.4.6",
+        "presetter": "*",
-    "tailwindcss": "^3.3.3",
+        "react": "^18.2.0",
-    "typescript": "^5.0.2",
+        "react-dom": "^18.2.0",
-    "uniqid": "^5.4.0",
+        "storybook": "^7.4.6",
-    "vite": "^4.4.5",
+        "tailwind-merge": "^1.14.0",
-    "vite-plugin-dts": "^3.6.0",
+        "tailwindcss": "^3.3.3",
-    "vite-plugin-scope-tailwind": "^1.1.3",
+        "tailwindcss-animate": "^1.0.7",
-    "vite-plugin-svgr": "^4.1.0",
+        "typescript": "^5.2.2",
-    "zx": "^7.2.3"
+        "uniqid": "^5.4.0",
-  }
+        "vite": "^4.4.11",
+        "vite-plugin-dts": "^3.6.0",
+        "vite-plugin-node-polyfills": "^0.15.0",
+        "vite-plugin-optimizer": "^1.4.2",
+        "vite-plugin-scope-tailwind": "^1.1.3",
+        "vite-plugin-svgr": "^4.1.0"
+    },
+    "readme": "ERROR: No README data found!",
+    "_id": "@lumeweb/sdk@0.1.0"
 }

src/components/lume/LumeIdentity/LumeIdentity.tsx

@@ -1,9 +1,9 @@
-import { Button } from "../../ui/button.tsx";
+import { Button } from "../../ui/button";
 import {
   SwitchableComponent,
   SwitchableComponentProvider,
   useSwitchableComponent,
-} from "../../SwitchableComponent.tsx";
+} from "../../SwitchableComponent";
 import * as ComponentList from "./components";
 import { LumeIdentityContext, Session } from "./LumeIdentityContext";
 import { LazyMotion, domAnimation } from "framer-motion";
@@ -14,23 +14,23 @@ import { useState } from "react";
 
 const LumeIdentity: FC = () => {
   const { visibleComponent, setVisibleComponent } = useSwitchableComponent(
-    ComponentList.SubmitButton
+    ComponentList.SubmitButton,
   );
 
   const isSubmitButtonInView = [ComponentList.SubmitButton.index].includes(
-    visibleComponent.index
+    visibleComponent.index,
   );
   const isLoginWithAccountKey = [ComponentList.SeedPhraseInput.index].includes(
-    visibleComponent.index
+    visibleComponent.index,
   );
   const isCreatingAccount = [ComponentList.SetupAccountKey.index].includes(
-    visibleComponent.index
+    visibleComponent.index,
   );
   const isShowingSeedPhrase = [
     ComponentList.SeedPhraseGeneration.index,
   ].includes(visibleComponent.index);
   const isFinalStep = [ComponentList.SeedPhraseGeneration.index].includes(
-    visibleComponent.index
+    visibleComponent.index,
   );
   const shouldShowBackButton = isCreatingAccount;
 
@@ -62,16 +62,14 @@ const LumeIdentity: FC = () => {
           {!isFinalStep ? (
             <>
               <div
-                className={`relative h-7 w-full overflow-hidden ${coloredOrLine}`}
+                className={`relative h-7 w-full overflow-hidden ${coloredOrLine}`}>
-              >
                 <svg
                   width="409"
                   height="28"
                   className="max-w-full -left-1/2"
                   viewBox="0 0 409 28"
                   fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns="http://www.w3.org/2000/svg">
-                >
                   <path
                     fillRule="evenodd"
                     clipRule="evenodd"
@@ -91,10 +89,9 @@ const LumeIdentity: FC = () => {
                   setVisibleComponent(
                     shouldShowBackButton
                       ? ComponentList.SubmitButton
-                      : ComponentList.SetupAccountKey
+                      : ComponentList.SetupAccountKey,
                   )
-                }
+                }>
-              >
                 <span className="text-center text-lg font-normal leading-normal">
                   {shouldShowBackButton ? "Go Back" : "Create an Account"}
                 </span>

src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../utils.ts";
+import { cn } from "../utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
@@ -31,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -50,7 +50,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

src/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "../utils.ts";
+import { cn } from "../utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -12,13 +12,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-9 w-full text-white rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 focus:border-white",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Input.displayName = "Input";
 

src/index.ts

@@ -0,0 +1,7 @@
+export {
+  default as LumeProvider,
+  useLume,
+} from "./components/lume/LumeProvider";
+export { default as LumeDashboard } from "./components/lume/LumeDashboard/LumeDashboard";
+export { default as LumeIdentity } from "./components/lume/LumeIdentity/LumeIdentity";
+import "../styles/globals.css";

src/main.ts

@@ -1,4 +0,0 @@
-export { default as LumeProvider, useLume } from './components/lume/LumeProvider.tsx';
-export { default as LumeDashboard } from './components/lume/LumeDashboard/LumeDashboard.tsx';
-export { default as LumeIdentity } from './components/lume/LumeIdentity/LumeIdentity.tsx';
-import "../styles/globals.css";

tailwind.config.ts

@@ -1,15 +1,9 @@
-import {type Config} from "tailwindcss";
+import { type Config } from "tailwindcss";
 
 export default {
   darkMode: ["class"],
-  content: [
+  content: ["./src/**/*.{ts,tsx}"],
-    './src/**/*.{ts,tsx}',
+  safelist: ["text-primary", "text-red-500", "text-orange-500"],
-  ],
-  safelist: [
-    'text-primary',
-    'text-red-500',
-    'text-orange-500',
-  ],
   theme: {
     container: {
       center: true,
@@ -76,4 +70,4 @@ export default {
     },
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;

tsconfig.build.json

@@ -1,47 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "composite": true,
-    "module": "ESNext",
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "outDir": "./dist",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    // "paths": {
-    //   "@/*": ["src/*"],
-    //   "@/styles/*": ["styles/*"],
-    // },
-    "typeRoots": [
-      "src/vite-env.d.ts"
-    ]
-  },
-  "include": [
-    "./src/**/*",
-    // "./src/components/lume/LumeDashboard/LumeDashboard."
-  ],
-  "exclude": [
-    "**/*.stories.tsx"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "composite": true,
-    "module": "ESNext",
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    // "paths": {
-    //   "@/*": ["src/*"],
-    //   "@/styles/*": ["styles/*"],
-    // },
-    "typeRoots": ["src/vite-env.d.ts"]
-  },
-  "include": [
-    "src",
-    "scripts",
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts",
-    "lib"
-  ]
-}

vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-//import scopeTailwind from "./lib/vite-plugin-scope-tailwind/src/main"
+import scopeTailwind from "vite-plugin-scope-tailwind";
 import { resolve } from "path";
 import svgr from "vite-plugin-svgr";
 import dts from "vite-plugin-dts";
@@ -13,7 +13,7 @@ export default defineConfig({
   plugins: [
     svgr(),
     react(),
-    //  scopeTailwind({ react: true, classNameTransformers: ["cn"] }),
+    scopeTailwind({ react: true }),
     dts({
       tsconfigPath: "tsconfig.build.json",
     }),
@@ -38,24 +38,18 @@ export default defineConfig({
     // },
   },
   build: {
-    manifest: true,
+    manifest: false,
-    outDir: "dist",
+    outDir: "lib",
     emptyOutDir: true,
     sourcemap: true,
     minify: false,
     lib: {
-      entry: resolve(__dirname, "src/main.ts"),
+      entry: resolve(__dirname, "src/index.ts"),
-      name: "lume-sdk",
+      name: "sdk",
       fileName: (format) => `lib.${format}.js`,
     },
     rollupOptions: {
-      external: [
+      external: ["react", "react-dom"],
-        "react",
-        "react-dom",
-        // "framer-motion",
-        // "tailwind-merge",
-        // "class-variance-authority"
-      ],
     },
   },
 });