@teambit/component.ui.component-compare.component-compare 0.0.4

package/component-compare.module.scss

@@ -0,0 +1,51 @@
+.componentCompareContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 24px 16px 24px;
+}
+
+.bottom {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  flex: 1;
+  padding-bottom: 16px;
+}
+
+.navContainer {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  font-size: var(--bit-p-xs, 14px);
+}
+
+.navigation {
+  display: flex;
+  list-style: none;
+  min-height: 48px;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 6px;
+  }
+
+  > li {
+    display: block;
+    margin-right: 16px;
+    height: 100%;
+  }
+}
+
+.loader {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+}

package/component-compare.tsx

@@ -0,0 +1,162 @@
+import React, { useContext, useMemo } from 'react';
+import classnames from 'classnames';
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { ComponentContext, TopBarNav, useComponent } from '@teambit/component';
+import { ComponentCompareContext } from '@teambit/component.ui.component-compare.context';
+import { useCompareQueryParam } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { ComponentCompareVersionPicker } from '@teambit/component.ui.component-compare.version-picker';
+import { ComponentCompareBlankState } from '@teambit/component.ui.component-compare.blank-state';
+import { ComponentCompareHooks } from '@teambit/component.ui.component-compare.models.component-compare-hooks';
+import { RoundLoader } from '@teambit/design.ui.round-loader';
+import { useLocation } from '@teambit/base-react.navigation.link';
+import { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { ComponentCompareProps } from '@teambit/component.ui.component-compare.models.component-compare-props';
+import { groupByVersion } from '@teambit/component.ui.component-compare.utils.group-by-version';
+import { sortTabs } from '@teambit/component.ui.component-compare.utils.sort-tabs';
+import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sort-logs';
+import { extractLazyLoadedData } from '@teambit/component.ui.component-compare.utils.lazy-loading';
+
+import styles from './component-compare.module.scss';
+
+const findPrevVersionFromCurrent = (compareVersion) => (_, index: number, logs: LegacyComponentLog[]) => {
+  if (compareVersion === 'workspace' || logs.length === 1) return true;
+
+  if (index === 0) return false;
+
+  const prevIndex = index - 1;
+
+  return logs[prevIndex].tag === compareVersion || logs[prevIndex].hash === compareVersion;
+};
+
+export function ComponentCompare(props: ComponentCompareProps) {
+  const {
+    host,
+    baseId: _baseId,
+    compareId: _compareId,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    routes,
+    state,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    tabs,
+    className,
+    hooks,
+    customUseComponent,
+    ...rest
+  } = props;
+  const baseVersion = useCompareQueryParam('baseVersion');
+  const component = useContext(ComponentContext);
+  const location = useLocation();
+
+  const isWorkspace = host === 'teambit.workspace/workspace';
+  const allVersionInfo = useMemo(() => component.logs?.slice().sort(sortByDateDsc) || [], [component.id.toString()]);
+  const isNew = allVersionInfo.length === 0;
+  const compareVersion =
+    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.id.version;
+  const compareIsLocalChanges = compareVersion === 'workspace';
+
+  const lastVersionInfo = useMemo(() => {
+    const prevVersionInfo = allVersionInfo.find(findPrevVersionFromCurrent(compareVersion));
+    return prevVersionInfo;
+  }, [component.logs]);
+
+  const baseId =
+    _baseId ||
+    (baseVersion && component.id.changeVersion(baseVersion)) ||
+    (lastVersionInfo && component.id.changeVersion(lastVersionInfo.tag || lastVersionInfo.hash)) ||
+    component.id;
+
+  const { component: base, loading: loadingBase } = useComponent(host, baseId.toString(), { customUseComponent });
+  const { component: compareComponent, loading: loadingCompare } = useComponent(host, _compareId?.toString() || '', {
+    skip: !_compareId,
+    customUseComponent,
+  });
+
+  const loading = loadingBase || loadingCompare;
+
+  const compare = _compareId ? compareComponent : component;
+
+  const isEmpty = !loading && !compareIsLocalChanges && !compare && !base;
+
+  const logsByVersion = useMemo(() => {
+    return (compare?.logs || []).slice().reduce(groupByVersion, new Map<string, LegacyComponentLog>());
+  }, [compare?.id.toString()]);
+
+  const componentCompareModel = {
+    compare: compare && {
+      model: compare,
+      hasLocalChanges: compareIsLocalChanges,
+    },
+    base: base && {
+      model: base,
+    },
+    loading,
+    logsByVersion,
+    state,
+    hooks,
+  };
+
+  return (
+    <ComponentCompareContext.Provider value={componentCompareModel}>
+      <div className={classnames(styles.componentCompareContainer, className)} {...rest}>
+        {loading && (
+          <div className={styles.loader}>
+            <RoundLoader />
+          </div>
+        )}
+        {isEmpty && <ComponentCompareBlankState />}
+        {!isEmpty && <RenderCompareScreen {...props} />}
+      </div>
+    </ComponentCompareContext.Provider>
+  );
+}
+
+function RenderCompareScreen(props: ComponentCompareProps) {
+  const { routes, state } = props;
+
+  return (
+    <>
+      <div className={styles.top}>
+        {(!state?.versionPicker && <ComponentCompareVersionPicker />) || state?.versionPicker?.element}
+      </div>
+      <div className={styles.bottom}>
+        <CompareMenuNav {...props} />
+        {(extractLazyLoadedData(routes) || []).length > 0 && (
+          <SlotRouter routes={extractLazyLoadedData(routes) || []} />
+        )}
+        {state?.tabs?.element}
+      </div>
+    </>
+  );
+}
+
+function CompareMenuNav({ tabs, state, hooks }: ComponentCompareProps) {
+  const sortedTabs = (extractLazyLoadedData(tabs) || []).sort(sortTabs);
+
+  const activeTab = state?.tabs?.id;
+  const isControlled = state?.tabs?.controlled;
+
+  return (
+    <div className={styles.navContainer}>
+      <nav className={styles.navigation}>
+        {sortedTabs.map((tabItem, index) => {
+          const isActive = !state ? undefined : !!activeTab && !!tabItem.id && activeTab === tabItem.id;
+
+          return (
+            <TopBarNav
+              {...(tabItem.props || {})}
+              key={`compare-menu-nav-${index}-${tabItem.id}`}
+              active={isActive}
+              onClick={onNavClicked({ id: tabItem.id, hooks })}
+              href={(!isControlled && tabItem.props?.href) || undefined}
+            />
+          );
+        })}
+      </nav>
+    </div>
+  );
+}
+
+function onNavClicked({ hooks, id }: { hooks?: ComponentCompareHooks; id?: string }) {
+  if (!hooks?.tabs?.onClick) return undefined;
+  return (e) => hooks?.tabs?.onClick?.(id, e);
+}

package/dist/component-compare.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComponentCompareProps } from '@teambit/component.ui.component-compare.models.component-compare-props';
+export declare function ComponentCompare(props: ComponentCompareProps): JSX.Element;

package/dist/component-compare.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentCompare = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const component_1 = require("@teambit/component");
+const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
+const component_ui_component_compare_hooks_use_component_compare_url_1 = require("@teambit/component.ui.component-compare.hooks.use-component-compare-url");
+const component_ui_component_compare_version_picker_1 = require("@teambit/component.ui.component-compare.version-picker");
+const component_ui_component_compare_blank_state_1 = require("@teambit/component.ui.component-compare.blank-state");
+const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+const ui_foundation_ui_react_router_slot_router_1 = require("@teambit/ui-foundation.ui.react-router.slot-router");
+const component_ui_component_compare_utils_group_by_version_1 = require("@teambit/component.ui.component-compare.utils.group-by-version");
+const component_ui_component_compare_utils_sort_tabs_1 = require("@teambit/component.ui.component-compare.utils.sort-tabs");
+const component_ui_component_compare_utils_sort_logs_1 = require("@teambit/component.ui.component-compare.utils.sort-logs");
+const component_ui_component_compare_utils_lazy_loading_1 = require("@teambit/component.ui.component-compare.utils.lazy-loading");
+const component_compare_module_scss_1 = __importDefault(require("./component-compare.module.scss"));
+const findPrevVersionFromCurrent = (compareVersion) => (_, index, logs) => {
+    if (compareVersion === 'workspace' || logs.length === 1)
+        return true;
+    if (index === 0)
+        return false;
+    const prevIndex = index - 1;
+    return logs[prevIndex].tag === compareVersion || logs[prevIndex].hash === compareVersion;
+};
+function ComponentCompare(props) {
+    const { host, baseId: _baseId, compareId: _compareId, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    routes, state, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    tabs, className, hooks, customUseComponent } = props, rest = __rest(props, ["host", "baseId", "compareId", "routes", "state", "tabs", "className", "hooks", "customUseComponent"]);
+    const baseVersion = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('baseVersion');
+    const component = (0, react_1.useContext)(component_1.ComponentContext);
+    const location = (0, base_react_navigation_link_1.useLocation)();
+    const isWorkspace = host === 'teambit.workspace/workspace';
+    const allVersionInfo = (0, react_1.useMemo)(() => { var _a; return ((_a = component.logs) === null || _a === void 0 ? void 0 : _a.slice().sort(component_ui_component_compare_utils_sort_logs_1.sortByDateDsc)) || []; }, [component.id.toString()]);
+    const isNew = allVersionInfo.length === 0;
+    const compareVersion = isWorkspace && !isNew && !(location === null || location === void 0 ? void 0 : location.search.includes('version')) ? 'workspace' : component.id.version;
+    const compareIsLocalChanges = compareVersion === 'workspace';
+    const lastVersionInfo = (0, react_1.useMemo)(() => {
+        const prevVersionInfo = allVersionInfo.find(findPrevVersionFromCurrent(compareVersion));
+        return prevVersionInfo;
+    }, [component.logs]);
+    const baseId = _baseId ||
+        (baseVersion && component.id.changeVersion(baseVersion)) ||
+        (lastVersionInfo && component.id.changeVersion(lastVersionInfo.tag || lastVersionInfo.hash)) ||
+        component.id;
+    const { component: base, loading: loadingBase } = (0, component_1.useComponent)(host, baseId.toString(), { customUseComponent });
+    const { component: compareComponent, loading: loadingCompare } = (0, component_1.useComponent)(host, (_compareId === null || _compareId === void 0 ? void 0 : _compareId.toString()) || '', {
+        skip: !_compareId,
+        customUseComponent,
+    });
+    const loading = loadingBase || loadingCompare;
+    const compare = _compareId ? compareComponent : component;
+    const isEmpty = !loading && !compareIsLocalChanges && !compare && !base;
+    const logsByVersion = (0, react_1.useMemo)(() => {
+        return ((compare === null || compare === void 0 ? void 0 : compare.logs) || []).slice().reduce(component_ui_component_compare_utils_group_by_version_1.groupByVersion, new Map());
+    }, [compare === null || compare === void 0 ? void 0 : compare.id.toString()]);
+    const componentCompareModel = {
+        compare: compare && {
+            model: compare,
+            hasLocalChanges: compareIsLocalChanges,
+        },
+        base: base && {
+            model: base,
+        },
+        loading,
+        logsByVersion,
+        state,
+        hooks,
+    };
+    return (react_1.default.createElement(component_ui_component_compare_context_1.ComponentCompareContext.Provider, { value: componentCompareModel },
+        react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(component_compare_module_scss_1.default.componentCompareContainer, className) }, rest),
+            loading && (react_1.default.createElement("div", { className: component_compare_module_scss_1.default.loader },
+                react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
+            isEmpty && react_1.default.createElement(component_ui_component_compare_blank_state_1.ComponentCompareBlankState, null),
+            !isEmpty && react_1.default.createElement(RenderCompareScreen, Object.assign({}, props)))));
+}
+exports.ComponentCompare = ComponentCompare;
+function RenderCompareScreen(props) {
+    var _a, _b;
+    const { routes, state } = props;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: component_compare_module_scss_1.default.top }, (!(state === null || state === void 0 ? void 0 : state.versionPicker) && react_1.default.createElement(component_ui_component_compare_version_picker_1.ComponentCompareVersionPicker, null)) || ((_a = state === null || state === void 0 ? void 0 : state.versionPicker) === null || _a === void 0 ? void 0 : _a.element)),
+        react_1.default.createElement("div", { className: component_compare_module_scss_1.default.bottom },
+            react_1.default.createElement(CompareMenuNav, Object.assign({}, props)),
+            ((0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(routes) || []).length > 0 && (react_1.default.createElement(ui_foundation_ui_react_router_slot_router_1.SlotRouter, { routes: (0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(routes) || [] })), (_b = state === null || state === void 0 ? void 0 : state.tabs) === null || _b === void 0 ? void 0 :
+            _b.element)));
+}
+function CompareMenuNav({ tabs, state, hooks }) {
+    var _a, _b;
+    const sortedTabs = ((0, component_ui_component_compare_utils_lazy_loading_1.extractLazyLoadedData)(tabs) || []).sort(component_ui_component_compare_utils_sort_tabs_1.sortTabs);
+    const activeTab = (_a = state === null || state === void 0 ? void 0 : state.tabs) === null || _a === void 0 ? void 0 : _a.id;
+    const isControlled = (_b = state === null || state === void 0 ? void 0 : state.tabs) === null || _b === void 0 ? void 0 : _b.controlled;
+    return (react_1.default.createElement("div", { className: component_compare_module_scss_1.default.navContainer },
+        react_1.default.createElement("nav", { className: component_compare_module_scss_1.default.navigation }, sortedTabs.map((tabItem, index) => {
+            var _a;
+            const isActive = !state ? undefined : !!activeTab && !!tabItem.id && activeTab === tabItem.id;
+            return (react_1.default.createElement(component_1.TopBarNav, Object.assign({}, (tabItem.props || {}), { key: `compare-menu-nav-${index}-${tabItem.id}`, active: isActive, onClick: onNavClicked({ id: tabItem.id, hooks }), href: (!isControlled && ((_a = tabItem.props) === null || _a === void 0 ? void 0 : _a.href)) || undefined })));
+        }))));
+}
+function onNavClicked({ hooks, id }) {
+    var _a;
+    if (!((_a = hooks === null || hooks === void 0 ? void 0 : hooks.tabs) === null || _a === void 0 ? void 0 : _a.onClick))
+        return undefined;
+    return (e) => { var _a, _b; return (_b = (_a = hooks === null || hooks === void 0 ? void 0 : hooks.tabs) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, id, e); };
+}
+//# sourceMappingURL=component-compare.js.map

package/dist/component-compare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-compare.js","sourceRoot":"","sources":["../component-compare.tsx"],"names":[],"mappings":"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"}

package/dist/component-compare.module.scss

@@ -0,0 +1,51 @@
+.componentCompareContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 24px 16px 24px;
+}
+
+.bottom {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  flex: 1;
+  padding-bottom: 16px;
+}
+
+.navContainer {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  font-size: var(--bit-p-xs, 14px);
+}
+
+.navigation {
+  display: flex;
+  list-style: none;
+  min-height: 48px;
+
+  @media screen and (max-width: 768px) {
+    padding-left: 6px;
+  }
+
+  > li {
+    display: block;
+    margin-right: 16px;
+    height: 100%;
+  }
+}
+
+.loader {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { ComponentCompare } from './component-compare';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentCompare = void 0;
+var component_compare_1 = require("./component-compare");
+Object.defineProperty(exports, "ComponentCompare", { enumerable: true, get: function () { return component_compare_1.ComponentCompare; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA"}

package/dist/preview-1670470092710.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/index.ts

@@ -0,0 +1 @@
+export { ComponentCompare } from './component-compare';

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@teambit/component.ui.component-compare.component-compare",
+  "version": "0.0.4",
+  "homepage": "https://bit.dev/teambit/component/ui/component-compare/component-compare",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-compare/component-compare",
+    "version": "0.0.4"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "core-js": "^3.0.0",
+    "@teambit/base-react.navigation.link": "2.0.27",
+    "@teambit/component.ui.component-compare.blank-state": "0.0.1",
+    "@teambit/component.ui.component-compare.hooks.use-component-compare-url": "0.0.1",
+    "@teambit/component.ui.component-compare.context": "0.0.4",
+    "@teambit/component.ui.component-compare.models.component-compare-hooks": "0.0.1",
+    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.1",
+    "@teambit/component.ui.component-compare.utils.group-by-version": "0.0.1",
+    "@teambit/component.ui.component-compare.utils.lazy-loading": "0.0.1",
+    "@teambit/component.ui.component-compare.utils.sort-logs": "0.0.1",
+    "@teambit/component.ui.component-compare.utils.sort-tabs": "0.0.1",
+    "@teambit/component.ui.component-compare.version-picker": "0.0.4",
+    "@teambit/design.ui.round-loader": "0.0.355",
+    "@teambit/legacy-component-log": "0.0.399",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.500"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@babel/runtime": "7.20.0",
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "CommonJS",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}