Skip to content

A reusable component library using React and Storybook. Includes a button, label, text, table, dropdown, radio button, image, hero image, and card. All components are customizable in terms of default text, background color and can be disabled.

Notifications You must be signed in to change notification settings

alinabozynski/react-storybook_component-library

Repository files navigation

React Component Library

Requirements

  • Node.js
  • npm

To run this application on port 8083

Run with Storybook

Clone this repository and change into it's root directory.
If you are running this on Windows, there may be workarounds needed (below), as this was made in WSL.
If not all files cloned (caused by file with names containing ':' character), execute the following:

  1. Set git flag with git config core.protectNTFS false. Git is susceptible to NTFS-related attacks when:
  • Running Git in the WSL
  • Working directly on Windows drives
  • Running Git on macOS and working on smb://-mounted network shares
  1. Run git reset
  2. Run git checkout
  3. Run git restore ./

Ensure all project dependencies are installed with npm install.\

To run the app on Localhost: npm run storybook.
If you receive the error, 'Error: error:0308010C:digital envelope routines::unsupported' after the above command:

  • Unix: run export NODE_OPTIONS=--openssl-legacy-provider
  • Windows command prompt: set NODE_OPTIONS=--openssl-legacy-provider
  • Powershell: $env:NODE_OPTIONS = "--openssl-legacy-provider" If the above doesn't work, try to use the current LTS version from Node.js.

Run from Docker container

Clone repository with directions above and navigate to the root directory.
Download Docker here and start it up to ensure the Docker daemon is running.
To create a Docker image, run: docker build -t <desired_image_name> . Then, to run the image as a container: docker run --name <desired_container_name> -it -p 8083:80 --rm <image_name> Now open localhost:8083 in a browser!

Pull and run the application image from my Hub

Download Docker here and start it up to ensure the Docker daemon is running.\

docker pull abozynski/bozynski_alina_coding_assignment12
docker run --name <desired_container_name> -it -p 8083:80 --rm abozynski/bozynski_alina_coding_assignment12

Now open localhost:8083 in a browser!

Available Scripts

In the project directory, you can run:

npm run storybook

Runs the Storybook component library in your browser on Localhost at port 8083.

npm run test

Runs all test files with Jest.

npm run build

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

To list all files that you gave nginx access to, run:

sudo docker exec -it <container_name> ls -l /usr/share/nginx/html

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

About

A reusable component library using React and Storybook. Includes a button, label, text, table, dropdown, radio button, image, hero image, and card. All components are customizable in terms of default text, background color and can be disabled.

Resources

Stars

Watchers

Forks