@theroutingcompany/components 0.0.1

package/README.md

@@ -0,0 +1,68 @@
+# TRC TREX Component Library
+
+## UI Libraries
+
+The component library is built on the following 'component primitives' UI libraries, low-level unstyled building blocks.
+
+- [react-aria](https://react-spectrum.adobe.com/react-aria/why.html)
+- [RadixUI](https://www.radix-ui.com/docs/primitives/overview/introduction)
+
+They are similar in spirit but take a slightly different approach. Radix follows a component-based approach, while react-aria takes a hook-based approach.
+The divide is roughly Radix for 'structural' elements, think [popovers](https://www.radix-ui.com/docs/primitives/components/popover), [accordion](https://www.radix-ui.com/docs/primitives/components/accordion) and react-aria for some input components and components Radix lacks, like [breadcrumbs](https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html).
+It may seem weird at first sight that two component libraries are used but they are low-level enough not to get in each others way.
+
+## Styling
+
+Styling is done with [styled-components](https://styled-components.com/), a CSS-in-JS library.
+
+The approach is roughly:
+
+1. A "base" styled component with shared styles: `ButtonBase`
+2. Each variant in the [Figma designs](https://www.figma.com/file/xfnqeuF8FgoqhJSUs5GTsK/PDS-Components-Desktop?node-id=16%3A7&t=22cWETfRERKj9wkP-0) is a styled component 'extending' the base component: ` const PrimaryButton = styled(ButtonBase)``  `
+
+- All variant are placed in an object (a map but not a `Map()`)
+- The exported takes a `variant` prop and uses it to get the right styled component from the object map
+
+## Guiding Principles
+
+https://www.gabe.pizza/notes-on-component-libraries/
+
+- For content, prefer composition over props
+
+  - ✅ `<Text variant="body">Some text</Text>`
+  - ❌ `<Text variant="body" text="Some text" />`
+
+- Don't rename
+
+TODO Expand
+
+## Examples
+
+- [the component gallery](https://component.gallery/) "Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems."
+- [Storybook showcase](https://storybook.js.org/showcase)
+- [Primer: React implementation of GitHub's Primer Design System](https://primer.style/react/)
+- [Paste: The Design System for building Twilio customer experiences](https://paste.twilio.design/)
+- [Spectrum: Adobe’s design system.](https://react-spectrum.adobe.com/react-spectrum/)
+- [Evergreen: Segment’s design system](https://evergreen.segment.com/)
+- [awesome-react-design-systems](https://github.com/jbranchaud/awesome-react-design-systems)
+
+## Reading
+
+- [The styled-components Happy Path](https://www.joshwcomeau.com/css/styled-components/)
+- [CSS Variables for React Devs](https://www.joshwcomeau.com/css/css-variables-for-react-devs/)
+
+- [You Don’t Need A UI Framework](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/)
+
+###
+
+- [Vadim Demedes Design system tips](https://twitter.com/i/events/1577907596966641665)
+- [https://www.robinrendle.com/notes/the-difference-between-correct-ness-and-useful-ness-in-a-design-system/](https://www.robinrendle.com/notes/the-difference-between-correct-ness-and-useful-ness-in-a-design-system/)
+
+- [Apple Developer: Layout - Foundations - Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/foundations/layout/)
+
+- https://jonambas.com/posts/lessons-learned
+- [https://jonambas.com/posts/component-api-standards](https://jonambas.com/posts/component-api-standards)
+
+#### TypeScript
+
+- [TypeScript + React: Typing Generic forwardRefs](https://fettblog.eu/typescript-react-generic-forward-refs/)