@lidofinance/next-ui-primitives 0.23.0

package/README.md

@@ -0,0 +1,71 @@
+# @lidofinance/next-ui-primitives
+
+Next UI primitives: components, constants, hooks etc.
+
+This component abstracted from the blockchain network,
+other words you can use it for any widgets for any blockchains.
+
+This component based on Next.js.
+
+## Installation
+```bash
+yarn add @lidofinance/next-ui-primitives
+
+# and react 17
+yarn add react@^17.0.0
+
+# or react 18
+yarn add react@^18.0.0
+
+# and additional
+yarn add next@^12.3.0
+```
+
+## Using
+
+### Components
+
+#### LidoLink:
+
+Should use for **external** (https://lido.fi/) or **local links** (`/example-page?ref=SOME_REF&embed=SOME_EMBED`).
+
+You can pass a `ref` and `embed` query string parameters between **local links**:
+
+- `ref` is needed for referral program;
+- `embed` is needed for support of `staking widget` via iframe in `ledger live`.
+
+Below an example how to make custom styles of **LidoLink**:
+
+```tsx
+import React, { FC } from 'react'
+import { useRouter } from 'next/router'
+import styled from 'styled-components'
+import { LidoLink, LidoLinkProps } from '@lidofinance/next-ui-primitives'
+
+export type NavigationLinkProps = LidoLinkProps & {
+  icon: React.ReactNode
+  title: string
+  href: string
+}
+
+export const NavigationLinkStyle = styled(LidoLink)<{ $active: boolean }>`
+  // Some custom styles...
+`
+
+export const Component: FC<NavigationLinkProps> = ({ icon, title, href, ...rest }) => {
+  const { pathname } = useRouter()
+
+  // compare without query string
+  const active = pathname === href.split('?')[0]
+
+  return (
+    <NavigationLinkStyle {...rest} href={href} $active={active}>
+
+      <React.Fragment>
+        {icon}
+        <span>{title}</span>
+      </React.Fragment>
+    </NavigationLinkStyle>
+  )
+}
+```

package/README.mdx

@@ -0,0 +1,4 @@
+import { Markdown } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Markdown>{ReadMe}</Markdown>

package/dist/index.cjs

@@ -0,0 +1,95 @@
+var $93xws$reactjsxruntime = require("react/jsx-runtime");
+var $93xws$react = require("react");
+var $93xws$nextrouter = require("next/router");
+var $93xws$nextlink = require("next/link");
+
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
+  });
+
+  return dest;
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $9eb49ab02efff021$exports = {};
+var $abd0d426949c0843$exports = {};
+
+$parcel$export($abd0d426949c0843$exports, "LidoLink", function () { return $abd0d426949c0843$export$d97afdf95912bfad; });
+
+
+
+
+const $abd0d426949c0843$var$isValidAbsoluteUrl = (href)=>{
+    try {
+        // External link
+        new URL(href);
+        return true;
+    } catch  {
+        // Local link
+        return false;
+    }
+};
+const $abd0d426949c0843$export$d97afdf95912bfad = (props)=>{
+    var _url_searchParams, _url_searchParams1;
+    const { href: href , ...rest } = props;
+    const { // `ref` is needed for referral program
+    // `embed` is needed for support of `staking widget` via iframe in `ledger-live`
+    query: { ref: ref , embed: embed  }  } = (0, $93xws$nextrouter.useRouter)();
+    // Fix `Hydration failed...` when using `styled-component` with `next/link`
+    // https://github.com/vercel/next.js/discussions/35773#discussioncomment-2622885
+    // https://github.com/vercel/next.js/discussions/35773#discussioncomment-4166807
+    const [mounted, setMounted] = (0, $93xws$react.useState)(false);
+    (0, $93xws$react.useEffect)(()=>setMounted(true), []);
+    if (!mounted) {
+        // Fix for SEO
+        if ($abd0d426949c0843$var$isValidAbsoluteUrl(href)) // External link
+        return /*#__PURE__*/ (0, $93xws$reactjsxruntime.jsx)("a", {
+            target: "_blank",
+            rel: "noreferrer",
+            ...rest,
+            href: href
+        });
+        // Local link
+        return /*#__PURE__*/ (0, $93xws$reactjsxruntime.jsx)("a", {
+            ...rest,
+            href: href
+        });
+    }
+    // Code below is only executed on the client side (due to conditions 'if (!mounted)...' above)
+    const url = new URL(href, window.location.origin);
+    if (url.origin !== window.location.origin) return /*#__PURE__*/ (0, $93xws$reactjsxruntime.jsx)((0, ($parcel$interopDefault($93xws$nextlink))), {
+        target: "_blank",
+        rel: "noreferrer",
+        ...rest,
+        href: url.href
+    });
+    if (ref) (_url_searchParams = url.searchParams) === null || _url_searchParams === void 0 ? void 0 : _url_searchParams.set("ref", ref);
+    if (embed) (_url_searchParams1 = url.searchParams) === null || _url_searchParams1 === void 0 ? void 0 : _url_searchParams1.set("embed", embed);
+    return /*#__PURE__*/ (0, $93xws$reactjsxruntime.jsx)((0, ($parcel$interopDefault($93xws$nextlink))), {
+        ...rest,
+        href: url.href
+    });
+};
+
+
+$parcel$exportWildcard($9eb49ab02efff021$exports, $abd0d426949c0843$exports);
+
+
+$parcel$exportWildcard(module.exports, $9eb49ab02efff021$exports);
+
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEAA;;;;AAIA,MAAM,2CAAqB,CAAC,OAAiB;IAC3C,IAAI;QACF,gBAAgB;QAChB,IAAI,IAAI;QACR,OAAO,IAAI;IACb,EAAE,OAAM;QACN,aAAa;QACb,OAAO,KAAK;IACd;AACF;AAIO,MAAM,4CAAuD,CAAC,QAAU;QAiCpE,mBACE;IAjCX,MAAM,QAAE,KAAI,EAAE,GAAG,MAAM,GAAG;IAE1B,MAAM,EACJ,uCAAuC;IACvC,gFAAgF;IAChF,OAAO,OAAE,IAAG,SAAE,MAAK,EAAE,CAAA,EACtB,GAAG,CAAA,GAAA,2BAAQ;IAEZ,2EAA2E;IAC3E,gFAAgF;IAChF,gFAAgF;IAChF,MAAM,CAAC,SAAS,WAAW,GAAG,CAAA,GAAA,qBAAO,EAAE,KAAK;IAC5C,CAAA,GAAA,sBAAQ,EAAE,IAAM,WAAW,IAAI,GAAG,EAAE;IACpC,IAAI,CAAC,SAAS;QACZ,cAAc;QAEd,IAAI,yCAAmB,OACrB,gBAAgB;QAChB,qBAAO,gCAAC;YAAE,QAAQ;YAAU,KAAI;YAAc,GAAG,IAAI;YAAE,MAAM;;QAG/D,aAAa;QACb,qBAAO,gCAAC;YAAG,GAAG,IAAI;YAAE,MAAM;;IAC5B,CAAC;IACD,8FAA8F;IAE9F,MAAM,MAAM,IAAI,IAAI,MAAM,OAAO,QAAQ,CAAC,MAAM;IAEhD,IAAI,IAAI,MAAM,KAAK,OAAO,QAAQ,CAAC,MAAM,EACvC,qBAAO,gCAAC,CAAA,GAAA,yCAAI,AAAD;QAAE,QAAQ;QAAU,KAAI;QAAc,GAAG,IAAI;QAAE,MAAM,IAAI,IAAI;;IAG1E,IAAI,KAAK,CAAA,oBAAA,IAAI,YAAY,cAAhB,+BAAA,KAAA,IAAA,kBAAkB,IAAI,OAAO;IACtC,IAAI,OAAO,CAAA,qBAAA,IAAI,YAAY,cAAhB,gCAAA,KAAA,IAAA,mBAAkB,IAAI,SAAS;IAE1C,qBAAO,gCAAC,CAAA,GAAA,yCAAI,AAAD;QAAG,GAAG,IAAI;QAAE,MAAM,IAAI,IAAI;;AACvC;;ADtDA;;;ADAA","sources":["packages/next/ui-primitives/src/index.ts","packages/next/ui-primitives/src/components/index.ts","packages/next/ui-primitives/src/components/lidoLink/index.tsx"],"sourcesContent":["export * from './components'\n","export * from './lidoLink'\n","import React, { FC, useState, useEffect } from 'react'\nimport { useRouter } from 'next/router'\nimport Link, { LinkProps } from 'next/link'\n\nconst isValidAbsoluteUrl = (href: string) => {\n  try {\n    // External link\n    new URL(href)\n    return true\n  } catch {\n    // Local link\n    return false\n  }\n}\n\nexport type LidoLinkProps = LinkProps & { href: string }\n\nexport const LidoLink: FC<React.PropsWithChildren<LidoLinkProps>> = (props) => {\n  const { href, ...rest } = props\n\n  const {\n    // `ref` is needed for referral program\n    // `embed` is needed for support of `staking widget` via iframe in `ledger-live`\n    query: { ref, embed },\n  } = useRouter()\n\n  // Fix `Hydration failed...` when using `styled-component` with `next/link`\n  // https://github.com/vercel/next.js/discussions/35773#discussioncomment-2622885\n  // https://github.com/vercel/next.js/discussions/35773#discussioncomment-4166807\n  const [mounted, setMounted] = useState(false)\n  useEffect(() => setMounted(true), [])\n  if (!mounted) {\n    // Fix for SEO\n\n    if (isValidAbsoluteUrl(href)) {\n      // External link\n      return <a target={'_blank'} rel=\"noreferrer\" {...rest} href={href} />\n    }\n\n    // Local link\n    return <a {...rest} href={href} />\n  }\n  // Code below is only executed on the client side (due to conditions 'if (!mounted)...' above)\n\n  const url = new URL(href, window.location.origin)\n\n  if (url.origin !== window.location.origin) {\n    return <Link target={'_blank'} rel=\"noreferrer\" {...rest} href={url.href} />\n  }\n\n  if (ref) url.searchParams?.set('ref', ref as string)\n  if (embed) url.searchParams?.set('embed', embed as string)\n\n  return <Link {...rest} href={url.href} />\n}\n"],"names":[],"version":3,"file":"index.cjs.map"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from "react";
+import { LinkProps } from "next/link";
+export type LidoLinkProps = LinkProps & {
+    href: string;
+};
+export const LidoLink: FC<React.PropsWithChildren<LidoLinkProps>>;
+
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;AAeA,4BAA4B,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAExD,OAAO,MAAM,UAAU,GAAG,MAAM,iBAAiB,CAAC,aAAa,CAAC,CAqC/D,CAAA","sources":["packages/next/ui-primitives/src/src/components/lidoLink/index.tsx","packages/next/ui-primitives/src/src/components/index.ts","packages/next/ui-primitives/src/src/index.ts","packages/next/ui-primitives/src/index.ts"],"sourcesContent":[null,null,null,"export * from './components'\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.mjs

@@ -0,0 +1,92 @@
+import {jsx as $7zhEJ$jsx} from "react/jsx-runtime";
+import {useState as $7zhEJ$useState, useEffect as $7zhEJ$useEffect} from "react";
+import {useRouter as $7zhEJ$useRouter} from "next/router";
+import $7zhEJ$nextlink from "next/link";
+
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
+  });
+
+  return dest;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $748bcbb776d77e87$exports = {};
+var $f4b56e66ba788353$exports = {};
+
+$parcel$export($f4b56e66ba788353$exports, "LidoLink", function () { return $f4b56e66ba788353$export$d97afdf95912bfad; });
+
+
+
+
+const $f4b56e66ba788353$var$isValidAbsoluteUrl = (href)=>{
+    try {
+        // External link
+        new URL(href);
+        return true;
+    } catch  {
+        // Local link
+        return false;
+    }
+};
+const $f4b56e66ba788353$export$d97afdf95912bfad = (props)=>{
+    var _url_searchParams, _url_searchParams1;
+    const { href: href , ...rest } = props;
+    const { // `ref` is needed for referral program
+    // `embed` is needed for support of `staking widget` via iframe in `ledger-live`
+    query: { ref: ref , embed: embed  }  } = (0, $7zhEJ$useRouter)();
+    // Fix `Hydration failed...` when using `styled-component` with `next/link`
+    // https://github.com/vercel/next.js/discussions/35773#discussioncomment-2622885
+    // https://github.com/vercel/next.js/discussions/35773#discussioncomment-4166807
+    const [mounted, setMounted] = (0, $7zhEJ$useState)(false);
+    (0, $7zhEJ$useEffect)(()=>setMounted(true), []);
+    if (!mounted) {
+        // Fix for SEO
+        if ($f4b56e66ba788353$var$isValidAbsoluteUrl(href)) // External link
+        return /*#__PURE__*/ (0, $7zhEJ$jsx)("a", {
+            target: "_blank",
+            rel: "noreferrer",
+            ...rest,
+            href: href
+        });
+        // Local link
+        return /*#__PURE__*/ (0, $7zhEJ$jsx)("a", {
+            ...rest,
+            href: href
+        });
+    }
+    // Code below is only executed on the client side (due to conditions 'if (!mounted)...' above)
+    const url = new URL(href, window.location.origin);
+    if (url.origin !== window.location.origin) return /*#__PURE__*/ (0, $7zhEJ$jsx)((0, $7zhEJ$nextlink), {
+        target: "_blank",
+        rel: "noreferrer",
+        ...rest,
+        href: url.href
+    });
+    if (ref) (_url_searchParams = url.searchParams) === null || _url_searchParams === void 0 ? void 0 : _url_searchParams.set("ref", ref);
+    if (embed) (_url_searchParams1 = url.searchParams) === null || _url_searchParams1 === void 0 ? void 0 : _url_searchParams1.set("embed", embed);
+    return /*#__PURE__*/ (0, $7zhEJ$jsx)((0, $7zhEJ$nextlink), {
+        ...rest,
+        href: url.href
+    });
+};
+
+
+$parcel$exportWildcard($748bcbb776d77e87$exports, $f4b56e66ba788353$exports);
+
+
+
+
+export {$f4b56e66ba788353$export$d97afdf95912bfad as LidoLink};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AEAA;;;;AAIA,MAAM,2CAAqB,CAAC,OAAiB;IAC3C,IAAI;QACF,gBAAgB;QAChB,IAAI,IAAI;QACR,OAAO,IAAI;IACb,EAAE,OAAM;QACN,aAAa;QACb,OAAO,KAAK;IACd;AACF;AAIO,MAAM,4CAAuD,CAAC,QAAU;QAiCpE,mBACE;IAjCX,MAAM,QAAE,KAAI,EAAE,GAAG,MAAM,GAAG;IAE1B,MAAM,EACJ,uCAAuC;IACvC,gFAAgF;IAChF,OAAO,OAAE,IAAG,SAAE,MAAK,EAAE,CAAA,EACtB,GAAG,CAAA,GAAA,gBAAQ;IAEZ,2EAA2E;IAC3E,gFAAgF;IAChF,gFAAgF;IAChF,MAAM,CAAC,SAAS,WAAW,GAAG,CAAA,GAAA,eAAO,EAAE,KAAK;IAC5C,CAAA,GAAA,gBAAQ,EAAE,IAAM,WAAW,IAAI,GAAG,EAAE;IACpC,IAAI,CAAC,SAAS;QACZ,cAAc;QAEd,IAAI,yCAAmB,OACrB,gBAAgB;QAChB,qBAAO,gBAAC;YAAE,QAAQ;YAAU,KAAI;YAAc,GAAG,IAAI;YAAE,MAAM;;QAG/D,aAAa;QACb,qBAAO,gBAAC;YAAG,GAAG,IAAI;YAAE,MAAM;;IAC5B,CAAC;IACD,8FAA8F;IAE9F,MAAM,MAAM,IAAI,IAAI,MAAM,OAAO,QAAQ,CAAC,MAAM;IAEhD,IAAI,IAAI,MAAM,KAAK,OAAO,QAAQ,CAAC,MAAM,EACvC,qBAAO,gBAAC,CAAA,GAAA,eAAI,AAAD;QAAE,QAAQ;QAAU,KAAI;QAAc,GAAG,IAAI;QAAE,MAAM,IAAI,IAAI;;IAG1E,IAAI,KAAK,CAAA,oBAAA,IAAI,YAAY,cAAhB,+BAAA,KAAA,IAAA,kBAAkB,IAAI,OAAO;IACtC,IAAI,OAAO,CAAA,qBAAA,IAAI,YAAY,cAAhB,gCAAA,KAAA,IAAA,mBAAkB,IAAI,SAAS;IAE1C,qBAAO,gBAAC,CAAA,GAAA,eAAI,AAAD;QAAG,GAAG,IAAI;QAAE,MAAM,IAAI,IAAI;;AACvC;;ADtDA;;;ADAA","sources":["packages/next/ui-primitives/src/index.ts","packages/next/ui-primitives/src/components/index.ts","packages/next/ui-primitives/src/components/lidoLink/index.tsx"],"sourcesContent":["export * from './components'\n","export * from './lidoLink'\n","import React, { FC, useState, useEffect } from 'react'\nimport { useRouter } from 'next/router'\nimport Link, { LinkProps } from 'next/link'\n\nconst isValidAbsoluteUrl = (href: string) => {\n  try {\n    // External link\n    new URL(href)\n    return true\n  } catch {\n    // Local link\n    return false\n  }\n}\n\nexport type LidoLinkProps = LinkProps & { href: string }\n\nexport const LidoLink: FC<React.PropsWithChildren<LidoLinkProps>> = (props) => {\n  const { href, ...rest } = props\n\n  const {\n    // `ref` is needed for referral program\n    // `embed` is needed for support of `staking widget` via iframe in `ledger-live`\n    query: { ref, embed },\n  } = useRouter()\n\n  // Fix `Hydration failed...` when using `styled-component` with `next/link`\n  // https://github.com/vercel/next.js/discussions/35773#discussioncomment-2622885\n  // https://github.com/vercel/next.js/discussions/35773#discussioncomment-4166807\n  const [mounted, setMounted] = useState(false)\n  useEffect(() => setMounted(true), [])\n  if (!mounted) {\n    // Fix for SEO\n\n    if (isValidAbsoluteUrl(href)) {\n      // External link\n      return <a target={'_blank'} rel=\"noreferrer\" {...rest} href={href} />\n    }\n\n    // Local link\n    return <a {...rest} href={href} />\n  }\n  // Code below is only executed on the client side (due to conditions 'if (!mounted)...' above)\n\n  const url = new URL(href, window.location.origin)\n\n  if (url.origin !== window.location.origin) {\n    return <Link target={'_blank'} rel=\"noreferrer\" {...rest} href={url.href} />\n  }\n\n  if (ref) url.searchParams?.set('ref', ref as string)\n  if (embed) url.searchParams?.set('embed', embed as string)\n\n  return <Link {...rest} href={url.href} />\n}\n"],"names":[],"version":3,"file":"index.mjs.map"}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@lidofinance/next-ui-primitives",
+  "description": "Next UI primitives (client-side: components, constants, hooks)",
+  "repository": "git@github.com:lidofinance/warehouse.git",
+  "license": "MIT",
+  "version": "0.23.0",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">= 16",
+    "browsers": "> 0.5%, last 2 versions, not dead"
+  },
+  "source": "./src/index.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "parcel build",
+    "lint": "eslint . && prettier --check src",
+    "lint:fix": "eslint --fix . && prettier --check src --write",
+    "types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": "^12.3.0",
+    "react": "17 || 18"
+  },
+  "devDependencies": {
+    "@lidofinance/config-prettier": "~0.23.0",
+    "@types/react": "^18.0.25",
+    "next": "^12.3.0"
+  }
+}