|
| 1 | +import { |
| 2 | + // tabify, |
| 3 | + codify, |
| 4 | + snippetToCode, |
| 5 | + removeNewline, |
| 6 | + filterPropType, |
| 7 | +} from './utils/common'; |
| 8 | +import { MUST_INCLUDE_PROP_TYPES } from './utils/parentProps'; |
| 9 | +import { ComponentDoc, Props } from 'react-docgen-typescript'; |
| 10 | +import orderBy from 'lodash/orderBy'; |
| 11 | +import prettier from 'prettier'; |
| 12 | +import dedent from 'dedent'; |
| 13 | +import path from 'path'; |
| 14 | +import fs from 'fs'; |
| 15 | +import { |
| 16 | + Method, |
| 17 | + StringIndexedObject, |
| 18 | +} from 'react-docgen-typescript/lib/parser'; |
| 19 | +import Handlebars from 'handlebars'; |
| 20 | +import { ComponentUsage, usageGenParser } from './parser/usageParser'; |
| 21 | + |
| 22 | +type PropRowT = { |
| 23 | + name?: string; |
| 24 | + description?: string; |
| 25 | + default?: string; |
| 26 | + type?: string; |
| 27 | +}; |
| 28 | + |
| 29 | +type TemplateOptionsT = { |
| 30 | + id: string; |
| 31 | + title: string; |
| 32 | + description: string; |
| 33 | + imports: string; |
| 34 | + installation: string; |
| 35 | + showUsage: boolean; |
| 36 | + parentComponent: string; |
| 37 | + usageFileExists: boolean; |
| 38 | + playgroundExists: boolean; |
| 39 | + usage: string; |
| 40 | + usages: ComponentUsage['usage']; |
| 41 | + showProps: boolean; |
| 42 | + props?: PropRowT[]; |
| 43 | + themeKey: string; |
| 44 | + includeProps?: string; |
| 45 | +}; |
| 46 | + |
| 47 | +const root = path.join(__dirname, '../../../'); |
| 48 | +// const pkgRegExp = new RegExp('packages/(.*)/src'); |
| 49 | +// const pkgPath = path.join(root, 'packages'); |
| 50 | +const docsPath = path.join(root, 'website/docs'); |
| 51 | +const usagePath = path.join(docsPath, 'component_usage'); |
| 52 | +const playgroundPath = path.join(docsPath, '..', 'playground'); |
| 53 | + |
| 54 | +const File = { |
| 55 | + exist(...paths: string[]) { |
| 56 | + return fs.existsSync(path.join(...paths)); |
| 57 | + }, |
| 58 | + read(...paths: string[]) { |
| 59 | + return String(fs.readFileSync(path.join(...paths))); |
| 60 | + }, |
| 61 | + write(content: string, ...paths: string[]) { |
| 62 | + fs.writeFileSync(path.join(...paths), content); |
| 63 | + }, |
| 64 | +}; |
| 65 | + |
| 66 | +const template = Handlebars.compile( |
| 67 | + File.read(__dirname, './templates/mdx-template.hbs') |
| 68 | +); |
| 69 | + |
| 70 | +export class Component implements ComponentDoc { |
| 71 | + description: string; |
| 72 | + displayName: string; |
| 73 | + filePath: string; |
| 74 | + props: Props; |
| 75 | + tags?: StringIndexedObject<string>; |
| 76 | + methods: Method[]; |
| 77 | + usages: ComponentUsage['usage']; |
| 78 | + meta: ComponentUsage['meta']; |
| 79 | + |
| 80 | + static parents: Record<string, string[]>; |
| 81 | + |
| 82 | + constructor(component: ComponentDoc) { |
| 83 | + this.displayName = component.displayName; |
| 84 | + this.description = component.description; |
| 85 | + this.filePath = component.filePath; |
| 86 | + this.props = component.props; |
| 87 | + this.methods = component.methods; |
| 88 | + this.tags = component.tags; |
| 89 | + |
| 90 | + this.extractUsage(); |
| 91 | + } |
| 92 | + |
| 93 | + extractUsage() { |
| 94 | + const usageFilePath = path.resolve( |
| 95 | + this.filePath, |
| 96 | + '..', |
| 97 | + `${this.displayName}.usage.tsx` |
| 98 | + ); |
| 99 | + if (!File.exist(usageFilePath)) { |
| 100 | + return; |
| 101 | + } |
| 102 | + const { desc, meta, usage } = usageGenParser(usageFilePath); |
| 103 | + this.usages = usage; |
| 104 | + this.meta = meta; |
| 105 | + this.description = desc || this.description; |
| 106 | + } |
| 107 | + |
| 108 | + async generate() { |
| 109 | + return new Promise((resolve) => { |
| 110 | + const { displayName, tags, description } = this; |
| 111 | + const id = displayName.toLowerCase().replace('.', '_'); |
| 112 | + const themeKey = displayName.replace('.', ''); |
| 113 | + const [parentComponent] = displayName.split('.'); |
| 114 | + // const [, pkg] = this.filePath.match(pkgRegExp); |
| 115 | + |
| 116 | + const { imports = '', installation = '', usage = '' } = tags || {}; |
| 117 | + |
| 118 | + const usageFileExists = File.exist(usagePath, `${displayName}.mdx`); |
| 119 | + |
| 120 | + const playgroundExists = File.exist( |
| 121 | + playgroundPath, |
| 122 | + displayName, |
| 123 | + `${id}.playground.tsx` |
| 124 | + ); |
| 125 | + const handleBar: TemplateOptionsT = { |
| 126 | + id, |
| 127 | + title: displayName, |
| 128 | + description, |
| 129 | + imports, |
| 130 | + parentComponent, |
| 131 | + installation, |
| 132 | + showUsage: !!this.usages?.length || Boolean(usage) || usageFileExists, |
| 133 | + usageFileExists, |
| 134 | + playgroundExists, |
| 135 | + usage: this.makeUsages() || dedent(snippetToCode(usage).trim()), |
| 136 | + usages: this.usages, |
| 137 | + showProps: true, |
| 138 | + themeKey, |
| 139 | + ...this.propTable(), |
| 140 | + }; |
| 141 | + const mdFile = prettier.format(template(handleBar), { parser: 'mdx' }); |
| 142 | + |
| 143 | + const mdFilePath = path.join( |
| 144 | + docsPath, |
| 145 | + 'components', |
| 146 | + `${this.displayName}.mdx` |
| 147 | + ); |
| 148 | + // console.log(pkg, parentComponent, childComponent); |
| 149 | + |
| 150 | + File.write(mdFile, mdFilePath); |
| 151 | + resolve(displayName); |
| 152 | + }); |
| 153 | + } |
| 154 | + |
| 155 | + private makeUsages() { |
| 156 | + return ( |
| 157 | + this.usages |
| 158 | + ?.map(({ title, desc, code, metaData }) => { |
| 159 | + let lang = 'tsx'; |
| 160 | + let live = 'live'; |
| 161 | + const defTags = { |
| 162 | + lang: (v) => ((lang = v), ''), |
| 163 | + live: (v) => ((live = v ? 'live' : ''), ''), |
| 164 | + }; |
| 165 | + const props = metaData |
| 166 | + ?.map(([tag, value]) => |
| 167 | + defTags[tag] ? defTags[tag](value) : `${tag}=${value}` |
| 168 | + ) |
| 169 | + .join(' '); |
| 170 | + |
| 171 | + return `### ${title} \n ${desc} \n \`\`\`${lang} ${live} ${props} \n ${code} \n\`\`\`\n `; |
| 172 | + }) |
| 173 | + .join('\n') || '' |
| 174 | + ); |
| 175 | + } |
| 176 | + |
| 177 | + private propTable() { |
| 178 | + const orderedProps = orderBy(Object.values(this.props), ['name'], ['asc']); |
| 179 | + if (!orderedProps.length) { |
| 180 | + return ''; |
| 181 | + } |
| 182 | + |
| 183 | + const rows: PropRowT[] = []; |
| 184 | + |
| 185 | + for (const props of orderedProps) { |
| 186 | + const { name, type, description, defaultValue, parent } = props; |
| 187 | + if (parent) { |
| 188 | + const { name: parentName, fileName: parentFileName } = parent; |
| 189 | + if (!MUST_INCLUDE_PROP_TYPES.includes(parentName)) { |
| 190 | + if ( |
| 191 | + parentFileName.includes('node_modules') || |
| 192 | + (parentFileName.includes('base/src') && |
| 193 | + !this.filePath.includes(parentFileName)) |
| 194 | + ) { |
| 195 | + continue; |
| 196 | + } |
| 197 | + } |
| 198 | + } |
| 199 | + |
| 200 | + rows.push({ |
| 201 | + name: codify(name), |
| 202 | + type: filterPropType(type.name), |
| 203 | + default: codify(defaultValue?.value), |
| 204 | + description: removeNewline(description), |
| 205 | + }); |
| 206 | + } |
| 207 | + return { |
| 208 | + props: rows, |
| 209 | + includeProps: Component.parents[this.displayName].sort().join(', '), |
| 210 | + }; |
| 211 | + } |
| 212 | +} |
0 commit comments