@biom3/react - npm Package Compare versions

Comparing version 0.0.1-alpha to 0.0.2-alpha

babel.config.js

@@ -0,9 +1,7 @@
+// @NOTE: this config is ONLY used for test builds.
+// TSUP does production builds, and it uses ESBUILD under the hood.
+// ------------------------------------------------------------------------------
 // https: //github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts
 module.exports = (api) => {
-  let plugins = [
-    "lodash",
-    "@emotion/babel-plugin",
-    "istanbul",
-    "rewire-exports",
-  ];
+  let plugins = ["lodash", "istanbul", "rewire-exports"];
 
@@ -13,5 +11,5 @@ api.cache(false);
   return {
-    presets: ["next/babel"],
+    presets: ["next/babel", "@emotion/babel-preset-css-prop"],
     plugins,
   };
 };

cypress.config.ts

@@ -57,3 +57,3 @@ import { defineConfig } from "cypress";
     },
-    // projectId: 'mf8wbk',
+    projectId: "z3pb6a",
   },
@@ -60,0 +60,0 @@ viewportWidth: 500,

cypress/plugins/index.js

 module.exports = (on, config) => {
-  // require('@cypress/code-coverage/task')(on, config);
-  // used to instrument files included in unit tests
-  // on("file:preprocessor", require("@cypress/code-coverage/use-babelrc"));
+  require("@cypress/code-coverage/task")(on, config);
+  on("file:preprocessor", require("@cypress/code-coverage/use-babelrc"));
   return config;
 };

cypress/support/component.ts

@@ -18,2 +18,3 @@ // ***********************************************************
 import "./commands";
+import "@cypress/code-coverage/support";
 
@@ -20,0 +21,0 @@ // Alternatively you can use CommonJS syntax:

next.config.js

@@ -0,1 +1,4 @@
+// @NOTE: this config is ONLY used for test builds.
+// TSUP does production builds, and it uses ESBUILD under the hood.
+// ------------------------------------------------------------------------------
 module.exports = {
@@ -2,0 +5,0 @@ reactStrictMode: true,

package.json

@@ -1,1 +0,49 @@
-{"name":"@biom3/react","version":"0.0.1-alpha","main":"./dist/index.js","types":"./dist/index.d.ts","license":"Apache-2.0","scripts":{"lint":"npm run typecheck && npm run lint:eslint","lint:eslint":"TIMING=1 eslint \"**/*.ts*\"","dev":"","test":"npm run test:run","test:open":"NODE_ENV=test cypress open --component","test:run":"NODE_ENV=test cypress run --component","typecheck":"tsc --noEmit","prebuild":"rm -rf ./dist","build":"tsup src/index.ts --dts","publish-package":"npm publish --access public"},"devDependencies":{"@types/lodash.get":"^4.4.7","@types/lodash.merge":"^4.6.7","@types/react":"^18.0.25","@types/react-dom":"^18.0.9","babel-plugin-istanbul":"^6.0.0","babel-plugin-lodash":"^3.3.4","babel-plugin-rewire-exports":"^2.3.0","csstype":"^3.1.1","cypress":"^11.1.0","eslint":"^7.32.0","eslint-config-custom":"*","tsconfig":"*","tsup":"^6.5.0","typescript":"^4.9.3"},"dependencies":{"@emotion/react":"^11.10.5","lodash.get":"^4.4.2","lodash.merge":"^4.6.2","react":"^18.2.0","ts-deepmerge":"^5.0.0"}}
+{
+  "name": "@biom3/react",
+  "version": "0.0.2-alpha",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "lint": "npm run typecheck && npm run lint:eslint",
+    "lint:eslint": "TIMING=1 eslint \"**/*.ts*\"",
+    "dev": "",
+    "test": "npm run test:run",
+    "test:open": "NODE_ENV=test cypress open --component",
+    "test:run": "NODE_ENV=test cypress run --component",
+    "test:ci": "NODE_ENV=test cypress run --component --env coverage=true --record",
+    "typecheck": "tsc --noEmit",
+    "coverage": "npx nyc report --check-coverage",
+    "prebuild": "rm -rf ./dist",
+    "build": "tsup src/index.ts --dts",
+    "publish-package": "if can-npm-publish; then npm publish --access public; else echo 'Skipping package npm publish'; fi"
+  },
+  "devDependencies": {
+    "@cypress/code-coverage": "^3.10.0",
+    "@emotion/babel-preset-css-prop": "^11.10.0",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@types/lodash.get": "^4.4.7",
+    "@types/lodash.merge": "^4.6.7",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-rewire-exports": "^2.3.0",
+    "can-npm-publish": "^1.3.6",
+    "csstype": "^3.1.1",
+    "cypress": "^12.0.2",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.3"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.10.5",
+    "@emotion/react": "^11.10.5",
+    "lodash.get": "^4.4.2",
+    "lodash.merge": "^4.6.2",
+    "react": "^18.2.0",
+    "ts-deepmerge": "^5.0.0"
+  }
+}

src/components/index.ts

@@ -1,3 +0,71 @@
-export * from "./Box";
-export * from "./Heading";
-export * from "./Body";
+export { Box } from "./Box";
+export { Heading } from "./Heading";
+export { Body } from "./Body";
+export {
+  SvgIcon,
+  IconTick,
+  IconAuthenticated,
+  IconMinus,
+  IconSearch,
+  IconExclaimation,
+  IconCloseWithCircle,
+  IconCountdown,
+  IconInformation,
+  IconAdd,
+  IconArrowForward,
+  IconArrowBackward,
+  IconThemeDark,
+  IconThemeLight,
+  IconPeople,
+  IconEmail,
+  IconPercentage,
+  IconLoader,
+  IconSwap,
+  IconMenu,
+  IconReturnKeyboard,
+  IconClose,
+  IconChevronForward,
+  IconChevronBackward,
+  IconChevronExpand,
+  IconChevronCollapse,
+  IconViewGrid,
+  IconDocuments,
+  IconDocument,
+  IconCircleArrow,
+  IconCopyText,
+  IconImxRewards,
+  IconTags,
+  IconWalletConnect,
+  IconSparkle,
+  IconDevSdk,
+  IconDevContracts,
+  IconDevExplorer,
+  IconGraphPerformance,
+  IconTokens,
+  IconImxTokenDex,
+  IconMore,
+  IconCalendar,
+  IconWallet,
+  IconMinting,
+  IconCart,
+  IconSettingsCog,
+  IconPreferences,
+  IconDiscord,
+  IconTwitter,
+  IconTelegram,
+  IconReddit,
+  IconSushiSwap,
+  IconPancakeSwap,
+  IconUniSwap,
+  IconImmtuableX,
+  IconImmtuable,
+  IconImmtuableStudio,
+  IconNotification,
+  IconHidePassword,
+  IconShowPassword,
+  IconImxToken,
+  IconEthToken,
+  IconViewList,
+  IconEducation,
+  IconDashboard,
+} from "./Icons";

src/index.ts

 export * from "./components";
 export * from "./providers";
+export * from "./types";

src/types/index.ts

@@ -1,2 +0,1 @@
-export * from "./newTypes";
-export * from "./shared";
+export type { FullBaseTheme, FullUiTheme } from "./theme";

src/types/shared.ts

 import { MutableRefObject } from "react";
 
-export type BaseComponentPropTypes<T extends HTMLElement = HTMLElement> = {
+export type BaseComponentPropTypes<
+  T extends HTMLOrSVGElement = HTMLOrSVGElement
+> = {
   testId?: string;
   domRef?: MutableRefObject<T | null>;
 };

src/utils/sharedStyleHelpers.ts

@@ -72,4 +72,4 @@ import { Theme } from "@emotion/react";
 }) {
-  const variantAsArray = Array.isArray(variant) ? variant : [variant];
-  const weightAsArray = Array.isArray(weight) ? weight : [weight];
+  const variantAsArray = Array.isArray(variant) ? [...variant] : [variant];
+  const weightAsArray = Array.isArray(weight) ? [...weight] : [weight];
 
@@ -76,0 +76,0 @@ // We need to convince TS that the default values are a subset of the types in variantAsArray and weightAsArray

src/utils/sxToEmotionStyles.ts

 import { Theme } from "@emotion/react";
 import merge from "ts-deepmerge";
-import get from "lodash.get";
+import type * as CSS from "csstype";
+import { pickTokenValue } from "@biom3/tokens";
 import {
+  MeasurementAndResponsiveMeasurement,
+  ResponsiveMeasurement,
   ResponsiveObjectMeasurement,
-  ResponsiveMeasurement,
   shortHandCssRuleMapping,
   SxProps,
-  MeasurementAndResponsiveMeasurement,
-} from "../types/newTypes";
-import type * as CSS from "csstype";
+} from "../types/sxProps";
 
@@ -41,8 +41,2 @@ export function hasKey<K extends string>(
 
-// @TODO - we can type this in the future with a 'TypeFromPath' type (take an object, and tell us specific type). this function wil have to become generic
-export function pickTokenValue(selector: string, themeProps: Theme) {
-  const pickedToken = get(themeProps, selector) as string | undefined;
-  return pickedToken;
-}
-
 export const partOfTokenRegex = /base.|ui./i;
@@ -55,3 +49,3 @@ export function applyStyleAmount(
   const valueFromToken = value?.match(partOfTokenRegex)
-    ? pickTokenValue(value, themeProps)
+    ? pickTokenValue<string>(themeProps, value)
     : value;
@@ -58,0 +52,0 @@ return rule.match(/X|Y/) && valueFromToken

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

671912

increased by154.42%

Number of package files

117

increased by216.22%

Lines of code

8084

increased by108.51%

Number of lines in readme file

59

increased by883.33%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

18

increased by28.57%

Number of low supply chain risk alerts

23

increased by2200%

Dependency changes

• + Added@emotion/css@^11.10.5

• + Added@emotion/css@11.13.5(transitive)