Capitalization issues with component names

[indiebloom]

1st Capitalization issue:
npx generate-react-cli component -f test --path src/components/base

Issue:
creates test.tsx, but test.test.tsx imports ./Test, which fails

Details:
results in files called
test.tsx
test.test.tsx

test.test.tsx looks like this

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Test from './Test';

describe('<Test />', () => {
  test('it should mount', () => {
    render(<Test />);
    
    const test = screen.getByTestId('Test');

    expect(test).toBeInTheDocument();
  });
});

this line fails because ./Test doesn't exist
import Test from './Test'; 

2nd Capitalization issue:
npx generate-react-cli component -f ABTest --path src/components/base

Issues:
Changes component name to AbTest, with AbTestProps instead of ABTest
File name is ABTest.tsx, but ABTest.test.tsx imports ./AbTest, which fails

[krzasteka]

1st Capitalization issue:
npx generate-react-cli component -f test --path src/components/base

If you take a look at the template and the calls to replace(...) you can see that this is intended behavior. By convention, in React, components are PascalCase, which is true for the component filenames as well. (e.g. App.tsx)

2nd Capitalization issue:
npx generate-react-cli component -f ABTest --path src/components/base

What is your expected behavior in this case? Which do you consider to be correct, ABTest or AbTest, or do you only care if it's consistent?

You can create a custom template which uses templatename vs TemplateName for the import. (I would go this route for now)

You could submit a PR to allow the config file to keep certain replacements as is.

You could submit a pr to change filenames to PascalCase.

[john-gill-acn]

Running into this right now. Been doing a find and replace. It seems like the right idea would be to honor whatever the user entered.

We only need to make sure the first letter is uppercased to enforce PascalCase. To change case further down the comp name seems like a overstep.

[arminbro]

I'm leaning toward updating the GRC default templates to use templatename instead of TemplateName. This change will ensure the format matches how users type it in the command prompt.

I believe this should be the default behavior, regardless of React's PascalCase convention for component names.

If users want to create a custom template with their preferred casing, they must remember to type it that way in their terminal.

Let me know what you guys think.

[john-gill-acn]

@arminbro I love that idea, but I am not a maintainer of this codebase. We use it for a client.

[github-actions]

🎉 This issue has been resolved in version 8.4.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[arminbro]

Thanks for the feedback, @john-gill-acn. As we discussed, I've adjusted to using the templatename casing. The update is available with the latest version of GRC.