@exakt/ui 0.0.1

package/README.md

@@ -0,0 +1,93 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: exakt
+- Package name: exakt-ui
+- Description: My new Nuxt module
+-->
+
+# exakt
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+a simple nuxt ui library focused on doing as much as possible with css
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- 💇‍♀️ &nbsp; mostly uses css to do things
+- 👜 &nbsp; relatively lightweight
+- 👁️‍🗨️ &nbsp; customizable
+
+## Quick Setup
+
+1. Add `exakt-ui` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D exakt-ui
+
+# Using yarn
+yarn add --dev exakt-ui
+
+# Using npm
+npm install --save-dev exakt-ui
+```
+
+2. Add `exakt-ui` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    'exakt-ui'
+  ]
+})
+```
+
+That's it! You can now use exakt in your Nuxt app ✨
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Run Vitest
+npm run test
+npm run test:watch
+
+# Release new version
+npm run release
+```
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/exakt-ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/exakt-ui
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/exakt-ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/exakt-ui
+
+[license-src]: https://img.shields.io/npm/l/exakt-ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/exakt-ui
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,21 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    colors: {
+        primary?: string;
+        dark?: string;
+        light?: string;
+        red?: string;
+        blue?: string;
+    };
+    breakpoints: {
+        md?: string;
+        l?: string;
+        xl?: string;
+    };
+    borderRadius: string;
+    font: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,5 @@
+{
+  "name": "exakt-ui",
+  "configKey": "exakt",
+  "version": "0.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,64 @@
+import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addComponentsDir } from '@nuxt/kit';
+import fs from 'fs';
+
+const defaults = {
+  colors: {
+    primary: "#008dff",
+    dark: "#212121",
+    light: "#f5f5f5",
+    red: "#f44336",
+    blue: "#2196f3"
+  },
+  breakpoints: {
+    md: "33em",
+    l: "48em",
+    xl: "60em"
+  },
+  borderRadius: "8px",
+  font: "Roboto, sans-serif"
+};
+const module = defineNuxtModule({
+  meta: {
+    name: "exakt-ui",
+    configKey: "exakt"
+  },
+  // Default configuration options of the Nuxt module
+  defaults,
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addPlugin(resolver.resolve("./runtime/plugin"));
+    await fs.promises.mkdir("node_modules/.cache/exakt-ui", {
+      recursive: true
+    });
+    let variables = "";
+    for (const [key, value] of Object.entries(options.colors)) {
+      variables += `$root-${key}: ${value}; `;
+    }
+    for (const [key, value] of Object.entries(options.breakpoints)) {
+      variables += `$${key}-screen-breakpoint: ${value}; `;
+    }
+    variables += `$font-family: ${options.font}; `;
+    variables += `$rounded-border-radius: ${options.borderRadius}; `;
+    await fs.promises.writeFile(
+      "node_modules/.cache/exakt-ui/variables.scss",
+      new Uint8Array(Buffer.from(variables))
+    );
+    extendViteConfig((config) => {
+      Object.assign(config, {
+        css: {
+          preprocessorOptions: {
+            scss: {
+              additionalData: `@use "sass:color"; @import "${resolver.resolve(
+                "../node_modules/.cache/exakt-ui/variables.scss"
+              )}";  `
+            }
+          }
+        }
+      });
+    });
+    nuxt.options.css.push(resolver.resolve("./css/main.scss"));
+    addComponentsDir({ path: resolver.resolve("./components") });
+  }
+});
+
+export { module as default };

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.mjs

@@ -0,0 +1,22 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((nuxtApp) => {
+  console.log("Plugin injected by exakt-ui!");
+  return {
+    provide: {
+      exakt: {
+        parseColor: (p, suffix = "") => {
+          let result = null;
+          if (p === "primary") {
+            result = "var(--e-color-primary";
+          } else if (p === "elev") {
+            result = "var(--e-color-elev";
+          }
+          if (result) {
+            return result.concat(suffix ? "-".concat(suffix) : "", ")");
+          }
+          return p;
+        }
+      }
+    }
+  };
+});

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+
+import { ModuleOptions } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['exakt']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['exakt']?: ModuleOptions }
+}
+
+
+export { ModuleOptions, default } from './module'

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@exakt/ui",
+  "version": "0.0.1",
+  "description": "A UI library for Nuxt.js",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@mdi/js": "^7.1.96",
+    "@nuxt/kit": "^3.2.3",
+    "blurhash": "^2.0.5",
+    "lodash": "^4.17.21",
+    "sass": "^1.58.3"
+  },
+  "devDependencies": {
+    "@nuxt/eslint-config": "^0.1.1",
+    "@nuxt/module-builder": "^0.2.1",
+    "@nuxt/schema": "^3.2.3",
+    "@nuxt/test-utils": "^3.2.3",
+    "@types/lodash": "^4.14.191",
+    "changelogen": "^0.5.1",
+    "eslint": "^8.35.0",
+    "nuxt": "^3.2.3",
+    "vitest": "^0.29.2"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wd-4000/exakt.git"
+  },
+  "keywords": [
+    "UI",
+    "components",
+    "Nuxt",
+    "CSS",
+    "epic"
+  ],
+  "author": "wd-4000",
+  "bugs": {
+    "url": "https://github.com/wd-4000/exakt/issues"
+  },
+  "homepage": "https://github.com/wd-4000/exakt#readme"
+}