Remove some references to bootstrap

shlinkio · Oct 26, 2024 · da27f45 · da27f45
1 parent 1a49623
commit da27f45
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 69 deletions.
diff --git a/dev/block/MessagePage.tsx b/dev/block/MessagePage.tsx
@@ -2,11 +2,11 @@ import type { FC } from 'react';
 import { Message } from '../../src';
 
 export const MessagePage: FC = () => (
-  <>
+  <div className="d-flex flex-column gap-2">
     <Message>This is a message</Message>
     <Message type="error">Oops! This is an error</Message>
     <Message fullWidth>Full width</Message>
     <Message loading />
     <Message loading>Loading alternative content</Message>
-  </>
+  </div>
 );
diff --git a/dev/block/ResultPage.tsx b/dev/block/ResultPage.tsx
@@ -2,12 +2,12 @@ import type { FC } from 'react';
 import { Result } from '../../src';
 
 export const ResultPage: FC = () => (
-  <>
+  <div className="d-flex flex-column gap-2">
     <Result type="success">Success result</Result>
     <Result type="error">Error result</Result>
     <Result type="warning">Warning result</Result>
     <Result type="success" small>Small success result</Result>
     <Result type="error" small>Small error result</Result>
     <Result type="warning" small>Small warning result</Result>
-  </>
+  </div>
 );
diff --git a/src/block/Message.tsx b/src/block/Message.tsx
@@ -2,27 +2,10 @@ import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
-import { Card, Row } from 'reactstrap';
+import { Card } from 'reactstrap';
 
 type MessageType = 'default' | 'error';
 
-const getClassForType = (type: MessageType) => {
-  const map: Record<MessageType, string> = {
-    error: 'border-danger',
-    default: '',
-  };
-
-  return map[type];
-};
-const getTextClassForType = (type: MessageType) => {
-  const map: Record<MessageType, string> = {
-    error: 'text-danger',
-    default: 'text-muted',
-  };
-
-  return map[type];
-};
-
 export type MessageProps = PropsWithChildren<{
   className?: string;
   loading?: boolean;
@@ -32,23 +15,24 @@ export type MessageProps = PropsWithChildren<{
 
 export const Message: FC<MessageProps> = (
   { className, children, loading = false, type = 'default', fullWidth = false },
-) => {
-  const classes = clsx({
-    'col-md-12': fullWidth,
-    'col-md-10 offset-md-1': !fullWidth,
-  });
-
-  return (
-    <Row className={clsx('g-0', className)}>
-      <div className={classes}>
-        <Card className={getClassForType(type)} body>
-          <h3 className={clsx('text-center mb-0', getTextClassForType(type))}>
-            {loading && <FontAwesomeIcon icon={preloader} spin />}
-            {loading && <span className="ms-2">{children ?? 'Loading...'}</span>}
-            {!loading && children}
-          </h3>
-        </Card>
-      </div>
-    </Row>
-  );
-};
+) => (
+  <Card
+    body
+    className={clsx(className, {
+      'w-100': fullWidth,
+      'w-75 mx-auto': !fullWidth,
+      'border-danger': type === 'error',
+    })}
+  >
+    <h3
+      className={clsx('text-center mb-0', {
+        'text-muted': type === 'default',
+        'text-danger': type === 'error',
+      })}
+    >
+      {loading && <FontAwesomeIcon icon={preloader} spin />}
+      {loading && <span className="ms-2">{children ?? 'Loading...'}</span>}
+      {!loading && children}
+    </h3>
+  </Card>
+);
diff --git a/src/block/Result.tsx b/src/block/Result.tsx
@@ -1,6 +1,5 @@
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
-import { Row } from 'reactstrap';
 import { SimpleCard } from './SimpleCard';
 
 export type ResultType = 'success' | 'error' | 'warning';
@@ -12,20 +11,18 @@ export type ResultProps = PropsWithChildren<{
 }>;
 
 export const Result: FC<ResultProps> = ({ children, type, className, small = false }) => (
-  <Row className={className}>
-    <div className={clsx({ 'col-md-10 offset-md-1': !small, 'col-12': small })}>
-      <SimpleCard
-        role="document"
-        className={clsx('text-center', {
-          'bg-main': type === 'success',
-          'bg-danger': type === 'error',
-          'bg-warning': type === 'warning',
-          'text-white': type !== 'warning',
-        })}
-        bodyClassName={clsx({ 'p-2': small })}
-      >
-        {children}
-      </SimpleCard>
-    </div>
-  </Row>
+  <SimpleCard
+    role="document"
+    className={clsx('text-center', {
+      'w-75 mx-auto': !small,
+      'w-100': small,
+      'bg-main': type === 'success',
+      'bg-danger': type === 'error',
+      'bg-warning': type === 'warning',
+      'text-white': type !== 'warning',
+    }, className)}
+    bodyClassName={clsx({ 'p-2': small })}
+  >
+    {children}
+  </SimpleCard>
 );
diff --git a/src/form/InputFormGroup.tsx b/src/form/InputFormGroup.tsx
@@ -1,12 +1,11 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useId } from 'react';
-import type { InputType } from 'reactstrap/types/lib/Input';
 import { LabeledFormGroup } from './LabeledFormGroup';
 
 export type InputFormGroupProps = PropsWithChildren<{
   value: string;
   onChange: (newValue: string) => void;
-  type?: InputType;
+  type?: HTMLInputElement['type'];
   required?: boolean;
   placeholder?: string;
   className?: string;

diff --git a/test/block/Message.test.tsx b/test/block/Message.test.tsx
@@ -13,12 +13,12 @@ describe('<Message />', () => {
   ])('passes a11y checks', (props: MessageProps) => checkAccessibility(setUp(props)));
 
   it.each([
-    [true, 'col-md-12'],
-    [false, 'col-md-10 offset-md-1'],
-    [undefined, 'col-md-10 offset-md-1'],
+    [true, 'w-100'],
+    [false, 'w-75 mx-auto'],
+    [undefined, 'w-75 mx-auto'],
   ])('renders expected classes based on width', (fullWidth, expectedClass) => {
     const { container } = setUp({ fullWidth });
-    expect(container.firstChild?.firstChild).toHaveClass(expectedClass);
+    expect(container.firstChild).toHaveClass(expectedClass);
   });
 
   it.each([
@@ -49,8 +49,8 @@ describe('<Message />', () => {
     expect(screen.getByRole('heading')).toHaveClass(`text-center mb-0 ${expectedH3Class}`);
   });
 
-  it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => {
+  it.each([{ className: 'foo' }, { className: 'bar' }])('renders provided classes', ({ className }) => {
     const { container } = setUp({ className });
-    expect(container.firstChild).toHaveClass(`g-0${className ? ` ${className}` : ''}`);
+    expect(container.firstChild).toHaveClass(className);
   });
 });
diff --git a/test/block/Result.test.tsx b/test/block/Result.test.tsx
@@ -31,8 +31,8 @@ describe('<Result />', () => {
 
   it.each([{ small: true }, { small: false }])('renders small results properly', ({ small }) => {
     const { container } = setUp({ type: 'success', small });
-    const bigElement = container.querySelectorAll('.col-md-10');
-    const smallElement = container.querySelectorAll('.col-12');
+    const bigElement = container.querySelectorAll('.w-75');
+    const smallElement = container.querySelectorAll('.w-100');
 
     expect(bigElement).toHaveLength(small ? 0 : 1);
     expect(smallElement).toHaveLength(small ? 1 : 0);