Add visualizer configuration (#1443)

* add visualizer configuration

* add visualizer presets

* add butterchurn visualizer

* wrap visualizers in error boundary

src/shared/components/angle-slider/angle-slider.tsx

@@ -0,0 +1,13 @@
+import {
+    AngleSlider as MantineAngleSlider,
+    AngleSliderProps as MantineAngleSliderProps,
+} from '@mantine/core';
+import { forwardRef } from 'react';
+
+export interface AngleSliderProps extends MantineAngleSliderProps {}
+
+export const AngleSlider = forwardRef<HTMLDivElement, AngleSliderProps>((props, ref) => {
+    return <MantineAngleSlider {...props} ref={ref} />;
+});
+
+AngleSlider.displayName = 'AngleSlider';

src/shared/components/fieldset/fieldset.module.css

@@ -0,0 +1,5 @@
+.root {
+    &[data-variant='default'] {
+        background: none;
+    }
+}

src/shared/components/fieldset/fieldset.tsx

@@ -0,0 +1,21 @@
+import { Fieldset as MantineFieldset, FieldsetProps as MantineFieldsetProps } from '@mantine/core';
+import { CSSProperties, forwardRef } from 'react';
+
+import styles from './fieldset.module.css';
+
+export interface FieldsetProps extends MantineFieldsetProps {
+    maxWidth?: CSSProperties['maxWidth'];
+    width?: CSSProperties['width'];
+}
+
+export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
+    ({ children, ...props }, ref) => {
+        return (
+            <MantineFieldset classNames={{ root: styles.root }} {...props} ref={ref}>
+                {children}
+            </MantineFieldset>
+        );
+    },
+);
+
+Fieldset.displayName = 'Fieldset';

src/shared/components/slider/slider.tsx

@@ -1,25 +1,29 @@
 import type { SliderProps as MantineSliderProps } from '@mantine/core';
 
 import { Slider as MantineSlider } from '@mantine/core';
+import { forwardRef } from 'react';
 
 import styles from './slider.module.css';
 
 export interface SliderProps extends MantineSliderProps {}
 
-export const Slider = ({ classNames, style, ...props }: SliderProps) => {
-    return (
-        <MantineSlider
-            classNames={{
-                bar: styles.bar,
-                label: styles.label,
-                thumb: styles.thumb,
-                track: styles.track,
-                ...classNames,
-            }}
-            style={{
-                ...style,
-            }}
-            {...props}
-        />
-    );
-};
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(
+    ({ classNames, style, ...props }, ref) => {
+        return (
+            <MantineSlider
+                classNames={{
+                    bar: styles.bar,
+                    label: styles.label,
+                    thumb: styles.thumb,
+                    track: styles.track,
+                    ...classNames,
+                }}
+                ref={ref}
+                style={{
+                    ...style,
+                }}
+                {...props}
+            />
+        );
+    },
+);