add compose helpers and definition exports. (#37)

* trying out some ideas

* switching branches

* working on new compose helper

* build outputs and new compose syntax

* updates to compose helpers

* move icons to compose helper

* switching branch

* compose helpers and exports for components

* fixes & updates

* fix icon loading in example

* feedback changes

* Update Readme

* update storybook imports

* feedback changes

Author: KingOfTac

build/transform-fragments.js

@@ -0,0 +1,30 @@
+/**
+ * Reduces extra spaces in HTML tagged templates.
+ *
+ * @param {string} data - the fragment value
+ * @returns string
+ */
+export function transformHTMLFragment(data) {
+    data = data.replace(/\s*([<>])\s*/g, "$1"); // remove spaces before and after angle brackets
+    return data.replace(/\s{2,}/g, " "); // Collapse all sequences to 1 space
+}
+
+/**
+* Reduces extra spaces in CSS tagged templates.
+*
+* Breakdown of this regex:
+*   (?:\s*\/\*(?:[\s\S])+?\*\/\s*)  Remove comments (non-capturing)
+*   (?:;)\s+(?=\})  Remove semicolons and spaces followed by property list end (non-capturing)
+*   \s+(?=\{)  Remove spaces before property list start (non-capturing)
+*   (?<=:)\s+  Remove spaces after property declarations (non-capturing)
+*   \s*([{};,])\s*  Remove extra spaces before and after braces, semicolons, and commas (captures)
+*
+* @param {string} data - the fragment value
+* @returns string
+*/
+export function transformCSSFragment(data) {
+    return data.replace(
+        /(?:\s*\/\*(?:[\s\S])+?\*\/\s*)|(?:;)\s+(?=\})|\s+(?=\{)|(?<=:)\s+|\s*([{};,])\s*/g,
+        "$1"
+    );
+}

examples/use-adaptive-components/package.json

@@ -24,9 +24,10 @@
         "start": "vite --open"
     },
     "dependencies": {
-        "@adaptive-web/adaptive-web-components": "^0.0.1"
+        "@adaptive-web/adaptive-web-components": "0.1.0"
     },
     "devDependencies": {
+        "vite-plugin-svgo": "^1.2.0",
         "rimraf": "^3.0.2",
         "typescript": "^4.7.0",
         "vite": "^4.1.1"

examples/use-adaptive-components/src/index.ts

@@ -1,21 +1,20 @@
 // All components that are used in html must be defined.
-import AWC, {
-    AvatarDefinition,
-    ButtonDefinition,
-    CardDefinition,
-    RadioDefinition,
-    RadioGroupDefinition,
-    SwitchDefinition,
-    TextFieldDefinition
-} from "@adaptive-web/adaptive-web-components";
-AWC.defineComponents({
-    AvatarDefinition,
-    ButtonDefinition,
-    CardDefinition,
-    RadioDefinition,
-    RadioGroupDefinition,
-    SwitchDefinition,
-    // TextFieldDefinition // Uncomment to define the `adaptive-text-field` element.
+import { AdaptiveDesignSystem } from '@adaptive-web/adaptive-web-components';
+import { avatarDefinition } from "@adaptive-web/adaptive-web-components/avatar";
+import { buttonDefinition } from "@adaptive-web/adaptive-web-components/button";
+import { cardDefinition } from "@adaptive-web/adaptive-web-components/card";
+import { radioDefinition } from "@adaptive-web/adaptive-web-components/radio";
+import { radioGroupDefinition } from "@adaptive-web/adaptive-web-components/radio-group";
+import { switchDefinition } from "@adaptive-web/adaptive-web-components/switch";
+import { textFieldDefinition } from "@adaptive-web/adaptive-web-components/text-field";
+AdaptiveDesignSystem.defineComponents({
+    avatarDefinition,
+    buttonDefinition,
+    cardDefinition,
+    radioDefinition,
+    radioGroupDefinition,
+    switchDefinition,
+    // textFieldDefinition // Uncomment to define the `adaptive-text-field` element.
 });
 
 import { accentBaseColor, fillColor, LayerBaseLuminance, layerFillBaseLuminance, layerFillFixedBase } from "@adaptive-web/adaptive-ui";

examples/use-adaptive-components/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import svg from 'vite-plugin-svgo'
+
+export default defineConfig({
+	plugins: [svg()]
+})