@sproutsocial/seeds-react-indicator 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-indicator/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+ESM dist/esm/index.js     1.33 KB
+ESM dist/esm/index.js.map 2.50 KB
+ESM ⚡️ Build success in 149ms
+CJS dist/index.js     3.22 KB
+CJS dist/index.js.map 2.58 KB
+CJS ⚡️ Build success in 155ms
+DTS Build start
+DTS ⚡️ Build success in 44614ms
+DTS dist/index.d.ts  548.00 B
+DTS dist/index.d.mts 548.00 B
+Done in 50.22s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-indicator
+
+## 1.0.0
+
+### Major Changes
+
+- 227f3b2: Migrate Indicator from Racine to seeds-react-indicator

package/dist/esm/index.js

@@ -0,0 +1,57 @@
+// src/Indicator.tsx
+import "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+
+// src/styles.ts
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+var Container = styled.span.attrs({
+  className: "Indicator"
+})`
+  position: relative;
+  display: block;
+  width: ${(props) => props.theme.space[400]};
+  height: ${(props) => props.theme.space[400]};
+  font-size: 10px;
+  line-height: 0;
+  color: ${(props) => props.color ?? props.theme.colors.icon.info};
+  text-align: center;
+
+  > div {
+    ${visuallyHidden}
+  }
+
+  ${COMMON}
+`;
+var styles_default = Container;
+
+// src/Indicator.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Indicator = ({ tooltip = "", ...rest }) => {
+  return /* @__PURE__ */ jsxs(
+    styles_default,
+    {
+      "data-tip": tooltip,
+      "data-qa-indicator": "",
+      "aria-label": tooltip,
+      tabIndex: 0,
+      ...rest,
+      children: [
+        tooltip && /* @__PURE__ */ jsx("div", { children: tooltip }),
+        /* @__PURE__ */ jsx(Icon, { name: "circle-fill-solid", size: "mini", "aria-hidden": true })
+      ]
+    }
+  );
+};
+
+// src/IndicatorTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Indicator;
+export {
+  Indicator,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Indicator.tsx","../../src/styles.ts","../../src/IndicatorTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container from \"./styles\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\nexport const Indicator = ({ tooltip = \"\", ...rest }: TypeIndicatorProps) => {\n  return (\n    <Container\n      data-tip={tooltip}\n      data-qa-indicator=\"\"\n      aria-label={tooltip}\n      tabIndex={0}\n      {...rest}\n    >\n      {tooltip && <div>{tooltip}</div>}\n      <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\n\nconst Container = styled.span.attrs({\n  className: \"Indicator\",\n})`\n  position: relative;\n  display: block;\n  width: ${(props) => props.theme.space[400]};\n  height: ${(props) => props.theme.space[400]};\n  font-size: 10px;\n  line-height: 0;\n  color: ${(props) => props.color ?? props.theme.colors.icon.info};\n  text-align: center;\n\n  > div {\n    ${visuallyHidden}\n  }\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeIndicatorProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  tooltip?: string;\n}\n","import { Indicator } from \"./Indicator\";\n\nexport default Indicator;\nexport { Indicator };\nexport * from \"./IndicatorTypes\";\n"],"mappings":";AAAA,OAAuB;AACvB,OAAO,UAAU;;;ACDjB,OAAO,YAAY;AACnB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAE/B,IAAM,YAAY,OAAO,KAAK,MAAM;AAAA,EAClC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,WAGlC,CAAC,UAAU,MAAM,SAAS,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,MAI3D,cAAc;AAAA;AAAA;AAAA,IAGhB,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADhBX,SAOc,KAPd;AAFG,IAAM,YAAY,CAAC,EAAE,UAAU,IAAI,GAAG,KAAK,MAA0B;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACV,qBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,mBAAW,oBAAC,SAAK,mBAAQ;AAAA,QAC1B,oBAAC,QAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,EACzD;AAEJ;;;AElBA,OAAuB;;;ACEvB,IAAO,cAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeIndicatorProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    tooltip?: string;
+}
+
+declare const Indicator: ({ tooltip, ...rest }: TypeIndicatorProps) => react_jsx_runtime.JSX.Element;
+
+export { Indicator, type TypeIndicatorProps, Indicator as default };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeIndicatorProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    tooltip?: string;
+}
+
+declare const Indicator: ({ tooltip, ...rest }: TypeIndicatorProps) => react_jsx_runtime.JSX.Element;
+
+export { Indicator, type TypeIndicatorProps, Indicator as default };

package/dist/index.js

@@ -0,0 +1,94 @@
+"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, {
+  Indicator: () => Indicator,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Indicator.tsx
+var React = require("react");
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var Container = import_styled_components.default.span.attrs({
+  className: "Indicator"
+})`
+  position: relative;
+  display: block;
+  width: ${(props) => props.theme.space[400]};
+  height: ${(props) => props.theme.space[400]};
+  font-size: 10px;
+  line-height: 0;
+  color: ${(props) => props.color ?? props.theme.colors.icon.info};
+  text-align: center;
+
+  > div {
+    ${import_seeds_react_mixins.visuallyHidden}
+  }
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var styles_default = Container;
+
+// src/Indicator.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Indicator = ({ tooltip = "", ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    styles_default,
+    {
+      "data-tip": tooltip,
+      "data-qa-indicator": "",
+      "aria-label": tooltip,
+      tabIndex: 0,
+      ...rest,
+      children: [
+        tooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: tooltip }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { name: "circle-fill-solid", size: "mini", "aria-hidden": true })
+      ]
+    }
+  );
+};
+
+// src/IndicatorTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Indicator;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Indicator
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Indicator.tsx","../src/styles.ts","../src/IndicatorTypes.ts"],"sourcesContent":["import { Indicator } from \"./Indicator\";\n\nexport default Indicator;\nexport { Indicator };\nexport * from \"./IndicatorTypes\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container from \"./styles\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\nexport const Indicator = ({ tooltip = \"\", ...rest }: TypeIndicatorProps) => {\n  return (\n    <Container\n      data-tip={tooltip}\n      data-qa-indicator=\"\"\n      aria-label={tooltip}\n      tabIndex={0}\n      {...rest}\n    >\n      {tooltip && <div>{tooltip}</div>}\n      <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\n\nconst Container = styled.span.attrs({\n  className: \"Indicator\",\n})`\n  position: relative;\n  display: block;\n  width: ${(props) => props.theme.space[400]};\n  height: ${(props) => props.theme.space[400]};\n  font-size: 10px;\n  line-height: 0;\n  color: ${(props) => props.color ?? props.theme.colors.icon.info};\n  text-align: center;\n\n  > div {\n    ${visuallyHidden}\n  }\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeIndicatorProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  tooltip?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiB;;;ACDjB,+BAAmB;AACnB,sCAAuB;AACvB,gCAA+B;AAE/B,IAAM,YAAY,yBAAAA,QAAO,KAAK,MAAM;AAAA,EAClC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,WAGlC,CAAC,UAAU,MAAM,SAAS,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,MAI3D,wCAAc;AAAA;AAAA;AAAA,IAGhB,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADhBX;AAFG,IAAM,YAAY,CAAC,EAAE,UAAU,IAAI,GAAG,KAAK,MAA0B;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACV,qBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,SAAK,mBAAQ;AAAA,QAC1B,4CAAC,wBAAAC,SAAA,EAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,EACzD;AAEJ;;;AElBA,IAAAC,SAAuB;;;AHEvB,IAAO,cAAQ;","names":["styled","Icon","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-indicator",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sproutsocial/seeds-react-indicator",
+  "version": "1.0.0",
+  "description": "Seeds React Indicator",
+  "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-icon": "*",
+    "@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/Indicator.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Container from "./styles";
+import type { TypeIndicatorProps } from "./IndicatorTypes";
+
+export const Indicator = ({ tooltip = "", ...rest }: TypeIndicatorProps) => {
+  return (
+    <Container
+      data-tip={tooltip}
+      data-qa-indicator=""
+      aria-label={tooltip}
+      tabIndex={0}
+      {...rest}
+    >
+      {tooltip && <div>{tooltip}</div>}
+      <Icon name="circle-fill-solid" size="mini" aria-hidden />
+    </Container>
+  );
+};

package/src/IndicatorTypes.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type {
+  TypeStyledComponentsCommonProps,
+  TypeSystemCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeIndicatorProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+  tooltip?: string;
+}

package/src/__tests__/features.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { Indicator } from "../";
+
+describe("Indicator", () => {
+  it("should render properly", () => {
+    const { container } = render(<Indicator />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/__tests__/types.typetest.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { Indicator } from "../";
+
+describe.skip("Indicator/types", () => {
+  it("should render valid props", () => {
+    render(
+      <>
+        <Indicator />
+        <Indicator tooltip="test tooltip text" />
+        {/* @ts-expect-error - test invalid tooltip is rejected */}
+        <Indicator tooltip={5} />
+      </>
+    );
+  });
+});

package/src/index.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Indicator, type TypeIndicatorProps } from "./";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Indicator> = {
+  title: "Components/Indicator",
+  component: Indicator,
+  args: {
+    tooltip:
+      "I explain this Indicator, I should always be used for clarity and accessibility purposes.",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Indicator>;
+
+export const DefaultStory: Story = {
+  render: (args: TypeIndicatorProps) => <Indicator {...args} />,
+};
+
+DefaultStory.storyName = "Default";

package/src/index.ts

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

package/src/styles.ts

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { visuallyHidden } from "@sproutsocial/seeds-react-mixins";
+
+const Container = styled.span.attrs({
+  className: "Indicator",
+})`
+  position: relative;
+  display: block;
+  width: ${(props) => props.theme.space[400]};
+  height: ${(props) => props.theme.space[400]};
+  font-size: 10px;
+  line-height: 0;
+  color: ${(props) => props.color ?? props.theme.colors.icon.info};
+  text-align: center;
+
+  > div {
+    ${visuallyHidden}
+  }
+
+  ${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,
+}));