typescript

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/components/autosuggest_account.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Account from 'soapbox/components/account';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+interface IAutosuggestAccount {
+  id: string,
+}
+
+const AutosuggestAccount: React.FC<IAutosuggestAccount> = ({ id }) => {
+  const getAccount = makeGetAccount();
+  const account = useAppSelector((state) => getAccount(state, id));
+
+  if (!account) return null;
+
+  return <Account account={account} hideActions showProfileHoverCard={false} />;
+
+};
+
+export default AutosuggestAccount;

app/soapbox/features/compose/components/text_character_counter.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+import { length } from 'stringz';
+
+interface ITextCharacterCounter {
+  max: number,
+  text: string,
+}
+
+const TextCharacterCounter: React.FC<ITextCharacterCounter> = ({ text, max }) => {
+  const checkRemainingText = (diff: number) => {
+    return (
+      <span
+        className={classNames('text-sm font-semibold', {
+          'text-gray-400': diff >= 0,
+          'text-danger-600': diff < 0,
+        })}
+      >
+        {diff}
+      </span>
+    );
+  };
+
+  const diff = max - length(text);
+  return checkRemainingText(diff);
+};
+
+export default TextCharacterCounter;

app/soapbox/features/compose/components/upload_form.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { useAppSelector } from 'soapbox/hooks';
+
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+
+// import SensitiveButtonContainer from '../containers/sensitive_button_container';
+import UploadProgress from '../components/upload-progress';
+import UploadContainer from '../containers/upload_container';
+
+const UploadForm = () => {
+  const mediaIds = useAppSelector((state) => state.compose.get('media_attachments').map((item: AttachmentEntity) => item.get('id')));
+  const classes = classNames('compose-form__uploads-wrapper', {
+    'contains-media': mediaIds.size !== 0,
+  });
+
+  return (
+    <div className='compose-form__upload-wrapper'>
+      <UploadProgress />
+
+      <div className={classes}>
+        {mediaIds.map((id: string) => (
+          <UploadContainer id={id} key={id} />
+        ))}
+      </div>
+
+      {/* {!mediaIds.isEmpty() && <SensitiveButtonContainer />} */}
+    </div>
+  );
+};
+
+export default UploadForm;

app/soapbox/features/compose/components/visual_character_counter.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { length } from 'stringz';
+
+import ProgressCircle from 'soapbox/components/progress_circle';
+
+const messages = defineMessages({
+  title: { id: 'compose.character_counter.title', defaultMessage: 'Used {chars} out of {maxChars} characters' },
+});
+
+interface IVisualCharacterCounter {
+  /** max text allowed */
+  max: number,
+  /** text to use to measure */
+  text: string,
+}
+
+/** Renders a character counter */
+const VisualCharacterCounter: React.FC<IVisualCharacterCounter> = ({ text, max }) => {
+  const intl = useIntl();
+
+  const textLength = length(text);
+  const progress = textLength / max;
+
+  return (
+    <ProgressCircle
+      title={intl.formatMessage(messages.title, { chars: textLength, maxChars: max })}
+      progress={progress}
+      radius={10}
+      stroke={3}
+    />
+  );
+};
+
+export default VisualCharacterCounter;

app/soapbox/features/ui/components/accordion.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
+
+import type { Menu } from 'soapbox/components/dropdown_menu';
+
+const messages = defineMessages({
+  collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
+  expand: { id: 'accordion.expand', defaultMessage: 'Expand' },
+});
+
+interface IAccordion {
+  headline: React.ReactNode,
+  children?: string | React.ReactNode,
+  menu?: Menu,
+  expanded?: boolean,
+  onToggle?: (value: boolean) => void,
+}
+
+const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {} }) => {
+  const intl = useIntl();
+
+  const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onToggle(!expanded);
+    e.preventDefault();
+  };
+
+  return (
+    <div className={classNames('accordion', { 'accordion--expanded': expanded })}>
+      {menu && (
+        <div className='accordion__menu'>
+          <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
+        </div>
+      )}
+      <button
+        type='button'
+        className='accordion__title'
+        onClick={handleToggle}
+        title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
+      >
+        {headline}
+      </button>
+      <div className='accordion__content'>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;