Repository: GermaVinsmoke/bmi-calculator
Branch: master
Commit: 7e4714d6542f
Files: 28
Total size: 20.8 KB
Directory structure:
gitextract_7xlaooi8/
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── LICENSE
├── README.md
├── cypress/
│ ├── .eslintrc.json
│ ├── integration/
│ │ └── BmiForm.spec.js
│ ├── plugins/
│ │ └── index.js
│ └── support/
│ ├── commands.js
│ └── index.js
├── cypress.json
├── jsconfig.json
├── package.json
├── public/
│ ├── index.html
│ └── robots.txt
└── src/
├── components/
│ ├── App/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ └── App.test.js
│ ├── Bar/
│ │ ├── Bar.jsx
│ │ └── Bar.test.js
│ ├── BmiForm/
│ │ ├── BmiForm.jsx
│ │ └── BmiForm.test.js
│ └── Info/
│ ├── Info.jsx
│ └── Info.test.js
├── helpers/
│ └── localStorage.js
├── index.css
├── index.js
└── setupTests.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
./node_modules/
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
node_modules
================================================
FILE: .prettierrc.js
================================================
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: 'es5',
tabWidth: 4,
useTabs: true,
semi: true,
singleQuote: true,
'editor.formatOnSave': true,
// printWidth: 80,
proseWrap: 'always',
};
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 10.15.3
cache: npm
install:
- npm install
script:
- npm run test -- --coverage
- npm run build
after_success:
- CODECOV_TOKEN=$codecov_token npm run report-coverage
after_script:
- COVERALLS_REPO_TOKEN=$coveralls_repo_token npm run coveralls
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_TOKEN
local_dir: build
on:
branch: master
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 GermaVinsmoke
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
## BMI Calculator
[](https://travis-ci.com/GermaVinsmoke/bmi-calculator)
[](https://coveralls.io/github/GermaVinsmoke/bmi-calculator?branch=master)
[](https://codecov.io/gh/GermaVinsmoke/bmi-calculator)
React Hooks app to calculate the BMI of a person. It can store the data for 7 days with the help of LocalStorage.
Created with _create-react-app_. See the [full create-react-app guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
## Install
`npm install`
## Usage
`npm start`
## Enhancement
1. Removing the dependency of Materialize-CSS module
~~2. Chart going crazy on hovering over the old points~~
================================================
FILE: cypress/.eslintrc.json
================================================
{
"plugins": ["cypress"],
"env": {
"cypress/globals": true
}
}
================================================
FILE: cypress/integration/BmiForm.spec.js
================================================
describe('BmiForm Component', () => {
beforeEach(() => {
cy.visit('/');
});
it('accepts input', () => {
const weight = '50';
const height = '176';
cy.get('#weight')
.type(weight)
.should('have.value', weight);
cy.get('#height')
.type(height)
.should('have.value', height);
});
context('Form submission', () => {
it('Adds a new bmi card data', () => {
let weight = '50';
const height = '176';
let today = new Date().toLocaleString().split(',')[0];
cy.get('#weight')
.type(weight)
.should('have.value', weight);
cy.get('#height')
.type(height)
.should('have.value', height);
cy.get('#bmi-btn').click();
cy.get('#weight').should('have.value', '');
cy.get('#height').should('have.value', '');
cy.get("[data-test='weight']").should('contain', weight);
cy.get("[data-test='height']").should('contain', height);
cy.get("[data-test='bmi']").should('contain', '16.14');
cy.get("[data-test='date']").should('contain', today);
});
});
});
================================================
FILE: cypress/plugins/index.js
================================================
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
================================================
FILE: cypress/support/commands.js
================================================
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
================================================
FILE: cypress/support/index.js
================================================
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
================================================
FILE: cypress.json
================================================
{
"baseUrl": "http://localhost:3000/"
}
================================================
FILE: jsconfig.json
================================================
{
"typeAcquisition": {
"include": ["jest"]
}
}
================================================
FILE: package.json
================================================
{
"name": "bmical",
"version": "0.1.0",
"private": true,
"homepage": "http://GermaVinsmoke.github.io/bmi-calculator",
"dependencies": {
"@types/jest": "24.0.20",
"chart.js": "2.9.1",
"materialize-css": "1.0.0",
"prop-types": "15.7.2",
"react": "16.11.0",
"react-chartjs-2": "2.8.0",
"react-dom": "16.11.0",
"react-scripts": "3.1.1",
"uuid": "3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls",
"report-coverage": "cat ./coverage/lcov.info | codecov",
"cypress": "cypress open"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!src/index.js"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"codecov.io": "^0.1.6",
"coveralls": "^3.0.11",
"cypress": "^3.8.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-cypress": "^2.10.3",
"gh-pages": "^2.2.0",
"jest-enzyme": "^7.1.2"
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/png" href="./icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#172b4d" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>BMI Calculator</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
================================================
FILE: src/components/App/App.css
================================================
body {
background-color: #172b4d;
}
input {
background-color: #fff !important;
border-radius: 44px !important;
width: 90% !important;
padding: 0px 15px !important;
}
input:focus {
border-bottom: none !important;
box-shadow: none !important;
}
label {
display: block;
color: #fff !important;
font-size: 1rem !important;
}
.calculate-btn {
background-color: #3f51b5;
padding: 15px 50px;
color: white;
font-size: 16px;
border-radius: 44px;
cursor: pointer;
border: 1px solid #3f51b5;
margin-bottom: 40px;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
}
.calculate-btn:hover {
background-color: #fff;
transform: translate(0px, -2px);
color: #5364c3;
box-shadow: 0px 15px 30px -12px rgba(255, 255, 255, 0.2);
}
.calculate-btn:focus {
background-color: #32408f;
}
.calculate-btn:focus:hover {
color: white;
}
.calculate-btn:disabled {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
cursor: default;
}
.calculate-btn:disabled:hover {
box-shadow: none;
transform: translate(0, 0);
}
.data-container {
background-color: #1f3a67;
border-radius: 11px;
margin-top: 40px;
padding-top: 40px;
padding-bottom: 40px;
}
.card {
background-color: #274881 !important;
color: white;
}
.card-title {
font-weight: 500 !important;
text-align: center;
}
.card-data {
display: flex;
justify-content: space-around;
}
.delete-btn {
background-color: #e74c3c;
color: white;
border: none;
border-radius: 50%;
font-weight: 700;
padding: 5px 9px;
cursor: pointer;
position: absolute;
top: -12px;
right: -12px;
}
.delete-btn:focus {
background-color: #e74c3c;
}
================================================
FILE: src/components/App/App.jsx
================================================
import React, { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import 'materialize-css/dist/css/materialize.min.css';
import './App.css';
import BmiForm from '../BmiForm/BmiForm';
import Info from '../Info/Info';
import Bar from '../Bar/Bar';
import { getData, storeData } from '../../helpers/localStorage';
const App = () => {
const initialState = () => getData('data') || [];
const [state, setState] = useState(initialState);
const [data, setData] = useState({});
useEffect(() => {
storeData('data', state);
const date = state.map(obj => obj.date);
const bmi = state.map(obj => obj.bmi);
let newData = { date, bmi };
setData(newData);
}, [state]);
const handleChange = val => {
let heightInM = val.height / 100;
val.bmi = (val.weight / (heightInM * heightInM)).toFixed(2);
val.id = uuidv4();
let newVal = [...state, val];
let len = newVal.length;
if (len > 7) newVal = newVal.slice(1, len);
setState(newVal);
};
const handleDelete = id => {
storeData('lastState', state);
let newState = state.filter(i => {
return i.id !== id;
});
setState(newState);
};
const handleUndo = () => {
setState(getData('lastState'));
};
return (
<div className='container'>
<div className='row center'>
<h1 className='white-text'> BMI Tracker </h1>
</div>
<div className='row'>
<div className='col m12 s12'>
<BmiForm change={handleChange} />
<Bar labelData={data.date} bmiData={data.bmi} />
<div>
<div className='row center'>
<h4 className='white-text'>7 Day Data</h4>
</div>
<div className='data-container row'>
{state.length > 0 ? (
<>
{state.map(info => (
<Info
key={info.id}
id={info.id}
weight={info.weight}
height={info.height}
date={info.date}
bmi={info.bmi}
deleteCard={handleDelete}
/>
))}
</>
) : (
<div className='center white-text'>No log found</div>
)}
</div>
</div>
{getData('lastState') !== null ? (
<div className='center'>
<button className='calculate-btn' onClick={handleUndo}>
Undo
</button>
</div>
) : (
''
)}
</div>
</div>
</div>
);
};
export default App;
================================================
FILE: src/components/App/App.test.js
================================================
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
describe('App Component', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<App />);
});
it('renders', () => {
expect(wrapper).not.toBeNull();
});
});
================================================
FILE: src/components/Bar/Bar.jsx
================================================
import React from 'react';
import { Line } from 'react-chartjs-2';
import PropTypes from 'prop-types';
const Bar = ({ labelData, bmiData }) => {
const data = canvas => {
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(63, 81, 181, 700);
gradient.addColorStop(0, '#929dd9');
gradient.addColorStop(1, '#172b4d');
return {
labels: labelData,
datasets: [
{
label: 'BMI',
data: bmiData,
backgroundColor: gradient,
borderColor: '#3F51B5',
pointRadius: 6,
pointHoverRadius: 8,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2
}
]
};
};
const options = {
responsive: true,
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Date',
fontSize: 18,
fontColor: 'white'
},
gridLines: {
display: false,
color: 'white'
},
ticks: {
fontColor: 'white',
fontSize: 16
}
}
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: 'BMI',
fontSize: 18,
fontColor: 'white'
},
gridLines: {
display: false,
color: 'white'
},
ticks: {
fontColor: 'white',
fontSize: 16,
beginAtZero: true
}
}
]
},
tooltips: {
titleFontSize: 13,
bodyFontSize: 13
}
};
return (
<>
<Line data={data} options={options} />
</>
);
};
Bar.propTypes = {
labelData: PropTypes.array,
bmiData: PropTypes.array
};
export default Bar;
================================================
FILE: src/components/Bar/Bar.test.js
================================================
import React from "react";
import { mount } from "enzyme";
import Bar from "./Bar";
jest.mock("react-chartjs-2", () => ({
Line: () => null
}));
describe("Bar component", () => {
let wrapper;
const prop = {
labelData: ["27/10/2019"],
bmiData: ["16.14"]
};
beforeEach(() => {
wrapper = mount(<Bar {...prop} />);
});
it("renders", () => {
expect(wrapper).not.toBeNull();
console.log(wrapper.debug());
});
});
================================================
FILE: src/components/BmiForm/BmiForm.jsx
================================================
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import '../App/App.css';
const initialValues = {
weight: '',
height: '',
date: ''
}
const BmiForm = ({ change }) => {
const [state, setState] = useState(initialValues);
const handleChange = e => {
let { value, name } = e.target;
if (value > 999) {
value = 999;
}
const date = new Date().toLocaleString().split(',')[0];
setState({
...state,
[name]: value,
date
});
};
const handleSubmit = () => {
change(state);
setState(initialValues);
};
return (
<>
<div className="row">
<div className="col m6 s12">
<label htmlFor="weight">Weight (in kg)</label>
<input
id="weight"
name="weight"
type="number"
min="1"
max="999"
placeholder="50"
value={state.weight}
onChange={handleChange}
/>
</div>
<div className="col m6 s12">
<label htmlFor="height">Height (in cm)</label>
<input
id="height"
name="height"
type="number"
min="1"
max="999"
placeholder="176"
value={state.height}
onChange={handleChange}
/>
</div>
</div>
<div className="center">
<button
id="bmi-btn"
className="calculate-btn"
type="button"
disabled={state.weight === '' || state.height === ''}
onClick={handleSubmit}
>
Calculate BMI
</button>
</div>
</>
);
};
BmiForm.propTypes = {
change: PropTypes.func.isRequired
};
export default BmiForm;
================================================
FILE: src/components/BmiForm/BmiForm.test.js
================================================
import React from "react";
import { shallow } from "enzyme";
import BmiForm from "./BmiForm";
describe("BmiForm Component", () => {
let wrapper;
const prop = {
change: jest.fn()
};
beforeEach(() => {
wrapper = shallow(<BmiForm {...prop} />);
});
it("renders", () => {
expect(wrapper).not.toBeNull();
});
it("should update the weight", () => {
const weight = wrapper.find("#weight");
weight.simulate("change", { target: { name: "weight", value: "50" } });
expect(wrapper.find("#weight").props().value).toEqual("50");
});
it("should update the height", () => {
const height = wrapper.find("#height");
height.simulate("change", { target: { name: "height", value: "176" } });
expect(wrapper.find("#height").props().value).toEqual("176");
});
it("should call change", () => {
wrapper.find("button").simulate("click");
expect(prop.change).toHaveBeenCalledTimes(1);
});
});
================================================
FILE: src/components/Info/Info.jsx
================================================
import React from 'react';
import PropTypes from 'prop-types';
const Info = ({ weight, height, id, date, bmi, deleteCard }) => {
const handleDelete = () => {
deleteCard(id);
};
return (
<div className="col m6 s12">
<div className="card">
<div className="card-content">
<span className="card-title" data-test="bmi">
BMI: {bmi}
</span>
<div className="card-data">
<span data-test="weight">Weight: {weight} kg</span>
<span data-test="height">Height: {height} cm</span>
<span data-test="date">Date: {date}</span>
</div>
<button className="delete-btn" onClick={handleDelete}>
X
</button>
</div>
</div>
</div>
);
};
Info.propTypes = {
weight: PropTypes.string,
height: PropTypes.string,
id: PropTypes.string,
date: PropTypes.string,
bmi: PropTypes.string,
deleteCard: PropTypes.func
};
export default Info;
================================================
FILE: src/components/Info/Info.test.js
================================================
import React from "react";
import { shallow } from "enzyme";
import Info from "./Info";
describe("Info Component", () => {
let wrapper;
const props = {
weight: "50",
height: "176",
id: "2b926f1b-db1f-45ac-af87-2130da1e1a2f",
date: "10/25/2019",
bmi: "16.14",
deleteCard: jest.fn()
};
beforeEach(() => {
wrapper = shallow(<Info {...props} />);
});
it("renders", () => {
expect(wrapper).not.toBeNull();
});
it("renders with props", () => {
expect(wrapper.find("[data-test='bmi']").text()).toEqual("BMI: 16.14");
expect(wrapper.find("[data-test='weight']").text()).toEqual(
"Weight: 50 kg"
);
expect(wrapper.find("[data-test='height']").text()).toEqual(
"Height: 176 cm"
);
expect(wrapper.find("[data-test='date']").text()).toEqual(
"Date: 10/25/2019"
);
});
it("should delete the card", () => {
wrapper.find("button").simulate("click");
expect(props.deleteCard).toHaveBeenCalledTimes(1);
});
});
================================================
FILE: src/helpers/localStorage.js
================================================
export const getData = (key) => {
if (!localStorage) return;
try {
return JSON.parse(localStorage.getItem(key));
} catch (err) {
console.error(`Error getting item ${key} from localStorage`, err);
}
};
export const storeData = (key, item) => {
if (!localStorage) return;
try {
return localStorage.setItem(key, JSON.stringify(item));
} catch (err) {
console.error(`Error storing item ${key} to localStorage`, err);
}
};
================================================
FILE: src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
================================================
FILE: src/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./components/App/App.jsx";
ReactDOM.render(<App />, document.getElementById("root"));
================================================
FILE: src/setupTests.js
================================================
import Enzyme from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new EnzymeAdapter(),
disableLifecycleMethods: true
});
gitextract_7xlaooi8/
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── LICENSE
├── README.md
├── cypress/
│ ├── .eslintrc.json
│ ├── integration/
│ │ └── BmiForm.spec.js
│ ├── plugins/
│ │ └── index.js
│ └── support/
│ ├── commands.js
│ └── index.js
├── cypress.json
├── jsconfig.json
├── package.json
├── public/
│ ├── index.html
│ └── robots.txt
└── src/
├── components/
│ ├── App/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ └── App.test.js
│ ├── Bar/
│ │ ├── Bar.jsx
│ │ └── Bar.test.js
│ ├── BmiForm/
│ │ ├── BmiForm.jsx
│ │ └── BmiForm.test.js
│ └── Info/
│ ├── Info.jsx
│ └── Info.test.js
├── helpers/
│ └── localStorage.js
├── index.css
├── index.js
└── setupTests.js
Condensed preview — 28 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (24K chars).
[
{
"path": ".gitignore",
"chars": 325,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n./node_modules/\n/."
},
{
"path": ".prettierrc.js",
"chars": 220,
"preview": "// prettier.config.js or .prettierrc.js\nmodule.exports = {\n\ttrailingComma: 'es5',\n\ttabWidth: 4,\n\tuseTabs: true,\n\tsemi: t"
},
{
"path": ".travis.yml",
"chars": 409,
"preview": "language: node_js\nnode_js:\n - 10.15.3\ncache: npm\n\ninstall:\n - npm install\n\nscript:\n - npm run test -- --coverage\n - "
},
{
"path": "LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2019 GermaVinsmoke\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 981,
"preview": "## BMI Calculator\n\n[](https://travi"
},
{
"path": "cypress/.eslintrc.json",
"chars": 73,
"preview": "{\n \"plugins\": [\"cypress\"],\n \"env\": {\n \"cypress/globals\": true\n }\n}\n"
},
{
"path": "cypress/integration/BmiForm.spec.js",
"chars": 1102,
"preview": "describe('BmiForm Component', () => {\n beforeEach(() => {\n cy.visit('/');\n });\n\n it('accepts input', () => {\n c"
},
{
"path": "cypress/plugins/index.js",
"chars": 644,
"preview": "// ***********************************************************\n// This example plugins/index.js can be used to load plug"
},
{
"path": "cypress/support/commands.js",
"chars": 838,
"preview": "// ***********************************************\n// This example commands.js shows you how to\n// create various custom"
},
{
"path": "cypress/support/index.js",
"chars": 670,
"preview": "// ***********************************************************\n// This example support/index.js is processed and\n// load"
},
{
"path": "cypress.json",
"chars": 42,
"preview": "{\n \"baseUrl\": \"http://localhost:3000/\"\n}\n"
},
{
"path": "jsconfig.json",
"chars": 55,
"preview": "{\n \"typeAcquisition\": {\n \"include\": [\"jest\"]\n }\n}\n"
},
{
"path": "package.json",
"chars": 1455,
"preview": "{\n \"name\": \"bmical\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"homepage\": \"http://GermaVinsmoke.github.io/bmi-calcula"
},
{
"path": "public/index.html",
"chars": 938,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"shortcut icon\" type=\"image/png\" hr"
},
{
"path": "public/robots.txt",
"chars": 57,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\n"
},
{
"path": "src/components/App/App.css",
"chars": 1689,
"preview": "body {\n background-color: #172b4d;\n}\n\ninput {\n background-color: #fff !important;\n border-radius: 44px !important;\n "
},
{
"path": "src/components/App/App.jsx",
"chars": 2687,
"preview": "import React, { useState, useEffect } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport 'materialize-css/dist/cs"
},
{
"path": "src/components/App/App.test.js",
"chars": 266,
"preview": "import React from 'react';\nimport { shallow } from 'enzyme';\nimport App from './App';\n\ndescribe('App Component', () => {"
},
{
"path": "src/components/Bar/Bar.jsx",
"chars": 1814,
"preview": "import React from 'react';\nimport { Line } from 'react-chartjs-2';\nimport PropTypes from 'prop-types';\n\nconst Bar = ({ l"
},
{
"path": "src/components/Bar/Bar.test.js",
"chars": 447,
"preview": "import React from \"react\";\nimport { mount } from \"enzyme\";\nimport Bar from \"./Bar\";\n\njest.mock(\"react-chartjs-2\", () => "
},
{
"path": "src/components/BmiForm/BmiForm.jsx",
"chars": 1520,
"preview": "import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport '../App/App.css';\n\nconst initialValu"
},
{
"path": "src/components/BmiForm/BmiForm.test.js",
"chars": 943,
"preview": "import React from \"react\";\nimport { shallow } from \"enzyme\";\nimport BmiForm from \"./BmiForm\";\n\ndescribe(\"BmiForm Compone"
},
{
"path": "src/components/Info/Info.jsx",
"chars": 986,
"preview": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Info = ({ weight, height, id, date, bmi, deleteCar"
},
{
"path": "src/components/Info/Info.test.js",
"chars": 1010,
"preview": "import React from \"react\";\nimport { shallow } from \"enzyme\";\nimport Info from \"./Info\";\n\ndescribe(\"Info Component\", () ="
},
{
"path": "src/helpers/localStorage.js",
"chars": 437,
"preview": "export const getData = (key) => {\n\tif (!localStorage) return;\n\n\ttry {\n\t\treturn JSON.parse(localStorage.getItem(key));\n\t}"
},
{
"path": "src/index.css",
"chars": 295,
"preview": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Can"
},
{
"path": "src/index.js",
"chars": 187,
"preview": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./components/App/App"
},
{
"path": "src/setupTests.js",
"chars": 170,
"preview": "import Enzyme from 'enzyme';\nimport EnzymeAdapter from 'enzyme-adapter-react-16';\n\nEnzyme.configure({\n adapter: new Enz"
}
]
About this extraction
This page contains the full source code of the GermaVinsmoke/bmi-calculator GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 28 files (20.8 KB), approximately 6.4k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.