Add react-aria & Lucide

package.json

@@ -49,8 +49,6 @@
     "format": "prettier --write \"**/*.{js,jsx,json,ts,md,scss,css}\"",
     "test": "jest"
   },
-  "dependencies": {
-  },
   "workspaces": [
     "packages/*"
   ],

packages/chord-chart-studio/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap"
+	rel="stylesheet"
+/>

packages/chord-chart-studio/.storybook/preview.js

@@ -1,3 +1,5 @@
+import '../css/global.css';
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
 	parameters: {

packages/chord-chart-studio/css/global.css

@@ -1,9 +1,95 @@
+/* ===== Normalize ===== */
+/* https://mattbrictson.com/blog/css-normalize-and-reset */
+@import '../../../node_modules/modern-normalize/modern-normalize.css';
+
+h1,
+h2,
+h3,
+h4,
+h5,
+figure,
+p,
+ol,
+ul {
+	margin: 0;
+}
+
+ol,
+ul {
+	list-style: none;
+	padding-inline: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+	font-size: inherit;
+	font-weight: inherit;
+}
+
+img {
+	display: block;
+	max-inline-size: 100%;
+}
+
+/* ===== Variables ===== */
+
 :root {
-	--space-xxs: 4px;
+	--space-xxxs: 4px;
+	--space-xxs: 6px;
 	--space-xs: 8px;
 	--space-s: 12px;
 	--space-m: 16px;
 	--space-l: 24px;
 	--space-xl: 32px;
 	--space-xxl: 48px;
+
+	--rounded-s: 4px;
+	--rounded-m: 8px;
+	--rounded-l: 16px;
+
+	--font-family: 'Cabin', sans-serif;
+
+	--font-weight-regular: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+
+	/* neutral color */
+	--slate50: hsl(210, 40%, 98%);
+	--slate100: hsl(210, 40%, 96%);
+	--slate200: hsl(214, 32%, 91%);
+	--slate300: hsl(213, 27%, 84%);
+	--slate400: hsl(215, 20%, 65%);
+	--slate500: hsl(215, 16%, 47%);
+	--slate600: hsl(215, 19%, 35%);
+	--slate700: hsl(215, 25%, 27%);
+	--slate800: hsl(217, 33%, 17%);
+	--slate900: hsl(222, 47%, 11%);
+	--slate950: hsl(229, 84%, 5%);
+
+	/* primary color */
+	--sky50: hsl(205, 86%, 97%);
+	--sky100: hsl(209, 86%, 94%);
+	--sky200: hsl(203, 84%, 87%);
+	--sky300: hsl(203, 88%, 78%);
+	--sky400: hsl(204, 84%, 68%);
+	--sky500: hsl(206, 72%, 60%);
+	--sky600: hsl(208, 51%, 50%);
+	--sky700: hsl(209, 52%, 40%);
+	--sky800: hsl(208, 52%, 33%);
+	--sky900: hsl(208, 51%, 28%);
+	--sky950: hsl(209, 53%, 18%);
+
+	/* danger */
+	/* warning */
+	/* success */
+}
+
+:root {
+	font-family: var(--font-family);
+	line-height: 1.5;
+	color: var(--slate950);
 }

packages/chord-chart-studio/package.json

@@ -44,6 +44,8 @@
     "file-saver": "^2.0.5",
     "filesize": "^10.1.0",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.349.0",
+    "modern-normalize": "^2.0.0",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "prosemirror-commands": "^1.5.2",
@@ -56,6 +58,7 @@
     "prosemirror-view": "^1.32.7",
     "qs": "^6.11.2",
     "react": "^18.2.0",
+    "react-aria-components": "^1.1.1",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",

packages/chord-chart-studio/src/components/button/Button.jsx

@@ -1,11 +1,35 @@
+import React from 'react';
+
+import { Button as ReactAriaButton } from 'react-aria-components';
 import styles from './Button.module.css';
 
-import React from 'react';
+import Icon from '../icon/Icon';
+
+const defaultType = 'primary';
+
+export default function Button({
+	children,
+	type = defaultType,
+	icon = '',
+	onPress,
+}) {
+	const className = [
+		styles.button,
+		styles[type] ? styles[type] : styles[defaultType],
+	];
+
+	const renderedIcon = icon ? (
+		<span className={styles.icon}>
+			<Icon id={icon} size={20} />
+		</span>
+	) : (
+		''
+	);
 
-export default function Button({ children, onClick }) {
 	return (
-		<div className={styles.button} onClick={onClick}>
-			<div className={styles.buttonContent}>{children}</div>
-		</div>
+		<ReactAriaButton onPress={onPress} className={className.join(' ')}>
+			{renderedIcon}
+			<span className={styles.label}>{children}</span>
+		</ReactAriaButton>
 	);
 }

packages/chord-chart-studio/src/components/button/Button.module.css

@@ -1,9 +1,92 @@
 .button {
-	font-weight: bold;
-	background-color: red;
+	/*** layout ***/
+	padding: var(--space-s) var(--space-m);
 
-	.buttonContent {
-		background-color: blueviolet;
-		padding: var(--space-xxl);
+	display: flex;
+	align-items: center;
+
+	:is(.icon, .label) {
+		height: 20px;
+	}
+
+	.icon {
+		margin-right: var(--space-xxs);
+	}
+
+	/*** Styles ***/
+
+	font-weight: var(--font-weight-bold);
+
+	border: 0;
+	border-radius: var(--rounded-m);
+
+	outline-offset: var(--space-xxs);
+	outline-style: solid;
+	outline-width: 0;
+
+	&[data-hovered] {
+		cursor: pointer;
+	}
+
+	&[data-focused] {
+		outline-width: 0;
+	}
+
+	&[data-focus-visible] {
+		outline-width: 2px;
+	}
+
+	/*** Colors ***/
+
+	&.primary {
+		background-color: var(--sky600);
+		color: var(--sky50);
+
+		&[data-hovered] {
+			background-color: var(--sky500);
+		}
+
+		&[data-pressed] {
+			background-color: var(--sky400);
+		}
+
+		&[data-focus-visible] {
+			outline-color: var(--sky500);
+		}
+	}
+
+	&.secondary {
+		background-color: var(--sky100);
+		color: var(--sky700);
+
+		&[data-hovered] {
+			background-color: var(--sky50);
+			color: var(--sky500);
+		}
+
+		&[data-pressed] {
+			color: var(--sky400);
+		}
+
+		&[data-focus-visible] {
+			outline-color: var(--sky500);
+		}
+	}
+
+	&.tertiary {
+		background-color: transparent;
+		color: var(--slate700);
+
+		&[data-hovered] {
+			background-color: var(--slate50);
+		}
+
+		&[data-pressed] {
+			color: var(--slate500);
+		}
+
+		&[data-focus-visible] {
+			outline-color: var(--slate600);
+		}
 	}
 }

packages/chord-chart-studio/src/components/button/Button.stories.js

@@ -10,17 +10,36 @@ export default {
 	tags: ['autodocs'],
 	argTypes: {
 		children: {
+			control: 'text',
+		},
+		type: {
+			control: 'select',
+			options: ['primary', 'secondary', 'tertiary'],
+		},
+		icon: {
 			control: 'select',
-			options: ['Primary', 'Secondary'],
+			options: ['plus', 'import'],
 		},
 	},
-	args: { children: 'myButton', onClick: fn() },
+	args: { children: 'myButton', onPress: fn() },
+};
+
+export const Primary = {
+	args: {
+		children: 'Primary',
+	},
 };
 
-export const Main = {};
+export const Secondary = {
+	args: {
+		children: 'Secondary',
+		type: 'secondary',
+	},
+};
 
-export const SecondState = {
+export const Tertiary = {
 	args: {
-		children: 'mySecondButton',
+		children: 'Tertiary',
+		type: 'tertiary',
 	},
 };

packages/chord-chart-studio/src/components/icon/Icon.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Plus, Import } from 'lucide-react';
+
+export default function Icon({ id, size }) {
+	let Component;
+
+	switch (id) {
+		case 'plus':
+			Component = Plus;
+			break;
+		case 'import':
+			Component = Import;
+			break;
+	}
+	return <Component size={size} />;
+}

packages/chord-chart-studio/src/components/icon/Icon.stories.js

@@ -0,0 +1,24 @@
+import Icon from './Icon';
+
+export default {
+	component: Icon,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		id: {
+			control: 'select',
+			options: ['plus', 'import'],
+		},
+	},
+	args: {},
+};
+
+export const Plus = {
+	args: { id: 'plus' },
+};
+
+export const Import = {
+	args: { id: 'import' },
+};

packages/chord-chart-studio/src/index.html

@@ -12,12 +12,10 @@
 			name="viewport"
 			content="width=device-width, initial-scale=1, shrink-to-fit=no"
 		/>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
-			href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Mono:400,700"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://fonts.googleapis.com/icon?family=Material+Icons"
+			href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap"
 			rel="stylesheet"
 		/>
 		<link rel="icon" href="/favicon.ico" sizes="32x32" />