feat(InlineTextField): add new component

packages/react/src/components/InlineTextField/InlineTextField.api.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+import { TableInterface } from '~storybook/components/TableInterface';
+
+<Meta title="Components API/InlineTextField" />
+
+# InlineTextField API
+
+```js
+import { InlineTextField } from '@elonkit/react';
+```
+
+## Component name
+
+The name `ESInlineTextField` can be used when providing default props or style overrides in the theme.
+
+## Props
+
+<TableInterface name="InlineTextFieldProps" variant="props" />
+
+<br />
+
+## CSS
+
+<TableInterface name="InlineTextFieldClasses" variant="css" />
+
+<br />
+
+## Demos
+
+<ul>
+  <li>
+    <LinkTo kind="components-InlineTextField" story="demo">
+      <code>InlineTextField</code>
+    </LinkTo>
+  </li>
+</ul>

packages/react/src/components/InlineTextField/InlineTextField.classes.ts

@@ -0,0 +1,13 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type InlineTextFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+export type InlineTextFieldClassKey = keyof InlineTextFieldClasses;
+
+export function getInlineTextFieldUtilityClass(slot: string): string {
+  return generateUtilityClass('ESInlineTextField', slot);
+}
+
+export const inlineTextFieldClasses: InlineTextFieldClasses = generateUtilityClasses('ESInlineTextField', ['root']);

packages/react/src/components/InlineTextField/InlineTextField.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { InlineTextField } from '.';
+
+const meta: Meta<typeof InlineTextField> = {
+  tags: ['autodocs'],
+  component: InlineTextField,
+  parameters: {
+    references: ['InlineTextField']
+  },
+  argTypes: {
+    disabled: {
+      control: { type: 'boolean' }
+    },
+    error: {
+      control: { type: 'boolean' }
+    },
+    placeholder: {
+      control: { type: 'text' }
+    },
+    value: {
+      control: { type: 'text' }
+    },
+    InputProps: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  args: {
+    value: 'Text'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof InlineTextField>;
+
+export const Demo: Story = {
+  render: (args) => {
+    return <InlineTextField {...args} />;
+  }
+};

packages/react/src/components/InlineTextField/InlineTextField.tsx

@@ -0,0 +1,84 @@
+import { InlineTextFieldProps } from './InlineTextField.types';
+
+import clsx from 'clsx';
+import { getInlineTextFieldUtilityClass } from './InlineTextField.classes';
+
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+
+import { styled } from '@mui/material/styles';
+import { inputBaseClasses, TextField, TextFieldClasses, TypographyProps } from '@mui/material';
+
+type InlineTextFieldOwnerState = {
+  classes?: Partial<TextFieldClasses>;
+};
+
+const useUtilityClasses = (ownerState: InlineTextFieldOwnerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['root']
+  };
+
+  return composeClasses(slots, getInlineTextFieldUtilityClass, classes);
+};
+
+const InlineTextFieldRoot = styled(TextField, {
+  name: 'ESInlineTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})<{
+  ownerState: { typography: Exclude<TypographyProps['variant'], 'inherit' | undefined> };
+}>(({ theme, ownerState }) => ({
+  '.MuiInput-root:not(.Mui-error)::before': {
+    borderBottom: '1px solid transparent'
+  },
+
+  '.MuiInput-root.Mui-disabled::before': {
+    borderBottom: `1px dotted ${theme.vars.palette.monoA.A200}`
+  },
+
+  '.MuiInput-root:hover:not(.Mui-disabled, .Mui-error)::before': {
+    borderBottom: `1px solid ${theme.vars.palette.monoA.A200}`
+  },
+
+  [`& .${inputBaseClasses.root}`]: {
+    padding: 0
+  },
+
+  [`& .${inputBaseClasses.input}`]: {
+    ...theme.typography[ownerState.typography],
+    padding: '5px 0',
+
+    '&::placeholder': {
+      color: theme.vars.palette.monoA.A400,
+      opacity: 1
+    },
+
+    '&, &:disabled': {
+      color: theme.vars.palette.monoA.A900,
+      WebkitTextFillColor: 'unset'
+    }
+  }
+}));
+
+export const InlineTextField = ({
+  typography = 'body200',
+  placeholder,
+  classes: inClasses,
+  className,
+  ...props
+}: InlineTextFieldProps) => {
+  const ownerState = { classes: inClasses };
+  const classes = useUtilityClasses(ownerState);
+  return (
+    <InlineTextFieldRoot
+      multiline
+      className={clsx(classes.root, className)}
+      classes={inClasses}
+      ownerState={{ typography }}
+      placeholder={placeholder ?? '-'}
+      variant="standard"
+      {...props}
+    />
+  );
+};

packages/react/src/components/InlineTextField/InlineTextField.types.ts

@@ -0,0 +1,5 @@
+import { TextFieldProps, TypographyProps } from '@mui/material';
+
+export type InlineTextFieldProps = Omit<TextFieldProps, 'ownerState'> & {
+  typography?: Exclude<TypographyProps['variant'], 'inherit'>;
+};

packages/react/src/components/InlineTextField/index.ts

@@ -0,0 +1,3 @@
+export { InlineTextField } from './InlineTextField';
+export { InlineTextFieldClasses, inlineTextFieldClasses, InlineTextFieldClassKey } from './InlineTextField.classes';
+export { InlineTextFieldProps } from './InlineTextField.types';

packages/react/src/components/index.ts

@@ -23,6 +23,7 @@ export * from './Flags';
 export * from './FormatDate';
 export * from './FormatSize';
 export * from './Gallery';
+export * from './InlineTextField';
 export * from './Kbd';
 export * from './Link';
 export * from './LoadingButton';

packages/react/src/overrides.d.ts

@@ -145,6 +145,7 @@ import {
   GalleryThumbnailsItemProps,
   GalleryThumbnailsProps
 } from './components/Gallery';
+import { InlineTextFieldClassKey, InlineTextField } from './components/InlineTextField';
 import { KbdClassKey, KbdProps } from './components/Kbd';
 import { LinkClassKey, LinkProps } from './components/Link';
 import { LoadingButtonClassKey, LoadingButtonProps } from './components/LoadingButton';
@@ -371,6 +372,7 @@ declare module '@mui/material/styles/props' {
     ESGalleryThumbnails: GalleryThumbnailsProps;
     ESGalleryThumbnailsImage: GalleryThumbnailsImageProps;
     ESGalleryThumbnailsItem: GalleryThumbnailsItemProps;
+    ESInlineTextField: InlineTextFieldProps;
     ESKbd: KbdProps;
     ESLink: LinkProps;
     ESLoadingButton: LoadingButtonProps;
@@ -489,6 +491,7 @@ declare module '@mui/material/styles/overrides' {
     ESGalleryThumbnails: GalleryThumbnailsClassKey;
     ESGalleryThumbnailsImage: GalleryThumbnailsImageClassKey;
     ESGalleryThumbnailsItem: GalleryThumbnailsItemClassKey;
+    ESInlineTextField: InlineTextFieldClassKey;
     ESKbd: KbdClassKey;
     ESLink: LinkClassKey;
     ESLoadingButton: LoadingButtonClassKey;
@@ -802,6 +805,10 @@ declare module '@mui/material/styles/components' {
     ESFormatSize?: {
       defaultProps?: ComponentsProps['ESFormatSize'];
     };
+    ESInlineTextField?: {
+      defaultProps?: ComponentsProps['ESInlineTextField'];
+      styleOverrides?: ComponentsOverrides['ESInlineTextField'];
+    };
     ESKbd?: {
       defaultProps?: ComponentsProps['ESKbd'];
     };