create table technical design #71

lordpixel · 2020-08-24T23:08:29Z

This is a draft of the technical design for Table.
It's still in progress but I think it's good enough to start the discussion.

packages/cascara/src/ui/Table/TechnicalDesign.mdx

brianespinosa

Let's also have Allie take a look at this tomorrow with us. We can keep commenting on the code and have discussions over spec. Let's see what we do and do not like about this process in general too. At the end of the month we can set up a meeting to discuss if we think we have an idea on what our official process for spec or tech design review and approvals should look like.

packages/cascara/src/ui/Table/TechnicalDesign.mdx

brianespinosa · 2020-08-25T00:24:45Z

packages/cascara/src/ui/Table/TechnicalDesign.mdx

+
+The data types this table can handle are the following:
+
+For display puposes: `boolean`, `date`, `image`, `link`, `number`, `string` and `render`. The `render` type being a custom JSX.


We should figure out how to identify which of these is part of MVP and which is future.

Also, we need to figure out what these little guys are called. They will be used in a reusable manner all over Cascara. Basically they are like display atoms or something. And they will have an editing experience as well.

Maybe we just call these guys "atoms". And for all atoms they have an editing or display presentation?

yes, atoms is a more descriptive term.

@brianespinosa, I double-checked the apps to see which atoms are to be included in the MVP.
The lists are the following:

Display

boolean

date

link

number

string

Edit

switch

input

datetime picker

select

lookup select

The atoms we use fordisplay will be different to the atoms we use for edit, that doubles the effort.

For "edit" the experience needs to be more simple for MVP. I think for boolean we can only do a default html checkbox. For date, we should show an input date time field, not our own date picker. Basically the edit experience for MVP is going to be: whatever is available in html and what do browser vendors provide natively. We will absolutely have other options though in the future:

switch versus checkbox for booleans

custom date picker to be consistent across all browsers (except I think keeping native pickers on mobile)

custom select/dropwdown component of our own so we can control the UI/UX (again I think the exception would be mobile)

lots of others

Ok sounds good! Thanks for reminding me about HTML5, the mobile functionality aspect is very important.

I mentioned the switch instead of checkbox because wee have tables that implement it. At the end of the day we can style an HTML5 checkbox to make it look/behave as a switch. I have some ideas on that matter that I want to explore and run by @CaffeinatedAllie.

Yep. I think with these atoms, there are also use cases where we will want a checkbox too. Eventually someone could decide which control they want to show for their boolean. Does a checkbox, a switch, an enum select make the most sense?

yes, they completely make sense. The enum select will have the true, false values - we could also allow the user to set the labels to support localizaton.

You just uncovered a track we can start to follow in terms of abstraction, looking forward to it!

I will start typing these ideas into code soon, these kind of convos make really think about implementation! 🙌

brianespinosa · 2020-08-25T00:31:20Z

packages/cascara/src/ui/Table/TechnicalDesign.mdx

+
+## Context
+
+All the internal logic will be hosted in a Context. The definition is WIP.


Okay, I can tell this is specific to React context. 👍🏽 Moving forward, any time we are referring to something that is part of React as part of the API, or any other tool as part of the API, we should figure out a consistent way of calling that out. We have a lot of terms in our ecosystem that have special meaning which we want to be clear on.

yup, that's React Context. I will make it clear throught the document.

packages/cascara/src/ui/Table/TechnicalDesign.mdx

thanks! Co-authored-by: Brian Espinosa <brianespinosa@users.noreply.github.com>

brianespinosa · 2020-08-25T20:31:48Z

packages/cascara/src/ui/Table/TechnicalDesign.mdx

@@ -142,3 +142,34 @@ For mutation purposes, the implementation will support `select`, `input`, `boole
 ## Context

 All the internal logic will be hosted in a Context. The definition is WIP.
+
+![Table API](data:image/png;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI2NjFweCIgaGVpZ2h0PSI0NjFweCIgdmlld0JveD0iLTAuNSAtMC41IDY2MSA0NjEiPjxkZWZzLz48Zz48cmVjdCB4PSI1NDAiIHk9IjE3MCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC41IC0wLjUpIj48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHN0eWxlPSJvdmVyZmxvdzogdmlzaWJsZTsgdGV4dC1hbGlnbjogbGVmdDsiIHBvaW50ZXItZXZlbnRzPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiBmbGV4OyBhbGlnbi1pdGVtczogdW5zYWZlIGNlbnRlcjsganVzdGlmeS1jb250ZW50OiB1bnNhZmUgZmxleC1zdGFydDsgd2lkdGg6IDc4cHg7IGhlaWdodDogMXB4OyBwYWRkaW5nLXRvcDogMTgwcHg7IG1hcmdpbi1sZWZ0OiA1NDJweDsiPjxkaXYgc3R5bGU9ImJveC1zaXppbmc6IGJvcmRlci1ib3g7IGZvbnQtc2l6ZTogMDsgdGV4dC1hbGlnbjogbGVmdDsgIj48ZGl2IHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IGZvbnQtc2l6ZTogMTJweDsgZm9udC1mYW1pbHk6IEhlbHZldGljYTsgY29sb3I6ICMwMDAwMDA7IGxpbmUtaGVpZ2h0OiAxLjI7IHBvaW50ZXItZXZlbnRzOiBhbGw7IGZvbnQtd2VpZ2h0OiBib2xkOyB3aGl0ZS1zcGFjZTogbm9ybWFsOyB3b3JkLXdyYXA6IG5vcm1hbDsgIj5vbkNyZWF0ZTwvZGl2PjwvZGl2PjwvZGl2PjwvZm9yZWlnbk9iamVjdD48dGV4dCB4PSI1NDIiIHk9IjE4NCIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgZm9udC1zaXplPSIxMnB4IiBmb250LXdlaWdodD0iYm9sZCI+b25DcmVhdGU8L3RleHQ+PC9zd2l0Y2g+PC9nPjxyZWN0IHg9IjU0MCIgeT0iMjEwIiB3aWR0aD0iODAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjUgLTAuNSkiPjxzd2l0Y2g+PGZvcmVpZ25PYmplY3Qgc3R5bGU9Im92ZXJmbG93OiB2aXNpYmxlOyB0ZXh0LWFsaWduOiBsZWZ0OyIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSI+PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiB1bnNhZmUgY2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6IHVuc2FmZSBmbGV4LXN0YXJ0OyB3aWR0aDogNzhweDsgaGVpZ2h0OiAxcHg7IHBhZGRpbmctdG9wOiAyMjBweDsgbWFyZ2luLWxlZnQ6IDU0MnB4OyI+PGRpdiBzdHlsZT0iYm94LXNpemluZzogYm9yZGVyLWJveDsgZm9udC1zaXplOiAwOyB0ZXh0LWFsaWduOiBsZWZ0OyAiPjxkaXYgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgZm9udC1zaXplOiAxMnB4OyBmb250LWZhbWlseTogSGVsdmV0aWNhOyBjb2xvcjogIzAwMDAwMDsgbGluZS1oZWlnaHQ6IDEuMjsgcG9pbnRlci1ldmVudHM6IGFsbDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHdoaXRlLXNwYWNlOiBub3JtYWw7IHdvcmQtd3JhcDogbm9ybWFsOyAiPm9uRGVsZXRlPC9kaXY+PC9kaXY+PC9kaXY+PC9mb3JlaWduT2JqZWN0Pjx0ZXh0IHg9IjU0MiIgeT0iMjI0IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjEycHgiIGZvbnQtd2VpZ2h0PSJib2xkIj5vbkRlbGV0ZTwvdGV4dD48L3N3aXRjaD48L2c+PHJlY3QgeD0iNTQwIiB5PSIyNTAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuNSAtMC41KSI+PHN3aXRjaD48Zm9yZWlnbk9iamVjdCBzdHlsZT0ib3ZlcmZsb3c6IHZpc2libGU7IHRleHQtYWxpZ246IGxlZnQ7IiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IHVuc2FmZSBjZW50ZXI7IGp1c3RpZnktY29udGVudDogdW5zYWZlIGZsZXgtc3RhcnQ7IHdpZHRoOiA3OHB4OyBoZWlnaHQ6IDFweDsgcGFkZGluZy10b3A6IDI2MHB4OyBtYXJnaW4tbGVmdDogNTQycHg7Ij48ZGl2IHN0eWxlPSJib3gtc2l6aW5nOiBib3JkZXItYm94OyBmb250LXNpemU6IDA7IHRleHQtYWxpZ246IGxlZnQ7ICI+PGRpdiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyBmb250LXNpemU6IDEycHg7IGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2E7IGNvbG9yOiAjMDAwMDAwOyBsaW5lLWhlaWdodDogMS4yOyBwb2ludGVyLWV2ZW50czogYWxsOyBmb250LXdlaWdodDogYm9sZDsgd2hpdGUtc3BhY2U6IG5vcm1hbDsgd29yZC13cmFwOiBub3JtYWw7ICI+b25VcGRhdGU8L2Rpdj48L2Rpdj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PHRleHQgeD0iNTQyIiB5PSIyNjQiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTJweCIgZm9udC13ZWlnaHQ9ImJvbGQiPm9uVXBkYXRlPC90ZXh0Pjwvc3dpdGNoPjwvZz48cmVjdCB4PSI1NDAiIHk9IjI5MCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuNSAtMC41KSI+PHN3aXRjaD48Zm9yZWlnbk9iamVjdCBzdHlsZT0ib3ZlcmZsb3c6IHZpc2libGU7IHRleHQtYWxpZ246IGxlZnQ7IiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IHVuc2FmZSBjZW50ZXI7IGp1c3RpZnktY29udGVudDogdW5zYWZlIGZsZXgtc3RhcnQ7IHdpZHRoOiAxMThweDsgaGVpZ2h0OiAxcHg7IHBhZGRpbmctdG9wOiAzMDBweDsgbWFyZ2luLWxlZnQ6IDU0MnB4OyI+PGRpdiBzdHlsZT0iYm94LXNpemluZzogYm9yZGVyLWJveDsgZm9udC1zaXplOiAwOyB0ZXh0LWFsaWduOiBsZWZ0OyAiPjxkaXYgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgZm9udC1zaXplOiAxMnB4OyBmb250LWZhbWlseTogSGVsdmV0aWNhOyBjb2xvcjogIzAwMDAwMDsgbGluZS1oZWlnaHQ6IDEuMjsgcG9pbnRlci1ldmVudHM6IGFsbDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHdoaXRlLXNwYWNlOiBub3JtYWw7IHdvcmQtd3JhcDogbm9ybWFsOyAiPm9uQ3VzdG9tQWN0aW9uPC9kaXY+PC9kaXY+PC9kaXY+PC9mb3JlaWduT2JqZWN0Pjx0ZXh0IHg9IjU0MiIgeT0iMzA0IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjEycHgiIGZvbnQtd2VpZ2h0PSJib2xkIj5vbkN1c3RvbUFjdGlvbjwvdGV4dD48L3N3aXRjaD48L2c+PHBhdGggZD0iTSAzMTUgMTkwIEwgMzYwIDIxMS42MSBMIDM2MCAyNjguMzkgTCAzMTUgMjkwIEwgMjcwIDI2OC4zOSBMIDI3MCAyMTEuNjEgWiIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48cGF0aCBkPSJNIDI3MCAyMTEuNjEgTCAzMTUgMjMzLjIxIEwgMzYwIDIxMS42MSBNIDMxNSAyMzMuMjEgTCAzMTUgMjkwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjUgLTAuNSkiPjxzd2l0Y2g+PGZvcmVpZ25PYmplY3Qgc3R5bGU9Im92ZXJmbG93OiB2aXNpYmxlOyB0ZXh0LWFsaWduOiBsZWZ0OyIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSI+PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiB1bnNhZmUgZmxleC1zdGFydDsganVzdGlmeS1jb250ZW50OiB1bnNhZmUgY2VudGVyOyB3aWR0aDogODhweDsgaGVpZ2h0OiAxcHg7IHBhZGRpbmctdG9wOiAyMDRweDsgbWFyZ2luLWxlZnQ6IDI3MXB4OyI+PGRpdiBzdHlsZT0iYm94LXNpemluZzogYm9yZGVyLWJveDsgZm9udC1zaXplOiAwOyB0ZXh0LWFsaWduOiBjZW50ZXI7ICI+PGRpdiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyBmb250LXNpemU6IDEycHg7IGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2E7IGNvbG9yOiAjMDAwMDAwOyBsaW5lLWhlaWdodDogMS4yOyBwb2ludGVyLWV2ZW50czogYWxsOyBmb250LXdlaWdodDogYm9sZDsgd2hpdGUtc3BhY2U6IG5vcm1hbDsgd29yZC13cmFwOiBub3JtYWw7ICI+UHJvcHM8L2Rpdj48L2Rpdj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PHRleHQgeD0iMzE1IiB5PSIyMTYiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTJweCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC13ZWlnaHQ9ImJvbGQiPlByb3BzPC90ZXh0Pjwvc3dpdGNoPjwvZz48cGF0aCBkPSJNIDU0MCAxNjAgTCA1MjQuMzkgMTYwIFEgNTE0LjM5IDE2MCA1MTQuMzkgMTcwIEwgNTE0LjM5IDIzMCBRIDUxNC4zOSAyNDAgNTA0LjM5IDI0MCBMIDQ5Ny4yIDI0MCBRIDQ5MCAyNDAgNTAwIDI0MCBMIDUwNy4yIDI0MCBRIDUxNC4zOSAyNDAgNTE0LjM5IDI1MCBMIDUxNC4zOSAzMTAgUSA1MTQuMzkgMzIwIDUyNC4zOSAzMjAgTCA1NDAgMzIwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxwYXRoIGQ9Ik0gMzYwIDI0MCBMIDQ5NSAyNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludGVyLWV2ZW50cz0ic3Ryb2tlIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuNSAtMC41KSI+PHN3aXRjaD48Zm9yZWlnbk9iamVjdCBzdHlsZT0ib3ZlcmZsb3c6IHZpc2libGU7IHRleHQtYWxpZ246IGxlZnQ7IiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IHVuc2FmZSBjZW50ZXI7IGp1c3RpZnktY29udGVudDogdW5zYWZlIGNlbnRlcjsgd2lkdGg6IDFweDsgaGVpZ2h0OiAxcHg7IHBhZGRpbmctdG9wOiAyNDBweDsgbWFyZ2luLWxlZnQ6IDQyOHB4OyI+PGRpdiBzdHlsZT0iYm94LXNpemluZzogYm9yZGVyLWJveDsgZm9udC1zaXplOiAwOyB0ZXh0LWFsaWduOiBjZW50ZXI7ICI+PGRpdiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyBmb250LXNpemU6IDEycHg7IGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2E7IGNvbG9yOiAjMDAwMDAwOyBsaW5lLWhlaWdodDogMS4yOyBwb2ludGVyLWV2ZW50czogYWxsOyBmb250LXdlaWdodDogYm9sZDsgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsgd2hpdGUtc3BhY2U6IG5vd3JhcDsgIj7CoGV2ZW50c8KgPC9kaXY+PC9kaXY+PC9kaXY+PC9mb3JlaWduT2JqZWN0Pjx0ZXh0IHg9IjQyOCIgeT0iMjQ0IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjEycHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtd2VpZ2h0PSJib2xkIj7CoGV2ZW50c8KgPC90ZXh0Pjwvc3dpdGNoPjwvZz48cGF0aCBkPSJNIDEzMCAxNjAgTCAxMTQuMzkgMTYwIFEgMTA0LjM5IDE2MCAxMDQuMzkgMTcwIEwgMTA0LjM5IDIzMCBRIDEwNC4zOSAyNDAgOTQuMzkgMjQwIEwgODcuMiAyNDAgUSA4MCAyNDAgOTAgMjQwIEwgOTcuMiAyNDAgUSAxMDQuMzkgMjQwIDEwNC4zOSAyNTAgTCAxMDQuMzkgMzEwIFEgMTA0LjM5IDMyMCAxMTQuMzkgMzIwIEwgMTMwIDMyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCwxMDUsMjQwKSIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxwYXRoIGQ9Ik0gMjcwIDI0MCBMIDEyNSAyNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludGVyLWV2ZW50cz0ic3Ryb2tlIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuNSAtMC41KSI+PHN3aXRjaD48Zm9yZWlnbk9iamVjdCBzdHlsZT0ib3ZlcmZsb3c6IHZpc2libGU7IHRleHQtYWxpZ246IGxlZnQ7IiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IHVuc2FmZSBjZW50ZXI7IGp1c3RpZnktY29udGVudDogdW5zYWZlIGNlbnRlcjsgd2lkdGg6IDFweDsgaGVpZ2h0OiAxcHg7IHBhZGRpbmctdG9wOiAyNDBweDsgbWFyZ2luLWxlZnQ6IDE5N3B4OyI+PGRpdiBzdHlsZT0iYm94LXNpemluZzogYm9yZGVyLWJveDsgZm9udC1zaXplOiAwOyB0ZXh0LWFsaWduOiBjZW50ZXI7ICI+PGRpdiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyBmb250LXNpemU6IDEycHg7IGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2E7IGNvbG9yOiAjMDAwMDAwOyBsaW5lLWhlaWdodDogMS4yOyBwb2ludGVyLWV2ZW50czogYWxsOyBmb250LXdlaWdodDogYm9sZDsgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsgd2hpdGUtc3BhY2U6IG5vd3JhcDsgIj7CoGNvbmZpZ8KgPC9kaXY+PC9kaXY+PC9kaXY+PC9mb3JlaWduT2JqZWN0Pjx0ZXh0IHg9IjE5NyIgeT0iMjQ0IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjEycHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtd2VpZ2h0PSJib2xkIj7CoGNvbmZpZ8KgPC90ZXh0Pjwvc3dpdGNoPjwvZz48cmVjdCB4PSIwIiB5PSIxNzAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTQwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC41IC0wLjUpIj48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHN0eWxlPSJvdmVyZmxvdzogdmlzaWJsZTsgdGV4dC1hbGlnbjogbGVmdDsiIHBvaW50ZXItZXZlbnRzPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiBmbGV4OyBhbGlnbi1pdGVtczogdW5zYWZlIGZsZXgtc3RhcnQ7IGp1c3RpZnktY29udGVudDogdW5zYWZlIGZsZXgtc3RhcnQ7IHdpZHRoOiA5OHB4OyBoZWlnaHQ6IDFweDsgcGFkZGluZy10b3A6IDE3N3B4OyBtYXJnaW4tbGVmdDogMnB4OyI+PGRpdiBzdHlsZT0iYm94LXNpemluZzogYm9yZGVyLWJveDsgZm9udC1zaXplOiAwOyB0ZXh0LWFsaWduOiBsZWZ0OyAiPjxkaXYgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgZm9udC1zaXplOiAxMnB4OyBmb250LWZhbWlseTogSGVsdmV0aWNhOyBjb2xvcjogIzAwMDAwMDsgbGluZS1oZWlnaHQ6IDEuMjsgcG9pbnRlci1ldmVudHM6IGFsbDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHdoaXRlLXNwYWNlOiBub3JtYWw7IHdvcmQtd3JhcDogbm9ybWFsOyAiPkJ1bGs8YnIgLz48YnIgLz5Db2x1bW5zPGJyIC8+PGJyIC8+Q3JlYXRlPGJyIC8+PGJyIC8+RGVsZXRlPGJyIC8+PGJyIC8+VXBkYXRlPC9kaXY+PC9kaXY+PC9kaXY+PC9mb3JlaWduT2JqZWN0Pjx0ZXh0IHg9IjIiIHk9IjE4OSIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgZm9udC1zaXplPSIxMnB4IiBmb250LXdlaWdodD0iYm9sZCI+QnVsay4uLjwvdGV4dD48L3N3aXRjaD48L2c+PHBhdGggZD0iTSAzMTUgMTkwIEwgMzE1IDgzLjA0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRlci1ldmVudHM9InN0cm9rZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjUgLTAuNSkiPjxzd2l0Y2g+PGZvcmVpZ25PYmplY3Qgc3R5bGU9Im92ZXJmbG93OiB2aXNpYmxlOyB0ZXh0LWFsaWduOiBsZWZ0OyIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSI+PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiB1bnNhZmUgY2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6IHVuc2FmZSBjZW50ZXI7IHdpZHRoOiAxcHg7IGhlaWdodDogMXB4OyBwYWRkaW5nLXRvcDogMTM3cHg7IG1hcmdpbi1sZWZ0OiAzMTVweDsiPjxkaXYgc3R5bGU9ImJveC1zaXppbmc6IGJvcmRlci1ib3g7IGZvbnQtc2l6ZTogMDsgdGV4dC1hbGlnbjogY2VudGVyOyAiPjxkaXYgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgZm9udC1zaXplOiAxMnB4OyBmb250LWZhbWlseTogSGVsdmV0aWNhOyBjb2xvcjogIzAwMDAwMDsgbGluZS1oZWlnaHQ6IDEuMjsgcG9pbnRlci1ldmVudHM6IGFsbDsgZm9udC13ZWlnaHQ6IGJvbGQ7IGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7IHdoaXRlLXNwYWNlOiBub3dyYXA7ICI+wqBkYXRhwqA8L2Rpdj48L2Rpdj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PHRleHQgeD0iMzE1IiB5PSIxNDEiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTJweCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC13ZWlnaHQ9ImJvbGQiPsKgZGF0YcKgPC90ZXh0Pjwvc3dpdGNoPjwvZz48cGF0aCBkPSJNIDI4NSAxNSBDIDI4NSA2LjcyIDI5OC40MyAwIDMxNSAwIEMgMzIyLjk2IDAgMzMwLjU5IDEuNTggMzM2LjIxIDQuMzkgQyAzNDEuODQgNy4yMSAzNDUgMTEuMDIgMzQ1IDE1IEwgMzQ1IDY1IEMgMzQ1IDczLjI4IDMzMS41NyA4MCAzMTUgODAgQyAyOTguNDMgODAgMjg1IDczLjI4IDI4NSA2NSBaIiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxwYXRoIGQ9Ik0gMzQ1IDE1IEMgMzQ1IDIzLjI4IDMzMS41NyAzMCAzMTUgMzAgQyAyOTguNDMgMzAgMjg1IDIzLjI4IDI4NSAxNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48cGF0aCBkPSJNIDMxNSAyOTAgTCAzMTUgNDAwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRlci1ldmVudHM9InN0cm9rZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjUgLTAuNSkiPjxzd2l0Y2g+PGZvcmVpZ25PYmplY3Qgc3R5bGU9Im92ZXJmbG93OiB2aXNpYmxlOyB0ZXh0LWFsaWduOiBsZWZ0OyIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSI+PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6IGZsZXg7IGFsaWduLWl0ZW1zOiB1bnNhZmUgY2VudGVyOyBqdXN0aWZ5LWNvbnRlbnQ6IHVuc2FmZSBjZW50ZXI7IHdpZHRoOiAxcHg7IGhlaWdodDogMXB4OyBwYWRkaW5nLXRvcDogMzQ1cHg7IG1hcmdpbi1sZWZ0OiAzMTVweDsiPjxkaXYgc3R5bGU9ImJveC1zaXppbmc6IGJvcmRlci1ib3g7IGZvbnQtc2l6ZTogMDsgdGV4dC1hbGlnbjogY2VudGVyOyAiPjxkaXYgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgZm9udC1zaXplOiAxMnB4OyBmb250LWZhbWlseTogSGVsdmV0aWNhOyBjb2xvcjogIzAwMDAwMDsgbGluZS1oZWlnaHQ6IDEuMjsgcG9pbnRlci1ldmVudHM6IGFsbDsgZm9udC13ZWlnaHQ6IGJvbGQ7IGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7IHdoaXRlLXNwYWNlOiBub3dyYXA7ICI+dHJpZ2dlcnM8L2Rpdj48L2Rpdj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PHRleHQgeD0iMzE1IiB5PSIzNDkiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTJweCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC13ZWlnaHQ9ImJvbGQiPnRyaWdnZXJzPC90ZXh0Pjwvc3dpdGNoPjwvZz48cGF0aCBkPSJNIDI4MCA0MTAgTCAzNzAgNDEwIEwgMzcwIDQ2MCBMIDI4MCA0NjAgWiIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48cGF0aCBkPSJNIDI3NSA0MDUgTCAzNjUgNDA1IEwgMzY1IDQ1NSBMIDI3NSA0NTUgWiIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48cGF0aCBkPSJNIDI3MCA0MDAgTCAzNjAgNDAwIEwgMzYwIDQ1MCBMIDI3MCA0NTAgWiIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48L2c+PHN3aXRjaD48ZyByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiLz48YSB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC01KSIgeGxpbms6aHJlZj0iaHR0cHM6Ly9kZXNrLmRyYXcuaW8vc3VwcG9ydC9zb2x1dGlvbnMvYXJ0aWNsZXMvMTYwMDAwNDI0ODciIHRhcmdldD0iX2JsYW5rIj48dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjEwcHgiIHg9IjUwJSIgeT0iMTAwJSI+Vmlld2VyIGRvZXMgbm90IHN1cHBvcnQgZnVsbCBTVkcgMS4xPC90ZXh0PjwvYT48L3N3aXRjaD48L3N2Zz4=)
+


haha holy crap. That is a lot. This is going to make it difficult to work with our files if we have to jump over big data IDs. I wonder if there is a way to define these big chunks of data as reusable links at the foot of a MDX file. That way if we DO want to do this and not just place a file relative to the file itself, the big chunks of base64 are at the bottom of the document.

Not sure if reusable links will work with base64 images but could we try it?

nahh, it didn't work 😞
but, we now have svg diagrams!

packages/cascara/src/ui/Table/TechnicalDesign.mdx

brianespinosa · 2020-08-26T20:53:03Z

Updated with develop. As soon as checks pass again, will merge. Thank you @lordpixel

this is an example

brianespinosa · 2020-08-27T03:05:16Z

docs/src/pages/docs/[[...mdx]].js

+
+  // We need to make sure this is only actual files and not a directory
+  // so we are filtering it to make sure the size of the file is not zero.
+  const mdxDirFiles = mdxDir.filter((file) => file.size > 0 && file);


This is to make sure we are trying to parse MDX for actual MDX files and not a directory.

create table technical design

76d7770

brianespinosa reviewed Aug 24, 2020

View reviewed changes

packages/cascara/src/ui/Table/TechnicalDesign.mdx Show resolved Hide resolved

brianespinosa reviewed Aug 25, 2020

View reviewed changes

packages/cascara/src/ui/Table/TechnicalDesign.mdx Outdated Show resolved Hide resolved

lordpixel and others added 11 commits August 24, 2020 20:43

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

78b14d4

thanks! Co-authored-by: Brian Espinosa <brianespinosa@users.noreply.github.com>

create table technical design

b06a817

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

b2271ed

thanks! Co-authored-by: Brian Espinosa <brianespinosa@users.noreply.github.com>

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

abdb608

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

ab4841a

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

1deac9e

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

e97fe7b

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

f7572d6

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

6d8f151

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

7f5e8f2

add JSX example, plus an image try

a5f5061

brianespinosa reviewed Aug 25, 2020

View reviewed changes

lordpixel force-pushed the spec/table branch from ed94208 to a851618 Compare August 25, 2020 20:43

add props diagram

5364c53

lordpixel force-pushed the spec/table branch from a851618 to 5364c53 Compare August 25, 2020 20:47

CaffeinatedAllie reviewed Aug 25, 2020

View reviewed changes

packages/cascara/src/ui/Table/TechnicalDesign.mdx Show resolved Hide resolved

brianespinosa previously approved these changes Aug 26, 2020

View reviewed changes

Merge branch 'develop' into spec/table

84fab89

brianespinosa and others added 2 commits August 26, 2020 15:01

Merge branch 'develop' into spec/table

741b230

Update packages/cascara/src/ui/Table/TechnicalDesign.mdx

eae4385

this is an example

lordpixel dismissed brianespinosa’s stale review via eae4385 August 26, 2020 22:10

brianespinosa and others added 3 commits August 26, 2020 19:10

Merge branch 'develop' into spec/table

2f43a55

Make the docs work ONLY for MDX files, not dirs

29ab109

Merge branch 'develop' into spec/table

2a755fa

brianespinosa reviewed Aug 27, 2020

View reviewed changes

brianespinosa approved these changes Aug 27, 2020

View reviewed changes

brianespinosa merged commit d7a18a2 into develop Aug 27, 2020

brianespinosa deleted the spec/table branch August 27, 2020 03:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

create table technical design #71

create table technical design #71

lordpixel commented Aug 24, 2020

brianespinosa left a comment

brianespinosa Aug 25, 2020

lordpixel Aug 25, 2020

lordpixel Aug 25, 2020

brianespinosa Aug 25, 2020

lordpixel Aug 25, 2020

brianespinosa Aug 25, 2020

lordpixel Aug 25, 2020

lordpixel Aug 25, 2020

brianespinosa Aug 25, 2020

lordpixel Aug 25, 2020

brianespinosa Aug 25, 2020 •

edited by lordpixel

Loading

lordpixel Aug 25, 2020

brianespinosa commented Aug 26, 2020

brianespinosa Aug 27, 2020


		The data types this table can handle are the following:

		For display puposes: `boolean`, `date`, `image`, `link`, `number`, `string` and `render`. The `render` type being a custom JSX.


		## Context

		All the internal logic will be hosted in a Context. The definition is WIP.

create table technical design #71

create table technical design #71

Conversation

lordpixel commented Aug 24, 2020

brianespinosa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brianespinosa Aug 25, 2020 • edited by lordpixel Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brianespinosa commented Aug 26, 2020

Choose a reason for hiding this comment

brianespinosa Aug 25, 2020 •

edited by lordpixel

Loading