@sproutsocial/seeds-react-keyboard-key 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-keyboard-key/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+ESM dist/esm/index.js     1.18 KB
+ESM dist/esm/index.js.map 2.34 KB
+ESM ⚡️ Build success in 218ms
+CJS dist/index.js     3.04 KB
+CJS dist/index.js.map 2.43 KB
+CJS ⚡️ Build success in 218ms
+DTS Build start
+DTS ⚡️ Build success in 30158ms
+DTS dist/index.d.ts  601.00 B
+DTS dist/index.d.mts 601.00 B
+Done in 38.13s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-keyboard-key
+
+## 1.0.0
+
+### Major Changes
+
+- 423a10a: Migrated KeyboardKey from Racine to seeds-react-keyboard-key

package/dist/esm/index.js

@@ -0,0 +1,38 @@
+// src/KeyboardKey.tsx
+import "react";
+import Text from "@sproutsocial/seeds-react-text";
+
+// src/styles.ts
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var Container = styled.div`
+  display: inline-flex;
+  color: ${(props) => props.theme.colors.text.body};
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  border: 1px solid ${(props) => props.theme.colors.container.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  box-shadow: ${(props) => props.theme.shadows.low};
+  padding: 0 ${(props) => props.theme.space[200]};
+  min-width: 20px;
+  justify-content: center;
+
+  ${COMMON}
+`;
+var styles_default = Container;
+
+// src/KeyboardKey.tsx
+import { jsx } from "react/jsx-runtime";
+var KeyboardKey = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx(styles_default, { ...rest, children: /* @__PURE__ */ jsx("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ jsx(Text, { children }) }) });
+};
+
+// src/KeyboardKeyTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = KeyboardKey;
+export {
+  KeyboardKey,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/KeyboardKey.tsx","../../src/styles.ts","../../src/KeyboardKeyTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport Container from \"./styles\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\nexport const KeyboardKey = ({ children, ...rest }: TypeKeyboardKeyProps) => {\n  return (\n    <Container {...rest}>\n      <kbd data-qa-keyboardkey={children}>\n        <Text>{children}</Text>\n      </kbd>\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.div`\n  display: inline-flex;\n  color: ${(props) => props.theme.colors.text.body};\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  border: 1px solid ${(props) => props.theme.colors.container.border.base};\n  border-radius: ${(props) => props.theme.radii[500]};\n  box-shadow: ${(props) => props.theme.shadows.low};\n  padding: 0 ${(props) => props.theme.space[200]};\n  min-width: 20px;\n  justify-content: center;\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeKeyboardKeyProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  /** Text to display inside of key */\n  children: string;\n}\n","import { KeyboardKey } from \"./KeyboardKey\";\n\nexport default KeyboardKey;\nexport { KeyboardKey };\nexport * from \"./KeyboardKeyTypes\";\n"],"mappings":";AAAA,OAAuB;AACvB,OAAO,UAAU;;;ACDjB,OAAO,YAAY;AACnB,SAAS,cAAc;AAEvB,IAAM,YAAY,OAAO;AAAA;AAAA,WAEd,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,sBACvD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACtD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG;AAAA,eACnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5C,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADRP;AAJD,IAAM,cAAc,CAAC,EAAE,UAAU,GAAG,KAAK,MAA4B;AAC1E,SACE,oBAAC,kBAAW,GAAG,MACb,8BAAC,SAAI,uBAAqB,UACxB,8BAAC,QAAM,UAAS,GAClB,GACF;AAEJ;;;AEbA,OAAuB;;;ACEvB,IAAO,cAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeKeyboardKeyProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, "color"> {
+    /** Text to display inside of key */
+    children: string;
+}
+
+declare const KeyboardKey: ({ children, ...rest }: TypeKeyboardKeyProps) => react_jsx_runtime.JSX.Element;
+
+export { KeyboardKey, type TypeKeyboardKeyProps, KeyboardKey as default };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeKeyboardKeyProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"div">, "color"> {
+    /** Text to display inside of key */
+    children: string;
+}
+
+declare const KeyboardKey: ({ children, ...rest }: TypeKeyboardKeyProps) => react_jsx_runtime.JSX.Element;
+
+export { KeyboardKey, type TypeKeyboardKeyProps, KeyboardKey as default };

package/dist/index.js

@@ -0,0 +1,75 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  KeyboardKey: () => KeyboardKey,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/KeyboardKey.tsx
+var React = require("react");
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var Container = import_styled_components.default.div`
+  display: inline-flex;
+  color: ${(props) => props.theme.colors.text.body};
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  border: 1px solid ${(props) => props.theme.colors.container.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  box-shadow: ${(props) => props.theme.shadows.low};
+  padding: 0 ${(props) => props.theme.space[200]};
+  min-width: 20px;
+  justify-content: center;
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var styles_default = Container;
+
+// src/KeyboardKey.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var KeyboardKey = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { children }) }) });
+};
+
+// src/KeyboardKeyTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = KeyboardKey;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KeyboardKey
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/KeyboardKey.tsx","../src/styles.ts","../src/KeyboardKeyTypes.ts"],"sourcesContent":["import { KeyboardKey } from \"./KeyboardKey\";\n\nexport default KeyboardKey;\nexport { KeyboardKey };\nexport * from \"./KeyboardKeyTypes\";\n","import * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport Container from \"./styles\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\nexport const KeyboardKey = ({ children, ...rest }: TypeKeyboardKeyProps) => {\n  return (\n    <Container {...rest}>\n      <kbd data-qa-keyboardkey={children}>\n        <Text>{children}</Text>\n      </kbd>\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.div`\n  display: inline-flex;\n  color: ${(props) => props.theme.colors.text.body};\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  border: 1px solid ${(props) => props.theme.colors.container.border.base};\n  border-radius: ${(props) => props.theme.radii[500]};\n  box-shadow: ${(props) => props.theme.shadows.low};\n  padding: 0 ${(props) => props.theme.space[200]};\n  min-width: 20px;\n  justify-content: center;\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeKeyboardKeyProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  /** Text to display inside of key */\n  children: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiB;;;ACDjB,+BAAmB;AACnB,sCAAuB;AAEvB,IAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA,WAEd,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,sBACvD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACtD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG;AAAA,eACnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5C,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADRP;AAJD,IAAM,cAAc,CAAC,EAAE,UAAU,GAAG,KAAK,MAA4B;AAC1E,SACE,4CAAC,kBAAW,GAAG,MACb,sDAAC,SAAI,uBAAqB,UACxB,sDAAC,wBAAAC,SAAA,EAAM,UAAS,GAClB,GACF;AAEJ;;;AEbA,IAAAC,SAAuB;;;AHEvB,IAAO,cAAQ;","names":["styled","Text","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-keyboard-key",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sproutsocial/seeds-react-keyboard-key",
+  "version": "1.0.0",
+  "description": "Seeds React KeyboardKey",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*",
+    "@sproutsocial/seeds-react-text": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/KeyboardKey.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import Text from "@sproutsocial/seeds-react-text";
+import Container from "./styles";
+import type { TypeKeyboardKeyProps } from "./KeyboardKeyTypes";
+
+export const KeyboardKey = ({ children, ...rest }: TypeKeyboardKeyProps) => {
+  return (
+    <Container {...rest}>
+      <kbd data-qa-keyboardkey={children}>
+        <Text>{children}</Text>
+      </kbd>
+    </Container>
+  );
+};

package/src/KeyboardKeyTypes.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type {
+  TypeSystemCommonProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeKeyboardKeyProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    Omit<React.ComponentPropsWithoutRef<"div">, "color"> {
+  /** Text to display inside of key */
+  children: string;
+}

package/src/__tests__/features.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import KeyboardKey from "../";
+
+describe("KeyboardKey", () => {
+  it("should render children RTL", () => {
+    const children = "command";
+    render(<KeyboardKey>{children}</KeyboardKey>);
+    expect(screen.getByText(children)).toBeInTheDocument();
+  });
+});

package/src/__tests__/types.test.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import KeyboardKey from "../";
+
+describe.skip("KeyboardKey/types", () => {
+  it("should render valid props", () => {
+    render(
+      <>
+        <KeyboardKey children="ctrl" />
+        <KeyboardKey children="]" />
+        <KeyboardKey>command</KeyboardKey>
+        {/* @ts-expect-error - test that invalid flexDirection is rejected */}
+        <KeyboardKey />
+      </>
+    );
+  });
+});

package/src/index.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { KeyboardKey } from "./";
+
+export default {
+  title: "Components/KeyboardKey",
+  component: KeyboardKey,
+};
+
+export const singleKey = () => <KeyboardKey children="ctrl" />;
+
+singleKey.story = {
+  name: "Single key",
+};
+
+export const keyCombination = () => (
+  <>
+    <KeyboardKey children="ctrl" />
+    <KeyboardKey children="]" />
+  </>
+);
+
+keyCombination.story = {
+  name: "Key combination",
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+import { KeyboardKey } from "./KeyboardKey";
+
+export default KeyboardKey;
+export { KeyboardKey };
+export * from "./KeyboardKeyTypes";

package/src/styles.ts

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+
+const Container = styled.div`
+  display: inline-flex;
+  color: ${(props) => props.theme.colors.text.body};
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  border: 1px solid ${(props) => props.theme.colors.container.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  box-shadow: ${(props) => props.theme.shadows.low};
+  padding: 0 ${(props) => props.theme.space[200]};
+  min-width: 20px;
+  justify-content: center;
+
+  ${COMMON}
+`;
+
+export default Container;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));