feat(bootstrap): add Mantine layout and progress wrappers

graylog2-web-interface/src/components/common/Box.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { Box as MantineBox } from '@mantine/core';
+
+const Box = ({ ...props }: React.ComponentProps<typeof MantineBox>) => <MantineBox {...props} />;
+
+export default Box;

graylog2-web-interface/src/components/common/Group.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { Group as MantineGroup } from '@mantine/core';
+
+const Group = ({ ...props }: React.ComponentProps<typeof MantineGroup>) => <MantineGroup {...props} />;
+
+export default Group;

graylog2-web-interface/src/components/common/Progress.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { Progress as MantineProgress } from '@mantine/core';
+
+const Root = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof MantineProgress.Root>>((props, ref) => (
+  <MantineProgress.Root ref={ref} {...props} />
+));
+const Section = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof MantineProgress.Section>>((props, ref) => (
+  <MantineProgress.Section ref={ref} {...props} />
+));
+const Label = ({ ...props }: React.ComponentProps<typeof MantineProgress.Label>) => (
+  <MantineProgress.Label {...props} />
+);
+
+const Progress = { Root, Section, Label };
+
+export default Progress;

graylog2-web-interface/src/components/common/Stack.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { Stack as MantineStack } from '@mantine/core';
+
+const Stack = ({ ...props }: React.ComponentProps<typeof MantineStack>) => <MantineStack {...props} />;
+
+export default Stack;

graylog2-web-interface/src/components/common/Title.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { Title as MantineTitle } from '@mantine/core';
+import styled, { css } from 'styled-components';
+import type { DefaultTheme } from 'styled-components';
+
+type Order = 1 | 2 | 3 | 4 | 5 | 6;
+
+const fontSizeForOrder = (order: Order, theme: DefaultTheme) => {
+  const sizes: Record<Order, string> = {
+    1: theme.fonts.size.h1,
+    2: theme.fonts.size.h2,
+    3: theme.fonts.size.h3,
+    4: theme.fonts.size.h4,
+    5: theme.fonts.size.h5,
+    6: theme.fonts.size.h6,
+  };
+
+  return sizes[order];
+};
+
+const StyledTitle = styled(MantineTitle)<{ order: Order }>(
+  ({ theme, order }) => css`
+    font-size: ${fontSizeForOrder(order, theme)};
+    font-family: ${order <= 2 ? theme.fonts.family.navigation : 'inherit'};
+    font-weight: ${order === 6 ? 'bold' : 'normal'};
+    color: ${theme.colors.text.primary};
+    margin: 0;
+    padding: 0;
+  `,
+);
+
+const Title = ({ order = 1, ...props }: React.ComponentProps<typeof MantineTitle>) => (
+  <StyledTitle order={order as Order} {...props} />
+);
+
+export default Title;

graylog2-web-interface/src/components/common/index.tsx

@@ -24,6 +24,7 @@ export { default as AccordionItem } from './AccordionItem';
 export { default as Affix } from './Affix';
 export { default as Autocomplete } from './Autocomplete/Autocomplete';
 export { default as BrowserTime } from './BrowserTime';
+export { default as Box } from './Box';
 export { default as BrandIcon } from './BrandIcon';
 export { default as Card } from './Card';
 export { default as Center } from './Center';
@@ -65,6 +66,7 @@ export { default as FlatContentRow } from './FlatContentRow';
 export { default as FormikFormGroup } from './FormikFormGroup';
 export { default as FormikInput } from './FormikInput';
 export { default as FormSubmit } from './FormSubmit';
+export { default as Group } from './Group';
 export { default as GrowableInput } from './GrowableInput';
 export { default as HasOwnership } from './HasOwnership';
 export { default as HoverForHelp } from './HoverForHelp';
@@ -104,6 +106,7 @@ export { default as PaginatedItemOverview } from './PaginatedItemOverview/Pagina
 export { default as PaginatedList } from './PaginatedList';
 export { default as Pagination } from './Pagination';
 export { default as Pluralize } from './Pluralize';
+export { default as Progress } from './Progress';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProgressAnimation } from './ProgressAnimation';
 export { default as Portal } from './Portal';
@@ -124,6 +127,7 @@ export { default as SelectableList } from './SelectableList';
 export { default as ShareButton } from './ShareButton';
 export { default as ShareMenuItem } from './ShareMenuItem';
 export { default as SortableList } from './SortableList';
+export { default as Stack } from './Stack';
 export { default as Spinner } from './Spinner';
 export { default as Spoiler } from './Spoiler';
 export { default as StatusIcon } from './StatusIcon';
@@ -136,6 +140,7 @@ export { default as TimeUnitInput } from './TimeUnitInput';
 export { default as Timestamp } from './Timestamp';
 export { default as TimezoneSelect } from './TimezoneSelect';
 export { default as Text } from './Text';
+export { default as Title } from './Title';
 export { default as Tooltip } from './Tooltip';
 export { default as TypeAheadDataFilter } from './TypeAheadDataFilter';
 export { default as TypeAheadFieldInput } from './TypeAheadFieldInput';