components: preflight, ButtonWithPopup, CellDropdown, CodeBlock

package.json

@@ -5,7 +5,7 @@
     "packages/*"
   ],
   "scripts": {
-    "ci": "yarn prettier && yarn lint && yarn sbuild && yarn dbuild && yarn test",
+    "ci": "yarn prettier && yarn lint && yarn dbuild && yarn sbuild && yarn test",
     "clean": "rimraf node_modules -g 'packages/*/.eslintcache' 'packages/*/*.tsbuildinfo' 'packages/*/dist' 'packages/*/.rollup.cache' 'packages/*/types' 'packages/*/coverage'",
     "dbuild": "npm-run-all 'dbuild:*'",
     "dbuild:utils": "yarn workspace @dolthub/web-utils dbuild",

packages/components/.eslintignore

@@ -3,3 +3,4 @@ node_modules
 .eslintrc.js
 ./*.js
 storybook-static
+coverage

packages/components/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import { Preview } from "@storybook/react";
 import React from "react";
-import "../src/main.css";
+import "../src/styles/global.css";
 import ThemeProvider from "../src/tailwind/context";
 
 const preview: Preview = {

packages/components/.stylelintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-recommended",
+  "ignoreFiles": "coverage/**",
+  "rules": {
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["tailwind", "screen"] }],
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}

packages/components/package.json

@@ -2,7 +2,7 @@
   "name": "@dolthub/react-components",
   "author": "DoltHub",
   "description": "A collection of React components for common tasks",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,9 @@
     "compile": "tsc -b",
     "build": "rollup -c --bundleConfigAsCjs",
     "dbuild": "yarn compile && yarn build",
-    "lint": "eslint --cache --ext .ts,.js,.tsx,.jsx src",
+    "lint": "yarn lint-js-errors && yarn lint-css",
+    "lint-js-errors": "eslint --cache --ext .ts,.js,.tsx,.jsx src",
+    "lint-css": "stylelint \"**/*.css\"",
     "prettier": "prettier --check 'src/**/*.{js,ts,tsx}'",
     "prettier-fix": "prettier --write 'src/**/*.{js,ts,tsx}'",
     "npm:publish": "yarn dbuild && npm publish",
@@ -30,18 +32,20 @@
     "yalc:push": "yarn dbuild && yalc push",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf types && rm -rf tsconfig.tsbuildinfo"
+    "clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf types && rm -rf tsconfig.tsbuildinfo && rm -rf .eslintcache"
   },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18"
   },
   "dependencies": {
+    "@dolthub/react-hooks": "^0.1.7",
     "@dolthub/web-utils": "^0.1.3",
     "@react-icons/all-files": "^4.1.0",
     "classnames": "^2.5.1",
     "deepmerge": "^4.3.1",
     "github-markdown-css": "^5.5.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-loader": "^2.4.7",
     "react-markdown": "^9.0.1",
     "reactjs-popup": "^2.0.6",
@@ -75,6 +79,7 @@
     "@types/jest": "^29.5.11",
     "@types/prop-types": "^15",
     "@types/react": "^18",
+    "@types/react-copy-to-clipboard": "^5",
     "@types/react-dom": "^18",
     "@types/react-loader": "^2",
     "@types/rollup-plugin-peer-deps-external": "^2",
@@ -102,6 +107,8 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "storybook": "^7.6.17",
+    "stylelint": "^16.2.1",
+    "stylelint-config-recommended": "^14.0.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "yalc": "^1.0.0-pre.53"

packages/components/src/Button/index.module.css

@@ -45,17 +45,17 @@
     @apply text-link-2;
   }
 
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+
   &:disabled {
     @apply text-ld-darkgrey;
 
     &:hover {
       @apply text-ld-darkgrey;
     }
   }
-
-  &:focus {
-    @apply outline-none widget-shadow-lightblue;
-  }
 }
 
 .dark {

packages/components/src/ButtonWithPopup/index.module.css

@@ -0,0 +1,19 @@
+.triggerButton {
+  @apply rounded px-3 py-1 text-sm font-semibold border border-primary whitespace-nowrap bg-transparent flex items-center justify-center;
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+}
+
+.withoutText {
+  @apply border-0 p-0 rounded-none inline-block;
+}
+
+.caret {
+  @apply pl-2 text-lg;
+}
+
+.caretWithoutText {
+  @apply pl-0 inline-block;
+}

packages/components/src/ButtonWithPopup/index.tsx

@@ -0,0 +1,72 @@
+import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
+import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
+import cx from "classnames";
+import React, { ReactNode } from "react";
+import Popup, { PopupProps } from "../Popup";
+import css from "./index.module.css";
+
+export type Props = Partial<PopupProps> & {
+  children: ReactNode;
+  isOpen?: boolean;
+  setIsOpen?: (o: boolean) => void;
+  triggerText?: string;
+  buttonClassName?: string;
+  ["data-cy"]?: string;
+};
+
+export default function ButtonWithPopup({
+  children,
+  isOpen,
+  setIsOpen,
+  triggerText,
+  ...props
+}: Props) {
+  const openProps: Partial<PopupProps> =
+    isOpen !== undefined && setIsOpen !== undefined
+      ? {
+          open: isOpen,
+          onOpen: () => setIsOpen(true),
+          onClose: () => setIsOpen(false),
+        }
+      : {};
+  return (
+    <Popup
+      {...openProps}
+      position="bottom right"
+      on="click"
+      offsetX={triggerText ? 32 : 0}
+      contentStyle={{ width: "10rem" }}
+      closeOnDocumentClick
+      trigger={open => (
+        <button
+          type="button"
+          className={cx(
+            css.triggerButton,
+            { [css.withoutText]: !triggerText },
+            props.buttonClassName,
+          )}
+          data-cy={props["data-cy"]}
+        >
+          {triggerText}
+          {open ? (
+            <FaCaretUp
+              className={cx(css.caret, {
+                [css.caretWithoutText]: !triggerText,
+              })}
+            />
+          ) : (
+            <FaCaretDown
+              className={cx(css.caret, {
+                [css.caretWithoutText]: !triggerText,
+              })}
+            />
+          )}
+        </button>
+      )}
+      // props must come last to override default props above
+      {...props}
+    >
+      {children}
+    </Popup>
+  );
+}

packages/components/src/CellDropdown/index.module.css

@@ -0,0 +1,39 @@
+.cellDropdown {
+  @apply hidden;
+
+  @screen md {
+    @apply block;
+  }
+}
+
+.button {
+  @apply bg-white rounded-full;
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+}
+
+.rowButton {
+  @apply bg-ld-lightgrey;
+}
+
+.icon {
+  @apply p-1 w-5 h-5 text-ld-darkgrey;
+
+  &:hover {
+    @apply text-primary;
+  }
+}
+
+.rowIcon {
+  @apply text-ld-darkergrey;
+}
+
+.dropdown {
+  @apply absolute bg-white widget-shadow-hover z-100 rounded-b top-8 px-3 py-1 border-b border-x border-ld-lightgrey max-w-36 right-0 flex flex-col;
+}
+
+.rowDropdown {
+  @apply -right-20 top-9;
+}

packages/components/src/CellDropdown/index.tsx

@@ -0,0 +1,55 @@
+import { useOnClickOutside } from "@dolthub/react-hooks";
+import { RiMenu5Line } from "@react-icons/all-files/ri/RiMenu5Line";
+import cx from "classnames";
+import React, { ReactNode, useRef } from "react";
+import css from "./index.module.css";
+
+type Props = {
+  children: ReactNode;
+  showDropdown: boolean;
+  setShowDropdown: (s: boolean) => void;
+  buttonClassName: string;
+  dropdownClassName?: string;
+  forRow?: boolean;
+  ["data-cy"]?: string;
+};
+
+export default function CellDropdown({
+  setShowDropdown,
+  forRow = false,
+  ...props
+}: Props) {
+  const toggle = () => setShowDropdown(!props.showDropdown);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(dropdownRef, () => setShowDropdown(false));
+
+  return (
+    <div ref={dropdownRef} className={css.cellDropdown}>
+      <button
+        type="button"
+        onClick={toggle}
+        className={cx(
+          css.button,
+          { [css.rowButton]: forRow },
+          props.buttonClassName,
+        )}
+        data-cy={props["data-cy"]}
+      >
+        <RiMenu5Line className={cx(css.icon, { [css.rowIcon]: forRow })} />
+      </button>
+      {props.showDropdown && (
+        <div
+          className={cx(
+            css.dropdown,
+            {
+              [css.rowDropdown]: forRow,
+            },
+            props.dropdownClassName,
+          )}
+        >
+          {props.children}
+        </div>
+      )}
+    </div>
+  );
+}

packages/components/src/CodeBlock/index.module.css

@@ -0,0 +1,47 @@
+.code {
+  @apply text-left p-6 mb-4 rounded-lg bg-code-background;
+
+  code {
+    @apply text-white text-sm leading-loose;
+  }
+}
+
+.disabled {
+  @apply bg-ld-darkgrey;
+}
+
+.clipboard {
+  @apply p-2 mx-2 rounded h-10 min-w-[37px] text-white flex items-center justify-center;
+
+  &:hover {
+    @apply bg-ld-darkgrey;
+  }
+}
+
+.withCopy {
+  @apply py-1 pr-0 mt-3;
+
+  > div {
+    @apply flex justify-between items-center;
+  }
+
+  pre {
+    @apply overflow-x-auto mt-[0.4rem] mb-[0.3rem];
+    /* Hide scrollbar for IE, Edge, and Firefox */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  pre::-webkit-scrollbar {
+    @apply hidden;
+  }
+}
+
+.smallCopy {
+  @apply py-0.5 pl-4;
+
+  .clipboard {
+    @apply p-1 h-7 min-w-[28px];
+  }
+}