65 |
No colours found.
42 | Now that’s minimilist.
43 |
75 |
103 |
109 |
110 | `;
111 |
--------------------------------------------------------------------------------
/resources/app/components/__snapshots__/Header.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Header.jsx renders and displays correctly 1`] = `
4 | .c0 {
5 | display: -webkit-box;
6 | display: -webkit-flex;
7 | display: -ms-flexbox;
8 | display: flex;
9 | -webkit-box-pack: center;
10 | -webkit-justify-content: center;
11 | -ms-flex-pack: center;
12 | justify-content: center;
13 | -webkit-align-items: center;
14 | -webkit-box-align: center;
15 | -ms-flex-align: center;
16 | align-items: center;
17 | height: 87px;
18 | width: 100%;
19 | background-color: #E8E9EF;
20 | box-shadow: 0 5px 10px 2px #00000040;
21 | }
22 |
23 | .c2 {
24 | height: 22px;
25 | width: 39px;
26 | background-color: #4E41FF;
27 | border-radius: 11px;
28 | position: absolute;
29 | top: 8px;
30 | right: 8px;
31 | color: #FFFFFF;
32 | font-family: SFProRegular;
33 | font-size: 11px;
34 | line-height: 24px;
35 | text-align: center;
36 | }
37 |
38 | .c1 {
39 | position: absolute;
40 | top: 50%;
41 | left: 47%;
42 | -webkit-transform: translate(-50%,-50%);
43 | -ms-transform: translate(-50%,-50%);
44 | transform: translate(-50%,-50%);
45 | }
46 |
47 |
50 | ![]()
53 |
56 |
57 | `;
58 |
--------------------------------------------------------------------------------
/resources/app/components/__snapshots__/Loader.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Loader.jsx renders and displays correctly 1`] = `
4 | .c0 {
5 | display: -webkit-box;
6 | display: -webkit-flex;
7 | display: -ms-flexbox;
8 | display: flex;
9 | -webkit-box-pack: center;
10 | -webkit-justify-content: center;
11 | -ms-flex-pack: center;
12 | justify-content: center;
13 | -webkit-align-items: center;
14 | -webkit-box-align: center;
15 | -ms-flex-align: center;
16 | align-items: center;
17 | -webkit-flex-direction: column;
18 | -ms-flex-direction: column;
19 | flex-direction: column;
20 | background-color: #4E41FF;
21 | height: 100%;
22 | width: 100%;
23 | text-align: center;
24 | }
25 |
26 | .c1 {
27 | height: 250px;
28 | margin: 40px 0;
29 | }
30 |
31 |
34 | 
40 |
42 | `;
43 |
--------------------------------------------------------------------------------
/resources/app/components/__snapshots__/NoColorsFound.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`NoColorsFound.jsx renders and displays correctly 1`] = `
4 | .c4 {
5 | height: 37px;
6 | width: 92px;
7 | font-family: SFProBold;
8 | font-size: 14px;
9 | color: #FFFFFF;
10 | border-radius: 23px;
11 | background-color: #4E41FF;
12 | border: none;
13 | }
14 |
15 | .c4:hover {
16 | background-color: #3B2EEB;
17 | cursor: pointer;
18 | }
19 |
20 | .c0 {
21 | background-color: #E8E9EF;
22 | height: 100%;
23 | width: 100%;
24 | }
25 |
26 | .c1 {
27 | margin-top: 37px;
28 | color: #4E41FF;
29 | font-family: FuturaBold;
30 | font-size: 21.68px;
31 | -webkit-letter-spacing: 0.13px;
32 | -moz-letter-spacing: 0.13px;
33 | -ms-letter-spacing: 0.13px;
34 | letter-spacing: 0.13px;
35 | text-align: center;
36 | }
37 |
38 | .c2 {
39 | margin-top: 99px;
40 | margin-left: 76px;
41 | }
42 |
43 | .c3 {
44 | position: absolute;
45 | bottom: 21px;
46 | right: 26px;
47 | }
48 |
49 |
52 | ![]()
65 |
76 | `;
77 |
--------------------------------------------------------------------------------
/resources/app/helpers/calculations.test.js:
--------------------------------------------------------------------------------
1 |
2 | import * as fromCalculations from './calculations.ts';
3 |
4 | describe('React | Helpers', () => {
5 | describe('calcOpacityPercentage', () => {
6 | test('it returns the opacity percentage of a given hex color', () => {
7 | const color1 = '#ffffffff';
8 | const color2 = '#C2C2C2C2';
9 |
10 | expect(fromCalculations.calcOpacityPercentage(color1)).toEqual(100);
11 | expect(fromCalculations.calcOpacityPercentage(color2)).toEqual(76);
12 | });
13 | });
14 |
15 | describe('calculateCombinedLuminance', () => {
16 | test('it transforms a hex color to a relative luminance value', () => {
17 | const originalImplementation = fromCalculations.calculateLuminance;
18 | fromCalculations.calculateLuminance = jest.fn()
19 | .mockReturnValueOnce(0.730)
20 | .mockReturnValueOnce(0.056)
21 | .mockReturnValueOnce(0.246);
22 |
23 | expect(Number(fromCalculations.calculateCombinedLuminance('RANDOMVALUE').toFixed(4))).toEqual(0.213);
24 | fromCalculations.calculateLuminance = originalImplementation;
25 | });
26 | });
27 |
28 | describe('calculateLuminance', () => {
29 | test('it calculates the luminance of a single Hex', () => {
30 | expect(Number(fromCalculations.calculateLuminance('FF').toFixed(4))).toEqual(1);
31 | expect(Number(fromCalculations.calculateLuminance('AA').toFixed(4))).toEqual(0.4020);
32 | expect(Number(fromCalculations.calculateLuminance('11').toFixed(4))).toEqual(0.0056);
33 | expect(Number(fromCalculations.calculateLuminance('00').toFixed(4))).toEqual(0);
34 | });
35 | });
36 |
37 | describe('calculateContrast', () => {
38 | test('it returns the luminance of a color', () => {
39 | const color1 = '#EEEEEEFF';
40 | const color2 = '#DE438FFF';
41 |
42 | expect(fromCalculations.calculateContrast(color1)).toEqual(1.16);
43 | expect(fromCalculations.calculateContrast(color2)).toEqual(3.96);
44 | });
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/resources/app/helpers/calculations.ts:
--------------------------------------------------------------------------------
1 | import { ColorResult } from 'react-color';
2 | import * as calculations from './calculations'; // eslint-disable-line import/no-self-import
3 |
4 | export const calculateColorWithAlpha = (targetColor: ColorResult): string => {
5 | const { rgb: { a: alpha = 100 } } = targetColor;
6 | const alphaBase16 = Math.round(alpha * 255).toString(16).padStart(2, '0');
7 | return `${targetColor.hex}${alphaBase16}`;
8 | };
9 |
10 | export const calcOpacityPercentage = (hexColor: string) => {
11 | if (hexColor.length > 7) {
12 | const hexOpacity = hexColor.substr(7, 9);
13 | return Math.round(parseInt(hexOpacity, 16) / 2.55);
14 | }
15 | return 100;
16 | };
17 |
18 | export const calculateLuminance = (color: string) => {
19 | // Rebasing the incoming hex color to a value between 0 and 1, 0 being 0% intensity, and 1 being 100% intensity
20 | const rebasedColor = parseInt(color, 16) / 255;
21 |
22 | /**
23 | * There are 2 different ways to calculate the Luminance of a color, depending on the input value.
24 | * When the color intensity is lower than 3.928%, meaning black or really dark grey, we use the first method.
25 | * When the color intensity is higher we use the second method.
26 | */
27 |
28 | if (rebasedColor <= 0.03928) {
29 | return rebasedColor / 12.92;
30 | }
31 |
32 | return Math.pow((rebasedColor + 0.055) / 1.055, 2.4); // eslint-disable-line no-restricted-properties
33 | };
34 |
35 | export const calculateCombinedLuminance = (hexColor: string) => {
36 | const cleanedColor = hexColor.substr(1); // Remove the # of the incoming hex color
37 | const R = cleanedColor.substr(0, 2); // Grab the first and second chars in the color, representing the red value
38 | const G = cleanedColor.substr(2, 2); // Grab the third and fourth chars in the color, representing the green value
39 | const B = cleanedColor.substr(4, 2); // Grab the fifth and sixth chars in the color, representing the blue value
40 |
41 | /**
42 | * Here we calculate the Luminance of a color in the RGB space
43 | * The numbers that we use to multiply the calculateLuminance of R, G, and B is how much the light contributes
44 | * to the intensity perceived by humans. Green light contributes the most, and blue the least.
45 | *
46 | * More info here: https://en.wikipedia.org/wiki/Relative_luminance
47 | */
48 | return (
49 | 0.2126 * calculations.calculateLuminance(R)
50 | + 0.7152 * calculations.calculateLuminance(G)
51 | + 0.0722 * calculations.calculateLuminance(B)
52 | );
53 | };
54 |
55 | export const calculateContrast = (color: string) => {
56 | const colorLuminance = calculateCombinedLuminance(color);
57 | /**
58 | * The luminance of a color is represented by a color between 0 and 1.
59 | * Black has a luminosity of 0, meaning it reflects none of the light.
60 | * White has a luminosity of 1, meaning it reflects all the light the falls on it.
61 | */
62 | const whiteLuminance = 1;
63 |
64 | if (colorLuminance === whiteLuminance) return 0;
65 |
66 | return Number(((whiteLuminance + 0.05) / (colorLuminance + 0.05)).toFixed(2));
67 | };
68 |
--------------------------------------------------------------------------------
/resources/app/helpers/replace-color.test.ts:
--------------------------------------------------------------------------------
1 | import { replaceColor } from './replace-color';
2 |
3 | describe('replaceColor', () => {
4 | const colorToReplace = '#ffffff';
5 | const targetColor = '#000000';
6 |
7 | test('should remove the colorToReplace from the colors', () => {
8 | const colors = {
9 | [colorToReplace]: ['whiteLayer'],
10 | [targetColor]: ['blackLayer'],
11 | };
12 |
13 | expect(colors[colorToReplace]).toBeDefined();
14 |
15 | const updatedColors = replaceColor(colors, colorToReplace, targetColor);
16 |
17 | expect(updatedColors[colorToReplace]).toBeUndefined();
18 | });
19 |
20 | test('if targetColor already exist, should append it the colorToReplace layers', () => {
21 | const colors = {
22 | [colorToReplace]: ['whiteLayer'],
23 | [targetColor]: ['blackLayer'],
24 | };
25 |
26 | expect(replaceColor(colors, colorToReplace, targetColor)).toEqual({
27 | [targetColor]: ['blackLayer', 'whiteLayer'],
28 | });
29 | });
30 |
31 | test('if targetColor does not exist, should add it with the colorToReplace layers', () => {
32 | const colors = {
33 | [colorToReplace]: ['whiteLayer'],
34 | };
35 |
36 | expect(replaceColor(colors, colorToReplace, targetColor)).toEqual({
37 | [targetColor]: ['whiteLayer'],
38 | });
39 | });
40 |
41 | test('should throw an exception if colorToReplace is not in colors', () => {
42 | const colors = {};
43 | const error = `colorToReplace ${colorToReplace} not present in colors ${JSON.stringify(colors, null, 2)}`;
44 |
45 | expect(() => replaceColor({}, colorToReplace, targetColor)).toThrowError(error);
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/resources/app/helpers/replace-color.ts:
--------------------------------------------------------------------------------
1 | import { omit } from 'lodash';
2 |
3 | export const replaceColor = (colors: any, colorToReplace: string, targetColor: string) => {
4 | colorToReplace = colorToReplace.toLowerCase();
5 | targetColor = targetColor.toLowerCase();
6 |
7 | if (colorToReplace === targetColor) {
8 | return null;
9 | }
10 | const updatedColorLayers = colors[colorToReplace];
11 |
12 | if (!updatedColorLayers) {
13 | throw new Error(
14 | `colorToReplace ${colorToReplace} not present in colors ${JSON.stringify(colors, null, 2)}`,
15 | );
16 | }
17 |
18 | const targetLayers = !colors[targetColor] ? updatedColorLayers : [...colors[targetColor], ...updatedColorLayers];
19 |
20 | return {
21 | ...omit(colors, colorToReplace),
22 | [targetColor]: targetLayers,
23 | };
24 | };
25 |
--------------------------------------------------------------------------------
/resources/app/helpers/transform-sketch-colormap.test.ts:
--------------------------------------------------------------------------------
1 | import { ColorWithLayers } from '../models/color-with-layers.model';
2 | import { SketchColorMap, SketchColorMapLayer, SketchColorMapLayerParent } from '../models/sketch-color-map.model';
3 | import { transformSketchColorMap } from './transform-sketch-colormap';
4 | import { LayerType } from '../../../enums/layer-type.enum';
5 | import { ColorType } from '../../../enums/color-type.enum';
6 |
7 | const createSketchColorMapLayer = (
8 | name: string,
9 | type: string,
10 | parents: { name: string; type: string }[] = [],
11 | ): SketchColorMapLayer => {
12 | const inputLayer = {
13 | id: `id-${name}`,
14 | name,
15 | type,
16 | colorType: ColorType.fill,
17 | parents: [] as SketchColorMapLayerParent[],
18 | };
19 |
20 | if (parents.length) {
21 | parents.forEach(({ name: parentName, type: parentType }) => {
22 | const parent = { id: `id-${parentName}`, name: parentName, type: parentType };
23 | inputLayer.parents.push(parent);
24 | });
25 | }
26 |
27 | return inputLayer;
28 | };
29 |
30 | describe('createTreeStructure', () => {
31 | let input: SketchColorMap;
32 | let output: ColorWithLayers[];
33 |
34 | afterEach(() => {
35 | expect(transformSketchColorMap(input)).toEqual(output);
36 | });
37 |
38 | test('transform color map with no layers to an array of colors with no layers', () => {
39 | input = { red: [], yellow: [] };
40 |
41 | output = [{ color: 'red', layers: [] }, { color: 'yellow', layers: [] }];
42 | });
43 |
44 | test('transform color map with no parents to an array of colors with a layer without children', () => {
45 | input = {
46 | red: [createSketchColorMapLayer('Rectangle1', 'ShapePath')],
47 | };
48 |
49 | output = [
50 | {
51 | color: 'red',
52 | layers: [{
53 | id: 'id-Rectangle1', name: 'Rectangle1', type: 'ShapePath', colorType: ColorType.fill,
54 | }],
55 | },
56 | ];
57 | });
58 |
59 | test('transform color map with parents to an array of colors with layers', () => {
60 | input = {
61 | red: [
62 | createSketchColorMapLayer(
63 | 'Rectangle',
64 | 'ShapePath',
65 | [
66 | { name: LayerType.page, type: LayerType.page },
67 | { name: LayerType.group, type: LayerType.group },
68 | ]),
69 | ],
70 | };
71 |
72 | output = [
73 | {
74 | color: 'red',
75 | layers: [
76 | {
77 | id: 'id-Page',
78 | name: LayerType.page,
79 | type: LayerType.page,
80 | children: [
81 | {
82 | id: 'id-Group',
83 | name: LayerType.group,
84 | type: LayerType.group,
85 | children: [{
86 | id: 'id-Rectangle', name: 'Rectangle', type: 'ShapePath', colorType: ColorType.fill,
87 | }],
88 | },
89 | ],
90 | },
91 | ],
92 | },
93 | ];
94 | });
95 |
96 | test('transform color map with different parents to an array of colors with layers', () => {
97 | input = {
98 | red: [
99 | createSketchColorMapLayer('Rectangle1', 'ShapePath', [
100 | { name: 'Page1', type: LayerType.page },
101 | { name: 'Artboard1', type: LayerType.artboard },
102 | ]),
103 | createSketchColorMapLayer('Rectangle2', 'ShapePath', [
104 | { name: 'Page2', type: LayerType.page },
105 | { name: 'Artboard2', type: LayerType.artboard },
106 | ]),
107 | ],
108 | };
109 |
110 | output = [
111 | {
112 | color: 'red',
113 | layers: [
114 | {
115 | name: 'Page1',
116 | id: 'id-Page1',
117 | type: LayerType.page,
118 | children: [
119 | {
120 | name: 'Artboard1',
121 | id: 'id-Artboard1',
122 | type: LayerType.artboard,
123 | children: [{
124 | id: 'id-Rectangle1', name: 'Rectangle1', type: 'ShapePath', colorType: ColorType.fill,
125 | }],
126 | },
127 | ],
128 | },
129 | {
130 | id: 'id-Page2',
131 | name: 'Page2',
132 | type: LayerType.page,
133 | children: [
134 | {
135 | id: 'id-Artboard2',
136 | name: 'Artboard2',
137 | type: LayerType.artboard,
138 | children: [{
139 | id: 'id-Rectangle2', name: 'Rectangle2', type: 'ShapePath', colorType: ColorType.fill,
140 | }],
141 | },
142 | ],
143 | },
144 | ],
145 | },
146 | ];
147 | });
148 |
149 | test('transform color map with common parents to an array of colors with grouped layers', () => {
150 | input = {
151 | red: [
152 | createSketchColorMapLayer('Rectangle1', 'ShapePath', [
153 | { name: LayerType.page, type: LayerType.page },
154 | { name: LayerType.artboard, type: LayerType.artboard },
155 | ]),
156 | createSketchColorMapLayer('Rectangle2', 'ShapePath', [
157 | { name: LayerType.page, type: LayerType.page },
158 | { name: LayerType.artboard, type: LayerType.artboard },
159 | ]),
160 | ],
161 | };
162 |
163 | output = [
164 | {
165 | color: 'red',
166 | layers: [
167 | {
168 | name: LayerType.page,
169 | id: 'id-Page',
170 | type: LayerType.page,
171 | children: [
172 | {
173 | name: LayerType.artboard,
174 | id: 'id-Artboard',
175 | type: LayerType.artboard,
176 | children: [
177 | {
178 | id: 'id-Rectangle1', name: 'Rectangle1', type: 'ShapePath', colorType: ColorType.fill,
179 | },
180 | {
181 | id: 'id-Rectangle2', name: 'Rectangle2', type: 'ShapePath', colorType: ColorType.fill,
182 | },
183 | ],
184 | },
185 | ],
186 | },
187 | ],
188 | },
189 | ];
190 | });
191 |
192 | test('transform color map with partially common parents to an array of colors with grouped layers', () => {
193 | input = {
194 | red: [
195 | createSketchColorMapLayer('Rectangle2', 'ShapePath', [
196 | { name: LayerType.page, type: LayerType.page },
197 | { name: LayerType.artboard, type: LayerType.artboard },
198 | ]),
199 | createSketchColorMapLayer('Rectangle1', 'ShapePath', [
200 | { name: LayerType.page, type: LayerType.page },
201 | { name: LayerType.artboard, type: LayerType.artboard },
202 | { name: LayerType.group, type: LayerType.group },
203 | ]),
204 | createSketchColorMapLayer('Rectangle3', 'ShapePath', [
205 | { name: LayerType.page, type: LayerType.page },
206 | { name: LayerType.artboard, type: LayerType.artboard },
207 | { name: LayerType.group, type: LayerType.group },
208 | ]),
209 | ],
210 | };
211 |
212 | output = [
213 | {
214 | color: 'red',
215 | layers: [
216 | {
217 | name: LayerType.page,
218 | id: 'id-Page',
219 | type: LayerType.page,
220 | children: [
221 | {
222 | name: LayerType.artboard,
223 | id: 'id-Artboard',
224 | type: LayerType.artboard,
225 | children: [
226 | {
227 | id: 'id-Rectangle2',
228 | name: 'Rectangle2',
229 | type: 'ShapePath',
230 | colorType: ColorType.fill,
231 | },
232 | {
233 | name: LayerType.group,
234 | id: 'id-Group',
235 | type: LayerType.group,
236 | children: [
237 | {
238 | id: 'id-Rectangle1',
239 | name: 'Rectangle1',
240 | type: 'ShapePath',
241 | colorType: ColorType.fill,
242 | },
243 | {
244 | id: 'id-Rectangle3',
245 | name: 'Rectangle3',
246 | type: 'ShapePath',
247 | colorType: ColorType.fill,
248 | },
249 | ],
250 | },
251 | ],
252 | },
253 | ],
254 | },
255 | ],
256 | },
257 | ];
258 | });
259 | });
260 |
--------------------------------------------------------------------------------
/resources/app/helpers/transform-sketch-colormap.ts:
--------------------------------------------------------------------------------
1 | import { omit } from 'lodash';
2 | import { Layer, ColorWithLayers } from '../models/color-with-layers.model';
3 |
4 | import { SketchColorMap, SketchColorMapLayer } from '../models/sketch-color-map.model';
5 |
6 | // there is only one child for each layer in the hierarchy
7 | const getChild = (hierarchy: Layer[]): Layer => {
8 | if (hierarchy.length === 1) {
9 | return hierarchy[0];
10 | }
11 |
12 | return {
13 | ...hierarchy[0],
14 | children: [getChild(hierarchy.splice(1))],
15 | };
16 | };
17 |
18 | const getHierarchy = (inputLayer: SketchColorMapLayer): Layer[] => {
19 | if (inputLayer.parents.length) {
20 | return [...inputLayer.parents, omit(inputLayer, 'parents')];
21 | }
22 |
23 | return [omit(inputLayer, 'parents')];
24 | };
25 |
26 | const mapInputLayerToLayer = (inputLayer: SketchColorMapLayer): Layer => {
27 | const hierarchy = getHierarchy(inputLayer);
28 | return getChild(hierarchy);
29 | };
30 |
31 | const isSketchColorMapLayerType = (layer: SketchColorMapLayer | Layer): layer is SketchColorMapLayer => {
32 | return (
55 |
62 |
56 | No colours found.
57 |
58 |
59 | Now that’s minimilist.
60 |
61 |
68 |
74 |
75 |