Rogin Farrer roginfarrer

Collage Changelog

Made button purple – DT-1234 via #123456 by Eliott Ruthersford

Created new FormInput component – DT-1234 via #123456 by Eliott Ruthersford

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

	import { addons, types, useGlobals } from "@storybook/manager-api";
	/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
	import React, { useEffect, useRef } from "react";
	import { Form, IconButton } from "@storybook/components";
	import collageTheme from "collage/.storybook/themes/collage-theme";

	const STORAGE_KEYS = {
	ACTIVE_ROLE: "storybook_activeRole",
	ACTIVE_FRAMEWORK: "storybook_activeFramework",
	THEME: "storybook_theme",

	function insert(propValue, key, value) {
	return propValue != null ? `${key}="${value.toString()}"` : "";
	}

	function conditionalAttr(prop, value) {
	return `{{#${prop}}}${prop}="${value}"{{/${prop}}}`;
	}

	export default function (babel) {
	const { types: t } = babel;

	// Props derived from custom element class. Currently has limitations of making
	// all properties optional and also surfaces life cycle methods in autocomplete.
	// TODO(augustjk) Consider omitting keyof LitElement to remove "internal"
	// lifecycle methods or allow user to explicitly provide props.
	type ElementProps<I> = Partial<Omit<I, keyof HTMLElement \| "events">>;

	type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<
	React.HTMLAttributes<I>,
	I
	> &

	import { useEffect } from "react";

	/**
	* Reusing a single instance of a ResizeObserver is better for performance
	* than creating multiple instances. https://github.com/WICG/resize-observer/issues/59
	*
	* ReusableResizeObserver handles logic for collecting each observed entity
	* and its associated callback
	*
	* @example

	import { globalStyle, GlobalStyleRule } from "@vanilla-extract/css";

	interface RecursiveGlobalStyle {
	[k: string]: GlobalStyleRule \| RecursiveGlobalStyle;
	}

	function globalUtil(selector: string, styles: RecursiveGlobalStyle) {
	const write = (
	key: string[],
	value: RecursiveGlobalStyle \| GlobalStyleRule

	// Box takes in props that then assigns each responsive prop to the appropriate breakpoint
	// Negates needing to update breakpoints based on theme within the styled-component
	const Box = styled.div`
	// base styles

	@media screen and (min-width: ${props => props.breakpoints.breakpointOne}) {
	// other styles
	}

	@media screen and (min-width: ${props => props.breakpoints.breakpointTwo}) {

	////////////////////////////////////////////////////////////////////////////////
	// Create a directory called "pages" next to
	// this file, put markdown files in there, and
	// then run:
	//
	// ```
	// $ node build.mjs
	// ```
	//
	// Then deploy the "build" directory somewhere.

	const breakpoints = {
	all: '_',
	bp320: '320px',
	bp480: '480px'
	}

	export const transformAliasProps = props => {
	let result = {};
	for (let prop in props) {
	if (typeof props[prop] === "object" && !Array.isArray(props[prop])) {