Skip to main content

react-table-module-tasks

Repository Link: https://github.com/LLazyEmail/react-email-table

Table of contents​

Components​

  • Table
  • BasicTable
  • Row
  • Rows
  • Section
  • TableLeft

We can create a set of basic jest tests for our tables #331​

the goal is simple - I wanna know that our tables cover basic needs and didn't crash.

I think it's doable with jest. We would need to configure it once; later, it might help us a lot. for example when we decide to change something - we wouldn't need to be worried if we crash something - we just run our tests and see the results.

Later we can install our module into few other remix-* repositories and try to use our simple components

Styles discussion #329​

https://speakerdeck.com/vjeux/react-css-in-js

https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833

https://gist.githubusercontent.com/jonisar/2c3afd10a1783ecb53350b992c7324bd/raw/6527343d57dcd77df6544a70c9f280dff7cf995a/gistfile1.txt

Table tags as examples #327​

link: https://github.com/LLazyEmail/react-email-letter-components/blob/main/email-templates/--empty/taskrabbit/Sections/Footer/Footer.jsx

<table border="0" cellpadding="0" cellspacing="0" width="666" class="responsive-table">

<table width="140" height="27" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">

<table border="0" cellpadding="0" cellspacing="0" width="666" class="wrapper">

link: https://github.com/LLazyEmail/react-email-letter-components/blob/main/email-templates/--empty/ecommerce/src/Sections/FooterRowColumn/FooterRowColumn.jsx

link: https://github.com/LLazyEmail/react-email-letter-components/blob/main/email-templates/--empty/ecommerce/src/Sections/HeroUnit/HeroLayout.jsx

<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">

Tr rows #326​

https://github.com/LLazyEmail/react-email-letter-components/blob/main/email-templates/--empty/taskrabbit/Sections/Footer/Footer.jsx

            </td>
          </tr>
        </tbody>
      </table>

Explore TS examples #174​

https://dev.to/nitsancohen770/use-typescript-generics-to-enhance-your-react-components-and-make-them-reusable-431f

Steal info from https://github.com/revivek/oy #135​

Try to run storybook and see if it work #85​

boilerplate that I'm using has a lot of cool things for react / frontend developers

  • storybook
  • github actions
  • other automation things we can try if it works and include it into our development cycle

video: s3://arthur-courses-storage/zoom_0.mp4

Watch the video

Different grids #22​

https://github.com/g13nn/Email-Framework/blob/master/grids/responsive/responsive-grid2.html

Should we have a Box component? #20​

https://github.com/chromakode/react-html-email/blob/e6f3b5122a19823fac31870649311c52e46c75f8/src/components/Box.jsx

Compare with #19​

https://github.com/reactstrap/reactstrap/blob/master/src/Table.js