add inline input (#373)

* add inline input

* Inline input: disabled is not mandatory

Co-authored-by: MaZ <[email protected]>

* CR, add test and story

* rename to inline money

---------

Co-authored-by: MaZ <[email protected]>

src/components/InlineMoney/InlineMoney.stories.tsx

@@ -0,0 +1,17 @@
+import { InlineMoney } from './InlineMoney';
+
+export default { title: 'Components/InlineMoney' };
+
+export const _InlineMoney = {
+  render: () => (
+    <p>
+      <InlineMoney value="1000000" />
+      <br />
+      <InlineMoney value="0.00" disabled />
+      <br />
+      <InlineMoney value="5.55" suffix=" USD" />
+      <br />
+      <InlineMoney value="5.55" customClass="mas-caption" />
+    </p>
+  ),
+};

src/components/InlineMoney/InlineMoney.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { InlineMoney } from '.';
+
+describe('Components | Fields | InlineMoney', () => {
+  test('it should render', () => {
+    render(<InlineMoney value="value" />);
+
+    let inlineMoney = screen.getByTestId('inline-money');
+
+    expect(inlineMoney).toBeInTheDocument();
+  });
+});

src/components/InlineMoney/InlineMoney.tsx

@@ -0,0 +1,39 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React, { ComponentPropsWithoutRef } from 'react';
+
+import { NumberFormatValues, NumericFormat } from 'react-number-format';
+
+interface InlineMoneyProps
+  extends ComponentPropsWithoutRef<typeof NumericFormat> {
+  value: string;
+  disabled?: boolean;
+  suffix?: string;
+  onValueChange?: (event: NumberFormatValues) => void;
+  customClass?: string;
+}
+
+export function InlineMoney(props: InlineMoneyProps) {
+  const { disabled, value, onValueChange, suffix, customClass, ...rest } =
+    props;
+
+  const underline = disabled ? '' : 'underline';
+
+  const suffixAttr = suffix ? suffix : ' MAS';
+
+  return (
+    <NumericFormat
+      data-testid="inline-money"
+      className={`default-input border-none focus:border-none rounded-none
+        text-right bg-primary underline-offset-4 ${underline} ${customClass}`}
+      decimalScale={9}
+      allowNegative={false}
+      suffix={suffixAttr}
+      disabled={disabled}
+      thousandSeparator=","
+      value={value}
+      onValueChange={onValueChange}
+      {...rest}
+    />
+  );
+}

src/components/InlineMoney/index.ts

@@ -0,0 +1 @@
+export * from './InlineMoney';

src/components/index.ts

@@ -21,6 +21,7 @@ export * from './Navigator';
 export * from './SidePanel';
 export * from './Currency';
 export * from './Money';
+export * from './InlineMoney';
 export * from './Clipboard';
 export * from './DashboardStation';
 export * from './PluginWallet';