@teambit/component.ui.component-filters.env-filter 0.0.1

package/dist/envs-filter.d.ts

@@ -0,0 +1,17 @@
+import { ComponentID } from '@teambit/component';
+import { ComponentFilterCriteria } from '@teambit/component.ui.component-filters.component-filter-context';
+declare type EnvFilterEnvState = {
+    active: boolean;
+    icon?: string;
+    displayName: string;
+    id: string;
+    description: string;
+    componentId: ComponentID;
+};
+export declare type EnvFilterState = {
+    envsState: Map<string, EnvFilterEnvState>;
+    dropdownState: boolean;
+};
+export declare type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;
+export declare const EnvsFilter: EnvsFilterCriteria;
+export {};

package/dist/envs-filter.js

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvsFilter = void 0;
+const react_1 = __importStar(require("react"));
+const design_inputs_selectors_multi_select_1 = require("@teambit/design.inputs.selectors.multi-select");
+const component_1 = require("@teambit/component");
+const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
+const classnames_1 = __importDefault(require("classnames"));
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+const component_ui_component_filters_component_filter_context_1 = require("@teambit/component.ui.component-filters.component-filter-context");
+const envs_filter_module_scss_1 = __importDefault(require("./envs-filter.module.scss"));
+exports.EnvsFilter = {
+    id: 'envs',
+    match: (component, filter) => {
+        var _a;
+        const { envsState } = filter;
+        const activeEnvs = [...envsState.values()].filter((envState) => envState.active).map((envState) => envState.id);
+        // match everything when no envs are set
+        if (activeEnvs.length === 0)
+            return true;
+        const envId = component.environment && ((_a = component_1.ComponentID.tryFromString(component.environment.id)) === null || _a === void 0 ? void 0 : _a.toStringWithoutVersion());
+        const matches = !!envId && activeEnvs.indexOf(envId) >= 0;
+        return matches;
+    },
+    state: {
+        envsState: new Map(),
+        dropdownState: false,
+    },
+    order: 1,
+    render: envsFilter,
+};
+const getDefaultState = (components) => {
+    return (0, react_1.useMemo)(() => {
+        const defaultState = {
+            dropdownState: false,
+            envsState: new Map(),
+        };
+        const componentEnvSet = new Set();
+        const componentsEnvsWithIcons = components
+            .filter((component) => {
+            const envId = component.environment && component_1.ComponentID.tryFromString(component.environment.id);
+            if (!envId)
+                return false;
+            const envKey = envId.toStringWithoutVersion();
+            if (componentEnvSet.has(envKey))
+                return false;
+            componentEnvSet.add(envKey);
+            return true;
+        })
+            .map((component) => {
+            var _a, _b;
+            const envId = component_1.ComponentID.fromString((_a = component.environment) === null || _a === void 0 ? void 0 : _a.id);
+            return {
+                displayName: envId.name,
+                id: envId.toStringWithoutVersion(),
+                description: `${envId.scope}${envId.namespace ? '/'.concat(envId.namespace) : ''}`,
+                icon: (_b = component.environment) === null || _b === void 0 ? void 0 : _b.icon,
+                componentId: envId,
+            };
+        });
+        componentsEnvsWithIcons.forEach((componentEnvWithIcon) => {
+            defaultState.envsState.set(componentEnvWithIcon.id, Object.assign(Object.assign({}, componentEnvWithIcon), { active: true }));
+        });
+        return defaultState;
+    }, [components]);
+};
+function envsFilter({ components, className, }) {
+    const defaultState = getDefaultState(components);
+    const filterContext = (0, component_ui_component_filters_component_filter_context_1.useComponentFilter)(exports.EnvsFilter, defaultState);
+    if (!filterContext)
+        return null;
+    const [currentFilter, updateFilter] = filterContext;
+    const currentEnvsState = currentFilter.state.envsState;
+    const selectList = [];
+    currentFilter.state.envsState.forEach((state) => {
+        var _a;
+        selectList.push({
+            value: state.id,
+            icon: state.icon,
+            description: state.description,
+            checked: !!((_a = currentEnvsState.get(state.id)) === null || _a === void 0 ? void 0 : _a.active),
+            element: react_1.default.createElement(EnvsDropdownItem, Object.assign({}, state)),
+        });
+    });
+    const onCheck = (value, e) => {
+        const checked = e.target.checked;
+        updateFilter((currentState) => {
+            if (checked && !currentState.state.dropdownState) {
+                currentState.state.dropdownState = true;
+            }
+            const currentEnvState = currentState.state.envsState.get(value);
+            if (!currentEnvState)
+                return currentState;
+            currentState.state.envsState.set(value, Object.assign(Object.assign({}, currentEnvState), { active: checked }));
+            return currentState;
+        });
+    };
+    const onClear = () => {
+        updateFilter((currentState) => {
+            currentState.state.envsState.forEach((value, key) => {
+                currentState.state.envsState.set(key, Object.assign(Object.assign({}, value), { active: false }));
+            });
+            return currentState;
+        });
+    };
+    const onSubmit = () => {
+        updateFilter((currentState) => {
+            currentState.state.dropdownState = false;
+            return currentState;
+        });
+    };
+    const onDropdownToggled = (event, open) => {
+        updateFilter((currentState) => {
+            currentState.state.dropdownState = open;
+            return currentState;
+        });
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(envs_filter_module_scss_1.default.envsFilterContainer, className) },
+        react_1.default.createElement(design_inputs_selectors_multi_select_1.MultiSelect, { itemsList: selectList, placeholder: react_1.default.createElement(EnvsPlaceholder, null), onSubmit: onSubmit, onCheck: onCheck, onClear: onClear, onChange: onDropdownToggled, open: currentFilter.state.dropdownState, dropdownBorder: false, className: envs_filter_module_scss_1.default.envFilterDropdownContainer, dropClass: envs_filter_module_scss_1.default.envFilterDropdown })));
+}
+function EnvsPlaceholder() {
+    return (react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.filterIcon },
+        react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/env.svg" }),
+        react_1.default.createElement("span", { className: envs_filter_module_scss_1.default.filterIconLabel }, "Environments"),
+        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.dropdownArrow },
+            react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/fat-arrow-down.svg" }))));
+}
+function EnvsDropdownItem({ displayName, icon, description, componentId, id }) {
+    return (react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "right", content: react_1.default.createElement(base_react_navigation_link_1.Link, { className: envs_filter_module_scss_1.default.envLink, href: component_modules_component_url_1.ComponentUrl.toUrl(componentId, { includeVersion: false }), external: true }, id) },
+        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemContainer },
+            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItem },
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, null, displayName),
+                react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemIconContainer },
+                    react_1.default.createElement("img", { className: envs_filter_module_scss_1.default.envDropdownItemIcon, src: icon }))),
+            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.description },
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: envs_filter_module_scss_1.default.descriptionText }, description)))));
+}
+//# sourceMappingURL=envs-filter.js.map

package/dist/envs-filter.js.map

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

package/dist/envs-filter.module.scss

@@ -0,0 +1,94 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+.envsFilterContainer {
+  > div {
+    line-height: 16px;
+    display: flex;
+  }
+
+  .filterIcon {
+    display: flex;
+    padding: 8px;
+    border-radius: 8px;
+
+    &:hover {
+      background: var(--bit-bg-heavy, #f6f6f6);
+      cursor: pointer;
+    }
+
+    img {
+      width: 16px;
+      filter: invert(44%) sepia(7%) saturate(560%) hue-rotate(187deg) brightness(96%) contrast(91%);
+    }
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 14px;
+    }
+
+    .dropdownArrow {
+      display: flex;
+    }
+  }
+}
+
+.envFilterDropdownContainer {
+  width: 100%;
+}
+
+.envFilterDropdown {
+  width: 100%;
+  // otherwise when the dropdown is open it clashes with the content of the tree
+  // (this is bizarre, the tree has no position absolute)
+  z-index: $nav-z-index;
+}
+
+.envDropdownItemContainer {
+  display: flex;
+  width: calc(100% - 24px);
+  align-items: baseline;
+  flex-direction: column;
+}
+
+.envDropdownItemIconContainer {
+  display: flex;
+  height: 16px;
+  width: 16px;
+}
+
+.envDropdownItem {
+  padding-left: 8px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--bit-p-md, 16px);
+}
+
+.envDropdownItemLabel,
+.envDropdownItemIcon {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 8px;
+}
+.description {
+  font-size: var(--bit-p-xs, 14px);
+  padding-left: 8px;
+  padding-right: 16px;
+  color: var(--bit-text-color-light, #6c707c);
+  width: calc(100% - 24px);
+}
+
+.envDropdownItemContainerWithIcon {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: calc(100% - 24px);
+}
+
+.descriptionText {
+  width: 100%;
+}
+
+.envLink {
+  color: white;
+  text-decoration: none;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { EnvsFilter } from './envs-filter';

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA"}

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/envs-filter.module.scss

@@ -0,0 +1,94 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+.envsFilterContainer {
+  > div {
+    line-height: 16px;
+    display: flex;
+  }
+
+  .filterIcon {
+    display: flex;
+    padding: 8px;
+    border-radius: 8px;
+
+    &:hover {
+      background: var(--bit-bg-heavy, #f6f6f6);
+      cursor: pointer;
+    }
+
+    img {
+      width: 16px;
+      filter: invert(44%) sepia(7%) saturate(560%) hue-rotate(187deg) brightness(96%) contrast(91%);
+    }
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 14px;
+    }
+
+    .dropdownArrow {
+      display: flex;
+    }
+  }
+}
+
+.envFilterDropdownContainer {
+  width: 100%;
+}
+
+.envFilterDropdown {
+  width: 100%;
+  // otherwise when the dropdown is open it clashes with the content of the tree
+  // (this is bizarre, the tree has no position absolute)
+  z-index: $nav-z-index;
+}
+
+.envDropdownItemContainer {
+  display: flex;
+  width: calc(100% - 24px);
+  align-items: baseline;
+  flex-direction: column;
+}
+
+.envDropdownItemIconContainer {
+  display: flex;
+  height: 16px;
+  width: 16px;
+}
+
+.envDropdownItem {
+  padding-left: 8px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--bit-p-md, 16px);
+}
+
+.envDropdownItemLabel,
+.envDropdownItemIcon {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 8px;
+}
+.description {
+  font-size: var(--bit-p-xs, 14px);
+  padding-left: 8px;
+  padding-right: 16px;
+  color: var(--bit-text-color-light, #6c707c);
+  width: calc(100% - 24px);
+}
+
+.envDropdownItemContainerWithIcon {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: calc(100% - 24px);
+}
+
+.descriptionText {
+  width: 100%;
+}
+
+.envLink {
+  color: white;
+  text-decoration: none;
+}

package/envs-filter.tsx

@@ -0,0 +1,213 @@
+import React, { useMemo } from 'react';
+import { MultiSelect, ItemType } from '@teambit/design.inputs.selectors.multi-select';
+import { ComponentID, ComponentModel } from '@teambit/component';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+import classNames from 'classnames';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { Link } from '@teambit/base-react.navigation.link';
+import {
+  ComponentFilterCriteria,
+  useComponentFilter,
+} from '@teambit/component.ui.component-filters.component-filter-context';
+import styles from './envs-filter.module.scss';
+
+type EnvFilterEnvState = {
+  active: boolean;
+  icon?: string;
+  displayName: string;
+  id: string;
+  description: string;
+  componentId: ComponentID;
+};
+export type EnvFilterState = {
+  envsState: Map<string, EnvFilterEnvState>;
+  dropdownState: boolean;
+};
+export type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;
+
+export const EnvsFilter: EnvsFilterCriteria = {
+  id: 'envs',
+  match: (component, filter) => {
+    const { envsState } = filter;
+    const activeEnvs = [...envsState.values()].filter((envState) => envState.active).map((envState) => envState.id);
+    // match everything when no envs are set
+    if (activeEnvs.length === 0) return true;
+    const envId =
+      component.environment && ComponentID.tryFromString(component.environment.id)?.toStringWithoutVersion();
+    const matches = !!envId && activeEnvs.indexOf(envId) >= 0;
+    return matches;
+  },
+  state: {
+    envsState: new Map<string, EnvFilterEnvState>(),
+    dropdownState: false,
+  },
+  order: 1,
+  render: envsFilter,
+};
+
+const getDefaultState = (components: ComponentModel[]) => {
+  return useMemo(() => {
+    const defaultState = {
+      dropdownState: false,
+      envsState: new Map<string, EnvFilterEnvState>(),
+    };
+
+    const componentEnvSet = new Set<string>();
+
+    const componentsEnvsWithIcons = components
+      .filter((component) => {
+        const envId = component.environment && ComponentID.tryFromString(component.environment.id);
+
+        if (!envId) return false;
+
+        const envKey = envId.toStringWithoutVersion();
+
+        if (componentEnvSet.has(envKey)) return false;
+
+        componentEnvSet.add(envKey);
+
+        return true;
+      })
+      .map((component) => {
+        const envId = ComponentID.fromString(component.environment?.id as string);
+        return {
+          displayName: envId.name,
+          id: envId.toStringWithoutVersion(),
+          description: `${envId.scope}${envId.namespace ? '/'.concat(envId.namespace) : ''}`,
+          icon: component.environment?.icon,
+          componentId: envId,
+        };
+      });
+
+    componentsEnvsWithIcons.forEach((componentEnvWithIcon) => {
+      defaultState.envsState.set(componentEnvWithIcon.id, { ...componentEnvWithIcon, active: true });
+    });
+
+    return defaultState;
+  }, [components]);
+};
+
+function envsFilter({
+  components,
+  className,
+}: { components: ComponentModel[] } & React.HTMLAttributes<HTMLDivElement>) {
+  const defaultState = getDefaultState(components);
+  const filterContext = useComponentFilter(EnvsFilter, defaultState);
+
+  if (!filterContext) return null;
+
+  const [currentFilter, updateFilter] = filterContext;
+
+  const currentEnvsState = currentFilter.state.envsState;
+
+  const selectList: ItemType[] = [];
+
+  currentFilter.state.envsState.forEach((state) => {
+    selectList.push({
+      value: state.id,
+      icon: state.icon,
+      description: state.description,
+      checked: !!currentEnvsState.get(state.id)?.active,
+      element: <EnvsDropdownItem {...state} />,
+    });
+  });
+
+  const onCheck = (value: string, e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+
+    updateFilter((currentState) => {
+      if (checked && !currentState.state.dropdownState) {
+        currentState.state.dropdownState = true;
+      }
+
+      const currentEnvState = currentState.state.envsState.get(value);
+
+      if (!currentEnvState) return currentState;
+
+      currentState.state.envsState.set(value, { ...currentEnvState, active: checked });
+      return currentState;
+    });
+  };
+
+  const onClear = () => {
+    updateFilter((currentState) => {
+      currentState.state.envsState.forEach((value, key) => {
+        currentState.state.envsState.set(key, { ...value, active: false });
+      });
+      return currentState;
+    });
+  };
+
+  const onSubmit = () => {
+    updateFilter((currentState) => {
+      currentState.state.dropdownState = false;
+      return currentState;
+    });
+  };
+
+  const onDropdownToggled = (event, open) => {
+    updateFilter((currentState) => {
+      currentState.state.dropdownState = open;
+      return currentState;
+    });
+  };
+
+  return (
+    <div className={classNames(styles.envsFilterContainer, className)}>
+      <MultiSelect
+        itemsList={selectList}
+        placeholder={<EnvsPlaceholder />}
+        onSubmit={onSubmit}
+        onCheck={onCheck}
+        onClear={onClear}
+        onChange={onDropdownToggled}
+        open={currentFilter.state.dropdownState}
+        dropdownBorder={false}
+        className={styles.envFilterDropdownContainer}
+        dropClass={styles.envFilterDropdown}
+      />
+    </div>
+  );
+}
+
+function EnvsPlaceholder() {
+  return (
+    <div className={styles.filterIcon}>
+      <img src="https://static.bit.dev/bit-icons/env.svg" />
+      <span className={styles.filterIconLabel}>Environments</span>
+      <div className={styles.dropdownArrow}>
+        <img src="https://static.bit.dev/bit-icons/fat-arrow-down.svg" />
+      </div>
+    </div>
+  );
+}
+
+function EnvsDropdownItem({ displayName, icon, description, componentId, id }: EnvFilterEnvState) {
+  return (
+    <Tooltip
+      placement="right"
+      content={
+        <Link
+          className={styles.envLink}
+          href={ComponentUrl.toUrl(componentId, { includeVersion: false })}
+          external={true}
+        >
+          {id}
+        </Link>
+      }
+    >
+      <div className={styles.envDropdownItemContainer}>
+        <div className={styles.envDropdownItem}>
+          <Ellipsis>{displayName}</Ellipsis>
+          <div className={styles.envDropdownItemIconContainer}>
+            <img className={styles.envDropdownItemIcon} src={icon}></img>
+          </div>
+        </div>
+        <div className={styles.description}>
+          <Ellipsis className={styles.descriptionText}>{description}</Ellipsis>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}

package/index.ts

@@ -0,0 +1 @@
+export { EnvsFilter } from './envs-filter';

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@teambit/component.ui.component-filters.env-filter",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-filters/env-filter",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "core-js": "^3.0.0",
+    "@teambit/base-react.navigation.link": "2.0.27",
+    "@teambit/design.inputs.selectors.multi-select": "0.0.20",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.488",
+    "@teambit/component.modules.component-url": "0.0.128",
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.1",
+    "@teambit/design.ui.styles.ellipsis": "0.0.347",
+    "@teambit/design.ui.tooltip": "0.0.352"
+  },
+  "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.12.18",
+    "@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",
+    "vue",
+    "vue-components"
+  ]
+}

package/preview-1661225521544.js

@@ -0,0 +1,5 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];

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;
+}