@ng-formworks/daisyui 15.2.7

package/README.md

@@ -0,0 +1,176 @@
+# @ng-formworks/daisyui
+This module is a dependency of the [ng-formworks project][npm_core_ver] and is meant to work as a framework installation module for using DaisyUI in the forms.
+
+## Getting started
+
+If you are unfamiliar with with the ng-formworks project, it is highly recommended to 
+first have a look at the [@ng-formworks pages][npm_core_ver] for examples, demos, options and documentation.
+
+## Getting started
+
+```shell
+npm install @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/daisyui@latest
+```
+
+With YARN, run the following:
+
+```shell
+yarn add @ng-formworks/core@latest @ng-formworks/cssframework@latest @ng-formworks/daisyui@latest
+```
+
+Then import `DaisyUIFrameworkModule` in your main application module if you want to use `daisyui` UI, like this:
+
+```javascript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { DaisyUIFrameworkModule } from '@ng-formworks/daisyui';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [ AppComponent ],
+  imports: [
+    DaisyUIFrameworkModule
+  ],
+  providers: [],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```
+
+For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template:
+
+```html
+<json-schema-form
+  loadExternalAssets="true"
+  [schema]="yourJsonSchema"
+  framework="daisyui"
+  [theme]="yourTheme"
+  (onSubmit)="yourOnSubmitFn($event)">
+</json-schema-form>
+```
+
+Where `schema` is a valid JSON schema object, and `onSubmit` calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the `demo/assets/example-schemas` folder, as described above.
+
+`framework` is for the template you want to use, the default value is `no-framwork`. The possible values are:
+
+* `material-design` for  Material Design (if installed).
+* `bootstrap-3` for Bootstrap 3 (if installed).
+* `bootstrap-4` for Bootstrap 4 (if installed).
+* `bootstrap-5` for Bootstrap 5 (if installed).
+* `daisyui` for DaisyUi. 
+* `no-framework` for (plain HTML).
+
+`theme` is for the framework theme you want to use. 
+The possible values for this framework are:
+
+* `daisyui_default` for the default theme.
+* `light` for the light theme.
+* `dark` for the dark theme.
+* `cupcake` for the cupcake theme.
+* `cmyk` for the cmyk theme.
+* `pastel` for the pastel theme.
+* `daisyui_leaf` for the leaf theme.
+
+the list of available themes can also be gotten using the 
+FrameworkLibraryService(found in '@ng-formworks/core'): 
+ ```typescript
+ getFrameworkThemes()
+ ``` 
+ method 
+
+## Custom theming
+
+Custom theming can be achieved in two ways:
+
+* the simplest is to overwrite the default theme(or any other themes) with css rules:
+css changes can be made using the `data-theme` attribute selector
+so for example to change the .btn class of the default theme, you would
+include the following rule in your application's styles
+
+```css
+[data-theme="daisyui_default"] .btn {
+    border-radius: 1rem
+}
+```
+
+* the other method is to add a new theme:
+the first step will be to create the entire theme (see the specific frameworks underlying documentation for how this can be done) and have it use the `data-theme` attribute selector for example:
+
+```css
+[data-theme="daisyui_custom"] {
+    background-color: green;
+    font: 15px Arial, sans-serif;
+    .
+    .
+    .
+}
+[data-theme="daisyui_custom"] .btn {
+    border-color: coral;
+    .
+    .
+    .
+}
+
+```
+after making the css available, the theme will need to be registered using the  
+FrameworkLibraryService(found in '@ng-formworks/core'):
+for example 
+
+```typescript
+  constructor(
+    .
+    private frameworkLibrary: FrameworkLibraryService,
+    .
+    .
+  ) { 
+
+    frameworkLibrary.registerTheme({name:'daisyui_custom',text:'DaisyUi custom theme'})
+
+  }
+
+```
+
+## Using default DaisyUI css class names
+
+By default, the framework prefixes all standard DaisyUI class names with 'dui-'
+for example '.btn' will become '.dui-btn'. The standard names can be switched back without the 'dui-' prefix if need be. To switch opf the 'dui-' prefixing, the DUIOPTIONS token value needs to be provided with the classPrefix property set to false-see code snippet below. By default the classPrefix property is true. 
+
+```typescript
+
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import {DUIOPTIONS, DaisyUIFrameworkModule } from '@ng-formworks/daisyui';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [ AppComponent ],
+  imports: [
+    DaisyUIFrameworkModule
+  ],
+  providers: [
+    { provide: DUIOPTIONS, useValue: {classPrefix:false} }
+    ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+```
+
+## Code scaffolding
+
+Run `ng generate component component-name --project @ng-formworks/daisyui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project @ng-formworks/daisyui`.
+> Note: Don't forget to add `--project @ng-formworks/daisyui` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build @ng-formworks/daisyui` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test @ng-formworks/daisyui` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+[npm_core_ver]:https://www.npmjs.com/package/@ng-formworks/core

package/css_names_extractor.js

@@ -0,0 +1,133 @@
+/**
+ * aim of this script is to extract all of the css class names that are used
+ * in daisyui, it must be supplied a stylePath
+ * (for daisyui 3.7 this is typically un der ./node_modules/daisyui/dist/full.css) 
+ * and an outputFile(typically ng-formworks-daisyui/src/daisyui_class_names.css)
+ * the script will then try to enumerate all of the css class names
+ * the reason this is done is: when the tailwind cli attempts to build the 
+ * tailwind-output.scss file, it will include all of the css classes that are scanned
+ * so it should also include all of the classes that were extracted into daisyui_class_names.css
+ * if build size is large, then should maybe only use this for development
+ */
+
+const jsdom = require("jsdom");
+const { JSDOM } = jsdom;
+const path = require('path');
+const fs = require('fs').promises;
+const minimist = require('minimist');
+
+// Read command line arguments
+const args = minimist(process.argv.slice(2), {
+    boolean: ['all'],
+    string: ['stylePath', 'outputPath', 'outputFormat', 'classPrefix'],
+    alias: {
+        stylePath: 's',
+        outputPath: 'o',
+        outputFormat: 'f',
+        classPrefix: 'p'
+
+    },
+    default: {
+        outputFormat: 'css', //can be  json|css
+        outputPath: 'css_class_names.css'
+    }
+});
+
+// Check if stylePath is defined
+if (!args.stylePath) {
+    console.error('Error: stylePath is required');
+    process.exit(1);
+}
+
+
+var htmlDoc = `
+<!DOCTYPE html>
+<html><meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <head>
+    </head>
+    <body>
+    </body>
+</html>
+`
+let stylePath = args.stylePath;
+let cwd = process.cwd()
+var classes;
+fs.readFile(path.join(cwd, stylePath), { encoding: 'utf-8' }).then(readRes => {
+    let mainCss = readRes;
+
+    var dom = new JSDOM(htmlDoc, {
+        resources: "usable"
+    });
+    var doc = dom.window.document
+    var head = doc.getElementsByTagName('head')[0];
+    style = doc.createElement("style");
+    style.type = 'text/css';
+    style.innerHTML = mainCss;
+    head.appendChild(style);
+
+    classes = getClassNames(doc, args.classPrefix);
+    console.log(Object.keys(classes).length + " class names to be written");
+    let cssTxt = args.outputFormat == "json" ? JSON.stringify(classes) : classesMap2Css(classes);
+    return fs.writeFile(args.outputPath, cssTxt);
+}).then(wfres => {
+    // Object.keys(classes).forEach(cname => {
+    //     fs.write(cname + ',').then(wfres => {
+
+    //     }).catch(werr => {
+    //         console.log(werr);
+    //     })
+    // })
+}).catch(err => {
+    console.log(err);
+})
+
+
+
+//doc.styleSheets[0].cssRules[0].cssText
+
+function classesMap2Css(classMap) {
+    let cssTxt = "";
+    Object.keys(classMap).forEach(cname => {
+        cssTxt += cname + " {}"
+    })
+    return cssTxt;
+}
+
+function getClassNames(doc, prefix) {
+    var sheet, sheets = doc.styleSheets;
+    var rule, rules;
+    var classes = {};
+    var temp;
+    var identifier =
+        /(?:[A-Za-z0-9_-]|[^\0-\237]|\\(?:[^A-Fa-f0-9]|[A-Fa-f0-9]{1,6} ?))+/;
+    var classInSelector = new RegExp('\\.(' + identifier.source + ')',
+        'gm');
+    for (var i = 0, iLen = sheets.length; i < iLen; i++) {
+        sheet = sheets[i];
+        rules = sheet.cssRules;
+
+        for (var j = 0, jLen = rules.length; j < jLen; j++) {
+            rule = rules[j];
+
+            // Get the classes
+            temp = rule.cssText.match(classInSelector)
+                //rule.cssText.match(/\.\w+/g);
+
+            if (temp) {
+                let cname = temp[0];
+                if (cname.substring(1).match(/^\d/)) {
+                    cname = '\\' + cname
+                }
+                let fcname = cname;
+                if (prefix) {
+                    fcname = "." + prefix + "-" + cname.split(".")[1];
+                }
+
+                classes[fcname] = {}
+            }
+        }
+    }
+    // Return an array of the classes
+    return classes;
+
+}

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/@ng-formworks/daisyui",
+    "lib": {
+        "entryFile": "src/public-api.ts"
+    },
+    "assets": ["./assets"],
+    "allowedNonPeerDependencies": [
+        "lodash-es",
+        "@ng-formworks/core",
+        "@ng-formworks/cssframework",
+        "daisyui"
+    ]
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@ng-formworks/daisyui",
+    "version": "15.2.7",
+    "description": "Angular ng-formworks - JSON Schema Form builder using DaisyUI",
+    "author": "https://github.com/zahmo/ng-formworks/graphs/contributors",
+    "keywords": [
+        "Angular",
+        "ng",
+        "Angular15",
+        "Angular 15",
+        "Angular16",
+        "Angular 16",
+        "Angular17",
+        "Angular 17",
+        "ng15",
+        "ng16",
+        "ng17",
+        "JSON Schema",
+        "form",
+        "forms",
+        "form builder",
+        "form themes",
+        "form generator",
+        "daisyui",
+        "tailwind",
+        "tailwindcss",
+        "tailwind css",
+        "ajsf",
+        "ng-formworks",
+        "ng formworks",
+        "formworks",
+        "angular json schema form"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/zahmo/ng-formworks"
+    },
+    "bugs": {
+        "url": "https://github.com/zahmo/ng-formworks/issues"
+    },
+    "private": false,
+    "peerDependencies": {
+        "@angular/common": "^17.0.0",
+        "@angular/core": "^17.0.0"
+    },
+
+    "dependencies": {
+        "tslib": "^2.3.0",
+        "@ng-formworks/core": "~15.2.7",
+        "@ng-formworks/cssframework": "~15.2.7"
+    },
+    "devDependencies": {
+        "@types/lodash-es": "^4.17.6",
+        "daisyui": "^4.7.0",
+        "jsdom": "^16.7.0"
+    },
+    "sideEffects": false
+}