@proximus/lavender-styling-native 0.1.0-alpha.0

package/dist/sizes.d.ts

@@ -0,0 +1,69 @@
+export declare const CommonSizes: {
+    AbsoluteBiggest: number;
+    Big: number;
+    Bigger: number;
+    Biggest: number;
+    Medium: number;
+    Small: number;
+    Smaller: number;
+    Smallest: number;
+};
+export declare const Sizes: {
+    NavigationBarHeight: number;
+    StatusHeight: number;
+    AlertPopupButton: number;
+    AlertPopupText: number;
+    AlertPopupTitle: number;
+    BubbleTitleSize: number;
+    ButtonTitleSize: number;
+    CardText: number;
+    CharLimitTextInput: number;
+    ContentMaxWidth: number;
+    ContentWidth: number;
+    CounterIconTextSize: number;
+    HeaderHeight: number;
+    HeaderSubtitleFontSize: number;
+    HeaderTitleFontSize: number;
+    IconSize: number;
+    InfoViewSize: number;
+    ListHeaderAndroid: number;
+    ListHeaderIOS: number;
+    ListItemInfoSubtitle: number;
+    ListItemInfoTitle: number;
+    ListItemNotificationTitle: number;
+    ListItemSecondSubtitle: number;
+    ListItemSubtitle: number;
+    ListItemSubtitleIOS: number;
+    ListItemTime: number;
+    ListItemTitle: number;
+    ListWithAvatarExplicitText: number;
+    NotificationMessage: number;
+    PromptPopupText: number;
+    PromptPopupTitle: number;
+    PxCompactPriceTextCurrencySize: number;
+    PxCompactPriceTextDigitsSize: number;
+    PxCompactPriceTextDurationSize: number;
+    PxCompactPriceTextUnitsSize: number;
+    PxMobilePricingPlanCardFirstLine: number;
+    PxMobilePricingPlanCardLine: number;
+    PxMobilePricingPlanCardTitle: number;
+    PxPriceButtonTextSize: number;
+    PxPriceTextSize: number;
+    PxPriceTextSizeMultiLine: number;
+    PxTextIconRightIconSize: number;
+    PxTextIconRightTextSize: number;
+    PxOptionCardIcon: number;
+    PxOptionCardSubtitle: number;
+    PxOptionCardTitle: number;
+    PxProgressBarText: number;
+    SmallInformativeSubtitleText: number;
+    SmallInformativeText: number;
+    TabBarIcon: number;
+    TextBodySize: number;
+    TextDisclaimerSize: number;
+    TextHeader2Size: number;
+    TextHeaderSize: number;
+    TopNotification: number;
+    UsageCardHeight: number;
+};
+//# sourceMappingURL=sizes.d.ts.map

package/dist/sizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../src/sizes.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDjB,CAAC"}

package/dist/themes.d.ts

@@ -0,0 +1,19 @@
+export declare enum ThemeName {
+    MYPROXIMUS = "myproximus",
+    SCARLET = "scarlet"
+}
+export declare enum StatusType {
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning",
+    INFO = "info"
+}
+export interface ITheme {
+    name: ThemeName;
+    t: (key: string) => any;
+}
+export interface IThemeContext {
+    theme: ITheme;
+    setTheme?: (theme: ITheme) => void;
+}
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,UAAU,eAAe;IACzB,OAAO,YAAY;CACpB;AAED,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,GAAG,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@proximus/lavender-styling-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Commmon styling constants",
+  "main": "src/index.ts",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npx tsc -p tsconfig.json",
+    "prepublish": "yarn clean && yarn build"
+  },
+  "dependencies": {
+    "@proximus/lavender-styling": "^1.1.0-alpha.14"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "59b3436b786cc1c73b4a20a98b2a85139e75b72e"
+}

package/src/AssetContainer.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const AssetContainerContext = React.createContext<{
+  size?: number;
+  id?: string;
+}>({});
+
+export function useAssetContainer() {
+  const context = React.useContext(AssetContainerContext);
+
+  if (!context) {
+    throw new Error('useAssetContainer must be used within an AssetContainer');
+  }
+
+  return context;
+}
+
+export function AssetProvider({
+  children,
+  size,
+  id,
+}: {
+  children: React.ReactNode;
+  size?: number;
+  id?: string;
+}) {
+  return (
+    <AssetContainerContext.Provider value={{ size, id }}>
+      {children}
+    </AssetContainerContext.Provider>
+  );
+}

package/src/ProximusTheme.ts

@@ -0,0 +1,9 @@
+import * as proximusTokens from '@proximus/lavender-styling/dist/js/proximus/themesTokens.js';
+import { ITheme, ThemeName } from './themes';
+
+export const myProximusTheme: ITheme = {
+  name: ThemeName.MYPROXIMUS,
+  t: (key: string) => {
+    return proximusTokens[key as keyof typeof proximusTokens];
+  },
+};

package/src/ScarletTheme.ts

@@ -0,0 +1,11 @@
+import * as scarletTokens from '@proximus/lavender-styling/dist/js/scarlet/themesTokens.js';
+
+//Added Proximus styles for scarlet also as most of the styles are inherited from proximus
+import { ITheme, ThemeName } from './themes';
+
+export const scarletTheme: ITheme = {
+  name: ThemeName.SCARLET,
+  t: (key: string) => {
+    return scarletTokens[key as keyof typeof scarletTokens];
+  },
+};

package/src/ThemeContext.ts

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+
+import { type IThemeContext, ThemeName } from './themes';
+import { myProximusTheme } from './ProximusTheme';
+
+export const ThemeContext = React.createContext<IThemeContext>({
+  theme: myProximusTheme,
+});
+
+export function useTheme() {
+  const theme = useContext(ThemeContext);
+  return theme || {};
+}
+
+export function useIsThemeScarlet() {
+  const { theme } = useTheme();
+  return theme.name === ThemeName.SCARLET;
+}

package/src/ThemeProvider.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentType, ReactElement, useState } from 'react';
+
+import { ThemeContext, useTheme } from './ThemeContext';
+import { ITheme } from './themes';
+
+export function ThemeProvider({
+  theme,
+  children,
+}: {
+  theme: ITheme;
+  children: ReactElement<any> | ReactElement<any>[];
+}) {
+  const [themeValue, setTheme] = useState<ITheme>(theme);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme: themeValue,
+        setTheme,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function withTheme<T>(WrappedComponent: ComponentType<T>) {
+  return (props: T) => {
+    const { theme, setTheme } = useTheme();
+    return (
+      <WrappedComponent {...props} theme={theme} onThemeChanged={setTheme} />
+    );
+  };
+}

package/src/__tests__/breakpoints.spec.ts

@@ -0,0 +1,168 @@
+import {
+  IPHONE_SE_HEIGHT,
+  IPHONE_SE_WIDTH,
+  max,
+  media,
+  min,
+  MIN_HDPI,
+  MIN_IPHONE_4,
+  MIN_IPHONE_8,
+  MIN_IPHONE_PLUS,
+  MIN_IPHONE_SE,
+  MIN_IPHONE_XS,
+  MIN_IPHONE_XR,
+  MIN_MDPI,
+  MIN_XHDPI,
+  MIN_XXHDPI,
+  MIN_XXXHDPI,
+  MIN_GALAXY_S7,
+  MIN_GALAXY_S9,
+  MIN_GALAXY_S9_PLUS,
+} from '../breakpoints';
+
+describe('breakpoints test suite', () => {
+  let width: number;
+  let height: number;
+  let mediaquery: string;
+
+  it('should compute mediaquery properly', () => {
+    givenScreenResolution(IPHONE_SE_WIDTH, IPHONE_SE_HEIGHT);
+    whenComputingMediaQuery();
+    thenMediaQueryMustBe('@media (device-width: 320) and (device-height: 568)');
+  });
+
+  it('should compute minimum mediaquery properly', () => {
+    givenScreenResolution(IPHONE_SE_WIDTH, IPHONE_SE_HEIGHT);
+    whenComputingMinMediaQuery();
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 320) and (min-device-height: 568)'
+    );
+  });
+
+  it('should compute maximum mediaquery properly', () => {
+    givenScreenResolution(IPHONE_SE_WIDTH, IPHONE_SE_HEIGHT);
+    whenComputingMaxMediaQuery();
+    thenMediaQueryMustBe(
+      '@media (max-device-width: 320) and (max-device-height: 568)'
+    );
+  });
+
+  it('should compute iphone SE mediaqueries properly', () => {
+    mediaquery = MIN_IPHONE_SE;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 320) and (min-device-height: 568)'
+    );
+  });
+
+  it('should compute iphone 4 mediaqueries properly', () => {
+    mediaquery = MIN_IPHONE_4;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 320) and (min-device-height: 480)'
+    );
+  });
+
+  it('should compute iphone 8 mediaqueries properly', () => {
+    mediaquery = MIN_IPHONE_8;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 375) and (min-device-height: 667)'
+    );
+  });
+
+  it('should compute iphone X mediaqueries properly', () => {
+    mediaquery = MIN_IPHONE_XS;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 375) and (min-device-height: 812)'
+    );
+  });
+
+  it('should compute iphone XR mediaqueries properly', () => {
+    mediaquery = MIN_IPHONE_XR;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 414) and (min-device-height: 896)'
+    );
+  });
+
+  it('should compute iphone Plus mediaqueries properly', () => {
+    mediaquery = MIN_IPHONE_PLUS;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 414) and (min-device-height: 736)'
+    );
+  });
+
+  it('should compute android MDPI mediaqueries properly', () => {
+    mediaquery = MIN_MDPI;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 320) and (min-device-height: 480)'
+    );
+  });
+
+  it('should compute android HDPI mediaqueries properly', () => {
+    mediaquery = MIN_HDPI;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 320) and (min-device-height: 533)'
+    );
+  });
+
+  it('should compute android XHDPI mediaqueries properly', () => {
+    mediaquery = MIN_XHDPI;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 360) and (min-device-height: 640)'
+    );
+  });
+
+  it('should compute android XXHDPI mediaqueries properly', () => {
+    mediaquery = MIN_XXHDPI;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 320) and (min-device-height: 533)'
+    );
+  });
+
+  it('should compute android XXXHDPI mediaqueries properly', () => {
+    mediaquery = MIN_XXXHDPI;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 360) and (min-device-height: 640)'
+    );
+  });
+
+  it('should compute iphone SE mediaqueries properly', () => {
+    mediaquery = MIN_GALAXY_S7;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 360) and (min-device-height: 640)'
+    );
+  });
+
+  it('should compute iphone SE mediaqueries properly', () => {
+    mediaquery = MIN_GALAXY_S9;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 360) and (min-device-height: 740)'
+    );
+  });
+
+  it('should compute iphone SE mediaqueries properly', () => {
+    mediaquery = MIN_GALAXY_S9_PLUS;
+    thenMediaQueryMustBe(
+      '@media (min-device-width: 412) and (min-device-height: 846)'
+    );
+  });
+
+  function givenScreenResolution(w: number, h: number) {
+    width = w;
+    height = h;
+  }
+
+  function whenComputingMediaQuery() {
+    mediaquery = media(width, height, '');
+  }
+
+  function whenComputingMinMediaQuery() {
+    mediaquery = min(width, height);
+  }
+
+  function whenComputingMaxMediaQuery() {
+    mediaquery = max(width, height);
+  }
+
+  function thenMediaQueryMustBe(mq: string) {
+    expect(mediaquery).toEqual(mq);
+  }
+});

package/src/breakpoints.ts

@@ -0,0 +1,96 @@
+/* tslint:disable:max-line-length */
+export const IPHONE_SE_WIDTH = 320;
+export const IPHONE_SE_HEIGHT = 568;
+
+export const IPHONE_4_WIDTH = 320;
+export const IPHONE_4_HEIGHT = 480;
+
+export const IPHONE_8_WIDTH = 375;
+export const IPHONE_8_HEIGHT = 667;
+
+export const IPHONE_XS_WIDTH = 375;
+export const IPHONE_XS_HEIGHT = 812;
+
+export const IPHONE_XR_WIDTH = 414;
+export const IPHONE_XR_HEIGHT = 896;
+
+export const IPHONE_PLUS_WIDTH = 414;
+export const IPHONE_PLUS_HEIGHT = 736;
+
+export const IPAD_MINI_WIDTH = 768;
+export const IPAD_MINI_HEIGHT = 1024;
+
+// https://stackoverflow.com/questions/28507609/image-resolution-for-mdpi-hdpi-xhdpi-and-xxhdpi
+export const MDPI_WIDTH = 320;
+export const MDPI_HEIGHT = 480;
+
+export const HDPI_WIDTH = 320;
+export const HDPI_HEIGHT = 533;
+
+export const XHDPI_WIDTH = 360;
+export const XHDPI_HEIGHT = 640;
+
+export const XXHDPI_WIDTH = 320;
+export const XXHDPI_HEIGHT = 533;
+
+export const XXXHDPI_WIDTH = 360;
+export const XXXHDPI_HEIGHT = 640;
+
+// New sizes: Galaxy J3/J7/S6/S7 and Galaxy S8/S9 and Galaxy S8+/S9+
+
+export const GALAXY_S7_WIDTH = 360;
+export const GALAXY_S7_HEIGHT = 640;
+
+export const GALAXY_S9_WIDTH = 360;
+export const GALAXY_S9_HEIGHT = 740;
+
+export const GALAXY_S9_PLUS_WIDTH = 412;
+export const GALAXY_S9_PLUS_HEIGHT = 846;
+
+export function media(width: number, height: number, fun: 'max' | 'min' | '') {
+  const deviceHeight = fun ? `${fun}-device-height` : 'device-height';
+  const deviceWidth = fun ? `${fun}-device-width` : 'device-width';
+  return `@media (${deviceWidth}: ${width}) and (${deviceHeight}: ${height})`;
+}
+
+export function max(width: number, height: number) {
+  return media(width, height, 'max');
+}
+
+export function min(width: number, height: number) {
+  return media(width, height, 'min');
+}
+
+export const MIN_IPHONE_SE = min(IPHONE_SE_WIDTH, IPHONE_SE_HEIGHT);
+export const MIN_IPHONE_4 = min(IPHONE_4_WIDTH, IPHONE_4_HEIGHT);
+export const MIN_IPHONE_8 = min(IPHONE_8_WIDTH, IPHONE_8_HEIGHT);
+export const MIN_IPHONE_XS = min(IPHONE_XS_WIDTH, IPHONE_XS_HEIGHT);
+export const MIN_IPHONE_XR = min(IPHONE_XR_WIDTH, IPHONE_XR_HEIGHT);
+export const MIN_IPHONE_PLUS = min(IPHONE_PLUS_WIDTH, IPHONE_PLUS_HEIGHT);
+export const MIN_IPAD_MINI = min(IPAD_MINI_WIDTH, IPAD_MINI_HEIGHT);
+
+export const MIN_MDPI = min(MDPI_WIDTH, MDPI_HEIGHT);
+export const MIN_HDPI = min(HDPI_WIDTH, HDPI_HEIGHT);
+export const MIN_XHDPI = min(XHDPI_WIDTH, XHDPI_HEIGHT);
+export const MIN_XXHDPI = min(XXHDPI_WIDTH, XXHDPI_HEIGHT);
+export const MIN_XXXHDPI = min(XXXHDPI_WIDTH, XXXHDPI_HEIGHT);
+
+export const MIN_GALAXY_S7 = min(GALAXY_S7_WIDTH, GALAXY_S7_HEIGHT);
+export const MIN_GALAXY_S9 = min(GALAXY_S9_WIDTH, GALAXY_S9_HEIGHT);
+export const MIN_GALAXY_S9_PLUS = min(
+  GALAXY_S9_PLUS_WIDTH,
+  GALAXY_S9_PLUS_HEIGHT
+);
+
+// We keep those one for backward compatibility
+export const MEDIA_IPHONE_SE = max(IPHONE_SE_WIDTH, IPHONE_SE_HEIGHT);
+export const MEDIA_IPHONE_4 = max(IPHONE_4_WIDTH, IPHONE_4_HEIGHT);
+export const MEDIA_IPHONE_8 = max(IPHONE_8_WIDTH, IPHONE_8_HEIGHT);
+export const MEDIA_IPHONE_XS = media(IPHONE_XS_WIDTH, IPHONE_XS_HEIGHT, '');
+export const MEDIA_IPHONE_XR = media(IPHONE_XR_WIDTH, IPHONE_XR_HEIGHT, '');
+export const MEDIA_IPHONE_PLUS = media(
+  IPHONE_PLUS_WIDTH,
+  IPHONE_PLUS_HEIGHT,
+  ''
+);
+export const MEDIA_IPHONE_X_PLUS = `@media (min-device-height: ${IPHONE_PLUS_HEIGHT})`;