From 411f937f9425ddbe123db57e7a4ca95ad70583d7 Mon Sep 17 00:00:00 2001 From: Roman Date: Tue, 30 Jul 2024 16:28:37 +0200 Subject: [PATCH 1/2] 0.1.7 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ed4c0db..ce84f58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@blue-tomato/blueto", - "version": "0.1.6", + "version": "0.1.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@blue-tomato/blueto", - "version": "0.1.6", + "version": "0.1.7", "license": "EUPL-1.2", "dependencies": { "modern-normalize": "^2.0.0" diff --git a/package.json b/package.json index 04ea18e..51f05ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@blue-tomato/blueto", - "version": "0.1.6", + "version": "0.1.7", "license": "EUPL-1.2", "description": "🪐 BLUETO - the design system of Blue Tomato", "homepage": "https://blueto.blue-tomato.com", From cad34db480cfc876dfa8f0c1e6c98576012c0a32 Mon Sep 17 00:00:00 2001 From: Roman Date: Fri, 30 Aug 2024 15:15:16 +0200 Subject: [PATCH 2/2] Add more foundation styles --- .storybook/main.ts | 8 ++ biome.json | 3 + src/index.d.ts => index.d.ts | 0 package-lock.json | 48 ++++++- package.json | 3 +- src/foundations/colors.module.scss | 47 +++++++ src/foundations/index.module.scss | 2 + src/foundations/spacing.module.scss | 19 +++ src/index.module.scss | 1 + src/index.ts | 14 +++ .../BreakpointsStory/index.module.scss | 14 ++- .../foundations/BreakpointsStory/index.tsx | 26 ++-- .../foundations/ColorsStory/ColorTile.tsx | 4 +- .../foundations/ColorsStory/index.module.scss | 4 + src/stories/foundations/ColorsStory/index.tsx | 119 +++++++++++++----- .../ResponsiveExampleStory/index.module.scss | 38 ++++++ .../ResponsiveExampleStory/index.tsx | 31 +++++ .../SpacingStory/index.module.scss | 32 +++++ .../foundations/SpacingStory/index.tsx | 22 ++++ src/stories/foundations/index.stories.tsx | 6 +- tsconfig.json | 2 +- 21 files changed, 386 insertions(+), 57 deletions(-) rename src/index.d.ts => index.d.ts (100%) create mode 100644 src/foundations/colors.module.scss create mode 100644 src/foundations/index.module.scss create mode 100644 src/foundations/spacing.module.scss create mode 100644 src/index.module.scss create mode 100644 src/index.ts create mode 100644 src/stories/foundations/ResponsiveExampleStory/index.module.scss create mode 100644 src/stories/foundations/ResponsiveExampleStory/index.tsx create mode 100644 src/stories/foundations/SpacingStory/index.module.scss create mode 100644 src/stories/foundations/SpacingStory/index.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index 8d92b03..4ce78d6 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,7 @@ +import { resolve } from "node:path"; import type { StorybookConfig } from "@storybook/react-vite"; import { mergeConfig } from "vite"; +import tsconfigPaths from "vite-tsconfig-paths"; const config: StorybookConfig = { addons: [ @@ -12,6 +14,12 @@ const config: StorybookConfig = { viteFinal: (config) => mergeConfig(config, { css: { modules: { localsConvention: "camelCase" } }, + plugins: [tsconfigPaths()], + resolve: { + alias: { + "@": resolve(__dirname, "../src"), + }, + }, }), }; diff --git a/biome.json b/biome.json index 08b4172..dbae60e 100644 --- a/biome.json +++ b/biome.json @@ -13,6 +13,9 @@ "a11y": { "useButtonType": "off" }, + "correctness": { + "noNodejsModules": "off" + }, "style": { "noDefaultExport": "off" } diff --git a/src/index.d.ts b/index.d.ts similarity index 100% rename from src/index.d.ts rename to index.d.ts diff --git a/package-lock.json b/package-lock.json index ce84f58..77ec946 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,8 @@ "classnames": "^2.5.1", "prop-types": "^15.8.1", "sass": "^1.77.8", - "storybook": "^8.2.5" + "storybook": "^8.2.5", + "vite-tsconfig-paths": "^5.0.1" } }, "node_modules/@adobe/css-tools": { @@ -5595,6 +5596,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globrex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", + "dev": true + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -8388,6 +8395,26 @@ "node": ">=6.10" } }, + "node_modules/tsconfck": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.1.tgz", + "integrity": "sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==", + "dev": true, + "bin": { + "tsconfck": "bin/tsconfck.js" + }, + "engines": { + "node": "^18 || >=20" + }, + "peerDependencies": { + "typescript": "^5.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/tsconfig-paths": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz", @@ -8758,6 +8785,25 @@ } } }, + "node_modules/vite-tsconfig-paths": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.0.1.tgz", + "integrity": "sha512-yqwv+LstU7NwPeNqajZzLEBVpUFU6Dugtb2P84FXuvaoYA+/70l9MHE+GYfYAycVyPSDYZ7mjOFuYBRqlEpTig==", + "dev": true, + "dependencies": { + "debug": "^4.1.1", + "globrex": "^0.1.2", + "tsconfck": "^3.0.3" + }, + "peerDependencies": { + "vite": "*" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, "node_modules/walk-up-path": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-3.0.1.tgz", diff --git a/package.json b/package.json index 51f05ff..627e057 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "classnames": "^2.5.1", "prop-types": "^15.8.1", "sass": "^1.77.8", - "storybook": "^8.2.5" + "storybook": "^8.2.5", + "vite-tsconfig-paths": "^5.0.1" } } diff --git a/src/foundations/colors.module.scss b/src/foundations/colors.module.scss new file mode 100644 index 0000000..b2e9cc6 --- /dev/null +++ b/src/foundations/colors.module.scss @@ -0,0 +1,47 @@ +$white: #ffffff; +$grey-1: #333333; +$grey-2: #8f8f8f; +$grey-3: #cccccc; +$grey-4: #f4f4f4; +$yellow-1: #ffde00; +$yellow-2: #ffed73; +$yellow-3: #fff5b3; +$yellow-4: #fffad9; +$red-1: #ff4444; +$red-2: #ff9898; +$red-3: #ffc7c7; +$red-4: #ffe3e3; +$sky-1: #0099CC; +$sky-2: #73C7E3; +$sky-3: #B3E0F0; +$sky-4: #D9F0F7; +$blue-1: #2D69AA; +$blue-2: #8CADD0; +$blue-3: #C0D2E6; +$blue-4: #E0E9F1; +$petrol-1: #2fa9b4; +$petrol-2: #8dd0d6; +$petrol-3: #c1e5e9; +$petrol-4: #e0f2f4; +$mint-1: #21cdab; +$mint-2: #8ee4d1; +$mint-3: #c2f0e6; +$mint-4: #e0f8f2; +$green-1: #24a779; +$green-2: #87cfb5; +$green-3: #bde5d7; +$green-4: #def2eb; +$cyprus-2: #84a2a5; +$cyprus-3: #bcccce; +$olive-2: #b4c3b8; +$olive-3: #D6DED8; +$almond-2: #eee6e3; +$almond-3: #f6f1f0; +$purple-2: #aeaed2; +$purple-3: #d1d1e6; +$redpurple-2: #d59cd3; +$redpurple-3: #e8c9e7; +$rustyred-2: #d06f82; +$rustyred-3: #e8b7c0; +$coral-2: #ee7766; +$coral-3: #f9ccc6 diff --git a/src/foundations/index.module.scss b/src/foundations/index.module.scss new file mode 100644 index 0000000..2d6e55b --- /dev/null +++ b/src/foundations/index.module.scss @@ -0,0 +1,2 @@ +@import "./colors.module.scss"; +@import "./spacing.module.scss"; diff --git a/src/foundations/spacing.module.scss b/src/foundations/spacing.module.scss new file mode 100644 index 0000000..7b766ad --- /dev/null +++ b/src/foundations/spacing.module.scss @@ -0,0 +1,19 @@ +$space-4: 4px; +$space-8: 8px; +$space-16: 16px; +$space-24: 24px; +$space-32: 32px; +$space-40: 40px; +$space-48: 48px; +$space-64: 64px; + +:export { + space4: $space-4; + space8: $space-8; + space16: $space-16; + space24: $space-24; + space32: $space-32; + space40: $space-40; + space48: $space-48; + space64: $space-64; +} diff --git a/src/index.module.scss b/src/index.module.scss new file mode 100644 index 0000000..a0674cb --- /dev/null +++ b/src/index.module.scss @@ -0,0 +1 @@ +@import "./foundations/index.module.scss"; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..e980ab7 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,14 @@ +import styles from "./index.module.scss"; + +type Styles = { + space4: "4px"; + space8: "8px"; + space16: "16px"; + space24: "24px"; + space32: "32px"; + space40: "40px"; + space48: "48px"; + space64: "64px"; +}; + +export default styles as Styles; diff --git a/src/stories/foundations/BreakpointsStory/index.module.scss b/src/stories/foundations/BreakpointsStory/index.module.scss index 2e896e6..26fc0a2 100644 --- a/src/stories/foundations/BreakpointsStory/index.module.scss +++ b/src/stories/foundations/BreakpointsStory/index.module.scss @@ -1,3 +1,5 @@ +@import "@/index.module.scss"; + .wrapper { display: flex; flex-direction: column; @@ -14,7 +16,7 @@ .breakpoint { width: 100%; border: 0; - background-color: red; + background-color: $red-1; cursor: pointer; } @@ -26,30 +28,30 @@ max-width: 767px; @media (max-width: 767px) { - background-color: green; + background-color: $green-1; } } .breakpoint-s { @media (min-width: 768px) { - background-color: green; + background-color: $green-1; } } .breakpoint-m { @media (min-width: 1024px) { - background-color: green; + background-color: $green-1; } } .breakpoint-l { @media (min-width: 1200px) { - background-color: green; + background-color: $green-1; } } .breakpoint-xl { @media (min-width: 1400px) { - background-color: green; + background-color: $green-1; } } diff --git a/src/stories/foundations/BreakpointsStory/index.tsx b/src/stories/foundations/BreakpointsStory/index.tsx index 6ec7388..30d1b88 100644 --- a/src/stories/foundations/BreakpointsStory/index.tsx +++ b/src/stories/foundations/BreakpointsStory/index.tsx @@ -1,44 +1,44 @@ import classNames from "classnames"; -import classes from "./index.module.scss"; +import styles from "./index.module.scss"; const writeMediaQueryToClipboard = (breakpoint: string) => navigator.clipboard.writeText(`@include mediaQuery(${breakpoint}) {}`); const BreakpointsStory = () => ( -
-
+
+
Breakpoints (click to copy a media query)
); diff --git a/src/stories/foundations/ColorsStory/ColorTile.tsx b/src/stories/foundations/ColorsStory/ColorTile.tsx index a59b9b3..6febb1f 100644 --- a/src/stories/foundations/ColorsStory/ColorTile.tsx +++ b/src/stories/foundations/ColorsStory/ColorTile.tsx @@ -1,4 +1,4 @@ -import classes from "./ColorTile.module.scss"; +import styles from "./ColorTile.module.scss"; type Props = React.HTMLAttributes & { color?: string; @@ -7,7 +7,7 @@ type Props = React.HTMLAttributes & { const ColorTile = ({ color, name, ...props }: Props) => ( + ))} +
+); + +export default ColorsStory; diff --git a/src/stories/foundations/index.stories.tsx b/src/stories/foundations/index.stories.tsx index 3f7201a..f6ae8fb 100644 --- a/src/stories/foundations/index.stories.tsx +++ b/src/stories/foundations/index.stories.tsx @@ -1,13 +1,17 @@ import type { Meta, StoryObj } from "@storybook/react"; import BreakpointsStory from "./BreakpointsStory"; import ColorsStory from "./ColorsStory"; +import ResponsiveExampleStory from "./ResponsiveExampleStory"; +import SpacingStory from "./SpacingStory"; const Breakpoints: StoryObj = { render: BreakpointsStory }; const Colors: StoryObj = { render: ColorsStory }; +const ResponsiveExample: StoryObj = { render: ResponsiveExampleStory }; +const Spacing: StoryObj = { render: SpacingStory }; const meta: Meta = { title: "Foundations", }; export default meta; -export { Breakpoints, Colors }; +export { Breakpoints, Colors, ResponsiveExample, Spacing }; diff --git a/tsconfig.json b/tsconfig.json index 7e97d2b..6a29ef8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,5 +19,5 @@ "@/*": ["./*"], } }, - "include": ["src"] + "include": ["src", "index.d.ts"] }