diff --git a/package.json b/package.json index 417476cc5f..aba59f955a 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "version": "lerna run version", "chromatic": "chromatic --exit-zero-on-changes --build-script-name=build:storybook", "gen:component": "plop component", + "gen:components-json": "node scripts/create-json-rep.mjs", "create:icon": "plop icon", "create:icon-variant": "plop icon-variant", "build:storybook:ci": "storybook build", @@ -64,6 +65,7 @@ "chromatic": "^9.1.0", "commitizen": "^4.2.0", "concurrently": "^8.2.2", + "glob": "^11.0.3", "http-server": "^14.1.1", "husky": "^8.0.3", "jsdom": "23.0.0", @@ -73,6 +75,7 @@ "plop": "3.1.2", "raw.macro": "^0.4.2", "react": "18.3.1", + "react-docgen": "^8.0.1", "react-dom": "18.3.1", "react-test-renderer": "18.3.1", "storybook": "^8.3.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d26e10201f..565c014a65 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,6 +90,9 @@ importers: concurrently: specifier: ^8.2.2 version: 8.2.2 + glob: + specifier: ^11.0.3 + version: 11.0.3 http-server: specifier: ^14.1.1 version: 14.1.1 @@ -117,6 +120,9 @@ importers: react: specifier: 18.3.1 version: 18.3.1 + react-docgen: + specifier: ^8.0.1 + version: 8.0.1 react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) @@ -440,22 +446,42 @@ packages: resolution: {integrity: sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==} engines: {node: '>=6.9.0'} + '@babel/code-frame@7.27.1': + resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==} + engines: {node: '>=6.9.0'} + '@babel/compat-data@7.24.6': resolution: {integrity: sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==} engines: {node: '>=6.9.0'} + '@babel/compat-data@7.28.4': + resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==} + engines: {node: '>=6.9.0'} + '@babel/core@7.24.6': resolution: {integrity: sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==} engines: {node: '>=6.9.0'} + '@babel/core@7.28.4': + resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==} + engines: {node: '>=6.9.0'} + '@babel/generator@7.24.6': resolution: {integrity: sha512-S7m4eNa6YAPJRHmKsLHIDJhNAGNKoWNiWefz1MBbpnt8g9lvMDl1hir4P9bo/57bQEmuwEhnRU/AMWsD0G/Fbg==} engines: {node: '>=6.9.0'} + '@babel/generator@7.28.3': + resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==} + engines: {node: '>=6.9.0'} + '@babel/helper-compilation-targets@7.24.6': resolution: {integrity: sha512-VZQ57UsDGlX/5fFA7GkVPplZhHsVc+vuErWgdOiysI9Ksnw0Pbbd6pnPiR/mmJyKHgyIW0c7KT32gmhiF+cirg==} engines: {node: '>=6.9.0'} + '@babel/helper-compilation-targets@7.27.2': + resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==} + engines: {node: '>=6.9.0'} + '@babel/helper-environment-visitor@7.24.6': resolution: {integrity: sha512-Y50Cg3k0LKLMjxdPjIl40SdJgMB85iXn27Vk/qbHZCFx/o5XO3PSnpi675h1KEmmDb6OFArfd5SCQEQ5Q4H88g==} engines: {node: '>=6.9.0'} @@ -464,6 +490,10 @@ packages: resolution: {integrity: sha512-xpeLqeeRkbxhnYimfr2PC+iA0Q7ljX/d1eZ9/inYbmfG2jpl8Lu3DyXvpOAnrS5kxkfOWJjioIMQsaMBXFI05w==} engines: {node: '>=6.9.0'} + '@babel/helper-globals@7.28.0': + resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==} + engines: {node: '>=6.9.0'} + '@babel/helper-hoist-variables@7.24.6': resolution: {integrity: sha512-SF/EMrC3OD7dSta1bLJIlrsVxwtd0UpjRJqLno6125epQMJ/kyFmpTT4pbvPbdQHzCHg+biQ7Syo8lnDtbR+uA==} engines: {node: '>=6.9.0'} @@ -472,12 +502,22 @@ packages: resolution: {integrity: sha512-a26dmxFJBF62rRO9mmpgrfTLsAuyHk4e1hKTUkD/fcMfynt8gvEKwQPQDVxWhca8dHoDck+55DFt42zV0QMw5g==} engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.27.1': + resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==} + engines: {node: '>=6.9.0'} + '@babel/helper-module-transforms@7.24.6': resolution: {integrity: sha512-Y/YMPm83mV2HJTbX1Qh2sjgjqcacvOlhbzdCCsSlblOKjSYmQqEbO6rUniWQyRo9ncyfjT8hnUjlG06RXDEmcA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 + '@babel/helper-module-transforms@7.28.3': + resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + '@babel/helper-plugin-utils@7.24.6': resolution: {integrity: sha512-MZG/JcWfxybKwsA9N9PmtF2lOSFSEMVCpIRrbxccZFLJPrJciJdG/UhSh5W96GEteJI2ARqm5UAHxISwRDLSNg==} engines: {node: '>=6.9.0'} @@ -494,18 +534,34 @@ packages: resolution: {integrity: sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==} engines: {node: '>=6.9.0'} + '@babel/helper-string-parser@7.27.1': + resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} + engines: {node: '>=6.9.0'} + '@babel/helper-validator-identifier@7.24.6': resolution: {integrity: sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==} engines: {node: '>=6.9.0'} + '@babel/helper-validator-identifier@7.27.1': + resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==} + engines: {node: '>=6.9.0'} + '@babel/helper-validator-option@7.24.6': resolution: {integrity: sha512-Jktc8KkF3zIkePb48QO+IapbXlSapOW9S+ogZZkcO6bABgYAxtZcjZ/O005111YLf+j4M84uEgwYoidDkXbCkQ==} engines: {node: '>=6.9.0'} + '@babel/helper-validator-option@7.27.1': + resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==} + engines: {node: '>=6.9.0'} + '@babel/helpers@7.24.6': resolution: {integrity: sha512-V2PI+NqnyFu1i0GyTd/O/cTpxzQCYioSkUIRmgo7gFEHKKCg5w46+r/A6WeUR1+P3TeQ49dspGPNd/E3n9AnnA==} engines: {node: '>=6.9.0'} + '@babel/helpers@7.28.4': + resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==} + engines: {node: '>=6.9.0'} + '@babel/highlight@7.24.6': resolution: {integrity: sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==} engines: {node: '>=6.9.0'} @@ -515,6 +571,11 @@ packages: engines: {node: '>=6.0.0'} hasBin: true + '@babel/parser@7.28.4': + resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==} + engines: {node: '>=6.0.0'} + hasBin: true + '@babel/plugin-syntax-async-generators@7.8.4': resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} peerDependencies: @@ -608,14 +669,26 @@ packages: resolution: {integrity: sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==} engines: {node: '>=6.9.0'} + '@babel/template@7.27.2': + resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==} + engines: {node: '>=6.9.0'} + '@babel/traverse@7.24.6': resolution: {integrity: sha512-OsNjaJwT9Zn8ozxcfoBc+RaHdj3gFmCmYoQLUII1o6ZrUwku0BMg80FoOTPx+Gi6XhcQxAYE4xyjPTo4SxEQqw==} engines: {node: '>=6.9.0'} + '@babel/traverse@7.28.4': + resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==} + engines: {node: '>=6.9.0'} + '@babel/types@7.24.6': resolution: {integrity: sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==} engines: {node: '>=6.9.0'} + '@babel/types@7.28.4': + resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==} + engines: {node: '>=6.9.0'} + '@base2/pretty-print-object@1.0.1': resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==} @@ -1383,6 +1456,14 @@ packages: '@internationalized/string@3.2.4': resolution: {integrity: sha512-BcyadXPn89Ae190QGZGDUZPqxLj/xsP4U1Br1oSy8yfIjmpJ8cJtGYleaodqW/EmzFjwELtwDojLkf3FhV6SjA==} + '@isaacs/balanced-match@4.0.1': + resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==} + engines: {node: 20 || >=22} + + '@isaacs/brace-expansion@5.0.0': + resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==} + engines: {node: 20 || >=22} + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -1474,10 +1555,16 @@ packages: typescript: optional: true + '@jridgewell/gen-mapping@0.3.13': + resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} + '@jridgewell/gen-mapping@0.3.5': resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} engines: {node: '>=6.0.0'} + '@jridgewell/remapping@2.3.5': + resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==} + '@jridgewell/resolve-uri@3.1.2': resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} @@ -1492,9 +1579,15 @@ packages: '@jridgewell/sourcemap-codec@1.4.15': resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} + '@jridgewell/sourcemap-codec@1.5.5': + resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} + '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + '@jridgewell/trace-mapping@0.3.30': + resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==} + '@lerna/create@8.1.4': resolution: {integrity: sha512-lcfDXrDIESnpATGwIMCy0b/PcIVbha8q0d1WbXixFox+m2eno5MNHoteddUjhFY0CN1xM2259a8TyznCoY8GHw==} engines: {node: '>=18.0.0'} @@ -3290,6 +3383,9 @@ packages: '@types/babel__traverse@7.20.6': resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==} + '@types/babel__traverse@7.28.0': + resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==} + '@types/body-parser@1.19.5': resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} @@ -4003,6 +4099,11 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + browserslist@4.25.4: + resolution: {integrity: sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + bser@2.1.1: resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==} @@ -4085,6 +4186,9 @@ packages: caniuse-lite@1.0.30001637: resolution: {integrity: sha512-1x0qRI1mD1o9e+7mBI7XtzFAP4XszbHaVWsMiGbSPLYekKTJF7K+FNk6AsXH4sUpc+qrsI3pVgf1Jdl/uGkuSQ==} + caniuse-lite@1.0.30001741: + resolution: {integrity: sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==} + capital-case@1.0.4: resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==} @@ -4542,6 +4646,10 @@ packages: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} + cross-spawn@7.0.6: + resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} + engines: {node: '>= 8'} + crypto-random-string@4.0.0: resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==} engines: {node: '>=12'} @@ -5017,6 +5125,9 @@ packages: electron-to-chromium@1.4.812: resolution: {integrity: sha512-7L8fC2Ey/b6SePDFKR2zHAy4mbdp1/38Yk5TsARO66W3hC5KEaeKMMHoxwtuH+jcu2AYLSn9QX04i95t6Fl1Hg==} + electron-to-chromium@1.5.214: + resolution: {integrity: sha512-TpvUNdha+X3ybfU78NoQatKvQEm1oq3lf2QbnmCEdw+Bd9RuIAY+hJTvq1avzHM0f7EJfnH3vbCnbzKzisc/9Q==} + emittery@0.13.1: resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==} engines: {node: '>=12'} @@ -5120,6 +5231,10 @@ packages: resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} engines: {node: '>=6'} + escalade@3.2.0: + resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} + engines: {node: '>=6'} + escape-html@1.0.3: resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} @@ -5429,6 +5544,10 @@ packages: resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==} engines: {node: '>=14'} + foreground-child@3.3.1: + resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==} + engines: {node: '>=14'} + fork-ts-checker-webpack-plugin@8.0.0: resolution: {integrity: sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==} engines: {node: '>=12.13.0', yarn: '>=1.0.0'} @@ -5621,6 +5740,11 @@ packages: engines: {node: '>=16 || 14 >=14.18'} hasBin: true + glob@11.0.3: + resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==} + engines: {node: 20 || >=22} + hasBin: true + glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Glob versions prior to v9 are no longer supported @@ -6354,6 +6478,10 @@ packages: resolution: {integrity: sha512-htOzIMPbpLid/Gq9/zaz9SfExABxqRe1sSCdxntlO/aMD6u0issZQiY25n2GKQUtJ02j7z5sfptlAOMpWWOmvw==} engines: {node: '>=14'} + jackspeak@4.1.1: + resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==} + engines: {node: 20 || >=22} + jake@10.9.1: resolution: {integrity: sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==} engines: {node: '>=10'} @@ -6562,6 +6690,11 @@ packages: engines: {node: '>=4'} hasBin: true + jsesc@3.1.0: + resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==} + engines: {node: '>=6'} + hasBin: true + json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} @@ -6925,6 +7058,10 @@ packages: resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==} engines: {node: 14 || >=16.14} + lru-cache@11.2.1: + resolution: {integrity: sha512-r8LA6i4LP4EeWOhqBaZZjDWwehd1xUJPCJd9Sv300H0ZmcUER4+JPh7bqqZeqs1o5pgtgvXm+d9UGrB5zZGDiQ==} + engines: {node: 20 || >=22} + lru-cache@4.1.5: resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==} @@ -7263,6 +7400,10 @@ packages: resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} engines: {node: '>=4'} + minimatch@10.0.3: + resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==} + engines: {node: 20 || >=22} + minimatch@3.0.5: resolution: {integrity: sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==} @@ -7507,6 +7648,9 @@ packages: node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + node-releases@2.0.20: + resolution: {integrity: sha512-7gK6zSXEH6neM212JgfYFXe+GmZQM+fia5SsusuBIUgnPheLFBmIPhtFoAQRj8/7wASYQnbDlHPVwY0BefoFgA==} + nopt@7.2.1: resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -7803,6 +7947,9 @@ packages: resolution: {integrity: sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==} engines: {node: '>=8'} + package-json-from-dist@1.0.1: + resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + package-manager-detector@0.2.2: resolution: {integrity: sha512-VgXbyrSNsml4eHWIvxxG/nTL4wgybMTXCV2Un/+yEc3aDKKU6nQBZjbeP3Pl3qm9Qg92X/1ng4ffvCeD/zwHgg==} @@ -7907,6 +8054,10 @@ packages: resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==} engines: {node: '>=16 || 14 >=14.18'} + path-scurry@2.0.0: + resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==} + engines: {node: 20 || >=22} + path-to-regexp@0.1.7: resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==} @@ -8261,6 +8412,10 @@ packages: resolution: {integrity: sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==} engines: {node: '>=16.14.0'} + react-docgen@8.0.1: + resolution: {integrity: sha512-kQKsqPLplY3Hx4jGnM3jpQcG3FQDt7ySz32uTHt3C9HAe45kNXG+3o16Eqn3Fw1GtMfHoN3b4J/z2e6cZJCmqQ==} + engines: {node: ^20.9.0 || >=22} + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -9560,6 +9715,12 @@ packages: peerDependencies: browserslist: '>= 4.21.0' + update-browserslist-db@1.1.3: + resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + upper-case-first@2.0.2: resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==} @@ -10140,8 +10301,16 @@ snapshots: '@babel/highlight': 7.24.6 picocolors: 1.0.1 + '@babel/code-frame@7.27.1': + dependencies: + '@babel/helper-validator-identifier': 7.27.1 + js-tokens: 4.0.0 + picocolors: 1.1.1 + '@babel/compat-data@7.24.6': {} + '@babel/compat-data@7.28.4': {} + '@babel/core@7.24.6': dependencies: '@ampproject/remapping': 2.3.0 @@ -10162,6 +10331,26 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/core@7.28.4': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/generator': 7.28.3 + '@babel/helper-compilation-targets': 7.27.2 + '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4) + '@babel/helpers': 7.28.4 + '@babel/parser': 7.28.4 + '@babel/template': 7.27.2 + '@babel/traverse': 7.28.4 + '@babel/types': 7.28.4 + '@jridgewell/remapping': 2.3.5 + convert-source-map: 2.0.0 + debug: 4.3.7 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + '@babel/generator@7.24.6': dependencies: '@babel/types': 7.24.6 @@ -10169,6 +10358,14 @@ snapshots: '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 + '@babel/generator@7.28.3': + dependencies: + '@babel/parser': 7.28.4 + '@babel/types': 7.28.4 + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.30 + jsesc: 3.1.0 + '@babel/helper-compilation-targets@7.24.6': dependencies: '@babel/compat-data': 7.24.6 @@ -10177,6 +10374,14 @@ snapshots: lru-cache: 5.1.1 semver: 6.3.1 + '@babel/helper-compilation-targets@7.27.2': + dependencies: + '@babel/compat-data': 7.28.4 + '@babel/helper-validator-option': 7.27.1 + browserslist: 4.25.4 + lru-cache: 5.1.1 + semver: 6.3.1 + '@babel/helper-environment-visitor@7.24.6': {} '@babel/helper-function-name@7.24.6': @@ -10184,6 +10389,8 @@ snapshots: '@babel/template': 7.24.6 '@babel/types': 7.24.6 + '@babel/helper-globals@7.28.0': {} + '@babel/helper-hoist-variables@7.24.6': dependencies: '@babel/types': 7.24.6 @@ -10192,6 +10399,13 @@ snapshots: dependencies: '@babel/types': 7.24.6 + '@babel/helper-module-imports@7.27.1': + dependencies: + '@babel/traverse': 7.28.4 + '@babel/types': 7.28.4 + transitivePeerDependencies: + - supports-color + '@babel/helper-module-transforms@7.24.6(@babel/core@7.24.6)': dependencies: '@babel/core': 7.24.6 @@ -10201,6 +10415,15 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.6 '@babel/helper-validator-identifier': 7.24.6 + '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4)': + dependencies: + '@babel/core': 7.28.4 + '@babel/helper-module-imports': 7.27.1 + '@babel/helper-validator-identifier': 7.27.1 + '@babel/traverse': 7.28.4 + transitivePeerDependencies: + - supports-color + '@babel/helper-plugin-utils@7.24.6': {} '@babel/helper-simple-access@7.24.6': @@ -10213,15 +10436,26 @@ snapshots: '@babel/helper-string-parser@7.24.6': {} + '@babel/helper-string-parser@7.27.1': {} + '@babel/helper-validator-identifier@7.24.6': {} + '@babel/helper-validator-identifier@7.27.1': {} + '@babel/helper-validator-option@7.24.6': {} + '@babel/helper-validator-option@7.27.1': {} + '@babel/helpers@7.24.6': dependencies: '@babel/template': 7.24.6 '@babel/types': 7.24.6 + '@babel/helpers@7.28.4': + dependencies: + '@babel/template': 7.27.2 + '@babel/types': 7.28.4 + '@babel/highlight@7.24.6': dependencies: '@babel/helper-validator-identifier': 7.24.6 @@ -10233,6 +10467,10 @@ snapshots: dependencies: '@babel/types': 7.24.6 + '@babel/parser@7.28.4': + dependencies: + '@babel/types': 7.28.4 + '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.6)': dependencies: '@babel/core': 7.24.6 @@ -10323,6 +10561,12 @@ snapshots: '@babel/parser': 7.24.6 '@babel/types': 7.24.6 + '@babel/template@7.27.2': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/parser': 7.28.4 + '@babel/types': 7.28.4 + '@babel/traverse@7.24.6': dependencies: '@babel/code-frame': 7.24.6 @@ -10333,17 +10577,34 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.6 '@babel/parser': 7.24.6 '@babel/types': 7.24.6 - debug: 4.3.5 + debug: 4.3.7 globals: 11.12.0 transitivePeerDependencies: - supports-color + '@babel/traverse@7.28.4': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/generator': 7.28.3 + '@babel/helper-globals': 7.28.0 + '@babel/parser': 7.28.4 + '@babel/template': 7.27.2 + '@babel/types': 7.28.4 + debug: 4.3.7 + transitivePeerDependencies: + - supports-color + '@babel/types@7.24.6': dependencies: '@babel/helper-string-parser': 7.24.6 '@babel/helper-validator-identifier': 7.24.6 to-fast-properties: 2.0.0 + '@babel/types@7.28.4': + dependencies: + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.27.1 + '@base2/pretty-print-object@1.0.1': {} '@bcoe/v8-coverage@0.2.3': {} @@ -10939,6 +11200,12 @@ snapshots: dependencies: '@swc/helpers': 0.5.11 + '@isaacs/balanced-match@4.0.1': {} + + '@isaacs/brace-expansion@5.0.0': + dependencies: + '@isaacs/balanced-match': 4.0.1 + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -11134,12 +11401,22 @@ snapshots: optionalDependencies: typescript: 5.5.2 + '@jridgewell/gen-mapping@0.3.13': + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/trace-mapping': 0.3.30 + '@jridgewell/gen-mapping@0.3.5': dependencies: '@jridgewell/set-array': 1.2.1 '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.25 + '@jridgewell/remapping@2.3.5': + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + '@jridgewell/resolve-uri@3.1.2': {} '@jridgewell/set-array@1.2.1': {} @@ -11151,11 +11428,18 @@ snapshots: '@jridgewell/sourcemap-codec@1.4.15': {} + '@jridgewell/sourcemap-codec@1.5.5': {} + '@jridgewell/trace-mapping@0.3.25': dependencies: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/trace-mapping@0.3.30': + dependencies: + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.4.15 + '@lerna/create@8.1.4(@swc/core@1.5.24(@swc/helpers@0.5.13))(encoding@0.1.13)(typescript@5.5.2)': dependencies: '@npmcli/run-script': 7.0.2 @@ -13470,6 +13754,10 @@ snapshots: dependencies: '@babel/types': 7.24.6 + '@types/babel__traverse@7.28.0': + dependencies: + '@babel/types': 7.28.4 + '@types/body-parser@1.19.5': dependencies: '@types/connect': 3.4.38 @@ -14285,6 +14573,13 @@ snapshots: node-releases: 2.0.14 update-browserslist-db: 1.0.16(browserslist@4.23.1) + browserslist@4.25.4: + dependencies: + caniuse-lite: 1.0.30001741 + electron-to-chromium: 1.5.214 + node-releases: 2.0.20 + update-browserslist-db: 1.1.3(browserslist@4.25.4) + bser@2.1.1: dependencies: node-int64: 0.4.0 @@ -14388,6 +14683,8 @@ snapshots: caniuse-lite@1.0.30001637: {} + caniuse-lite@1.0.30001741: {} + capital-case@1.0.4: dependencies: no-case: 3.0.4 @@ -14902,6 +15199,12 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + cross-spawn@7.0.6: + dependencies: + path-key: 3.1.1 + shebang-command: 2.0.0 + which: 2.0.2 + crypto-random-string@4.0.0: dependencies: type-fest: 1.4.0 @@ -15382,6 +15685,8 @@ snapshots: electron-to-chromium@1.4.812: {} + electron-to-chromium@1.5.214: {} + emittery@0.13.1: {} emoji-regex@8.0.0: {} @@ -15468,14 +15773,14 @@ snapshots: esbuild-register@3.5.0(esbuild@0.20.2): dependencies: - debug: 4.3.5 + debug: 4.3.7 esbuild: 0.20.2 transitivePeerDependencies: - supports-color esbuild-register@3.5.0(esbuild@0.21.5): dependencies: - debug: 4.3.5 + debug: 4.3.7 esbuild: 0.21.5 transitivePeerDependencies: - supports-color @@ -15560,6 +15865,8 @@ snapshots: escalade@3.1.2: {} + escalade@3.2.0: {} + escape-html@1.0.3: {} escape-string-regexp@1.0.5: {} @@ -15948,6 +16255,11 @@ snapshots: cross-spawn: 7.0.3 signal-exit: 4.1.0 + foreground-child@3.3.1: + dependencies: + cross-spawn: 7.0.6 + signal-exit: 4.1.0 + fork-ts-checker-webpack-plugin@8.0.0(typescript@5.5.2)(webpack@5.91.0(@swc/core@1.5.24(@swc/helpers@0.5.13))(esbuild@0.21.5)): dependencies: '@babel/code-frame': 7.24.6 @@ -16146,6 +16458,15 @@ snapshots: minipass: 7.1.2 path-scurry: 1.11.1 + glob@11.0.3: + dependencies: + foreground-child: 3.3.1 + jackspeak: 4.1.1 + minimatch: 10.0.3 + minipass: 7.1.2 + package-json-from-dist: 1.0.1 + path-scurry: 2.0.0 + glob@7.2.3: dependencies: fs.realpath: 1.0.0 @@ -16997,7 +17318,7 @@ snapshots: '@babel/parser': 7.24.6 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 - semver: 7.6.2 + semver: 7.6.3 transitivePeerDependencies: - supports-color @@ -17018,7 +17339,7 @@ snapshots: istanbul-lib-source-maps@4.0.1: dependencies: - debug: 4.3.5 + debug: 4.3.7 istanbul-lib-coverage: 3.2.2 source-map: 0.6.1 transitivePeerDependencies: @@ -17035,6 +17356,10 @@ snapshots: optionalDependencies: '@pkgjs/parseargs': 0.11.0 + jackspeak@4.1.1: + dependencies: + '@isaacs/cliui': 8.0.2 + jake@10.9.1: dependencies: async: 3.2.5 @@ -17341,7 +17666,7 @@ snapshots: jest-util: 29.7.0 natural-compare: 1.4.0 pretty-format: 29.7.0 - semver: 7.6.2 + semver: 7.6.3 transitivePeerDependencies: - supports-color @@ -17470,6 +17795,8 @@ snapshots: jsesc@2.5.2: {} + jsesc@3.1.0: {} + json-buffer@3.0.1: {} json-parse-better-errors@1.0.2: {} @@ -17884,6 +18211,8 @@ snapshots: lru-cache@10.2.2: {} + lru-cache@11.2.1: {} + lru-cache@4.1.5: dependencies: pseudomap: 1.0.2 @@ -18558,6 +18887,10 @@ snapshots: min-indent@1.0.1: {} + minimatch@10.0.3: + dependencies: + '@isaacs/brace-expansion': 5.0.0 + minimatch@3.0.5: dependencies: brace-expansion: 1.1.11 @@ -18860,6 +19193,8 @@ snapshots: node-releases@2.0.14: {} + node-releases@2.0.20: {} + nopt@7.2.1: dependencies: abbrev: 2.0.0 @@ -19275,6 +19610,8 @@ snapshots: lodash.flattendeep: 4.4.0 release-zalgo: 1.0.0 + package-json-from-dist@1.0.1: {} + package-manager-detector@0.2.2: {} pacote@17.0.7: @@ -19405,6 +19742,11 @@ snapshots: lru-cache: 10.2.2 minipass: 7.1.2 + path-scurry@2.0.0: + dependencies: + lru-cache: 11.2.1 + minipass: 7.1.2 + path-to-regexp@0.1.7: {} path-type@3.0.0: @@ -19718,6 +20060,21 @@ snapshots: transitivePeerDependencies: - supports-color + react-docgen@8.0.1: + dependencies: + '@babel/core': 7.28.4 + '@babel/traverse': 7.28.4 + '@babel/types': 7.28.4 + '@types/babel__core': 7.20.5 + '@types/babel__traverse': 7.28.0 + '@types/doctrine': 0.0.9 + '@types/resolve': 1.20.6 + doctrine: 3.0.0 + resolve: 1.22.8 + strip-indent: 4.0.0 + transitivePeerDependencies: + - supports-color + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -21234,6 +21591,12 @@ snapshots: escalade: 3.1.2 picocolors: 1.0.1 + update-browserslist-db@1.1.3(browserslist@4.25.4): + dependencies: + browserslist: 4.25.4 + escalade: 3.2.0 + picocolors: 1.1.1 + upper-case-first@2.0.2: dependencies: tslib: 2.6.3 @@ -21367,9 +21730,9 @@ snapshots: vite-node@1.6.0(@types/node@20.14.9)(lightningcss@1.27.0)(terser@5.31.0): dependencies: cac: 6.7.14 - debug: 4.3.5 + debug: 4.3.7 pathe: 1.1.2 - picocolors: 1.0.1 + picocolors: 1.1.1 vite: 5.4.9(@types/node@20.14.9)(lightningcss@1.27.0)(terser@5.31.0) transitivePeerDependencies: - '@types/node' diff --git a/scripts/README.md b/scripts/README.md index e8e9c97c72..03f2ed9fe9 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -1,6 +1,72 @@ -# scripts +# scripts -This directory contains scripts that are used on the CI/CD pipelines. +This directory contains scripts that are used on automated processes (CI/CD, documentation generation, etc.). + +- [`create-json-rep.mjs`](#create-json-repmjs) + - [Features](#features) + - [Output](#output) + - [Usage](#usage) + - [Configuration](#configuration) +- [`configure-git-user.sh`](#configure-git-usersh) + - [Testing](#testing) + +## [`create-json-rep.mjs`](create-json-rep.mjs) + +Generates a comprehensive JSON representation of all components in the Shoreline design system. This script analyzes TypeScript/React component files and extracts metadata including component descriptions, prop types, default values, and JSDoc comments. + +The script uses a hybrid approach combining `react-docgen` with custom TypeScript parsing to provide accurate type information even for complex component definitions. + +### Features + +- **Automatic component discovery**: Scans the components directory and filters out test files, stories, and utility files +- **Rich type extraction**: Properly extracts union types (`'primary' | 'secondary'`), function types, CSS property types, and more +- **TypeScript support**: Uses both `react-docgen` and custom regex-based parsing for comprehensive TypeScript interface analysis +- **Multi-line type support**: Handles complex type definitions that span multiple lines +- **Fallback parsing**: When `react-docgen` fails, falls back to manual extraction for basic component information +- **Verbose mode**: Optional detailed logging for debugging and monitoring the parsing process + +### Output + +The script generates a JSON file containing component metadata in the following structure: + +```json +{ + "ComponentName": { + "displayName": "ComponentName", + "description": "Component description from JSDoc", + "props": { + "propName": { + "type": "'value1' | 'value2' | 'value3'", + "required": true, + "description": "Prop description", + "defaultValue": "'value1'" + } + }, + "methods": [], + "composes": [], + "examples": [] + } +} +``` + +### Usage + +The script is configured to run via npm/pnpm script: + +```bash +# Generate component documentation +pnpm gen:components-json + +# Run with verbose output for debugging +node scripts/create-json-rep.mjs --verbose +``` + +### Configuration + +The script is pre-configured for the Shoreline project structure: +- **Input path**: `./packages/shoreline/src/components` +- **Output file**: `./shoreline-components.json` +- **File extensions**: `.jsx`, `.tsx`, `.js`, `.ts` ## [`configure-git-user.sh`](configure-git-user.sh) diff --git a/scripts/create-json-rep.mjs b/scripts/create-json-rep.mjs new file mode 100644 index 0000000000..83fae69178 --- /dev/null +++ b/scripts/create-json-rep.mjs @@ -0,0 +1,329 @@ +import fs from 'fs'; +import path from 'path'; +import { sync } from 'glob'; +import { parse, builtinResolvers, builtinImporters } from 'react-docgen'; + +class ComponentDocGenerator { + constructor(options = {}) { + this.componentsPath = options.componentsPath || './src/components'; + this.outputPath = options.outputPath || './component-docs.json'; + this.extensions = options.extensions || ['.jsx', '.tsx', '.js', '.ts']; + this.verbose = options.verbose || false; + } + + async generateDocs() { + const componentFiles = this.findComponentFiles(); + const docs = {}; + let processedCount = 0; + let skippedCount = 0; + + console.log(`Found ${componentFiles.length} component files to process...`); + + for (const file of componentFiles) { + try { + if (this.verbose) { + console.log(`Processing: ${file}`); + } + + // Read the source for both react-docgen and our custom type extraction + const source = fs.readFileSync(file, 'utf8'); + const extractedTypes = this.extractTypesFromSource(source, file); + + const componentDocs = await this.parseComponent(file); + if (componentDocs && Array.isArray(componentDocs)) { + // react-docgen can return multiple components from one file + componentDocs.forEach((componentDoc, index) => { + const componentName = componentDoc.displayName || + this.getComponentName(file) + (index > 0 ? `_${index}` : ''); + docs[componentName] = this.formatComponentDoc(componentDoc, extractedTypes); + processedCount++; + }); + } else if (componentDocs) { + // Single component + const componentName = componentDocs.displayName || this.getComponentName(file); + docs[componentName] = this.formatComponentDoc(componentDocs, extractedTypes); + processedCount++; + } else { + skippedCount++; + if (this.verbose) { + console.log(` - No component found in ${file}`); + } + } + } catch (error) { + skippedCount++; + if (this.verbose) { + console.warn(` - Failed to parse ${file}: ${error.message}`); + } + } + } + + console.log(`Processed: ${processedCount} components, Skipped: ${skippedCount} files`); + this.writeDocs(docs); + return docs; + } + + findComponentFiles() { + const patterns = this.extensions.map(ext => + `${this.componentsPath}/**/*${ext}` + ); + + const files = patterns.flatMap(pattern => sync(pattern)); + + // Filter out common non-component files + return files.filter(file => { + const basename = path.basename(file); + const dirname = path.dirname(file); + + // Skip test files, story files, spec files + if (basename.match(/\.(test|spec|stories|story)\./)) return false; + + // Skip utility files and type definition files + if (basename.match(/\.(types?|utils?|constants?|helpers?)\./)) return false; + + // Skip files in __tests__, tests, stories directories + if (dirname.match(/(tests?|stories?|__tests__|__stories__)$/)) return false; + + // Skip obvious non-component files + if (basename.startsWith('use-') || basename.startsWith('with-')) return false; + if (basename.includes('context') || basename.includes('provider') && !basename.includes('tooltip-provider')) return false; + + // Only include files that likely contain components + return true; + }); + } + + async parseComponent(filePath) { + const source = fs.readFileSync(filePath, 'utf8'); + + try { + // Use the new react-docgen v8 API with proper TypeScript support + const components = parse(source, { + resolver: builtinResolvers.findExportedComponentDefinitions, + importer: builtinImporters.fsImporter, + babelOptions: { + parserOpts: { + plugins: ['typescript', 'jsx'], + strictMode: false + } + }, + filename: filePath + }); + return Array.isArray(components) ? components : [components]; + } catch (error) { + // If the main resolver fails, try the legacy resolver + try { + const components = parse(source, { + resolver: builtinResolvers.findAllComponentDefinitions, + importer: builtinImporters.fsImporter, + babelOptions: { + parserOpts: { + plugins: ['typescript', 'jsx'] + } + }, + filename: filePath + }); + return Array.isArray(components) ? components : [components]; + } catch (secondError) { + // If react-docgen fails completely, try to extract basic info manually + if (this.shouldAttemptFallback(source, filePath)) { + return this.fallbackParse(source, filePath); + } + + if (this.verbose) { + console.log(` - Parse error: ${secondError.message}`); + } + return null; + } + } + } + + shouldAttemptFallback(source, filePath) { + // Only attempt fallback for files that look like they contain components + const hasComponentPattern = /export\s+(const|function|class)\s+[A-Z][a-zA-Z0-9]*/.test(source); + const hasForwardRef = /forwardRef/.test(source); + const hasExportDefault = /export\s+default/.test(source); + const isNotJustExport = !/^import[\s\S]*export\s+\{[\s\S]*\}\s*$/.test(source.trim()); + + return (hasComponentPattern || hasForwardRef || hasExportDefault) && isNotJustExport; + } + + extractTypesFromSource(source, filePath) { + // Enhanced type extraction using regex patterns for common TypeScript patterns + const types = {}; + + // Extract interface or type definitions that might be component props + const interfaceRegex = /(?:interface|type)\s+(\w+Options|\w+Props)\s*(?:extends[^{]*)?{([^}]+)}/gs; + let match; + + while ((match = interfaceRegex.exec(source)) !== null) { + const [, interfaceName, interfaceBody] = match; + if (interfaceName.includes('Props') || interfaceName.includes('Options')) { + // Extract properties from the interface body - handle multi-line types + const propRegex = /\/\*\*\s*([\s\S]*?)\s*\*\/\s*(\w+)(\?)?:\s*([\s\S]*?)(?=\s*\/\*\*|\s*\w+\s*[?:]|\s*})/g; + let propMatch; + + while ((propMatch = propRegex.exec(interfaceBody)) !== null) { + const [, comment, propName, optional, propType] = propMatch; + + // Clean up the comment + const description = comment + .split('\n') + .map(line => line.replace(/^\s*\*\s?/, '').trim()) + .filter(line => !line.startsWith('@')) + .join(' ') + .trim(); + + // Clean up the type - handle multi-line types + let cleanType = propType + .replace(/\s+/g, ' ') // Normalize whitespace + .trim() + .replace(/,$/, ''); // Remove trailing comma + + // Handle union types that span multiple lines + if (cleanType.includes('|')) { + // Extract literal string values from union types + const literalMatches = cleanType.match(/'([^']+)'/g); + if (literalMatches) { + cleanType = literalMatches.join(' | '); + } else { + // Clean up pipe-separated types + cleanType = cleanType + .split('|') + .map(part => part.trim()) + .filter(part => part && part !== '') + .join(' | '); + } + } + + types[propName] = { + type: cleanType, + required: !optional, + description: description + }; + } + } + } + + return types; + } + + fallbackParse(source, filePath) { + // Extract basic component information using regex patterns + const componentName = this.getComponentName(filePath); + + // Try to extract JSDoc comment + const jsDocMatch = source.match(/\/\*\*\s*([\s\S]*?)\s*\*\//); + let description = ''; + + if (jsDocMatch) { + description = jsDocMatch[1] + .split('\n') + .map(line => line.replace(/^\s*\*\s?/, '').trim()) + .filter(line => !line.startsWith('@')) + .join(' ') + .trim(); + } + + return [{ + displayName: componentName, + description: description, + props: {}, // Could be enhanced to extract TypeScript interface props + methods: [], + composes: [], + examples: [] + }]; + } + + getComponentName(filePath) { + return path.basename(filePath, path.extname(filePath)); + } + + formatComponentDoc(componentDoc, extractedTypes = {}) { + // Clean up description by removing JSDoc tags and formatting + let description = componentDoc.description || ''; + if (description) { + description = description + .replace(/@\w+\s+\w+/g, '') // Remove @status, @example tags + .replace(/\n@example[\s\S]*$/g, '') // Remove example blocks + .replace(/\s+/g, ' ') // Normalize whitespace + .trim(); + } + + return { + displayName: componentDoc.displayName || 'Unknown', + description: description, + props: Object.entries(componentDoc.props || {}).reduce((acc, [propName, propData]) => { + // Better type extraction + let propType = 'unknown'; + let required = propData.required || false; + let propDescription = (propData.description || '').replace(/\s+/g, ' ').trim(); + + // Use react-docgen data if available + if (propData.type) { + if (propData.type.name) { + propType = propData.type.name; + } else if (propData.type.raw) { + propType = propData.type.raw; + } else if (propData.type.value) { + // Handle union types, enums, etc. + if (Array.isArray(propData.type.value)) { + propType = propData.type.value.map(v => v.value || v.name || v).join(' | '); + } else { + propType = propData.type.value; + } + } + } + + // If react-docgen didn't find good type info, use our extracted types + if (propType === 'unknown' && extractedTypes[propName]) { + propType = extractedTypes[propName].type; + if (!propDescription && extractedTypes[propName].description) { + propDescription = extractedTypes[propName].description; + } + if (extractedTypes[propName].required !== undefined) { + required = extractedTypes[propName].required; + } + } + + // Clean up the type string + propType = propType.replace(/import\([^)]+\)\./, '').replace(/React\./, ''); + + acc[propName] = { + type: propType, + required: required, + description: propDescription, + defaultValue: propData.defaultValue?.value || undefined + }; + return acc; + }, {}), + methods: componentDoc.methods || [], + composes: componentDoc.composes || [], + examples: componentDoc.examples || [] + }; + } + + writeDocs(docs) { + const outputDir = path.dirname(this.outputPath); + if (!fs.existsSync(outputDir)) { + fs.mkdirSync(outputDir, { recursive: true }); + } + + fs.writeFileSync(this.outputPath, JSON.stringify(docs, null, 2)); + console.log(`Generated documentation for ${Object.keys(docs).length} components`); + console.log(`Output written to: ${path.resolve(this.outputPath)}`); + } +} + +// Usage +const generator = new ComponentDocGenerator({ + componentsPath: './packages/shoreline/src/components', + outputPath: './shoreline-components.json', + verbose: process.argv.includes('--verbose') || process.argv.includes('-v') +}); + + +generator.generateDocs().then(docs => { + console.log('Documentation generated successfully!'); +}).catch(error => { + console.error('Error generating documentation:', error); +}); diff --git a/shoreline-components.json b/shoreline-components.json new file mode 100644 index 0000000000..3f60331495 --- /dev/null +++ b/shoreline-components.json @@ -0,0 +1,2339 @@ +{ + "VisuallyHidden": { + "displayName": "VisuallyHidden", + "description": "Renders an element that is visually only to screen readers", + "props": { + "children": { + "type": "unknown", + "required": false, + "description": "Content that will be only available for a screen reader" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Tooltip": { + "displayName": "Tooltip", + "description": "Tooltips display a label that was omitted when hovering the element. They shouldn't be essential for users to complete tasks.", + "props": { + "label": { + "type": "unknown", + "required": true, + "description": "Text displayed on the popover" + } + }, + "methods": [], + "composes": [ + "InheritedOptions" + ], + "examples": [] + }, + "TooltipTrigger": { + "displayName": "TooltipTrigger", + "description": "The anchor of the Tooltip", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TooltipPopover": { + "displayName": "TooltipPopover", + "description": "Popover of the Tooltip", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "gutter": { + "type": "unknown", + "required": false, + "description": "Distance (in px) from the trigger reference @default 2" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TooltipArrow": { + "displayName": "TooltipArrow", + "description": "Arrow of the Tooltip", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Toast": { + "displayName": "Toast", + "description": "Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss.", + "props": { + "variant": { + "type": "ToastVariant", + "required": false, + "description": "Toast variant @default 'informational'" + }, + "children": { + "type": "ReactNode", + "required": false, + "description": "Toast children" + }, + "onDismiss": { + "type": "MouseEventHandler", + "required": false, + "description": "Callback to be called when the toast is dismissed" + }, + "id": { + "type": "string", + "required": false, + "description": "Toast id" + }, + "duration": { + "type": "number", + "required": false, + "description": "How long the toast should be visible for in milliseconds @default 5000" + }, + "loading": { + "type": "unknown", + "required": false, + "description": "" + } + }, + "methods": [], + "composes": [ + "ComponentPropsWithoutRef" + ], + "examples": [] + }, + "ToastStack": { + "displayName": "ToastStack", + "description": "Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss.", + "props": { + "position": { + "type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'", + "required": false, + "description": "Postion of the toasts @default 'bottom-right'" + }, + "toastOptions": { + "type": "DefaultToastOptions", + "required": false, + "description": "Options of each toast" + }, + "reverseOrder": { + "type": "boolean", + "required": false, + "description": "Wether should invert the order" + }, + "gutter": { + "type": "unknown", + "required": false, + "description": "Position distance @default 16" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "ToastAppear": { + "displayName": "ToastAppear", + "description": "Controls toast appearance", + "props": { + "id": { + "type": "string", + "required": true, + "description": "Toast id" + }, + "onHeightUpdate": { + "type": "(", + "required": true, + "description": "Callback of height update" + }, + "visible": { + "type": "unknown", + "required": false, + "description": "Wether is visible" + } + }, + "methods": [], + "composes": [ + "ComponentPropsWithoutRef" + ], + "examples": [] + }, + "TimeInput": { + "displayName": "TimeInput", + "description": "A Time Input is a field for a single time value.", + "props": { + "className": { + "type": "unknown", + "required": false, + "description": "Custom className" + }, + "error": { + "type": "unknown", + "required": false, + "description": "Wether has error" + } + }, + "methods": [], + "composes": [ + "Omit" + ], + "examples": [] + }, + "Textarea": { + "displayName": "Textarea", + "description": "Text Area is a field for text values that can take up more than one line in a form, such as descriptions or comments.", + "props": { + "error": { + "type": "boolean", + "required": false, + "description": "Whether is in error state" + }, + "optional": { + "type": "boolean", + "required": false, + "description": "Whether the textarea is optional or not" + }, + "resizable": { + "type": "boolean", + "required": false, + "description": "Whether the textarea is resizable or not @default true" + }, + "onChange": { + "type": "unknown", + "required": false, + "description": "Callback for value change" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Text": { + "displayName": "Text", + "description": "Text component", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "Tag": { + "displayName": "Tag", + "description": "Tags differentiate items through a read-only text value in a colored bg. They can be secondary or primary, given their relevance to the main job.", + "props": { + "variant": { + "type": "'primary' | 'secondary'", + "required": false, + "description": "Tag variant @default 'primary'" + }, + "color": { + "type": "'gray' | 'red' | 'teal' | 'purple' | 'pink' | 'green' | 'cyan' | 'blue' | 'orange' | 'yellow'", + "required": false, + "description": "Tag color @default 'gray'" + }, + "size": { + "type": "unknown", + "required": false, + "description": "Tag size @default 'normal'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Table": { + "displayName": "Table", + "description": "Table lists items vertically and can include actions for each row. The columns display property values for users to scan, sort, and compare.", + "props": { + "columnWidths": { + "type": "unknown", + "required": false, + "description": "Array of column widths When using the Table component @default [] When using the SimpleTable component @default [repeat(${columns.length}, var(--sl-table-default-column-width))]" + }, + "asChild": { + "type": "unknown", + "required": false, + "description": "If true, the Table component will be rendered as a child of the Compose component @default false" + }, + "stickyHeader": { + "type": "unknown", + "required": false, + "description": "If true, the header will be sticky @default false" + }, + "stickyColumn": { + "type": "unknown", + "required": false, + "description": "If true, the first column will be sticky @default false" + }, + "density": { + "type": "unknown", + "required": false, + "description": "The density of the table @default 'default'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TableSortIndicator": { + "displayName": "TableSortIndicator", + "description": "Component that indicates if a column is sortable and its current sort direction", + "props": { + "sorted": { + "type": "unknown", + "required": false, + "description": "Indicates if column is currently sorted, and in witch order @default null" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TableRow": { + "displayName": "TableRow", + "description": "Row of the table", + "props": { + "selected": { + "type": "boolean", + "required": false, + "description": "Indicates the row selection @default false" + }, + "expanded": { + "type": "boolean", + "required": false, + "description": "Indicates the row expansion @default false" + }, + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "dimOnHover": { + "type": "unknown", + "required": false, + "description": "Indicates that the row dims while hovered @default true" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TableHeader": { + "displayName": "TableHeader", + "description": "Header of the table", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TableHeaderCell": { + "displayName": "TableHeaderCell", + "description": "Cell of the table header", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "sortable": { + "type": "boolean", + "required": false, + "description": "Represents a sortable column @default false" + }, + "align": { + "type": "unknown", + "required": false, + "description": "Cell content alignment @default 'start'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TableCell": { + "displayName": "TableCell", + "description": "Cell of the table body", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "align": { + "type": "unknown", + "required": false, + "description": "Cell content alignment @default 'start'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TableBody": { + "displayName": "TableBody", + "description": "Body of the table", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Tab": { + "displayName": "Tab", + "description": "Tabs are used to create up to five views inside a page. Use for related content that is not comparable, when a unified view is not necessary.", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TabPanel": { + "displayName": "TabPanel", + "description": "Tabs are used to create up to five views inside a page. Use for related content that is not comparable, when a unified view is not necessary.", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Enable children composition @default false" + }, + "tabId": { + "type": "unknown", + "required": false, + "description": "The id of the tab that controls this panel. By default, this value will be inferred based on the order of the tabs and the panels." + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "TabList": { + "displayName": "TabList", + "description": "Tabs are used to create up to five views inside a page. Use for related content that is not comparable, when a unified view is not necessary.", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Stack": { + "displayName": "Stack", + "description": "Spaces elements consistently", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "horizontal": { + "type": "boolean", + "required": false, + "description": "Switches the layout to horizontal @default false" + }, + "fluid": { + "type": "boolean", + "required": false, + "description": "Grows the width of items to match the parent @default false" + }, + "space": { + "type": "string", + "required": false, + "description": "space between items @default 0" + }, + "align": { + "type": "unknown", + "required": false, + "description": "items alignment @default start" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Spinner": { + "displayName": "Spinner", + "description": "Spinner informs that a specific element in the page is loading or a task is in progress. Use only for request that take over 1s and less than 5s.", + "props": { + "description": { + "type": "string", + "required": false, + "description": "Specify a description that would be used to best describe the loading state @default 'loading'" + }, + "size": { + "type": "unknown", + "required": false, + "description": "Increase or decrease the size of the shape @default 16" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Skeleton": { + "displayName": "Skeleton", + "description": "Skeletons compose a low-fidelity representation of content that will load. They appear when the entire page is loading and take up to 5s.", + "props": { + "shape": { + "type": "'circle' | 'rect'", + "required": false, + "description": "Skeleton shape @default rect" + }, + "width": { + "type": "CSSProperty.Width", + "required": false, + "description": "CSS width @default '100%'" + }, + "height": { + "type": "unknown", + "required": false, + "description": "CSS height @default '100%'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Select": { + "displayName": "Select", + "description": "Select opens a dropdown with between five and seven values for users to choose one. Use Radios for less items or a Combobox for more items.", + "props": { + "error": { + "type": "boolean", + "required": false, + "description": "Whether is in error state" + }, + "disabled": { + "type": "boolean", + "required": false, + "description": "Whether is disabled @default false" + }, + "messages": { + "type": "{", + "required": false, + "description": "Select messages" + } + }, + "methods": [], + "composes": [ + "SelectProviderOptions" + ], + "examples": [] + }, + "SelectValue": { + "displayName": "SelectValue", + "description": "Renders the value of the select", + "props": { + "placeholder": { + "type": "unknown", + "required": false, + "description": "placeholder of the select" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "SelectTrigger": { + "displayName": "SelectTrigger", + "description": "Trigger of the PopoverBox", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "SelectPopover": { + "displayName": "SelectPopover", + "description": "Popover box of Select", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [ + "PopoverOptions" + ], + "examples": [] + }, + "SelectList": { + "displayName": "SelectList", + "description": "List that wraps the SelectItems", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Enable children composition @default false" + }, + "alwaysVisible": { + "type": "unknown", + "required": false, + "description": "@default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "SelectItem": { + "displayName": "SelectItem", + "description": "Option of the Select", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Enable children composition @default false" + }, + "value": { + "type": "string", + "required": false, + "description": "Option value" + }, + "hideOnClick": { + "type": "unknown", + "required": false, + "description": "Whether to hide the select when this item is clicked. By default, it's true when the value prop is also provided. @default true" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "SelectItemCheck": { + "displayName": "SelectItemCheck", + "description": "Check indicator of the SelectItem", + "props": { + "children": { + "type": "unknown", + "required": false, + "description": "Indicator icon override" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "SelectArrow": { + "displayName": "SelectArrow", + "description": "", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "Search": { + "displayName": "Search", + "description": "Search is a text input that users can type to narrow down a Collection. Use Filters if values can be classified in predefined options.", + "props": { + "loading": { + "type": "boolean", + "required": false, + "description": "Whether component is loading or not @default false" + }, + "onClear": { + "type": "() => void", + "required": false, + "description": "Callback when the input is cleared @default undefined" + }, + "messages": { + "type": "{", + "required": false, + "description": "Object containing all messages to be displayed in the search input" + }, + "placeholder": { + "type": "unknown", + "required": false, + "description": "@deprecated You must use the messages property to override the placeholder label." + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "RangeCalendar": { + "displayName": "RangeCalendar", + "description": "Allow users to select a date range", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "Radio": { + "displayName": "Radio", + "description": "Radio inputs allow users to select one option from a list. It should be used inside a RadioGroup component.", + "props": { + "error": { + "type": "boolean", + "required": false, + "description": "Wether is disabled @default false" + }, + "value": { + "type": "unknown", + "required": true, + "description": "The value of the radio" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "RadioGroup": { + "displayName": "RadioGroup", + "description": "A group of Radios includes five options at most and only one can be selected at a time. Options can be listed horizontally or vertically.", + "props": { + "error": { + "type": "boolean", + "required": false, + "description": "Whether the radio group is in an error state" + }, + "description": { + "type": "string", + "required": false, + "description": "Radio group description" + }, + "errorText": { + "type": "string", + "required": false, + "description": "Radio group error message" + }, + "label": { + "type": "ReactNode", + "required": true, + "description": "Radio group label" + }, + "horizontal": { + "type": "boolean", + "required": false, + "description": "Whether the radio group is horizontal or vertical @default false" + }, + "state": { + "type": "unknown", + "required": false, + "description": "Radio group state" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Popover": { + "displayName": "Popover", + "description": "Popover containers allow merchants to access and interact with more information of an item through an overlay.", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "portal": { + "type": "unknown", + "required": false, + "description": "Should activate portal @default true" + } + }, + "methods": [], + "composes": [ + "Pick" + ], + "examples": [] + }, + "PopoverTrigger": { + "displayName": "PopoverTrigger", + "description": "Triggers popover containers", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "PopoverDismiss": { + "displayName": "PopoverDismiss", + "description": "Dismiss the Popover", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Pagination": { + "displayName": "Pagination", + "description": "Pagination handles navigation inside a Collection. It displays the number of items, filtered or not, and allow users to navigate between pages.", + "props": { + "onPageChange": { + "type": "(", + "required": false, + "description": "Function called whenever the pagination actions are triggered and the page changes. @param page The new page number reference @param type The type of the action that was triggered" + }, + "page": { + "type": "number", + "required": true, + "description": "Pagination current page" + }, + "total": { + "type": "number", + "required": true, + "description": "The total number of items" + }, + "loading": { + "type": "boolean", + "required": false, + "description": "Whether the pagination is loading or not. @default false" + }, + "size": { + "type": "unknown", + "required": false, + "description": "Page size @default 25" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Page": { + "displayName": "Page", + "description": "The Page structure helps users to easily identify where they are, view content essential to the main job, and perform related actions.", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "PageHeading": { + "displayName": "PageHeading", + "description": "Title of a page", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + }, + "variant": { + "type": "unknown", + "required": false, + "description": "Heading variant @default 'context'" + }, + "level": { + "type": "unknown", + "required": false, + "description": "Heading level @default 3" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "PageHeader": { + "displayName": "PageHeader", + "description": "Header of the page", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "PageHeaderRow": { + "displayName": "PageHeaderRow", + "description": "Row of the page header", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "PageContent": { + "displayName": "PageContent", + "description": "Content of a page", + "props": { + "layout": { + "type": "unknown", + "required": false, + "description": "Layout type @default 'standard'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Modal": { + "displayName": "Modal", + "description": "Modal displays content related to a minor job within a page's main job. It demands complete attention and blocks interactions outside the overlay.", + "props": { + "onClose": { + "type": "(", + "required": false, + "description": "Callback fired when the backdrop or close button is clicked." + }, + "open": { + "type": "boolean", + "required": false, + "description": "Whether the modal is open or not @default false" + }, + "portal": { + "type": "boolean", + "required": false, + "description": "Whether to render the modal inside a portal or not @default true" + }, + "size": { + "type": "unknown", + "required": false, + "description": "Modal size @default medium" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "ModalHeading": { + "displayName": "ModalHeading", + "description": "Header of the Modal", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "ModalHeader": { + "displayName": "ModalHeader", + "description": "Header of the Modal", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "ModalFooter": { + "displayName": "ModalFooter", + "description": "Footer of the Modal", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "ModalDismiss": { + "displayName": "ModalDismiss", + "description": "Header of the Modal", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "ModalContent": { + "displayName": "ModalContent", + "description": "Content of the Modal", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + }, + "narrow": { + "type": "unknown", + "required": false, + "description": "Decrease the space token in top and bottom padding. @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Menu": { + "displayName": "Menu", + "description": "Menus summarize actions in a dropdown. They can include actions that are rarely used, complementary, or repeated for each item in a Collection.", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "label": { + "type": "ReactNode", + "required": true, + "description": "Trigger label" + }, + "type": { + "type": "'menu' | 'actions'", + "required": false, + "description": "Type of dropdown @default 'menu'" + }, + "iconOnly": { + "type": "boolean", + "required": false, + "description": "Hide the textual label @default false" + }, + "variant": { + "type": "unknown", + "required": false, + "description": "Change between color combinations. @default 'tertiary'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "MenuTrigger": { + "displayName": "MenuTrigger", + "description": "Menu's trigger action", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "MenuSeparator": { + "displayName": "MenuSeparator", + "description": "Separator of MenuItems", + "props": { + "orientation": { + "type": "unknown", + "required": false, + "description": "Divider axis orientation @default 'horizontal'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "MenuPopover": { + "displayName": "MenuPopover", + "description": "Menu's Popover Box", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "portal": { + "type": "unknown", + "required": false, + "description": "Should activate portal @default true" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "MenuItem": { + "displayName": "MenuItem", + "description": "Option within a menu popover box", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "critical": { + "type": "boolean", + "required": false, + "description": "Wether is critical @default false" + }, + "disabled": { + "type": "unknown", + "required": false, + "description": "Wether is disabled @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "LinkBox": { + "displayName": "LinkBox", + "description": "A container that acts as a link. It allows text selection and stop its children event propagation.", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "Link": { + "displayName": "Link", + "description": "Links represent navigation inside a page or between pages, including to pages outside the Admin. They exist within or directly after a text.", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Label": { + "displayName": "Label", + "description": "Label component", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Enables component composition @default false" + }, + "optional": { + "type": "unknown", + "required": false, + "description": "Whether the input linked to this label is optional @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Input": { + "displayName": "Input", + "description": "An Input is a field for short text values. It can include masks and character restrictions, such as accepting only numbers.", + "props": { + "error": { + "type": "boolean", + "required": false, + "description": "Whether there is an error @default false" + }, + "disabled": { + "type": "boolean", + "required": false, + "description": "Whether is disabled or not @default false" + }, + "prefix": { + "type": "ReactNode", + "required": false, + "description": "Node added before input space" + }, + "suffix": { + "type": "ReactNode", + "required": false, + "description": "Node added before input space" + }, + "onChange": { + "type": "unknown", + "required": false, + "description": "Callback for value change" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "IconButton": { + "displayName": "IconButton", + "description": "Icon Buttons represent minor actions in a flow. It includes a label only for accessibility that is not visible, so the icon must be recognizable by itself.", + "props": { + "children": { + "type": "unknown", + "required": true, + "description": "Button contents" + }, + "size": { + "type": "unknown", + "required": false, + "description": "Increase or decrease padding. @default 'normal'" + }, + "variant": { + "type": "unknown", + "required": false, + "description": "Change between color combinations. @default 'secondary'" + }, + "loading": { + "type": "unknown", + "required": false, + "description": "Disable the button and show a spinner. @default false" + }, + "asChild": { + "type": "unknown", + "required": false, + "description": "Merge button props with immediate child. @default false" + }, + "label": { + "type": "unknown", + "required": true, + "description": "Icon button label. Needed for accessibility." + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Heading": { + "displayName": "Heading", + "description": "Heading is used to define levels of typography", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "variant": { + "type": "'display1' | 'display2' | 'display3' | 'display4' | 'context'", + "required": false, + "description": "Heading variant @default 'context'" + }, + "level": { + "type": "unknown", + "required": false, + "description": "Heading level @default 3" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Grid": { + "displayName": "Grid", + "description": "Grid layout ://developer.mozilla.org/en-US/docs/Glossary/Grid", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "gap": { + "type": "CSSProperty.GridGap", + "required": false, + "description": "CSS Gap @default '$space-gap' @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap" + }, + "areas": { + "type": "CSSProperty.GridTemplateAreas", + "required": false, + "description": "CSS grid-template-areas @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas" + }, + "rows": { + "type": "CSSProperty.GridTemplateRows", + "required": false, + "description": "CSS grid-template-rows @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows" + }, + "columns": { + "type": "CSSProperty.GridTemplateColumns", + "required": false, + "description": "CSS grid-template-columns @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns" + }, + "autoColumns": { + "type": "CSSProperty.GridAutoColumns", + "required": false, + "description": "CSS grid-auto-columns @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns" + }, + "autoRows": { + "type": "CSSProperty.GridAutoRows", + "required": false, + "description": "CSS grid-auto-rows @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows" + }, + "autoFlow": { + "type": "unknown", + "required": false, + "description": "CSS grid-auto-flow @default 'row' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "GridCell": { + "displayName": "GridCell", + "description": "Optional cell of a grid layout ://developer.mozilla.org/en-US/docs/Glossary/Grid", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "columnStart": { + "type": "CSSProperty.GridColumnStart", + "required": false, + "description": "CSS grid-column-start @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start" + }, + "columnEnd": { + "type": "CSSProperty.GridColumnEnd", + "required": false, + "description": "CSS grid-column-end @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end" + }, + "rowStart": { + "type": "CSSProperty.GridRowStart", + "required": false, + "description": "CSS grid-row-start @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start" + }, + "rowEnd": { + "type": "CSSProperty.GridRowEnd", + "required": false, + "description": "CSS grid-row-end @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end" + }, + "column": { + "type": "CSSProperty.GridColumn", + "required": false, + "description": "CSS grid-column @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column" + }, + "row": { + "type": "CSSProperty.GridRow", + "required": false, + "description": "CSS grid-row @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" + }, + "area": { + "type": "unknown", + "required": false, + "description": "CSS grid-area @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Flex": { + "displayName": "Flex", + "description": "Flexbox layout ://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox", + "props": { + "order": { + "type": "CSSProperty.Order", + "required": false, + "description": "CSS order @default 0 @see https://developer.mozilla.org/en-US/docs/Web/CSS/order" + }, + "direction": { + "type": "CSSProperty.FlexDirection", + "required": false, + "description": "CSS flex-direction @default 'row' @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" + }, + "grow": { + "type": "CSSProperty.FlexGrow", + "required": false, + "description": "CSS flex-grow @default 0 @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" + }, + "wrap": { + "type": "CSSProperty.FlexWrap", + "required": false, + "description": "CSS flex-wrap @default 'nowrap' @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap" + }, + "shrink": { + "type": "CSSProperty.FlexShrink", + "required": false, + "description": "CSS flex-shrink @default 1 @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" + }, + "basis": { + "type": "CSSProperty.FlexBasis", + "required": false, + "description": "CSS flex-basis @default 'auto' @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis" + }, + "justify": { + "type": "CSSProperty.JustifyContent", + "required": false, + "description": "CSS justify-content @default 'flex-start' @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" + }, + "align": { + "type": "CSSProperty.AlignItems", + "required": false, + "description": "CSS align-items @default 'stretch' @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" + }, + "gap": { + "type": "CSSProperty.Gap", + "required": false, + "description": "CSS Gap @default '$space-gap' @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap" + }, + "inline": { + "type": "boolean", + "required": false, + "description": "Use `inline-flex` instead of `flex` @default false" + }, + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false @example " + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Filter": { + "displayName": "Filter", + "description": "Filters represent criteria that users can choose to narrow down a Collection. They can include single or multiple selection.", + "props": { + "label": { + "type": "unknown", + "required": true, + "description": "Filter label" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterValue": { + "displayName": "FilterValue", + "description": "Renders the Filter applied value", + "props": { + "className": { + "type": "unknown", + "required": false, + "description": "Custom styles" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterTrigger": { + "displayName": "FilterTrigger", + "description": "Triggers the Filter Popover box, also displays the Filter applied value", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterPopover": { + "displayName": "FilterPopover", + "description": "Filter popover box", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + }, + "portal": { + "type": "unknown", + "required": false, + "description": "Should activate portal @default true" + }, + "messages": { + "type": "{", + "required": false, + "description": "Filter messages" + } + }, + "methods": [], + "composes": [ + "Pick" + ], + "examples": [] + }, + "FilterList": { + "displayName": "FilterList", + "description": "Filter listbox", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterListSkeleton": { + "displayName": "FilterListSkeleton", + "description": "Filter listbox", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + }, + "horizontal": { + "type": "unknown", + "required": false, + "description": "Switches the layout to horizontal @default false" + }, + "fluid": { + "type": "unknown", + "required": false, + "description": "Grows the width of items to match the parent @default false" + }, + "space": { + "type": "unknown", + "required": false, + "description": "space between items @default 0" + }, + "align": { + "type": "unknown", + "required": false, + "description": "items alignment @default start" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterItem": { + "displayName": "FilterItem", + "description": "Filter Option", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterItemCheck": { + "displayName": "FilterItemCheck", + "description": "Check state of the FilterItem", + "props": { + "children": { + "type": "unknown", + "required": false, + "description": "Indicator icon override" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterClear": { + "displayName": "FilterClear", + "description": "Action that clears both Filter value and UI Select value", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FilterApply": { + "displayName": "FilterApply", + "description": "Action that applies the Filter value, and closes the popover", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Field": { + "displayName": "Field", + "description": "Implementation of a fieldset", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "FieldError": { + "displayName": "FieldError", + "description": "Error of a field", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enables component composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FieldDescription": { + "displayName": "FieldDescription", + "description": "Description of a Field", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enables component composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "FieldCharCounter": { + "displayName": "FieldCharCounter", + "description": "Count chars of a field that contains a input or textarea that has a max-length", + "props": { + "count": { + "type": "number", + "required": true, + "description": "Current count" + }, + "limit": { + "type": "unknown", + "required": true, + "description": "Max count" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "EmptyState": { + "displayName": "EmptyState", + "description": "An Empty State represents the state of a container, such as when there are no items to display or when the user isn't allowed to access items.", + "props": { + "size": { + "type": "unknown", + "required": false, + "description": "Indicates size of empty state area @default 'medium'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "EmptyStateIllustration": { + "displayName": "EmptyStateIllustration", + "description": "EmptyState illustration section", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "EmptyStateActions": { + "displayName": "EmptyStateActions", + "description": "Empty actions section", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "drawer-trigger": { + "displayName": "drawer-trigger", + "description": "Drawer's Trigger ", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "DrawerPopover": { + "displayName": "DrawerPopover", + "description": "Drawer's popover box", + "props": { + "children": { + "type": "ReactNode", + "required": true, + "description": "Popover children" + }, + "size": { + "type": "'small' | 'medium'", + "required": false, + "description": "Popover width @default 'medium'" + }, + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "DrawerHeading": { + "displayName": "DrawerHeading", + "description": "Drawer's heading", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "DrawerHeader": { + "displayName": "DrawerHeader", + "description": "Drawer's header container", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "DrawerFooter": { + "displayName": "DrawerFooter", + "description": "Drawer's footer container", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "DrawerDismiss": { + "displayName": "DrawerDismiss", + "description": "Drawer's dismiss action", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "DrawerContent": { + "displayName": "DrawerContent", + "description": "Drawer's content", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "Divider": { + "displayName": "Divider", + "description": "Creates distinction between sections in containers with constrained space or rows in a table.", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "DateSegment": { + "displayName": "DateSegment", + "description": "Segment of a DateField", + "props": { + "segment": { + "type": "SegmentType", + "required": true, + "description": "Segment to render" + }, + "state": { + "type": "unknown", + "required": true, + "description": "State of a Datefield" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "DateRangePicker": { + "displayName": "DateRangePicker", + "description": "A Date Range Picker is a field for date period values that may include time. The date can be typed or selected in a Calendar.", + "props": { + "className": { + "type": "unknown", + "required": false, + "description": "Custom className" + }, + "error": { + "type": "unknown", + "required": false, + "description": "Wether has error" + } + }, + "methods": [], + "composes": [ + "Omit" + ], + "examples": [] + }, + "DatePicker": { + "displayName": "DatePicker", + "description": "A Date Picker is a field for single date values that may include time. The date can be typed or selected with the help of a Calendar.", + "props": { + "className": { + "type": "unknown", + "required": false, + "description": "Custom className" + }, + "error": { + "type": "unknown", + "required": false, + "description": "Wether has error" + }, + "portal": { + "type": "unknown", + "required": false, + "description": "Should activate portal @default true" + } + }, + "methods": [], + "composes": [ + "Omit" + ], + "examples": [] + }, + "DateField": { + "displayName": "DateField", + "description": "A list of date-segments used as base for date-picker and date-range-picker", + "props": { + "className": { + "type": "unknown", + "required": false, + "description": "Custom className" + } + }, + "methods": [], + "composes": [ + "AriaDateFieldProps" + ], + "examples": [] + }, + "Content": { + "displayName": "Content", + "description": "Content containers allow merchants to easily scan information to understand its hierarchy and rhythm. @playground", + "props": { + "asChild": { + "type": "boolean", + "required": false, + "description": "Children composition @default false" + }, + "narrow": { + "type": "unknown", + "required": false, + "description": "Decrease the space token in top and bottom padding. @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Container": { + "displayName": "Container", + "description": "Wraps Content component to support Container Queries", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "ConfirmationModal": { + "displayName": "ConfirmationModal", + "description": "Confirmation Modals appear after users attempt to trigger an action with an effect that is irreversible or hard to reverse, such as deleting items. [open, setOpen] = useState(false) const handleClose = () => { setOpen(false) } Hello world ", + "props": { + "onClose": { + "type": "(", + "required": false, + "description": "Callback fired when the backdrop or close button is clicked." + }, + "onConfirm": { + "type": "MouseEventHandler", + "required": false, + "description": "Callback fired when the ok button is clicked." + }, + "onCancel": { + "type": "MouseEventHandler", + "required": false, + "description": "Callback fired when the cancel button is clicked." + }, + "open": { + "type": "boolean", + "required": false, + "description": "Whether the modal is open or not. @default false" + }, + "disabled": { + "type": "boolean", + "required": false, + "description": "Whether the confirm actions is disabled. @default false" + }, + "critical": { + "type": "boolean", + "required": false, + "description": "Whether the confirm actions is critical. @default false" + }, + "locale": { + "type": "string", + "required": false, + "description": "The BCP47 language code for the locale. @link https://www.ietf.org/rfc/bcp/bcp47.txt @default en-US" + }, + "messages": { + "type": "{", + "required": false, + "description": "Object containing all messages to be displayed internally in the modal. They include \"title\", \"ok\" and \"cancel\"." + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "createComposition": { + "displayName": "createComposition", + "description": "", + "props": { + "element": { + "type": "unknown", + "required": true, + "description": "Element to clone" + }, + "props": { + "type": "unknown", + "required": true, + "description": "Props to merge with element props" + }, + "ref": { + "type": "unknown", + "required": true, + "description": "Ref to merge with element ref" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Compose": { + "displayName": "Compose", + "description": "Composes immediate child with its props and child own props. Used to implement Shoreline composition Button({ asChild, ...props }){ const Composition = asChild ? Compose : 'button' return }", + "props": { + "children": { + "type": "unknown", + "required": false, + "description": "Children to compose" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "composeElement": { + "displayName": "composeElement", + "description": "Clone element merging its props and refs with passed props and refs. element: React.ReactNode = ... const props = {} cosnt ref = useRef() composeElement({ element, props, ref, })", + "props": { + "element": { + "type": "unknown", + "required": true, + "description": "Element to clone" + }, + "props": { + "type": "unknown", + "required": true, + "description": "Props to merge with element props" + }, + "ref": { + "type": "unknown", + "required": true, + "description": "Ref to merge with element ref" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Composable": { + "displayName": "Composable", + "description": "Defines a composable child inside of a Compose component Button({ asChild, children, ...props }){ const Composition = asChild ? Compose : 'button' return ( Prefix {children} ) }", + "props": { + "render": { + "type": "RenderProps", + "required": false, + "description": "Render function. Use it to wrap the root with containers" + }, + "children": { + "type": "unknown", + "required": true, + "description": "Defines the composition root" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "ComboboxInput": { + "displayName": "ComboboxInput", + "description": "Renders a combobox input", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [ + "Pick" + ], + "examples": [] + }, + "ComboboxPopover": { + "displayName": "ComboboxPopover", + "description": "Renders a popover for the combobox", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [ + "Pick" + ], + "examples": [] + }, + "ComboboxList": { + "displayName": "ComboboxList", + "description": "Renders a list for the combobox", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [ + "ComponentPropsWithoutRef" + ], + "examples": [] + }, + "ComboboxItem": { + "displayName": "ComboboxItem", + "description": "Renders an item for the combobox", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [ + "Pick" + ], + "examples": [] + }, + "Collection": { + "displayName": "Collection", + "description": "Collection combines a list of items with controls for the view. The list can be a Table and the controls can be a Search, Filters, and Pagination.", + "props": { + "children": { + "type": "unknown", + "required": false, + "description": "Component children" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "CollectionView": { + "displayName": "CollectionView", + "description": "A collection view is a component that renders a collection based on its status", + "props": { + "status": { + "type": "'ready' | 'error' | 'loading' | 'empty' | 'not-found' | 'unauthorized'", + "required": true, + "description": "Represents the status of a collection and indicates what should be rendered @default 'ready'" + }, + "onError": { + "type": "() => void", + "required": false, + "description": "On status error action callback" + }, + "onEmpty": { + "type": "() => void", + "required": false, + "description": "On status empty action callback" + }, + "messages": { + "type": "unknown", + "required": false, + "description": "Collection internal messages" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "CollectionRow": { + "displayName": "CollectionRow", + "description": "Row of the collection", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "Clickable": { + "displayName": "Clickable", + "description": "Represents clickable surfaces", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Enable children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "ClickableBubble": { + "displayName": "ClickableBubble", + "description": "Bubbles events to Clickable", + "props": { + "children": { + "type": "ReactNode", + "required": true, + "description": "Children to bubble event" + }, + "onlyImmediateChild": { + "type": "unknown", + "required": false, + "description": "if true only immediate children will bubble the event if false the immediate children and their children will bubble the event @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Checkbox": { + "displayName": "Checkbox", + "description": "A single Checkbox represents binary choices, such as accepting terms and conditions or activating and deactivating notifications.", + "props": { + "indeterminate": { + "type": "boolean", + "required": false, + "description": "Indicates the indeterminate state @default" + }, + "value": { + "type": "unknown", + "required": false, + "description": "Indicator value" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "CheckboxGroup": { + "displayName": "CheckboxGroup", + "description": "A group of Checkboxes includes five independent choices at most. Each option is binary and they can be listed horizontally or vertically.", + "props": { + "error": { + "type": "boolean", + "required": false, + "description": "Whether the checkbox group is in an error state" + }, + "description": { + "type": "ReactNode", + "required": false, + "description": "Checkbox group description" + }, + "errorText": { + "type": "ReactNode", + "required": false, + "description": "Checkbox group error message" + }, + "label": { + "type": "ReactNode", + "required": true, + "description": "Checkbox group label" + }, + "horizontal": { + "type": "unknown", + "required": false, + "description": "Whether the checkbox group is horizontal or vertical @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Center": { + "displayName": "Center", + "description": "Centralizes its content", + "props": { + "asChild": { + "type": "unknown", + "required": false, + "description": "Children composition @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Calendar": { + "displayName": "Calendar", + "description": "Allow users to select a date", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "CalendarTitle": { + "displayName": "CalendarTitle", + "description": "Title of the calendar", + "props": { + "children": { + "type": "unknown", + "required": false, + "description": "Component children" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "CalendarHeader": { + "displayName": "CalendarHeader", + "description": "Header of the calendar", + "props": { + "children": { + "type": "unknown", + "required": false, + "description": "Component children" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "CalendarGrid": { + "displayName": "CalendarGrid", + "description": "Grid of a calendar", + "props": {}, + "methods": [], + "composes": [], + "examples": [] + }, + "CalendarCell": { + "displayName": "CalendarCell", + "description": "Cell of a calendar grid", + "props": { + "date": { + "type": "unknown", + "required": true, + "description": "Date that the cell represents" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Button": { + "displayName": "Button", + "description": "Buttons with labels represent the most important actions that users frequently trigger. They can vary in prominence and can include an icon.", + "props": { + "children": { + "type": "ReactNode", + "required": true, + "description": "Button contents" + }, + "size": { + "type": "'normal' | 'large'", + "required": false, + "description": "Increase or decrease padding. @default 'normal'" + }, + "variant": { + "type": "'primary' | 'secondary' | 'tertiary' | 'critical' | 'criticalTertiary'", + "required": false, + "description": "Change between color combinations. @default 'secondary'" + }, + "loading": { + "type": "boolean", + "required": false, + "description": "Disable the button and show a spinner. @default false" + }, + "asChild": { + "type": "unknown", + "required": false, + "description": "Merge button props with immediate child. @default false" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Bleed": { + "displayName": "Bleed", + "description": "Allows the content to bleed into the external container", + "props": { + "top": { + "type": "string", + "required": false, + "description": "Top bleed @default '$space-0'" + }, + "bottom": { + "type": "string", + "required": false, + "description": "Bottom bleed @default '$space-0'" + }, + "start": { + "type": "string", + "required": false, + "description": "Start bleed @default '$space-0'" + }, + "end": { + "type": "unknown", + "required": false, + "description": "End bleed @default '$space-0'" + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "Alert": { + "displayName": "Alert", + "description": "Alerts call attention to a semantic message and load alongside the rest of the page content. They can optionally be dismissed upon user action.", + "props": { + "variant": { + "type": "'informational' | 'success' | 'critical' | 'warning'", + "required": false, + "description": "Variants of the alert, one of: informational, success, critical, warning. @default 'informational'" + }, + "onDismiss": { + "type": "unknown", + "required": false, + "description": "Callback fired when the alert is dismissed." + } + }, + "methods": [], + "composes": [], + "examples": [] + }, + "AccessibleIcon": { + "displayName": "AccessibleIcon", + "description": "Makes icons accessible by adding a label. It can be used with Shoreline icons or other svg.", + "props": { + "label": { + "type": "ReactNode", + "required": true, + "description": "Icon description" + }, + "children": { + "type": "unknown", + "required": false, + "description": "Component children, normally a ." + } + }, + "methods": [], + "composes": [], + "examples": [] + } +} \ No newline at end of file