What's going on?

error installing boilerplate
✖ ignite-hydrogen is not available on npm.

Environment

ignite doctor results:

``

results here

`System
  platform           darwin                                                
  arch               x64                                                   
  cpu                12 cores     Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz 
  directory          Desktop      /Users/mahmoudhamdy/Desktop              

JavaScript
  node               15.5.1       /usr/local/bin/node 
  npm                7.3.0        /usr/local/bin/npm  
  yarn               -            not installed       

Ignite
  ignite-cli         3.5.3        /Users/mahmoudhamdy/.npm/_npx/d73c6e55621d3944/node_modules/.bin/ignite      
  ignite src         build        /Users/mahmoudhamdy/.npm/_npx/d73c6e55621d3944/node_modules/ignite-cli/build 
  generators                                                                                                   

Android
  java               1.8.0_282    /usr/bin/java 
  android home       -            undefined     

iOS
  xcode              12.3       
  cocoapods          1.10.1       /usr/local/bin/pod `

Steps to reproduce

1. ignite new app -b hydrogen

What Happens (aka "Actual Results")

Different boilerplates are no longer supported in Ignite v4+.
To use the old CLI to support different boilerplates, try:
npx ignite-cli@3 new app --boilerplate hydrogen

npx ignite-cli@3 new app --boilerplate hydrogen

✖ ignite-hydrogen is not available on npm.
We also searched in these directories:

What is Expected

install ignite-hydrogen boilerplate

Acceptance Criteria

1. Hydrogen default UI library is NativeBase (with the nativebase library as a dependency and in node_modules after running the hydrogen boilerplate)
2. Prompts the engineer if he/she would like to "eject the NativeBase theme?" If yes, then https://docs.nativebase.io/Customize.html#theaming-nb-headref is executed and the app/theme is populated.
3. The ejected theme if selected does not leave a folder nativebase-theme or whatever it automatically creates (see step 2 for expected result)

Engineering Resources

• Using Gluegun API system.run command to execute the eject script https://docs.nativebase.io/Customize.html#theaming-nb-headref
• Using Gluegun API filesystem to move the files into the correct location (See AC)

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

Acceptance Criteria

As an engineer I can use functional components with NativeBase.

Considerations

• We may want to do this work directly in NativeBase
• https://react-redux.js.org/api/hooks#custom-context

This issue was generated by todo based on a TODO comment in 596b540 when #26 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 95f0c75 when #21 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 95f0c75 when #21 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 0270832 when #31 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 4bc9085 when #35 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

What's going on?

When using the Screen component, the default is white text on white background which makes it seem like the page is blank.

Steps to reproduce

1. ignite generate screen Example
2. Navigate to the Example screen

Results

Actual

Expected

or

This issue was generated by todo based on a TODO comment in 0270832 when #31 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in e14d63c when #5 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in d00ccd6 when #45 was merged. cc @DelveFore.

Bug Description

When I create a new project with Hydrogen (master branch), this error appears when I build the boilerplate:

Steps to reproduce

• Create new project with Hydrogen
  • Option used
  • Expo: true
  • State Machine: SagaSauce
  • UI Component Library: NativeBase
  • Eject NativeBase Theme: true

Ignite Doctor results

When I run ignite doctor these are the results:

 jonno@Jonuntu:~/Development/DelveFore/HydrogenExampleExpo$ ignite doctor
System
  platform           linux                                                                       
  arch               x64                                                                         
  cpu                12 cores              Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz               
  directory          HydrogenExampleExpo   /home/jonno/Development/DelveFore/HydrogenExampleExpo 

JavaScript
  node               14.9.0       /home/jonno/.nvm/versions/node/v14.9.0/bin/node 
  npm                6.14.8       /home/jonno/.nvm/versions/node/v14.9.0/bin/npm  
  yarn               1.22.5       /home/jonno/.yarn/bin/yarn                      

Ignite
  ignite-cli           3.5.3              /home/jonno/.config/yarn/global/node_modules/.bin/ignite      
  ignite src           build              /home/jonno/.config/yarn/global/node_modules/ignite-cli/build 
  navigation           react-navigation                                                                 
  generators                                                                                            
                       boilerplate        ignite-hydrogen                                               
                       component          ignite-hydrogen                                               
                       model              ignite-hydrogen                                               
                       navigator          ignite-hydrogen                                               
                       screen             ignite-hydrogen                                               
                       boilderplate       ignite-hydrogen                                               
  createdWith          3.5.3                                                                            
  boilerplate          ignite-hydrogen                                                                  
  boilerplateVersion   0.1.0                                                                            

Android
  java               11.0.8       /usr/bin/java           
  android home       -            /home/jonno/Android/Sdk

Problem

As is, the user is not able to change the theme. This feature is blocked as there is a code design flaw. The flaw is that we currently use a static theme referenced in file.

Design

useTheme

The React Native Paper Provider needs to receive theme by evaluating the state (e.g. useDarkTheme)

Moreover, when needing to access the theme directly, use useTheme hook and specifically from ./app/theme or react-native-paper. This enable us to use the Provider so if the value of theme changes we can respond.

Clarify colors, palette, and theme

** Terms **

• Colors = common color names paired with their corresponding hex values. Basically just a map
• Palette = a collection of colors. This is where we'll find things like primary and accent etc. The purpose of this is to enable various palettes like DarkMaterial or LightInitiativeTree or simply LightPalette and DarkPalette
• Theme = a collection of colors + palette + spacing + fonts

Remove Colors from the repository

Colors should refer to a specific nearly unchanging list of colors (e.g. https://github.com/callstack/react-native-paper/blob/main/src/styles/colors.tsx). We don't need colors and should remove it.

colors is being referenced in so many styles which does not have access to Provider context

Navigation Theme should be dynamically mapped

Instead of a static file (e.g. app/theme/navigation) we should use a mapping method within the given UI library mapper (e.g. app/paper/theme.ts) where a method like the following exists to map between the UI Library's theming approach to the Navigation

For example

export const mapToNavigationTheme = (theme:Theme):NavigationTheme => {
  return {
    dark: theme.dark,
    colors: {
      primary: theme.colors.primary,
      background: theme.colors.background,
      card: theme.colors.surface,
      text: theme.colors.text,
      border: theme.colors.surface,
      notification: theme.colors.primary
    }
  }
}

Do not use theme within Styles

As mentioned previously, styles.ts files are referencing theme for colors. The components and screens should be using the theme from useTheme or simply letting the components access the theme via the Provider. React Native Paper components will automatically receive changes to the theme.

Storybook theming is not in regular themes

The originally boilerplate has Storybook specific properties. We should either put this in a single file or leverage configurations for theme controls in Storybook

Acceptance Criteria

As a user I should see the example users from the HTTP API on a screen. Keep in mind currently the API we're using for users randomly generates users

The users should be listed on the second screen after pressing "Continue"

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

Acceptance Criteria

As an Engineer I should see Pull Requests that are "gated" with Tests and Code Style Checks.

Engineering Resources

Please see the SagaSauce source code for ./.github/workflows

This issue was generated by todo based on a TODO comment in e14d63c when #5 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 0270832 when #31 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in d00ccd6 when #45 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 4bc9085 when #35 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

This issue was generated by todo based on a TODO comment in 95f0c75 when #21 was merged. cc @DelveFore.

This is a work in progress issue!

https://github.com/mobxjs/mst-gql

Acceptance Criteria

Running ignite generate screen New creates

• "new-screen" directory with index.ts inside
• Generated screen is being exported from /app/screens/index.ts

Technical

Apart of generating a "new-screen" directory, the generator uses patching. to insert into app/navigation/primary-navigator.tsx

import { NewScreen } from './screens'  <-----

----------

export type PrimaryParamList = {
  new-screen: undefined  <-----
}

---------

export function PrimaryNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: true,
      }}
    >
      <Stack.Screen name="newScreen" component={NewScreen} />   <-----
    </Stack.Navigator>
  )
}

This issue was generated by todo based on a TODO comment in 347185b when #10 was merged. cc @DelveFore.

While we want to support Mobx, we want to focus on supporting Redux and SagaSauce.

Acceptance Criteria

As an engineering, I should run something similar to ignite new HydrogenExample -b ./ignite-hydrogen and then be prompted to select a State Machine. One of the options I am presented with must be Redux + Saga (or something similar).

After the project is built, I should see app/state and the project should include Redux + Saga+ SagaSauce (and corresponding dependency with no references to Mobx-State-Tree

Acceptance Criteria

Running yarn make:component NewComponent creates a basic frame for making a new component

In Scope

Does need to have ConnectStyles working, just need to be able to run the command and it creates new-component directory with index.ts inside

Out of Scope

Does not need styles.ts