@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Tooltip.tsx

@@ -0,0 +1,137 @@
+import React, {
+  ReactNode,
+  forwardRef,
+  useState,
+  useCallback,
+  Children,
+  isValidElement,
+  useEffect,
+  createContext,
+  useContext,
+} from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface TooltipProps {
+  className?: string;
+  delay?: number; // delay in ms before showing the tooltip
+  id?: string;    // id to reference tooltip-content via tooltip
+  children: ReactNode;
+}
+
+interface TooltipContextType {
+  id: string;
+}
+
+const TooltipContext = createContext<TooltipContextType | undefined>(undefined);
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  ({ children, delay = 0, className, id='tooltip-content',
+    ...props }, ref) => {
+
+    const [isHovered, setIsHovered] = useState(false);
+    let hoverTimeout: ReturnType<typeof setTimeout>;
+
+    const handleMouseEnter = useCallback(() => {
+      hoverTimeout = setTimeout(() => setIsHovered(true), delay);
+    }, [delay]);
+
+    const handleMouseLeave = useCallback(() => {
+      clearTimeout(hoverTimeout);
+      setIsHovered(false);
+    }, []);
+
+    // Separate the trigger element from the TooltipContent component.
+    const childrenArray = Children.toArray(children);
+
+    const trigger = childrenArray.find((child) => {
+      if (isValidElement(child)) {
+        // If the child is not a TooltipContent, treat it as the trigger.
+        return (child.type as any).displayName !== 'TooltipContent';
+      }
+    });
+
+    const tooltipContent = childrenArray.find((child) => {
+      if (isValidElement(child)) {
+        return (child.type as any).displayName === 'TooltipContent';
+      }
+    });
+
+    return (
+      <TooltipContext.Provider value={{ id }} >
+        <div
+          ref={ref}
+          className={twMerge('relative inline-block', className)}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          aria-describedby={id}
+          onFocus={handleMouseEnter} // keyboard support
+          onBlur={handleMouseLeave}
+          {...props}
+        >
+          {trigger}
+          {isHovered && tooltipContent}
+        </div>
+      </TooltipContext.Provider>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';
+
+export interface TooltipContentProps {
+  children?: ReactNode;
+  className?: string;
+  position?: string;
+}
+
+export const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
+  ({ children, className, position, ...props }, ref) => {
+
+    const [positionClasses, setPositionClasses] = useState<string>('mt-2');
+    const context = useContext(TooltipContext);
+    if (!context) {
+      throw new Error('TooltipContent must be used within a tooltip');
+    }
+    const { id } = context;
+
+    useEffect(() => {
+      if (position === 's') {
+        setPositionClasses('left-1/2 -translate-x-1/2 top-full mt-2')
+      } else if (position === 'n') {
+        setPositionClasses('left-1/2 -translate-x-1/2 -top-1 -translate-y-full ')
+      } else if (position === 'nw') {
+        setPositionClasses('left-0 -top-1 -translate-y-full');
+      } else if (position === 'ne') {
+        setPositionClasses('right-0 -top-1 -translate-y-full');
+      } else if (position === 'se') {
+        setPositionClasses('right-0 top-full mt-2');
+      } else if (position === 'w') {
+        setPositionClasses('-translate-x-full -left-2 -translate-y-1/2 top-1/2');
+      } else if (position === 'e') {
+        setPositionClasses('-right-2 translate-x-full -translate-y-1/2 top-1/2');
+      } else if (position === 'c') {
+        setPositionClasses('left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2')
+      }
+
+    }, [position, className]);
+
+    return (
+      <div
+        ref={ref}
+        id={id}
+        role="tooltip"
+        className={twMerge(
+          'absolute z-10  px-4 py-2 origin-center bg-slate-800 text-slate-100 ' +
+          'border border-slate-500 text-sm rounded-sm shadow-md',
+          positionClasses,
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+TooltipContent.displayName = 'TooltipContent';

package/src/lib/bak-simple-ui.stories.tsx-bak

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SimpleUi } from './simple-ui';
+
+import { within } from '@storybook/test';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof SimpleUi> = {
+  component: SimpleUi,
+  title: 'SimpleUi',
+};
+export default meta;
+type Story = StoryObj<typeof SimpleUi>;
+
+export const Primary = {
+  args: {},
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to SimpleUi!/gi)).toBeTruthy();
+  },
+};

package/src/styles.css

@@ -0,0 +1,190 @@
+/* tailwind.css  ── Tailwind v4, CSS-first configuration  */
+
+/*
+ * 1. Pull in Tailwind’s engine
+ *    (equivalent to @tailwind base/components/utilities in v3)
+ */
+@import "tailwindcss";
+
+/* ---------------------------------------------------------------------
+   Dynamic utilities that must ALWAYS be present at build-time
+   ------------------------------------------------------------------ */
+
+/* 1) background-color utilities + variants  ------------------------- */
+@source inline("{,hover:,disabled:,md:,lg:}bg-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
+
+/* 2) logical size (w + h) utilities -------------------------------- */
+@source inline("{,disabled:,md:,lg:}size-{0,px,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}");
+
+/* 3) SVG fill + stroke colors -------------------------------------- */
+@source inline("fill-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
+@source inline("stroke-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
+
+/* 4) text-color utilities + variants -------------------------------- */
+@source inline("{,hover:,disabled:,md:,lg:}text-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
+
+/* 5) border-color utilities + variants ------------------------------ */
+@source inline("{,hover:,disabled:}border-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
+
+/* 6) explicit h-* and w-* for breakpoints --------------------------- */
+@source inline("{,md:,lg:}h-{0,px,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}");
+@source inline("{,md:,lg:}w-{0,px,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}");
+
+/* 7) outline-* (width) and leading-* (line-height) ------------------ */
+@source inline("{,md:,lg:}outline-{0,1,2,4,8}");
+@source inline("{,md:,lg:}leading-{3,4,5,6,7,8,9}");
+
+@source './';
+
+/*
+ * 2. Design tokens ➜ @theme
+ *    Any --color-* / --radius-* variable declared here becomes a real utility:
+ *    bg-dha-blue, text-border, rounded-md, etc.
+ */
+@theme {
+  /* ─── Brand palette ─── */
+  --color-dha-dark-blue: #07192d;
+  --color-dha-blue:       #092068;
+  --color-dha-red:        #582831;
+  --color-dha-grey:       #414042;
+  --color-dha-light-blue: #5992fa;
+  --color-dha-green:      #5aab46;
+  --color-dha-yellow:     #ffd03f;
+
+  /* ─── Mobile-check palette ─── */
+  --color-dha-mc-true-blue:           #0256AB;
+  --color-dha-mc-pale-blue:           #E3EBF3;
+  --color-dha-mc-alert:               #EB941D;
+  --color-dha-mc-alert-border:        #CB811B;
+  --color-dha-mc-required-field:      #D91D1D;
+  --color-dha-mc-primary-text:        #484848;
+  --color-dha-mc-field-border:        #707070;
+  --color-dha-mc-checkbox-inactive:   #949494;
+  --color-dha-mc-secondary-border:    #C6C6C6;
+  --color-dha-mc-inactive-nav-icon-fill: #F0EEEC;
+  --color-dha-mc-bottom-nav-background:  #F9F9F9;
+  --color-dha-mc-white-main:            #FFFFFF;
+
+  /* ─── Semantic palette (HSL channels carried over) ─── */
+  --color-border:             hsl(var(--border));
+  --color-input:              hsl(var(--input));
+  --color-ring:               hsl(var(--ring));
+  --color-background:         hsl(var(--background));
+  --color-foreground:         hsl(var(--foreground));
+
+  --color-primary:            hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary:            hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive:            hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted:            hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent:            hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover:            hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card:            hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  /* ─── Border-radius utilities ─── */
+  --radius-lg: var(--radius);                 /* → rounded-lg   */
+  --radius-md: calc(var(--radius) - 2px);     /* → rounded-md   */
+  --radius-sm: calc(var(--radius) - 4px);     /* → rounded-sm   */
+}
+
+/*
+ * 3. Global CSS variables (unchanged from v3 file)
+ *    These feed the semantic HSL tokens above.
+ */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 166 91% 33%;
+    --primary-foreground: 163 100% 92%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+
+  /* Give every element a logical border color */
+  * { @apply border-border; }
+  body { @apply bg-background text-foreground; }
+}
+
+/*
+ * 4. Custom animations (formerly done via tailwindcss-animate + keyframes extension)
+ *    These stay exactly the same; Tailwind will pick them up automatically.
+ */
+@layer utilities {
+  @keyframes accordion-down {
+    from { height: 0; }
+    to   { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to   { height: 0; }
+  }
+
+  .animate-accordion-down { animation: accordion-down 0.2s ease-out both; }
+  .animate-accordion-up   { animation: accordion-up   0.2s ease-out both; }
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest", "vitest-axe"]
+  },
+  "files": [],
+  "include": ["src/global.d.ts", "src/**/*"],
+  "exclude": ["node_modules/@types/jest"],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,42 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "composite": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "./dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx",
+    "../utils/src/lib/safelist.css",
+    "../utils/src/lib/utils.spec.tsx"
+  ],
+  "include": [
+    "../utils/src/**/*",
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/*.ts",
+    "src/*.tsx"
+  ],
+
+}

package/tsconfig.spec.json

@@ -0,0 +1,29 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "composite": true,
+    "declaration": true,
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.mts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts",
+    "src/**/*.tsx"
+  ]
+}

package/tsconfig.storybook.json

@@ -0,0 +1,36 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "composite": true,
+    "declaration": true,
+    "outDir": ""
+  },
+  "files": [
+    "../safelist-css/src/index.ts",
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "@dhasdk/safelist-css",
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    "src/**/*.tsx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}

package/vite.config.mts

@@ -0,0 +1,87 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import tailwindcss from '@tailwindcss/vite';
+// import svgr from 'vite-plugin-svgr';
+
+export default defineConfig({
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/simple-ui',
+      provider: 'v8', // v8 or istanbul, both coverage packages installed globally
+      exclude: [
+        '**/*.stories.tsx',
+        '**/*.stories.tsx', '*.config.js',
+        'coverage/**',
+        'coverage/*.*',
+        '.storybook/*.ts',
+        '../.storybook/*.ts',
+        'src/index.ts',
+        'src/lib/SearchContent.tsx',
+      ]
+    },
+  },
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/simple-ui',
+
+  plugins: [
+    react(),
+    tailwindcss(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+
+  resolve: {
+    alias: {
+      // + /GuidedMeditation/SomeFile.tsx
+      '@/simple-ui': path.resolve(__dirname, 'libs/simple-ui'),
+      // "@/assets/audio/GuidedMeditation": path.resolve(__dirname, "src/GuidedMeditation/assets/audio"),
+      // "@/modules": path.resolve(__dirname, "libs/guided-meditation/src"),
+    },
+  },
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/libs/simple-ui',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'simple-ui',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react-router-dom', 'react/jsx-runtime'],
+    },
+    // sourcemap: true,  // enable source map for unit test coverage
+    // update re sourcemap - apparently not needed? run unit tests from source directory, not repo root
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1,12 @@
+// vitest.setup.ts
+import '@testing-library/jest-dom';
+import "vitest-axe/extend-expect";
+import * as matchers from "vitest-axe/matchers";
+import { expect } from "vitest";
+import { vi } from 'vitest';        // imported as bandaid for Canvas testing problem
+
+
+expect.extend(matchers);
+
+HTMLCanvasElement.prototype.getContext = vi.fn(() => null); // executred as bandaid for Canvas testing problem
+