@deep-foundation/deepcase
Version:
[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-
249 lines • 12.8 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef, useState } from 'react';
import { Box, Button, Flex, IconButton, Input, InputGroup, InputRightElement, Spacer } from '@chakra-ui/react';
import { motion, useAnimation } from 'framer-motion';
import { Appearance } from '../component-appearance';
import { BsSearch } from 'react-icons/bs';
import { SlClose } from 'react-icons/sl';
import { TabComponent } from './packager-interface-tabs-content';
import { TabsPackages } from './packager-interface-tabs-menu';
import { useDeep } from '@deep-foundation/deeplinks/imports/client';
import fetch from 'node-fetch';
import { gql } from "@apollo/client";
import { makeUseAxios } from "axios-hooks";
import axios from "axios";
export const searchNpmPackages = (query) => __awaiter(void 0, void 0, void 0, function* () {
const deepPackageKeyword = 'deep-package';
const textParameter = encodeURIComponent(`${query} keywords:${deepPackageKeyword}`);
const url = `https://registry.npmjs.com/-/v1/search?text=${textParameter}`;
const response = yield fetch(url);
const data = yield response.json();
return data;
});
export const getDeepPackagesVersions = (deep, packagesNames) => __awaiter(void 0, void 0, void 0, function* () {
const { data: data } = yield deep.apolloClient.query({
query: gql `query GetPackagesVersionsByName($packageVersionTypeId: bigint, $packageNamespaceTypeId: bigint, $packageActiveTypeId: bigint, $packagesNames: [String]) {
namespaces: links(where: {type_id: {_eq: $packageNamespaceTypeId}, string: { value: {_in: $packagesNames }}}) {
id
name: value
versions: out(where: {type_id: {_eq: $packageVersionTypeId}, string: {value: {_is_null: false}}}) {
id
version: value
packageId: to_id
}
active: out(where: {type_id: {_eq: $packageVersionTypeId}, string: {value: {_is_null: false}}}) {
id
version: value
packageId: to_id
}
}
}`,
variables: {
"packageVersionTypeId": yield deep.id('@deep-foundation/core', 'PackageVersion'),
"packageNamespaceTypeId": yield deep.id('@deep-foundation/core', 'PackageNamespace'),
"packageActiveTypeId": yield deep.id('@deep-foundation/core', 'PackageNamespace'),
"packagesNames": packagesNames
},
});
return data.namespaces.map(namespace => {
const activeVersion = namespace.active.map(version => {
var _a;
return {
packageId: version === null || version === void 0 ? void 0 : version.packageId,
version: (_a = version === null || version === void 0 ? void 0 : version.version) === null || _a === void 0 ? void 0 : _a.value
};
})[0];
return {
namespaceId: namespace.id,
name: namespace.name.value,
activeVersion: activeVersion,
versions: namespace.versions.map(version => {
var _a;
return {
packageId: version === null || version === void 0 ? void 0 : version.packageId,
version: (_a = version === null || version === void 0 ? void 0 : version.version) === null || _a === void 0 ? void 0 : _a.value,
isActive: (version === null || version === void 0 ? void 0 : version.packageId) === (activeVersion === null || activeVersion === void 0 ? void 0 : activeVersion.packageId)
};
})
};
});
});
export const combinedPackagesSearch = (deep, query) => __awaiter(void 0, void 0, void 0, function* () {
const remotePackages = yield searchNpmPackages(query);
const packagesNames = remotePackages.objects.map(rp => rp.package.name);
const localPackages = yield yield getDeepPackagesVersions(deep, packagesNames);
const localPackagesHash = {};
for (const localPackage of localPackages) {
localPackagesHash[localPackage.name] = localPackage;
}
const packages = remotePackages.objects.map(rp => {
return {
remotePackage: rp.package,
localPackage: localPackagesHash[rp.package.name],
};
});
return {
installedPackages: packages.filter(p => !!p.localPackage),
notInstalledPackages: packages.filter(p => !p.localPackage)
};
});
export const getPackageFromNpm = (packageName) => __awaiter(void 0, void 0, void 0, function* () {
const url = `https://registry.npmjs.com/${packageName}`;
const response = yield fetch(url);
const data = yield response.json();
return data;
});
const useAxios = makeUseAxios({ axios: axios.create() });
const makeNpmPackagesUrl = (query) => {
const deepPackageKeyword = 'deep-package';
const textParameter = encodeURIComponent(`${query} keywords:${deepPackageKeyword}`);
return `https://registry.npmjs.com/-/v1/search?text=${textParameter}&size=250`;
};
const makePackagesSearchResults = (deep, packageNamespaceTypeId, packageVersionTypeId, packageActiveTypeId, remotePackages, areLinksPrefetched) => {
var _a, _b;
const installedPackages = [];
const notInstalledPackages = [];
if ((remotePackages === null || remotePackages === void 0 ? void 0 : remotePackages.length) > 0) {
if (areLinksPrefetched && deep.minilinks.byType[packageNamespaceTypeId] && deep.minilinks.byType[packageVersionTypeId] && deep.minilinks.byType[packageActiveTypeId]) {
const namespacesByName = {};
for (const namespace of deep.minilinks.byType[packageNamespaceTypeId]) {
const name = (_a = namespace === null || namespace === void 0 ? void 0 : namespace.value) === null || _a === void 0 ? void 0 : _a.value;
if (name)
namespacesByName[name] = namespace;
}
const versionsByNamespaceId = {};
for (const version of deep.minilinks.byType[packageVersionTypeId]) {
versionsByNamespaceId[version.from_id] = [...((versionsByNamespaceId === null || versionsByNamespaceId === void 0 ? void 0 : versionsByNamespaceId[version.from_id]) || []), version];
}
const isActiveByPackageId = {};
for (const packageActive of deep.minilinks.byType[packageActiveTypeId]) {
isActiveByPackageId[packageActive.to_id] = true;
}
for (const remotePackage of remotePackages) {
const name = remotePackage.package.name;
const namespaceId = (_b = namespacesByName[name]) === null || _b === void 0 ? void 0 : _b.id;
if (namespaceId && versionsByNamespaceId[namespaceId]) {
const versions = versionsByNamespaceId[namespaceId].map(version => {
var _a;
return ({
packageId: version === null || version === void 0 ? void 0 : version.to_id,
version: (_a = version === null || version === void 0 ? void 0 : version.value) === null || _a === void 0 ? void 0 : _a.value,
isActive: isActiveByPackageId[version === null || version === void 0 ? void 0 : version.to_id]
});
});
installedPackages.push({ localPackage: { namespaceId, name, versions }, remotePackage });
}
else {
notInstalledPackages.push({ remotePackage });
}
}
;
}
else {
for (const remotePackage of remotePackages) {
notInstalledPackages.push({ remotePackage });
}
;
}
}
return { installedPackages, notInstalledPackages };
};
const variants = {
show: {
scaleX: 1,
scaleY: 1,
opacity: 1,
borderRadius: '0%',
display: 'block',
transition: { duration: 0.5 }
},
hide: {
scaleX: 0.3,
scaleY: 0.1,
opacity: 0,
borderRadius: '50%',
display: 'none',
transition: {
duration: 0.5,
display: { delay: 0.6 },
opacity: { duration: 0.4 },
}
},
initial: {
originX: 1,
originY: 0,
scaleX: 0,
scaleY: 0,
opacity: 0,
display: 'none'
}
};
const buttonVariant = {
show: {
scaleX: 1,
scaleY: 1,
opacity: 1,
borderRadius: '0.5rem',
display: 'block',
transition: { duration: 0.5 }
},
hide: {
scaleX: 0.3,
scaleY: 0.1,
opacity: 0,
borderRadius: '50rem',
display: 'none',
transition: {
duration: 0.5,
display: { delay: 0.6 },
opacity: { duration: 0.4 },
}
},
initial: {
scaleX: 1,
scaleY: 1,
opacity: 1,
display: 'block'
}
};
export const PackagerInterface = React.memo(({ toggle, onClose, }) => {
const inputRef = useRef(null);
const [search, setSearch] = useState('');
useEffect(() => {
inputRef.current.focus();
}, []);
const deep = useDeep();
const [variant, setSelectedVariant] = useState(0);
const [{ data, loading, error }, refetch] = useAxios(makeNpmPackagesUrl(search));
const packageNamespaceTypeId = deep.idLocal('@deep-foundation/core', 'PackageNamespace');
const packageVersionTypeId = deep.idLocal('@deep-foundation/core', 'PackageVersion');
const packageActiveTypeId = deep.idLocal('@deep-foundation/core', 'PackageActive');
const { data: prefetched } = deep.useDeepSubscription({
type_id: { _in: [packageNamespaceTypeId, packageVersionTypeId, packageActiveTypeId] }
});
const { installedPackages, notInstalledPackages } = makePackagesSearchResults(deep, packageNamespaceTypeId, packageVersionTypeId, packageActiveTypeId, data === null || data === void 0 ? void 0 : data.objects, (prefetched === null || prefetched === void 0 ? void 0 : prefetched.length) > 0);
const [togglePackager, setTogglePackager] = useState(false);
const control = useAnimation();
useEffect(() => {
if (togglePackager === true) {
control.start("hide");
}
else {
control.start("show");
}
}, [control, togglePackager]);
return (_jsxs(Box, { right: 0, mr: '16', mt: '4', pos: 'fixed', children: [_jsx(Button, { as: motion.button, variants: buttonVariant, animate: control, colorScheme: 'blue', onClick: () => setTogglePackager(true), pos: 'absolute', right: '0', children: "packager" }), _jsx(Appearance, { toggle: togglePackager, variantsAnimation: variants, children: _jsxs(Box, { borderWidth: 'thin', borderColor: 'borderColor', borderRadius: '1.2rem', w: '35.5rem', bg: 'backgroundModal', sx: { height: 'calc(100vh - 3rem)' }, overflow: 'hidden', children: [_jsxs(Flex, { minWidth: 'max-content', alignItems: 'center', gap: '2', children: [_jsxs(InputGroup, { size: 'xs', pl: '2', children: [_jsx(Input, { borderColor: 'gray.400', bg: 'whiteAlpha.50', ref: inputRef, color: 'text', placeholder: 'search', sx: { borderRadius: 'full' }, focusBorderColor: 'primary', value: search, onChange: (e) => setSearch(e.target.value) }), _jsx(InputRightElement, { children: _jsx(BsSearch, { color: '#718096' }) })] }), _jsx(Spacer, {}), _jsx(IconButton, { "aria-label": 'packager window close', variant: 'ghost', colorScheme: 'current', isRound: true, icon: _jsx(SlClose, {}), onClick: () => {
setTogglePackager(false);
setSearch('');
} })] }), _jsx(TabsPackages, { selectedTab: variant, onSelectMode: () => setSelectedVariant(variant => variant === 0 ? 1 : 0), quantityInstall: installedPackages.length, quantityUninstalled: notInstalledPackages.length }), _jsx(TabComponent, { variant: variant, installedPackages: installedPackages, notInstalledPackages: notInstalledPackages })] }) })] }));
});
//# sourceMappingURL=packager-interface.js.map