npm - @devvmichael/create-stacks-app - Versions diffs - 0.1.0 - Mend

@devvmichael/create-stacks-app 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/dist/commands/add.d.ts +8 -0
package/dist/commands/add.d.ts.map +1 -0
package/dist/commands/add.js +215 -0
package/dist/commands/add.js.map +1 -0
package/dist/commands/create.d.ts +3 -0
package/dist/commands/create.d.ts.map +1 -0
package/dist/commands/create.js +63 -0
package/dist/commands/create.js.map +1 -0
package/dist/commands/deploy.d.ts +7 -0
package/dist/commands/deploy.d.ts.map +1 -0
package/dist/commands/deploy.js +159 -0
package/dist/commands/deploy.js.map +1 -0
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +47 -0
package/dist/index.js.map +1 -0
package/dist/prompts/project.d.ts +4 -0
package/dist/prompts/project.d.ts.map +1 -0
package/dist/prompts/project.js +124 -0
package/dist/prompts/project.js.map +1 -0
package/dist/templates/installer.d.ts +4 -0
package/dist/templates/installer.d.ts.map +1 -0
package/dist/templates/installer.js +91 -0
package/dist/templates/installer.js.map +1 -0
package/dist/types/index.d.ts +40 -0
package/dist/types/index.d.ts.map +1 -0
package/dist/types/index.js +2 -0
package/dist/types/index.js.map +1 -0
package/dist/utils/clarinet.d.ts +5 -0
package/dist/utils/clarinet.d.ts.map +1 -0
package/dist/utils/clarinet.js +72 -0
package/dist/utils/clarinet.js.map +1 -0
package/dist/utils/filesystem.d.ts +4 -0
package/dist/utils/filesystem.d.ts.map +1 -0
package/dist/utils/filesystem.js +158 -0
package/dist/utils/filesystem.js.map +1 -0
package/dist/utils/git.d.ts +2 -0
package/dist/utils/git.d.ts.map +1 -0
package/dist/utils/git.js +21 -0
package/dist/utils/git.js.map +1 -0
package/dist/utils/logger.d.ts +7 -0
package/dist/utils/logger.d.ts.map +1 -0
package/dist/utils/logger.js +45 -0
package/dist/utils/logger.js.map +1 -0
package/dist/utils/package-manager.d.ts +5 -0
package/dist/utils/package-manager.d.ts.map +1 -0
package/dist/utils/package-manager.js +65 -0
package/dist/utils/package-manager.js.map +1 -0
package/dist/utils/validation.d.ts +5 -0
package/dist/utils/validation.d.ts.map +1 -0
package/dist/utils/validation.js +41 -0
package/dist/utils/validation.js.map +1 -0
package/package.json +52 -0
package/templates/base/editorconfig +12 -0
package/templates/base/gitignore +13 -0
package/templates/base/prettierrc +7 -0
package/templates/contracts/counter/counter.clar +43 -0
package/templates/contracts/counter/counter.test.ts +127 -0
package/templates/contracts/defi/sip010-trait.clar +11 -0
package/templates/contracts/defi/staking-pool.clar +20 -0
package/templates/contracts/marketplace/nft-marketplace.clar +44 -0
package/templates/contracts/marketplace/nft-trait.clar +8 -0
package/templates/contracts/marketplace/sip009-nft.clar +25 -0
package/templates/contracts/nft/nft.clar +111 -0
package/templates/contracts/nft/nft.test.ts +204 -0
package/templates/contracts/token/token.clar +67 -0
package/templates/contracts/token/token.test.ts +139 -0
package/templates/frontends/nextjs/template/.env.example +2 -0
package/templates/frontends/nextjs/template/app/globals.css +40 -0
package/templates/frontends/nextjs/template/app/layout.tsx +36 -0
package/templates/frontends/nextjs/template/app/page.tsx +42 -0
package/templates/frontends/nextjs/template/app/providers.tsx +31 -0
package/templates/frontends/nextjs/template/components/contracts/counter-interaction.tsx +80 -0
package/templates/frontends/nextjs/template/components/header.tsx +24 -0
package/templates/frontends/nextjs/template/components/wallet/connect-button.tsx +44 -0
package/templates/frontends/nextjs/template/hooks/use-contract-call.ts +52 -0
package/templates/frontends/nextjs/template/hooks/use-contract-read.ts +49 -0
package/templates/frontends/nextjs/template/hooks/use-stacks.ts +26 -0
package/templates/frontends/nextjs/template/lib/contracts.ts +29 -0
package/templates/frontends/nextjs/template/lib/stacks.ts +18 -0
package/templates/frontends/nextjs/template/next.config.js +6 -0
package/templates/frontends/nextjs/template/package.json +29 -0
package/templates/frontends/nextjs/template/postcss.config.js +6 -0
package/templates/frontends/nextjs/template/public/logo.svg +3 -0
package/templates/frontends/nextjs/template/tailwind.config.js +18 -0
package/templates/frontends/nextjs/template/tsconfig.json +26 -0
package/templates/frontends/react/template/.env.example +2 -0
package/templates/frontends/react/template/index.html +13 -0
package/templates/frontends/react/template/package.json +29 -0
package/templates/frontends/react/template/postcss.config.js +6 -0
package/templates/frontends/react/template/public/logo.svg +3 -0
package/templates/frontends/react/template/src/App.tsx +100 -0
package/templates/frontends/react/template/src/components/CounterInteraction.tsx +121 -0
package/templates/frontends/react/template/src/components/Header.tsx +39 -0
package/templates/frontends/react/template/src/index.css +33 -0
package/templates/frontends/react/template/src/main.tsx +10 -0
package/templates/frontends/react/template/tailwind.config.js +15 -0
package/templates/frontends/react/template/tsconfig.json +25 -0
package/templates/frontends/react/template/tsconfig.node.json +10 -0
package/templates/frontends/react/template/vite.config.ts +12 -0
package/templates/frontends/vue/template/.env.example +2 -0
package/templates/frontends/vue/template/index.html +13 -0
package/templates/frontends/vue/template/package.json +27 -0
package/templates/frontends/vue/template/postcss.config.js +6 -0
package/templates/frontends/vue/template/public/logo.svg +3 -0
package/templates/frontends/vue/template/src/App.vue +98 -0
package/templates/frontends/vue/template/src/components/AppHeader.vue +39 -0
package/templates/frontends/vue/template/src/components/CounterInteraction.vue +120 -0
package/templates/frontends/vue/template/src/env.d.ts +16 -0
package/templates/frontends/vue/template/src/main.ts +5 -0
package/templates/frontends/vue/template/src/style.css +33 -0
package/templates/frontends/vue/template/tailwind.config.js +15 -0
package/templates/frontends/vue/template/tsconfig.json +25 -0
package/templates/frontends/vue/template/tsconfig.node.json +10 -0
package/templates/frontends/vue/template/vite.config.ts +12 -0

package/templates/frontends/react/template/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/frontends/react/template/tailwind.config.js ADDED Viewed

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        stacks: {
+          purple: '#5546FF',
+          'purple-dark': '#3D2DB8',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/templates/frontends/react/template/tsconfig.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/frontends/react/template/tsconfig.node.json ADDED Viewed

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

package/templates/frontends/react/template/vite.config.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

package/templates/frontends/vue/template/.env.example ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ VITE_NETWORK=testnet
2	+ VITE_CONTRACT_ADDRESS=ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM

package/templates/frontends/vue/template/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stacks App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/frontends/vue/template/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+    "name": "stacks-app-frontend",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vue-tsc && vite build",
+        "preview": "vite preview",
+        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts"
+    },
+    "dependencies": {
+        "@stacks/connect": "^7.8.2",
+        "@stacks/network": "^6.13.0",
+        "@stacks/transactions": "^6.13.1",
+        "vue": "^3.4.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^4.5.2",
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.32",
+        "tailwindcss": "^3.3.6",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.10",
+        "vue-tsc": "^1.8.25"
+    }
+}

package/templates/frontends/vue/template/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/frontends/vue/template/public/logo.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#5546FF" d="M16 0L3 8v16l13 8 13-8V8L16 0zm0 4l9 5.5v11L16 26l-9-5.5v-11L16 4z"/>
+</svg>

package/templates/frontends/vue/template/src/App.vue ADDED Viewed

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { AppConfig, UserSession, showConnect } from '@stacks/connect';
+import { StacksTestnet, StacksMainnet } from '@stacks/network';
+import AppHeader from './components/AppHeader.vue';
+import CounterInteraction from './components/CounterInteraction.vue';
+const appConfig = new AppConfig(['store_write', 'publish_data']);
+const userSession = new UserSession({ appConfig });
+const network =
+  import.meta.env.VITE_NETWORK === 'mainnet'
+    ? new StacksMainnet()
+    : new StacksTestnet();
+const address = ref<string | null>(null);
+onMounted(() => {
+  if (userSession.isUserSignedIn()) {
+    const userData = userSession.loadUserData();
+    const networkKey = import.meta.env.VITE_NETWORK === 'mainnet' ? 'mainnet' : 'testnet';
+    address.value = userData.profile.stxAddress[networkKey];
+  }
+});
+function handleConnect() {
+  showConnect({
+    appDetails: {
+      name: 'Stacks App',
+      icon: window.location.origin + '/logo.svg',
+    },
+    redirectTo: '/',
+    onFinish: () => {
+      window.location.reload();
+    },
+    userSession,
+  });
+}
+function handleDisconnect() {
+  userSession.signUserOut('/');
+}
+</script>
+<template>
+  <div class="min-h-screen flex flex-col">
+    <AppHeader
+      :address="address"
+      @connect="handleConnect"
+      @disconnect="handleDisconnect"
+    />
+    <main class="flex-1 container mx-auto px-4 py-8">
+      <div class="mb-8 text-center">
+        <h1 class="mb-4 text-4xl font-bold">Welcome to Your Stacks App</h1>
+        <p class="text-lg text-gray-400">
+          A full-stack Stacks blockchain application
+        </p>
+      </div>
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        <CounterInteraction
+          :network="network"
+          :is-connected="!!address"
+          :sender-address="address"
+        />
+      </div>
+      <div class="mt-12 text-center">
+        <h2 class="mb-4 text-2xl font-bold">Get Started</h2>
+        <div class="grid gap-4 md:grid-cols-3 max-w-3xl mx-auto">
+          <div class="card">
+            <h3 class="font-semibold mb-2">📝 Edit Contracts</h3>
+            <p class="text-sm text-gray-400">
+              Modify contracts in <code class="bg-gray-800 px-1 rounded">contracts/</code>
+            </p>
+          </div>
+          <div class="card">
+            <h3 class="font-semibold mb-2">🧪 Run Tests</h3>
+            <p class="text-sm text-gray-400">
+              Run <code class="bg-gray-800 px-1 rounded">npm run test</code>
+            </p>
+          </div>
+          <div class="card">
+            <h3 class="font-semibold mb-2">🚀 Deploy</h3>
+            <p class="text-sm text-gray-400">
+              Run <code class="bg-gray-800 px-1 rounded">npm run deploy:testnet</code>
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer class="border-t border-gray-800 py-6 text-center text-sm text-gray-500">
+      Built with Create Stacks App
+    </footer>
+  </div>
+</template>

package/templates/frontends/vue/template/src/components/AppHeader.vue ADDED Viewed

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  address: string | null;
+}>();
+const emit = defineEmits<{
+  connect: [];
+  disconnect: [];
+}>();
+</script>
+<template>
+  <header class="border-b border-gray-800">
+    <div class="container mx-auto px-4 py-4 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2">
+        <svg
+          class="w-8 h-8 text-stacks-purple"
+          viewBox="0 0 32 32"
+          fill="currentColor"
+        >
+          <path d="M16 0L3 8v16l13 8 13-8V8L16 0zm0 4l9 5.5v11L16 26l-9-5.5v-11L16 4z" />
+        </svg>
+        <span class="font-bold text-xl">Stacks App</span>
+      </a>
+      <div v-if="address" class="flex items-center gap-3">
+        <span class="text-sm bg-gray-800 px-3 py-1 rounded-full">
+          {{ address.slice(0, 6) }}...{{ address.slice(-4) }}
+        </span>
+        <button @click="emit('disconnect')" class="btn-secondary text-sm">
+          Disconnect
+        </button>
+      </div>
+      <button v-else @click="emit('connect')" class="btn-primary">
+        Connect Wallet
+      </button>
+    </div>
+  </header>
+</template>

package/templates/frontends/vue/template/src/components/CounterInteraction.vue ADDED Viewed

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { openContractCall } from '@stacks/connect';
+import { callReadOnlyFunction, cvToValue } from '@stacks/transactions';
+import type { StacksNetwork } from '@stacks/network';
+const props = defineProps<{
+  network: StacksNetwork;
+  isConnected: boolean;
+  senderAddress: string | null;
+}>();
+const contractAddress = import.meta.env.VITE_CONTRACT_ADDRESS || 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM';
+const contractName = 'counter';
+const counter = ref<number | null>(null);
+const isLoading = ref(true);
+const isIncrementing = ref(false);
+const isDecrementing = ref(false);
+async function fetchCounter() {
+  try {
+    const result = await callReadOnlyFunction({
+      contractAddress,
+      contractName,
+      functionName: 'get-counter',
+      functionArgs: [],
+      network: props.network,
+      senderAddress: contractAddress,
+    });
+    const value = cvToValue(result);
+    counter.value = value?.value ?? 0;
+  } catch (error) {
+    console.error('Failed to fetch counter:', error);
+  } finally {
+    isLoading.value = false;
+  }
+}
+onMounted(() => {
+  fetchCounter();
+});
+async function handleIncrement() {
+  if (!props.senderAddress) return;
+  isIncrementing.value = true;
+  try {
+    await openContractCall({
+      contractAddress,
+      contractName,
+      functionName: 'increment',
+      functionArgs: [],
+      network: props.network,
+      onFinish: () => {
+        setTimeout(fetchCounter, 2000);
+      },
+    });
+  } catch (error) {
+    console.error('Increment failed:', error);
+  } finally {
+    isIncrementing.value = false;
+  }
+}
+async function handleDecrement() {
+  if (!props.senderAddress) return;
+  isDecrementing.value = true;
+  try {
+    await openContractCall({
+      contractAddress,
+      contractName,
+      functionName: 'decrement',
+      functionArgs: [],
+      network: props.network,
+      onFinish: () => {
+        setTimeout(fetchCounter, 2000);
+      },
+    });
+  } catch (error) {
+    console.error('Decrement failed:', error);
+  } finally {
+    isDecrementing.value = false;
+  }
+}
+</script>
+<template>
+  <div class="card">
+    <h2 class="text-2xl font-bold mb-4">Counter Contract</h2>
+    <div class="mb-6 text-center">
+      <div class="text-6xl font-bold text-stacks-purple">
+        {{ isLoading ? '...' : counter }}
+      </div>
+      <p class="text-sm text-gray-500 mt-2">Current count</p>
+    </div>
+    <template v-if="isConnected">
+      <div class="flex gap-2">
+        <button
+          @click="handleDecrement"
+          :disabled="isDecrementing || counter === 0"
+          class="btn-secondary flex-1 disabled:opacity-50"
+        >
+          {{ isDecrementing ? 'Processing...' : '− Decrement' }}
+        </button>
+        <button
+          @click="handleIncrement"
+          :disabled="isIncrementing"
+          class="btn-primary flex-1 disabled:opacity-50"
+        >
+          {{ isIncrementing ? 'Processing...' : '+ Increment' }}
+        </button>
+      </div>
+    </template>
+    <p v-else class="text-center text-gray-500">
+      Connect your wallet to interact with the contract
+    </p>
+  </div>
+</template>

package/templates/frontends/vue/template/src/env.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+interface ImportMetaEnv {
+  readonly VITE_NETWORK: string;
+  readonly VITE_CONTRACT_ADDRESS: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/frontends/vue/template/src/main.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+createApp(App).mount('#app');

package/templates/frontends/vue/template/src/style.css ADDED Viewed

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+body {
+    margin: 0;
+    min-height: 100vh;
+}
+.btn-primary {
+    @apply bg-stacks-purple hover:bg-stacks-purple-dark text-white font-semibold py-2 px-4 rounded-lg transition-colors cursor-pointer;
+}
+.btn-secondary {
+    @apply border border-gray-600 hover:bg-gray-800 font-semibold py-2 px-4 rounded-lg transition-colors cursor-pointer;
+}
+.card {
+    @apply bg-gray-900 rounded-xl shadow-lg p-6 border border-gray-700;
+}

package/templates/frontends/vue/template/tailwind.config.js ADDED Viewed

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        stacks: {
+          purple: '#5546FF',
+          'purple-dark': '#3D2DB8',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/templates/frontends/vue/template/tsconfig.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/frontends/vue/template/tsconfig.node.json ADDED Viewed

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

package/templates/frontends/vue/template/vite.config.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});