<commit_before>import React, { createElement, ElementType, forwardRef, ComponentProps } from 'react'
import hoistNonReactStatics from 'hoist-non-react-statics'
import { styli } from '@styli/core'
import { themeContext } from '@styli/theming'
import { AtomicProps } from '@styli/types'
import { getCssParsedProps, getInLineParsedProps } from './util'
import { StyledComponent, InjectedProps, Args } from './types'

const { Consumer } = themeContext

/**
 * style any Component
 * @param component tag name or React Component
 * @param args
 *
 * @example
 *
 * ```
 * styled(View)
 *
 * styled(View, 'f-20 fontBold', 'textCenter', { color: 'red' })
 *
 * styled(View, {
 *   color: 'red'
 * })
 * ```
 */
export function styled<C extends keyof JSX.IntrinsicElements | ElementType>(
  component: C,
  ...args: Args
): StyledComponent<
  JSX.LibraryManagedAttributes<C, ComponentProps<C>> & AtomicProps & InjectedProps
> {
  if (!component) {
    // throw new Error('required component param')
    return null as any
  }

  const StyledComponent = forwardRef((props: any = {}, ref) => {
    return (
      <Consumer>
        {(value: any) => {
          const inline = styli.getConfig('inline')
          const parsedProps = inline
            ? getInLineParsedProps(props, value, args)
            : getCssParsedProps(props, value, args)
          return createElement(component, { ref, ...parsedProps })
        }}
      </Consumer>
    )
  })

  hoistNonReactStatics(StyledComponent, component as any)
  return StyledComponent
}<commit_msg>feat: set styled displayName<commit_after>import React, { createElement, ElementType, forwardRef, ComponentProps } from 'react'
import hoistNonReactStatics from 'hoist-non-react-statics'
import { styli } from '@styli/core'
import { themeContext } from '@styli/theming'
import { upFirst } from '@styli/utils'
import { AtomicProps } from '@styli/types'
import { getCssParsedProps, getInLineParsedProps } from './util'
import { StyledComponent, InjectedProps, Args } from './types'

const { Consumer } = themeContext

/**
 * style any Component
 * @param component tag name or React Component
 * @param args
 *
 * @example
 *
 * ```
 * styled(View)
 *
 * styled(View, 'f-20 fontBold', 'textCenter', { color: 'red' })
 *
 * styled(View, {
 *   color: 'red'
 * })
 * ```
 */
export function styled<C extends keyof JSX.IntrinsicElements | ElementType>(
  component: C,
  ...args: Args
): StyledComponent<
  JSX.LibraryManagedAttributes<C, ComponentProps<C>> & AtomicProps & InjectedProps
> {
  if (!component) {
    // throw new Error('required component param')
    return null as any
  }

  const StyledComponent = forwardRef((props: any = {}, ref) => {
    return (
      <Consumer>
        {(value: any) => {
          const inline = styli.getConfig('inline')
          const parsedProps = inline
            ? getInLineParsedProps(props, value, args)
            : getCssParsedProps(props, value, args)
          return createElement(component, { ref, ...parsedProps })
        }}
      </Consumer>
    )
  })

  StyledComponent.displayName =
    typeof component === 'string' ? `Styled${upFirst(component as string)}` : 'StyledComponent'

  hoistNonReactStatics(StyledComponent, component as any)
  return StyledComponent
}
{'fraction_non_alphanumeric': 0.13086117070180814, 'fraction_numerical': 0.001225865767698437, 'mean_word_length': 3.5020689655172412, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6487334', 'n_tokens_mistral': 1009, 'n_tokens_neox': 987, 'n_words': 255}