Merge pull request #10 from blue-tomato/develop

0.1.4

.storybook/main.ts

@@ -1,13 +1,13 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-	framework: "@storybook/react-vite",
-	stories: ["../src/**/*.stories.@(ts|tsx)"],
 	addons: [
 		"@storybook/addon-links",
 		"@storybook/addon-essentials",
 		"@storybook/addon-interactions",
 	],
+	framework: "@storybook/react-vite",
+	stories: ["../src/**/*.stories.@(ts|tsx)"],
 };
 
 export default config;

.storybook/preview.ts

@@ -2,12 +2,7 @@ import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
 	parameters: {
-		controls: {
-			matchers: {
-				color: /(background|color)$/i,
-				date: /Date$/i,
-			},
-		},
+		layout: "fullscreen",
 	},
 };
 

biome.json

@@ -3,6 +3,9 @@
 	"formatter": {
 		"enabled": true
 	},
+	"javascript": {
+		"globals": ["React"]
+	},
 	"linter": {
 		"enabled": true,
 		"rules": {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@blue-tomato/blueto",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"license": "EUPL-1.2",
 	"description": "🪐 BLUETO - the design system of Blue Tomato",
 	"homepage": "https://blueto.blue-tomato.com",
@@ -12,6 +12,9 @@
 		"dev": "storybook dev -p 6006",
 		"build:storybook": "storybook build"
 	},
+	"dependencies": {
+		"modern-normalize": "^2.0.0"
+	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.3",
 		"@storybook/addon-essentials": "^8.2.5",
@@ -22,6 +25,7 @@
 		"@storybook/react-vite": "^8.2.5",
 		"@storybook/test": "^8.2.5",
 		"prop-types": "^15.8.1",
+		"sass": "^1.77.8",
 		"storybook": "^8.2.5"
 	}
 }

src/index.d.ts

@@ -0,0 +1,5 @@
+declare module "*.scss" {
+	const content: Record<string, string>;
+
+	export default content;
+}

src/stories/foundations/ColorsStory/ColorTile.module.scss

@@ -0,0 +1,6 @@
+.wrapper {
+  width: 128px;
+  padding: 32px;
+  border: 0;
+  cursor: pointer;
+}

src/stories/foundations/ColorsStory/ColorTile.tsx

@@ -0,0 +1,19 @@
+import classes from "./ColorTile.module.scss";
+
+type Props = React.HTMLAttributes<HTMLElement> & {
+	color?: string;
+	name?: string;
+};
+
+const ColorTile = ({ color, name, ...props }: Props) => (
+	<button
+		className={classes.wrapper}
+		onClick={() => name && navigator.clipboard.writeText(name)}
+		style={{ backgroundColor: color }}
+		{...props}
+	>
+		{name}
+	</button>
+);
+
+export default ColorTile;

src/stories/foundations/ColorsStory/index.module.scss

@@ -0,0 +1,17 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  padding: 32px;
+  font-family: Open Sans, Helvetica, Arial, sans-serif;
+}
+
+.header {
+  font-size: 20px;
+}
+
+.row {
+  display: flex;
+  gap: 16px;
+}

src/stories/foundations/ColorsStory/index.tsx

@@ -0,0 +1,66 @@
+import ColorTile from "./ColorTile";
+import classes from "./index.module.scss";
+
+const ColorsStory = () => (
+	<div className={classes.wrapper}>
+		<div className={classes.header}>Colors (click to copy)</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#333333" name="$grey-1" />
+			<ColorTile color="#8f8f8f" name="$grey-2" />
+			<ColorTile color="#cccccc" name="$grey-3" />
+			<ColorTile color="#f4f4f4" name="$grey-4" />
+		</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#ffde00" name="$green-1" />
+			<ColorTile color="#ffde00" name="$green-2" />
+			<ColorTile color="#ffde00" name="$green-3" />
+			<ColorTile color="#fffad9" name="$green-4" />
+		</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#ff4444" name="$red-1" />
+			<ColorTile color="#ff9898" name="$red-2" />
+			<ColorTile color="#ffc7c7" name="$red-3" />
+			<ColorTile color="#ffe3e3" name="$red-4" />
+		</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#0099CC" name="$sky-1" />
+			<ColorTile color="#73C7E3" name="$sky-2" />
+			<ColorTile color="#B3E0F0" name="$sky-3" />
+			<ColorTile color="#D9F0F7" name="$sky-4" />
+		</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#2D69AA" name="$blue-1" />
+			<ColorTile color="#8CADD0" name="$blue-2" />
+			<ColorTile color="#C0D2E6" name="$blue-3" />
+			<ColorTile color="#E0E9F1" name="$blue-4" />
+		</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#2fa9b4" name="$petrol-1" />
+			<ColorTile color="#8dd0d6" name="$petrol-2" />
+			<ColorTile color="#c1e5e9" name="$petrol-3" />
+			<ColorTile color="#e0f2f4" name="$petrol-4" />
+		</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#21cdab" name="$mint-1" />
+			<ColorTile color="#8ee4d1" name="$mint-2" />
+			<ColorTile color="#c2f0e6" name="$mint-3" />
+			<ColorTile color="#e0f8f2" name="$mint-4" />
+		</div>
+
+		<div className={classes.row}>
+			<ColorTile color="#24a779" name="$green-1" />
+			<ColorTile color="#87cfb5" name="$green-2" />
+			<ColorTile color="#bde5d7" name="$green-3" />
+			<ColorTile color="#def2eb" name="$green-4" />
+		</div>
+	</div>
+);
+
+export default ColorsStory;

src/stories/foundations/index.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ColorsStory from "./ColorsStory";
+
+const Colors: StoryObj = {
+	render: ColorsStory,
+};
+
+const meta: Meta = {
+	title: "Foundations",
+};
+
+export default meta;
+export { Colors };