@dnanpm/styleguide 2.1.0 → 2.2.1

package/build/es/themes/globalStyles.d.ts

@@ -99,7 +99,7 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }>>;
-export declare const CheckboxInput_RadioInput: import("styled-components").StyledComponent<"input", {
+export declare const CheckboxAndRadioInputCore: import("styled-components").StyledComponent<"input", {
     base: {
         baseHeight: {
             value: number;

package/build/es/themes/globalStyles.js

@@ -1,5 +1,5 @@
-import styled, { css, createGlobalStyle } from './styled.js';
 import { media, getMultipliedSize, getDividedSize } from '../utils/styledUtils.js';
+import styled, { css, createGlobalStyle } from './styled.js';
 
 const globalStyles = css `
     *,
@@ -175,7 +175,7 @@ const globalStyles = css `
         font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
     }
 `;
-const CheckboxInput_RadioInput = styled.input `
+const CheckboxAndRadioInputCore = styled.input `
     display: inline-grid;
     appearance: none;
     place-content: center;
@@ -232,4 +232,4 @@ createGlobalStyle `
     ${globalStyles}
 `;
 
-export { CheckboxInput_RadioInput, globalStyles };
+export { CheckboxAndRadioInputCore, globalStyles };

package/build/es/themes/styled.js

@@ -1,6 +1,6 @@
 import createStyled from '../utils/createStyled.js';
 
-const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet, } = createStyled();
+const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled();
 
 export default styled;
 export { ServerStyleSheet, ThemeProvider, createGlobalStyle, css, keyframes };

package/build/es/themes/themeComponents/fontSize.js

@@ -14,10 +14,6 @@ const fontSize = {
     h4: '1.25rem',
     h5: '1rem',
 };
-var fontSize$1 = {
-    h1: fontSize.h1L,
-    h2: fontSize.h2M,
-    ...fontSize,
-};
+var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 
 export default fontSize$1;

package/build/es/themes/themeComponents/lineHeight.js

@@ -15,10 +15,6 @@ const lineHeight = {
     h4: '1.5rem',
     h5: '1rem',
 };
-var lineHeight$1 = {
-    h1: lineHeight.h1L,
-    h2: lineHeight.h2M,
-    ...lineHeight,
-};
+var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 
 export default lineHeight$1;

package/build/es/utils/createStyled.d.ts

@@ -1,5 +1,5 @@
 import * as styledComponents from 'styled-components';
-import { ThemeInterface } from '../themes/theme';
+import type { ThemeInterface } from '../themes/theme';
 declare function createStyled<T extends ThemeInterface>(): {
     styled: styledComponents.ThemedStyledInterface<T>;
     css: styledComponents.ThemedCssFunction<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "2.1.0",
+    "version": "2.2.1",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -20,7 +20,8 @@
         "url": "https://github.com/DNA-Online-Services/b2cwebshop-styleguide.git"
     },
     "scripts": {
-        "tslint-check": "cross-env tslint -c ./tslint.json 'src/components/**/*.{ts,tsx}'",
+        "eslint": "cross-env eslint --fix './**/*.{ts,tsx}'",
+        "eslint:check": "cross-env eslint './**/*.{ts,tsx}'",
         "eject": "react-scripts eject",
         "styleguide": "styleguidist server",
         "styleguide:build": "styleguidist build",
@@ -31,13 +32,10 @@
         "unlock": "echo 'check if its ours ,remove it and ours.'",
         "condtar": "npm run lock && ( [ -s dnanpm-styleguide-snapshot.tgz ] || npm run tar) && npm run unlock",
         "tar": "npm run clean && npm ci && npm run build && npm pack && mv dnanpm-styleguide*.tgz dnanpm-styleguide-snapshot.tgz",
-        "prepublishOnly": "npm run clean && npm ci && npm run tslint-check && npm run build",
+        "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run build",
         "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json}'",
         "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json}'",
-        "preCommit": "npm run tslint-check && npm run format:check"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
+        "preCommit": "npm run eslint:check && npm run format:check"
     },
     "browserslist": [
         ">0.2%",
@@ -51,12 +49,24 @@
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
         "@types/react-modal": "^3.10.6",
-        "@types/react-select": "^4.0.13",
+        "@types/react-select": "^5.0.1",
         "@types/react-sizes": "^2.0.0",
         "@types/react-tooltip": "^3.11.0",
         "@types/styled-components": "^5.1.7",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
         "cross-env": "^7.0.3",
-        "prettier": "^2.2.1",
+        "eslint": "^8.20.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-jsdoc": "^39.3.3",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-prefer-arrow": "^1.2.3",
+        "eslint-plugin-react": "^7.30.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "prettier": "^2.7.1",
         "react": "^17.0.1",
         "react-docgen-typescript": "^1.20.5",
         "react-dom": "^17.0.1",
@@ -71,10 +81,6 @@
         "rollup-plugin-visualizer": "^4.2.0",
         "styled-components": "^5.2.1",
         "tslib": "^2.1.0",
-        "tslint": "^6.1.3",
-        "tslint-config-prettier": "^1.18.0",
-        "tslint-react": "^4.2.0",
-        "tslint-react-hooks": "^2.2.2",
         "typescript": "^4.1.3"
     },
     "dependencies": {
@@ -82,7 +88,7 @@
         "ramda": "^0.27.1",
         "react-modal": "^3.12.1",
         "react-progressive-image": "^0.6.0",
-        "react-select": "^5.2.1",
+        "react-select": "^5.4.0",
         "react-sizes": "^2.0.0",
         "react-spring": "^8.0.27",
         "react-tooltip": "4.1.0"

package/build/cjs/components/PixelLoader/PixelLoaderStyles.d.ts

@@ -1,203 +0,0 @@
-import LoaderProps from './types/LoaderProps';
-declare const LoaderWrapper: import("styled-components").StyledComponent<"div", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, {}, never>;
-declare const Pixel: import("styled-components").StyledComponent<"div", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, LoaderProps, never>;
-/** @component */
-export { LoaderWrapper, Pixel };

package/build/cjs/components/PixelLoader/PixelLoaderStyles.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('../../themes/styled.js');
-
-const loading = styled.keyframes `
-    0% {
-        transform: scale(1);
-    }
-    20% {
-        transform: scale(1.4, 1.4);
-    }
-    40% {
-        transform: scale(1);
-    }
-`;
-const LoaderWrapper = styled['default'].div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.125rem;
-`;
-const Pixel = styled['default'].div `
-    background: ${props => (props && props.color ? props.color : 'currentColor')};
-    display: inline-block;
-    width: 0.625rem;
-    height: 0.625rem;
-    margin: 0.125rem;
-    animation: ${loading} 1s ease-in-out infinite;
-    animation-delay: ${props => props.delay}s;
-`;
-
-exports.LoaderWrapper = LoaderWrapper;
-exports.Pixel = Pixel;

package/build/es/components/PixelLoader/PixelLoaderStyles.d.ts

@@ -1,203 +0,0 @@
-import LoaderProps from './types/LoaderProps';
-declare const LoaderWrapper: import("styled-components").StyledComponent<"div", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, {}, never>;
-declare const Pixel: import("styled-components").StyledComponent<"div", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, LoaderProps, never>;
-/** @component */
-export { LoaderWrapper, Pixel };

package/build/es/components/PixelLoader/PixelLoaderStyles.js

@@ -1,30 +0,0 @@
-import styled, { keyframes } from '../../themes/styled.js';
-
-const loading = keyframes `
-    0% {
-        transform: scale(1);
-    }
-    20% {
-        transform: scale(1.4, 1.4);
-    }
-    40% {
-        transform: scale(1);
-    }
-`;
-const LoaderWrapper = styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.125rem;
-`;
-const Pixel = styled.div `
-    background: ${props => (props && props.color ? props.color : 'currentColor')};
-    display: inline-block;
-    width: 0.625rem;
-    height: 0.625rem;
-    margin: 0.125rem;
-    animation: ${loading} 1s ease-in-out infinite;
-    animation-delay: ${props => props.delay}s;
-`;
-
-export { LoaderWrapper, Pixel };