sesame-components-testing 1.0.1 → 2.0.1

package/package.json

@@ -1,32 +1,89 @@
 {
   "name": "sesame-components-testing",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "description": "A reusable npm component package.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc",
+    "build": "vite build",
     "test": "echo \"No tests yet\""
   },
   "author": "",
   "license": "MIT",
-  "files": [
-    "dist"
-  ],
+  "main": "./dist/sesame-components.cjs.js",
+  "module": "./dist/sesame-components.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/sesame-components.es.js",
+      "require": "./dist/sesame-components.cjs.js"
+    }
+  },
   "keywords": [
     "component",
     "npm",
     "typescript"
   ],
-  "devDependencies": {
-    "@types/react": "^19.2.13",
-    "@types/react-dom": "^19.2.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "typescript": "^5.9.3"
-  },
   "dependencies": {
+    "@floating-ui/react": "^0.27.15",
+    "@fontsource/inter": "^5.2.6"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1"
+    "@emotion/styled": "^11.14.1",
+    "@storybook/addon-a11y": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-themes": "^9.1.5",
+    "@storybook/addon-vitest": "^9.1.5",
+    "@storybook/react": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/eslint-plugin": "^1.3.6",
+    "@vitest/ui": "^3.2.4",
+    "cypress": "^14.5.3",
+    "esbuild": "^0.25.9",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^9.1.1",
+    "husky": "^9.1.7",
+    "jsdom": "^26.1.0",
+    "mkdirp": "^3.0.1",
+    "playwright": "^1.54.2",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^9.1.1",
+    "svgo": "^4.0.0",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.14.0",
+    "@emotion/styled": ">=11.14.1",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   }
 }

package/{dist/Button/Button.styles.js → src/Button/Button.styles.ts}

@@ -1,13 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledButton = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const variants = ({ theme, $variant, $selected, }) => ({
-    primary: (0, react_1.css) `
+import { type SerializedStyles, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import type { Theme } from '../theme';
+// import { activeSelector } from '../../utils/styleHelpers';
+import type { ButtonSize, ButtonVariant } from './Button';
+
+const variants = ({
+  theme,
+  $variant,
+  $selected,
+}: {
+  theme: Theme;
+  $variant: ButtonVariant;
+  $selected?: boolean;
+}): SerializedStyles =>
+  ({
+    primary: css`
       border-color: ${theme.colors.border.cta.primary.default};
       background: ${theme.colors.fill.cta.primary.default};
 
@@ -21,12 +28,12 @@ const variants = ({ theme, $variant, $selected, }) => ({
         background: ${theme.colors.fill.cta.primary.disabled};
       }
     `,
-    secondary: (0, react_1.css) `
+    secondary: css`
       border-color: ${theme.colors.border.cta.secondary.default};
       background: ${theme.colors.fill.cta.secondary.default};
 
       ${$selected
-        ? (0, react_1.css) `
+        ? css`
             background: ${theme.colors.fill.surface.highEmphasis};
 
             &,
@@ -34,7 +41,7 @@ const variants = ({ theme, $variant, $selected, }) => ({
               color: ${theme.colors.fill.icon.inverse.highEmphasis};
             }
           `
-        : (0, react_1.css) `
+        : css`
             &:active {
               border-color: ${theme.colors.border.cta.secondary.pressed};
               background: ${theme.colors.fill.cta.secondary.pressed};
@@ -46,12 +53,12 @@ const variants = ({ theme, $variant, $selected, }) => ({
         background: ${theme.colors.fill.cta.secondary.disabled};
       }
     `,
-    tertiary: (0, react_1.css) `
+    tertiary: css`
       border-color: ${theme.colors.border.cta.tertiary.default};
       background: ${theme.colors.fill.cta.tertiary.default};
 
       ${$selected
-        ? (0, react_1.css) `
+        ? css`
             background: ${theme.colors.fill.surface.highEmphasis};
 
             &,
@@ -59,7 +66,7 @@ const variants = ({ theme, $variant, $selected, }) => ({
               color: ${theme.colors.fill.icon.inverse.highEmphasis};
             }
           `
-        : (0, react_1.css) `
+        : css`
             &:active {
               border-color: ${theme.colors.border.cta.tertiary.pressed};
               background: ${theme.colors.fill.cta.tertiary.pressed};
@@ -70,10 +77,10 @@ const variants = ({ theme, $variant, $selected, }) => ({
         background: ${theme.colors.fill.cta.tertiary.disabled};
       }
     `,
-    ghost: (0, react_1.css) `
+    ghost: css`
       background: ${theme.colors.fill.cta.ghost.default};
     `,
-    error: (0, react_1.css) `
+    error: css`
       border-color: ${theme.colors.border.cta.critical.default};
       background: ${theme.colors.fill.cta.critical.default};
 
@@ -92,7 +99,7 @@ const variants = ({ theme, $variant, $selected, }) => ({
         }
       }
     `,
-    success: (0, react_1.css) `
+    success: css`
       border-color: ${theme.colors.border.cta.success.default};
       background: ${theme.colors.fill.cta.success.default};
 
@@ -111,7 +118,7 @@ const variants = ({ theme, $variant, $selected, }) => ({
         }
       }
     `,
-    keypad: (0, react_1.css) `
+    keypad: css`
       border-color: ${theme.colors.border.cta.secondary.default};
       background: ${theme.colors.fill.cta.secondary.default};
       border-radius: ${theme.radii.s};
@@ -129,29 +136,45 @@ const variants = ({ theme, $variant, $selected, }) => ({
         background: ${theme.colors.fill.cta.secondary.disabled};
       }
     `,
-})[$variant];
-const sizes = ({ theme, $variant, $size, }) => {
-    if ($variant === 'keypad') {
-        return (0, react_1.css) `
+  })[$variant];
+
+const sizes = ({
+  theme,
+  $variant,
+  $size,
+}: {
+  theme: Theme;
+  $variant: ButtonVariant;
+  $size: ButtonSize;
+}): SerializedStyles => {
+  if ($variant === 'keypad') {
+    return css`
       height: ${theme.height.button.posButton.l.fixed};
       min-height: ${theme.height.button.posButton.l.fixed};
       max-height: ${theme.height.button.posButton.l.fixed};
       width: 100%;
     `;
-    }
-    const buttonHeight = theme.height.button.posButton[$size];
-    const buttonWidth = theme.width.button.posButton[$size];
-    return (0, react_1.css) `
+  }
+
+  const buttonHeight = theme.height.button.posButton[$size];
+  const buttonWidth = theme.width.button.posButton[$size as 'l'];
+  return css`
     height: ${buttonHeight.fixed};
     min-height: ${buttonHeight.min};
     max-height: ${buttonHeight.max};
     ${buttonWidth &&
-        (0, react_1.css) `
+    css`
       min-width: ${buttonWidth.min};
     `}
   `;
 };
-exports.StyledButton = styled_1.default.button `
+
+export const StyledButton = styled.button<{
+  $variant: ButtonVariant;
+  $size: ButtonSize;
+  $selected?: boolean;
+  $stretch?: boolean;
+}>`
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/Button/Button.tsx

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import type { Theme } from '../theme';
+import { FlexCenter } from '../Common/FlexCenter';
+import { StyledButton } from './Button.styles';
+import React from 'react';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'error' | 'success' | 'keypad';
+
+export type ButtonSize = keyof Theme['height']['button']['posButton'];
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  selected?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  stretch?: boolean;
+}
+
+export const Button: FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'm',
+  selected,
+  children,
+  leftIcon,
+  rightIcon,
+  stretch = false,
+  type = 'button',
+  ...rest
+}) => (
+  <StyledButton type={type} $variant={variant} $size={size} $selected={selected} $stretch={stretch} {...rest}>
+    {leftIcon && <FlexCenter>{leftIcon}</FlexCenter>}
+    <FlexCenter>{children}</FlexCenter>
+    {rightIcon && <FlexCenter>{rightIcon}</FlexCenter>}
+  </StyledButton>
+);

package/src/Common/FlexCenter.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const FlexCenter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

package/src/SesameComponent.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+export interface SesameComponentProps {
+  message?: string;
+}
+
+const StyledDiv = styled.div`
+    background-color: red;
+    font-weight: bold;
+    font-size: 33px;
+`;
+
+export const SesameComponent: React.FC<SesameComponentProps> = ({ message = "Hello, Sesame!" }) => {
+  return <StyledDiv>{message}</StyledDiv>;
+};

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,23 @@
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { type FC, type ReactNode, useMemo } from 'react';
+import { getSizedTheme } from './sizes/getSizedTheme';
+import type { Theme } from './types';
+import { useBreakpointSize } from './useBreakpointSize';
+import React from 'react';
+
+export interface ThemeProviderProps {
+  theme: Theme;
+  children: ReactNode;
+}
+
+const useSizedTheme = (theme: Theme): Theme => {
+  const size = useBreakpointSize();
+  return useMemo(() => {
+    return getSizedTheme(theme, size);
+  }, [size, theme]);
+};
+
+export const ThemeProvider: FC<ThemeProviderProps> = ({ theme, children }) => {
+  const sizedTheme = useSizedTheme(theme);
+  return <EmotionThemeProvider theme={sizedTheme}>{children}</EmotionThemeProvider>;
+};

package/src/theme/colors/darkColors.ts

@@ -0,0 +1,223 @@
+import type { Colors } from '../types';
+import { primitiveColors } from './primitiveColors';
+
+export const darkColors: Colors = {
+  fill: {
+    icon: {
+      common: {
+        highEmphasis: primitiveColors.grayscale.neutral['02'],
+        mediumEmphasis: primitiveColors.grayscale.neutral['03'],
+        active: primitiveColors.solids.gold['500'],
+        disabled: 'rgba(238, 232, 224, 0.6)',
+      },
+      inverse: {
+        highEmphasis: primitiveColors.grayscale.neutral['08'],
+        mediumEmphasis: primitiveColors.grayscale.neutral['06'],
+        disabled: primitiveColors.transparencies.black['60%'],
+        error: primitiveColors.solids.red['600'],
+      },
+      constantDark: {
+        highEmphasis: primitiveColors.grayscale.neutral['08'],
+        mediumEmphasis: primitiveColors.grayscale.neutral['06'],
+        disabled: primitiveColors.transparencies.black['60%'],
+      },
+      constantLight: {
+        highEmphasis: primitiveColors.grayscale.neutral['02'],
+        mediumEmphasis: primitiveColors.grayscale.neutral['03'],
+        disabled: 'rgba(252, 250, 247, 0.8)',
+      },
+      constantColor: {
+        purple: primitiveColors.solids.purple['400'],
+        red: primitiveColors.solids.red['500'],
+        yellow: primitiveColors.solids.yellow['500'],
+        green: primitiveColors.solids.greenDark['600'],
+        brown: primitiveColors.solids.brownWarm['600'],
+        orange: primitiveColors.solids.orange['500'],
+        lightBlue: primitiveColors.solids.blue['100'],
+        lightGreen: primitiveColors.solids.yellowGreen['300'],
+        lightYellow: primitiveColors.solids.gold['400'],
+        lightPink: primitiveColors.solids.fuchsia['100'],
+        lightGrey: primitiveColors.grayscale.neutral['02'],
+      },
+      notification: {
+        success: primitiveColors.solids.green['200'],
+        info: primitiveColors.solids.cyan['200'],
+        error: primitiveColors.solids.red['200'],
+        warning: primitiveColors.solids.orange['200'],
+      },
+      link: {
+        default: primitiveColors.solids.blue['300'],
+        hover: primitiveColors.solids.blue['200'],
+        pressed: primitiveColors.solids.blue['500'],
+      },
+    },
+    cta: {
+      primary: {
+        default: primitiveColors.solids.gold['500'],
+        pressed: primitiveColors.solids.gold['600'],
+        disabled: 'rgba(214, 155, 0, 0.4)',
+      },
+      secondary: {
+        default: primitiveColors.grayscale.neutral['09'],
+        pressed: primitiveColors.grayscale.neutral['10'],
+        disabled: 'rgba(33, 29, 23, 0.8)',
+      },
+      tertiary: {
+        default: primitiveColors.grayscale.neutral['10'],
+        pressed: primitiveColors.grayscale.neutral['11'],
+        disabled: 'rgba(9, 9, 9, 0.9)',
+      },
+      ghost: {
+        default: primitiveColors.transparencies.white['0%'],
+        pressed: primitiveColors.grayscale.neutral['09'],
+      },
+      critical: {
+        default: primitiveColors.solids.red['500'],
+        pressed: primitiveColors.solids.red['700'],
+        disabled: 'rgba(219, 0, 7, 0.4)',
+      },
+      success: {
+        default: primitiveColors.solids.green['600'],
+      },
+    },
+    notification: {
+      general: 'rgba(238, 232, 224, 0.8)',
+      success: 'rgba(6, 143, 29, 0.8)',
+      info: 'rgba(27, 106, 136, 0.8)',
+      error: 'rgba(219, 0, 7, 0.8)',
+      warning: 'rgba(232, 114, 10, 0.8)',
+    },
+    surface: {
+      default: primitiveColors.grayscale.neutral['09'],
+      raised: primitiveColors.grayscale.neutral['08'],
+      sunken: primitiveColors.grayscale.neutral['10'],
+      disabled: 'rgba(33, 29, 23, 0.4)',
+      highEmphasis: primitiveColors.grayscale.neutral['02'],
+      overlay: 'rgba(33, 29, 23, 0.8)',
+      status: primitiveColors.solids.cyan['600'],
+      success: primitiveColors.solids.greenDark['600'],
+      critical: primitiveColors.solids.red['400'],
+      warning: primitiveColors.solids.gold['600'],
+      brand: {
+        gold: primitiveColors.solids.gold['500'],
+        red: primitiveColors.solids.red['500'],
+        gray: primitiveColors.grayscale.neutral['06'],
+      },
+      constant: {
+        dark: primitiveColors.grayscale.neutral['08'],
+        light: primitiveColors.grayscale.neutral['01'],
+      },
+      constantColor: {
+        blue: primitiveColors.solids.blueDark['400'],
+        red: primitiveColors.solids.red['600'],
+        purple: primitiveColors.solids.indigo['400'],
+        yellow: primitiveColors.solids.gold['600'],
+        green: primitiveColors.solids.yellowGreen['600'],
+        gold: primitiveColors.solids.gold['400'],
+      },
+    },
+  },
+  border: {
+    cta: {
+      primary: {
+        default: primitiveColors.solids.gold['400'],
+        pressed: primitiveColors.solids.gold['400'],
+        disabled: 'rgba(133, 96, 0, 0.4)',
+      },
+      secondary: {
+        default: primitiveColors.solids.grey['700'],
+        pressed: primitiveColors.grayscale.neutral['06'],
+        disabled: 'rgba(61, 61, 61, 0.8)',
+      },
+      tertiary: {
+        default: primitiveColors.solids.grey['600'],
+        pressed: primitiveColors.solids.grey['500'],
+        disabled: primitiveColors.solids.grey['700'],
+      },
+      critical: {
+        default: primitiveColors.solids.red['400'],
+        pressed: primitiveColors.solids.red['300'],
+        disabled: 'rgba(236, 49, 55, 0.4)',
+      },
+      success: {
+        default: primitiveColors.solids.greenDark['500'],
+      },
+    },
+    fields: {
+      default: primitiveColors.grayscale.neutral['05'],
+      active: primitiveColors.grayscale.neutral['04'],
+      filled: primitiveColors.grayscale.neutral['05'],
+      disabled: 'rgba(107, 98, 89, 0.5)',
+      error: primitiveColors.solids.red['500'],
+      success: primitiveColors.solids.green['200'],
+    },
+    elements: {
+      divider: {
+        highEmphasis: primitiveColors.grayscale.neutral['02'],
+        mediumEmphasis: primitiveColors.grayscale.neutral['07'],
+      },
+    },
+    states: {
+      focus: primitiveColors.grayscale.neutral['00'],
+      selected: primitiveColors.solids.gold['500'],
+      disabled: primitiveColors.grayscale.neutral['06'],
+    },
+    container: {
+      highEmphasis: primitiveColors.grayscale.neutral['02'],
+      mediumEmphasis: primitiveColors.solids.grey['700'],
+      lowEmphasis: primitiveColors.grayscale.neutral['08'],
+      inverseHigh: primitiveColors.grayscale.neutral['08'],
+      inverseMedium: primitiveColors.solids.tan['300'],
+      constantLight: primitiveColors.grayscale.neutral['02'],
+      constantDark: primitiveColors.grayscale.neutral['08'],
+      constantColor: {
+        blue: primitiveColors.solids.blueDark['500'],
+        purple: primitiveColors.solids.indigo['600'],
+        red: primitiveColors.solids.red['700'],
+        yellow: primitiveColors.solids.gold['700'],
+        green: primitiveColors.solids.yellowGreen['700'],
+        gold: primitiveColors.solids.gold['400'],
+      },
+    },
+    common: {
+      highEmphasis: primitiveColors.grayscale.neutral['04'],
+      mediumEmphasis: primitiveColors.grayscale.neutral['06'],
+    },
+  },
+  text: {
+    common: {
+      highContrast: primitiveColors.grayscale.neutral['00'],
+      highEmphasis: primitiveColors.grayscale.neutral['02'],
+      mediumEmphasis: primitiveColors.grayscale.neutral['03'],
+      disabled: 'rgba(238, 232, 224, 0.6)',
+      success: primitiveColors.solids.green['300'],
+      info: primitiveColors.solids.cyan['100'],
+      error: primitiveColors.solids.red['100'],
+      warning: primitiveColors.solids.orange['300'],
+    },
+    inverse: {
+      highContrast: primitiveColors.grayscale.neutral['11'],
+      highEmphasis: primitiveColors.grayscale.neutral['08'],
+      mediumEmphasis: primitiveColors.grayscale.neutral['07'],
+      disabled: 'rgba(13, 12, 12, 0.7)',
+    },
+    constantDark: {
+      highContrast: primitiveColors.grayscale.neutral['11'],
+      highEmphasis: primitiveColors.grayscale.neutral['08'],
+      mediumEmphasis: primitiveColors.grayscale.neutral['07'],
+      disabled: primitiveColors.transparencies.black['70%'],
+    },
+    constantLight: {
+      highContrast: primitiveColors.grayscale.neutral['00'],
+      highEmphasis: primitiveColors.grayscale.neutral['02'],
+      mediumEmphasis: primitiveColors.grayscale.neutral['03'],
+      disabled: 'rgba(252, 250, 247, 0.8)',
+    },
+    link: {
+      default: primitiveColors.solids.blue['300'],
+      hover: primitiveColors.solids.blue['200'],
+      pressed: primitiveColors.solids.blue['500'],
+      inactive: primitiveColors.grayscale.neutral['04'],
+    },
+  },
+};