@hkdigital/lib-core 0.4.5 → 0.4.6

package/README.md

@@ -9,39 +9,120 @@ It contains common code, base components and documentation that help you with se
 
 ### Install
 
-The library can be installed as a normal NPM library.
-
+**For projects/applications:**
 ```bash
 pnpm add @hkdigital/lib-core
 ```
 
-### Peer Dependencies
-
-This library requires certain peer dependencies depending on which features you use:
-
-**For development logging:**
-```bash
-pnpm add -D pino-pretty
-```
-
-**For Vite config generators with imagetools:**
+**For other libraries:**
 ```bash
-pnpm add -D vite-imagetools
+pnpm add -D --save-peer @hkdigital/lib-core
 ```
 
-#### Tailwind
-
-Components in this package use [tailwindcss](https://tailwindcss.com/).
-
-To compile tailwind classes inside this package, you must add the package location to your tailwindcss plugin configuration.
+### Peer Dependencies
 
-```
-// tailwind.config.js
-export default {
-  content: [
-    './node_modules/@hkdigital/**/*.{html,js,svelte,ts}',
-    './src/**/*.{html,js,svelte,ts}',
-```
+Install peer dependencies:
+```bash
+# Core framework and utilities
+pnpm add @sveltejs/kit svelte svelte-preprocess runed valibot
+
+# UI components and icons
+pnpm add @steeze-ui/heroicons
+
+# Logging
+pnpm add pino pino-pretty
+
+# Linting
+pnpm add @eslint/js eslint-plugin-import
+```
+
+### Design System & Configuration
+
+This library includes a complete design system with Tailwind CSS integration. Basic setup requires:
+
+1. **Tailwind config** - Include library files in content scanning:
+   ```js
+   // tailwind.config.js
+   import { 
+     generateTailwindThemeExtensions,
+     designTokens,
+     customUtilitiesPlugin 
+   } from '@hkdigital/lib-core/design/index.js';
+
+   const themeExtensions = generateTailwindThemeExtensions(designTokens);
+
+   /** @type {import('tailwindcss').Config} */
+   export default {
+     // Include @hkdigital libraries in content so Tailwind processes
+     // their design system classes and components for proper styling
+     content: [
+       './node_modules/@hkdigital/**/*.{html,js,svelte}',
+       './src/**/*.{html,js,svelte}'
+     ],
+     theme: {
+       // Extend Tailwind's default theme using the design system tokens
+       extend: themeExtensions
+     },
+     plugins: [
+       // Generate custom utility classes like 'type-heading-h2'
+       customUtilitiesPlugin
+     ]
+   };
+   ```
+
+2. **Design tokens** - Apply CSS variables in your layout:
+   ```html
+   <!-- src/routes/+layout.svelte -->
+   <script>
+     import { designTokens, designTokensToRootCssVars } from '@hkdigital/lib-core/design/index.js';
+   </script>
+
+   <svelte:head>
+     {@html designTokensToRootCssVars(designTokens)}
+   </svelte:head>
+
+   {@render children()}
+   ```
+
+3. **Vite configuration** - Use the provided config generator:
+   ```js
+   // vite.config.js
+   import { defineConfig } from 'vitest/config';
+   import { generateViteConfig } from '@hkdigital/lib-core/config/vite.js';
+
+   export default defineConfig(
+     await generateViteConfig({
+       enableImagetools: true,
+       enableVitest: true
+     })
+   );
+   ```
+
+4. **Svelte configuration** - Configure preprocessing and useful path aliases:
+   ```js
+   // svelte.config.js
+   import { sveltePreprocess } from 'svelte-preprocess';
+   import adapter from '@sveltejs/adapter-auto';
+
+   /** @type {import('@sveltejs/kit').Config} */
+   const config = {
+     // Enable preprocessing for external CSS files in Svelte components
+     preprocess: sveltePreprocess({}),
+     kit: {
+       adapter: adapter(),
+       alias: {
+         $src: 'src',
+         $examples: 'src/routes/examples'
+       }
+     }
+   };
+
+   export default config;
+   ```
+
+For detailed setup guides see:
+- **Design system**: [src/lib/design/README.md](./src/lib/design/README.md)
+- **Vite configuration**: [src/lib/config/README.md](./src/lib/config/README.md)
 
 ### Update
 
@@ -52,40 +133,18 @@ in the '@hkdigital' namespace.
 pnpm upgrade:hk
 ```
 
-### The package.json scripts:
+### Available scripts
 
 ```bash
-pnpm add -D npm-check-updates
-pnpm add -D npm-check-updates
+pnpm run dev         # Start development server
+pnpm run build       # Build the library
+pnpm run check       # Type checking and validation
+pnpm run test        # Run unit tests
+pnpm run upgrade:hk  # Update all @hkdigital/... packages
+pnpm run upgrade:all # Update all packages
+pnpm run publish:npm # Version bump and publish to npm
 ```
 
-```js
-"scripts": {
-  "upgrade:hk": "run-s upgrade:hk:update pnpm:install",
-  "upgrade:hk:update": "ncu --dep dev,optional,peer,prod '@hkdigital/*' -u",
-  "pnpm:install": "pnpm install"
-}
-```
-
-### Vite Configuration
-
-The library provides configuration generators for Vite that include common HKdigital project settings:
-
-```javascript
-// vite.config.js
-import { defineConfig } from 'vitest/config';  
-import { generateViteConfig } from '@hkdigital/lib-core/config/vite.js';
-
-export default defineConfig(
-  await generateViteConfig({
-    enableImagetools: true,
-    enableVitest: true
-  })
-);
-```
-
-For detailed configuration options, see the [config documentation](./src/lib/config/README.md).
-
 ### Import JS, Svelte files and Typedefs
 
 Main folders in lib have an index.js, but may also have a more specific export file e.g. http.js or cache.js (@see $lib/network).
@@ -114,18 +173,6 @@ For example:
 @import '../node_modules/@hkdigital/lib-core/dist/css/utilities.css';
 ```
 
-### Enable tailwind processing
-
-Allow the tailwind CSS processor to work on the library inside node_modules
-
-```js
-// tailwind.config.js
-export default {
-  content: [
-    './node_modules/@hkdigital/**/*.{html,js,svelte,ts}',
-    './src/**/*.{html,js,svelte,ts}',
-```
-
 ## Building the library
 
 To build your library:

package/dist/config/README.md

@@ -56,51 +56,21 @@ export default defineConfig(
 );
 ```
 
-#### `generateViteDefines(options)`
-
-Generates only the define configuration (no plugins).
-
-**Options:**
-- `packageJsonPath` (string, default: `'./package.json'`) - Path to package.json
-- `customDefines` (object, default: `{}`) - Additional define values
-
-**Example:**
-```javascript
-export default defineConfig({
-  plugins: [sveltekit()],
-  define: generateViteDefines({
-    customDefines: {
-      'import.meta.env.VITE_API_URL': JSON.stringify(process.env.API_URL)
-    }
-  })
-});
-```
-
-#### `generateVitestConfig(options)`
-
-Generates only the Vitest test configuration.
-
-**Options:**
-- `additionalPatterns` (array, default: `[]`) - Additional test file patterns
-
-**Example:**
-```javascript
-export default defineConfig({
-  plugins: [sveltekit()],
-  test: generateVitestConfig({
-    additionalPatterns: ['tests/**/*.integration.js']
-  })
-});
-```
 
 ## Imagetools Configuration
 
-When `enableImagetools: true`, the following dependencies are required in your project:
+When `enableImagetools: true`, install the imagetools dependency:
 
+**For projects/applications:**
 ```bash
 pnpm add -D vite-imagetools
 ```
 
+**For other libraries:**
+```bash
+pnpm add -D --save-peer vite-imagetools
+```
+
 ### TypeScript Support
 
 For TypeScript and JavaScript projects using VS Code or other TypeScript-aware editors, add to your `app.d.ts`:

package/dist/config/vite.d.ts

@@ -1 +1 @@
-export { generateViteConfig, generateViteDefines, generateVitestConfig } from "./generators/vite.js";
+export { generateViteConfig } from "./generators/vite.js";

package/dist/config/vite.js

@@ -1,5 +1,3 @@
 export { 
-  generateViteConfig,
-  generateViteDefines,
-  generateVitestConfig
+  generateViteConfig
 } from './generators/vite.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.4.5",
+	"version": "0.4.6",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"