add research section

app/routes/_marketing+/ui+/taxonomy.tsx

@@ -1,6 +1,22 @@
 import { Text } from '~/routes/_marketing+/ui+/components/typography/text.tsx'
 import { Heading } from './components/typography/heading.tsx'
 
+const UILibraries = [
+	{ name: 'Material UI', url: 'https://mui.com/components/' },
+	{ name: 'Chakra', url: 'https://chakra-ui.com/docs/components' },
+	{ name: 'Ant Design', url: 'https://ant.design/components/overview/' },
+	{ name: 'Blueprint', url: 'https://blueprintjs.com/docs/#core' },
+	{ name: 'Semantic UI React', url: 'https://react.semantic-ui.com/' },
+	{ name: 'Retool', url: 'https://retool.com/components' },
+	{ name: 'Grommet', url: 'https://v2.grommet.io/components' },
+	{ name: 'Mantine', url: 'https://mantine.dev/getting-started/' },
+	{ name: 'Prime React', url: 'https://primereact.org/installation/' },
+	{ name: 'Gestalt', url: 'https://gestalt.pinterest.systems/web/overview' },
+	{ name: 'Horizon', url: 'https://horizon-ui.com/documentation/docs/introduction' },
+	{ name: 'Radix Themes', url: 'https://www.radix-ui.com/themes/docs/overview/getting-started' },
+	{ name: 'React Aria', url: 'https://react-spectrum.adobe.com/react-aria/react-aria-components.html' },
+]
+
 const Taxonomy = () => {
 	return (
 		<>
@@ -43,6 +59,71 @@ const Taxonomy = () => {
 				(or very few) items defeat the purpose of categorizing in the first place: to make it easier to find things.
 			</Text>
 
+			<Heading as="h2" size="xl" className="mt-14">
+				The research
+			</Heading>
+			<Text size="md" className="mt-2">
+				I went over the following UI libraries in search for components and their categories:
+			</Text>
+			<ul className="list-disc pl-5">
+				{UILibraries.map(({ name, url }) => (
+					<li key={name}>
+						<a href={url} target="_blank" rel="noreferrer" className="underline">
+							{name}
+						</a>
+					</li>
+				))}
+			</ul>
+			<Text size="md" className="mt-2">
+				I also tried finding formal research, but could only find{' '}
+				<a href="https://lbd.udc.es/jornadas2011/actas/JISBD/JISBD/S2/Regulares/jisbd2011_submission_123.pdf" target="_blank" rel="noreferrer" className="underline">
+					this
+				</a>{' '}
+				outdated paper from 2011.
+			</Text>
+			<Text size="md" className="mt-2">
+				From this research I compiled a list of categories and components and tried finding the best fit between components and categories, having a clear definition for each
+				category:
+			</Text>
+			<ul className="mt-2 list-disc pl-5">
+				<li>
+					<strong>Layout</strong> - components that pertain to app structure.
+				</li>
+				<li>
+					<strong>Modals</strong> - components that block interaction with the rest of the app.
+				</li>
+				<li>
+					<strong>Overlays</strong> - components that float on top and cover the app.
+				</li>
+				<li>
+					<strong>Navigations</strong> - components means to navigate between app routes.
+				</li>
+				<li>
+					<strong>Disclosure</strong> - components that conditionally show or hide information.
+				</li>
+				<li>
+					<strong>Typography</strong> - components that pertain to typography.
+				</li>
+				<li>
+					<strong>Media</strong> - components that pertain to image, video, and audio.
+				</li>
+				<li>
+					<strong>Notifications</strong> - components that pertain to peripheral messages.
+				</li>
+				<li>
+					<strong>Status</strong> - components that pertain to the state of the app.
+				</li>
+				<li>
+					<strong>Data Display</strong> - components to display complex data structures.
+				</li>
+				<li>
+					<strong>Data Entry</strong> - components for data input.
+				</li>
+			</ul>
+			<Text size="md" className="mt-2">
+				Check the sidebar to your left to see all the components and their categories.
+			</Text>
+
 			<Heading as="h2" size="xl" className="mt-14">
 				Current violations to clear taxonomy I'd love help fixing 🙏
 			</Heading>