From 28b0b13077d21b417e3042f360b00c6d1fc1f6c7 Mon Sep 17 00:00:00 2001 From: "hiroki.yokouchi" Date: Fri, 8 Nov 2024 11:08:19 +0900 Subject: [PATCH 1/5] feat: so that the props information is taken from the package Signed-off-by: hiroki.yokouchi --- src/components/astro/PropsTable.astro | 11 ++-- src/utils/server/example.ts | 4 +- src/utils/server/props.ts | 75 +++++++++++++++++++-------- 3 files changed, 57 insertions(+), 33 deletions(-) diff --git a/src/components/astro/PropsTable.astro b/src/components/astro/PropsTable.astro index 14d4b41..1d8943c 100644 --- a/src/components/astro/PropsTable.astro +++ b/src/components/astro/PropsTable.astro @@ -40,10 +40,9 @@ const { propsArray } = Astro.props; {Array.isArray(prop.type) ? ( prop.type.map((type, i) => { return ( - <> - {i !== 0 && | } +
{type} - +
); }) ) : ( @@ -103,11 +102,7 @@ const { propsArray } = Astro.props; th.type, td.type { - width: 30%; - } - - td.type code { - margin: 3px; + white-space: nowrap; } td.type code:first-child { diff --git a/src/utils/server/example.ts b/src/utils/server/example.ts index 4095068..086ad85 100644 --- a/src/utils/server/example.ts +++ b/src/utils/server/example.ts @@ -61,7 +61,5 @@ const convertKeyLinkButtonToButton = (key: string): string => { }; export const buildComponentPath = (exampleKey: string): string => { - return `./node_modules/@ubie/ubie-ui/dist/components/${toCamelCase( - convertKeyLinkButtonToButton(exampleKey), - )}/${toCamelCase(exampleKey)}.d.ts`; + return `src/components/${toCamelCase(convertKeyLinkButtonToButton(exampleKey))}/${toCamelCase(exampleKey)}.tsx`; }; diff --git a/src/utils/server/props.ts b/src/utils/server/props.ts index 5ff26ca..3f8859c 100644 --- a/src/utils/server/props.ts +++ b/src/utils/server/props.ts @@ -1,23 +1,52 @@ -import { parser } from "./parser"; -import type { PropItemType } from "react-docgen-typescript"; +import { default as ubieUiProps } from 'node_modules/@ubie/ubie-ui/dist/props.json'; +import type { PropItemType } from 'react-docgen-typescript'; -const extractType = (type: PropItemType) => { - if (type.name === "enum") { - const values = type.value as { value: string }[]; - return values.map((value) => value.value); +const convertMap = { + '`fit-content(${CSSLengthPercentage})`': "'fit-content()'", + '`var(--${string})`': "'var()'", +}; + +const convertType = (type: string) => { + if (convertMap[type]) { + return convertMap[type]; } - return type.name; -}; + const match = type.match(/^`\${string}(.*)`$/); + if (match) { + return `'${match[1]}'`; + } -export const extractPropsFromFile = (filePath: string) => { - const docs = parser.parse(filePath); + return type; +}; - if (docs.length === 0) { - return []; +const typeObjToValues = (type) => { + console.log(type); + if (!type.name) { + return ''; + } else if (type.name === 'union') { + return type.elements.map((element) => typeObjToValues(element)); + } else if (type.name === 'signature') { + return type.raw; + } else if (type.name.startsWith('HTML')) { + return 'string'; + } else if (type.name === 'ReactNode') { + return 'ReactNode'; + } else if (type.name === 'literal') { + return convertType(type.value); + } else { + return convertType(type.name); } +}; - const { props } = docs[0]; +const extractType = (type: PropItemType) => { + const values = typeObjToValues(type); + return Array.isArray(values) ? values.flat(Infinity) : values; +}; + +export const extractPropsFromFile = (filePath: string) => { + const { props } = ubieUiProps[filePath][0]; + + console.dir(props, { depth: null }); const propsArray: { name: string; @@ -25,15 +54,17 @@ export const extractPropsFromFile = (filePath: string) => { defaultValue: string | number | null; required: boolean; description: string; - }[] = Object.entries(props).map(([name, propInfo]) => ({ - name: name, - type: extractType(propInfo.type), - defaultValue: propInfo.defaultValue - ? (propInfo.defaultValue.value as string | number) - : null, - required: propInfo.required, - description: propInfo.description, - })); + }[] = Object.entries(props).map(([name, propInfo]) => { + return { + name: name, + type: extractType(propInfo.tsType === undefined ? '' : propInfo.tsType), + defaultValue: propInfo.defaultValue ? (propInfo.defaultValue.value as string | number) : null, + required: propInfo.required, + description: propInfo.description, + }; + }); + + console.dir(propsArray, { depth: null }); return propsArray; }; From 5021a33a31a43ede78c3c1b75bdb0de3efd1dda3 Mon Sep 17 00:00:00 2001 From: 8845musign <8845musign@gmail.com> Date: Thu, 14 Nov 2024 11:51:43 +0900 Subject: [PATCH 2/5] feat: so that you can overwrite props from mdx --- package-lock.json | 171 ++++++++++++++++---- package.json | 3 +- src/components/astro/PropsTable.astro | 28 ++-- src/layouts/ComponentLayout.astro | 23 +-- src/utils/server/props/convertKeyOrValue.ts | 11 ++ src/utils/server/props/valueKeywordMap.ts | 113 +++++++++++++ 6 files changed, 295 insertions(+), 54 deletions(-) create mode 100644 src/utils/server/props/convertKeyOrValue.ts create mode 100644 src/utils/server/props/valueKeywordMap.ts diff --git a/package-lock.json b/package-lock.json index 2a1161c..1c13bff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,10 +27,11 @@ "clsx": "^2.1.1", "color-blend": "^4.0.0", "color-rgba": "^3.0.0", + "es-toolkit": "^1.26.1", "focus-trap-react": "^10.2.3", "nanostores": "^0.10.3", "react": "18.2.0", - "react-docgen": "^7.0.3", + "react-docgen": "^7.1.0", "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-syntax-highlighter": "^15.5.0", @@ -1347,15 +1348,17 @@ "version": "1.6.8", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "license": "MIT", "peer": true, "dependencies": { "@floating-ui/utils": "^0.2.8" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.11", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", - "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "license": "MIT", "peer": true, "dependencies": { "@floating-ui/core": "^1.6.0", @@ -1363,9 +1366,10 @@ } }, "node_modules/@floating-ui/react": { - "version": "0.26.24", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.24.tgz", - "integrity": "sha512-2ly0pCkZIGEQUq5H8bBK0XJmc1xIK/RM3tvVzY3GBER7IOD1UgmC2Y2tjj4AuS+TC+vTE1KJv2053290jua0Sw==", + "version": "0.26.27", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz", + "integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==", + "license": "MIT", "peer": true, "dependencies": { "@floating-ui/react-dom": "^2.1.2", @@ -1381,6 +1385,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "license": "MIT", "peer": true, "dependencies": { "@floating-ui/dom": "^1.0.0" @@ -1394,12 +1399,14 @@ "version": "0.2.8", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "license": "MIT", "peer": true }, "node_modules/@headlessui/react": { - "version": "2.1.10", - "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.10.tgz", - "integrity": "sha512-6mLa2fjMDAFQi+/R10B+zU3edsUk/MDtENB2zHho0lqKU1uzhAfJLUduWds4nCo8wbl3vULtC5rJfZAQ1yqIng==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.0.tgz", + "integrity": "sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==", + "license": "MIT", "peer": true, "dependencies": { "@floating-ui/react": "^0.26.16", @@ -1411,8 +1418,8 @@ "node": ">=10" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "^18 || ^19 || ^19.0.0-rc", + "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, "node_modules/@humanwhocodes/config-array": { @@ -2405,12 +2412,13 @@ } }, "node_modules/@react-aria/focus": { - "version": "3.18.3", - "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.3.tgz", - "integrity": "sha512-WKUElg+5zS0D3xlVn8MntNnkzJql2J6MuzAMP8Sv5WTgFDse/XGR842dsxPTIyKKdrWVCRegCuwa4m3n/GzgJw==", + "version": "3.18.4", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.4.tgz", + "integrity": "sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==", + "license": "Apache-2.0", "peer": true, "dependencies": { - "@react-aria/interactions": "^3.22.3", + "@react-aria/interactions": "^3.22.4", "@react-aria/utils": "^3.25.3", "@react-types/shared": "^3.25.0", "@swc/helpers": "^0.5.0", @@ -2421,9 +2429,10 @@ } }, "node_modules/@react-aria/interactions": { - "version": "3.22.3", - "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.3.tgz", - "integrity": "sha512-RRUb/aG+P0IKTIWikY/SylB6bIbLZeztnZY2vbe7RAG5MgVaCgn5HQ45SI15GlTmhsFG8CnF6slJsUFJiNHpbQ==", + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.4.tgz", + "integrity": "sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==", + "license": "Apache-2.0", "peer": true, "dependencies": { "@react-aria/ssr": "^3.9.6", @@ -2439,6 +2448,7 @@ "version": "3.9.6", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.6.tgz", "integrity": "sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==", + "license": "Apache-2.0", "peer": true, "dependencies": { "@swc/helpers": "^0.5.0" @@ -2454,6 +2464,7 @@ "version": "3.25.3", "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz", "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==", + "license": "Apache-2.0", "peer": true, "dependencies": { "@react-aria/ssr": "^3.9.6", @@ -2466,10 +2477,87 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" } }, + "node_modules/@react-docgen/cli": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@react-docgen/cli/-/cli-2.0.4.tgz", + "integrity": "sha512-6JsOUs00ZDdk0BHfFA6GMNUvxrg80SmXYXBpta6mWafoSh/EQqQgQuMgKuu72uPgCJ2t28qxIo/ZnoRnO0YKMw==", + "license": "MIT", + "dependencies": { + "chalk": "5.3.0", + "commander": "11.1.0", + "debug": "4.3.7", + "fast-glob": "3.3.2", + "react-docgen": "7.1.0", + "slash": "5.1.0" + }, + "bin": { + "react-docgen": "dist/cli.js" + }, + "engines": { + "node": ">=16.14.0" + } + }, + "node_modules/@react-docgen/cli/node_modules/chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "license": "MIT", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@react-docgen/cli/node_modules/commander": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==", + "license": "MIT", + "engines": { + "node": ">=16" + } + }, + "node_modules/@react-docgen/cli/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@react-docgen/cli/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/@react-docgen/cli/node_modules/slash": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", + "license": "MIT", + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@react-stately/utils": { "version": "3.10.4", "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz", "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==", + "license": "Apache-2.0", "peer": true, "dependencies": { "@swc/helpers": "^0.5.0" @@ -2482,6 +2570,7 @@ "version": "3.25.0", "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz", "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==", + "license": "Apache-2.0", "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" @@ -3166,6 +3255,7 @@ "version": "0.5.13", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==", + "license": "Apache-2.0", "peer": true, "dependencies": { "tslib": "^2.4.0" @@ -3183,12 +3273,13 @@ } }, "node_modules/@tanstack/react-virtual": { - "version": "3.10.8", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.8.tgz", - "integrity": "sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==", + "version": "3.10.9", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz", + "integrity": "sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==", + "license": "MIT", "peer": true, "dependencies": { - "@tanstack/virtual-core": "3.10.8" + "@tanstack/virtual-core": "3.10.9" }, "funding": { "type": "github", @@ -3200,9 +3291,10 @@ } }, "node_modules/@tanstack/virtual-core": { - "version": "3.10.8", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz", - "integrity": "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==", + "version": "3.10.9", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz", + "integrity": "sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==", + "license": "MIT", "peer": true, "funding": { "type": "github", @@ -3738,9 +3830,11 @@ }, "node_modules/@ubie/ubie-ui": { "version": "0.0.38", - "resolved": "https://registry.npmjs.org/@ubie/ubie-ui/-/ubie-ui-0.0.38.tgz", - "integrity": "sha512-zeLDpfQYUlpPvnZQ8YTWH+pZN8sA4CDtp3hWTmUSQoVIZjVq4b7aFRcGbSMZN/ptGDPs8uz3MKCcI/uRdPd6BA==", + "resolved": "file:../ubie-ui/ubie-ubie-ui-0.0.38.tgz", + "integrity": "sha512-q+JVuQRsNwCHOROlDDAxB08+0nBkfOZ7j9e1qiRq0W7nTQFvATGBhDAh7+C/hC1waDCr1SZt0IBYMHjFfREAcQ==", + "license": "Apache-2.0", "dependencies": { + "@react-docgen/cli": "^2.0.4", "debounce": "^2.1.1" }, "peerDependencies": { @@ -5815,9 +5909,10 @@ "license": "MIT" }, "node_modules/debounce": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.1.tgz", - "integrity": "sha512-+xRWxgel9LgTC4PwKlm7TJUK6B6qsEK77NaiNvXmeQ7Y3e6OVVsBC4a9BSptS/mAYceyAz37Oa8JTTuPRft7uQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.2.0.tgz", + "integrity": "sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==", + "license": "MIT", "engines": { "node": ">=18" }, @@ -6383,6 +6478,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es-toolkit": { + "version": "1.26.1", + "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.26.1.tgz", + "integrity": "sha512-E3H14lHWk8JpupVpIRA1gfNF4r953abHTFW+X1Rp7zl7eG37ksuthfEA4FinyVF/Y807vzzfQS1nubeZk2LTVA==", + "license": "MIT", + "workspaces": [ + "docs", + "benchmarks" + ] + }, "node_modules/es5-ext": { "version": "0.10.64", "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz", @@ -12664,7 +12769,9 @@ } }, "node_modules/react-docgen": { - "version": "7.0.3", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.1.0.tgz", + "integrity": "sha512-APPU8HB2uZnpl6Vt/+0AFoVYgSRtfiP6FLrZgPPTDmqSb2R4qZRbgd0A3VzIFxDt5e+Fozjx79WjLWnF69DK8g==", "license": "MIT", "dependencies": { "@babel/core": "^7.18.9", diff --git a/package.json b/package.json index b01e113..8a15cb5 100644 --- a/package.json +++ b/package.json @@ -40,10 +40,11 @@ "clsx": "^2.1.1", "color-blend": "^4.0.0", "color-rgba": "^3.0.0", + "es-toolkit": "^1.26.1", "focus-trap-react": "^10.2.3", "nanostores": "^0.10.3", "react": "18.2.0", - "react-docgen": "^7.0.3", + "react-docgen": "^7.1.0", "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-syntax-highlighter": "^15.5.0", diff --git a/src/components/astro/PropsTable.astro b/src/components/astro/PropsTable.astro index 1d8943c..a4364a8 100644 --- a/src/components/astro/PropsTable.astro +++ b/src/components/astro/PropsTable.astro @@ -1,17 +1,23 @@ --- -type Prop = { - name: string; - type: string | string[]; - defaultValue: string | number | null; - required: boolean; - description: string; -}; +import type { Prop } from '../../types'; +import { valueKeywordMap } from '../../utils/server/props/valueKeywordMap'; +import { convertKeyOrValue } from '../../utils/server/props/convertKeyOrValue'; interface Props { propsArray: Prop[]; } const { propsArray } = Astro.props; + +const normalizedProps = propsArray.map((prop) => { + return Object.assign({}, prop, { + type: [ + [prop.type].flat(Infinity).map((t) => { + return convertKeyOrValue(t as string); + }), + ].flat(Infinity), + }); +}); --- { @@ -29,7 +35,7 @@ const { propsArray } = Astro.props; - {propsArray.map((prop) => ( + {normalizedProps.map((prop) => ( {prop.name} @@ -46,7 +52,7 @@ const { propsArray } = Astro.props; ); }) ) : ( - {prop.type} + {convertKeyOrValue(prop.type)} )} @@ -83,13 +89,13 @@ const { propsArray } = Astro.props; th { font-size: var(--text-body-sm-size); - line-height: var(--text-body-sm-tight-line); + line-height: var(--text-body-sm-narrow-line); color: var(--color-ubie-black-500); } td { font-size: var(--text-body-sm-size); - line-height: var(--text-body-sm-tight-line); + line-height: var(--text-body-sm-narrow-line); word-break: break-word; } diff --git a/src/layouts/ComponentLayout.astro b/src/layouts/ComponentLayout.astro index 5be3c07..afe87de 100644 --- a/src/layouts/ComponentLayout.astro +++ b/src/layouts/ComponentLayout.astro @@ -5,6 +5,8 @@ import ExampleSwitcher from '@components/react/ExampleSwitcher'; import PostLayout from '@layouts/PostLayout.astro'; import { extractPropsFromFile, getAllExample, buildComponentPath } from '@utils/server'; import type { MarkdownLayoutProps } from 'astro'; +import {unionBy} from 'es-toolkit'; +import type {Prop} from "../types"; type Props = MarkdownLayoutProps<{ title: string; @@ -12,23 +14,24 @@ type Props = MarkdownLayoutProps<{ exampleKey: string; repositoryUrl?: string; baseElement?: string; - exampleSize?: 'md' | 'lg' + exampleSize?: 'md' | 'lg', + props?: Array }>; + const { frontmatter } = Astro.props; const filePath = buildComponentPath(frontmatter.exampleKey); // Add data-* to all components (because the types are too complex to extract) -const propsArray = [ - ...extractPropsFromFile(filePath), - { - name: 'data-*', - type: 'string', - description: 'Custom data attributes', - required: false, - }, -]; +const propsArray: Prop[] = [...unionBy(frontmatter.props ? frontmatter.props : [], extractPropsFromFile(filePath),(p) => { + return p.name +}), { + name: 'data-*', + type: 'string', + description: 'Custom data attributes', + required: false, +}]; const examples = getAllExample(frontmatter.exampleKey); --- diff --git a/src/utils/server/props/convertKeyOrValue.ts b/src/utils/server/props/convertKeyOrValue.ts new file mode 100644 index 0000000..382f5a9 --- /dev/null +++ b/src/utils/server/props/convertKeyOrValue.ts @@ -0,0 +1,11 @@ +import { valueKeywordMap } from '@utils/server/props/valueKeywordMap.ts'; + +export const convertKeyOrValue = (keyOrValue: string) => { + const value = valueKeywordMap.get(keyOrValue); + + if (value) { + return value; + } else { + return keyOrValue; + } +}; diff --git a/src/utils/server/props/valueKeywordMap.ts b/src/utils/server/props/valueKeywordMap.ts new file mode 100644 index 0000000..6fe54a0 --- /dev/null +++ b/src/utils/server/props/valueKeywordMap.ts @@ -0,0 +1,113 @@ +export const valueKeywordMap = new Map>(); + +valueKeywordMap.set('{TextColor}', [ + "'main'", + "'sub'", + "'link'", + "'linkSub'", + "'disabled'", + "'primary'", + "'accent'", + "'alert'", + "'white'", +]); + +valueKeywordMap.set('{Spacing}', ["'xxs'", "'xs'", "'sm'", "'md'", "'lg'", "'xl'", "'xxl'"]); + +valueKeywordMap.set('{BackgroundColor}', [ + "'primary'", + "'primaryDarken'", + "'accent'", + "'accentDarken'", + "'alert'", + "'gray'", + "'white'", +]); + +valueKeywordMap.set('{Width}', [ + "'cap'", + "'ch'", + "'em'", + "'ex'", + "'ic'", + "'lh'", + "'rcap'", + "'rem'", + "'rex'", + "'ric'", + "'rlh'", + "'vh'", + "'vmax'", + "'vmin'", + "'vw'", + "'vb'", + "'vi'", + "'cqw'", + "'cqh'", + "'cqi'", + "'cqb'", + "'cqmin'", + "'cqmax'", + "'px'", + "'cm'", + "'mm'", + "'q'", + "'in'", + "'pc'", + "'pt'", + "'%'", + "'auto'", + "'fit-content'", + "'fit-content()'", + "'min-content'", + "'max-content'", + "'var()'", +]); + +valueKeywordMap.set('{MaxWidth}', [ + "'cap'", + "'ch'", + "'em'", + "'ex'", + "'ic'", + "'lh'", + "'rcap'", + "'rem'", + "'rex'", + "'ric'", + "'rlh'", + "'vh'", + "'vmax'", + "'vmin'", + "'vw'", + "'vb'", + "'vi'", + "'cqw'", + "'cqh'", + "'cqi'", + "'cqb'", + "'cqmin'", + "'cqmax'", + "'px'", + "'cm'", + "'mm'", + "'q'", + "'in'", + "'pc'", + "'pt'", + "'%'", + "'none'", + "'fit-content'", + "'fit-content()'", + "'min-content'", + "'max-content'", + "'var()'", +]); + +valueKeywordMap.set('{MinWidth}', valueKeywordMap.get('{Width}')!); + +valueKeywordMap.set('{Radius}', ["'xs'", "'sm'", "'md'", "'lg'"]); + +valueKeywordMap.set('{BodyFontSize}', ["'xs'", "'sm'", "'md'", "'lg'"]); + +valueKeywordMap.set('{BodyLeading}', ["'default'", "'narrow'"]); From 218c88df5e1dd80b82ac1b711066677918261d9c Mon Sep 17 00:00:00 2001 From: 8845musign <8845musign@gmail.com> Date: Thu, 14 Nov 2024 13:25:52 +0900 Subject: [PATCH 3/5] feat: so that you can overwrite props from mdx --- src/types/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/types/index.ts b/src/types/index.ts index b1b12fd..6b47cbc 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -33,3 +33,11 @@ export const BreakPoint = { desktop: '768px', } as const; export type BreakPoint = keyof typeof BreakPoint; + +export type Prop = { + name: string; + type: string | string[]; + defaultValue?: string; + required?: boolean; + description?: string; +}; From 33b944ce53299078dd24df189ee2e59059e7643b Mon Sep 17 00:00:00 2001 From: 8845musign <8845musign@gmail.com> Date: Thu, 21 Nov 2024 14:09:13 +0900 Subject: [PATCH 4/5] feat: Show props that were not displayed --- package-lock.json | 34 +++---- package.json | 3 +- src/components/astro/PropsTable.astro | 33 ++----- .../react/examples/button/WithIconExample.tsx | 37 ++++---- .../examples/link-button/WithIconExample.tsx | 39 ++++---- .../examples/link-card/WithIconExample.tsx | 3 +- src/components/react/props/TypeList.tsx | 47 ++++++++++ src/layouts/ComponentLayout.astro | 24 ++++- src/layouts/ExampleLayout.astro | 6 ++ src/pages/components/action-half-modal.mdx | 13 +++ src/pages/components/action-modal.mdx | 7 ++ src/pages/components/box.mdx | 94 +++++++++++++++++++ src/pages/components/button.mdx | 4 + src/pages/components/checkbox.mdx | 1 + src/pages/components/divider.mdx | 1 + src/pages/components/flex.mdx | 7 ++ src/pages/components/input.mdx | 2 + src/pages/components/link-button.mdx | 4 + src/pages/components/pre.mdx | 1 + src/pages/components/radio-button.mdx | 2 + src/pages/components/radio-card.mdx | 2 + src/pages/components/select.mdx | 2 + src/pages/components/stack.mdx | 7 ++ src/pages/components/text-area.mdx | 2 + src/pages/components/text.mdx | 37 ++++++++ src/pages/components/toggle.mdx | 1 + src/utils/propsParser/index.ts | 38 -------- src/utils/server/index.ts | 8 +- src/utils/server/props.ts | 70 -------------- ...onvertInternalTypeToUnderstandableTypes.ts | 31 ++++++ src/utils/server/props/convertKeyOrValue.ts | 11 --- .../server/props/convertTypeSetKeyword.ts | 21 +++++ .../server/props/deleteDefaultStatement.ts | 4 + .../server/props/extractPropsFromFile.ts | 40 ++++++++ src/utils/server/props/typeObjToValues.ts | 28 ++++++ src/utils/server/props/types.ts | 7 ++ tsconfig.json | 3 +- 37 files changed, 460 insertions(+), 214 deletions(-) create mode 100644 src/components/react/props/TypeList.tsx delete mode 100644 src/utils/propsParser/index.ts delete mode 100644 src/utils/server/props.ts create mode 100644 src/utils/server/props/convertInternalTypeToUnderstandableTypes.ts delete mode 100644 src/utils/server/props/convertKeyOrValue.ts create mode 100644 src/utils/server/props/convertTypeSetKeyword.ts create mode 100644 src/utils/server/props/deleteDefaultStatement.ts create mode 100644 src/utils/server/props/extractPropsFromFile.ts create mode 100644 src/utils/server/props/typeObjToValues.ts create mode 100644 src/utils/server/props/types.ts diff --git a/package-lock.json b/package-lock.json index 1c13bff..4f0c90d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@types/react-syntax-highlighter": "^15.5.11", "@ubie/design-tokens": "^0.2.0", "@ubie/ubie-icons": "^0.8.2", - "@ubie/ubie-ui": "^0.0.38", + "@ubie/ubie-ui": "^0.0.39", "@unocss/reset": "^0.59.4", "astro": "^4.14.2", "astro-icon": "^1.1.0", @@ -32,7 +32,6 @@ "nanostores": "^0.10.3", "react": "18.2.0", "react-docgen": "^7.1.0", - "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-syntax-highlighter": "^15.5.0", "rehype-autolink-headings": "^7.1.0", @@ -1366,9 +1365,9 @@ } }, "node_modules/@floating-ui/react": { - "version": "0.26.27", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz", - "integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==", + "version": "0.26.28", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz", + "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==", "license": "MIT", "peer": true, "dependencies": { @@ -3252,13 +3251,13 @@ } }, "node_modules/@swc/helpers": { - "version": "0.5.13", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", - "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==", + "version": "0.5.15", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", + "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==", "license": "Apache-2.0", "peer": true, "dependencies": { - "tslib": "^2.4.0" + "tslib": "^2.8.0" } }, "node_modules/@szmarczak/http-timer": { @@ -3829,9 +3828,9 @@ } }, "node_modules/@ubie/ubie-ui": { - "version": "0.0.38", - "resolved": "file:../ubie-ui/ubie-ubie-ui-0.0.38.tgz", - "integrity": "sha512-q+JVuQRsNwCHOROlDDAxB08+0nBkfOZ7j9e1qiRq0W7nTQFvATGBhDAh7+C/hC1waDCr1SZt0IBYMHjFfREAcQ==", + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@ubie/ubie-ui/-/ubie-ui-0.0.39.tgz", + "integrity": "sha512-SHZuKH5SHlEckHJaGFhsv6E5pVGZxlvxm1soHAzeB8CuoDSSMXuMRIA/2a8gS/F+qFOIH/CqE5CaEtFeXky6KA==", "license": "Apache-2.0", "dependencies": { "@react-docgen/cli": "^2.0.4", @@ -12789,13 +12788,6 @@ "node": ">=16.14.0" } }, - "node_modules/react-docgen-typescript": { - "version": "2.2.2", - "license": "MIT", - "peerDependencies": { - "typescript": ">= 4.3.x" - } - }, "node_modules/react-dom": { "version": "18.2.0", "license": "MIT", @@ -15321,7 +15313,9 @@ } }, "node_modules/tslib": { - "version": "2.6.2", + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, "node_modules/tsutils": { diff --git a/package.json b/package.json index 8a15cb5..6acba3c 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@types/react-syntax-highlighter": "^15.5.11", "@ubie/design-tokens": "^0.2.0", "@ubie/ubie-icons": "^0.8.2", - "@ubie/ubie-ui": "^0.0.38", + "@ubie/ubie-ui": "^0.0.39", "@unocss/reset": "^0.59.4", "astro": "^4.14.2", "astro-icon": "^1.1.0", @@ -45,7 +45,6 @@ "nanostores": "^0.10.3", "react": "18.2.0", "react-docgen": "^7.1.0", - "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-syntax-highlighter": "^15.5.0", "rehype-autolink-headings": "^7.1.0", diff --git a/src/components/astro/PropsTable.astro b/src/components/astro/PropsTable.astro index a4364a8..a2184de 100644 --- a/src/components/astro/PropsTable.astro +++ b/src/components/astro/PropsTable.astro @@ -1,23 +1,14 @@ --- import type { Prop } from '../../types'; import { valueKeywordMap } from '../../utils/server/props/valueKeywordMap'; -import { convertKeyOrValue } from '../../utils/server/props/convertKeyOrValue'; +import { convertTypeSetKeyword } from '../../utils/server/props/convertTypeSetKeyword'; +import { TypeList } from '../react/props/TypeList'; interface Props { propsArray: Prop[]; } const { propsArray } = Astro.props; - -const normalizedProps = propsArray.map((prop) => { - return Object.assign({}, prop, { - type: [ - [prop.type].flat(Infinity).map((t) => { - return convertKeyOrValue(t as string); - }), - ].flat(Infinity), - }); -}); --- { @@ -35,7 +26,7 @@ const normalizedProps = propsArray.map((prop) => { - {normalizedProps.map((prop) => ( + {propsArray.map((prop) => ( {prop.name} @@ -43,22 +34,12 @@ const normalizedProps = propsArray.map((prop) => { {!prop.required && !prop.defaultValue &&
optional
} - {Array.isArray(prop.type) ? ( - prop.type.map((type, i) => { - return ( -
- {type} -
- ); - }) - ) : ( - {convertKeyOrValue(prop.type)} - )} + {Array.isArray(prop.type) ? : {prop.type}} {prop.defaultValue || '-'} - {prop.description || '-'} + {prop.description || '-'} ))} @@ -140,4 +121,8 @@ const normalizedProps = propsArray.map((prop) => { line-height: var(--text-note-md-line); color: var(--color-text-sub); } + + .description { + white-space: pre-line; + } diff --git a/src/components/react/examples/button/WithIconExample.tsx b/src/components/react/examples/button/WithIconExample.tsx index 28e2afd..5141090 100644 --- a/src/components/react/examples/button/WithIconExample.tsx +++ b/src/components/react/examples/button/WithIconExample.tsx @@ -1,4 +1,3 @@ -import { BlankLinkIcon, UbieIcon, TrashIcon } from '@ubie/ubie-icons'; import { Button, Stack } from '@ubie/ubie-ui'; import type { FC } from 'react'; @@ -11,20 +10,20 @@ const WithIconExample: FC = () => {
- - + - - - -
@@ -37,20 +36,20 @@ const WithIconExample: FC = () => {
- - + - - - -
@@ -63,20 +62,20 @@ const WithIconExample: FC = () => {
- - + - - - -
diff --git a/src/components/react/examples/link-button/WithIconExample.tsx b/src/components/react/examples/link-button/WithIconExample.tsx index a9d36a6..393945c 100644 --- a/src/components/react/examples/link-button/WithIconExample.tsx +++ b/src/components/react/examples/link-button/WithIconExample.tsx @@ -1,4 +1,3 @@ -import { UbieIcon, BlankLinkIcon, TrashIcon } from '@ubie/ubie-icons'; import { LinkButton, Stack } from '@ubie/ubie-ui'; import type { FC } from 'react'; @@ -12,22 +11,22 @@ const WithIconExample: FC = () => {
- }> + ボタン - } variant="secondary"> + ボタン - } variant="accent"> + ボタン - } variant="alert"> + ボタン - } variant="text"> + ボタン - } variant="textAlert"> + ボタン
@@ -40,25 +39,25 @@ const WithIconExample: FC = () => {
- }> + ボタン - } variant="secondary"> + ボタン - } variant="accent"> + ボタン - } variant="alert"> + ボタン - } variant="text"> + ボタン - } variant="textAlert"> + ボタン - } variant="textAlert"> + ボタン
@@ -72,22 +71,22 @@ const WithIconExample: FC = () => {
- }> + ボタン - } variant="secondary"> + ボタン - } variant="accent"> + ボタン - } variant="alert"> + ボタン - } variant="text"> + ボタン - } variant="textAlert"> + ボタン
diff --git a/src/components/react/examples/link-card/WithIconExample.tsx b/src/components/react/examples/link-card/WithIconExample.tsx index 6c26bf9..70d49e5 100644 --- a/src/components/react/examples/link-card/WithIconExample.tsx +++ b/src/components/react/examples/link-card/WithIconExample.tsx @@ -1,4 +1,3 @@ -import { MedicalFormIcon } from '@ubie/ubie-icons'; import { LinkCard } from '@ubie/ubie-ui'; import type { FC } from 'react'; @@ -7,7 +6,7 @@ const WithIconExample: FC = () => { ); diff --git a/src/components/react/props/TypeList.tsx b/src/components/react/props/TypeList.tsx new file mode 100644 index 0000000..356fecb --- /dev/null +++ b/src/components/react/props/TypeList.tsx @@ -0,0 +1,47 @@ +import { Button } from '@ubie/ubie-ui'; +import React, { useCallback, useState } from 'react'; + +interface Props { + types: string[]; +} + +export const TypeList: React.FC = ({ types }) => { + const types1 = types.slice(0, 3); + const types2 = types.slice(3); + + const [showAll, setShowAll] = useState(false); + const handleClickToggle = useCallback(() => { + setShowAll(!showAll); + }, [showAll, setShowAll]); + + return ( + <> + {types2.length > 0 ? ( +
+ {types1.map((type, index) => ( +
+ {type} +
+ ))} +
+ {showAll && + types2.map((type, index) => ( +
+ {type} +
+ ))} + +
+
+ ) : ( + types1.map((type, index) => ( +
+ {type} +
+ )) + )} + + ); +}; diff --git a/src/layouts/ComponentLayout.astro b/src/layouts/ComponentLayout.astro index afe87de..62f3b5c 100644 --- a/src/layouts/ComponentLayout.astro +++ b/src/layouts/ComponentLayout.astro @@ -1,12 +1,13 @@ --- +import {unionBy} from 'es-toolkit'; import PropsTable from '@components/astro/PropsTable.astro'; import RepositoryLink from '@components/astro/RepositoryLink.astro'; import ExampleSwitcher from '@components/react/ExampleSwitcher'; import PostLayout from '@layouts/PostLayout.astro'; import { extractPropsFromFile, getAllExample, buildComponentPath } from '@utils/server'; -import type { MarkdownLayoutProps } from 'astro'; -import {unionBy} from 'es-toolkit'; +import {convertTypeSetKeyword} from "../utils/server/props/convertTypeSetKeyword"; import type {Prop} from "../types"; +import type { MarkdownLayoutProps } from 'astro'; type Props = MarkdownLayoutProps<{ title: string; @@ -14,6 +15,7 @@ type Props = MarkdownLayoutProps<{ exampleKey: string; repositoryUrl?: string; baseElement?: string; + allowClassName?: boolean; exampleSize?: 'md' | 'lg', props?: Array }>; @@ -21,10 +23,19 @@ type Props = MarkdownLayoutProps<{ const { frontmatter } = Astro.props; -const filePath = buildComponentPath(frontmatter.exampleKey); +const { exampleKey, props = [] } = frontmatter; + +const filePath = buildComponentPath(exampleKey); + +const convertedProps = props.map(prop => { + return { + ...prop, + type: convertTypeSetKeyword(prop.type) + } +}) // Add data-* to all components (because the types are too complex to extract) -const propsArray: Prop[] = [...unionBy(frontmatter.props ? frontmatter.props : [], extractPropsFromFile(filePath),(p) => { +const propsArray: Prop[] = [...unionBy(convertedProps, extractPropsFromFile(filePath),(p) => { return p.name }), { name: 'data-*', @@ -32,6 +43,9 @@ const propsArray: Prop[] = [...unionBy(frontmatter.props ? frontmatter.props : [ description: 'Custom data attributes', required: false, }]; +propsArray.sort((a, b) => { + return a.name.localeCompare(b.name); +}) const examples = getAllExample(frontmatter.exampleKey); --- @@ -65,7 +79,7 @@ const examples = getAllExample(frontmatter.exampleKey); frontmatter.baseElement && (

- <{frontmatter.baseElement}>要素をベースにしています。 表にない属性もprop経由で使用できます（classNameは除く）。 + <{frontmatter.baseElement}>要素をベースにしています。 表にない属性もprop経由で使用できます{frontmatter.allowClassName ? '' : '（classNameは除く）'}。

) } diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index 0238334..5e22a4f 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -19,3 +19,9 @@ const { title } = Astro.props; + + diff --git a/src/pages/components/action-half-modal.mdx b/src/pages/components/action-half-modal.mdx index 738c5db..a46126b 100644 --- a/src/pages/components/action-half-modal.mdx +++ b/src/pages/components/action-half-modal.mdx @@ -6,6 +6,19 @@ layout: '@layouts/ComponentLayout.astro' description: '画面の下部を占有する、アクションを実行するためのモーダルダイアログ' thumbnail: '/assets/images/components/thumbnail-action-half-modal.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/ActionHalfModal' +props: +- name: "onPrimaryAction" + description: "プライマリーアクションボタンが実行された場合のコールバック" + type: "() => void" +- name: "primaryActionLabel" + description: "プライマリーアクションボタンのラベル\nonPrimaryActionが指定されていたら必須" + type: "string" +- name: "onSecondaryAction" + description: "セカンダリーアクションボタンが実行された場合のコールバック" + type: "() => void" +- name: "secondaryActionLabel" + description: "セカンダリーアクションボタンのラベル\nonSecondaryActionが指定されていたら必須" + type: "string" --- import ModalDialogNecessary from '@sharedDocuments/modalDialog/ModalDialogNecessary.md'; diff --git a/src/pages/components/action-modal.mdx b/src/pages/components/action-modal.mdx index 5efae09..0d1536f 100644 --- a/src/pages/components/action-modal.mdx +++ b/src/pages/components/action-modal.mdx @@ -6,6 +6,13 @@ description: 'ユーザーに確認や操作などを求める場合に使用す thumbnail: '/assets/images/components/thumbnail-action-modal.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/ActionModal' exampleSize: 'lg' +props: +- name: "onSecondaryAction" + description: "セカンダリーアクションボタンが実行された場合のコールバック" + type: "() => void" +- name: "secondaryActionLabel" + description: "セカンダリーアクションボタンのラベル\nonSecondaryActionが指定されていたら必須" + type: "string" --- import ModalDialogNecessary from '@sharedDocuments/modalDialog/ModalDialogNecessary.md'; diff --git a/src/pages/components/box.mdx b/src/pages/components/box.mdx index c863fbd..3944998 100644 --- a/src/pages/components/box.mdx +++ b/src/pages/components/box.mdx @@ -5,6 +5,100 @@ layout: '@layouts/ComponentLayout.astro' description: 'Webレイアウトの基本であるボックスを提供します' thumbnail: '/assets/images/components/thumbnail-box.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Box' +props: +- name: "children" + description: "Box内に表示するコンテンツやコンポーネント" + type: "ReactNode" +- name: "as" + description: "レンダリングされるHTML要素" + defaultValue: "div" + type: "'HTMLの要素名'" +- name: "backgroundColor" + description: "背景色" + type: "{BackgroundColor}" +- name: "border" + description: "ボーダーの種類" + type: ["'gray'", "'grayThick'", "'primary'", "'primaryThick'"] +- name: "width" + description: "幅を指定。fullは後方互換のため残している" + defaultValue: "auto" + type: ["'full'", "{Width}"] +- name: "textBold" + description: "内包するテキストをボールドとするかどうか。指定しない場合は親要素のスタイルを継承、trueでボールド、falseとするとnormal" + type: "boolean" +- name: "textColor" + description: "文字色の抽象値" + type: "{TextColor}" +- name: "textAlign" + description: "テキストの配置。指定しない場合、親要素の配置を継承" + type: ["'left'", "'center'", "'right'"] +- name: "textNoWrap" + description: "領域が狭い場合でも、テキストを折り返えさない" + type: "boolean" +- name: "inline" + description: "inline-blockとして扱う" + defaultValue: "false" + type: "boolean" +- name: "p" + description: "四方のパディングを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "px" + description: "水平方向のパディングを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "py" + description: "垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "pt" + description: "上方向のパディング。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "pr" + description: "右方向のパディング。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "pb" + description: "下方向のパディング。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "pl" + description: "左方向のパディング。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "m" + description: "四方のマージンを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "mx" + description: "水平方向のマージンを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "my" + description: "垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "mt" + description: "上方向のマージンを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "mr" + description: "右方向のマージンを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "mb" + description: "下方向のマージンを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "ml" + description: "左方向のマージンを一括で設定。Spacing Tokenのキーを指定\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "radius" + description: "角丸を指定。Radius Tokenのキーを指定\nxs=2px,sm=4px,md=8px,lg=12px" + type: "{Radius}" +- name: "minWidth" + description: "最小幅" + type: "{MinWidth}" +- name: "maxWidth" + description: "最大幅" + type: "{MaxWidth}" +- name: "textType" + description: "配下に含むテキストの種類" + type: "'body'" +- name: "textSize" + description: "配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能" + type: "{BodyFontSize}" +- name: "textLeading" + description: "配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能" + type: "{BodyLeading}" --- ## Feature diff --git a/src/pages/components/button.mdx b/src/pages/components/button.mdx index 783c310..622eab5 100644 --- a/src/pages/components/button.mdx +++ b/src/pages/components/button.mdx @@ -5,6 +5,10 @@ layout: '@layouts/ComponentLayout.astro' description: 'ユーザーがアクションを実行するためのボタン' thumbnail: '/assets/images/components/thumbnail-button.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Button' +props: +- name: "prefixIcon" + description: "前方配置のアイコン" + type: ["default", "ReactElement", "IconName"] --- import Variant from '@sharedDocuments/button/Variant.md'; diff --git a/src/pages/components/checkbox.mdx b/src/pages/components/checkbox.mdx index d78d2b2..f9a3dd3 100644 --- a/src/pages/components/checkbox.mdx +++ b/src/pages/components/checkbox.mdx @@ -5,6 +5,7 @@ layout: '@layouts/ComponentLayout.astro' description: '複数選択、または選択/未選択の切り替え' thumbnail: '/assets/images/components/thumbnail-checkbox.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Checkbox' +baseElement: 'input' --- ## Usage diff --git a/src/pages/components/divider.mdx b/src/pages/components/divider.mdx index 62ffc34..8688e13 100644 --- a/src/pages/components/divider.mdx +++ b/src/pages/components/divider.mdx @@ -5,6 +5,7 @@ layout: '@layouts/ComponentLayout.astro' description: 'コンテンツの区切り' thumbnail: '/assets/images/components/thumbnail-divider.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Divider' +baseElement: 'hr' --- ## Feature diff --git a/src/pages/components/flex.mdx b/src/pages/components/flex.mdx index 1d71ae2..2c58b76 100644 --- a/src/pages/components/flex.mdx +++ b/src/pages/components/flex.mdx @@ -5,6 +5,13 @@ layout: '@layouts/ComponentLayout.astro' description: 'display: flexのラッパーコンポーネント' thumbnail: '/assets/images/components/thumbnail-flex.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Flex' +props: +- name: "spacing" + description: "子要素の間隔。指定しない場合は0\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" +- name: "gap" + description: "spacingのエイリアス（どちらかしか指定できません）\nxxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px" + type: "{Spacing}" --- ## Feature diff --git a/src/pages/components/input.mdx b/src/pages/components/input.mdx index 110f450..212f88b 100644 --- a/src/pages/components/input.mdx +++ b/src/pages/components/input.mdx @@ -5,6 +5,8 @@ layout: '@layouts/ComponentLayout.astro' description: 'テキストを入力可能なテキストフィールド' thumbnail: '/assets/images/components/thumbnail-input.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Input' +baseElement: 'input' +allowClassName: true --- import Label from '@sharedDocuments/form/Label.md'; diff --git a/src/pages/components/link-button.mdx b/src/pages/components/link-button.mdx index 80c4d61..66a5d89 100644 --- a/src/pages/components/link-button.mdx +++ b/src/pages/components/link-button.mdx @@ -5,6 +5,10 @@ layout: '@layouts/ComponentLayout.astro' description: 'リンクとして機能するボタン' thumbnail: '/assets/images/components/thumbnail-button.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Button' +props: +- name: "prefixIcon" + description: "前方配置のアイコン" + type: ["default", "ReactElement", "IconName"] --- import Variant from '@sharedDocuments/button/Variant.md'; diff --git a/src/pages/components/pre.mdx b/src/pages/components/pre.mdx index 6bb7374..77ac33e 100644 --- a/src/pages/components/pre.mdx +++ b/src/pages/components/pre.mdx @@ -6,6 +6,7 @@ layout: '@layouts/ComponentLayout.astro' description: 'テキストの折り返しを制御' thumbnail: '/assets/images/components/thumbnail-default.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Pre' +baseElement: 'span' --- ## Feature diff --git a/src/pages/components/radio-button.mdx b/src/pages/components/radio-button.mdx index 236f4c7..468a7f6 100644 --- a/src/pages/components/radio-button.mdx +++ b/src/pages/components/radio-button.mdx @@ -5,6 +5,8 @@ layout: '@layouts/ComponentLayout.astro' description: 'リストの中から1つの項目を選択' thumbnail: '/assets/images/components/thumbnail-radio-button.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/RadioButton' +baseElement: 'input' +allowClassName: true --- ## Usage diff --git a/src/pages/components/radio-card.mdx b/src/pages/components/radio-card.mdx index 31081f0..5bdd87d 100644 --- a/src/pages/components/radio-card.mdx +++ b/src/pages/components/radio-card.mdx @@ -5,6 +5,8 @@ layout: '@layouts/ComponentLayout.astro' description: 'Accessibilityに配慮したカード状のラジオボタン' thumbnail: '/assets/images/components/thumbnail-radio-card.svg' repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/RadioCard' +baseElement: 'input' +allowClassName: true --- import SelectingFormComponents from '@sharedDocuments/form/SelectingFormComponents.md'; diff --git a/src/pages/components/select.mdx b/src/pages/components/select.mdx index 3ec2ce2..96f00b6 100644 --- a/src/pages/components/select.mdx +++ b/src/pages/components/select.mdx @@ -5,6 +5,8 @@ layout: '@layouts/ComponentLayout.astro' description: '複数の選択肢から1つを選ぶためのコンポーネント。内部でネイティブの