@arbor-education/design-system.components 0.0.1

package/src/utils/generateUuid.ts

@@ -0,0 +1,9 @@
+export const generateUuid = (prefix = ''): string => {
+  if (!self?.crypto?.randomUUID) {
+    throw new Error('Crypto API not supported');
+  }
+  if (prefix) {
+    return `${prefix}-${self.crypto.randomUUID()}`;
+  }
+  return self.crypto.randomUUID();
+};

package/src/utils/hooks/useMemoGenerateUuid.ts

@@ -0,0 +1,13 @@
+import { useMemo, type DependencyList } from 'react';
+import { generateUuid } from '../generateUuid';
+
+type Args = {
+  deps?: DependencyList;
+  prefix?: string;
+};
+
+export const useMemoGenerateUuid = ({ deps = [], prefix }: Args) => {
+  return useMemo(() => {
+    return generateUuid(prefix);
+  }, deps);
+};

package/src/utils/keyboardConstants.ts

@@ -0,0 +1,12 @@
+export const BACKSPACE_KEY = 'Backspace';
+export const TAB_KEY = 'Tab';
+export const ENTER_KEY = 'Enter';
+export const ESCAPE_KEY = 'Escape';
+export const SPACE_KEY = ' ';
+export const ARROW_LEFT_KEY = 'ArrowLeft';
+export const ARROW_UP_KEY = 'ArrowUp';
+export const ARROW_RIGHT_KEY = 'ArrowRight';
+export const ARROW_DOWN_KEY = 'ArrowDown';
+export const DELETE_KEY = 'Delete';
+export const Z_KEY = 'z';
+export const A_KEY = 'a';

package/src/utils/waitForElement.ts

@@ -0,0 +1,22 @@
+export const waitForElement = (
+  selector: string,
+  callback: (element: Element) => void,
+) => {
+  const timeout = setTimeout(() => {
+    console.error('Element not found:', selector);
+  }, 1000);
+
+  const observer = new MutationObserver((mutations, mutObs) => {
+    const element = document.querySelector(selector);
+    if (element) {
+      mutObs.disconnect();
+      callback(element);
+      clearTimeout(timeout);
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+};

package/stylelint.config.mjs

@@ -0,0 +1,10 @@
+/** @type {import('stylelint').Config} */
+export default {
+  extends: ['stylelint-config-standard-scss'],
+  rules: {
+    'value-keyword-case': null,
+    'color-hex-length': null,
+    'scss/load-partial-extension': null,
+    'selector-class-pattern': null,
+  },
+};

package/tsconfig.json

@@ -0,0 +1,49 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    "rootDir": "./src",
+    "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "es2020",
+    "target": "esnext",
+    "types": ["@testing-library/jest-dom"],
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": false,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/**/*.story.tsx"]
+}

package/vitest.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    // projects: [
+    //   {
+    //     extends: true,
+    //     plugins: [],
+    //     test: {
+    //       name: "storybook",
+    //       browser: {
+    //         enabled: true,
+    //         headless: true,
+    //         provider: "playwright",
+    //         instances: [{ browser: "chromium" }],
+    //       },
+    //       setupFiles: [".storybook/vitest.setup.ts"],
+    //     },
+    //   },
+    // ],
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />