Scribd
Upload
3 views16 pages

React Component Development Assignment

The document outlines an assignment submission by Thotakura Sanjana Snigdha, focusing on the development of two React components: InputField and DataTable, using TypeScript, TailwindCSS, and Storybook. It includes deliverables such as working components, a demo via Storybook, and a README with setup instructions, while noting that several code files are missing. The approach emphasizes type safety, utility-first styling, and interactive documentation, along with instructions for local setup and deployment.

Uploaded by

thotakurasanjanasnigdha
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views16 pages

React Component Development Assignment

The document outlines an assignment submission by Thotakura Sanjana Snigdha, focusing on the development of two React components: InputField and DataTable, using TypeScript, TailwindCSS, and Storybook. It includes deliverables such as working components, a demo via Storybook, and a README with setup instructions, while noting that several code files are missing. The approach emphasizes type safety, utility-first styling, and interactive documentation, along with instructions for local setup and deployment.

Uploaded by

thotakurasanjanasnigdha
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React Component Development Assignment

Submission by Thotakura Sanjana Snigdha

Tech: React · TypeScript · TailwindCSS · Storybook


Deliverables
• Two working components: InputField, DataTable
• Simple demo via Storybook stories
• Documentation: README with setup & deployment instructions
Screenshots (Mock UI captures)
InputField — Default

InputField — Password Toggle

InputField — Error State


DataTable — Default

DataTable — Sorted (Age)


DataTable — Selectable (Row selected)
Full code: src/components/[Link]
// src/components/[Link] not found (zip missing)
Full code: src/components/[Link]
// src/components/[Link] not found (zip missing)
Full code: stories/[Link]
// stories/[Link] not found (zip missing)
Full code: stories/[Link]
// stories/[Link] not found (zip missing)
Full code: tests/[Link]
// tests/[Link] not found (zip missing)
Full code: tests/[Link]
// tests/[Link] not found (zip missing)
Full code: [Link]
// [Link] not found (zip missing)
Full code: [Link]
// [Link] not found (zip missing)
Summarized Code Snippets
InputField highlights:
- Controlled/uncontrolled support via value prop and internal state.
- Variants: filled, outlined, ghost implemented with Tailwind utility classes.
- Sizes: sm, md, lg mapped to padding & font-size.
- Accessibility: aria-invalid, aria-describedby for helper/error text.
- Optional clear button and password toggle with internal state.
DataTable highlights:
- Generic typing with Column<T> and DataTableProps<T>.
- Sorting implemented via state (sortKey, sortAsc) and [Link].
- Row selection tracked with a Set of ids; onRowSelect callback provided.
- Loading and empty states included.
- Responsive container using overflow-x-auto.
Approach & Notes
- TypeScript for type safety and clearer props.
- TailwindCSS for utility-first styling.
- Storybook for interactive documentation.
- Vitest + Testing Library for unit tests.

How to run locally:


1. Unzip project folder.
2. npm install
3. npm run storybook (open [Link]
4. npm run test
5. To deploy Storybook: npm run build-storybook and deploy the storybook-static folder or use Chromatic.
Final Submission Links (placeholders)
GitHub Repository: [Link]
Storybook Preview Link:

Screenshots included are mock UI captures. Replace with real Storybook captures for final submission if available.

You might also like