@grantbii/design-system 1.0.31 → 1.0.33

package/core/atoms/Badge.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Colors, Icons } from "../../index";
+import { Colors, Icons } from "../foundations";
 const Badge = ({ icon, text, onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [icon ? icon : _jsx(_Fragment, {}), _jsx(BadgeText, { "$widthPixels": textWidthPixels, children: text }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
 export default Badge;
 const BaseBadge = styled.div `

package/core/atoms/Button.d.ts

@@ -0,0 +1,12 @@
+import { JSX, MouseEventHandler } from "react";
+type ButtonProps = {
+    text: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    type?: "button" | "submit" | "reset";
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    backgroundColor?: string;
+    color?: string;
+};
+declare const Button: ({ text, onClick, leftIcon, rightIcon, backgroundColor, color, type, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/core/atoms/Button.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Colors } from "../foundations";
+const Button = ({ text, onClick, leftIcon, rightIcon, backgroundColor, color, type = "button", }) => (_jsx("button", { type: type, onClick: onClick, children: _jsxs(BaseButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }) }));
+export default Button;
+const BaseButton = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  padding: 10px 16px;
+  border-radius: 4px;
+
+  font-weight: 500;
+  font-size: 14px;
+
+  color: ${({ $color = Colors.typography.whiteHigh }) => $color};
+  background-color: ${({ $backgroundColor = Colors.main.grantbiiBlue }) => $backgroundColor};
+`;

package/core/atoms/LinkButton.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import styled from "styled-components";
-import { Colors } from "../../index";
+import { Colors } from "../foundations";
 const LinkButton = ({ text, href, target, leftIcon, rightIcon, backgroundColor, color, }) => (_jsx(Link, { href: href, target: target, children: _jsxs(BaseLinkButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }) }));
 export default LinkButton;
 const BaseLinkButton = styled.div `

package/core/atoms/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Badge } from "./Badge";
+export { default as BrandLogo } from "./BrandLogo";
+export { default as Button } from "./Button";
+export { default as LinkButton } from "./LinkButton";

package/core/atoms/index.js

@@ -0,0 +1,4 @@
+export { default as Badge } from "./Badge";
+export { default as BrandLogo } from "./BrandLogo";
+export { default as Button } from "./Button";
+export { default as LinkButton } from "./LinkButton";

package/core/foundations/breakpoints.d.ts

@@ -0,0 +1 @@
+export declare const LAPTOP_WIDTH_PIXELS = 1024;

package/core/foundations/breakpoints.js

@@ -0,0 +1 @@
+export const LAPTOP_WIDTH_PIXELS = 1024;

package/core/foundations/index.d.ts

@@ -0,0 +1,4 @@
+export * as Icons from "@phosphor-icons/react";
+export * as Flags from "country-flag-icons/react/3x2";
+export * as Breakpoints from "./breakpoints";
+export * as Colors from "./colors";

package/core/foundations/index.js

@@ -0,0 +1,4 @@
+export * as Icons from "@phosphor-icons/react";
+export * as Flags from "country-flag-icons/react/3x2";
+export * as Breakpoints from "./breakpoints";
+export * as Colors from "./colors";

package/core/global/GlobalStyle.js

@@ -1,7 +1,8 @@
 "use client";
 import { createGlobalStyle } from "styled-components";
 import "../../public/fonts/satoshi/css/satoshi.css";
-import * as Colors from "../foundation/colors";
+import { LAPTOP_WIDTH_PIXELS } from "../foundations/breakpoints";
+import * as Colors from "../foundations/colors";
 const GlobalStyle = createGlobalStyle `
   html,
   body {
@@ -61,5 +62,13 @@ const GlobalStyle = createGlobalStyle `
     -moz-appearance: textfield;
     appearance: textfield;
   }
+
+  @media (width < ${LAPTOP_WIDTH_PIXELS}px) {
+    font-size: 14px;
+  }
+
+  @media (width >= ${LAPTOP_WIDTH_PIXELS}px) {
+    font-size: 16px;
+  }
 `;
 export default GlobalStyle;

package/core/integrations/index.d.ts

@@ -0,0 +1 @@
+export { default as StyledComponentsRegistry } from "./StyledComponentsRegistry";

package/core/integrations/index.js

@@ -0,0 +1 @@
+export { default as StyledComponentsRegistry } from "./StyledComponentsRegistry";

package/index.d.ts

@@ -1,8 +1,4 @@
-export * as Icons from "@phosphor-icons/react";
-export * as Flags from "country-flag-icons/react/3x2";
-export { default as BrandLogo } from "./core/atoms/BrandLogo";
-export { default as LinkButton } from "./core/atoms/LinkButton";
-export * as Colors from "./core/foundation/colors";
+export * from "./core/atoms";
+export * from "./core/foundations";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
-export { default as StyledComponentsRegistry } from "./core/integrations/StyledComponentsRegistry";
-export { default as Badge } from "./core/atoms/Badge";
+export * from "./core/integrations";

package/index.js

@@ -1,8 +1,4 @@
-export * as Icons from "@phosphor-icons/react";
-export * as Flags from "country-flag-icons/react/3x2";
-export { default as BrandLogo } from "./core/atoms/BrandLogo";
-export { default as LinkButton } from "./core/atoms/LinkButton";
-export * as Colors from "./core/foundation/colors";
+export * from "./core/atoms";
+export * from "./core/foundations";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
-export { default as StyledComponentsRegistry } from "./core/integrations/StyledComponentsRegistry";
-export { default as Badge } from "./core/atoms/Badge";
+export * from "./core/integrations";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",
-    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.32.0",
     "@next/eslint-plugin-next": "^15.4.2",
     "@storybook/addon-a11y": "^9.0.17",
     "@storybook/addon-docs": "^9.0.17",
@@ -39,14 +39,14 @@
     "@types/react-dom": "^19",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.30.1",
-    "eslint-config-next": "15.3.5",
-    "eslint-plugin-storybook": "^9.0.17",
+    "eslint": "^9.32.0",
+    "eslint-config-next": "15.4.5",
+    "eslint-plugin-storybook": "^9.1.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",
     "playwright": "^1.54.1",
     "prettier": "^3.6.2",
-    "storybook": "^9.0.17",
+    "storybook": "^9.1.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
   },

package/stories/atoms/Badge.stories.d.ts

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const TextOnly: Story;
 export declare const Icon: Story;
 export declare const Closeable: Story;
 export declare const LongText: Story;

package/stories/atoms/Badge.stories.js

@@ -9,38 +9,38 @@ const meta = {
     },
 };
 export default meta;
-const DEFAULT_TEXT = "Badge";
-const LONG_TEXT = "the quick brown fox jumps over the lazy dog";
-const ICON = _jsx(Icons.SmileyXEyesIcon, { size: 20 });
-const ON_CLICK_CLOSE = () => alert("You have closed the badge!");
-export const Default = {
+const defaultText = "Badge";
+const longText = "the quick brown fox jumps over the lazy dog";
+const icon = _jsx(Icons.SmileyXEyesIcon, { size: 20 });
+const onClickClose = () => alert("You have closed the badge.");
+export const TextOnly = {
     args: {
-        text: DEFAULT_TEXT,
+        text: defaultText,
     },
 };
 export const Icon = {
     args: {
-        icon: ICON,
-        text: DEFAULT_TEXT,
+        icon: icon,
+        text: defaultText,
     },
 };
 export const Closeable = {
     args: {
-        text: DEFAULT_TEXT,
-        onClickClose: ON_CLICK_CLOSE,
+        text: defaultText,
+        onClickClose: onClickClose,
     },
 };
 export const LongText = {
     args: {
-        text: LONG_TEXT,
+        text: longText,
         textWidthPixels: 160,
     },
 };
 export const Everything = {
     args: {
-        icon: ICON,
-        text: LONG_TEXT,
+        icon: icon,
+        text: longText,
         textWidthPixels: 160,
-        onClickClose: ON_CLICK_CLOSE,
+        onClickClose: onClickClose,
     },
 };

package/stories/atoms/Button.stories.d.ts

@@ -0,0 +1,11 @@
+import { Button } from "@/.";
+import type { StoryObj } from "@storybook/nextjs-vite";
+import { Meta } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TextOnly: Story;
+export declare const LeftIcon: Story;
+export declare const RightIcon: Story;
+export declare const BothIcons: Story;
+export declare const Wide: Story;

package/stories/atoms/Button.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Icons } from "@/.";
+const meta = {
+    title: "Atoms/Button",
+    component: Button,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const baseArgs = {
+    text: "Button",
+    onClick: () => alert("You have clicked on the button."),
+};
+export const TextOnly = {
+    args: baseArgs,
+};
+export const LeftIcon = {
+    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.PlusIcon, { size: 14 }) }),
+};
+export const RightIcon = {
+    args: Object.assign(Object.assign({}, baseArgs), { rightIcon: _jsx(Icons.MinusIcon, { size: 14 }) }),
+};
+export const BothIcons = {
+    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }), rightIcon: _jsx(Icons.SmileyMeltingIcon, { size: 20 }) }),
+};
+export const Wide = {
+    args: Object.assign({}, baseArgs),
+};

package/stories/atoms/LinkButton.stories.d.ts

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof LinkButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const TextOnly: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
 export declare const BothIcons: Story;

package/stories/atoms/LinkButton.stories.js

@@ -9,35 +9,20 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {
-    args: {
-        text: "Link",
-        href: "https://grantbii.com",
-        target: "_blank",
-    },
+const baseArgs = {
+    text: "Link",
+    href: "https://grantbii.com",
+    target: "_blank",
+};
+export const TextOnly = {
+    args: baseArgs,
 };
 export const LeftIcon = {
-    args: {
-        text: "Link",
-        href: "https://grantbii.com",
-        target: "_blank",
-        leftIcon: _jsx(Icons.PlusIcon, { size: 14 }),
-    },
+    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.PlusIcon, { size: 14 }) }),
 };
 export const RightIcon = {
-    args: {
-        text: "Link",
-        href: "https://grantbii.com",
-        target: "_blank",
-        rightIcon: _jsx(Icons.MinusIcon, { size: 14 }),
-    },
+    args: Object.assign(Object.assign({}, baseArgs), { rightIcon: _jsx(Icons.MinusIcon, { size: 14 }) }),
 };
 export const BothIcons = {
-    args: {
-        text: "Link",
-        href: "https://grantbii.com",
-        target: "_blank",
-        leftIcon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }),
-        rightIcon: _jsx(Icons.SmileyMeltingIcon, { size: 20 }),
-    },
+    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }), rightIcon: _jsx(Icons.SmileyMeltingIcon, { size: 20 }) }),
 };