wip

Author: osvaldasvalutis

eslint.config.mjs

@@ -0,0 +1,52 @@
+import { fixupConfigRules } from "@eslint/compat"
+import js from "@eslint/js"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactJsx from "eslint-plugin-react/configs/jsx-runtime.js"
+import react from "eslint-plugin-react/configs/recommended.js"
+// import unusedImports from "eslint-plugin-unused-imports"
+// import prettier from "eslint-config-prettier/flat"
+import globals from "globals"
+
+export default [
+  {
+    files: [`**/*.{js,jsx,mjs}`],
+    languageOptions: {
+      globals: globals.browser,
+      ecmaVersion: 2021,
+      sourceType: `module`,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+  js.configs.recommended,
+  ...fixupConfigRules([
+    {
+      ...react,
+      settings: {
+        react: { version: `detect` },
+      },
+    },
+    reactJsx,
+  ]),
+  {
+    files: [`**/*.{js,jsx,mjs}`],
+    plugins: {
+      "react-hooks": reactHooks,
+      // "unused-imports": unusedImports,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      quotes: [`error`, `backtick`],
+      "no-undef": `error`,
+      "prefer-const": `warn`,
+      "react/prop-types": `off`,
+      // "unused-imports/no-unused-imports": `error`,
+      // "unused-imports/no-unused-vars": `warn`,
+    },
+  },
+  // prettier,
+  { ignores: [`dist/`] },
+]

package.json

@@ -13,7 +13,8 @@
     "./css/*": "./src/css/*.css",
     "./scss/*": "./src/scss/*.scss",
     "./components/*": "./src/components/*/index.js",
-    "./icons/*": "./src/icons/*.svg"
+    "./icons/*": "./src/icons/*.svg",
+    "./locales/*": "./src/locales/*.yml"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"
@@ -37,7 +38,15 @@
     "react-dom": ">=19"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.9",
+    "@eslint/js": "^9.26.0",
     "express": "^4.18.2",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.1.0",
     "path": "^0.12.7",
     "prettier": "^3.5.3",
     "react": "19.1.0",
@@ -49,9 +58,11 @@
     "stylelint-prettier": "^5.0.2"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.9",
     "camelize-object-keys": "^3.0.0",
     "clsx": "^2.1.1",
     "query-string": "^9.1.2",
+    "react-use": "^17.6.0",
     "startijenn-rem": "^1.1.1",
     "string-humanize": "^1.0.1"
   }

src/components/button-and-floater/index.js

@@ -0,0 +1,64 @@
+import { useCallback, useState, useRef, useEffect } from "react"
+
+import Button from "../button"
+import Floater from "../floater"
+
+export default function ButtonAndFloater({
+  children,
+  ref,
+  button = {},
+  floater = {},
+}) {
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef()
+  const floaterRef = useRef()
+
+  const buttonClick = useCallback(() => setOpen((v) => !v), [])
+
+  const buttonBlur = useCallback(() => {
+    floaterRef.current?.focus()
+  }, [])
+
+  const floaterBlur = useCallback(() => {
+    buttonRef.current?.focus()
+  }, [])
+
+  const floaterCloseRequest = useCallback(() => {
+    setOpen(false)
+    buttonRef.current?.focus()
+  }, [])
+
+  const floaterElementSet = (el) => (floaterRef.current = el)
+
+  useEffect(() => {
+    ref.close = floaterCloseRequest
+  }, [floaterCloseRequest, ref])
+
+  return (
+    <>
+      <Button
+        {...button}
+        title={
+          typeof button.title === `function` ? button.title(open) : button.title
+        }
+        ref={buttonRef}
+        type="button"
+        aria-pressed={open}
+        onClick={buttonClick}
+        onBlur={buttonBlur}
+      />
+
+      {open && (
+        <Floater
+          {...floater}
+          referenceRef={buttonRef}
+          onBlur={floaterBlur}
+          onCloseRequest={floaterCloseRequest}
+          onElementSet={floaterElementSet}
+        >
+          {children}
+        </Floater>
+      )}
+    </>
+  )
+}

src/components/floater/index.js

@@ -0,0 +1,78 @@
+import { useEffect, useCallback, useRef } from "react"
+import ReactDOM from "react-dom"
+import { useClickAway, useKey } from "react-use"
+import {
+  useFloating,
+  autoUpdate as autoUpdateFui,
+  offset as offsetFui,
+} from "@floating-ui/react"
+import clsx from "clsx"
+
+import style from "./index.module.css"
+
+export default function Floater({
+  children,
+  referenceRef,
+  className,
+  classNameInner,
+  placement,
+  offset,
+  onBlur,
+  onCloseRequest,
+  onElementSet,
+}) {
+  const { refs, floatingStyles } = useFloating({
+    placement,
+    middleware: [offsetFui(offset)],
+    whileElementsMounted: autoUpdateFui,
+  })
+
+  const innerRef = useRef()
+
+  const innerBlur = useCallback(
+    (e) => {
+      if (!innerRef.current.contains(e.relatedTarget)) onBlur?.()
+    },
+    [onBlur]
+  )
+
+  useClickAway(
+    refs.floating,
+    (e) => !referenceRef.current.contains(e.target) && onCloseRequest?.()
+  )
+
+  useKey(`Escape`, (e) => {
+    e.preventDefault()
+    onCloseRequest?.()
+  })
+
+  useEffect(() => {
+    refs.setReference(referenceRef.current)
+  }, [refs.setReference, refs, referenceRef])
+
+  useEffect(() => {
+    innerRef.current?.focus()
+    onElementSet?.(innerRef.current)
+  }, [onElementSet])
+
+  return ReactDOM.createPortal(
+    <div
+      ref={refs.setFloating}
+      style={floatingStyles}
+      className={clsx(style.container, className)}
+    >
+      <div
+        ref={innerRef}
+        className={clsx(style.inner, classNameInner)}
+        tabIndex="0"
+        onBlur={innerBlur}
+        data-placement={placement}
+      >
+        {children}
+      </div>
+
+      <div className="hidden-visually" tabIndex="0" />
+    </div>,
+    document.querySelector(`body`)
+  )
+}

src/components/floater/index.module.css

@@ -0,0 +1,7 @@
+.container {
+  /* . */
+}
+
+.inner {
+  /* . */
+}

src/components/selectable-menu/index.js

@@ -0,0 +1,41 @@
+import clsx from "clsx"
+
+import CheckIcon from "../../icons/check.svg?react"
+import style from "./index.module.css"
+
+export default function SelectableMenu({ children = [], onToggle, ...rest }) {
+  if (!children.length) return null
+
+  const buttonClick = (e) => onToggle?.(e.currentTarget.dataset.style)
+
+  return (
+    <div {...rest} className={clsx(style.container, rest.className)}>
+      {children.map(
+        ({
+          id: itemId,
+          selected: itemSelected,
+          text: itemText,
+          Icon: ItemIcon,
+          ...itemRest
+        }) => (
+          <button
+            key={itemId}
+            {...itemRest}
+            className={style.button}
+            type="button"
+            role="option"
+            aria-selected={itemSelected}
+            data-style={itemId}
+            onClick={buttonClick}
+          >
+            {ItemIcon && <ItemIcon />}
+
+            <span>{itemText}</span>
+
+            <CheckIcon className={style.check} aria-hidden="true" />
+          </button>
+        )
+      )}
+    </div>
+  )
+}

src/components/selectable-menu/index.module.css

@@ -0,0 +1,30 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: emify(4);
+}
+
+.button {
+  /* @mixin hover; */
+
+  padding: emify(6 10);
+  display: flex;
+  gap: emify(10);
+  border-radius: var(--br-small);
+  font-weight: var(--fw-primary-medium);
+  font-size: emify(13);
+
+  &[aria-selected="true"] {
+    background-color: var(--color-light-gray);
+  }
+}
+
+.check {
+  width: emify(23);
+  height: emify(23);
+  margin-left: auto;
+
+  .button:not([aria-selected="true"]) & {
+    visibility: hidden;
+  }
+}

src/css/keyframes.css

@@ -83,6 +83,16 @@
   }
 }
 
+@keyframes slide-in-left {
+  0% {
+    translate: remify(10) 0;
+  }
+
+  100% {
+    translate: 0;
+  }
+}
+
 @keyframes slide-out-down {
   0% {
     translate: 0;