Atoms are the smallest possible components, such as buttons, titles, inputs or event color pallets, animations, and fonts. They can be applied on any context, globally or within other components and templates, besides having many states, such as this example of button: disabled, hover, different sizes, etc.
They are the composition of one or more components of atoms. Here we begin to compose complex components and reuse some of those components. Molecules can have their own properties and create functionalities by using atoms, which don’t have any function or action by themselves.
Organisms are the combination of molecules that work together or even with atoms that compose more elaborate interfaces. At this level, the components begin to have the final shape, but they are still ensured to be independent, portable and reusable enough to be reusable in any content.
This project uses atomic design
- The Atomic Design should have a file of variables and it must be imported by each component;
- The atoms should be written without margins and positions;
- Only the molecules and organisms can set the positions of atoms, but these stacks can’t have any styles of margins and positions;
| Script | Desc |
|---|---|
$ npm install |
Start a simple webpack server |
$ npx react-native run-android |
Create a server to development at port 5000 |
$ npm storybook |
Start Storybook with the stories imported |
- Storybook
- Storybook Info
- Project
- ESLint
Below is a list of things that still need to be done.
- Organize project Color scheme. List theme colors and remove unused colors.
- Set correct limit and offset values for retrieval of recipe list in Recipe Screen component. Set values based off of latest limit and offset values from Recipe List Screen component
This is a list of known bugs in the code.
- Navigating from a Recipe Screen component back to the home screen, removes the App navigator (bottom bar) from the home screen.
The Recipe Screen component has a Stack navigator nested within the App navigator of the Recipe List Screen component. Take a look at the root navigator of the app to see how this works.
Also, take a look at the Recipe Card component to see how the navigation path from home screen to a Recipe Screen component works.
The Recipe component was used as an example in the description of the bug, however this bug is also a problem on the Comment Screen and Profile Screen component.