@frontify/guideline-blocks-settings 0.27.0 → 0.28.1

package/src/utilities/color/toHexString.ts

@@ -0,0 +1,10 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Color } from '@frontify/fondue';
+import tinycolor from '@ctrl/tinycolor';
+import { toShortRgba } from './toShortRgba';
+
+/**
+ * Maps color object of rgba values to hex alpha string.
+ */
+export const toHexString = (color: Color): string => tinycolor(toShortRgba(color)).toHexString();

package/src/utilities/color/toRgbaString.spec.ts

@@ -0,0 +1,12 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { toRgbaString } from './toRgbaString';
+import { describe, expect, test } from 'vitest';
+
+describe('toRgbaString', () => {
+    const data = [{ color: { red: 1, green: 2, blue: 3, alpha: 0.5 }, expected: 'rgba(1, 2, 3, 0.5)' }];
+
+    test.each(data)('validates against expected values', ({ color, expected }) => {
+        expect(toRgbaString(color)).toBe(expected);
+    });
+});

package/src/utilities/color/toRgbaString.ts

@@ -0,0 +1,14 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Color } from '@frontify/fondue';
+import tinycolor from '@ctrl/tinycolor';
+import { toShortRgba } from './toShortRgba';
+
+/**
+ * Maps color object of rgba values to rgba string.
+ *
+ * @param {Object} Color object
+ * @returns {String} To be used as css value.
+ */
+
+export const toRgbaString = (color: Color): string => tinycolor(toShortRgba(color)).toRgbString();

package/src/utilities/color/toShortRgba.spec.ts

@@ -0,0 +1,16 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { toShortRgba } from './toShortRgba';
+import { describe, expect, test } from 'vitest';
+
+describe('toShortRgba', () => {
+    const data = [
+        { color: { red: 50, green: 100, blue: 150 }, expected: { r: 50, g: 100, b: 150, a: 1 } },
+        { color: { red: 50, green: 100, blue: 150, alpha: 0.5 }, expected: { r: 50, g: 100, b: 150, a: 0.5 } },
+        { color: { r: 50, g: 100, b: 150, a: 0.5 }, expected: { r: 50, g: 100, b: 150, a: 0.5 } },
+    ];
+
+    test.each(data)('validates against expected values', ({ color, expected }) => {
+        expect(toShortRgba(color)).toStrictEqual(expected);
+    });
+});

package/src/utilities/color/toShortRgba.ts

@@ -0,0 +1,35 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Color } from '@frontify/fondue';
+
+type ShortNotationColor = {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+};
+
+/**
+ * Maps color object from long to short rgba notation.
+ *
+ * @param {Object} Color object
+ * @returns {Object} ShortNotationColor object
+ */
+
+export const toShortRgba = (color: unknown): ShortNotationColor => {
+    const isRgbaLongFormat = (value: Color) => {
+        const requiredKeys = ['red', 'green', 'blue'];
+        return typeof value === 'object' && requiredKeys.every((i) => value.hasOwnProperty(i));
+    };
+
+    const mapToShortFormat = (value: Color): ShortNotationColor => {
+        const alpha = typeof value.alpha === 'number' ? value.alpha : 1;
+        return { r: value.red, g: value.green, b: value.blue, a: alpha };
+    };
+
+    if (isRgbaLongFormat(color as Color)) {
+        return mapToShortFormat(color as Color);
+    }
+
+    return color as ShortNotationColor;
+};

package/src/utilities/index.ts

@@ -0,0 +1,5 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './color';
+export * from './moveItemInArray';
+export * from './react';

package/src/utilities/moveItemInArray.spec.ts

@@ -0,0 +1,17 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { moveItemInArray } from './moveItemInArray';
+
+describe('moveItemInArray', () => {
+    it.each([
+        [[], 0, 0, []],
+        [[1, 2, 3], 0, 0, [1, 2, 3]],
+        [[1, 2, 3], 0, 1, [2, 1, 3]],
+        [[1, 2, 3], 1, 0, [2, 1, 3]],
+        [[1, { a: 1 }, 3], 1, 0, [{ a: 1 }, 1, 3]],
+        [[{ a: 1 }, { b: 1 }, { c: 1 }], 1, 0, [{ b: 1 }, { a: 1 }, { c: 1 }]],
+    ])('move items accordingly', (items, from, to, expected) => {
+        expect(expected).toEqual(moveItemInArray(items as number[], from, to));
+    });
+});

package/src/utilities/moveItemInArray.ts

@@ -0,0 +1,21 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+/**
+ * Moves an item from the 'from' position to the 'to' position and updates the array
+ *
+ * @param {Array} array Array of items
+ * @param {Number} from Initial index of the item
+ * @param {Number} to New index of the item
+ * @returns {Array} New array with the item moved to the new position
+ */
+export const moveItemInArray = <T>(array: T[], from: number, to: number): T[] => {
+    const newArray = [...array];
+    const toIndex = to < 0 ? newArray.length + to : to;
+
+    if (toIndex >= 0 && toIndex < newArray.length) {
+        const slice = newArray.splice(from, 1)[0];
+        newArray.splice(toIndex, 0, slice);
+    }
+
+    return newArray;
+};

package/src/utilities/react/getBackgroundColorStyles.spec.ts

@@ -0,0 +1,18 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { getBackgroundColorStyles } from './getBackgroundColorStyles';
+import { describe, expect, it } from 'vitest';
+
+describe('getBackgroundColorStyles', () => {
+    it('should return a rgba background color', () => {
+        expect(getBackgroundColorStyles({ red: 0, green: 0, blue: 0, alpha: 0.5 })).toEqual({
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        });
+    });
+
+    it('should return a rgb background color', () => {
+        expect(getBackgroundColorStyles({ red: 255, green: 255, blue: 255 })).toEqual({
+            backgroundColor: 'rgb(255, 255, 255)',
+        });
+    });
+});

package/src/utilities/react/getBackgroundColorStyles.ts

@@ -0,0 +1,11 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { CSSProperties } from 'react';
+
+import { Color } from '@frontify/fondue';
+
+import { toRgbaString } from '../color';
+
+export const getBackgroundColorStyles = (backgroundColor: Color): CSSProperties => ({
+    backgroundColor: toRgbaString(backgroundColor),
+});

package/src/utilities/react/getBorderStyles.spec.ts

@@ -0,0 +1,39 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { BorderStyle } from '../../settings/types';
+import { getBorderStyles } from './getBorderStyles';
+import { describe, expect, it } from 'vitest';
+
+describe('getBorderStyles', () => {
+    it('should return the default border styles', () => {
+        expect(getBorderStyles()).toEqual({
+            borderStyle: 'solid',
+            borderWidth: '1px',
+            borderColor: 'rgb(234, 235, 235)',
+        });
+    });
+
+    it('should return a dashed border style', () => {
+        expect(getBorderStyles(BorderStyle.Dashed)).toEqual({
+            borderStyle: 'dashed',
+            borderWidth: '1px',
+            borderColor: 'rgb(234, 235, 235)',
+        });
+    });
+
+    it('should return a border width of 5px', () => {
+        expect(getBorderStyles(BorderStyle.Solid, '5px')).toEqual({
+            borderStyle: 'solid',
+            borderWidth: '5px',
+            borderColor: 'rgb(234, 235, 235)',
+        });
+    });
+
+    it('should return a border color of rgba(255, 0, 0, 0.5)', () => {
+        expect(getBorderStyles(BorderStyle.Solid, '1px', { red: 255, green: 0, blue: 0, alpha: 0.5 })).toEqual({
+            borderStyle: 'solid',
+            borderWidth: '1px',
+            borderColor: 'rgba(255, 0, 0, 0.5)',
+        });
+    });
+});

package/src/utilities/react/getBorderStyles.ts

@@ -0,0 +1,21 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { CSSProperties } from 'react';
+
+import { Color } from '@frontify/fondue';
+
+import { BorderStyle, borderStyleMap } from '../../settings/types';
+import { BORDER_COLOR_DEFAULT_VALUE } from '../../settings/defaultValues';
+import { toRgbaString } from '../color';
+
+export const getBorderStyles = (
+    style = BorderStyle.Solid,
+    borderWidth = '1px',
+    color = BORDER_COLOR_DEFAULT_VALUE as Color
+): CSSProperties => {
+    return {
+        borderStyle: borderStyleMap[style],
+        borderWidth,
+        borderColor: toRgbaString(color),
+    };
+};

package/src/utilities/react/getRadiusStyles.spec.ts

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Radius } from '../../settings/types';
+import { getRadiusStyles } from './getRadiusStyles';
+import { describe, expect, it } from 'vitest';
+
+describe('getRadiusStyles', () => {
+    it('should return border radius 0px', () => {
+        expect(getRadiusStyles(Radius.None, false)).toEqual({
+            borderRadius: '0px',
+        });
+    });
+
+    it('should return border radius 4px', () => {
+        expect(getRadiusStyles(Radius.Medium, false)).toEqual({
+            borderRadius: '4px',
+        });
+    });
+
+    it('should return custom radius of 20px', () => {
+        expect(getRadiusStyles(Radius.None, true, 20)).toEqual({
+            borderRadius: 20,
+        });
+    });
+});

package/src/utilities/react/getRadiusStyles.ts

@@ -0,0 +1,8 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { CSSProperties } from 'react';
+import { Radius, radiusStyleMap } from '../../settings/types';
+
+export const getRadiusStyles = (radiusChoice: Radius, hasRadius = false, radiusValue?: number): CSSProperties => ({
+    borderRadius: hasRadius ? radiusValue : radiusStyleMap[radiusChoice],
+});

package/src/utilities/react/index.ts

@@ -0,0 +1,6 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './getBackgroundColorStyles';
+export * from './getBorderStyles';
+export * from './getRadiusStyles';
+export * from './joinClassNames';

package/src/utilities/react/joinClassNames.spec.ts

@@ -0,0 +1,18 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { joinClassNames } from './joinClassNames';
+import { describe, expect, test } from 'vitest';
+
+describe('joinClassNames', () => {
+    const data = [
+        { classes: ['lorem', undefined, false], expected: 'lorem' },
+        { classes: ['lorem', 'ipsum'], expected: 'lorem ipsum' },
+        { classes: ['lorem', ''], expected: 'lorem' },
+        { classes: ['lorem', ' '], expected: 'lorem  ' },
+        { classes: [], expected: '' },
+    ];
+
+    test.each(data)('validate correctly values', ({ classes, expected }) => {
+        expect(joinClassNames(classes)).toBe(expected);
+    });
+});

package/src/utilities/react/joinClassNames.ts

@@ -0,0 +1,10 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+/**
+ * Cleans and joins an array of inputs with possible undefined or boolean values.
+ *
+ * @param {Array} classNames Array of class names
+ * @returns Clean string to be used for class name.
+ */
+export const joinClassNames = (classNames: (string | undefined | boolean)[]): string =>
+    classNames.filter(Boolean).join(' ');

package/tailwind.config.js

@@ -0,0 +1,27 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    presets: [require('@frontify/fondue/tailwind')],
+    content: ['src/**/*.{ts,tsx}'],
+    corePlugins: {
+        preflight: false,
+    },
+    theme: {
+        extend: {
+            colors: {
+                'blank-state-weak': '#ABADAD',
+                'blank-state-weak-inverse': '#FFFFFF',
+                'blank-state-shaded': '#727474',
+                'blank-state-shaded-inverse': '#FAFAFA',
+                'blank-state-weighted': '#696B6B',
+                'blank-state-weighted-inverse': '#F1F1F1',
+                'blank-state-hover': '#1A1C1C',
+                'blank-state-hover-inverse': '#FFFFFF',
+                'blank-state-pressed': '#080808',
+                'blank-state-pressed-inverse': '#F1F1F1',
+                'blank-state-line': '#A3A5A5',
+                'blank-state-line-hover': '#1A1C1C',
+            },
+        },
+    },
+};

package/tsconfig.json

@@ -14,11 +14,13 @@
         "sourceMap": true,
         "strict": true,
         "target": "es6",
+        "jsx": "react-jsx",
         "lib": ["dom", "dom.iterable", "esnext"],
         "resolveJsonModule": true,
         "declaration": true,
         "esModuleInterop": true,
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "types": ["cypress", "node", "cypress-real-events"]
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules", "dist"]

package/vite.config.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 import { dependencies as dependenciesMap } from './package.json';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
@@ -9,6 +9,16 @@ const dependencies = Object.keys(dependenciesMap);
 
 export default defineConfig({
     plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
+    resolve: {
+        mainFields: ['module', 'main'],
+    },
+    test: {
+        environment: 'happy-dom',
+        deps: {
+            inline: ['clsx', '@juggle/resize-observer'],
+        },
+        setupFiles: ['setupTests.ts'],
+    },
     build: {
         lib: {
             entry: resolve(__dirname, 'src/index.ts'),