gantri-components 1.1.0 → 1.4.0

package/lib/components/stack/index.d.ts

@@ -0,0 +1 @@
+export { Stack } from './stack';

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

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { StackProps } from './stack.types';
+export declare const Stack: FC<PropsWithChildren<StackProps>>;

package/lib/components/stack/stack.presets.d.ts

@@ -0,0 +1,2 @@
+import { StackProps } from './stack.types';
+export declare const StackPresets: Partial<StackProps>;

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

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

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

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

package/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/lib/components/typography/typography.presets.d.ts

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

package/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/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/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/lib/index.d.ts

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

package/lib/styles/base.d.ts

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

package/lib/{theme → styles}/index.d.ts

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

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

@@ -70,7 +70,6 @@ declare module 'styled-components' {
             };
         };
         fonts: {
-            badge: FontInfo;
             boldFontFamily: string;
             h1: FontInfo;
             h2: FontInfo;
@@ -78,7 +77,6 @@ declare module 'styled-components' {
             h4: FontInfo;
             h5: FontInfo;
             hero: FontInfo;
-            link: FontInfo;
             p0: FontInfo;
             p1: FontInfo;
             p2: FontInfo;
@@ -98,6 +96,7 @@ declare module 'styled-components' {
 declare const lightTheme: DefaultTheme;
 declare const darkTheme: DefaultTheme;
 export declare const getThemeColor: (color: PaletteColor, currentTheme?: DefaultTheme) => string;
+export declare const getThemeSpacing: (property: string, currentTheme?: DefaultTheme) => any;
 declare const combinationsByColor: (appTheme?: DefaultTheme) => {
     alert: {
         background: string;
@@ -155,6 +154,7 @@ declare const combinationsByColor: (appTheme?: DefaultTheme) => {
     };
     secondary: {
         background: string;
+        color: string;
         hover: string;
         selected: string;
     };

package/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/lib/types/common.d.ts

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

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

@@ -1,4 +1,4 @@
-export declare type AppSize = 'lg' | 'md' | 'sm' | string;
+export declare type AppSize = 'lg' | 'md' | 'sm';
 export interface ResolutionAwarePropBase<T> {
     lg?: T;
     md?: T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantri-components",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "main": "dist/index.cjs.js",
   "module": "dist/src/index.js",
   "types": "lib/index.d.ts",
@@ -12,11 +12,15 @@
     "build": "rollup -c",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "generate-icons": "node scripts/generate-icons.js",
+    "prebuild": "yarn generate-icons"
   },
   "peerDependencies": {
+    "formik": "^2.2.9",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -32,18 +36,23 @@
     "@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",
-    "@types/react": "^17.0.39",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addons": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.10",
+    "@storybook/theming": "^6.4.22",
+    "@svgr/cli": "^6.2.1",
+    "@types/lodash.isobject": "^3.0.6",
+    "@types/react": "17.0.39",
+    "@types/react-input-mask": "^3.0.1",
+    "@types/styled-components": "^5.1.25",
     "@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",
@@ -57,6 +66,7 @@
     "eslint-plugin-react": "^7.29.3",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-storybook": "^0.5.10",
     "eslint-plugin-typescript-sort-keys": "^2.1.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.3.5",
@@ -64,6 +74,7 @@
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-use": "^17.3.2",
     "rollup": "^2.70.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -71,8 +82,14 @@
     "typescript": "^4.6.2"
   },
   "dependencies": {
-    "@types/styled-components": "^5.1.24",
-    "styled-components": "^5.3.3"
+    "@cloudinary/url-gen": "^1.7.0",
+    "formik": "^2.2.9",
+    "lodash.isobject": "^3.0.2",
+    "react-i18next": "^11.16.1",
+    "react-input-mask": "^2.0.4",
+    "react-spring": "^9.4.4",
+    "styled-components": "^5.3.3",
+    "styled-media-query": "^2.1.2"
   },
   "files": [
     "lib"

package/lib/components/Button/Button.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import './Button.css';
-export interface ButtonProps {
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * How large should the button be??
-     */
-    size?: 'small' | 'medium' | 'large';
-}
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ primary, backgroundColor, size, onClick, label, }: ButtonProps) => JSX.Element;
-export default Button;

package/lib/components/Button/index.d.ts

@@ -1 +0,0 @@
-export { default } from './Button';