Skip to content

Commit

Permalink
Adding components is a go!
Browse files Browse the repository at this point in the history
  • Loading branch information
@arimendelow
arimendelow committed Sep 26, 2024
1 parent 4bdb6ac commit 5f96e63
Showing 1 changed file with 17 additions and 35 deletions.
52 changes: 17 additions & 35 deletions packages/cli/src/commands/setup/ui/libraries/redwoodui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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<string[]>({
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),
],
Expand All @@ -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),
],
Expand All @@ -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`
Expand All @@ -475,6 +472,7 @@ export const handler = async () => {
const componentStoriesContent = await fetchFromRWUIRepo(
componentStoriesFilePath,
)
ensureDirectoryExistence(componentFilePath)
fs.writeFileSync(componentFilePath, componentContent as string)
fs.writeFileSync(
componentStoriesFilePath,
Expand All @@ -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`
Expand All @@ -494,6 +492,7 @@ export const handler = async () => {
const componentStoriesContent = await fetchFromRWUIRepo(
componentStoriesFilePath,
)
ensureDirectoryExistence(componentFilePath)
fs.writeFileSync(componentFilePath, componentContent as string)
fs.writeFileSync(
componentStoriesFilePath,
Expand All @@ -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)
// }
},
},
{
Expand Down Expand Up @@ -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`.
Expand Down

0 comments on commit 5f96e63

Please sign in to comment.