gantri-components 1.7.8 → 1.9.0

package/dist/lib/components/stack/stack.types.d.ts

@@ -0,0 +1,3 @@
+import { GridProps } from "../grid/grid.types";
+export interface StackProps extends GridProps {
+}

package/dist/lib/components/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './typography';

package/dist/lib/components/typography/typography.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TypographyProps } from './typography.types';
+export declare const variantToType: {
+    readonly badge: "span";
+    readonly hero: "h1";
+    readonly p0: "p";
+    readonly p1: "p";
+    readonly p2: "p";
+    readonly p3: "p";
+};
+export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<unknown>>;

package/dist/lib/components/typography/typography.presets.d.ts

@@ -0,0 +1,2 @@
+import { TypographyProps } from './typography.types';
+export declare const TypographyPresets: TypographyProps;

package/dist/lib/components/typography/typography.styles.d.ts

@@ -0,0 +1,2 @@
+import { TypographyProps } from './typography.types';
+export declare const StyledText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, TypographyProps, never>;

package/dist/lib/components/typography/typography.types.d.ts

@@ -0,0 +1,46 @@
+import { Property } from 'csstype';
+import { DefaultTheme } from 'styled-components';
+import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
+export declare type TextAlign = 'string' | 'left' | 'center' | 'right' | 'unset';
+export declare type TextVariant = 'p0' | 'p1' | 'p2' | 'p3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'hero';
+export declare type TextStyle = 'regular' | 'bold';
+export interface TypographyProps {
+    align?: ResolutionAwareProp<string>;
+    alignSelf?: ResolutionAwareProp<Property.AlignSelf>;
+    color?: keyof DefaultTheme['colors']['typography'];
+    display?: ResolutionAwareProp<Property.Display>;
+    fontSize?: ResolutionAwareProp<Property.Font>;
+    fontWeight?: Property.FontWeight;
+    hidden?: ResolutionAwareProp<boolean>;
+    horizontalMargin?: ResolutionAwareProp<Property.Margin>;
+    horizontalPadding?: ResolutionAwareProp<Property.Padding>;
+    htmlFor?: string;
+    htmlText?: string;
+    justifySelf?: ResolutionAwareProp<Property.JustifySelf>;
+    letterSpacing?: ResolutionAwareProp<Property.LetterSpacing>;
+    lineHeight?: ResolutionAwareProp<Property.LineHeight>;
+    margin?: ResolutionAwareProp<Property.Margin>;
+    marginBottom?: ResolutionAwareProp<Property.MarginBottom>;
+    marginLeft?: ResolutionAwareProp<Property.MarginLeft>;
+    marginRight?: ResolutionAwareProp<Property.MarginRight>;
+    marginTop?: ResolutionAwareProp<Property.MarginTop>;
+    maxWidth?: ResolutionAwareProp<string>;
+    minWidth?: ResolutionAwareProp<string>;
+    onClick?: () => void;
+    padding?: ResolutionAwareProp<Property.Padding>;
+    paddingBottom?: ResolutionAwareProp<Property.PaddingBottom>;
+    paddingLeft?: ResolutionAwareProp<Property.PaddingLeft>;
+    paddingRight?: ResolutionAwareProp<Property.PaddingRight>;
+    paddingTop?: ResolutionAwareProp<Property.PaddingTop>;
+    text?: string | number;
+    textShadow?: Property.TextShadow;
+    textStyle?: TextStyle;
+    transform?: Property.TextTransform;
+    tx?: string;
+    txValues?: Record<string, unknown>;
+    type?: string;
+    variant?: TextVariant;
+    verticalMargin?: ResolutionAwareProp<Property.Margin>;
+    verticalPadding?: ResolutionAwareProp<Property.Padding>;
+    whiteSpace?: ResolutionAwareProp<any>;
+}

package/dist/lib/helpers/layout.helpers.d.ts

@@ -0,0 +1,17 @@
+import { AppSize, ResolutionAwareProp, ResolutionAwarePropBase } from '../types/resolution-aware-prop.type';
+import { ExtractStyleFromResolutionAwarePropEntry } from '../types/layout';
+export declare function extractValuesFromResolutionAwareProp<T = unknown>(prop: unknown): ResolutionAwarePropBase<T>;
+export declare const isResolutionAwareProperty: (prop: unknown) => prop is any;
+export declare const getResolutionPrefix: () => AppSize;
+export declare const extractValueFromResolutionAwareProp: (prop: any, size: AppSize) => any;
+export declare const calculateDimensionsFromAspectRatio: (aspectRatio: string) => {
+    height: string;
+    width: string;
+};
+export declare function generateStylesForResolutionAwareProps<T>(entries: ExtractStyleFromResolutionAwarePropEntry[]): import("styled-components").FlattenSimpleInterpolation;
+export declare const isLargeScreen: () => boolean;
+export declare const isSmallScreen: () => boolean;
+export declare const extractValueFromResolutionAwarePropertyForCurrentScreenSize: (property: ResolutionAwareProp<any>) => any;
+export declare const getAspectRatioByCategory: (category: string) => string;
+export declare const isCssPropertyValueDefined: (property?: unknown) => unknown;
+export declare const getAspectRatio: (width: number, height: number) => string;

package/dist/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { Box, Button, Cell, Flex, Grid, Icon, Radio, Stack, Typography, } from './components';
+export { ThemeProvider, darkTheme, lightTheme, combinationsByColor, getThemeColor, getThemeSpacing, palette, media, } from './styles';

package/dist/lib/styles/base.d.ts

@@ -0,0 +1 @@
+export declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/dist/lib/styles/index.d.ts

@@ -0,0 +1,5 @@
+import { PaletteColor } from './theme';
+export { combinationsByColor, getThemeColor, getThemeSpacing, palette, lightTheme, darkTheme, } from './theme';
+export { ThemeProvider } from './theme-provider';
+export { media } from './media';
+export type { PaletteColor };

package/dist/lib/styles/media.d.ts

@@ -0,0 +1,10 @@
+export declare const mediaBreakpoints: {
+    lg: string;
+    md: string;
+    sm: string;
+};
+export declare const media: import("styled-media-query").MediaGenerator<{
+    lg: string;
+    md: string;
+    sm: string;
+}, any>;

package/dist/lib/styles/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/dist/lib/styles/theme.d.ts

@@ -0,0 +1,179 @@
+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: {
+            boldFontFamily: string;
+            h1: FontInfo;
+            h2: FontInfo;
+            h3: FontInfo;
+            h4: FontInfo;
+            h5: FontInfo;
+            hero: FontInfo;
+            p0: FontInfo;
+            p1: FontInfo;
+            p2: FontInfo;
+            p3: FontInfo;
+            regularFontFamily: string;
+        };
+        name: string;
+        shadow: string;
+        transitions: {
+            base: string;
+            slow: string;
+            slowest: string;
+            turtle: string;
+        };
+    }
+}
+export declare const lightTheme: DefaultTheme;
+export declare const darkTheme: DefaultTheme;
+export declare const getThemeColor: (color: PaletteColor, currentTheme?: DefaultTheme) => string;
+export declare const getThemeSpacing: (property: string, currentTheme?: DefaultTheme) => any;
+export 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;
+        color: 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;
+    };
+};

package/dist/lib/styles/theme.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const ColorsPalette: () => JSX.Element;
+export declare const ThemeColors: () => JSX.Element;

package/dist/lib/types/common.d.ts

@@ -0,0 +1 @@
+export declare type Optional<T> = T | null | undefined;

package/dist/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/dist/lib/types/resolution-aware-prop.type.d.ts

@@ -0,0 +1,7 @@
+export declare type AppSize = 'lg' | 'md' | 'sm';
+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

@@ -1,6 +1,6 @@
 {
   "name": "gantri-components",
-  "version": "1.7.8",
+  "version": "1.9.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "umd": "dist/index.umd.js",
@@ -11,7 +11,7 @@
   "license": "MIT",
   "scripts": {
     "clean-build": "npm-run-all clean build",
-    "build": "tsc --outDir dist --declarationDir dist --declaration true && rollup -c",
+    "build": "rollup -c",
     "build-watch": "rollup -c -w",
     "clean": "rimraf dist",
     "typecheck": "tsc -p --noEmit",
@@ -39,7 +39,7 @@
     "@commitlint/config-conventional": "^16.2.1",
     "@react-theming/storybook-addon": "^1.1.5",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
@@ -59,6 +59,7 @@
     "@storybook/testing-library": "^0.0.10",
     "@storybook/theming": "^6.4.22",
     "@svgr/cli": "^6.2.1",
+    "@types/lodash.capitalize": "^4.2.7",
     "@types/lodash.isobject": "^3.0.6",
     "@types/react": "17.0.39",
     "@types/react-input-mask": "^3.0.1",
@@ -105,6 +106,7 @@
   "dependencies": {
     "@cloudinary/url-gen": "^1.7.0",
     "formik": "^2.2.9",
+    "lodash.capitalize": "^4.2.1",
     "lodash.isobject": "^3.0.2",
     "react-i18next": "^11.16.1",
     "react-input-mask": "^2.0.4",