Merge pull request #1322 from privy-open-source/feat/pspdfkit

feat: pspdfkit

.dockerignore

@@ -130,3 +130,5 @@ dist
 .pnp.*
 
 .DS_Store
+
+!src/public/js/**/dist

.eslintignore

@@ -130,3 +130,4 @@ dist
 .pnp.*
 !src/.vitepress
 src/.vitepress/cache
+src/public/js

.gitignore

@@ -146,3 +146,4 @@ eslint-results.sarif
 
 # Vim configuration
 .vim
+!src/public/js/**/dist

.stylelintignore

@@ -0,0 +1,133 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+!src/.vitepress
+src/.vitepress/cache
+src/public/js

.vscode/settings.json

@@ -4,12 +4,9 @@
  ".vscode/tailwind.json"
  ],
  "eslint.enable": true,
- "eslint.packageManager": "yarn",
  "eslint.run": "onSave",
  "eslint.lintTask.options": "--cache .",
  "eslint.lintTask.enable": true,
- "volar.autoCompleteRefs": false,
- "volar.vueserver.useSecondServer": true,
  "C_Cpp.dimInactiveRegions": false,
  "eslint.options": {
  "overrideConfig": {
@@ -22,5 +19,9 @@
  },
  "editor.rulers": [
  80
+ ],
+ "css.lint.validProperties": [
+ "rx",
+ "ry"
  ]
 }

package.json

@@ -32,6 +32,7 @@
  "@privyid/browserslist-config": "workspace:^",
  "@privyid/eslint-config-persona": "workspace:^",
  "@privyid/tailwind-preset": "workspace:^",
+ "@rollup/plugin-inject": "^5.0.5",
  "@rushstack/eslint-patch": "1.10.2",
  "@testing-library/jest-dom": "6.4.5",
  "@testing-library/vue": "8.0.3",
@@ -51,7 +52,7 @@
  "autoprefixer": "10.4.19",
  "browserslist-to-esbuild": "2.1.1",
  "eslint": "8.57.0",
- "eslint-config-standard-with-typescript": "~21.0.1",
+ "eslint-config-standard-with-typescript": "21.0.1",
  "eslint-formatter-pretty": "5.0.0",
  "eslint-plugin-align-assignments": "1.1.2",
  "eslint-plugin-import": "2.29.1",
@@ -67,12 +68,14 @@
  "lint-staged": "15.2.2",
  "nanodelay": "2.0.2",
  "postcss": "8.4.38",
+ "postcss-import": "^16.1.0",
  "postcss-nested": "6.0.1",
  "sharp": "0.33.3",
  "svgo": "3.3.2",
  "tailwindcss": "3.4.3",
  "typescript": "5.4.5",
  "ufo": "1.5.3",
+ "unenv": "^1.9.0",
  "vite-plugin-image-optimizer": "1.1.7",
  "vitepress": "1.1.0",
  "vitest": "0.24.5",
@@ -92,19 +95,20 @@
  "@zxing/browser": "0.1.4",
  "@zxing/library": "0.21.0",
  "chart.js": "4.4.2",
- "core-js": "3",
  "date-fns": "3.6.0",
  "defu": "6.1.4",
  "fast-equals": "^5.0.0",
  "fuse.js": "7.0.0",
  "html-escaper": "^3.0.3",
+ "immutable": "^5.0.0-beta.5",
  "interactjs": "1.10.27",
  "lodash-es": "4.17.21",
  "marked": "^12.0.0",
  "nanodelay": "2.0.2",
  "pdfjs-dist": "^3.11.174",
  "postcss-hexrgba": "^2.1.0",
  "postcss-lighten-darken": "^0.9.0",
+ "pspdfkit": "^2024.3.1",
  "qr-code-styling": "^1.6.0-rc.1",
  "scroll-into-view": "^1.16.2",
  "tabbable": "6.2.0",

packages/persona-ilustration/scripts/sync.ts

@@ -177,6 +177,8 @@ async function cleanup (objects: Map<string, ObjectData>, lockObjects: Map<strin
  if (!newObject || newObject.filename !== oldObject.filename) {
  await remove(resolve(SVG_DIR, `${oldObject.filename}.svg`))
  await remove(resolve(VUE_DIR, `${oldObject.filename}.vue`))
+ await remove(resolve(PNG_DIR, `${oldObject.filename}.png`))
+ await remove(resolve(PNG_DIR, `${oldObject.filename}@2x.png`))
  }
  }
 }

postcss.config.js

@@ -1,5 +1,6 @@
 export default {
  plugins: {
+ 'postcss-import' : {},
  'postcss-hexrgba' : {},
  'tailwindcss/nesting' : {},
  'tailwindcss' : {},

scripts/cp-pkg.js

@@ -0,0 +1,17 @@
+/* eslint-disable unicorn/prefer-top-level-await */
+import minimist from 'minimist'
+import fse from 'fs-extra'
+import path from 'node:path'
+
+async function main () {
+ const argv = minimist(process.argv.slice(2))
+ const [packageName, dest] = argv._
+
+ const baseDir = path.resolve(process.cwd(), 'node_modules', packageName)
+ const packageJSON = await fse.readJSON(path.join(baseDir, 'package.json'))
+ const destDir = path.resolve(process.cwd(), dest, `${packageName}@${packageJSON.version}`)
+
+ await fse.copy(baseDir, destDir)
+}
+
+main()

src/.vitepress/config.ts

@@ -1,8 +1,11 @@
 import { defineConfig } from 'vitepress'
 import getTarget from 'browserslist-to-esbuild'
 import head from './head'
+import { env, nodeless } from 'unenv'
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
 
+const { alias } = env(nodeless)
+
 export default defineConfig({
  base : process.env.BASE_URL ?? '/design-system/',
  title : 'Persona',
@@ -533,6 +536,8 @@ export default defineConfig({
  },
  vite: {
  build : { target: getTarget('extends @privyid/browserslist-config') },
+ resolve: { alias },
  plugins: [ViteImageOptimizer()],
  },
+ srcExclude: ['public/js/**'],
 })

src/.vitepress/head.ts

@@ -62,15 +62,15 @@ const head: HeadConfig[] = [
  'link',
  {
  rel : 'preconnect',
- href : 'https://polyfill.io',
+ href : 'https://cdnjs.cloudflare.com',
  crossorigin: '',
  },
  ],
  [
  'script',
  {
  defer: '',
- src : `https://polyfill.io/v3/polyfill.min.js?features=${[
+ src : `https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=${[
  'AbortController',
  'ArrayBuffer.isView',
  'Blob',

src/.vitepress/theme/index.ts

@@ -1,5 +1,4 @@
 // import 'virtual:fonts.css'
-import 'core-js'
 import '@fontsource/dm-sans'
 import '@fontsource/dm-sans/400-italic.css'
 import '@fontsource/dm-sans/500.css'
@@ -9,7 +8,8 @@ import './css/custom.css'
 import Preview from './components/Preview.vue'
 import NuxtLink from './components/NuxtLink.vue'
 import vueRouter from './router'
-import { initStore } from '../../components/global/store'
+import { withBase } from 'vitepress'
+import { initStore, setCDN } from '../../components/global/store'
 import { installRouter } from '../../components/global/router'
 
 export default {
@@ -20,6 +20,7 @@ export default {
  app.component('NuxtLink', NuxtLink)
 
  initStore()
+ setCDN(withBase('/js/'))
  installRouter({
  toURL (url) {
  return router.go(url)

src/components/calendar/Calendar.vue

@@ -54,6 +54,7 @@
  variant="solid"
  type="button"
  data-testid="calendar-item"
+ class="calendar__item-btn"
  :readonly="item.readonly || disabled || readonly"
  :active="item.active"
  :disabled="item.disabled"
@@ -419,13 +420,19 @@ watch([viewmode, cursor], ([vm, cursor], [vmOld, cursorOld]) => {
  &[viewmode="date"] {
  @apply grid grid-cols-7 gap-y-1;
 
- .btn--md {
+ .calendar__item-btn.btn--md {
  @apply p-1 md:p-2;
  }
 
- .btn--outline:nth-child(-n+7) {
+ .calendar__item-btn:nth-child(-n+7) {
  @apply font-medium;
  }
+
+ .calendar__item-btn:nth-child(7n) {
+ &:not([active="true"]) {
+ @apply text-danger dark:text-dark-danger;
+ }
+ }
  }
 
  &[viewmode="month"],

src/components/global/store.spec.ts

@@ -9,6 +9,8 @@ import {
  getCDN,
  setCDN,
  destroyStore,
+ setPSPDFLicenseKey,
+ getPSPDFLicenseKey,
 } from './store'
 
 beforeEach(() => {
@@ -81,3 +83,11 @@ describe('getCDN', () => {
  expect(getCDN()).toBe('https://unpkg.com/')
  })
 })
+
+describe('setPSPDFLicenseKey', () => {
+ it('should able to set PSPDFKit Licensekey', () => {
+ setPSPDFLicenseKey('ABCDEFG')
+
+ expect(getPSPDFLicenseKey()).toBe('ABCDEFG')
+ })
+})