@sproutsocial/seeds-react-token-input 1.0.0

package/src/__tests__/TokenInput.typetest.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import TokenInput from "../TokenInput";
+import type { TypeTokenSpec } from "../TokenInputTypes";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TokenInputTypes() {
+  const setTokens = () => {};
+  const handleAddToken = () => {};
+  const handleRemoveToken = () => {};
+  const handleChange = () => {};
+  const handleClickToken = () => {};
+  const defaultProps = {
+    id: "example",
+    name: "example",
+    placeholder: "Enter a value...",
+    ariaLabel: "Descriptive label goes here",
+    value: "",
+    disabled: undefined,
+    isInvalid: undefined,
+  };
+  const testTokens: TypeTokenSpec[] = [
+    {
+      id: "0",
+      value: "Cherries",
+    },
+    {
+      id: "1",
+      value: "Mangos",
+    },
+  ];
+  const testTokensWithIcons: TypeTokenSpec[] = [
+    {
+      id: "0",
+      iconName: "face-smile-solid",
+      value: "Cherries",
+    },
+    {
+      id: "1",
+      value: "Mangos",
+    },
+  ];
+  return (
+    <>
+      <TokenInput
+        {...defaultProps}
+        tokens={[]}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        tokenMaxLength={4}
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={[]}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        iconName="lock-outline"
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={[]}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        elemBefore={<Icon fixedWidth name="lock-outline" />}
+        placeholder="Password"
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={[]}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        elemAfter={<Icon fixedWidth name="lock-outline" />}
+        placeholder="Password"
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={[]}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        elemBefore={<Icon fixedWidth name="magnifying-glass-outline" />}
+        elemAfter={<Icon fixedWidth name="lock-outline" />}
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={testTokens}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={testTokens}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        disabled
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={testTokens}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        autoFocus
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={testTokens}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        isInvalid={true}
+        placeholder="blah@something"
+      />
+      <TokenInput
+        {...defaultProps}
+        tokens={testTokensWithIcons}
+        onChangeTokens={setTokens}
+        autocomplete="off"
+        iconName="triangle-outline"
+      />
+      <TokenInput
+        {...defaultProps}
+        delimiters={[" ", ","]}
+        onChange={handleChange}
+        onAddToken={handleAddToken}
+        onRemoveToken={handleRemoveToken}
+        onClickToken={handleClickToken}
+      />
+      <TokenInput {...defaultProps} inputProps={{ defaultValue: "Foo" }} />
+      <TokenInput
+        {...defaultProps}
+        // @ts-expect-error - inputProps should not allow styled-system props
+        inputProps={{ ml: 500 }}
+      />
+      {/* @ts-expect-error - test missing required props is rejected */}
+      <TokenInput />
+    </>
+  );
+}

package/src/index.ts

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

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,136 @@
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import type { TypeInputContainerProps } from "@sproutsocial/seeds-react-input";
+
+interface TypeTokenInputContainerProps
+  extends Pick<
+    TypeInputContainerProps,
+    "hasBeforeElement" | "hasAfterElement" | "disabled" | "invalid" | "warning"
+  > {
+  focused?: boolean;
+}
+
+const Container = styled.div<TypeTokenInputContainerProps>`
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
+  cursor: text;
+  width: 100%;
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  margin: 0;
+  padding: ${(props) => props.theme.space[300]};
+  padding-top: ${(props) => props.theme.space[200]};
+  background-color: ${(props) => props.theme.colors.form.background.base};
+  color: ${(props) => props.theme.colors.text.body};
+  transition: border-color ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in},
+    box-shadow ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in};
+  ${(props) => props.theme.typography[200]};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  appearance: none;
+
+  button {
+    margin: ${(props) => props.theme.space[200]}
+      ${(props) => props.theme.space[200]} 0 0;
+  }
+
+  input {
+    ${(props) => props.theme.typography[200]};
+    outline: none;
+    border: none;
+    flex: 1;
+    padding: 0;
+    padding-top: ${(props) => props.theme.space[100]};
+    margin: ${(props) => props.theme.space[200]}
+      ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}
+      0;
+    color: ${(props) => props.theme.colors.text.body};
+    background-color: ${(props) => props.theme.colors.form.background.base};
+    /** This matches the height of the token so size does not change as tokens are added */
+    min-height: 20px;
+
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+
+    /* Explicitly removes double focus ring in environments where box-shadow focus styles have been specified (Seeds). Focus is passed up from the input to the parent container. */
+    &:focus {
+      box-shadow: none;
+    }
+
+    /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
+    &::-ms-clear {
+      display: none;
+    }
+
+    /* Fix for red ring when input is marked required in Firefox */
+    &:not(output):not(:focus):-moz-ui-invalid {
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.form.placeholder.base};
+      font-style: italic;
+    }
+
+    ${(props) =>
+      props.disabled &&
+      css`
+        opacity: 0.4;
+
+        cursor: not-allowed;
+      `}
+  }
+
+  ${(props) =>
+    props.hasBeforeElement &&
+    css`
+      padding-left: 40px;
+    `}
+
+  ${(props) =>
+    props.hasAfterElement &&
+    css`
+      padding-right: 40px;
+    `}
+
+
+  ${(props) =>
+    props.disabled &&
+    css`
+      opacity: 0.4;
+
+      cursor: not-allowed;
+    `}
+
+  ${(props) =>
+    props.focused &&
+    css`
+      ${focusRing}
+    `}
+
+  ${(props) =>
+    props.invalid &&
+    css`
+      border-color: ${(props) => props.theme.colors.form.border.error};
+    `}
+
+	${(props) =>
+    props.warning &&
+    css`
+      border-color: ${(props) => props.theme.colors.form.border.warning};
+    `}
+
+  ${COMMON}
+`;
+
+Container.displayName = "TokenInputContainer";
+
+export default Container;

package/src/util.ts

@@ -0,0 +1,22 @@
+import uniqueId from "lodash.uniqueid";
+import type { TypeTokenSpec } from "./";
+
+export const asTokenSpec = (text: string): TypeTokenSpec => ({
+  id: uniqueId(`${text}-`),
+  value: text.trim(),
+});
+
+const KeyNameToRegExpChar: { [key: string]: string } = {
+  Enter: "\\n",
+};
+
+export const delimitersAsRegExp = (delimiters: string[] | null | undefined) => {
+  if (!delimiters) return /[,\n]/;
+  const chars = delimiters
+    .map(
+      (key) =>
+        KeyNameToRegExpChar[key as keyof typeof KeyNameToRegExpChar] || key
+    )
+    .join("");
+  return RegExp(`[${chars}]`);
+};

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", "src/TokenInput.stories.tsx"]
+}

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