gantri-components 0.0.0-semantic-release

package/lib/styles/theme.d.ts

@@ -0,0 +1,180 @@
+import { DefaultTheme } from 'styled-components';
+import { Property } from 'csstype';
+import { ResolutionAwareProp } from '../types/resolution-aware-prop.type';
+export declare type PaletteColor = 'blue_100' | 'blue_200' | 'blue_300' | 'blue_400' | 'blue_500' | 'gold_100' | 'gold_200' | 'gold_300' | 'gold_400' | 'gold_500' | 'green_100' | 'green_200' | 'green_300' | 'green_400' | 'green_500' | 'monochrome_050' | 'monochrome_100' | 'monochrome_200' | 'monochrome_300' | 'monochrome_400' | 'monochrome_500' | 'monochrome_600' | 'monochrome_700' | 'monochrome_800' | 'monochrome_900' | 'monochrome_black' | 'monochrome_white' | 'pink_300' | 'pink_400' | 'pink_500' | 'red_100' | 'red_200' | 'red_300' | 'red_400' | 'red_500' | 'translucent_black' | 'translucent_cream' | 'translucent_white' | 'yellow_100' | 'yellow_200' | 'yellow_300' | 'yellow_400' | 'yellow_500' | string;
+export declare const palette: Record<PaletteColor, string>;
+declare module 'styled-components' {
+    interface FontInfo {
+        family: string;
+        familyMedium?: string;
+        familySmaller?: string;
+        fontWeight?: Property.FontWeight;
+        lineHeight: string;
+        lineHeightMedium?: string;
+        lineHeightSmaller: string;
+        size: string;
+        sizeMedium?: string;
+        sizeSmaller: string;
+    }
+    interface DefaultTheme {
+        border: string;
+        borderRadius: string;
+        colors: {
+            dividers: {
+                t1: PaletteColor;
+                t2: PaletteColor;
+                t3: PaletteColor;
+            };
+            iconography: {
+                alert: PaletteColor;
+                link: PaletteColor;
+                t1: PaletteColor;
+                t2: PaletteColor;
+                t3: PaletteColor;
+                warning: PaletteColor;
+            };
+            palette: Record<PaletteColor, string>;
+            surface: {
+                alert: PaletteColor;
+                hover: PaletteColor;
+                level1: PaletteColor;
+                level2: PaletteColor;
+                level3: PaletteColor;
+                selected: PaletteColor;
+                success: PaletteColor;
+                successAlt: PaletteColor;
+                warning: PaletteColor;
+            };
+            typography: {
+                alert: PaletteColor;
+                alt: PaletteColor;
+                link: PaletteColor;
+                success: PaletteColor;
+                t1: PaletteColor;
+                t2: PaletteColor;
+                t3: PaletteColor;
+                warning: PaletteColor;
+            };
+        };
+        dimensions: {
+            gridGutter: ResolutionAwareProp<string>;
+            headerHeight: ResolutionAwareProp<string>;
+            maxWidth: string;
+            spacing: {
+                s1: string;
+                s2: string;
+                s3: string;
+                s4: string;
+                s5: string;
+                s6: string;
+            };
+        };
+        fonts: {
+            badge: FontInfo;
+            boldFontFamily: string;
+            h1: FontInfo;
+            h2: FontInfo;
+            h3: FontInfo;
+            h4: FontInfo;
+            h5: FontInfo;
+            hero: FontInfo;
+            link: FontInfo;
+            p0: FontInfo;
+            p1: FontInfo;
+            p2: FontInfo;
+            p3: FontInfo;
+            regularFontFamily: string;
+        };
+        name: string;
+        shadow: string;
+        transitions: {
+            base: string;
+            slow: string;
+            slowest: string;
+            turtle: string;
+        };
+    }
+}
+declare const lightTheme: DefaultTheme;
+declare const darkTheme: DefaultTheme;
+export declare const getThemeColor: (color: PaletteColor, currentTheme?: DefaultTheme) => string;
+declare const combinationsByColor: (appTheme?: DefaultTheme) => {
+    alert: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    black: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    blue: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    gold: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    green: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    grey: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    greyLight: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    pink: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    primary: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    secondary: {
+        background: string;
+        hover: string;
+        selected: string;
+    };
+    secondaryAlt: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    white: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    yellow: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+};
+export { lightTheme, darkTheme, combinationsByColor };

package/lib/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export { ThemeProvider } from './theme-provider';

package/lib/theme/theme-provider.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { DefaultTheme } from 'styled-components';
+export declare const ThemeProvider: FC<{
+    theme?: DefaultTheme;
+}>;

package/lib/theme/theme.d.ts

@@ -0,0 +1,180 @@
+import { DefaultTheme } from 'styled-components';
+import { Property } from 'csstype';
+import { ResolutionAwareProp } from '../types/resolution-aware-prop.type';
+export declare type PaletteColor = 'blue_100' | 'blue_200' | 'blue_300' | 'blue_400' | 'blue_500' | 'gold_100' | 'gold_200' | 'gold_300' | 'gold_400' | 'gold_500' | 'green_100' | 'green_200' | 'green_300' | 'green_400' | 'green_500' | 'monochrome_050' | 'monochrome_100' | 'monochrome_200' | 'monochrome_300' | 'monochrome_400' | 'monochrome_500' | 'monochrome_600' | 'monochrome_700' | 'monochrome_800' | 'monochrome_900' | 'monochrome_black' | 'monochrome_white' | 'pink_300' | 'pink_400' | 'pink_500' | 'red_100' | 'red_200' | 'red_300' | 'red_400' | 'red_500' | 'translucent_black' | 'translucent_cream' | 'translucent_white' | 'yellow_100' | 'yellow_200' | 'yellow_300' | 'yellow_400' | 'yellow_500' | string;
+export declare const palette: Record<PaletteColor, string>;
+declare module 'styled-components' {
+    interface FontInfo {
+        family: string;
+        familyMedium?: string;
+        familySmaller?: string;
+        fontWeight?: Property.FontWeight;
+        lineHeight: string;
+        lineHeightMedium?: string;
+        lineHeightSmaller: string;
+        size: string;
+        sizeMedium?: string;
+        sizeSmaller: string;
+    }
+    interface DefaultTheme {
+        border: string;
+        borderRadius: string;
+        colors: {
+            dividers: {
+                t1: PaletteColor;
+                t2: PaletteColor;
+                t3: PaletteColor;
+            };
+            iconography: {
+                alert: PaletteColor;
+                link: PaletteColor;
+                t1: PaletteColor;
+                t2: PaletteColor;
+                t3: PaletteColor;
+                warning: PaletteColor;
+            };
+            palette: Record<PaletteColor, string>;
+            surface: {
+                alert: PaletteColor;
+                hover: PaletteColor;
+                level1: PaletteColor;
+                level2: PaletteColor;
+                level3: PaletteColor;
+                selected: PaletteColor;
+                success: PaletteColor;
+                successAlt: PaletteColor;
+                warning: PaletteColor;
+            };
+            typography: {
+                alert: PaletteColor;
+                alt: PaletteColor;
+                link: PaletteColor;
+                success: PaletteColor;
+                t1: PaletteColor;
+                t2: PaletteColor;
+                t3: PaletteColor;
+                warning: PaletteColor;
+            };
+        };
+        dimensions: {
+            gridGutter: ResolutionAwareProp<string>;
+            headerHeight: ResolutionAwareProp<string>;
+            maxWidth: string;
+            spacing: {
+                s1: string;
+                s2: string;
+                s3: string;
+                s4: string;
+                s5: string;
+                s6: string;
+            };
+        };
+        fonts: {
+            badge: FontInfo;
+            boldFontFamily: string;
+            h1: FontInfo;
+            h2: FontInfo;
+            h3: FontInfo;
+            h4: FontInfo;
+            h5: FontInfo;
+            hero: FontInfo;
+            link: FontInfo;
+            p0: FontInfo;
+            p1: FontInfo;
+            p2: FontInfo;
+            p3: FontInfo;
+            regularFontFamily: string;
+        };
+        name: string;
+        shadow: string;
+        transitions: {
+            base: string;
+            slow: string;
+            slowest: string;
+            turtle: string;
+        };
+    }
+}
+declare const lightTheme: DefaultTheme;
+declare const darkTheme: DefaultTheme;
+export declare const getThemeColor: (color: PaletteColor, currentTheme?: DefaultTheme) => string;
+declare const combinationsByColor: (appTheme?: DefaultTheme) => {
+    alert: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    black: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    blue: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    gold: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    green: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    grey: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    greyLight: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    pink: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    primary: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    secondary: {
+        background: string;
+        hover: string;
+        selected: string;
+    };
+    secondaryAlt: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    white: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+    yellow: {
+        background: string;
+        color: string;
+        hover: string;
+        selected: string;
+    };
+};
+export { lightTheme, darkTheme, combinationsByColor };

package/lib/types/layout.d.ts

@@ -0,0 +1,8 @@
+import { AppSize, ResolutionAwareProp } from './resolution-aware-prop.type';
+export interface ExtractStyleFromResolutionAwarePropEntry {
+    cssProperty: string;
+    isImportant?: boolean;
+    lookIn?: any;
+    resolutionAwareProp: ResolutionAwareProp<any> | ResolutionAwareProp<any>[];
+    valueFormatter?: (value: any | any[], size: AppSize) => string;
+}

package/lib/types/resolution-aware-prop.type.d.ts

@@ -0,0 +1,7 @@
+export declare type AppSize = 'lg' | 'md' | 'sm' | string;
+export interface ResolutionAwarePropBase<T> {
+    lg?: T;
+    md?: T;
+    sm?: T;
+}
+export declare type ResolutionAwareProp<T> = T extends boolean ? boolean | ResolutionAwarePropBase<T> | any : T | ResolutionAwarePropBase<T>;

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "gantri-components",
+  "version": "0.0.0-semantic-release",
+  "main": "dist/index.cjs.js",
+  "module": "dist/src/index.js",
+  "types": "lib/index.d.ts",
+  "repository": "git@github.com:gantri/ui-library.git",
+  "author": "Danny <danny@gantri.com>",
+  "sideEffects": false,
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "prepare": "husky install",
+    "generate-icons": "npm run clean:svgs && npm run svg && npm run git-add:svgs",
+    "svg": "svgr -d src/components/icon/generated  src/assets/icons --icon --ext tsx --replace-attr-values \"#000={strokeColor}\" --replace-attr-values \"#8f8e8b={color}\" --replace-attr-values \"currentColor={color}\" --replace-attr-values \"strokeWidth={strokeWidth}\"",
+    "git-add:svgs": "cd src/components/icon/generated && git add --all",
+    "clean:svgs": "cd src/components/icon/generated && del-cli *.tsx"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@react-theming/storybook-addon": "^1.1.5",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.2",
+    "@semantic-release/npm": "^9.0.1",
+    "@semantic-release/release-notes-generator": "^10.0.3",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
+    "@storybook/theming": "^6.4.19",
+    "@svgr/cli": "^6.2.1",
+    "@types/lodash.isobject": "^3.0.6",
+    "@types/react": "^17.0.39",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
+    "babel-loader": "^8.2.3",
+    "del-cli": "^4.0.1",
+    "eslint": "^8.10.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-node": "^4.1.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.5",
+    "postcss": "^8.4.8",
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.70.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "typescript": "^4.6.2"
+  },
+  "dependencies": {
+    "@types/styled-components": "^5.1.24",
+    "lodash.isobject": "^3.0.2",
+    "styled-components": "^5.3.3",
+    "styled-media-query": "^2.1.2"
+  },
+  "files": [
+    "lib"
+  ],
+  "engines": {
+    "node": ">= 14.17.0",
+    "npm": "please-use-yarn",
+    "yarn": ">= 1.22.10"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix --quiet",
+      "prettier --write"
+    ],
+    "*.{md,html,css}": [
+      "prettier --write"
+    ]
+  }
+}