wip

Author: osvaldasvalutis

package.json

@@ -13,7 +13,6 @@
     "./css/*": "./src/css/*.css",
     "./scss/*": "./src/scss/*.scss",
     "./components/*": "./src/components/*/index.js",
-    "./hooks/*": "./src/hooks/*.js",
     "./icons/*": "./src/icons/*.svg"
   },
   "publishConfig": {
@@ -27,27 +26,33 @@
     "format:scss": "stylelint ./src/**/*.scss --fix",
     "lint:css": "stylelint ./src/**/*.css",
     "format:css": "stylelint ./src/**/*.css --fix",
-    "link:local": "yarn link",
-    "unlink:local": "yarn unlink",
-    "_link:local": "yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
-    "_unlink:local": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
+    "_link:local": "yarn link",
+    "_unlink:local": "yarn unlink",
+    "link:local": "yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
+    "unlink:local": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
     "compile-sass": "node ./sass.js"
   },
-  "_peerDependencies": {
+  "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19"
   },
   "devDependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "prettier": "^3.5.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "sass": "^1.83.4",
     "stylelint": "^16.13.2",
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-standard": "^37.0.0",
     "stylelint-prettier": "^5.0.2"
   },
   "dependencies": {
-    "startijenn-rem": "^1.1.1"
+    "camelize-object-keys": "^3.0.0",
+    "clsx": "^2.1.1",
+    "query-string": "^9.1.2",
+    "startijenn-rem": "^1.1.1",
+    "string-humanize": "^1.0.1"
   }
 }

src/_components/map-control-button/index.js

@@ -0,0 +1,118 @@
+import { memo } from "react"
+import clsx from "clsx"
+// import { convert } from "startijenn-rem"
+import emify from "../../postcss/fn.emify"
+
+import IconLoading from "../../icons/loading.svg"
+import style from "./index.module.css"
+
+const ButtonMemoized = memo(function Button({
+  children,
+  text = ``,
+  tag = `button`,
+  type = `button`,
+  href = undefined, // ``
+  className = ``,
+  loading = false,
+  Icon = null,
+  IconExtra = null,
+  iconSrc,
+  badge = ``,
+  NextLink,
+  // appearance
+  fontSize = ``,
+  color = ``,
+  borderColor = ``,
+  backgroundColor = ``,
+  boxShadow = ``,
+  align = `center`,
+  noWrap = false,
+  paddingVertical = ``,
+  paddingHorizontal = ``,
+  displayBlock = false,
+  displayAnchor = false,
+  iconSize = ``,
+  // -
+  ...rest
+}) {
+  const styleProp = { ...(rest.style || {}) }
+
+  if (fontSize) styleProp[`--fu-component-button-font-size`] = emify(fontSize)
+
+  if (color) styleProp[`--fu-component-button-color`] = `var(--color-${color})`
+
+  if (borderColor)
+    styleProp[`--fu-component-button-border-color`] =
+      borderColor === true || borderColor === `currentcolor`
+        ? `currentcolor`
+        : `var(--color-${borderColor})`
+
+  if (backgroundColor)
+    styleProp[`--fu-component-button-background-color`] =
+      `var(--color-${backgroundColor})`
+
+  if (boxShadow)
+    styleProp[`--fu-component-button-box-shadow`] = `var(--bs-${boxShadow})`
+
+  if (paddingVertical)
+    styleProp[`--fu-component-button-padding-vertical`] = emify(paddingVertical)
+
+  if (paddingHorizontal)
+    styleProp[`--fu-component-button-padding-horizontal`] =
+      emify(paddingHorizontal)
+
+  if (iconSize) styleProp[`--fu-component-button-icon-size`] = iconSize
+
+  const modifierClassnames = []
+  if (align) modifierClassnames.push(`--align-${align}`)
+  if (noWrap) modifierClassnames.push(`--no-wrap`)
+  if (displayBlock) modifierClassnames.push(`--display-block`)
+  if (displayAnchor) modifierClassnames.push(`typo-a`)
+
+  const ariaLabel =
+    rest[`aria-label`] || (rest.title && !children ? rest.title : undefined)
+
+  const Component = href
+    ? typeof href === `string` && href.trim().startsWith(`#`)
+      ? `a`
+      : NextLink || `a`
+    : tag
+
+  return (
+    <Component
+      {...rest}
+      className={clsx(style.container, className, ...modifierClassnames)}
+      style={styleProp}
+      type={href || tag != `button` ? undefined : type}
+      href={href}
+      aria-label={ariaLabel}
+      aria-busy={loading ? true : undefined}
+    >
+      {loading && (
+        <span className={style.icon}>
+          <IconLoading aria-hidden="true" />
+        </span>
+      )}
+
+      {(Icon || iconSrc) && !loading && (
+        <span className={clsx(style.icon, `--icon`)} aria-hidden="true">
+          {Icon ? <Icon /> : <img src={iconSrc} loading="lazy" alt="" />}
+        </span>
+      )}
+
+      {(text || children) && (
+        <span className={style.text}>{text || children}</span>
+      )}
+
+      {badge != `` && <span className={style.badge}>{badge}</span>}
+
+      {IconExtra && (
+        <span className={style.icon} aria-hidden="true">
+          <IconExtra />
+        </span>
+      )}
+    </Component>
+  )
+})
+
+export default ButtonMemoized

src/_components/map-control-button/index.module.css

@@ -0,0 +1,98 @@
+.container {
+  --this-gap: emify(16);
+
+  padding: var(--fu-component-button-padding-vertical, emify(12))
+    var(--fu-component-button-padding-horizontal, emify(22));
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--this-gap);
+  font-size: var(--fu-component-button-font-size, emify(16));
+  color: var(--fu-component-button-color);
+  background-color: var(--fu-component-button-background-color, transparent);
+  border-color: var(--fu-component-button-border-color, transparent);
+  border-width: var(--fu-component-button-border-width, 1px);
+  border-style: solid;
+  border-radius: var(--fu-component-button-border-radius);
+  box-shadow: var(--fu-component-button-box-shadow);
+  outline-offset: emify(6);
+  outline-color: var(--color-active);
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+
+  &:is(a, button):not([disabled]) {
+    @mixin hover;
+  }
+
+  &:global(.--align-left) {
+    justify-content: left;
+  }
+
+  &:global(.--display-block) {
+    width: 100%;
+    display: flex;
+  }
+
+  /* icon-only */
+  &:not(:has(.text)) {
+    aspect-ratio: 1 / 1;
+    padding: var(--fu-component-button-icon-only-padding, emify(10));
+    border-radius: var(
+      --fu-component-button-icon-only-border-radius,
+      var(--fu-component-button-border-radius)
+    );
+  }
+}
+
+.text {
+  font-family: var(--fu-component-button-text-font-family, var(--ff-primary));
+  font-size: var(--fu-component-button-text-font-size, emify(16));
+  font-weight: var(--fu-component-button-text-font-weight);
+
+  .container:global(.--no-wrap) & {
+    @mixin text-overflow;
+  }
+
+  .container:global(.--case-upper) & {
+    font-weight: var(--fu-component-button-text-fw-case-upper);
+    text-transform: uppercase;
+  }
+}
+
+.badge {
+  margin-left: calc(var(--this-gap) / -2);
+  padding: emify(1 6);
+  font-size: emify(11);
+  color: var(--fu-component-button-background-color, var(--color-background));
+  background-color: var(--fu-component-button-color, var(--color-text));
+  border-radius: calc(var(--fu-component-button-br) * 2);
+}
+
+.icon {
+  flex-shrink: 0;
+  rotate: var(--fu-component-button-icon-rotate);
+
+  &:global {
+    transition: rotate 0.4s var(--easing-out-back);
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+
+  .text ~ & {
+    .container:global(.--align-left) & {
+      margin-left: auto;
+    }
+  }
+
+  & :is(svg, img) {
+    width: calc(emify(20) * var(--fu-component-button-icon-size, 1));
+    height: calc(emify(20) * var(--fu-component-button-icon-size, 1));
+    margin: calc(emify(-3) * var(--fu-component-button-icon-size, 1));
+    scale: var(--fu-component-button-icon-scale, 1);
+    display: block;
+  }
+}

src/components/button/index.js

@@ -0,0 +1,32 @@
+:root {
+  --color-black: #000;
+  --color-white: #fff;
+  --color-gunmetal: #08292f;
+  --color-eagle-green: #0c3e47;
+  --color-cadet: #5c6c76;
+  --color-slate-gray: #627885;
+  --color-dark-slate-gray: #325e58;
+  --color-light-gray: #d8d8d8;
+  --color-alloy-orange: #ba5b00;
+  --color-alice-blue: #ebf1f3;
+  --color-pewter-blue: #869ba1;
+  --color-maximum-red: #dc1e1e;
+  --color-carmine: #961919;
+  --color-sea-green: #1a8745;
+  --color-indigo-dye: #1f4675;
+  --color-russet: #7f532a;
+  --color-maximum-purple: #7c458f;
+  --color-fuchsia-rose: #b83069;
+  --color-teal-blue: #2b7e9a;
+  --color-cyber-yellow: #ffd200;
+  --color-timberwolf: #e2dbd2;
+  --color-khaki-web: #c6b9a6;
+  --color-celadon: #bbdbc8;
+  --color-vanilla: #fff2b3;
+  --color-desert-sand: #ebceb3;
+  --color-light-blue: #c0d9e1;
+  --color-tea-rose: #f5bcbc;
+
+  /* by function: */
+  --color-facebook: #1877f2;
+}