chore: restructure project into yarn workspaces, remove next

packages/design-system/atoms/typist/Typist.spec.tsx

@@ -0,0 +1,26 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { Typist } from './Typist';
+
+jest.useFakeTimers();
+
+it('correctly cycles through provided lines', () => {
+    const lines = ['abcdef', 'ghijkl'];
+    let view = shallow(<Typist charTimeout={100} resetTimeout={10000} lines={lines} />);
+
+    jest.advanceTimersByTime(100 * lines[0].length);
+    view = view.update();
+    expect(view.text()).toBe(lines[0]);
+});
+
+it('correctly cycles through provided characters in a line', () => {
+    const lines = ['abcdef'];
+
+    let view = shallow(<Typist charTimeout={1} resetTimeout={100} lines={lines} />);
+
+    Array(...lines[0]).forEach((_, idx) => {
+        view = view.update();
+        expect(view.text()).toBe(lines[0].slice(0, idx));
+        jest.advanceTimersByTime(1);
+    });
+});

packages/design-system/atoms/typist/Typist.stories.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Typist } from './Typist';
+
+export default {
+    title: 'Atoms/Typist',
+    component: Typist,
+    args: {
+        charTimeout: 75,
+        resetTimeout: 2000,
+        lines: ['hello world', 'and again', 'a third', 'story time!'],
+    },
+};
+
+export const Looping = (args) => {
+    return <Typist {...args} />;
+};

packages/design-system/atoms/typist/Typist.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+type TypistProps = {
+    resetTimeout: number;
+    charTimeout: number;
+    lines: string[];
+};
+
+export const Typist = (props: TypistProps) => {
+    const [outputText, setOutputText] = React.useState('');
+    const [currentLine, setCurrentLine] = React.useState(0);
+
+    React.useEffect(() => {
+        const fullLine = props.lines[currentLine];
+
+        if (outputText === fullLine) {
+            const timeout = setTimeout(() => {
+                setOutputText('');
+                setCurrentLine((currentLine + 1) % props.lines.length);
+            }, props.resetTimeout);
+
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+
+        const timeout = setTimeout(() => {
+            setOutputText(fullLine.slice(0, outputText.length + 1));
+        }, props.charTimeout);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [currentLine, outputText]);
+
+    return <>{outputText}</>;
+};

packages/design-system/atoms/typist/index.ts

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