rw-elements-tools 1.2.0

package/controls/typography/HeadingColor.js

@@ -0,0 +1,112 @@
+const HeadingColor = [
+  {
+    globalControl: "ControlType",
+    id: "{{value}}Bg",
+    segmented: {
+      default: "static",
+      items: [
+        {
+          title: "Static",
+          value: "static",
+        },
+        {
+          title: "Hover",
+          value: "hover",
+        },
+      ],
+    },
+  },
+  {
+    title: "Style",
+    id: "globalBgType",
+    responsive: false,
+    segmented: {
+      default: "color",
+      items: [
+        {
+          icon: "paintbrush",
+          value: "color",
+        },
+        {
+          icon: "photo",
+          value: "image",
+        },
+        {
+          icon: "swatchpalette",
+          value: "gradient",
+        },
+      ],
+    },
+  },
+  {
+    visible: "globalControlTypeBg != 'none'",
+    divider: {},
+  },
+  {
+    visible: "globalControlTypeBg == 'hover'",
+    globalControl: "HoverGroup",
+    id: "{{value}}Bg",
+},
+  {
+    visible: "globalControlTypeBg != 'none' && globalControlTypeBg != 'static'",
+    title: "State",
+    id: "globalBgState",
+    responsive: false,
+    segmented: {
+      default: "start",
+      items: [
+        {
+          title: "Start",
+          value: "start",
+        },
+        {
+          title: "End",
+          value: "end",
+        },
+      ]
+    }
+  },
+  {
+    visible: "globalControlTypeBg == 'static' && globalBgType == 'color' || (globalControlTypeBg == 'hover' && globalBgState == 'start' && globalBgType == 'color')",
+    globalControl: "TextColor",
+    default: {
+      name: "text",
+      brightness: 50,
+    }
+  },
+  {
+    visible: "globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'color'",
+    title: "Color",
+    id: "globalTextColorHover",
+    format: "text-{{value}}",
+    themeColor: {
+      default: {
+        name: "text",
+        brightness: 200
+      }
+    },
+  },
+  {
+    visible: "globalControlTypeBg == 'hover' && globalBgState == 'end' && globalBgType == 'color'",
+    title: "Opacity",
+    id: "globalTextColorOpacityHover",
+    responsive: false,
+    format: "text-opacity-[{{value}}%] dark:text-opacity-[{{value}}%]",
+    slider: {
+      default: 100,
+      min: 0,
+      max: 100,
+      round: true,
+      snap: true,
+      units: "%"
+    },
+  },
+  {
+    globalControl: "Background_Gradient",
+  },
+  {
+    globalControl: "Background_Image",
+  },
+];
+
+export default HeadingColor;

package/controls/typography/TextColor.js

@@ -0,0 +1,51 @@
+const TextColor = [
+  {
+    title: "Color",
+    id: "globalTextColor",
+    format: "text-{{value}}",
+    themeColor: {
+      default: {
+        name: "text",
+        brightness: 100,
+      },
+    },
+  },
+  {
+    title: "Opacity",
+    id: "globalTextColorOpacity",
+    responsive: false,
+    format: "text-opacity-[{{value}}%] dark:text-opacity-[{{value}}%]",
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+];
+
+export const TextColorHover = [
+  {
+    title: "Color",
+    id: "globalTextColorHover",
+    format: "hover:text-{{value}}",
+    themeColor: {
+      default: {
+        name: "text",
+        brightness: 300,
+      },
+    },
+  },
+  {
+    title: "Opacity",
+    id: "globalTextColorOpacityHover",
+    responsive: false,
+    format: "hover:text-opacity-[{{value}}%] dark:hover:text-opacity-[{{value}}%]",
+    slider: {
+      default: 100,
+      use: "Slider",
+      units: "%",
+    },
+  },
+];
+
+export default TextColor;

package/controls/typography/TextDecoration.js

@@ -0,0 +1,99 @@
+const TextDecoration = [
+    {
+        title: "Underline",
+        id: "textDecoration",
+        select: {
+            default: "no-underline",
+            items: [
+                {
+                    value: "no-underline",
+                    title: "No Underline",
+                },
+                {
+                    value: "underline",
+                    title: "Underline",
+                },
+                {
+                    value: "overline",
+                    title: "Overline",
+                },
+                {
+                    value: "line-through",
+                    title: "Line Through",
+                },
+            ],
+        },
+    },
+    {
+        visible: "textDecoration != 'no-underline'",
+        title: "Thickness",
+        id: "textDecorationThickness",
+        format: "decoration-[{{value}}px]",
+        slider: {
+            default: 1,
+            use: "Slider",
+            max: 30,
+        },
+    },
+    {
+        visible: "textDecoration == 'underline'",
+        information: {},
+        title: "Thickness is currently applied in preview only.",
+    },
+    {
+        visible: "textDecoration == 'underline'",
+        title: "Offset",
+        id: "textDecorationOffset",
+        format: "underline-offset-[{{value}}px]",
+        slider: {
+            default: 1,
+            use: "Slider",
+            max: 30,
+        },
+    },
+    {
+        visible: "textDecoration != 'no-underline'",
+        title: "Style",
+        id: "textDecorationStyle",
+        format: "decoration-{{value}}",
+        select: {
+            default: "solid",
+            items: [
+                {
+                    value: "solid",
+                    title: "Solid",
+                },
+                {
+                    value: "double",
+                    title: "Double",
+                },
+                {
+                    value: "dotted",
+                    title: "Dotted",
+                },
+                {
+                    value: "dashed",
+                    title: "Dashed",
+                },
+                {
+                    value: "wavy",
+                    title: "Wavy",
+                },
+            ],
+        },
+    },
+    {
+        visible: "textDecoration != 'no-underline'",
+        title: "Color",
+        id: "textDecorationColor",
+        format: "decoration-{{value}}",
+        themeColor: {
+            default: {
+                name: "gray",
+                brightness: 800,
+            },
+        },
+    },
+];
+
+export default TextDecoration;

package/controls/typography/TextFontsAndTextStyles.js

@@ -0,0 +1,243 @@
+const TextFontsAndTextStyles = [
+    {
+        title: "Font",
+        id: "globalTextFontFamily",
+        themeFont: {
+            default: {
+                base: {
+                    name: "body",
+                },
+            },
+        },
+    },
+    {
+        title: "Size",
+        id: "globalTextFontSize",
+        themeTextStyle: {
+            default: {
+                base: {
+                    name: "base",
+                },
+            },
+        },
+    },
+    {
+        title: "Weight",
+        id: "globalTextFontWeight",
+        format: "font-[{{value}}]",
+        slider: {
+            default: "400",
+            items: [
+                { value: "100", title: "Thin" },
+                { value: "200", title: "Extra Light" },
+                { value: "300", title: "Light" },
+                { value: "400", title: "Normal" },
+                { value: "500", title: "Medium" },
+                { value: "600", title: "Semi Bold" },
+                { value: "700", title: "Bold" },
+                { value: "800", title: "Extra Bold" },
+                { value: "900", title: "Black" },
+            ],
+        },
+    },
+    {
+        title: "Spacing",
+        id: "globalTextLetterSpacing",
+        format: "tracking-{{value}}",
+        slider: {
+            default: "normal",
+            items: [
+                { value: "tighter", title: "Tighter" },
+                { value: "tight", title: "Tight" },
+                { value: "normal", title: "Normal" },
+                { value: "wide", title: "Wide" },
+                { value: "wider", title: "Wider" },
+                { value: "widest", title: "Widest" },
+            ],
+        },
+    },
+    {
+        title: "Line Height",
+        id: "globalTextLineHeight",
+        format: "leading-{{value}}",
+        slider: {
+            default: "normal",
+            items: [
+                { value: "none", title: "None" },
+                { value: "tight", title: "Tight" },
+                { value: "snug", title: "Snug" },
+                { value: "normal", title: "Normal" },
+                { value: "relaxed", title: "Relaxed" },
+                { value: "loose", title: "Loose" },
+            ],
+        },
+    },
+    {
+        divider: {},
+    },
+    {
+        title: "Italic",
+        id: "globalTextItalic",
+        switch: {
+            falseValue: "not-italic",
+            trueValue: "italic",
+            default: false,
+        },
+    },
+    {
+        title: "Text Shadow",
+        id: "globalTextTextShadow",
+        disabled: {
+            id: "bgType",
+            value: "image",
+        },
+        themeShadow: {
+            mode: "text",
+            default: {
+                name: "none",
+            },
+        },
+    },
+    {
+        title: "Case",
+        id: "globalTextTextTransform",
+        select: {
+            default: "normal-case",
+            items: [
+                {
+                    value: "normal-case",
+                    title: "None",
+                },
+                {
+                    value: "uppercase",
+                    title: "Uppercase",
+                },
+                {
+                    value: "lowercase",
+                    title: "Lowercase",
+                },
+                {
+                    value: "capitalize",
+                    title: "Capitalize",
+                },
+                {
+                    title: "Small Caps",
+                    value: "[font-variant-caps:small-caps]",
+                },
+            ],
+        },
+    },
+    {
+        title: "Whitespace",
+        id: "globalTextWhiteSpace",
+        format: "whitespace-{{value}}",
+        select: {
+            default: "none",
+            items: [
+                { value: "none", title: "None" },
+                { value: "normal", title: "Normal" },
+                { value: "nowrap", title: "Nowrap" },
+                { value: "pre", title: "Pre" },
+                { value: "pre-line", title: "Pre Line" },
+                { value: "pre-wrap", title: "Pre Wrap" },
+                { value: "break-spaces", title: "Break Spaces" },
+            ],
+        },
+    },
+    {
+        divider: {},
+    },
+    {
+        title: "Underline",
+        id: "globalTextTextDecoration",
+        select: {
+            default: "no-underline",
+            items: [
+                {
+                    value: "no-underline",
+                    title: "No Underline",
+                },
+                {
+                    value: "underline",
+                    title: "Underline",
+                },
+                {
+                    value: "overline",
+                    title: "Overline",
+                },
+                {
+                    value: "line-through",
+                    title: "Line Through",
+                },
+            ],
+        },
+    },
+    {
+        visible: "globalTextTextDecoration != 'no-underline'",
+        title: "Style",
+        id: "globalTextTextDecorationStyle",
+        format: "decoration-{{value}}",
+        select: {
+            default: "solid",
+            items: [
+                {
+                    value: "solid",
+                    title: "Solid",
+                },
+                {
+                    value: "double",
+                    title: "Double",
+                },
+                {
+                    value: "dotted",
+                    title: "Dotted",
+                },
+                {
+                    value: "dashed",
+                    title: "Dashed",
+                },
+                {
+                    value: "wavy",
+                    title: "Wavy",
+                },
+            ],
+        },
+    },
+    {
+        visible: "globalTextTextDecoration == 'underline'",
+        title: "Offset",
+        id: "globalTextTextDecorationOffset",
+        format: "underline-offset-[{{value}}px]",
+        slider: {
+            default: 1,
+            use: "Slider",
+            max: 30,
+        },
+    },
+    {
+        visible: "globalTextTextDecoration != 'no-underline'",
+        title: "Color",
+        id: "globalTextTextDecorationColor",
+        format: "decoration-{{value}}",
+        themeColor: {
+            default: {
+                name: "text",
+                brightness: 100,
+            },
+        },
+    },
+    {
+        visible: "globalTextTextDecoration != 'no-underline'",
+        title: "Opacity",
+        id: "globalTextTextDecorationOpacity",
+        format: "[{{value}}%]",
+        responsive: false,
+        slider: {
+            default: 100,
+            use: "Slider",
+            units: "%",
+        },
+    },
+];
+
+export default TextFontsAndTextStyles;

package/controls/typography/TextSimple.js

@@ -0,0 +1,55 @@
+const TextSimple = [
+    {
+        title: "Align",
+        id: "textSimpleTextAlign",
+        segmented: {
+            use: "TextAlign",
+        },
+    },
+    {
+        title: "Color",
+        id: "textSimpleTextColor",
+        format: "text-{{value}}",
+        themeColor: {
+            default: {
+                name: "text",
+                brightness: 100,
+            },
+        },
+    },
+    {
+        title: "Opacity",
+        id: "textSimpleTextColorOpacity",
+        format: "[{{value}}%]",
+        responsive: false,
+        slider: {
+            default: 100,
+            use: "Slider",
+            units: "%",
+        },
+    },
+    {
+        title: "Font Family",
+        id: "textSimpleFonts",
+        themeFont: {
+            default: {
+                base: {
+                    name: "body",
+                },
+            },
+        },
+    },
+    {
+        title: "Text Style",
+        id: "textSimpleTextStyles",
+        themeTextStyle: {
+            default: {
+                base: {
+                    name: "base",
+                },
+            },
+        },
+    },
+];
+
+export default TextSimple;

package/controls/typography/TextStyles.js

@@ -0,0 +1,55 @@
+const TextStyles = [
+    {
+        title: "Weight",
+        id: "textStylesFontWeight",
+        format: "font-[{{value}}]",
+        slider: {
+            default: "400",
+            items: [
+                { value: "100", title: "Thin" },
+                { value: "200", title: "Extra Light" },
+                { value: "300", title: "Light" },
+                { value: "400", title: "Normal" },
+                { value: "500", title: "Medium" },
+                { value: "600", title: "Semi Bold" },
+                { value: "700", title: "Bold" },
+                { value: "800", title: "Extra Bold" },
+                { value: "900", title: "Black" },
+            ],
+        },
+    },
+    {
+        title: "Letter Spacing",
+        id: "textStylesLetterSpacing",
+        format: "tracking-{{value}}",
+        slider: {
+            default: "normal",
+            items: [
+                { value: "tighter", title: "Tighter" },
+                { value: "tight", title: "Tight" },
+                { value: "normal", title: "Normal" },
+                { value: "wide", title: "Wide" },
+                { value: "wider", title: "Wider" },
+                { value: "widest", title: "Widest" },
+            ],
+        },
+    },
+    {
+        title: "Line Height",
+        id: "textStylesLineHeight",
+        format: "leading-{{value}}",
+        slider: {
+            default: "normal",
+            items: [
+                { value: "none", title: "None" },
+                { value: "tight", title: "Tight" },
+                { value: "snug", title: "Snug" },
+                { value: "normal", title: "Normal" },
+                { value: "relaxed", title: "Relaxed" },
+                { value: "loose", title: "Loose" },
+            ],
+        },
+    },
+];
+
+export default TextStyles;

package/controls/typography/Typography.js

@@ -0,0 +1,13 @@
+const Typography = {
+    title: "Style",
+    id: "globalTypography",
+    themeTypography: {
+        default: {
+            base: {
+                name: "article",
+            },
+        },
+    },
+};
+
+export default Typography;

package/index.js

@@ -0,0 +1,19 @@
+/**
+ * rw-elements-tools
+ * 
+ * Build tools for RapidWeaver element packs.
+ * 
+ * @module rw-elements-tools
+ */
+
+// Re-export controls and properties for programmatic access
+export * as Controls from './controls/index.js';
+export * as Properties from './properties/index.js';
+
+// Export configuration utilities
+export { resolveConfig, getPackagePath } from './config.js';
+
+// Export build functions for programmatic use
+export { buildProperties, startWatch as watchProperties } from './build-properties.js';
+export { buildAll as buildHooks, startWatch as watchHooks } from './build-shared-hooks.js';
+

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "rw-elements-tools",
+  "version": "1.2.0",
+  "description": "Build tools for RapidWeaver Elements packs - generates properties.json and hooks.js files",
+  "author": "Elements Platform",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "rw-build": "./bin/cli.js"
+  },
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./controls": "./controls/index.js",
+    "./properties": "./properties/index.js",
+    "./config": "./config.js"
+  },
+  "files": [
+    "bin/",
+    "controls/",
+    "properties/",
+    "shared-hooks/",
+    "build-properties.js",
+    "build-shared-hooks.js",
+    "config.js",
+    "index.js",
+    "README.md"
+  ],
+  "keywords": [
+    "rapidweaver",
+    "elements",
+    "build-tools",
+    "properties",
+    "controls"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/realmacsoftware/RWElementsPacksTools.git"
+  },
+  "bugs": {
+    "url": "https://github.com/realmacsoftware/RWElementsPacksTools/issues"
+  },
+  "homepage": "https://github.com/realmacsoftware/RWElementsPacksTools#readme",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "dependencies": {
+    "esbuild": "^0.21.5",
+    "glob": "^10.3.12",
+    "lodash": "^4.17.21"
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Ready to publish rw-elements-tools'"
+  }
+}