Merge pull request #19 from rafgugi/first-public-release

bump version to 1.0.0

.env

@@ -0,0 +1,3 @@
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_NAME=$npm_package_name
+REACT_APP_REPO=$npm_package_repository

.gitignore

@@ -11,9 +11,6 @@
 # production
 /build
 
-# local data
-/src/data.yml
-
 # misc
 .DS_Store
 .env.local

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] 2023-08-09
+
+- Enable Open and Save for Family Data File (#17)
+- Add Diagram Preview for Editing YAML (#17)
+- Enable Edit of Tree YAML Using Modal (#15)
+- Use LocalStorage to Store Tree Data in Browser Session (#13)
+- Support Multiple Trees (#12)
+- Add Tree via Modal (#12)
+- Enable Delete Person (#9)
+- Enable Edit Relation: Add Child and Spouse (#8)
+- Add GoJS Genogram for Family Tree
+- Create Initial Family Grid from YAML

CONTRIBUTION.md

@@ -0,0 +1,43 @@
+# Contributing to the Family Grid
+
+Thank you for considering contributing to the Family Grid! We appreciate your interest in making this project better for everyone. By participating, you can help us improve features, fix bugs, and create a more comprehensive and user-friendly family tree experience.
+
+Please take a moment to review this document for guidelines on how to contribute effectively.
+
+## How to Contribute
+
+1. **Fork the Repository:** Start by forking this repository to your GitHub account. This will create a copy of the project in your account that you can freely experiment with.
+
+2. **Clone Your Fork:** Clone the forked repository to your local machine using the following command:
+
+3. **Create a Branch:** Before making any changes, create a new branch to work on your feature or bug fix:
+
+4. **Make Changes:** Make your desired changes, following best practices for code quality, consistency, and appropriate comments.
+
+5. **Test Your Changes:** Ensure your changes are working as intended. Run tests if available, and test the app in various scenarios.
+
+6. **Commit and Push:** Once you're satisfied with your changes, commit them using descriptive commit messages and push to your branch:
+
+7. **Create a Pull Request:** Go to your fork on GitHub and create a pull request. Provide a clear title and description for your changes.
+
+8. **Review and Collaboration:** Your pull request will be reviewed by the project maintainers. Be ready to respond to feedback and make necessary adjustments.
+
+9. **Merge and Celebrate:** Once your changes are approved, they will be merged into the main project. Congratulations, you've successfully contributed!
+
+## Code Style and Guidelines
+
+Please adhere to the following guidelines when contributing:
+
+- Follow the existing code style and naming conventions.
+- Include relevant comments in your code to explain functionality, algorithms, and important decisions.
+- Write meaningful [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/#specification) messages that describe the purpose of your changes.
+
+## Reporting Issues
+
+If you find a bug or want to suggest an improvement, please [create an issue](https://github.com/rafgugi/family-grid/issues) using the provided templates.
+
+## License
+
+By contributing to the Family Grid, you agree that your contributions will be licensed under the [MIT License](LICENSE).
+
+Thank you for contributing and helping us improve the Family Grid!

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Risyanggi Azmi Faizin
+
+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.

README.md

@@ -1,41 +1,72 @@
 # Family Grid
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Family Grid is a web-based application designed to help you easily create and
+manage family tree diagrams. With intuitive features and powerful tools, this
+app enables you to visualize your family connections, add and edit family
+members, and explore your family's history in a user-friendly interface.
+
+## Features
+
+- **Genogram Diagrams:**
+  Visualize your family connections using detailed and visually appealing
+  vector based genograms.
+- **Detailed Family Data Table:** View and edit a detailed family data table
+  containing each person information.
+- **Open and Save Family Data Files:**
+  Easily load and save your family tree data, ensuring your valuable family
+  history is securely stored and accessible.
+- **Print and PDF Export:** Utilize the Ctrl+P shortcut to open a print window,
+  allowing you to print or save your family tree diagram and the detailed
+  family member table as a PDF. Customize columns to tailor the content to your
+  preferences.
+- **Edit Relations with Ease:**
+  Effortlessly add spouses and children to your family tree using modal,
+  providing a user-friendly way to manage complex family connections.
+- **Text-Based Editing:**
+  Edit your family tree's YAML data through a convenient modal interface, with
+  diagram preview, simplifying the editing process and reducing errors.
+- **Support for Multiple Trees:**
+  Manage multiple family trees within the same app instance, making it easy to
+  organize and explore different branches of your family.
 
 ## Installation
 
-Create your family data from the example
-
-```sh
-cp src/data.example.yml src/data.yml
-vim src/data.yml
-```
-
 Run the app in the development mode.
 
 ```sh
 npm start
 ```
 
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits in the `src/data.yml`. You will also see any lint errors in the console.
+Open [http://localhost:3000](http://localhost:3000) to open app in the browser.
 
 ## Available Scripts
 
 In the project directory, you can run:
 
 ### `npm test`
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Launches the test runner in the interactive watch mode. See the section about
+[running tests](https://facebook.github.io/create-react-app/docs/running-tests)
+for more information.
 
 ### `npm run build`
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Builds the app for production to the `build` 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. See the section about
+[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
+more information.
+
+## Contributing
+
+We welcome contributions from the community! If you'd like to contribute to the
+Family Grid App, please follow our [contribution guidelines](CONTRIBUTING.md).
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## Acknowledgements
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+The Family Grid was built with love and dedication by our team of developers.
+We'd like to extend our gratitude to everyone who contributed to this project.

package.json

@@ -1,9 +1,10 @@
 {
   "name": "family-grid",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0",
+  "private": false,
   "dependencies": {
     "bootstrap": "^5.2.3",
+    "bootstrap-icons": "^1.10.5",
     "file-saver": "^2.0.5",
     "gojs": "^2.3.6",
     "lodash": "^4.17.21",

src/components/App.tsx

@@ -17,6 +17,7 @@ import {
   unrichTreeData,
 } from '../family.util';
 import { useCache } from '../useCache';
+import Footer from './Footer';
 
 interface AppProps {
   trees: Person[];
@@ -152,7 +153,7 @@ function App(props: AppProps) {
               Hide Code
             </Label>
           </FormGroup>
-          <FormGroup switch>
+          <FormGroup switch className="mb-3">
             <Input
               type="switch"
               checked={editMode}
@@ -165,32 +166,32 @@ function App(props: AppProps) {
           </FormGroup>
           <FormGroup>
             <Button size="sm" onClick={() => openModalAddTree()}>
-              Add tree
+              <i className="bi-person-plus-fill" /> Add tree
             </Button>{' '}
             <Button size="sm" onClick={() => openModalAddChild(trees[0])}>
-              Add child
+              <i className="bi-person-plus-fill" /> Add child
             </Button>{' '}
             <Button size="sm" onClick={() => openModalAddSpouse(trees[0])}>
-              Add spouse
-            </Button>{' '}
-            <Button
-              size="sm"
-              onClick={() => openModalEditYaml()}
-              color="warning"
-            >
-              Edit tree
+              <i className="bi-person-plus-fill" /> Add spouse
             </Button>{' '}
             <Button
               size="sm"
               onClick={() => openModalDeletePerson()}
               color="danger"
             >
-              Delete person
+              <i className="bi-person-dash-fill" /> Delete person
             </Button>
           </FormGroup>
           <FormGroup>
+            <Button
+              size="sm"
+              onClick={() => openModalEditYaml()}
+              color="warning"
+            >
+              <i className="bi-filetype-yml" /> Edit tree
+            </Button>{' '}
             <Button size="sm" tag="label">
-              Import
+              <i className="bi-upload" /> Import
               <Input
                 type="file"
                 className="d-none"
@@ -199,7 +200,7 @@ function App(props: AppProps) {
               />
             </Button>{' '}
             <Button size="sm" onClick={handleSave}>
-              Export
+              <i className="bi-download" /> Export
             </Button>
           </FormGroup>
         </Form>
@@ -209,6 +210,8 @@ function App(props: AppProps) {
         <Family trees={trees} />
       </Container>
 
+      <Footer />
+
       <ModalAddTree isOpen={showModalAddTree} toggle={toggleModalAddTree} />
       <ModalAddChild
         isOpen={showModalAddChild}

src/components/Footer.tsx

@@ -0,0 +1,18 @@
+import { Container } from 'reactstrap';
+
+const Footer = () => {
+  const repo_url = 'https://github.com/rafgugi/family-grid';
+  const version = process.env.REACT_APP_VERSION as string;
+
+  return (
+    <footer className="d-print-none bg-dark text-light py-3 mt-5">
+      <Container>
+        <a href={repo_url} className="text-light mr-3">
+          <i className="bi-github" /> family-grid {version}
+        </a>
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/ModalAddTree.tsx

@@ -54,7 +54,7 @@ function ModalAddTree({ isOpen, toggle }: ModalAddTreeProps) {
       <ModalHeader toggle={toggle}>Add a tree</ModalHeader>
       <ModalBody>
         <FormGroup>
-          <Label for="input-child">Child</Label>
+          <Label for="input-tree">Child</Label>
           <Input
             id="input-tree"
             type="text"

src/components/ModalEditYaml.tsx

@@ -88,8 +88,8 @@ function ModalEditYaml({
       <ModalHeader toggle={toggle}>Edit tree</ModalHeader>
       <ModalBody>
         <FormGroup>
-          <Label for="tree-preview">Tree preview</Label>
-          <Card for="tree-preview" outline color={validForm ? '' : 'danger'}>
+          <span className="mb-2 d-inline-block">Tree preview</span>
+          <Card outline color={validForm ? '' : 'danger'}>
             <CardBody style={{ opacity: validForm ? 1 : 0.3 }}>
               <FamilyDiagram trees={deferredTree} />
             </CardBody>
@@ -115,7 +115,7 @@ function ModalEditYaml({
       </ModalBody>
       <ModalFooter>
         <Button color="warning" disabled={!validForm} onClick={handleSubmit}>
-          Update!
+          Apply
         </Button>
       </ModalFooter>
     </Modal>

src/index.tsx

@@ -5,7 +5,8 @@ import { Person } from './family.interface';
 import { enrichTreeData } from './family.util';
 import rawFamilyData from './data.yml';
 
-import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.min.css';
 
 let familyData = [] as Person[];
 if (typeof rawFamilyData === 'object') {