Ixchel

Meru's design system React implementation

Stack used

• Typescript
• Vanilla-extract
• radix-ui
• Storybook
• Jest, testing-library/react

Implementation things to know

1. Generally, wrap your component in React.forwardRef
2. Use the right element for the job, don't use a div with onClick if what you want is a button
3. Allow common dom properties to be passed to underlying component (eg. custom data attributes, aria attributes, common events)

Important things to know

1. Directory naming and file structure may be a little different to what you're used to. Following rules apply:
   • Directories and files must be named in lower-kebab-case
   • Collocation is desired and expected inside each componente folder, for example, if you were creating a button component:

   button/
     button.tsx <- component lives here
     button.styles.ts <- if you need to take style specific code outside main componente file
     button.stories.tsx <- component stories
     button.test.tsx <- component tests
     index.ts <- barrel file, must export only public api of this component

2. Commit messages must follow convetional commits format (https://www.conventionalcommits.org/en/v1.0.0/), this is enforced through a commit-msg hook
3. Aim for the best DX, typescript config is set to strict: true to enforce everything to be fully typed, this is a dev to dev project and complete and correct types eases the implementation.
4. Implement a design system may look like just writing css at first, but there are many things going on behind scenes:
   • Component API definition: This one is really important and must not be taken lightly, take time to think, research, and discuss with others which approach it's best. Why it's important? Changes to a componente APIs means changes in every project using the component.
   • Research: We are in the way of becoming DS experts, but not quite there yet, take time to investigate existing design systems implemented in react. Some nice examples are Orbit, Braid, Primer and Vibe
   • Typings: It reflects your componente API and enables autocompletion and typesafety in consumer projects.
   • Tests: Always important, a bug in this components library it's a bug in every consumer library.