This project is a React application that demonstrates the usage of various reusable UI components. The components included are Button, Card, Dropdown, HeroImage, Img, Table, and RadioButton. Each component is tested to ensure visibility and correct behavior when in a disabled state.

• Installation
• Usage
• Components
  • Button
  • Card
  • Dropdown
  • HeroImage
  • Img
  • Table
  • RadioButton
• Testing
• Storybook
• Docker
• License

To get started with this project, follow these steps:

1. Clone the repository:

   git clone https://github.com/hjing2/BSBTassignment12.git
   cd your-repo-name

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

The application will be available at http://localhost:8083.

The main application file is App.tsx, which includes examples of each component. You can modify App.tsx to add more examples or use the components in different ways.

A simple button component.

A card component with a title and content.

A dropdown component with a list of options.

A hero image component that displays a large image.

An image component that displays a regular image.

A table component that displays headers and rows of data.

A radio button component that allows for selecting an option.

To run tests for the components, use the following command:

npm test

To view the components in a visual interface, run the following command:

npm run storybook

The application will be available at http://localhost:6006.

To build a Docker image for the application, use the following command:

docker build -t haodan_jing_coding_assignment12 .

Run the Docker image using the following command:

docker run -p 8083:6006 -d --name haodan_jing_coding_assignment12 haodan_jing_coding_assignment12

The application will be available at http://localhost:8083.