Skip to content

Commit 0e08e9b

Browse files
ibodev1ibodev1
committed
feat: update file system and fix bugs
1 parent 4bcba8d commit 0e08e9b

File tree

5 files changed

+138
-239
lines changed

5 files changed

+138
-239
lines changed

‎src/colorResult.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import chroma from "chroma-js";
2+
import type { IColorResultOptions } from "./types";
3+
4+
const darkenValue = (shade: number, mainShade: number) => {
5+
return (shade - mainShade) / 100 / 2;
6+
}
7+
const shadeColor = (primaryColor: string, mainShade: number, shade: number) => {
8+
return chroma(primaryColor)
9+
.darken(darkenValue(shade, mainShade))
10+
.hex();
11+
}
12+
const shadeColorResult = (fn: any, options: IColorResultOptions) => {
13+
return options.shades.reduce((acc: any, shade: number) => {
14+
acc[shade] = fn(options.primaryColor, options.mainShade, shade);
15+
return acc;
16+
}, {});
17+
}
18+
const colorResult = (options: IColorResultOptions) => {
19+
const palette = shadeColorResult(shadeColor, options);
20+
const colorPalette = {
21+
...palette,
22+
DEFAULT: options.primaryColor
23+
};
24+
return Object.freeze(colorPalette) ?? {};
25+
}
26+
27+
export default colorResult;

‎src/helpers.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import type { IColorResultOptions, Palette } from "./types";
2+
3+
export const initalOptions: IColorResultOptions = {
4+
mainShade: 500,
5+
primaryColor: "#FFBD00",
6+
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
7+
}
8+
9+
export const isColor = (color: string) => {
10+
const reg = /^#([\da-f]{3}){1,2}$|^#([\da-f]{6}){1,2}$|(rgb|hsl)a?\((\s*-?\d+%?\s*,){2}(\s*-?\d+%?\s*,?\s*\)?)(,\s*(0?\.\d+)?|1)?\)/gim;
11+
if (typeof color === "string" && reg.test(color)) {
12+
return true;
13+
} else {
14+
return false;
15+
}
16+
}
17+
18+
export const checkParam = (palette: Palette) => {
19+
if (
20+
palette.color &&
21+
typeof palette.color === "string" &&
22+
palette.name &&
23+
typeof palette.name == "string"
24+
) {
25+
if (!isColor(palette.color)) {
26+
throw new Error(
27+
`'${palette.color}' The value you entered is not a color. e.g #ffbd00 or #ffb or rgba(255, 189, 0, 1) or rgb(255, 189, 0) or hsl(44, 100%, 50%)`
28+
);
29+
} else if (!palette.shade && palette.shades) {
30+
throw new Error(
31+
`If you want to specify the shades, you have to specify the main shade.`
32+
);
33+
} else if (palette.shade && typeof palette.shade !== "number") {
34+
throw new Error(
35+
`'${palette.shade}' - type: ${typeof palette.shade} It must be of type number.`
36+
);
37+
} else if (
38+
palette.shades &&
39+
!Array.isArray(palette.shades)
40+
) {
41+
throw new Error(`Shades are not array.`);
42+
} else if (palette.shades && palette.shades.length <= 2) {
43+
throw new Error(`Shades can consist of at least 3 elements.`);
44+
} else if (
45+
palette.shade &&
46+
palette.shades &&
47+
!palette.shades.includes(palette.shade)
48+
) {
49+
throw new Error(
50+
`'${palette.shade}' mainShade are not included in the your shades.`
51+
);
52+
} else if (
53+
!palette.shades &&
54+
palette.shade &&
55+
!initalOptions.shades.includes(palette.shade)
56+
) {
57+
throw new Error(
58+
`'${palette.shade}' mainShade can only be 50, 100, 200, 300, 400, 500, 600, 700, 800 or 900.`
59+
);
60+
} else {
61+
return true;
62+
}
63+
} else {
64+
throw new Error("Make sure the required data is included.");
65+
}
66+
}

‎src/main.ts‎

Lines changed: 26 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,41 @@
11
import chroma from "chroma-js";
2+
import type { IColorResultOptions, Palette } from "./types";
3+
import colorResult from "./colorResult";
4+
import { checkParam, initalOptions } from "./helpers";
25

3-
export interface Palette {
4-
name: string;
5-
color: string;
6-
shade?: number;
7-
shades?: number[];
8-
}
9-
10-
const main = {
11-
state: {
12-
initialParams: {
13-
color: "#FFBD00",
14-
name: "primary",
15-
shade: 500,
16-
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
17-
},
18-
primaryColor: "#FFBD00",
19-
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
20-
mainShade: 500
21-
},
22-
getters: {
23-
darkenValue: (shade: number) => {
24-
return (shade - main.state.mainShade) / 100 / 2;
25-
},
26-
shadeColor: (shade: number) => {
27-
return chroma(main.state.primaryColor)
28-
.darken(main.getters.darkenValue(shade))
29-
.hex();
30-
},
31-
shadeColorResult: (fn: any) => {
32-
return main.state.shades.reduce((acc: any, shade: number) => {
33-
acc[shade] = fn(shade);
34-
return acc;
35-
}, {});
36-
},
37-
colorResult: () => {
38-
const palette = main.getters.shadeColorResult(main.getters.shadeColor);
39-
const DEFAULT = main.getters.shadeColor(main.state.mainShade);
40-
const colorPalette = {
41-
...palette,
42-
DEFAULT: DEFAULT
43-
};
44-
return Object.freeze(colorPalette) ?? {};
45-
}
46-
},
47-
checks: {
48-
checkParam: (palette: Palette) => {
49-
if (
50-
palette.color &&
51-
typeof palette.color === "string" &&
52-
palette.name &&
53-
typeof palette.name == "string"
54-
) {
55-
if (!main.checks.checkColor(palette.color)) {
56-
throw new Error(
57-
`'${palette.color}' The value you entered is not a color. e.g #ffbd00 or #ffb or rgba(255, 189, 0, 1) or rgb(255, 189, 0) or hsl(44, 100%, 50%)`
58-
);
59-
} else if (!palette.shade && palette.shades) {
60-
throw new Error(
61-
`If you want to specify the shades, you have to specify the main shade.`
62-
);
63-
} else if (palette.shade && typeof palette.shade !== "number") {
64-
throw new Error(
65-
`'${palette.shade}' - type: ${typeof palette.shade} It must be of type number.`
66-
);
67-
} else if (
68-
palette.shades &&
69-
!Array.isArray(palette.shades)
70-
) {
71-
throw new Error(`Shades are not array.`);
72-
} else if (palette.shades && palette.shades.length <= 2) {
73-
throw new Error(`Shades can consist of at least 3 elements.`);
74-
} else if (
75-
palette.shade &&
76-
palette.shades &&
77-
!palette.shades.includes(palette.shade)
78-
) {
79-
throw new Error(
80-
`'${palette.shade}' mainShade are not included in the your shades.`
81-
);
82-
} else if (
83-
!palette.shades &&
84-
palette.shade &&
85-
!main.state.initialParams.shades.includes(palette.shade)
86-
) {
87-
throw new Error(
88-
`'${palette.shade}' mainShade can only be 50, 100, 200, 300, 400, 500, 600, 700, 800 or 900.`
89-
);
90-
} else {
91-
return true;
92-
}
93-
} else {
94-
throw new Error("Make sure the required data is included.");
95-
}
96-
},
97-
checkColor: (color: string) => {
98-
var reg = /^#([\da-f]{3}){1,2}$|^#([\da-f]{6}){1,2}$|(rgb|hsl)a?\((\s*-?\d+%?\s*,){2}(\s*-?\d+%?\s*,?\s*\)?)(,\s*(0?\.\d+)?|1)?\)/gim;
99-
if (typeof color === "string" && reg.test(color)) {
100-
return true;
101-
} else {
102-
return false;
103-
}
104-
}
105-
}
106-
};
107-
108-
const getPalette = (
109-
params: Palette[] | Palette | string = main.state.initialParams
110-
): any => {
6+
const getPalette = (params: Palette[] | Palette | string): any => {
1117
let palette: any = {};
112-
main.state.primaryColor = "#FFBD00";
113-
main.state.mainShade = 500;
114-
main.state.shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
1158
if (Array.isArray(params)) {
116-
for (let index = 0; index < params.length; index++) {
117-
const colorPalette = params[index];
118-
if (main.checks.checkParam(colorPalette)) {
119-
main.state.primaryColor = chroma(colorPalette.color).hex();
120-
main.state.mainShade = colorPalette.shade || main.state.mainShade;
121-
main.state.shades = colorPalette.shades || main.state.shades;
122-
let result = main.getters.colorResult();
123-
124-
palette[colorPalette.name] = result;
9+
for (let i = 0; i < params.length; i++) {
10+
const colorPalette = params[i];
11+
if (checkParam(colorPalette)) {
12+
const options: IColorResultOptions = {
13+
mainShade: colorPalette.shade ?? initalOptions.mainShade,
14+
primaryColor: chroma(colorPalette.color).hex() ?? initalOptions.primaryColor,
15+
shades: colorPalette.shades ?? initalOptions.shades
16+
};
17+
18+
palette[colorPalette.name] = colorResult(options);
12519
}
12620
}
127-
return palette;
12821
} else if (typeof params !== "string" && !Array.isArray(params)) {
129-
if (main.checks.checkParam(params)) {
130-
main.state.primaryColor = chroma(params.color).hex();
131-
main.state.mainShade = params.shade || main.state.mainShade;
132-
main.state.shades = params.shades || main.state.shades;
133-
let result = main.getters.colorResult();
134-
135-
palette[params.name] = result;
22+
if (checkParam(params)) {
23+
const options: IColorResultOptions = {
24+
mainShade: params.shade ?? initalOptions.mainShade,
25+
primaryColor: chroma(params.color).hex() ?? initalOptions.primaryColor,
26+
shades: params.shades ?? initalOptions.shades
27+
};
13628

137-
return palette;
29+
palette[params.name] = colorResult(options);
13830
}
13931
} else if (typeof params === "string") {
140-
main.state.primaryColor = chroma(params.toString()).hex();
141-
let result = main.getters.colorResult();
142-
143-
palette[main.state.initialParams.name] = result;
32+
const options: IColorResultOptions = Object.assign(initalOptions, {
33+
primaryColor: chroma(params).hex()
34+
});
14435

145-
return palette;
36+
palette["primary"] = colorResult(options);
14637
}
38+
return palette;
14739
};
14840

14941
export default getPalette;

‎src/types.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export interface IColorResultOptions {
2+
primaryColor: string;
3+
mainShade: number;
4+
shades: number[]
5+
}
6+
7+
export interface Palette {
8+
name: string;
9+
color: string;
10+
shade?: number;
11+
shades?: number[];
12+
}

0 commit comments

Comments
 (0)