diff --git a/packages/cli/src/commands/setup/ui/libraries/redwoodui.ts b/packages/cli/src/commands/setup/ui/libraries/redwoodui.ts index f6315beb9ccd..5600eb9ee9c8 100644 --- a/packages/cli/src/commands/setup/ui/libraries/redwoodui.ts +++ b/packages/cli/src/commands/setup/ui/libraries/redwoodui.ts @@ -415,12 +415,6 @@ export const handler = async () => { options: { persistentOutput: true }, title: 'Add RedwoodUI components to your project', task: async (_ctx, task) => { - // TODO ahhhh finally the meat and potatoes of the setup. - // We need to add the components to the project. - // We can first get a list of all the files in RWUI's web/src/ui directory, - // and then filter out the ones that are already in the project. - // Then, we can provide a list of pending files to the user, and ask them if they want to add them. (maybe? meh) - // top-level components const listOfComponentFolders = (await fetchFromRWUIRepo( 'web/src/ui', @@ -435,16 +429,18 @@ export const handler = async () => { /^[A-Z]/.test(val.name), ) const formComponentsAvailable = listOfFormComponentFolders.filter( - (val) => /^[A-Z]/.test(val.name), + (val) => + /^[A-Z]/.test(val.name) && val.name !== 'InputFieldWrapper', // InputFieldWrapper is a shared dependency, and not a regular component ) const selectedComponents = await task.prompt({ type: 'multiselect', message: - 'Select the components you want to add to your project (form fields are next; type A to select all):' + + 'Select the components you want to add to your project (form fields are next):' + c.warning( '\n🚨 All selected components will be overwritten if they already exist.\nMake sure to back up any important changes before proceeding.\n', ), + hint: 'Use the arrow keys to navigate, space to select, and A to select all', choices: [ ...componentsAvailable.map((component) => component.name), ], @@ -457,6 +453,7 @@ export const handler = async () => { c.warning( '\n🚨 All selected components will be overwritten if they already exist.\nMake sure to back up any important changes before proceeding.\n', ), + hint: 'Use the arrow keys to navigate, space to select, and A to select all', choices: [ ...formComponentsAvailable.map((component) => component.name), ], @@ -465,7 +462,7 @@ export const handler = async () => { return task.newListr([ ...selectedComponents.map((componentToInstall) => ({ options: { persistentOutput: true }, - title: `Install component ${componentToInstall}`, + title: `Install component: ${componentToInstall}`, task: async () => { // need to get both the .tsx and .stories.tsx files const componentFilePath = `web/src/ui/${componentToInstall}/${componentToInstall}.tsx` @@ -475,6 +472,7 @@ export const handler = async () => { const componentStoriesContent = await fetchFromRWUIRepo( componentStoriesFilePath, ) + ensureDirectoryExistence(componentFilePath) fs.writeFileSync(componentFilePath, componentContent as string) fs.writeFileSync( componentStoriesFilePath, @@ -484,7 +482,7 @@ export const handler = async () => { })), ...selectedFormComponents.map((formComponentToInstall) => ({ options: { persistentOutput: true }, - title: `Install form component${formComponentToInstall}`, + title: `Install form component: ${formComponentToInstall}`, task: async () => { // need to get both the .tsx and .stories.tsx files const componentFilePath = `web/src/ui/formFields/${formComponentToInstall}/${formComponentToInstall}.tsx` @@ -494,6 +492,7 @@ export const handler = async () => { const componentStoriesContent = await fetchFromRWUIRepo( componentStoriesFilePath, ) + ensureDirectoryExistence(componentFilePath) fs.writeFileSync(componentFilePath, componentContent as string) fs.writeFileSync( componentStoriesFilePath, @@ -513,31 +512,6 @@ export const handler = async () => { ] : []), ]) - - console.log('selectedComponents', selectedComponents) - console.log('selectedFormComponents', selectedFormComponents) - - // const componentsToAdd = Object.keys(selectedComponents).filter( - // (key) => selectedComponents[key], - // ) - - // if (componentsToAdd.length === 0) { - // task.skip('No components selected to add') - // return - // } - - // for (const componentPath of componentsToAdd) { - // const componentContent = await fetchFromRWUIRepo(componentPath) - // const componentName = path.basename(componentPath) - // const destinationPath = path.join( - // rwPaths.web.src, - // 'ui', - // componentName, - // ) - - // fs.ensureDirSync(path.dirname(destinationPath)) - // fs.writeFileSync(destinationPath, componentContent as string) - // } }, }, { @@ -765,6 +739,14 @@ function extractLayerContent(css: string, layerName: string): string | null { return content } +function ensureDirectoryExistence(filePath: string) { + const dirname = path.dirname(filePath) + if (fs.existsSync(dirname)) { + return true + } + fs.mkdirSync(dirname, { recursive: true }) +} + /** * TODO: finish implementing this and actually use it. * The main challenge, I think, will be that an import name isn't necessarily the same as the package name: eg, `import tailwindDefaults from 'tailwindcss/defaultConfig' is importing from the package `tailwindcss`, not `tailwindcss/defaultConfig`.