@bgord/design 0.29.2 → 0.29.4

package/src/v2/utilities/object-fit-utility-generator.ts

@@ -0,0 +1,25 @@
+import { UtilityGenerator } from "./template";
+
+export class ObjectFitUtilityGenerator extends UtilityGenerator {
+  config = {
+    contain: "contain",
+    cover: "cover",
+    fill: "fill",
+    "scale-down": "scale-down",
+    none: "none",
+  };
+
+  constructor() {
+    super("Object fit utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      lines.push(`[data-object-fit='${key}'] { object-fit: ${value}; }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/object-position-utility-generator.ts

@@ -0,0 +1,27 @@
+import { UtilityGenerator } from "./template";
+
+export class ObjectPositionUtilityGenerator extends UtilityGenerator {
+  config = {
+    top: "top",
+    bottom: "bottom",
+    left: "left",
+    right: "right",
+    center: "center",
+    "top-left": "top left",
+    "top-right": "top right",
+  };
+
+  constructor() {
+    super("Object position utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      lines.push(`[data-object-position='${key}'] { object-position: ${value}; }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/opacity-utility-generator.ts

@@ -0,0 +1,23 @@
+import { OpacityTokenGenerator } from "../tokens/opacity-token-generator";
+import { UtilityGenerator } from "./template";
+
+export class OpacityUtilityGenerator extends UtilityGenerator {
+  config = {};
+
+  constructor(OpacityTokenGenerator: OpacityTokenGenerator) {
+    super("Opacity utilities");
+    this.config = OpacityTokenGenerator.getConfig();
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const variable of Object.keys(this.config)) {
+      const key = variable.replace("opacity-", "");
+
+      lines.push(`[data-opacity='${key}'] { opacity: var(--${variable}); }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/overflow-utility-generator.ts

@@ -0,0 +1,19 @@
+import { UtilityGenerator } from "./template";
+
+export class OverflowUtilityGenerator extends UtilityGenerator {
+  config = { auto: "auto", scroll: "scroll", hidden: "hidden" };
+
+  constructor() {
+    super("Overflow utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      lines.push(`[data-overflow='${key}'] { overflow: ${value}; }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/padding-utility-generator.ts

@@ -0,0 +1,31 @@
+import { SpacingTokenGenerator } from "../tokens/spacing-token-generator";
+import { UtilityGenerator } from "./template";
+
+export class PaddingUtilityGenerator extends UtilityGenerator {
+  config = {};
+
+  constructor(SpacingTokenGenerator: SpacingTokenGenerator) {
+    super("Padding utilities");
+    this.config = SpacingTokenGenerator.getConfig();
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const variable of Object.keys(this.config)) {
+      const key = variable.replace("spacing-", "");
+
+      lines.push(`[data-p='${key}'] { padding: var(--${variable}); }`);
+
+      lines.push(`[data-pt='${key}'] { padding-top: var(--${variable}); }`);
+      lines.push(`[data-pr='${key}'] { padding-right: var(--${variable}); }`);
+      lines.push(`[data-pb='${key}'] { padding-bottom: var(--${variable}); }`);
+      lines.push(`[data-pl='${key}'] { padding-left: var(--${variable}); }`);
+
+      lines.push(`[data-px='${key}'] { padding: 0 var(--${variable}); }`);
+      lines.push(`[data-py='${key}'] { padding: var(--${variable}) 0; }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/pointer-event-utility-generator.ts

@@ -0,0 +1,19 @@
+import { UtilityGenerator } from "./template";
+
+export class PointerEventUtilityGenerator extends UtilityGenerator {
+  config = { none: "none", auto: "auto" };
+
+  constructor() {
+    super("Pointer event utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      lines.push(`[data-pointer-events='${key}'] { pointer-events: ${value}; }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/position-utility-generator.ts

@@ -0,0 +1,26 @@
+import { UtilityGenerator } from "./template";
+
+export class PositionUtilityGenerator extends UtilityGenerator {
+  config = {
+    static: "static",
+    relative: "relative",
+    absolute: "absolute",
+    fixed: "fixed",
+    sticky: "sticky",
+    unset: "unset",
+  };
+
+  constructor() {
+    super("Position utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      lines.push(`[data-position='${key}'] { position: ${value}; }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/positioners-utility-generator.ts

@@ -0,0 +1,27 @@
+import { SpacingTokenGenerator } from "../tokens/spacing-token-generator";
+import { UtilityGenerator } from "./template";
+
+export class PositionersUtilityGenerator extends UtilityGenerator {
+  config = {};
+
+  constructor(SpacingTokenGenerator: SpacingTokenGenerator) {
+    super("Positioners utilities");
+    this.config = SpacingTokenGenerator.getConfig();
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const variable of Object.keys(this.config)) {
+      const key = variable.replace("spacing-", "");
+
+      lines.push(`[data-top='${key}'] { top: var(--${variable}); }`);
+      lines.push(`[data-right='${key}'] { right: var(--${variable}); }`);
+      lines.push(`[data-bottom='${key}'] { bottom: var(--${variable}); }`);
+      lines.push(`[data-left='${key}'] { left: var(--${variable}); }`);
+      lines.push(`[data-inset='${key}'] { inset: var(--${variable}); }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/radius-utility-generator.ts

@@ -0,0 +1,23 @@
+import { RadiusTokenGenerator } from "../tokens/radius-token-generator";
+import { UtilityGenerator } from "./template";
+
+export class RadiusUtilityGenerator extends UtilityGenerator {
+  config = {};
+
+  constructor(RadiusTokenGenerator: RadiusTokenGenerator) {
+    super("Radius utilities");
+    this.config = RadiusTokenGenerator.getConfig();
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const variable of Object.keys(this.config)) {
+      const key = variable.replace("radius-", "");
+
+      lines.push(`[data-br='${key}'] { border-radius: var(--${variable}); }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/rotate-utility-generator.ts

@@ -0,0 +1,19 @@
+import { UtilityGenerator } from "./template";
+
+export class RotateUtilityGenerator extends UtilityGenerator {
+  config = { "0": "0", "90": "90", "180": "180", "270": "270" };
+
+  constructor() {
+    super("Rotate utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      lines.push(`[data-rotate='${key}'] { transform: rotate(${value}deg); }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/shadow-utility-generator.ts

@@ -0,0 +1,23 @@
+import { ShadowTokenGenerator } from "../tokens/shadow-token-generator";
+import { UtilityGenerator } from "./template";
+
+export class ShadowUtilityGenerator extends UtilityGenerator {
+  config = {};
+
+  constructor(ShadowTokenGenerator: ShadowTokenGenerator) {
+    super("Shadow utilities");
+    this.config = ShadowTokenGenerator.getConfig();
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const variable of Object.keys(this.config)) {
+      const key = variable.replace("shadow-", "");
+
+      lines.push(`[data-shadow='${key}'] { box-shadow: var(--${variable}); }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/template.ts

@@ -0,0 +1,24 @@
+import { TokenConfigType } from "../tokens/template";
+
+export abstract class UtilityGenerator {
+  abstract config: TokenConfigType;
+  name: string;
+
+  constructor(name: string) {
+    this.name = name;
+  }
+
+  header(): string {
+    return `\n/* ${this.name} */\n`;
+  }
+
+  abstract css(): string;
+
+  footer(): string {
+    return "\n/* ===================== */\n";
+  }
+
+  toTypeScript(): string {
+    return "";
+  }
+}

package/src/v2/utilities/transform-utility-generator.ts

@@ -0,0 +1,58 @@
+import { UtilityGenerator } from "./template";
+
+export class TransformUtilityGenerator extends UtilityGenerator {
+  config = {
+    uppercase: "uppercase",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    "upper-first": "upper-first",
+    truncate: "truncate",
+    center: "center",
+    nowrap: "nowrap",
+    none: "none",
+    "line-clamp": "line-clamp",
+  };
+
+  constructor() {
+    super("Transform utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      if (key === "truncate") {
+        lines.push(
+          `[data-transform~='${key}'] {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n`,
+        );
+        continue;
+      }
+
+      if (key === "line-clamp") {
+        lines.push(
+          `[data-transform~='${key}'] {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lines, 2); overflow: hidden;\n}\n`,
+        );
+        continue;
+      }
+
+      if (key === "center") {
+        lines.push(`[data-transform~='${key}'] {\n  text-align: center;\n}\n`);
+        continue;
+      }
+
+      if (key === "upper-first") {
+        lines.push(`[data-transform~='upper-first']:first-letter {\n  text-transform: uppercase;\n}\n`);
+        continue;
+      }
+
+      if (key === "nowrap") {
+        lines.push(`[data-transform~='nowrap'] {\n  white-space: nowrap;\n}\n`);
+        continue;
+      }
+
+      lines.push(`[data-transform~='${key}'] {\n  text-transform: ${value};\n}\n`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/width-utility-generator.ts

@@ -0,0 +1,19 @@
+import { UtilityGenerator } from "./template";
+
+export class WidthUtilityGenerator extends UtilityGenerator {
+  config = { "100%": "100%", auto: "auto", unset: "unset" };
+
+  constructor() {
+    super("Width utilities");
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const [key, value] of Object.entries(this.config)) {
+      lines.push(`[data-width='${key}'] { width: ${value}; }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/utilities/z-index-utility-generator.ts

@@ -0,0 +1,23 @@
+import { ZIndexTokenGenerator } from "../tokens/z-index-token-generator";
+import { UtilityGenerator } from "./template";
+
+export class ZIndexUtilityGenerator extends UtilityGenerator {
+  config = {};
+
+  constructor(ZIndexTokenGenerator: ZIndexTokenGenerator) {
+    super("Z-index utilities");
+    this.config = ZIndexTokenGenerator.getConfig();
+  }
+
+  css() {
+    const lines: string[] = [];
+
+    for (const variable of Object.keys(this.config)) {
+      const key = variable.replace("z-index-", "");
+
+      lines.push(`[data-z='${key}'] { z-index: var(--${variable}); }`);
+    }
+
+    return lines.join("\n");
+  }
+}

package/src/v2/v2-generate-css.ts

@@ -0,0 +1,195 @@
+import * as TokenGenerators from "./tokens";
+import * as UtilityGenerators from "./utilities";
+
+class GeneratorProcessor {
+  static async process() {
+    const BackdropsTokenGenerator = new TokenGenerators.BackdropsTokenGenerator();
+    const BorderWidthTokenGenerator = new TokenGenerators.BorderWidthTokenGenerator();
+    const BrandTokenGenerator = new TokenGenerators.BrandTokenGenerator();
+    const BreakpointTokenGenerator = new TokenGenerators.BreakpointTokenGenerator();
+    const DangerTokenGenerator = new TokenGenerators.DangerTokenGenerator();
+    const FontFamilyTokenGenerator = new TokenGenerators.FontFamilyTokenGenerator();
+    const FontSizeTokenGenerator = new TokenGenerators.FontSizeTokenGenerator();
+    const FontWeightTokenGenerator = new TokenGenerators.FontWeightTokenGenerator();
+    const GrayscaleTokenGenerator = new TokenGenerators.GrayscaleTokenGenerator();
+    const LetterSpacingTokenGenerator = new TokenGenerators.LetterSpacingTokenGenerator();
+    const LineHeightTokenGenerator = new TokenGenerators.LineHeightTokenGenerator();
+    const OpacityTokenGenerator = new TokenGenerators.OpacityTokenGenerator();
+    const PositiveTokenGenerator = new TokenGenerators.PositiveTokenGenerator();
+    const RadiusTokenGenerator = new TokenGenerators.RadiusTokenGenerator();
+    const ShadowTokenGenerator = new TokenGenerators.ShadowTokenGenerator();
+    const SpacingTokenGenerator = new TokenGenerators.SpacingTokenGenerator();
+    const WarningTokenGenerator = new TokenGenerators.WarningTokenGenerator();
+    const ZIndexTokenGenerator = new TokenGenerators.ZIndexTokenGenerator();
+
+    const tokens = [
+      BackdropsTokenGenerator,
+      BorderWidthTokenGenerator,
+      BrandTokenGenerator,
+      BreakpointTokenGenerator,
+      DangerTokenGenerator,
+      FontFamilyTokenGenerator,
+      FontSizeTokenGenerator,
+      FontWeightTokenGenerator,
+      GrayscaleTokenGenerator,
+      LetterSpacingTokenGenerator,
+      LineHeightTokenGenerator,
+      OpacityTokenGenerator,
+      PositiveTokenGenerator,
+      RadiusTokenGenerator,
+      ShadowTokenGenerator,
+      SpacingTokenGenerator,
+      WarningTokenGenerator,
+      ZIndexTokenGenerator,
+    ];
+
+    let output = ":root {";
+
+    for (const token of tokens) {
+      output += token.getTokens();
+    }
+
+    output += "}";
+
+    const BackdropUtilityGenerator = new UtilityGenerators.BackdropUtilityGenerator(BackdropsTokenGenerator);
+    const BorderWidthUtilityGenerator = new UtilityGenerators.BorderWidthUtilityGenerator(
+      BorderWidthTokenGenerator,
+    );
+    const FontFamilyUtilityGenerator = new UtilityGenerators.FontFamilyUtilityGenerator(
+      FontFamilyTokenGenerator,
+    );
+    const FontSizeUtilityGenerator = new UtilityGenerators.FontSizeUtilityGenerator(FontSizeTokenGenerator);
+    const FontWeightUtilityGenerator = new UtilityGenerators.FontWeightUtilityGenerator(
+      FontWeightTokenGenerator,
+    );
+    const LetterSpacingUtilityGenerator = new UtilityGenerators.LetterSpacingUtilityGenerator(
+      LetterSpacingTokenGenerator,
+    );
+    const LineHeightUtilityGenerator = new UtilityGenerators.LineHeightUtilityGenerator(
+      LineHeightTokenGenerator,
+    );
+    const OpacityUtilityGenerator = new UtilityGenerators.OpacityUtilityGenerator(OpacityTokenGenerator);
+    const RadiusUtilityGenerator = new UtilityGenerators.RadiusUtilityGenerator(RadiusTokenGenerator);
+    const ShadowUtilityGenerator = new UtilityGenerators.ShadowUtilityGenerator(ShadowTokenGenerator);
+    const ZIndexUtilityGenerator = new UtilityGenerators.ZIndexUtilityGenerator(ZIndexTokenGenerator);
+    const FontColorUtilityGenerator = new UtilityGenerators.FontColorUtilityGenerator(
+      GrayscaleTokenGenerator,
+      BrandTokenGenerator,
+      PositiveTokenGenerator,
+      DangerTokenGenerator,
+      WarningTokenGenerator,
+    );
+    const BackgroundUtilityGenerator = new UtilityGenerators.BackgroundUtilityGenerator(
+      GrayscaleTokenGenerator,
+      BrandTokenGenerator,
+      PositiveTokenGenerator,
+      DangerTokenGenerator,
+      WarningTokenGenerator,
+    );
+    const BorderColorUtilityGenerator = new UtilityGenerators.BorderColorUtilityGenerator(
+      GrayscaleTokenGenerator,
+      BrandTokenGenerator,
+      PositiveTokenGenerator,
+      DangerTokenGenerator,
+      WarningTokenGenerator,
+    );
+    const PaddingUtilityGenerator = new UtilityGenerators.PaddingUtilityGenerator(SpacingTokenGenerator);
+    const MarginUtilityGenerator = new UtilityGenerators.MarginUtilityGenerator(SpacingTokenGenerator);
+    const GapUtilityGenerator = new UtilityGenerators.GapUtilityGenerator(SpacingTokenGenerator);
+    const PositionersUtilityGenerator = new UtilityGenerators.PositionersUtilityGenerator(
+      SpacingTokenGenerator,
+    );
+    const MaxWidthUtilityGenerator = new UtilityGenerators.MaxWidthUtilityGenerator(BreakpointTokenGenerator);
+    const MaxHeightUtilityGenerator = new UtilityGenerators.MaxHeightUtilityGenerator(
+      BreakpointTokenGenerator,
+    );
+    const DisplayUtilityGenerator = new UtilityGenerators.DisplayUtilityGenerator();
+    const CursorUtilityGenerator = new UtilityGenerators.CursorUtilityGenerator();
+    const ObjectFitUtilityGenerator = new UtilityGenerators.ObjectFitUtilityGenerator();
+    const PositionUtilityGenerator = new UtilityGenerators.PositionUtilityGenerator();
+    const RotateUtilityGenerator = new UtilityGenerators.RotateUtilityGenerator();
+    const ObjectPositionUtilityGenerator = new UtilityGenerators.ObjectPositionUtilityGenerator();
+    const PointerEventUtilityGenerator = new UtilityGenerators.PointerEventUtilityGenerator();
+    const OverflowUtilityGenerator = new UtilityGenerators.OverflowUtilityGenerator();
+    const FlexDirectionUtilityGenerator = new UtilityGenerators.FlexDirectionUtilityGenerator();
+    const AxisPlacementUtilityGenerator = new UtilityGenerators.AxisPlacementUtilityGenerator();
+    const FlexGrowUtilityGenerator = new UtilityGenerators.FlexGrowUtilityGenerator();
+    const FlexShrinkUtilityGenerator = new UtilityGenerators.FlexShrinkUtilityGenerator();
+    const FlexWrapUtilityGenerator = new UtilityGenerators.FlexWrapUtilityGenerator();
+    const TransformUtilityGenerator = new UtilityGenerators.TransformUtilityGenerator();
+    const WidthUtilityGenerator = new UtilityGenerators.WidthUtilityGenerator();
+    const HeightUtilityGenerator = new UtilityGenerators.HeightUtilityGenerator();
+
+    const generators = [
+      BackdropUtilityGenerator,
+      BorderWidthUtilityGenerator,
+      FontFamilyUtilityGenerator,
+      FontSizeUtilityGenerator,
+      FontWeightUtilityGenerator,
+      LetterSpacingUtilityGenerator,
+      LineHeightUtilityGenerator,
+      OpacityUtilityGenerator,
+      RadiusUtilityGenerator,
+      ShadowUtilityGenerator,
+      ZIndexUtilityGenerator,
+      FontColorUtilityGenerator,
+      BackgroundUtilityGenerator,
+      BorderColorUtilityGenerator,
+      PaddingUtilityGenerator,
+      MarginUtilityGenerator,
+      GapUtilityGenerator,
+      PositionersUtilityGenerator,
+      MaxWidthUtilityGenerator,
+      MaxHeightUtilityGenerator,
+      DisplayUtilityGenerator,
+      CursorUtilityGenerator,
+      ObjectFitUtilityGenerator,
+      PositionUtilityGenerator,
+      RotateUtilityGenerator,
+      ObjectPositionUtilityGenerator,
+      PointerEventUtilityGenerator,
+      OverflowUtilityGenerator,
+      FlexDirectionUtilityGenerator,
+      AxisPlacementUtilityGenerator,
+      FlexGrowUtilityGenerator,
+      FlexShrinkUtilityGenerator,
+      FlexWrapUtilityGenerator,
+      TransformUtilityGenerator,
+      WidthUtilityGenerator,
+      HeightUtilityGenerator,
+    ];
+
+    for (const generator of generators) {
+      output += generator.header();
+      output += generator.css();
+      output += generator.footer();
+    }
+
+    await Bun.file("dist/v2/main.css").write(output);
+
+    let types = "";
+
+    // for (const token of tokens) {
+    //   types += token.toTypeScript();
+    // }
+
+    types += `
+      export {};
+
+      import "react";
+      declare module "react" { interface HTMLAttributes<T> {
+    `;
+
+    for (const generator of generators) {
+      types += generator.toTypeScript();
+    }
+
+    types += "}}";
+
+    await Bun.file("dist/v2/index.d.ts").write(types);
+  }
+}
+
+export async function main() {
+  await GeneratorProcessor.process();
+}