unom/style
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remove old unused code

Browse Source 
move to esm
This commit is contained in:
Enrico Bühler
2023-07-20 18:15:11 +02:00
parent be24f193ce
commit 86ccdf3701
19 changed files with 1078 additions and 3021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/Theme/Colors/index.test.ts
View File

@@ -1,55 +0,0 @@
import { generateShades } from ".";
const exampleColors = {
main: "black",
"secondary-accent": "#fff",
};
test("color shades are generated in a nested structure", () => {
const colors = generateShades(exampleColors, {
structure: "nested",
format: "css-variable",
});
expect(colors).toMatchObject({
main: {
"10": "rgba(0,0,0,0.1)",
},
});
});
test("color shades are generated in a flat structure", () => {
const colors = generateShades(exampleColors, {
structure: "flat",
format: "css-variable",
});
expect(colors).toMatchObject({
"main-10": "rgba(0,0,0,0.1)",
});
});
test("color shades are generated in a flat structure with a prefix", () => {
const colors = generateShades(exampleColors, {
structure: "flat",
keyPrefix: "color-",
format: "css-variable",
});
expect(colors).toMatchObject({
"color-main-10": "rgba(0,0,0,0.1)",
});
});
test("a filtered list of color shades is generated in a flat structure", () => {
const colors = generateShades(exampleColors, {
structure: "flat",
keys: ["main"],
format: "css-variable",
});
expect(colors).toMatchObject({
"main-10": "rgba(0,0,0,0.1)",
});
expect(colors["secondary-accent"]).toBeUndefined();
});

85
src/Theme/Colors/index.ts
View File

@@ -1,85 +0,0 @@
import { countDecimals } from "Utils";
import { fromString } from "css-color-converter";
export interface ColorsInput {
[key: string]: string;
}
export interface ShadesOptions {
keys?: string[];
keyPrefix?: string;
keySuffix?: string;
opacities?: number[];
structure?: "flat" | "nested";
format?: "default" | "css-variable";
}
const DEFAULT_OPACITIES = [0.1, 0.25, 0.5, 0.75];
const DEFAULT_STRUCTURE = "flat";
const formatColor = ({
key,
rgb,
opacity,
}: {
key?: string;
rgb: string;
opacity?: number;
}) => {
return {
[`${key ? key + "-" : ""}${
opacity !== undefined
? countDecimals(opacity) === 1
? (opacity + "").split(".")[1] + "0"
: (opacity + "").split(".")[1]
: ""
}`]: `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${opacity})`,
};
};
const generateShades = (colors: ColorsInput, options?: ShadesOptions) => {
const colorKeys = options?.keys
? Object.keys(colors).filter((key) => options.keys?.includes(key))
: Object.keys(colors);
const structure = options?.structure
? options.structure === "nested"
? "nested"
: "flat"
: DEFAULT_STRUCTURE;
const generatedColorShadesArr: object[] = [];
colorKeys.forEach((_key) => {
const key = (options?.keyPrefix || "") + _key + (options?.keySuffix || "");
const colorString = colors[_key];
const opacities = options?.opacities
? options.opacities
: DEFAULT_OPACITIES;
if (structure === "flat") {
opacities.forEach((opacity) => {
const rgba = fromString(colorString).toRgbaArray();
generatedColorShadesArr.push(formatColor({ key, rgb: rgba, opacity }));
});
} else {
generatedColorShadesArr.push({
[key]: Object.assign(
{},
...opacities.map((opacity) => {
const rgba = fromString(colorString).toRgbaArray();
return formatColor({ rgb: rgba, opacity });
})
),
});
}
});
const generatedColorShades = Object.assign({}, ...generatedColorShadesArr);
return generatedColorShades;
};
export { generateShades, formatColor };

74
src/Theme/index.test.ts
View File

@@ -1,74 +0,0 @@
import {
generateThemeOverride,
generateThemeRoot,
generateTheme,
ThemeInput,
} from ".";
const exampleProperties = {
"color-main-10": "black",
"color-main-50": "grey",
};
const exampleThemes: ThemeInput[] = [
{
name: "default",
colors: { "color-main": "black" },
},
{
name: "dark",
colors: { "color-main": "white", "color-secondary": "blue" },
},
{ name: "light", colors: { "color-secondary": "grey" } },
];
test("it generates css based on input properties", () => {
const themeClass = generateThemeOverride({
properties: exampleProperties,
selector: ".dark-theme",
});
expect(themeClass).toBeDefined();
});
test("no input so it returns empty string", () => {
const themeClass = generateThemeOverride({
properties: {},
selector: ".dark-theme",
});
expect(themeClass).toBeDefined();
expect(themeClass).toEqual("");
});
test("it generates the theme root", () => {
const themeRoot = generateThemeRoot({ properties: exampleProperties });
console.log(themeRoot);
expect(themeRoot).toBeDefined();
});
test("it generates the complete theme with overrides", () => {
const theme = generateTheme({
themes: exampleThemes,
output: "CSS",
});
console.log(theme);
expect(theme).toBeDefined();
});
test("it generates the complete theme with overrides and color shades", () => {
const theme = generateTheme({
themes: exampleThemes,
output: "CSS",
generateColorShades: {
structure: "flat",
format: "css-variable",
},
});
console.log(theme);
expect(theme).toBeDefined();
});

89
src/Theme/index.ts
View File

@@ -1,89 +0,0 @@
import * as Colors from "./Colors";
import { generateShades, ColorsInput, ShadesOptions } from "./Colors";
export interface ThemeInput {
name: string;
colors: ColorsInput;
common?: any;
selector?: string;
}
const generateThemeOverride = (input: {
properties: any;
selector: string;
}) => {
const propKeys = Object.keys(input.properties);
if (propKeys.length > 0) {
return `
${input.selector} {${propKeys
.map((key) => `\t--${key}: ${input.properties[key]};`)
.join("\n")}}`;
} else return "";
};
const generateThemeRoot = (input: { properties: any }) => {
const propKeys = Object.keys(input.properties);
if (propKeys.length > 0) {
return `
:root {${propKeys
.map((key) => `\t--${key}: ${input.properties[key]};`)
.join("\n")}}`;
} else return "";
};
const generateTheme = (options: {
output?: "CSS";
themes: ThemeInput[];
generateColorShades?: boolean | ShadesOptions;
}) => {
let themes = options.themes;
if (
options.generateColorShades !== undefined &&
options.generateColorShades !== false
) {
themes = themes.map((theme) => {
const updatedColors = {
...generateShades(
theme.colors,
typeof options.generateColorShades !== "boolean"
? options.generateColorShades
: undefined
),
...theme.colors,
};
return { ...theme, colors: updatedColors };
});
}
const themeRoot = generateThemeRoot({
properties: { ...themes[0].colors, ...(themes[0].common || {}) },
});
if (themes.length > 1) {
const themeOverrides = themes
.slice(1)
.map((theme) => {
const overrideClass = generateThemeOverride({
properties: { ...theme.colors, ...(theme.common || {}) },
selector: theme.selector ? theme.selector : "." + theme.name,
});
return overrideClass;
})
.join("\n");
return themeRoot + themeOverrides;
} else return themeRoot;
};
export { generateThemeOverride, generateThemeRoot, generateTheme };
export default {
Colors,
generateThemeOverride,
generateThemeRoot,
generateTheme,
};

9
src/Utils/index.ts
View File

@@ -1,9 +0,0 @@
const countDecimals = (value: number) => {
if (Math.floor(value) === value) return 0;
return value.toString().split(".")[1].length || 0;
};
export { countDecimals };
export default {
countDecimals,
};

10
src/Easings/index.test.ts → src/easings/easings.test.ts
View File

@@ -1,8 +1,9 @@
import ease from ".";
import ease from "./easings";
import { expect, it } from "vitest";
const DURATION = 2;
test("returns correct ease quint out with 2 second duration", () => {
it("returns correct ease quint out with 2 second duration", () => {
const easing = ease.quint(DURATION).out;
expect(easing).toEqual({
@@ -10,9 +11,10 @@ test("returns correct ease quint out with 2 second duration", () => {
type: "tween",
duration: DURATION,
});
});
})
test("returns correct ease circ in with 2 second duration", () => {
it("returns correct ease circ in with 2 second duration", () => {
const easing = ease.circ(DURATION).in;
expect(easing).toEqual({

0
src/Easings/index.ts → src/easings/easings.ts
View File

17
src/unom-style.ts
View File

@@ -1,23 +1,10 @@
import Utils from "./Utils";
import ease from "./Easings";
import Theme from "./Theme";
import ease from "./easings/easings";
declare module "unom-style";
export {
/**
* @public
* Util function to create framer-motion transitions based on penner's functions
*/
ease,
/**
* @public
* Collection of Utils
*/
Utils,
/**
* @public
* Collection of theming tools
*/
Theme,
ease
};