PhearZero commented 2 years ago

ℹ Overview

Increase organization and Separation of Concerns in the UI. Remove custom components in favor of MUI where possible. Reduce the reliance on index.jsx exports and use "Named Single File Components" (Button.jsx). This should also include any CSS/Styled-Components and deprecates *.css.jsx files. You can see styled-components website repository for guidance on structuring Components.

📝 Related Issues

[x] #246
[x] #237
[x] #271
[ ] #176
- [ ] 🚚 Move: ./hooks to algodex/components
- [x] 🚚 Move: ./services and ./utils to algodex/common
- [x] 🚚 Move: OrderService and WalletService to algodex-sdk
[ ] ✅ Acceptance: Document Quality Assurance in Contributing.md

🏁 Goals:

❌Current Component Layout:

// ./my-component/index.jsx
// ./my-component/mystyle.css.jsx
import {MyStyledComponent} from 'mystyle.css'

const MyComponent = () =>(<MyStyledComponent><div>Hello World!</div></MyStyledComponent>)

export default MyComponent

✅Future Component Layout:

// ./MyComponent.jsx
export const MyStyledComponent = styled.div`
    color: green;
`
const MyComponent = () =>(<MyStyledComponent><div>Hello World!</div></MyStyledComponent>)

export default MyComponent

✅Future Index.jsx Exports:

Using index.jsx should be reserved for a collection components, organized by the entity that they pertain to. They can include a default export but should be avoided when possible

// ./Orders/index.jsx

export {default as MyOrderComponent} from './MyOrderComponent'

We should favor individual imports over index.jsx exports

// Good (Easier to Tree-Shake)
import MyOrderComponent from 'Orders/MyOrderComponent 
// Bad (Useful for development)
import {MyOrderComponent} from 'Orders'

🔍 Quality Assurance(QA)

QA is handled by Husky, ESLint, Jest, Cypress and Storybook. ESlint catches early errors. Jest is used for any reusable components to provide snapshots and unit tests. Cypress handles end to end testing of the Frontend and Backend and leverages Saucelabs Cypress Connect. Storybook is a critical part of the QA cycle and all composed layout components should have a story with all possible tests for UX/UI designers to validate the implementation prior to merging changes.

🏗 Application Lifecycle:

Component is edited by Developer
Developer runs gitmoji and commits changes with eslint/prettier --fix running in a Husky Hook as well as Jest
Github Actions triggers full CI pipeline including UX review and End<->End testing

atrefonas commented 2 years ago

Is this completed? @PhearZero (no rush if not as there are numerous other priorities)

PhearZero commented 2 years ago

Is this completed? @PhearZero (no rush if not as there are numerous other priorities)

@atrefonas It's a project for next year when we adopt algodex/algodex-components

atrefonas commented 2 years ago

Sounds good to me.

On Wed, Dec 15, 2021 at 8:44 PM Michael J Feher @.***> wrote:

Is this completed? @PhearZero https://github.com/PhearZero (no rush if not as there are numerous other priorities)

It's a project for next year when we adopt algodex/algodex-components https://github.com/algodex/algodex-components

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/algodex/algodex-react/issues/178#issuecomment-994888732, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARL6JWYEMPEWIJAF6JLVM2TURCWFJANCNFSM5IK3UVJA .

create-issue-branch[bot] commented 2 years ago

Branch issue-178-V1-Next_🎨_Component_Driven_Refactor created!