Skip to content

Instantly share code, notes, and snippets.

View aaronmcadam's full-sized avatar
🎉
Having fun!

Aaron McAdam aaronmcadam

🎉
Having fun!
View GitHub Profile
@aaronmcadam
aaronmcadam / project-wizard-machine.ts
Created October 12, 2022 17:14
Example of an XState state machine modelling a wizard process
import { createModel } from 'xstate/lib/model';
import { GeneralInfoFormValues } from '../create-project-screen/project-wizard/project-wizard-steps/general-info-panel';
import { ArtistInfoFormValues } from '../create-project-screen/project-wizard/project-wizard-steps/artist-info-panel';
import { PlaylistFormValues } from '../create-project-screen/project-wizard/project-wizard-steps/playlist-panel';
import { SocialMediaLinksFormValues } from '../create-project-screen/project-wizard/project-wizard-steps/social-media-links-panel';
export interface ProjectWizardContext {
currentStepNumber: number;
generalInfo: GeneralInfoFormValues;
artistInfo: ArtistInfoFormValues;
import {
Box,
Button,
ButtonGroup,
CalendarIconSolid,
ChevronLeftIconSolid,
ChevronRightIconSolid,
Divider,
Heading,
HStack,
import { chakra, HTMLChakraProps, useToken } from '@backstage/spotlight';
export interface TikTokIconProps extends HTMLChakraProps<'svg'> {
color?: string;
}
export function TikTokIcon(props: TikTokIconProps) {
const { color = 'currentColor', ...svgProps } = props;
const iconColor = useToken('colors', color);

import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs'; import { HStack, Icon, chakra } from '../..'; import { Button, SpotlightMailIcon2, SpotlightMailIcon, SpotlightPlusIcon, } from './button'; import { MailIcon, PlusIcon as SolidPlusIcon } from '@heroicons/react/solid';

import { capitalize, downTo } from "./helpers";
export class Bottles {
song() {
return this.verses(99, 0);
}
verses(from, to) {
return downTo(from, to)
.map((i) => this.verse(i))
import React from 'react';
import { act, render, screen, userEvent } from '../../../../testUtils';
import { LocalisationsScreen } from './LocalisationsScreen';
/**
* This test makes extensive use of `act` to ensure that hooks are rendered correctly.
* @see https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
*/
test('allows authors to create a localisation file', async () => {
const handleCreateFileButtonClick = jest.fn();
import React from 'react';
import { act, render, screen, userEvent } from '../../../../testUtils';
import { LocalisationsScreen } from './LocalisationsScreen';
test('allows authors to add new keys for a draft localisation file', async () => {
render(<LocalisationsScreen />);
const addKeyButton = screen.getByRole('button', { name: 'Add key' });
userEvent.click(addKeyButton);
const keyNameInput = screen.getByLabelText('Key name');
import React from 'react';
import {
act,
fireEvent,
render,
screen,
userEvent,
} from '../../../../testUtils';
import { CreateNewKeyForm } from './CreateNewKeyForm';