Skip to content

Commit

Permalink
🏷️ Fix type issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@siguici
siguici committed Aug 12, 2024
1 parent 62fb311 commit 180c477
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 48 deletions.
3 changes: 3 additions & 0 deletions packages/ui/deno.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{
"name": "@sikessem/ui",
"version": "0.0.0",
"imports": {
"npm:plugwind.js": "jsr:@siguici/plugwind"
},
"exports": {
".": "./jsr/index.ts"
},
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/deno.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

43 changes: 20 additions & 23 deletions packages/ui/src/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,14 @@ import { Plugin } from "./plugin";
export type ColorName = keyof typeof colors;
export type ColorValue = string;
export type ColorValues = Record<string | number, ColorValue>;
export type ColorVariant = ColorValues | ColorValue;
export type RequiredColorVariants = {
default: ColorValue;
light: ColorValues;
dark: ColorValues;
};
export type ColorScheme<T extends ColorValue | ColorValues> =
T extends ColorValue ? "default" : "light" | "dark";
export type ColorVariants = Partial<RequiredColorVariants>;

export class Colors extends Plugin<void> {
Expand Down Expand Up @@ -1215,15 +1218,13 @@ export class Colors extends Plugin<void> {
}

protected addColor(name: string, variants: ColorVariants): this {
Object.entries(variants).forEach((color) => {
const scheme = color[0];
const value = color[1];
for (const [scheme, value] of Object.entries(variants)) {
if (typeof value === "string") {
this.addColorValue(name, value);
} else {
this.matchColorValues(`${name}-${scheme}`, variants[scheme]);
this.matchColorValues(`${name}-${scheme}`, value);
}
});
}

return this.matchColorScheme(name, variants);
}
Expand Down Expand Up @@ -1278,11 +1279,11 @@ export class Colors extends Plugin<void> {
): RuleSet[] {
const { e } = this.api;
const style: RuleSet[] = [];
Object.entries(this.components).forEach((component) => {
for (const component of Object.entries(this.components)) {
const name = `${component[0]}-${variant}`;
const utilities = component[1];

Object.entries(lightValues).forEach((color) => {
for (const color of Object.entries(lightValues)) {
const colorKey = color[0];
const colorName = `${name}-${colorKey}`;
const colorValue = color[1];
Expand All @@ -1309,7 +1310,7 @@ export class Colors extends Plugin<void> {
),
);
} else {
Object.entries(utilities).forEach((utility) => {
for (const utility of Object.entries(utilities)) {
const utilityName =
utility[0] === "DEFAULT"
? colorName
Expand Down Expand Up @@ -1338,10 +1339,10 @@ export class Colors extends Plugin<void> {
),
);
}
});
}
}
});
});
}
}
return style;
}

Expand All @@ -1351,12 +1352,10 @@ export class Colors extends Plugin<void> {
darkValues: ColorValues | undefined = undefined,
): RuleSet[] {
const style: RuleSet[] = [];
Object.entries(this.utilities).forEach((utility) => {
for (const utility of Object.entries(this.utilities)) {
const utilityName = `${utility[0]}-${variant}`;
const propertyName = utility[1];
Object.entries(lightValues).forEach((color) => {
const colorKey = color[0];
const colorValue = color[1];
for (const [colorKey, colorValue] of Object.entries(lightValues)) {
style.push(
darken_class(
this.darkMode,
Expand All @@ -1367,16 +1366,16 @@ export class Colors extends Plugin<void> {
: stylize_property(propertyName, darkValues[colorKey]),
),
);
});
});
}
}
return style;
}

protected stylizeColorUtility(name: string, value: ColorValue): RuleSet {
const { e } = this.api;
let rules: RuleSet = {};

Object.entries(this.utilities).forEach((utility) => {
for (const utility of Object.entries(this.utilities)) {
const utilityName = `${utility[0]}-${e(name)}`;
const propertyName = utility[1];
rules = append_style(
Expand All @@ -1385,20 +1384,18 @@ export class Colors extends Plugin<void> {
}),
rules,
);
});
}
return rules;
}

protected stylizeColorUtilityCallback(name: string): StyleCallbacks {
const { e } = this.api;
const rules: StyleCallbacks = {};

Object.entries(this.utilities).forEach((utility) => {
const utilityName = utility[0];
const propertyName = utility[1];
for (const [utilityName, propertyName] of Object.entries(this.utilities)) {
rules[`${utilityName}-${e(name)}`] = (value) =>
stylize_property(propertyName, value);
});
}
return rules;
}
}
67 changes: 53 additions & 14 deletions packages/ui/src/plugger.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import type {
UIOptions,
} from ".";

import plug, {
import _plug, {
type Plug,
type Plugin,
type PluginAPI,
type PluginCreator,
type PluginCreatorWithOptions,
type PluginWithOptions,
} from "plugwind.js";
import { Colors } from "./colors";
import { Edges } from "./edges";
Expand All @@ -23,20 +26,56 @@ export const DEFAULT_OPTIONS: RequiredUIOptions = {
};

export function plugUI(): PluginCreatorWithOptions<UIOptions> {
return plug.with((options: UIOptions = DEFAULT_OPTIONS) => (api) => {
useColors(api);
useLinks(api, {
linkClass: options.linkClass || DEFAULT_OPTIONS.linkClass,
});
useEdges(api, {
entryClass: options.entryClass || DEFAULT_OPTIONS.entryClass,
buttonClass: options.buttonClass || DEFAULT_OPTIONS.buttonClass,
});
});
return plug.with(
(options: UIOptions = DEFAULT_OPTIONS) =>
(api: PluginAPI) => {
useColors(api);
useLinks(api, {
linkClass: options.linkClass || DEFAULT_OPTIONS.linkClass,
});
useEdges(api, {
entryClass: options.entryClass || DEFAULT_OPTIONS.entryClass,
buttonClass: options.buttonClass || DEFAULT_OPTIONS.buttonClass,
});
},
);
}

const isPlug = (plug: unknown): plug is Plug => {
return (
typeof plug === "function" && typeof (plug as Plug).with === "function"
);
};

const toPlug = (plug: unknown): Plug => {
if (isPlug(plug)) {
return plug;
}

const plugWithMethod: Plug = Object.assign(
(plugin: Plugin): PluginCreator => {
if (typeof plug !== "function") {
throw new Error("Invalid plug type");
}
return plug(plugin);
},
{
with<T>(plugin: PluginWithOptions<T>): PluginCreatorWithOptions<T> {
if (isPlug(plug)) {
return plug.with(plugin);
}
throw new Error("Invalid plug type");
},
},
);

return plugWithMethod;
};

const plug: Plug = toPlug(_plug);

export function plugColors(): PluginCreator {
return plug((api) => useColors(api));
return plug((api: PluginAPI) => useColors(api));
}

export function plugLinks(): PluginCreatorWithOptions<LinkOptions> {
Expand All @@ -46,7 +85,7 @@ export function plugLinks(): PluginCreatorWithOptions<LinkOptions> {
linkClass: DEFAULT_OPTIONS.linkClass,
},
) =>
(api) =>
(api: PluginAPI) =>
useLinks(api, options as RequiredLinkOptions),
);
}
Expand All @@ -59,7 +98,7 @@ export function plugEdges(): PluginCreatorWithOptions<EdgeOptions> {
buttonClass: DEFAULT_OPTIONS.buttonClass,
},
) =>
(api) => {
(api: PluginAPI) => {
const plugin = new Edges(api, options as RequiredEdgeOptions);
return plugin.create();
},
Expand Down
23 changes: 12 additions & 11 deletions packages/ui/src/plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { DarkModeConfig, PluginAPI } from "tailwindcss/types/config";
import type {
ComponentList,
DarkMode,
DarkModeStrategy,
PropertyName,
PropertyValue,
RuleSet,
Expand Down Expand Up @@ -45,7 +46,7 @@ export abstract class Plugin<T> implements PluginContract<T> {
configDarkMode === "media" ? mediaQuery : classQuery,
];
} else if (configDarkMode[0] !== undefined) {
this.darkMode = [configDarkMode[0], classQuery];
this.darkMode = [configDarkMode[0] as DarkModeStrategy, classQuery];
}
}
}
Expand All @@ -58,9 +59,9 @@ export abstract class Plugin<T> implements PluginContract<T> {

protected getPropertiesOf(utilities: UtilityName[]): PropertyName[] {
const properties: PropertyName[] = [];
utilities.forEach((utility) => {
for (const utility of utilities) {
properties.push(this.getPropertyOf(utility));
});
}
return properties;
}

Expand Down Expand Up @@ -90,7 +91,7 @@ export abstract class Plugin<T> implements PluginContract<T> {
const { e } = this.api;
const rules: StyleCallbacks = {};

Object.entries(this.components).forEach((component) => {
for (const component of Object.entries(this.components)) {
const name = `${component[0]}-${e(variant)}`;
const utilities = component[1];

Expand All @@ -99,7 +100,7 @@ export abstract class Plugin<T> implements PluginContract<T> {
} else if (Array.isArray(utilities)) {
rules[name] = this.stylizeUtilitiesCallback(utilities);
} else {
Object.entries(utilities).forEach((utility) => {
for (const utility of Object.entries(utilities)) {
const utilityName =
utility[0] === "DEFAULT" ? name : `${name}-${e(utility[0])}`;
const properties = utility[1];
Expand All @@ -108,17 +109,17 @@ export abstract class Plugin<T> implements PluginContract<T> {
} else {
rules[utilityName] = this.stylizeUtilitiesCallback(properties);
}
});
}
}
});
}
return rules;
}

protected stylizeComponents(variant: string, value: PropertyValue): RuleSet {
const { e } = this.api;
let rules: RuleSet = {};

Object.entries(this.components).forEach((component) => {
for (const component of Object.entries(this.components)) {
const name = `${component[0]}-${e(variant)}`;
const utilities = component[1];

Expand All @@ -133,7 +134,7 @@ export abstract class Plugin<T> implements PluginContract<T> {
rules,
);
} else {
Object.entries(utilities).forEach((utility) => {
for (const utility of Object.entries(utilities)) {
const utilityName =
utility[0] === "DEFAULT" ? name : `${name}-${e(utility[0])}`;
const properties = utility[1];
Expand All @@ -154,9 +155,9 @@ export abstract class Plugin<T> implements PluginContract<T> {
rules,
);
}
});
}
}
});
}
return rules;
}

Expand Down

0 comments on commit 180c477

Please sign in to comment.