chore: Provide basic repo structure and ensure that stories, tests, v…

…scode setup properly (#458)

* chore: separate AppInfo
* chore: vscode properly understands @flyteconsole
* chore: add basics/locale entry
* test: add storybooks and tests
* test: fix istanbul test-coverage issue by binding babel versions

Signed-off-by: Nastya Rusina <[email protected]>

.storybook/main.js

@@ -1,3 +1,4 @@
+var path = require('path');
 module.exports = {
   core: {
     builder: 'webpack5',
@@ -22,6 +23,14 @@ module.exports = {
         use: ['babel-loader', { loader: 'ts-loader', options: { transpileOnly: true } }],
       },
     ];
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@flyteconsole/locale': path.resolve(__dirname, '../packages/basics/locale/src'),
+      '@flyteconsole/ui-atoms': path.resolve(__dirname, '../packages/composites/ui-atoms/src'),
+      '@flyteconsole/components': path.resolve(__dirname, '../packages/plugins/components/src'),
+    };
+
     return config;
   },
 };

jest.config.js

@@ -7,7 +7,12 @@ module.exports = {
   verbose: false,
 
   setupFilesAfterEnv: ['./script/test/jest-setup.ts'],
-  projects: ['<rootDir>/packages/zapp/console', '<rootDir>/packages/plugins/components'],
+  projects: [
+    '<rootDir>/packages/basics/locale',
+    '<rootDir>/packages/composites/ui-atoms',
+    '<rootDir>/packages/plugins/components',
+    '<rootDir>/packages/zapp/console',
+  ],
 
   coverageDirectory: '<rootDir>/.coverage',
   collectCoverageFrom: ['**/*.{ts,tsx}', '!**/*/*.stories.{ts,tsx}', '!**/*/*.mocks.{ts,tsx}'],

package.json

@@ -61,5 +61,15 @@
         "ts-jest": "^26.3.0",
         "jest": "^26.0.0",
         "react-hot-loader": "^4.1.2"
+    },
+    "resolutions": {
+        "@babel/cli": "~7.16.0",
+        "@babel/core": "~7.16.12",
+        "@babel/plugin-proposal-class-properties": "~7.16.7",
+        "@babel/plugin-proposal-decorators": "~7.16.7",
+        "@babel/plugin-proposal-object-rest-spread": "~7.16.7",
+        "@babel/preset-env": "~7.16.11",
+        "@babel/preset-react": "~7.16.7",
+        "@babel/preset-typescript": "~7.16.7"
     }
 }

packages/basics/locale/README.md

@@ -0,0 +1 @@
+This is a basic package which would be used for localization in future

packages/basics/locale/jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+const sharedConfig = require('../../../script/test/jest.base.js');
+
+module.exports = {
+  ...sharedConfig,
+};

packages/basics/locale/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@flyteconsole/locale",
+    "version": "0.0.1-rc.2",
+    "description": "Flyteconsole basics locale setup",
+    "main": "./dist/index.js",
+    "module": "./lib/esm/index.js",
+    "types": "./lib/esm/index.d.ts",
+    "license": "Apache-2.0",
+    "private": false,
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "scripts": {
+        "build": "yarn build:esm && yarn build:cjs",
+        "build:esm": "tsc --module esnext --outDir lib/esm",
+        "build:cjs": "tsc",
+        "test": "NODE_ENV=test jest"
+    }
+}

packages/basics/locale/src/index.ts

@@ -0,0 +1 @@
+export { createLocalizedString, patternKey } from './locale';

packages/basics/locale/src/locale.test.ts

@@ -0,0 +1,32 @@
+import t, { patternKey } from './strings.mock';
+
+describe('Basics/locale strings retirieval', () => {
+  it('Simple plain string retrieved properly', () => {
+    const text = t('regularString');
+    expect(text).toEqual('Regular string');
+  });
+
+  it('patternKey strings retrieved properly', () => {
+    let text = t(patternKey('value', 'on'));
+    expect(text).toEqual('Value ON');
+
+    text = t(patternKey('value', 'off'));
+    expect(text).toEqual('Value OFF');
+
+    text = t(patternKey('value'));
+    expect(text).toEqual('Default value');
+  });
+
+  it('Localized function call, properly incorporates provided properties ', () => {
+    let text = t('activeUsers', 5, 12);
+    expect(text).toEqual('5 out of 12 users');
+
+    text = t('activeUsers', 5);
+    expect(text).toEqual('5 out of undefined users');
+  });
+
+  it('If string is not present - returns undefined item', () => {
+    const text = t('nothingThere');
+    expect(text).toEqual(undefined);
+  });
+});

packages/basics/locale/src/locale.ts

@@ -0,0 +1,10 @@
+export const createLocalizedString =
+  (strings: any = {}) =>
+  (key: string, ...rest: unknown[]) => {
+    const value = strings[key];
+    return typeof value === 'function' ? value(...rest) : value;
+  };
+
+export const patternKey = (parent: string, pattern?: string) => {
+  return `${parent}_${pattern ?? ''}`;
+};

packages/basics/locale/src/strings.mock.ts

@@ -0,0 +1,12 @@
+import { createLocalizedString } from '.';
+
+const str = {
+  regularString: 'Regular string',
+  value_: 'Default value',
+  value_on: 'Value ON',
+  value_off: 'Value OFF',
+  activeUsers: (active: number, all: number) => `${active} out of ${all} users`,
+};
+
+export { patternKey } from '.';
+export default createLocalizedString(str);

packages/basics/locale/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "./dist"
+    },
+    "include": ["src/**/*"]
+}

packages/composites/ui-atoms/README.md

@@ -0,0 +1 @@
+This is a UI atoms package which plan to contain icons and basic UI elements.

packages/composites/ui-atoms/jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+const sharedConfig = require('../../../script/test/jest.base.js');
+
+module.exports = {
+  ...sharedConfig,
+};

packages/composites/ui-atoms/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "@flyteconsole/ui-atoms",
+    "version": "0.0.1-rc.2",
+    "description": "Flyteconsole UI atoms, which didn't plan to be published and would be consumed as is internally",
+    "main": "./dist/index.js",
+    "module": "./lib/esm/index.js",
+    "types": "./lib/esm/index.d.ts",
+    "license": "Apache-2.0",
+    "private": false,
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "scripts": {
+        "build": "yarn build:esm && yarn build:cjs",
+        "build:esm": "tsc --module esnext --outDir lib/esm",
+        "build:cjs": "tsc",
+        "test": "NODE_ENV=test jest"
+    },
+    "dependencies": {
+        "@material-ui/core": "^4.0.0",
+        "@material-ui/icons": "^4.0.0",
+        "classnames": "^2.3.1"
+    },
+    "peerDependencies": {
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
+    },
+    "devDependencies": {
+        "@types/react": "^16.9.34",
+        "@types/react-dom": "^16.9.7",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
+    }
+}

packages/composites/ui-atoms/src/Icons/FlyteLogo/FlyteLogo.stories.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { makeStyles } from '@material-ui/core/styles';
+import { FlyteLogo } from '.';
+
+const useStyles = makeStyles(() => ({
+  container: {
+    padding: '12px',
+    width: '100%',
+  },
+}));
+
+interface WrapperProps {
+  backgroundColor: 'aliceblue' | 'gray' | 'darkblue';
+  size: number;
+  children: React.ReactNode;
+}
+const ComponentWrapper = (props: WrapperProps) => {
+  const styles = useStyles();
+
+  const height = props.size + 2 * 12; // + 2*padding size
+  return (
+    <div
+      className={styles.container}
+      style={{ backgroundColor: props.backgroundColor, height: `${height}px` }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default {
+  title: 'UI Atoms/FlyteLogo',
+  component: FlyteLogo,
+} as ComponentMeta<typeof FlyteLogo>;
+
+const Template: ComponentStory<typeof FlyteLogo> = (props) => <FlyteLogo {...props} />;
+export const All = Template.bind({});
+All.args = {
+  size: 42,
+  hideText: false,
+  background: 'light',
+};
+All.decorators = [
+  (Story, context) => {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <ComponentWrapper backgroundColor="aliceblue" size={context.args.size}>
+          {Story()}
+        </ComponentWrapper>
+        <ComponentWrapper backgroundColor="gray" size={context.args.size}>
+          {Story()}
+        </ComponentWrapper>
+        <ComponentWrapper backgroundColor="darkblue" size={context.args.size}>
+          {Story()}
+        </ComponentWrapper>
+      </div>
+    );
+  },
+];
+
+export const Default = Template.bind({});
+Default.args = {
+  size: 42,
+};
+Default.decorators = [
+  (Story, context) => {
+    return (
+      <ComponentWrapper backgroundColor="darkblue" size={context.args.size}>
+        {Story()}
+      </ComponentWrapper>
+    );
+  },
+];
+
+export const NoText = Template.bind({});
+NoText.args = {
+  size: 42,
+  hideText: true,
+};
+NoText.decorators = [
+  (Story, context) => {
+    return (
+      <ComponentWrapper backgroundColor="darkblue" size={context.args.size}>
+        {Story()}
+      </ComponentWrapper>
+    );
+  },
+];

packages/composites/ui-atoms/src/Icons/FlyteLogo/index.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+export interface FlyteLogoProps {
+  /** Logo size (height) in pixels. Default: 32 */
+  size: number;
+  /** If true - hides "Flyte" text */
+  hideText?: boolean;
+  /** Which theme variant to use, depends on the background color logo used on. Default: 'dark' */
+  background?: 'light' | 'dark';
+}
+
+const fillValues = {
+  dark: {
+    graphic: '#fff',
+    text: '#fff',
+  },
+  light: {
+    graphic: '#40009f',
+    text: '#000',
+  },
+};
+
+/** Renders the Flyte glyph/text logo */
+export const FlyteLogo = (props: FlyteLogoProps): JSX.Element => {
+  const fill = fillValues[props.background ?? 'dark'];
+
+  const itemWidth = props.hideText ? 200 : 600;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={props.size}
+      viewBox={`100 162 ${itemWidth} 175`}
+    >
+      <path
+        fill={fill.graphic}
+        d="M152.24 254.36S106 214.31 106 174.27c0 0 6.79-6.89 33.93-8.55l-.31 8.55c0 40.04 12.62 80.09 12.62 80.09zm46.24-80.09s-6.8-6.89-33.92-8.55l.31 8.55c0 40-12.63 80.09-12.63 80.09s46.24-40.05 46.24-80.09zm-16.69 131.07l-7.55 4c15 22.68 24.36 25.11 24.36 25.11 34.68-20 46.24-80.09 46.24-80.09s-28.37 30.96-63.05 50.98zm-29.43-51a11 11 0 00-.23 2.62c0 4.25 1.27 13.94 9.79 31l7.24-4.54c34.69-20 75.68-29.11 75.68-29.11s-25.69-8.9-53.09-8.9c-13.7 0-27.83 2.23-39.39 8.9zm121.69-50.8l7.24 4.54c8.53-17.1 9.79-26.78 9.79-31a11.34 11.34 0 00-.22-2.62c-11.57-6.68-25.69-8.9-39.4-8.9-27.4 0-53.09 8.89-53.09 8.89s41 9.08 75.68 29.11zm-29.44 51c.85-.22 10.08-3.52 24.37-25.11l-7.56-4c-34.68-20-63.05-51-63.05-51s11.56 60.08 46.24 80.1z"
+      />
+      {!props.hideText ? (
+        <path
+          fill={fill.text}
+          d="M364.76 259.54v42.22H344v-112.6h74.48V209h-53.72v30.8h42.31v19.79zM433.77 301.76v-112.6h19.79v112.6zM548.86 219.72l-35.23 87c-6.91 17.05-17.85 25.9-34.27 25.9a43 43 0 01-15.6-2.9v-17.18a39.85 39.85 0 0014 3.22 17.59 17.59 0 0016.4-11.91l1.13-3.05-32.65-81.08h21.23l21.72 56.14 21.87-56.14zM589.63 303.21c-18 0-31.69-11.74-31.69-34.26v-74.16h19.79v24.93h31.37v18.5h-31.37v31.85c0 11.26 7.4 16.09 16.4 16.09a31.57 31.57 0 0016.74-5.31v17.54a54 54 0 01-21.24 4.82zM694 268.14h-56.14c.64 10.78 11.58 18 24.94 18 10.29 0 20.26-4.18 29-10v17.69c-9.17 6.6-20.75 9.33-31.37 9.33-25.58 0-42.31-17-42.31-42.79 0-25.41 16.57-42.31 39.9-42.31 22.52 0 36 15.45 36 40.38zm-56-14.8h36.7c0-10.93-6.92-17.53-16.9-17.53-9.8 0-18.8 6.11-19.8 17.53z"
+        />
+      ) : null}
+    </svg>
+  );
+};

packages/composites/ui-atoms/src/Icons/InfoIcon/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+interface SVGProps {
+  size: number;
+  className?: string;
+  onClick?: () => void;
+}
+
+export const InfoIcon = (props: SVGProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={props.size}
+    height={props.size}
+    className={classnames('bi bi-info-circle', props.className)}
+    fill="currentColor"
+    viewBox="0 0 16 16"
+    onClick={props.onClick}
+    data-testid="infoIcon"
+  >
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
+  </svg>
+);

packages/composites/ui-atoms/src/Icons/index.tsx

@@ -0,0 +1,2 @@
+export { FlyteLogo } from './FlyteLogo';
+export { InfoIcon } from './InfoIcon';

packages/composites/ui-atoms/src/index.ts

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

packages/composites/ui-atoms/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "./dist"
+    },
+    "include": ["src/**/*"]
+}

packages/plugins/components/package.json

@@ -19,7 +19,8 @@
     },
     "dependencies": {
         "@material-ui/core": "^4.0.0",
-        "@material-ui/icons": "^4.0.0"
+        "@material-ui/icons": "^4.0.0",
+        "classnames": "^2.3.1"
     },
     "peerDependencies": {
         "react": "^16.13.1",

packages/plugins/components/src/AppInfo/appInfo.mock.ts

@@ -0,0 +1,9 @@
+import { VersionInfo } from './versionDisplay';
+
+export const generateVersionInfo = (name: string, version: string): VersionInfo => {
+  return {
+    name: name,
+    version: version,
+    url: `#some.fake.link/${name}/v${version}`,
+  };
+};