react-ui89 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# react-ui89
+
+A collection of components that mimic a style of user interfaces from the 80s.

package/dist/esm/components/Button.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ButtonProps {
+    theme?: string;
+    size?: string;
+    block?: boolean;
+    onClick?: () => void;
+    href?: string;
+    children: React.ReactNode;
+    autoDisableOnClick?: boolean;
+    disabled?: boolean;
+    activated?: boolean;
+}
+export default function Button({ theme, size, block, onClick, href, children, autoDisableOnClick, disabled, activated, }: ButtonProps): React.JSX.Element;
+export {};

package/dist/esm/components/HoverShadow.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function HoverShadow({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/esm/index.css

@@ -0,0 +1,2 @@
+.Button-module_container__WuvCi{display:inline-block}.Button-module_button__BiD3F{align-items:center;background-color:var(--action-bg-color);border:1px solid #00000010;border-radius:1px;box-sizing:border-box;color:var(--action-text-color);display:inline-flex;font-weight:700;justify-content:center;min-width:60px;padding:0 16px;position:relative;text-align:center;transition:transform var(--animation-speed);user-select:none}.Button-module_button__BiD3F:before{inset:0;position:absolute}.Button-module_block__BnvZI{display:flex}.Button-module_button__BiD3F:hover:not(.Button-module_disabled__C7QSE):not(.Button-module_active__nJsGe):before{background-color:#ffffff40;content:"";cursor:pointer}.Button-module_active__nJsGe,.Button-module_button__BiD3F:active:not(.Button-module_disabled__C7QSE){transform:translate3d(calc(var(--safe-space)/2),calc(var(--safe-space)/2),0)}.Button-module_button__BiD3F:active:not(.Button-module_disabled__C7QSE):not(.Button-module_active__nJsGe):before{background-color:#00000040;content:none;cursor:pointer}.Button-module_disabled__C7QSE{opacity:.5}.Button-module_size--normal__VR-Xu{height:22px}.Button-module_size--small__46-Nv{height:24px}.Button-module_click__8yjMA{inset:0;position:absolute}.Button-module_active__nJsGe>.Button-module_click__8yjMA,.Button-module_button__BiD3F:active:not(.Button-module_disabled__C7QSE)>.Button-module_click__8yjMA{transform:translate3d(calc(var(--safe-space)/2*-1),calc(var(--safe-space)/2*-1),0)}.HoverShadow-module_container__4noUA{display:block;padding-bottom:var(--safe-space);padding-right:var(--safe-space);position:relative}.HoverShadow-module_right__p6LK8{height:calc(100% - var(--safe-space));width:var(--safe-space)}.HoverShadow-module_bottom__7Hhnr,.HoverShadow-module_right__p6LK8{background:#000;bottom:0;box-sizing:border-box;display:block;position:absolute;right:0;z-index:0}.HoverShadow-module_bottom__7Hhnr{height:var(--safe-space);width:calc(100% - var(--safe-space))}
+/*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Button.module.css","HoverShadow.module.css"],"names":[],"mappings":"AAAA,gCACE,oBACF,CAEA,6BAGE,kBAAmB,CAGnB,uCAAwC,CAQxC,0BAA2B,CAN3B,iBAAkB,CAKlB,qBAAsB,CARtB,8BAA+B,CAJ/B,mBAAoB,CAQpB,eAAiB,CAPjB,sBAAuB,CAKvB,cAAe,CAGf,cAAe,CASf,iBAAkB,CAPlB,iBAAkB,CAIlB,2CAA4C,CAL5C,gBASF,CAEA,oCAEE,OAAQ,CADR,iBAEF,CAEA,4BACE,YACF,CAEA,gHAEE,0BAA2B,CAD3B,UAAW,CAEX,cACF,CAEA,qGAEE,4EACF,CAEA,iHAEE,0BAA2B,CAD3B,YAAa,CAEb,cACF,CAEA,+BACE,UACF,CAEA,mCACE,WACF,CAEA,kCACE,WACF,CAEA,4BAEE,OAAQ,CADR,iBAEF,CAEA,6JAEE,kFACF,CCxEA,qCACE,aAAc,CAEd,gCAAiC,CADjC,+BAAgC,CAEhC,iBACF,CAEA,iCAKE,qCAAsC,CACtC,uBAIF,CAEA,mEAJE,eAAiB,CAJjB,QAAS,CAGT,qBAAsB,CANtB,aAAc,CACd,iBAAkB,CAClB,OAAQ,CAMR,SAaF,CAVA,kCAME,wBAAyB,CADzB,oCAKF","file":"index.css","sourcesContent":[".container {\n  display: inline-block;\n}\n\n.button {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center; /* align vertical */\n  border: 0;\n  color: var(--action-text-color);\n  background-color: var(--action-bg-color);\n  min-width: 60px;\n  border-radius: 1px;\n  font-weight: bold;\n  padding: 0 16px;\n  user-select: none;\n  text-align: center;\n  box-sizing: border-box;\n  border: 1px solid #00000010;\n\n  transition: transform var(--animation-speed);\n\n  /* For the button active/hover/focus state */\n  position: relative;\n}\n\n.button:before {\n  position: absolute;\n  inset: 0;\n}\n\n.block {\n  display: flex;\n}\n\n.button:hover:not(.disabled):not(.active):before {\n  content: '';\n  background-color: #FFFFFF40;\n  cursor: pointer;\n}\n\n.button:active:not(.disabled),\n.active {\n  transform: translate3d(calc(var(--safe-space) / 2), calc(var(--safe-space) / 2), 0)\n}\n\n.button:active:not(.disabled):not(.active):before {\n  content: none;\n  background-color: #00000040;\n  cursor: pointer;\n}\n\n.disabled {\n  opacity: 0.5;\n}\n\n.size--normal {\n  height: 22px;\n}\n\n.size--small {\n  height: 24px;\n}\n\n.click {\n  position: absolute;\n  inset: 0;\n}\n\n.button:active:not(.disabled) > .click,\n.active > .click {\n  transform: translate3d(calc(var(--safe-space) / 2 * -1), calc(var(--safe-space) / 2 * -1), 0)\n}\n",".container {\n  display: block;\n  padding-right: var(--safe-space);\n  padding-bottom: var(--safe-space);\n  position: relative;\n}\n\n.right {\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  height: calc(100% - var(--safe-space));\n  width: var(--safe-space);\n  box-sizing: border-box;\n  background: black;\n  z-index: 0;\n}\n\n.bottom {\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: calc(100% - var(--safe-space));\n  height: var(--safe-space);\n  box-sizing: border-box;\n  background: black;\n  z-index: 0;\n}\n"]}

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export { default as Button } from './components/Button';

package/dist/esm/index.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+
+var styles$1 = {"container":"Button-module_container__WuvCi","button":"Button-module_button__BiD3F","block":"Button-module_block__BnvZI","disabled":"Button-module_disabled__C7QSE","active":"Button-module_active__nJsGe","size--normal":"Button-module_size--normal__VR-Xu","size--small":"Button-module_size--small__46-Nv","click":"Button-module_click__8yjMA"};
+
+var styles = {"container":"HoverShadow-module_container__4noUA","right":"HoverShadow-module_right__p6LK8","bottom":"HoverShadow-module_bottom__7Hhnr"};
+
+function HoverShadow({ children }) {
+    return (React.createElement("span", { className: styles.container },
+        React.createElement("span", { className: styles.bottom }),
+        React.createElement("span", { className: styles.right }),
+        children));
+}
+
+function Button({ theme = 'good', size = 'normal', block, onClick, href, children, autoDisableOnClick = true, disabled, activated, }) {
+    //const router = useRouter()
+    const [clicking, setClicking] = useState(false);
+    let localDisabled = disabled || (autoDisableOnClick && clicking);
+    async function onAnchorClick(e) {
+        if (localDisabled) {
+            // The anchor tag does not support the disabled attribute so we do this.
+            return;
+        }
+        if (clicking) {
+            // No double clicking allowed.
+            return;
+        }
+        try {
+            setClicking(true);
+            if (href !== undefined) {
+                if (href.startsWith('/')) {
+                    e.preventDefault();
+                    //router.push(href)
+                }
+            }
+        }
+        finally {
+            setClicking(false);
+        }
+    }
+    async function onButtonClick(e) {
+        if (localDisabled) {
+            // The anchor tag does not support the disabled attribute so we do this.
+            return;
+        }
+        if (clicking) {
+            // No double clicking allowed.
+            return;
+        }
+        try {
+            setClicking(true);
+            if (onClick === undefined) {
+                // No handler.
+                return;
+            }
+            await onClick();
+        }
+        finally {
+            setClicking(false);
+        }
+    }
+    let buttonClass = [
+        styles$1.button,
+        'typo-special',
+        'action-theme-' + theme,
+        styles$1['size--' + size],
+        activated ? styles$1.active : undefined,
+        block ? styles$1.block : undefined,
+        disabled ? styles$1.disabled : undefined,
+        clicking ? styles$1.active : undefined,
+    ].join(' ');
+    if (href) {
+        return (React.createElement("span", { className: styles$1.container },
+            React.createElement(HoverShadow, null,
+                React.createElement("a", { className: buttonClass, href: href, onClick: onAnchorClick },
+                    React.createElement("span", { className: styles$1.click }),
+                    children))));
+    }
+    else {
+        return (React.createElement("span", { className: styles$1.container },
+            React.createElement(HoverShadow, null,
+                React.createElement("button", { className: buttonClass, type: "button", onClick: onButtonClick, disabled: localDisabled },
+                    React.createElement("span", { className: styles$1.click }),
+                    children))));
+    }
+}
+
+export { Button };
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/HoverShadow.tsx","../../src/components/Button.tsx"],"sourcesContent":["import React from 'react'\nimport styles from './HoverShadow.module.css'\n\nexport default function HoverShadow({\n  children\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <span className={styles.container}>\n      <span className={styles.bottom}></span>\n      <span className={styles.right}></span>\n      {children}\n    </span>\n  )\n}\n","import React, { MouseEvent, useState } from 'react'\nimport styles from './Button.module.css'\nimport HoverShadow from './HoverShadow'\n\ninterface ButtonProps {\n  theme?: string,\n  size?: string,\n  block?: boolean,\n  onClick?: () => void,\n  href?: string,\n  children: React.ReactNode,\n  autoDisableOnClick?: boolean,\n  disabled?: boolean,\n  activated?: boolean,\n}\n\nexport default function Button({\n  theme = 'good',\n  size = 'normal',\n  block,\n  onClick,\n  href,\n  children,\n  autoDisableOnClick = true,\n  disabled,\n  activated,\n}: ButtonProps) {\n  //const router = useRouter()\n  const [clicking, setClicking] = useState(false)\n\n  let localDisabled = disabled || (autoDisableOnClick && clicking)\n\n  async function onAnchorClick(e: MouseEvent<HTMLAnchorElement>) {\n    if (localDisabled) {\n      // The anchor tag does not support the disabled attribute so we do this.\n      return\n    }\n\n    if (clicking) {\n      // No double clicking allowed.\n      return\n    }\n\n    try {\n      setClicking(true)\n\n      if (href !== undefined) {\n        if (href.startsWith('/')) {\n          e.preventDefault()\n          //router.push(href)\n        }\n      }\n    } finally {\n      setClicking(false)\n    }\n  }\n\n  async function onButtonClick(e: MouseEvent<HTMLButtonElement>) {\n    if (localDisabled) {\n      // The anchor tag does not support the disabled attribute so we do this.\n      return\n    }\n\n    if (clicking) {\n      // No double clicking allowed.\n      return\n    }\n\n    try {\n      setClicking(true)\n\n      if (onClick === undefined) {\n        // No handler.\n        return\n      }\n\n      await onClick()\n    } finally {\n      setClicking(false)\n    }\n  }\n\n  let buttonClass = [\n    styles.button,\n    'typo-special',\n    'action-theme-' + theme,\n    styles['size--' + size],\n    activated ? styles.active : undefined,\n    block ? styles.block : undefined,\n    disabled ? styles.disabled : undefined,\n    clicking ? styles.active : undefined,\n  ].join(' ')\n\n  if (href) {\n    return (\n      <span className={styles.container}>\n        <HoverShadow>\n          <a\n            className={buttonClass}\n            href={href}\n            onClick={onAnchorClick}\n          >\n            <span className={styles.click}></span>\n            {children}\n          </a>\n        </HoverShadow>\n      </span>\n    )\n  } else {\n    return (\n      <span className={styles.container}>\n        <HoverShadow>\n          <button\n            className={buttonClass}\n            type=\"button\"\n            onClick={onButtonClick}\n            disabled={localDisabled}\n          >\n            <span className={styles.click}></span>\n            {children}\n          </button>\n        </HoverShadow>\n      </span>\n    )\n  }\n}\n"],"names":["styles"],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "react-ui89",
+  "description": "A collection of components that mimic a style of user interfaces from the 80s.",
+  "version": "0.1.0",
+  "author": "Daniel Araujo",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@types/react": "^18.3.12",
+    "eslint-plugin-storybook": "^0.11.0",
+    "rollup": "^4.25.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.4.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3",
+    "typescript-plugin-css-modules": "^5.1.0"
+  }
+}