Lf 4156 create animal batch creation form card

[navDhammu]

Description

• Created card component that holds inputs for adding animals
• Created reusable CardV2 based on current designs, uses the as prop to render custom html tag other than div if needed. Example, <Card as='form'>
• Created individual AnimalTypeSelect and AnimalBreedSelect components that can be used in other places.
• Requires type options, breed options, and sex detail options to be passed in from parent
• Logic for conditionally showing breed/type options should be handled in a parent container component or inside of custom hook.
• Added search icon to react select when dropdown is open as was suggested as a usability improvement by Loic.
• Changed storybook config to allow placing story files anywhere inside src as was discussed in tech daily.

@SayakaOno There were some minor changes to NumberInput here, for example I added a className prop to allow changing styles for the outer div that wraps the input field. This might create conflicts with your work in the soil amendment components.

Jira link: https://lite-farm.atlassian.net/browse/LF-4156

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[navDhammu]

I was getting a type error for the control prop so added this generic to prevent it.

[navDhammu]

The initial value type was giving an error so changed it use defaultValue prop that comes with react hook form

[navDhammu]

This Input is handling text inputs, number inputs, date pickers, and passwords inputs all in one. It might be good to extract those out into different components and also use typescript to avoid ts-ignore.

Also the placeholder text appears to be darker than the one in react select.

[SayakaOno]

I added some minor comments, but it looks great! Thank you!

[navDhammu]

@SayakaOno Thanks for your review - I've made the requested changes.

[Duncan-Brain]

Tiny thing: This could be combined with the other import above

[Duncan-Brain]

I am really impressed by this one, I learned a lot haha

Everything looks pretty great, there are a few new things here I will still have to learn but happy to approve. I just had one question before doing so:

My only thought was that maybe since we are changing the location of our stories that we could maybe formalize it with a separate PR. I think I missed the discussion and I am curious about the pros and cons and was thinking since it could be a simple drag and drop to move the other stories we might be able to crush out the changed location for other stories so we don't support 2 systems?

[navDhammu]

@Duncan-Brain Thank you for reviewing

The idea for having the stories in the same folder as the component was for better organization (atleast in my opinion and others seemed to agree). It's easier to know where a story is and usually when working on a frontend ticket you need both the component and story files and makes it easier to work on them when they're located together. It's also one less thing to have to think about when creating a new component - the story just goes in the same place as the component.

I think a separate PR is a good idea. Might be frustrating manually moving every single story file though.

[Duncan-Brain]

@navDhammu I can get on board for that change, I think it lines up well with Anto's PR #3139

She actually put them in their own folder inside the component folder which maybe we should do also?

The main con that I was thinking about was for excluding stories from the server and build process. We don't currently do it but we would need to parse out the files should we decide to streamline the server at some point vs. exclude 1 folder. Very doable but I think why many choose the existing format.

The all files thing isn't necessary... but I figured if it takes like 1 hr it would be worth it so that we don't have two systems. We have a lot of transitioning architecture changes that might be hard to keep up with or confusing too haha

[navDhammu]

@Duncan-Brain I like the structure in Anto's PR for the component library, and I think it's fine to use the stories folder like she did. Although I feel it's better to keep the folder structure flat, especially since most components would have one story file, so having just one file inside the stories folder seems a bit overkill to me.

Regarding the server and build process - I'm not very familiar with how vite works but isn't storybook automatically not included in the build and dev server? There's a separate dev server for storybook and for the application code so I don't think one is included in the other, but I could be wrong.

And I would prefer to just move all the story files in one PR for consistency. If creating a separate PR is decided then should I go ahead and change the stories for this PR back to the old structure, and create a new ticket for the change?

[Duncan-Brain]

cool!