@naptics/vue-collection 1.0.0-beta.1 → 1.0.0-beta.2

package/.gitlab-ci.yml

@@ -1,57 +0,0 @@
-cache:
-    paths:
-        - node_modules/
-
-default: 
-    image: node:18-alpine3.15
-
-stages: 
-    - prebuild
-    - build
-    - deploy
-
-workflow: 
-    rules: 
-        - if: $CI_PIPELINE_SOURCE == "merge_request_event"
-        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
-
-prebuild: 
-    stage: prebuild
-    before_script:
-        - npm ci
-    script: 
-        - npm run type-check
-        - npm run lint
-        - npm run test
-
-
-build-pages: 
-    stage: build
-    before_script: 
-        - npm ci
-    script: 
-        - export VITE_BASE_PATH="${CI_PROJECT_PATH#$CI_PROJECT_ROOT_NAMESPACE}/"
-        - npm run build
-    artifacts:
-        paths:
-            - dist/
-        expire_in: 1 day
-
-pages:
-    stage: deploy
-    image: busybox:latest
-    environment:
-        name: Showroom
-        url: $CI_PAGES_URL
-    script: 
-        - rm -rf public
-        - mkdir public
-        - mv dist/* public
-    artifacts: 
-        paths: 
-            - public
-    rules: 
-        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
-
-
-    

package/.nvmrc

@@ -1 +0,0 @@
-24

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-    "trailingComma": "es5",
-    "tabWidth": 4,
-    "semi": false,
-    "singleQuote": true,
-    "printWidth": 120,
-    "arrowParens": "avoid"
-}

package/.vscode/extensions.json

@@ -1,10 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss"
-  ],
-  "unwantedRecommendations": ["octref.vetur"]
-}

package/.vscode/launch.json

@@ -1,23 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome Canary",
-            "url": "http://localhost:5173",
-            "webRoot": "${workspaceFolder}",
-            "runtimeExecutable": "canary"
-        },
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome (stable)",
-            "url": "http://localhost:5173",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-    "eslint.enable": true,
-    "prettier.enable": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "eslint.validate": ["vue", "html", "javascript", "typescript", "javascriptreact", "typescriptreact"],
-    "css.lint.unknownAtRules": "ignore",
-    "[yaml]": {
-        "editor.insertSpaces": true,
-        "editor.tabSize": 2,
-        "editor.autoIndent": "advanced"
-    }
-}

package/babel.config.json

@@ -1,3 +0,0 @@
-{
-    "plugins": ["@vue/babel-plugin-jsx"]
-}

package/env.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="vite/client" />
-
-import type { VNode } from 'vue'
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            [elem: string]: any
-        }
-        type Element = VNode
-    }
-}
-
-export {}

package/eslint.config.cjs

@@ -1,27 +0,0 @@
-const pluginVue = require('eslint-plugin-vue')
-const { defineConfigWithVueTs, vueTsConfigs } = require('@vue/eslint-config-typescript')
-const js = require('@eslint/js')
-const prettierConfig = require('@vue/eslint-config-prettier')
-
-module.exports = defineConfigWithVueTs(
-    {
-        ignores: ['node_modules/**', 'dist/**', 'dist-ssr/**', 'lib/**', 'coverage/**', 'scripts/*.js'],
-    },
-    js.configs.recommended,
-    pluginVue.configs['flat/essential'],
-    vueTsConfigs.recommended,
-    prettierConfig,
-    {
-        files: ['**/*.config.js', '**/*.config.cjs'],
-        languageOptions: {
-            globals: {
-                require: 'readonly',
-                module: 'readonly',
-                __dirname: 'readonly',
-            },
-        },
-        rules: {
-            '@typescript-eslint/no-require-imports': 'off',
-        },
-    }
-)

package/index.html

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

package/postcss.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    plugins: {},
-}

package/scripts/build-lib.sh

@@ -1,52 +0,0 @@
-#!/usr/bin/env bash
-# Exit on error
-set -e
-# Remove lib folder
-echo "Removing ./lib folder."
-rm -rf ./lib 
-
-# Compile typescript code to javascript code
-echo "Compiling typescript code with tsconfig.lib.json."
-tsc --project tsconfig.lib.json 
-
-# Move lib two directories up
-echo "Cleaning up ./lib directory."
-if [ ! -d "./lib/src/lib" ]; then
-    echo "Error: ./lib/src/lib directory not found after compilation"
-    exit 1
-fi
-mv ./lib/src/lib/* ./lib 
-
-# Remove unused files
-rm -rf ./lib/src
-rm -f ./lib/tsconfig.lib.tsbuildinfo 
-
-# Move all css files from components to lib
-echo "Copying .css files from the components folder."
-if ls ./src/lib/components/*.css 1> /dev/null 2>&1; then
-    cp ./src/lib/components/*.css ./lib/components
-else
-    echo "Warning: No CSS files found in ./src/lib/components/"
-fi
-
-# Transpile jsx files to js with babel
-echo "Using Babel to transpile jsx."
-BABEL_OUTPUT=$(./node_modules/.bin/babel lib --out-dir lib 2>&1)
-BABEL_EXIT_CODE=$?
-echo "$BABEL_OUTPUT"
-
-# Check if Babel command succeeded
-if [ $BABEL_EXIT_CODE -ne 0 ]; then
-    echo "Error: Babel transpilation failed with exit code $BABEL_EXIT_CODE"
-    exit $BABEL_EXIT_CODE
-fi
-
-# Optionally, check if any .js files were produced
-if ! find ./lib -name "*.js" -type f | grep -q .; then
-    echo "Error: No .js files produced by Babel transpilation"
-    exit 1
-fi
-
-find ./lib -name "*.jsx" -type f -delete
-
-echo "Build completed successfully!"

package/scripts/sync-node-types.js

@@ -1,70 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs')
-const path = require('path')
-
-const rootDir = path.join(__dirname, '..')
-const nvmrcPath = path.join(rootDir, '.nvmrc')
-const packageJsonPath = path.join(rootDir, 'package.json')
-
-// Read .nvmrc
-if (!fs.existsSync(nvmrcPath)) {
-    console.error('Error: .nvmrc file not found')
-    process.exit(1)
-}
-
-const nvmrcContent = fs.readFileSync(nvmrcPath, 'utf8').trim()
-
-// Extract major version from .nvmrc
-// Supports formats like: "24", "v24", "24.12.0", "lts/iron", etc.
-let nodeMajorVersion
-
-if (nvmrcContent.startsWith('lts/')) {
-    // Map LTS names to major versions
-    const ltsMap = {
-        krypton: '24',
-        jod: '22',
-        iron: '20',
-        hydrogen: '18',
-        gallium: '16',
-        fermium: '14',
-    }
-    const ltsName = nvmrcContent.replace('lts/', '').toLowerCase()
-    nodeMajorVersion = ltsMap[ltsName]
-    if (!nodeMajorVersion) {
-        console.error(`Error: Unknown LTS name "${ltsName}"`)
-        process.exit(1)
-    }
-} else {
-    // Extract numeric version
-    const versionMatch = nvmrcContent.match(/^v?(\d+)/)
-    if (!versionMatch) {
-        console.error(`Error: Could not extract Node version from .nvmrc: "${nvmrcContent}"`)
-        process.exit(1)
-    }
-    nodeMajorVersion = versionMatch[1]
-}
-
-console.log(`Node version from .nvmrc: ${nodeMajorVersion}`)
-
-// Read package.json
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
-
-// Check current @types/node version
-const currentTypesNode = packageJson.devDependencies?.['@types/node']
-const desiredTypesNode = `^${nodeMajorVersion}`
-
-if (currentTypesNode === desiredTypesNode) {
-    console.log(`✓ @types/node is already set to ${desiredTypesNode}`)
-    process.exit(0)
-}
-
-console.log(`Updating @types/node from ${currentTypesNode} to ${desiredTypesNode}`)
-
-// Update package.json
-packageJson.devDependencies['@types/node'] = desiredTypesNode
-
-// Write back to package.json
-fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf8')
-
-console.log('✓ package.json updated. Run `npm install` to install the correct @types/node version.')

package/src/demo/App.css

@@ -1,53 +0,0 @@
-@import "tailwindcss";
-@plugin "@tailwindcss/forms";
-
-@theme {
-    --color-default-50: var(--color-slate-50);
-    --color-default-100: var(--color-slate-100);
-    --color-default-200: var(--color-slate-200);
-    --color-default-300: var(--color-slate-300);
-    --color-default-400: var(--color-slate-400);
-    --color-default-500: var(--color-slate-500);
-    --color-default-600: var(--color-slate-600);
-    --color-default-700: var(--color-slate-700);
-    --color-default-800: var(--color-slate-800);
-    --color-default-900: var(--color-slate-900);
-    --color-default-950: var(--color-slate-950);
-
-    --color-primary-50: var(--color-violet-50);
-    --color-primary-100: var(--color-violet-100);
-    --color-primary-200: var(--color-violet-200);
-    --color-primary-300: var(--color-violet-300);
-    --color-primary-400: var(--color-violet-400);
-    --color-primary-500: var(--color-violet-500);
-    --color-primary-600: var(--color-violet-600);
-    --color-primary-700: var(--color-violet-700);
-    --color-primary-800: var(--color-violet-800);
-    --color-primary-900: var(--color-violet-900);
-    --color-primary-950: var(--color-violet-950);
-
-    --color-secondary-50: var(--color-fuchsia-50);
-    --color-secondary-100: var(--color-fuchsia-100);
-    --color-secondary-200: var(--color-fuchsia-200);
-    --color-secondary-300: var(--color-fuchsia-300);
-    --color-secondary-400: var(--color-fuchsia-400);
-    --color-secondary-500: var(--color-fuchsia-500);
-    --color-secondary-600: var(--color-fuchsia-600);
-    --color-secondary-700: var(--color-fuchsia-700);
-    --color-secondary-800: var(--color-fuchsia-800);
-    --color-secondary-900: var(--color-fuchsia-900);
-    --color-secondary-950: var(--color-fuchsia-950);
-}
-
-/* Safelist dynamic color/size classes used in components */
-@source inline("{bg,text}-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
-@source inline("hover:{bg,text}-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
-@source inline("ring-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
-@source inline("focus-visible:ring-{default,primary,secondary,green,red,yellow,blue}-{50,100,200,300,400,500,600,700,800,900}");
-@source inline("{w,h}-{1,2,3,4,5,6,7,8,9,10,11,12,14,16,18,20}");
-
-@layer base {
-    body {
-        @apply text-default-900;
-    }
-}

package/src/demo/App.tsx

@@ -1,5 +0,0 @@
-import { createView } from '@/lib/utils/component'
-import { RouterView } from 'vue-router'
-import './App.css'
-
-export default createView('App', () => () => <RouterView />)

package/src/demo/components/ColorGrid.tsx

@@ -1,26 +0,0 @@
-import { createComponent } from '@/lib/utils/component'
-import { computed, type PropType } from 'vue'
-import ComponentGrid, { componentGridProps } from '@/demo/components/ComponentGrid'
-
-export const colorGridProps = {
-    ...componentGridProps,
-    colors: {
-        type: Number,
-        default: 6,
-    },
-    item: Function as PropType<(color: string, index: number) => JSX.Element>,
-} as const
-
-export default createComponent('ColorGrid', colorGridProps, props => {
-    const colors = ['primary', 'secondary', 'green', 'red', 'yellow', 'default']
-
-    const selectedColors = computed(() => colors.slice(0, props.colors))
-
-    return () => (
-        <ComponentGrid cols={props.cols}>
-            {selectedColors.value.map((color, index) => (
-                <div class="flex">{props.item?.(color, index)}</div>
-            ))}
-        </ComponentGrid>
-    )
-})

package/src/demo/components/ComponentGrid.tsx

@@ -1,26 +0,0 @@
-import { createComponent } from '@/lib/utils/component'
-import { computed, type PropType } from 'vue'
-
-export const componentGridProps = {
-    cols: {
-        type: Number as PropType<2 | 4 | 6 | 8>,
-        default: 6,
-    },
-} as const
-
-export default createComponent('ComponentGrid', componentGridProps, (props, { slots }) => {
-    const classes = computed(() => {
-        switch (props.cols) {
-            case 2:
-                return 'grid-cols-1 sm:grid-cols-2'
-            case 4:
-                return 'grid-cols-2 sm:grid-cols-4'
-            case 8:
-                return 'grid-cols-4 sm:grid-cols-8'
-            default:
-                return 'grid-cols-3 sm:grid-cols-6'
-        }
-    })
-
-    return () => <div class={`grid gap-4 ${classes.value}`}>{slots.default?.()}</div>
-})

package/src/demo/components/ComponentSection.tsx

@@ -1,30 +0,0 @@
-import { createComponent } from '@/lib/utils/component'
-import { LinkIcon } from '@heroicons/vue/24/solid'
-import { RouterLink } from 'vue-router'
-
-export const componentSectionProps = {
-    id: String,
-    title: String,
-    subtitle: String,
-} as const
-
-export default createComponent('ComponentSection', componentSectionProps, (props, { slots }) => {
-    return () => (
-        <div class="border-b-2 border-default-200" id={props.id}>
-            <div>
-                <div class="px-8 py-10 max-w-4xl mx-auto">
-                    <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-hidden">
-                        <h2 class="font-bold text-4xl mb-2 flex items-center space-x-2 ">
-                            <span>{props.title}</span>
-                            <LinkIcon class="h-8 w-8 text-default-900 opacity-30 hidden group-hover:block group-focus-visible:block" />
-                        </h2>
-                    </RouterLink>
-                    <p class="text-default-500 text-xl font-light">{props.subtitle}</p>
-                </div>
-            </div>
-            <div class="bg-default-50">
-                <div class="px-8 pt-10 pb-20 space-y-8 max-w-4xl mx-auto">{slots.default?.()}</div>
-            </div>
-        </div>
-    )
-})

package/src/demo/components/VariantSection.tsx

@@ -1,18 +0,0 @@
-import { createComponent } from '@/lib/utils/component'
-
-export const variantSectionProps = {
-    title: String,
-    subtitle: String,
-} as const
-
-export default createComponent('VariantSection', variantSectionProps, (props, { slots }) => {
-    return () => (
-        <div>
-            <div class="mb-6">
-                <h3 class="text-lg font-medium text-default-700"> {props.title} </h3>
-                {props.subtitle && <p class="text-default-500 text-sm"> {props.subtitle} </p>}
-            </div>
-            <div class="border-2 border-dashed rounded-lg p-8 border-default-200 bg-white">{slots.default?.()}</div>
-        </div>
-    )
-})

package/src/demo/i18n/de.ts

@@ -1,7 +0,0 @@
-import vueCollection from '@/lib/i18n/de/vue-collection.json'
-
-const de = {
-    ['vue-collection']: vueCollection,
-}
-
-export default de

package/src/demo/i18n/en.ts

@@ -1,7 +0,0 @@
-import vueCollection from '@/lib/i18n/en/vue-collection.json'
-
-const en = {
-    ['vue-collection']: vueCollection,
-}
-
-export default en

package/src/demo/i18n/index.ts

@@ -1,24 +0,0 @@
-import en from './en'
-import de from './de'
-import { createI18n } from 'vue-i18n'
-import { registerTranslationProvider } from '@/lib/i18n'
-
-export const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-        en,
-        de,
-    },
-})
-
-registerTranslationProvider({
-    trsl(key, params) {
-        return i18n.global.t(key, params == null ? {} : params)
-    },
-    trslc(key, count, params) {
-        const newCount = count ?? 0
-        const newParams = { n: newCount, ...params }
-        return i18n.global.t(key, newParams, { plural: newCount })
-    },
-})

package/src/demo/main.ts

@@ -1,13 +0,0 @@
-import { createApp } from 'vue'
-import App from './App'
-import router from './router'
-import { addDocumentResizeEventListener } from '@/lib/utils/breakpoints'
-import { i18n } from './i18n'
-
-addDocumentResizeEventListener()
-
-const app = createApp(App)
-app.use(router)
-app.use(i18n)
-
-app.mount('#app')

package/src/demo/router/index.ts

@@ -1,21 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-const router = createRouter({
-    history: createWebHistory(import.meta.env.BASE_URL),
-    scrollBehavior: to => {
-        if (to.hash) {
-            return {
-                el: to.hash,
-            }
-        }
-    },
-    routes: [
-        {
-            path: '/',
-            name: 'home',
-            component: () => import('../views/HomeView'),
-        },
-    ],
-})
-
-export default router

package/src/demo/views/HomeView.tsx

@@ -1,94 +0,0 @@
-import ModalView from './presentation/ModalView'
-import { createView } from '@/lib/utils/component'
-import AlertView from './presentation/AlertView'
-import BadgeView from './presentation/BadgeView'
-import ButtonView from './presentation/ButtonView'
-import CheckboxView from './presentation/CheckboxView'
-import IconButtonView from './presentation/IconButtonView'
-import DropdownView from './presentation/DropdownView'
-import IconCircleView from './presentation/IconCircleView'
-import InputView from './presentation/InputView'
-import ListView from './presentation/ListView'
-import LoadingIndicatorView from './presentation/LoadingIndicatorView'
-import PaginationView from './presentation/PaginationView'
-import SearchbarView from './presentation/SearchbarView'
-import TableView from './presentation/TableView'
-import NavigationView from './NavigationView'
-import { RouterLink } from 'vue-router'
-import { ChevronDoubleUpIcon } from '@heroicons/vue/24/solid'
-import { ref, Transition } from 'vue'
-import NBadge from '@/lib/components/NBadge'
-import LinkView from './presentation/LinkView'
-import BreadcrumbView from './presentation/BreadcrumbView'
-import TooltipView from './presentation/TooltipView'
-import DropzoneView from './presentation/DropzoneView'
-
-export default createView('HomeView', () => {
-    const showButton = ref(false)
-    window.onscroll = () => {
-        const treshhold = 1000
-        showButton.value = document.documentElement.scrollTop > treshhold || document.body.scrollTop > treshhold
-    }
-
-    return () => (
-        <div>
-            <div class="bg-gradient-to-r from-primary-500/70 to-white">
-                <div
-                    class="bg-gradient-to-b from-default-300/80 to-default-50 border-b-2 border-default-200 z-50"
-                    id="overview"
-                >
-                    <div class="px-8 py-20 min-h-screen m-auto text-center max-w-4xl flex items-center justify-center flex-col">
-                        <h1 class="text-6xl font-semibold mb-8">Vue Collection</h1>
-                        <p class="text-3xl font-light text-default-500">
-                            Styled and fully functional components created by naptics.
-                        </p>
-                        <NavigationView class="mt-16" />
-                    </div>
-                </div>
-            </div>
-
-            <div class="space-y-10">
-                <AlertView />
-                <ButtonView />
-                <IconButtonView />
-                <LinkView />
-                <IconCircleView />
-                <BadgeView />
-                <BreadcrumbView />
-                <CheckboxView />
-                <DropdownView />
-                <InputView />
-                <SearchbarView />
-                <LoadingIndicatorView />
-                <ModalView />
-                <ListView />
-                <TableView />
-                <TooltipView />
-                <PaginationView />
-                <DropzoneView />
-            </div>
-
-            <Transition
-                enterActiveClass="transition duration-400"
-                enterFromClass="opacity-0"
-                enterToClass="opacity-100"
-                leaveActiveClass="transition duration-400"
-                leaveFromClass="opacity-100"
-                leaveToClass="opacity-0"
-            >
-                {showButton.value && (
-                    <div class="fixed z-20 bottom-4 right-4">
-                        <RouterLink to={{ hash: '#overview' }}>
-                            <NBadge textSize="text-base" allCaps={false}>
-                                <div class="flex items-center space-x-2">
-                                    <span>Overview</span>
-                                    <ChevronDoubleUpIcon class="h-5 w-5" />
-                                </div>
-                            </NBadge>
-                        </RouterLink>
-                    </div>
-                )}
-            </Transition>
-        </div>
-    )
-})