@dhasdk/simple-ui 1.0.8 → 1.0.10

package/src/lib/Tooltip.tsx

@@ -1,137 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,190 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-{
-  "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

@@ -1,42 +0,0 @@
-{
-  "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

@@ -1,29 +0,0 @@
-{
-  "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

@@ -1,36 +0,0 @@
-{
-  "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

@@ -1,87 +0,0 @@
-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

@@ -1,12 +0,0 @@
-// 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
-