@hlf-fe/pulmo-ui 1.0.0

package/dist/styles/theme.js

@@ -0,0 +1,84 @@
+import { rem } from "./units";
+export const BREAKPOINT_VALUES = {
+    XS: 360,
+    S: 576,
+    S_ALT: 676,
+    M: 768,
+    L: 1024,
+    XL: 1200,
+    XXL: 1440,
+};
+export const VARIABLES = {
+    siteWidthS: rem(BREAKPOINT_VALUES.S_ALT),
+    siteWidth: rem(BREAKPOINT_VALUES.L),
+    siteWidthXL: rem(BREAKPOINT_VALUES.XL),
+    siteMaxWidth: rem(1920),
+    mobileNavHeight: 56,
+};
+export const THEME_SPACING = {
+    sm: rem(16),
+    md: rem(24),
+    lg: rem(32),
+    xl: rem(40),
+};
+export const SPACING = {
+    spacingXXS: rem(6),
+    spacingXS: rem(8),
+    spacingS: rem(12),
+    spacingM: rem(16),
+    spacingL: rem(32),
+    spacingXL: rem(40),
+    spacingXXL: rem(48),
+};
+export const FONTS = {
+    valueRegular: '"ValueRegular", Arial, sans-serif',
+    valueMedium: '"ValueMedium", Arial, sans-serif',
+    valueBold: '"ValueBold", Arial, sans-serif',
+};
+export const COLORS = {
+    skyBlue: "#d1e4ed",
+    black: "#000",
+    blackLight: "#333333",
+    blackGray: "#858585",
+    blueLight: "#d1e3ed",
+    blueLightGray: "#dfeff7",
+    blue: "#4195be",
+    blueNavy: "#0C4670",
+    blackCoral: "#5A5F61",
+    cadetBlue: "#A4B6BF",
+    grayLight: "#f2f2f2",
+    gray: "#d3d3d3",
+    grayDark: "#8e8e8e",
+    grayTransparent: "rgba(51,51,51,.15)",
+    grayPale: "#dddddd",
+    green: "#59b290",
+    white: "#fff",
+    offWhite: "#fafafa",
+    redLight: "#ff6e6e",
+    red: "#ea2337",
+    redSecondary: "#ec1b2e",
+    redDark: "#be3639",
+    redHover: "#c11021",
+    redClear: "#d81125",
+    redWCAG: "#E71328",
+    pink: "#fbdfd9",
+    lightBlue: "#e4eef4",
+    mediumBlue: "#76B2CE",
+    mint: "#d6ebe3",
+    lilac: "#F5ECF5",
+    lavender: "#e6d1e5",
+    purple: "#9B4391",
+    smokeGray: "#f7f7f7",
+    yellowLight: "#ffecc4",
+    yellow: "#ffe5b1",
+    yellowDark: "#ffd379",
+};
+export const FONT_SIZES = {};
+export const THEME_SETTINGS = {
+    ...BREAKPOINT_VALUES,
+    ...VARIABLES,
+    ...FONTS,
+    ...COLORS,
+    ...FONT_SIZES,
+    ...SPACING,
+};

package/dist/styles/types.d.ts

@@ -0,0 +1,3 @@
+export type Arrow = {
+    color?: string;
+};

package/dist/styles/types.js

@@ -0,0 +1 @@
+export {};

package/dist/styles/units.d.ts

@@ -0,0 +1,3 @@
+export declare const relUnit: (absoluteUnit: number) => number;
+export declare const rem: (absoluteUnit: number) => string;
+export declare const em: (absoluteUnit: number) => string;

package/dist/styles/units.js

@@ -0,0 +1,3 @@
+export const relUnit = (absoluteUnit) => absoluteUnit / 16;
+export const rem = (absoluteUnit) => `${relUnit(absoluteUnit)}rem`;
+export const em = (absoluteUnit) => `${relUnit(absoluteUnit)}em`;

package/dist/styles/withDefaultTheme.d.ts

@@ -0,0 +1 @@
+export declare const withDefaultTheme: (Component: React.FC<any>) => (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/styles/withDefaultTheme.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { THEME_SETTINGS } from "./theme";
+import { ThemeContext, ThemeProvider } from "styled-components";
+export const withDefaultTheme = (Component) => {
+    return (props) => {
+        const theme = useContext(ThemeContext);
+        if (theme)
+            return _jsx(Component, Object.assign({}, props));
+        return (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, Object.assign({}, props)) }));
+    };
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@hlf-fe/pulmo-ui",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "npm-run-all --parallel storybook watch",
+    "build": "tsc -b tsconfig.app.json",
+    "watch": "tsc -b tsconfig.app.json --watch",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "gatsby": "^5.14.3",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.18"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "gatsby": "^5.14.3",
+    "styled-components": "^6.1.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/js": "^9.25.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@types/node": "^22.15.17",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.3",
+    "@vitest/coverage-v8": "^3.1.3",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.0.0",
+    "playwright": "^1.52.0",
+    "storybook": "^8.6.12",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}