@paygreen/pgui 2.14.10 → 3.0.0

package/package.json

@@ -1,121 +1,110 @@
 {
   "name": "@paygreen/pgui",
-  "version": "2.14.10",
-  "description": "PGUI is the design system coming from Paygreen.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "version": "3.0.0",
+  "description": "core ui for paygreen apps",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/**/*.css"
   ],
-  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rm -rf ./dist && rollup -c rollup.config.js",
-    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json} --max-warnings=0",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
-    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc.json",
-    "link-local-lib": "npm link @chakra-ui/react react",
+    "test": "vitest --run --coverage",
+    "test:chromium": "vitest --browser=chromium",
+    "test:firefox": "vitest --browser=firefox",
+    "test:webkit": "vitest --browser=webkit",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepare": "husky install && relative-deps"
+    "build": "vite build",
+    "build:prod": "NODE_ENV=production vite build",
+    "build:storybook": "NODE_ENV=production storybook build",
+    "build:docs": "NODE_ENV=production storybook build --docs",
+    "dev:publish": "npm run build && yalc publish",
+    "dev:push": "npm run build && yalc push",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx,json}' --max-warnings=0",
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc.json"
   },
   "lint-staged": {
-    "**/*.{ts,tsx,json,mdx}": [
+    "src/**/*.{ts,tsx,json,mdx}": [
       "prettier --write --config ./.prettierrc.json",
       "eslint --fix --max-warnings=0"
     ]
   },
-  "keywords": [
-    "design",
-    "system",
-    "chakra-ui",
-    "component",
-    "library",
-    "theme",
-    "react"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/Paygreen-paygreen/v3/pgui.git"
-  },
-  "author": "Paygreen",
+  "author": "",
   "license": "ISC",
-  "bugs": {
-    "url": "https://gitlab.com/Paygreen-paygreen/v3/pgui/issues"
+  "dependencies": {
+    "@chakra-ui/react": "^3.20.0",
+    "@chakra-ui/react-use-outside-click": "^2.2.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@fontsource-variable/geist": "^5.2.6",
+    "@storybook/addon-themes": "^9.0.12",
+    "@tanstack/react-table": "^8.0.0",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^4.5.2",
+    "dayjs": "^1.11.13",
+    "libphonenumber-js": "^1.12.9",
+    "next-themes": "^0.4.6",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-datepicker": "^8.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-icons": "^5.5.0",
+    "react-phone-number-input": "^3.0.0",
+    "react-select": "^5.0.0",
+    "storybook": "^9.0.12",
+    "use-mask-input": "^3.0.0"
   },
-  "homepage": "https://gitlab.com/Paygreen-paygreen/v3/pgui#readme",
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/plugin-transform-runtime": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/theme-tools": "^2.1.2",
-    "@chromatic-com/storybook": "^1.5.0",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mona-health/react-input-mask": "^3.0.3",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "11.1.5",
-    "@storybook/addon-actions": "^8.1.6",
-    "@storybook/addon-docs": "^8.1.6",
-    "@storybook/addon-essentials": "^8.1.6",
-    "@storybook/addon-interactions": "^8.1.6",
-    "@storybook/addon-links": "^8.1.6",
-    "@storybook/addon-themes": "^8.1.6",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
-    "@storybook/react": "^8.1.6",
-    "@storybook/react-webpack5": "^8.1.6",
-    "@storybook/test": "^8.1.6",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/react": "^18.2.47",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-import": "^1.13.8",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "css-loader": "^5.2.7",
-    "date-fns": "^2.30.0",
-    "dayjs": "^1.11.10",
-    "dotenv-webpack": "^8.0.1",
-    "eslint": "^8.56.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "framer-motion": "4.1.17",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.3.0",
-    "postcss": "^8.4.33",
-    "prettier": "^2.8.8",
-    "react-day-picker": "^8.10.1",
-    "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.6",
-    "react-icons": "^4.12.0",
-    "react-input-mask": "^3.0.0-alpha.2",
-    "react-phone-number-input": "^3.3.9",
-    "react-select": "^5.8.0",
-    "relative-deps": "^0.0.2",
-    "rollup": "^2.79.1",
-    "rollup-plugin-dts": "^4.2.3",
-    "rollup-plugin-node-externals": "^4.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.69.7",
-    "sass-loader": "^12.6.0",
-    "storybook": "^8.1.6",
-    "style-loader": "^2.0.0",
-    "tslib": "^2.6.2",
-    "typescript": "^4.9.5"
+    "@storybook/addon-a11y": "^9.0.12",
+    "@storybook/addon-docs": "^9.0.12",
+    "@storybook/addon-links": "^9.0.12",
+    "@storybook/addon-vitest": "^9.0.12",
+    "@storybook/builder-vite": "^9.0.12",
+    "@storybook/react-vite": "^9.0.12",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.1.7",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitest/browser": "^3.2.3",
+    "@vitest/coverage-istanbul": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.3",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "9.0.12",
+    "globals": "^16.2.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.0",
+    "playwright": "^1.53.0",
+    "prettier": "^3.5.3",
+    "prop-types": "^15.8.1",
+    "typescript": "^5.5.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.3"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": "^3.20.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-datepicker": "^8.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-phone-number-input": "^3.0.0",
+    "react-select": "^5.0.0",
+    "use-mask-input": "^3.0.0"
   },
-  "relativeDependencies": {}
+  "peerDependenciesMeta": {
+    "@chakra-ui/react": {
+      "optional": false
+    }
+  }
 }

package/src/components/date-picker/date-picker.css

@@ -0,0 +1,225 @@
+/* Base */
+.chakra-datepicker {
+  width: 100%;
+}
+
+.chakra-datepicker .react-datepicker {
+  font-size: var(--chakra-font-sizes-sm);
+  font-family: inherit;
+  border: 1px solid var(--chakra-colors-border);
+  border-radius: var(--chakra-radii-md);
+  background-color: var(--chakra-colors-white);
+  box-shadow: var(--chakra-shadows-md);
+  width: 100%;
+}
+
+.chakra-datepicker .react-datepicker-wrapper {
+  width: 100%;
+}
+
+/* Header */
+.chakra-datepicker .react-datepicker__header {
+  background-color: transparent;
+  border-bottom: 1px solid var(--chakra-colors-border);
+  padding: 0.5rem;
+}
+
+/* Month and year select */
+.chakra-datepicker .react-datepicker__month-select,
+.chakra-datepicker .react-datepicker__year-select {
+  background-color: var(--chakra-colors-white);
+  border: 1px solid var(--chakra-colors-border);
+  border-radius: var(--chakra-radii-md);
+  padding: 0.2rem;
+  margin: 0.2rem;
+}
+
+/* Time */
+.chakra-datepicker
+  .react-datepicker__time-container
+  .react-datepicker__time
+  .react-datepicker__time-box {
+  width: 80px;
+}
+
+/* Days */
+.chakra-datepicker .react-datepicker__day {
+  color: var(--chakra-colors-lm_gray-30);
+  border-radius: var(--chakra-radii-md);
+  margin: 0.1rem;
+  width: 1.75rem;
+  line-height: 1.75rem;
+}
+
+/* Days hover */
+.chakra-datepicker .react-datepicker__day:hover {
+  background-color: var(--chakra-colors-lm_gray-80);
+}
+
+/* Days keyboard selected */
+.chakra-datepicker .react-datepicker__day--keyboard-selected {
+  background-color: var(--chakra-colors-lm_cello-50) !important;
+  color: var(--chakra-colors-white) !important;
+}
+
+/* Days selected */
+.chakra-datepicker .react-datepicker__day--selected,
+.chakra-datepicker .react-datepicker__day--in-range {
+  background-color: var(--chakra-colors-lm_cello-40) !important;
+  color: var(--chakra-colors-white) !important;
+}
+
+.chakra-datepicker .react-datepicker__sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Days disabled */
+.chakra-datepicker .react-datepicker__day--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Days in selecting range */
+.chakra-datepicker .react-datepicker__day--in-selecting-range {
+  background-color: var(--chakra-colors-brand-100);
+}
+
+/* Time container */
+.chakra-datepicker .react-datepicker__time-container {
+  border-left: 1px solid var(--chakra-colors-border);
+  width: 5rem;
+}
+
+/* Time header */
+.chakra-datepicker .react-datepicker-time__header {
+  font-size: var(--chakra-font-sizes-sm);
+}
+
+/* Time box */
+.chakra-datepicker .react-datepicker__time-box {
+  border-radius: 0;
+}
+
+/* Time list item */
+.chakra-datepicker .react-datepicker__time-list-item {
+  color: var(--chakra-colors-lm_gray-700);
+  padding: 0.25rem;
+}
+
+/* Time list item hover */
+.chakra-datepicker .react-datepicker__time-list-item:hover {
+  background-color: var(--chakra-colors-lm_gray-100);
+}
+
+/* Time list item selected */
+.chakra-datepicker .react-datepicker__time-list-item--selected {
+  background-color: var(--chakra-colors-lm_cello-40) !important;
+  color: var(--chakra-colors-white) !important;
+}
+
+/* Day name */
+.chakra-datepicker .react-datepicker__day-name {
+  color: var(--chakra-colors-lm_gray-600);
+}
+
+/* Current month */
+.chakra-datepicker .react-datepicker__current-month {
+  display: none;
+}
+
+/* Navigation */
+.chakra-datepicker .react-datepicker__navigation-icon {
+  margin-top: 1rem;
+}
+
+/* Navigation icon */
+.chakra-datepicker .react-datepicker__navigation-icon::before {
+  border-color: var(--chakra-colors-gray-600);
+}
+
+/* Triangle */
+.chakra-datepicker .react-datepicker__triangle {
+  display: none !important;
+}
+
+/* Dark mode styles */
+/* Base */
+.chakra-datepicker[data-theme="dark"] .react-datepicker {
+  background-color: var(--chakra-colors-lm_gray-20);
+  border-color: var(--chakra-colors-lm_gray-30);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__header {
+  background-color: var(--chakra-colors-lm_gray-30);
+  border-color: var(--chakra-colors-lm_gray-35);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__day {
+  color: var(--chakra-colors-lm_gray-60);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__day:hover {
+  background-color: var(--chakra-colors-lm_gray-35);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__day--in-selecting-range {
+  background-color: var(--chakra-colors-lm_cello-20);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__time-container {
+  border-color: var(--chakra-colors-lm_gray-600);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker-time__header {
+  color: var(--chakra-colors-lm_gray-100);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list {
+  background-color: var(--chakra-colors-lm_gray-800);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item {
+  color: var(--chakra-colors-lm_gray-300);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item:hover {
+  background-color: var(--chakra-colors-lm_gray-600);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item--selected {
+  background-color: var(--chakra-colors-lm_cello-40) !important;
+  color: var(--chakra-colors-white) !important;
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__time-box {
+  background-color: var(--chakra-colors-gray-800);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__day-name {
+  color: var(--chakra-colors-lm_gray-50);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__current-month {
+  color: var(--chakra-colors-lm_gray-75);
+}
+
+.chakra-datepicker[data-theme="dark"] .react-datepicker__navigation-icon::before {
+  border-color: var(--chakra-colors-lm_gray-75);
+}
+
+/* Month and year select */
+.chakra-datepicker[data-theme="dark"] .react-datepicker__month-select,
+.chakra-datepicker[data-theme="dark"] .react-datepicker__year-select {
+  background-color: var(--chakra-colors-lm_gray-700);
+  color: var(--chakra-colors-white);
+  border: 1px solid var(--chakra-colors-border-emphasized);
+}

package/src/components/select/select.css

@@ -0,0 +1,99 @@
+.select-custom-container {
+  font-size: var(--chakra-font-sizes-sm);
+  min-width: 200px;
+  display: inline-block;
+  width: 100%;
+}
+
+.select-custom-container--error .select-custom__control {
+  border-color: var(--chakra-colors-border-error) !important;
+}
+
+.select-custom-container--error .select-custom__control--is-focused {
+  border-color: var(--chakra-colors-border-error) !important;
+  box-shadow: 0 0 0 1px var(--chakra-colors-border-error) !important;
+}
+
+.select-custom-container--error .select-custom__control:hover {
+  border-color: var(--chakra-colors-border-error) !important;
+}
+
+.select-custom__single-value {
+  color: var(--chakra-colors-fg) !important;
+}
+
+.select-custom__control {
+  border: 1px solid var(--chakra-colors-border) !important;
+}
+
+.select-custom__control,
+.select-custom__control--is-focused {
+  min-height: var(--chakra-sizes-10) !important;
+  background-color: transparent !important;
+}
+
+.select-custom__control--is-focused {
+  box-shadow: none !important;
+  outline-offset: 0 !important;
+  outline-width: var(--focus-ring-width, 1px) !important;
+  outline-color: var(--chakra-colors-color-palette-focus-ring) !important;
+  outline-style: var(--focus-ring-style, solid) !important;
+  border-color: var(--chakra-colors-color-palette-focus-ring) !important;
+}
+
+.select-custom__menu {
+  z-index: 1000 !important;
+  border: 1px solid var(--chakra-colors-border) !important;
+  background-color: var(--chakra-colors-bg-panel) !important;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  border-radius: var(--chakra-radii-md) !important;
+}
+
+.select-custom__menu-list {
+  border-radius: var(--chakra-radii-md) !important;
+  padding: 0 !important;
+}
+
+.select-custom__multi-value {
+  background-color: var(--chakra-colors-bg-panel) !important;
+  border: 1px solid var(--chakra-colors-border) !important;
+  border-radius: var(--chakra-radii-sm) !important;
+}
+.select-custom__multi-value__label {
+  color: var(--chakra-colors-fg) !important;
+}
+.select-custom__option {
+  background-color: var(--chakra-colors-bg) !important;
+  font-size: var(--chakra-font-sizes-sm) !important;
+  padding: 5px 10px !important;
+}
+
+.select-custom__option:hover {
+  background-color: var(--chakra-colors-bg-muted) !important;
+}
+
+.select-custom__option--is-selected {
+  color: var(--chakra-colors-fg) !important;
+  background-color: var(--chakra-colors-bg-muted) !important;
+}
+
+.select-custom__multi-value__label {
+  font-size: var(--chakra-font-sizes-sm) !important;
+}
+
+.select-custom__multi-value__remove {
+  color: var(--chakra-colors-fg) !important;
+}
+
+.select-custom__multi-value__remove:hover {
+  cursor: pointer !important;
+  background-color: var(--chakra-colors-danger-muted) !important;
+}
+
+.select-custom__indicator svg {
+  cursor: pointer;
+  width: 15px;
+  height: 15px;
+}

package/src/styles/index.css

@@ -0,0 +1,12 @@
+/* Fonts */
+@import "@fontsource-variable/geist/index.css";
+
+/* CSS for react-datepicker */
+@import "react-datepicker/dist/react-datepicker.css";
+
+/* CSS for react-phone-number-input */
+@import "react-phone-number-input/style.css";
+
+/* Custom components styles */
+@import "../components/date-picker/date-picker.css";
+@import "../components/select/select.css";