@oneclick.dev/cms-kit 0.0.1

package/styles/components/flow-builder.css

@@ -0,0 +1,159 @@
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+@import '@vue-flow/controls/dist/style.css';
+@import '@vue-flow/minimap/dist/style.css';
+
+.vue-flow__background.vue-flow__container pattern circle {
+  fill: #d6d6d6;
+}
+
+.vue-flow__node {
+  background-color: white;
+  border: 1px solid #ececec;
+  border-radius: .5rem;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding: .5rem;
+  --focus-border-color: #a16aff;
+
+  &.selected, &:focus, &:focus-visible {
+    border: 2px solid var(--focus-border-color);
+  }
+}
+
+.vue-flow__handle {
+  height: 15px;
+  border-radius: 5px;
+}
+
+.vue-flow__edge-path, .vue-flow__connection-path {
+  stroke: #7b7b7b;
+  stroke-width: 2;
+}
+
+.vue-flow__edge.selected .vue-flow__edge-path {
+  stroke: #efefef;
+}
+
+.vue-flow__minimap {
+  border-radius: 16px;
+  overflow: hidden;
+  border: 2px solid #d8d8d8;
+
+  &.vue-flow__panel {
+    right: unset;
+    left: 0;
+  }
+}
+
+.dark {
+  .vue-flow__minimap {
+    background-color: #000000ba;
+    border-color: #393939;
+  }
+  
+  .vue-flow__minimap-mask {
+    opacity: .2;
+  }
+
+  .vue-flow__background.vue-flow__container pattern circle {
+    fill: #2b2b2b;
+  }
+}
+
+
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+
+
+
+.control-menu {
+  box-shadow: 0 2px 4px #00000012;
+
+  .vue-flow__controls {
+    position: relative;
+    display: flex;
+    margin: 0;
+
+    .vue-flow__controls-button {
+      width: 22px;
+      height: 22px;
+      border-bottom: none;
+
+      &:disabled {
+        opacity: .2;
+      }
+    }
+  }
+}
+
+.dark {
+  .control-menu {
+    .vue-flow__controls {
+      .vue-flow__controls-button {
+        background: var(--muted);
+
+        &:disabled {
+          opacity: .4;
+        }
+
+        svg {
+          color: var(--muted-foreground);
+        }
+      }
+    }
+  }
+}
+
+
+
+/* -> Nodes */
+.vue-flow__node {
+  background: var(--card);
+  border: 1px solid var(--border);
+}
+
+.vue-flow__nodes .vue-flow__node-start {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  background-color: #4bdb76;
+  color: #111827;
+  border-radius: 1000px;
+  border-color: #1bae25;
+  padding: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.vue-flow__nodes .vue-flow__node-finish-flow, .vue-flow__nodes .vue-flow__node-confetti {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 999px;
+  aspect-ratio: 1;
+  width: 85px;
+}
+
+.vue-flow__nodes .vue-flow__node-start {
+  background: linear-gradient(45deg, #059530, #5cf088);
+}
+
+.vue-flow__nodes .vue-flow__node-confetti {
+  background: linear-gradient(45deg, #b61568, #f65ead);
+}
+
+.vue-flow__nodes .vue-flow__node-finish-flow {
+  background: linear-gradient(45deg, #b61515, #f65e5e);
+}

package/styles/index.css

@@ -0,0 +1,2 @@
+@import './components/code-editor.css';
+@import './components/flow-builder.css';

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "jsx": "preserve",
+      "strict": true,
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+      "baseUrl": ".",
+      "declaration": true,
+      "declarationDir": "./dist",
+      "outDir": "./dist"
+    },
+    "include": ["./**/*.ts", "./**/*.vue"],
+    "exclude": ["dist", "node_modules"]
+  }
+  

package/types/index.ts

@@ -0,0 +1,41 @@
+export interface ModuleMetadata {
+  name: string
+  icon?: string
+  description?: string
+  version?: string
+}
+
+export type UseFirebaseIntegration = (projectId: string) => {
+  add: (collection: string, data: Record<string, any>) => Promise<any>
+  find: (collection: string, query?: Record<string, any>) => Promise<any>
+  get: (collection: string, doc: string) => Promise<any>
+  update: (collection: string, id: string, data: Record<string, any>) => Promise<any>
+  remove: (collection: string, id: string) => Promise<any>
+}
+
+export type UseModulePermissions = () => {
+  isAdmin: () => boolean
+  isSuperAdmin: () => boolean
+  hasPermission: (permission: string) => boolean
+  hasPermissionOR: (...permissions: string[]) => boolean
+  hasPermissionAND: (...permissions: string[]) => boolean
+}
+
+export type UseNavigateToModuleRoute = () => {
+  navigateTo: (path?: string | number) => void
+  basePath: string
+  params: Record<string, string>
+  pageComponent: any
+}
+
+export type UseModuleStorage = () => {
+  getModuleData: (key: string) => any
+  setModuleData: (key: string, value: any) => void
+  removeModuleData: (key: string) => void
+  clearModuleData: () => void
+}
+
+export interface NavigateToModuleRoute {
+  navigateTo: (path?: string | number) => void;
+  basePath: string;
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue(), dts()],
+  build: {
+    lib: {
+      entry: './index.ts',
+      name: 'CmsKit',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['vue', 'reka-ui', 'class-variance-authority'],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './'),
+      '~': path.resolve(__dirname, './'),
+    }
+  },
+})