wijohnst/javascripture

Biblical reference application built in React

Will Johnston (@wijohnst)

javascripture's Issues

JSR-4 - chore: Add husky and configure pre-commit hooks

See this guide for instructions:

https://levelup.gitconnected.com/full-guide-add-husky-to-your-react-project-e049935f20d5

Acceptance Criteria

• Husky is added to the application
• A pre-commit hook is added that runs ESLint and prettier before allowing commits

JSR-9 - chore: Add `Layout` Component

Use responsive CSS and breakpoints to implement a flexible Layout component

Designs for the Layout component across different viewports

Responsive Design

Our application should look great no matter the size of the viewport. We will officially support 6 breakpoints in this application:

1. Large Desktop
2. Small Desktop
3. Large Tablet
4. Small Tablet
5. Large Mobile
6. Small Mobile

Please see designs for specific sizes for each breakpoint. The Layout component for all breakpoints more narrow than Small Desktop and Large Desktop will just default to 100% of device width. The 2 desktop layouts will have a max-width equal to that of the Large Tablet breakpoint width. The excess space on the screen should be the app's blue color.

React Composition and children components

The Layout component is like the wrapper that goes around everything else that we are going to build. The Layout component should be designed with Composition in mind.

The main interface for React Composition is props.children. In React, props.children is a special prop that allows you to pass components or elements as children to other components. Its similar to how a button tag works in vanilla HTML:

<button>Click Me!</button>

We pass the text Click Me! to the button as a "child". The alternative to passing something as a child is to pass it as an attribute:

<button button-text="Click Me!" />

Of course the above isn't valid HTML, but its does illustrate how passing data as a "child" is not the same as passing a normal HTML attribute.

When you use a component in React and pass it children using the opening and closing tags, those children are passed to the component as props.children. For example, consider the following component:

function Layout(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

You can use this component to render any child component or element within the div container:

function App() {
  return (
    <Layout>
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
    </Layout>
  );
}

In this example, the Layout receives the h1 and p elements as its props.children, and renders them inside the div.

Feature - feat: add global `Colors` theme

This feature adds a global color scheme implementation to the project, allowing for a consistent color scheme throughout the entire application. The variables defined in colors.scss can be used in component-specific styles for consistency and modularity.

Create a Styles folder & a Colors.scss file. Define a set of colors that will be the project's theme. Use the :root psuedo-class to define the list of colors.

The variables defined in our Colors.scss file can now be easily imported and utilized by their respective names.

`@import "../path/to/Colors.scss";

.component {
background-color: var(orange-dark);
color: var(grey-light);
}
`

feat: Add `Input` component

Add a custom Input component in the style of the application and implement the <Input type="text" /> story

Pictured, <Input type="text" /> designs

Input vs input

In React (and basically all FE frameworks) it is conventional to name custom components with a capital letter - MyComponent ✅ myComponent ❌. This becomes especially important when we are building custom versions of native HTML elements. When we talk about what you are building we will use Input. When we talk about the native HTML element we will use input.

Background

This task, taking a native HTML element and customizing it for use in an application, is super common in many front end applications, especially when building out a design system. Whenever we do this we want to keep a few things in mind:

1. Accessibility (aka "A11y) Concerns - Making our apps A11y compliant isn't optional- it's the law. Its the internet equivalent of having a ramp to your business door. The best way to ensure that we meet A11y guidelines is through the use of native HTML elements whenever possible. An <img> tag, when passed all required attributes, will meet (almost) all of the accessibility requirements for an application. The same is true of something like <input type="text" />. So, whenever possible, our custom components should really be limited to wrappers that add styling and return the default HTML element.

2. Developer Experience (DX) - All FE devs should know how to use the native HTML elements. They know which attributes an element will accept - e.g. <img /> needs an alt attribute, <a> accepts href. And if they forget, its really easy to go to the MDN and look at the documentation for a reminder. These know, documented configurations are what we call the elements "API". (API means a lot of thing, but in general I think of it as the contract between what they developer can do and what the code expects.) Devs expect custom versions of native elements to share the same API. If we make an Input it should have the same interface as input whenever possible. (And any deviations should be well thought out and documented.)

input API

The things a dev can do (API) of input is.... not small. (MDN). Because of that, we are limiting the scope of this story to <input type="text" />. In future stories, and as needed, we can implement the other input types and expand our custom components API.

Acceptance Criteria

• Should return a native <input> element
• Should be styled to match designs
• Should use pseudo-classes whenever possible for state-based style updates
• Should have invalid state and return an error message
• Should have focus state
• Should expose an onChange callback function to the calling component that returns the input's value on change
• Should accept a placeholder prop
• Should accept maxlength and minlength props
• Should accept a pattern prop (MDN)
• Should accept a size prop

JSR-3 - chore: Add ESLint and Prettier

See this guide for instructions:

https://dev.to/eshankvaish/set-up-eslint-and-prettier-in-a-react-typescript-app-2022-29c9

JSR-1 - chore: Spin up a new React project using `create-react-app`

Use create-react-app to bootstrap a new React application

What is create-react-app

Create React App is a popular command-line tool used for quickly creating a new React application with minimal configuration. It sets up the development environment, including the bundling of JavaScript files, setting up a development server, and configuring modern JavaScript features like ES6 and JSX. Create React App abstracts away much of the boilerplate and configuration required to get a React project up and running, allowing developers to focus on building their applications. Additionally, it provides a number of helpful scripts and tools for building, testing, and deploying React applications.

How to bootstrap the application

From your workspace directory:

npx create-react-app JavaScripture

This will create a new directory called JavaScripture and all of the React files will be inside.

Next:

cd JavaScripture
npm install

Confirm that the application runs and push the code to the repo.

JSR-2 - chore: Remove boilerplate from application

Remove unnecessary boilerplate code from the application

create-react-app generates a bunch of unnecessary code, including styling, images, and markup that we don't need. Remove any superfluous code.

After code is removed, replaced the contents of App.jsx with a <span> that renders JavaScripture. The app should be completely unstyled.

JSR-5 - chore: Add `Tailwind CSS`

Add the Tailwind CSS dependency for the project

Tailwind CSS is a popular utility-first CSS framework that allows developers to quickly and easily style their web applications without writing custom CSS. It provides a collection of pre-built, customizable classes that can be used to style various HTML elements, such as text, buttons, and grids. With Tailwind CSS, developers can create complex designs and layouts by combining these classes without needing to write any custom CSS. It also offers a flexible and configurable theming system, as well as a built-in purge feature to remove unused styles from the final CSS file, resulting in smaller file sizes and faster load times.

Sample Syntax

Consider this HTML:

<div className="some-class"></div>

Which is styled using this some-class class:

.some-class{
  display: flex;
  justify-content: center;
  align-items: center;
}

We can do the exact same thing with Tailwind without writing a CSS file. We just add the "utility classes" directly to our HTML:

<div className="flex justify-center items-center"></div>

We are passing three "utility classes" to our div: flex, justify-center, items-center. flex tells Tailwind that this div should have a display of flex, and justify-center and items-center provide the values for justify-content and align-items.

Adding Tailwind CSS to a create-react-app project

Your bootstrapping tool will often effect how dependencies are added to your project. If you are using Vite or Parcel you might configure a dependency one way and do it differently for create-react-app. This is important to remember when you are debugging problems. I'll often Google my error and include "create-react-app" in the search to get results that are more relevant to my project.

For installing Tailwind CSS follow the official guide for adding to a CRA app:

https://tailwindcss.com/docs/guides/create-react-app