@douglasneuroinformatics/libui 1.0.0

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@douglasneuroinformatics/libui",
+  "type": "module",
+  "version": "1.0.0",
+  "packageManager": "pnpm@8.15.3",
+  "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
+  "author": {
+    "name": "Douglas Neuroinformatics",
+    "email": "support@douglasneuroinformatics.ca"
+  },
+  "license": "LGPL-3.0",
+  "keywords": [
+    "React",
+    "TailwindCSS"
+  ],
+  "exports": {
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/i18n.d.ts",
+      "import": "./dist/i18n.js"
+    },
+    "./styles/*": "./dist/styles/*",
+    "./tailwind.config.cjs": "./tailwind.config.cjs",
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js"
+    }
+  },
+  "main": "index.js",
+  "files": [
+    "dist",
+    "tailwind.config.cjs",
+    "tailwind.config.d.cts"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.3.5"
+  },
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "i18next": "23.x",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "lodash-es": "^4.17.21",
+    "react-i18next": "^14.1.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "type-fest": "^4.11.1",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.1.0",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/types": "^19.0.3",
+    "@douglasneuroinformatics/eslint-config": "^4.0.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^11.0.3",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-themes": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/icons": "^1.2.8",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vitest/coverage-v8": "^1.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "husky": "^9.0.11",
+    "jsdom": "24.0.0",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "semantic-release": "^23.0.2",
+    "storybook": "^7.6.17",
+    "storybook-react-i18next": "^2.1.1",
+    "tsup": "^8.0.2",
+    "typescript": "~5.3.3",
+    "vite": "4.4.9",
+    "vitest": "^1.3.1"
+  },
+  "scripts": {
+    "build": "tsup && cp -r src/styles dist",
+    "format": "prettier --write src",
+    "lint": "tsc && eslint --fix src",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  }
+}

package/tailwind.config.cjs

@@ -0,0 +1,117 @@
+// @ts-check
+
+const fs = require('fs');
+const path = require('path');
+
+const animate = require('tailwindcss-animate');
+const plugin = require('tailwindcss/plugin');
+
+const isDev = fs.existsSync(path.resolve(__dirname, 'src'));
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [isDev ? path.resolve(__dirname, 'src/**/*.{js,jsx,ts,tsx}') : path.resolve(__dirname, 'dist/**/*.js')],
+  darkMode: ['class', '[data-mode="dark"]'],
+  plugins: [
+    animate,
+    plugin(({ addUtilities }) => {
+      addUtilities({
+        '.scrollbar-none': {
+          '&::-webkit-scrollbar': {
+            display: 'none'
+          },
+          '-ms-overflow-style': 'none',
+          'scrollbar-width': 'none'
+        }
+      });
+    })
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px'
+      }
+    },
+    extend: {
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        spinner: 'spinner-spin 1.7s infinite ease, round 1.7s infinite ease'
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      colors: {
+        accent: {
+          DEFAULT: 'var(--accent)',
+          foreground: 'var(--accent-foreground)'
+        },
+        background: 'var(--background)',
+        border: 'var(--border)',
+        card: {
+          DEFAULT: 'var(--card)',
+          foreground: 'var(--card-foreground)'
+        },
+        destructive: {
+          DEFAULT: 'var(--destructive)',
+          foreground: 'var(--destructive-foreground)'
+        },
+        foreground: 'var(--foreground)',
+        input: 'var(--input)',
+        muted: {
+          DEFAULT: 'var(--muted)',
+          foreground: 'var(--muted-foreground)'
+        },
+        popover: {
+          DEFAULT: 'var(--popover)',
+          foreground: 'var(--popover-foreground)'
+        },
+        primary: {
+          DEFAULT: 'var(--primary)',
+          foreground: 'var(--primary-foreground)'
+        },
+        ring: 'var(--ring)',
+        secondary: {
+          DEFAULT: 'var(--secondary)',
+          foreground: 'var(--secondary-foreground)'
+        }
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' }
+        },
+        round: {
+          '0%': {
+            transform: 'rotate(0deg)'
+          },
+          '100%': {
+            transform: 'rotate(360deg)'
+          }
+        },
+        'spinner-spin': {
+          '0%, 5%, 95%, 100%': {
+            boxShadow: `0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em`
+          },
+          '10%, 59%': {
+            boxShadow: `0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em`
+          },
+          '20%': {
+            boxShadow: `0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em`
+          },
+          '38%': {
+            boxShadow: `0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em`
+          }
+        }
+      }
+    }
+  }
+};

package/tailwind.config.d.cts

@@ -0,0 +1,7 @@
+declare type TailwindConfig = import('tailwindcss').Config & {
+  content: string[];
+};
+
+declare const config: TailwindConfig;
+
+export = config;