@charcoal-ui/react 1.0.0 → 2.0.0-alpha.2

package/src/components/TextField/index.tsx

@@ -32,6 +32,8 @@ export interface SingleLineTextFieldProps extends TextFieldBaseProps {
   readonly multiline?: false
   readonly rows?: never
   readonly type?: string
+  readonly prefix?: string
+  readonly suffix?: string
 }
 
 export interface MultiLineTextFieldProps extends TextFieldBaseProps {
@@ -39,6 +41,8 @@ export interface MultiLineTextFieldProps extends TextFieldBaseProps {
   readonly multiline: true
   readonly rows?: number
   readonly type?: never
+  readonly prefix?: never
+  readonly suffix?: never
 }
 
 export type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps
@@ -56,8 +60,10 @@ function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
   }
 }
 
-function countStringInCodePoints(string: string) {
-  return [...string].length
+function countCodePointsInString(string: string) {
+  // [...string] とするとproduction buildで動かなくなる
+  // cf. https://twitter.com/f_subal/status/1497214727511891972
+  return Array.from(string).length
 }
 
 const TextField = React.forwardRef<TextFieldElement, TextFieldProps>(
@@ -88,24 +94,37 @@ const SingleLineTextField = React.forwardRef<
     invalid = false,
     assistiveText,
     maxLength,
+    prefix = '',
+    suffix = '',
   } = props
 
   const { visuallyHiddenProps } = useVisuallyHidden()
   const ariaRef = useRef<HTMLInputElement>(null)
-  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))
+  const prefixRef = useRef<HTMLSpanElement>(null)
+  const suffixRef = useRef<HTMLSpanElement>(null)
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ''))
+  const [prefixWidth, setPrefixWidth] = useState(0)
+  const [suffixWidth, setSuffixWidth] = useState(0)
 
+  const nonControlled = props.value === undefined
   const handleChange = useCallback(
     (value: string) => {
-      const count = countStringInCodePoints(value)
+      const count = countCodePointsInString(value)
       if (maxLength !== undefined && count > maxLength) {
         return
       }
-      setCount(count)
+      if (nonControlled) {
+        setCount(count)
+      }
       onChange?.(value)
     },
-    [maxLength, onChange]
+    [maxLength, nonControlled, onChange]
   )
 
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ''))
+  }, [props.value])
+
   const { inputProps, labelProps, descriptionProps, errorMessageProps } =
     useTextField(
       {
@@ -121,6 +140,27 @@ const SingleLineTextField = React.forwardRef<
       ariaRef
     )
 
+  useEffect(() => {
+    const prefixObserver = new ResizeObserver((entries) => {
+      setPrefixWidth(entries[0].contentRect.width)
+    })
+    const suffixObserver = new ResizeObserver((entries) => {
+      setSuffixWidth(entries[0].contentRect.width)
+    })
+
+    if (prefixRef.current !== null) {
+      prefixObserver.observe(prefixRef.current)
+    }
+    if (suffixRef.current !== null) {
+      suffixObserver.observe(suffixRef.current)
+    }
+
+    return () => {
+      suffixObserver.disconnect()
+      prefixObserver.disconnect()
+    }
+  }, [])
+
   return (
     <TextFieldRoot className={className} isDisabled={disabled}>
       <TextFieldLabel
@@ -132,16 +172,24 @@ const SingleLineTextField = React.forwardRef<
         {...(!showLabel ? visuallyHiddenProps : {})}
       />
       <StyledInputContainer>
+        <PrefixContainer ref={prefixRef}>
+          <Affix>{prefix}</Affix>
+        </PrefixContainer>
         <StyledInput
           ref={mergeRefs(forwardRef, ariaRef)}
           invalid={invalid}
+          extraLeftPadding={prefixWidth}
+          extraRightPadding={suffixWidth}
           {...inputProps}
         />
-        {showCount && maxLength && (
-          <SingleLineCounter>
-            {count}/{maxLength}
-          </SingleLineCounter>
-        )}
+        <SuffixContainer ref={suffixRef}>
+          <Affix>{suffix}</Affix>
+          {showCount && maxLength && (
+            <SingleLineCounter>
+              {count}/{maxLength}
+            </SingleLineCounter>
+          )}
+        </SuffixContainer>
       </StyledInputContainer>
       {assistiveText != null && assistiveText.length !== 0 && (
         <AssistiveText
@@ -178,7 +226,7 @@ const MultiLineTextField = React.forwardRef<
   const { visuallyHiddenProps } = useVisuallyHidden()
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const ariaRef = useRef<HTMLTextAreaElement>(null)
-  const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ''))
   const [rows, setRows] = useState(initialRows)
 
   const syncHeight = useCallback(
@@ -191,21 +239,28 @@ const MultiLineTextField = React.forwardRef<
     [initialRows]
   )
 
+  const nonControlled = props.value === undefined
   const handleChange = useCallback(
     (value: string) => {
-      const count = countStringInCodePoints(value)
+      const count = countCodePointsInString(value)
       if (maxLength !== undefined && count > maxLength) {
         return
       }
-      setCount(count)
+      if (nonControlled) {
+        setCount(count)
+      }
       if (autoHeight && textareaRef.current !== null) {
         syncHeight(textareaRef.current)
       }
       onChange?.(value)
     },
-    [autoHeight, maxLength, onChange, syncHeight]
+    [autoHeight, maxLength, nonControlled, onChange, syncHeight]
   )
 
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ''))
+  }, [props.value])
+
   const { inputProps, labelProps, descriptionProps, errorMessageProps } =
     useTextField(
       {
@@ -275,19 +330,50 @@ const StyledInputContainer = styled.div`
   position: relative;
 `
 
-const StyledInput = styled.input<{ invalid: boolean }>`
+const PrefixContainer = styled.span`
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+`
+
+const SuffixContainer = styled.span`
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+
+  display: flex;
+  gap: 8px;
+`
+
+const Affix = styled.span`
+  user-select: none;
+
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
+`
+
+const StyledInput = styled.input<{
+  invalid: boolean
+  extraLeftPadding: number
+  extraRightPadding: number
+}>`
   border: none;
   box-sizing: border-box;
   outline: none;
+  font-family: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
   transform: scale(0.875);
   width: calc(100% / 0.875);
-  height: calc(40px / 0.875);
+  height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
+  padding-top: calc(9px / 0.875);
+  padding-bottom: calc(9px / 0.875);
+  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
+  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
   border-radius: calc(4px / 0.875);
 
   /* Display box-shadow for iOS Safari */
@@ -320,6 +406,7 @@ const StyledTextarea = styled.textarea<{ invalid: boolean }>`
   box-sizing: border-box;
   outline: none;
   resize: none;
+  font-family: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -359,11 +446,6 @@ const StyledTextarea = styled.textarea<{ invalid: boolean }>`
 `
 
 const SingleLineCounter = styled.span`
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-
   ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
 `
 

package/src/components/a11y.test.tsx

@@ -10,26 +10,38 @@ import { light, dark } from '@charcoal-ui/theme'
 
 expect.extend(toHaveNoViolations)
 
-const stories = glob
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface StoryWithMetadata<ArgsType = any> {
+  filename: string
+  name: string
+  story: Story<ArgsType>
+  args: ArgsType
+}
+
+const stories: StoryWithMetadata[] = glob
   .sync(path.resolve(__dirname, '**/*.story.tsx'))
-  .flatMap((filename) =>
-    Object.entries(
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require(`./${path.relative(__dirname, filename)}`) as Record<
-        string,
-        Story<any>
-      >
-    )
+  .flatMap((filePath) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const exports = require(`./${path.relative(
+      __dirname,
+      filePath
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    )}`) as Record<string, any>
+
+    return Object.entries(exports)
       .filter(
-        ([exportName, story]) =>
-          exportName !== 'default' && typeof story === 'function'
+        ([exportName, exportValue]) =>
+          exportName !== 'default' && typeof exportValue === 'function'
       )
-      .map<[string, string, Story<any>]>(([exportName, story]) => [
-        path.relative(__dirname, filename),
-        exportName,
-        story,
-      ])
-  )
+      .map(([exportName, exportValue]) => ({
+        filename: path.relative(__dirname, filePath),
+        name: exportName,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        story: exportValue as Story<any>,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+        args: { ...exports.default.args, ...exportValue.args },
+      }))
+  })
 
 const themes = Object.entries({
   light,
@@ -43,10 +55,6 @@ const links = Object.entries({
 const div = document.body.appendChild(document.createElement('div'))
 
 beforeEach(() => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  global.__DEV__ = {}
-
   global.IntersectionObserver = jest.fn().mockImplementation(() => ({
     observe() {
       return null
@@ -60,14 +68,14 @@ beforeEach(() => {
 describe.each(themes)('using %s theme', (_name, theme) => {
   describe.each(links)('using %s component', (_name, link) => {
     describe.each(stories)(
-      'storiesOf(%s).add(%s)',
-      (_filename, _exportName, story) => {
+      'storiesOf($filename).add($name)',
+      ({ story: Story, args }) => {
         it('has no accessibility violations', async () => {
           expect(() => {
             render(
               <ThemeProvider theme={theme}>
                 <ComponentAbstraction components={{ Link: link }}>
-                  {story(story.args)}
+                  <Story {...args} />
                 </ComponentAbstraction>
               </ThemeProvider>
             )

package/src/index.ts

@@ -19,6 +19,12 @@ export {
   RadioGroup,
   type RadioGroupProps,
 } from './components/Radio'
+export {
+  default as Select,
+  type SelectProps,
+  SelectGroup,
+  type SelectGroupProps,
+} from './components/Select'
 export { default as Switch, type SwitchProps } from './components/Switch'
 export {
   default as TextField,

package/src/type.d.ts

@@ -10,7 +10,3 @@ declare module 'react' {
     css?: CSSProp<DefaultTheme>
   }
 }
-
-declare global {
-  const __DEV__: object | undefined // actually object|false, but using undefined allows ! assertion
-}