@sproutsocial/seeds-react-visually-hidden 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-visually-hidden/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     2.14 KB
+CJS dist/index.js.map 877.00 B
+CJS ⚡️ Build success in 68ms
+ESM dist/esm/index.js     418.00 B
+ESM dist/esm/index.js.map 757.00 B
+ESM ⚡️ Build success in 72ms
+DTS Build start
+DTS ⚡️ Build success in 18179ms
+DTS dist/index.d.ts  237.00 B
+DTS dist/index.d.mts 237.00 B
+Done in 22.01s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-visually-hidden
+
+## 1.0.0
+
+### Major Changes
+
+- e839317: Migrate VisuallyHidden to seeds-react-visually-hidden

package/dist/esm/index.js

@@ -0,0 +1,15 @@
+// src/VisuallyHidden.tsx
+import styled from "styled-components";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+import "react";
+import { jsx } from "react/jsx-runtime";
+var StyledVisuallyHidden = styled.span`
+  ${visuallyHidden}
+`;
+var VisuallyHidden = (props) => {
+  return /* @__PURE__ */ jsx(StyledVisuallyHidden, { ...props });
+};
+export {
+  VisuallyHidden
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/VisuallyHidden.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { HTMLAttributes } from \"react\";\nimport React from \"react\";\n\nexport interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {}\n\nconst StyledVisuallyHidden = styled.span<VisuallyHiddenProps>`\n  ${visuallyHidden}\n`;\n\nexport const VisuallyHidden: React.FC<VisuallyHiddenProps> = (props) => {\n  return <StyledVisuallyHidden {...props} />;\n};\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAE/B,OAAkB;AAST;AALT,IAAM,uBAAuB,OAAO;AAAA,IAChC,cAAc;AAAA;AAGX,IAAM,iBAAgD,CAAC,UAAU;AACtE,SAAO,oBAAC,wBAAsB,GAAG,OAAO;AAC1C;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes } from 'react';
+
+interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+}
+declare const VisuallyHidden: React.FC<VisuallyHiddenProps>;
+
+export { VisuallyHidden, type VisuallyHiddenProps };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes } from 'react';
+
+interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+}
+declare const VisuallyHidden: React.FC<VisuallyHiddenProps>;
+
+export { VisuallyHidden, type VisuallyHiddenProps };

package/dist/index.js

@@ -0,0 +1,52 @@
+"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, {
+  VisuallyHidden: () => VisuallyHidden
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/VisuallyHidden.tsx
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledVisuallyHidden = import_styled_components.default.span`
+  ${import_seeds_react_mixins.visuallyHidden}
+`;
+var VisuallyHidden = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledVisuallyHidden, { ...props });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VisuallyHidden
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/VisuallyHidden.tsx"],"sourcesContent":["export * from \"./VisuallyHidden\";\n","import styled from \"styled-components\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { HTMLAttributes } from \"react\";\nimport React from \"react\";\n\nexport interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {}\n\nconst StyledVisuallyHidden = styled.span<VisuallyHiddenProps>`\n  ${visuallyHidden}\n`;\n\nexport const VisuallyHidden: React.FC<VisuallyHiddenProps> = (props) => {\n  return <StyledVisuallyHidden {...props} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,gCAA+B;AAE/B,mBAAkB;AAST;AALT,IAAM,uBAAuB,yBAAAA,QAAO;AAAA,IAChC,wCAAc;AAAA;AAGX,IAAM,iBAAgD,CAAC,UAAU;AACtE,SAAO,4CAAC,wBAAsB,GAAG,OAAO;AAC1C;","names":["styled"]}

package/jest.config.js

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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sproutsocial/seeds-react-visually-hidden",
+  "version": "1.0.0",
+  "description": "Seeds React VisuallyHidden",
+  "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-mixins": "^*"
+  },
+  "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/VisuallyHidden.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { VisuallyHidden } from "./VisuallyHidden";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+const meta: Meta<typeof VisuallyHidden> = {
+  title: "Components/Visually Hidden",
+  component: VisuallyHidden,
+};
+export default meta;
+
+type Story = StoryObj<typeof VisuallyHidden>;
+
+export const Default: Story = {
+  render: (args) => (
+    // @ts-ignore
+    <Text {...args}>
+      The VisuallyHidden component is used to hide text visually but still make
+      it accessible to screen readers. This is often used for screen reader only
+      text, such as labels for icons or interactive elements that require a
+      textual description to make sense for non-sighted users. See code for
+      example.
+      <VisuallyHidden>
+        This text is hidden visually but accessible by screen readers.
+      </VisuallyHidden>
+    </Text>
+  ),
+};

package/src/VisuallyHidden.tsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+import type { HTMLAttributes } from "react";
+import React from "react";
+
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {}
+
+const StyledVisuallyHidden = styled.span<VisuallyHiddenProps>`
+  ${visuallyHidden}
+`;
+
+export const VisuallyHidden: React.FC<VisuallyHiddenProps> = (props) => {
+  return <StyledVisuallyHidden {...props} />;
+};

package/src/__tests__/VisuallyHidden.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { VisuallyHidden } from "../VisuallyHidden";
+
+describe("VisuallyHidden", () => {
+  it("renders without crashing", () => {
+    render(<VisuallyHidden>Hidden Content</VisuallyHidden>);
+    const element = screen.getByText("Hidden Content");
+    expect(element).toBeInTheDocument();
+  });
+
+  it("applies visually hidden styles", () => {
+    render(<VisuallyHidden>Hidden Content</VisuallyHidden>);
+    const element = screen.getByText("Hidden Content");
+    expect(element).toHaveStyle(`
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      border: 0;
+    `);
+  });
+
+  it("forwards additional props", () => {
+    render(<VisuallyHidden aria-label="hidden">Hidden Content</VisuallyHidden>);
+    const element = screen.getByText("Hidden Content");
+    expect(element).toHaveAttribute("aria-label", "hidden");
+  });
+});

package/src/__tests__/VisuallyHidden.typetest.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { VisuallyHidden } from "../VisuallyHidden";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function VisuallyHiddenTypes() {
+  return (
+    <>
+      <VisuallyHidden>Content</VisuallyHidden>
+      {/* @ts-expect-error - test that invalid prop is rejected */}
+      <VisuallyHidden invalidProp="invalid">Content</VisuallyHidden>
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./VisuallyHidden";

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,
+}));