cross-country 1.2.6 → 1.2.8

package/README.md

@@ -1,13 +1,13 @@
 # cross-country
 
-> an atomic react design system for personal metrics
+> an atomic react design system for personal metrics and creating courses
 
 [![NPM](https://img.shields.io/npm/v/cross-country.svg)](https://www.npmjs.com/package/cross-country) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 Core Tech
 
-- React (18.02) & react-spring
-- CSS modules
+- React (18.02), react-spring & react-hook-form
+- CSS modules & Tailwind CSS compatible
 - D3
 - Storybook 7
 - Typescript 5
@@ -15,9 +15,21 @@ Core Tech
 
 Do you pour over your personal stats from Github, Strava or Spotify? Is your year always in review?! By experimenting with code, you can hone your developer skills while exploring subject matter that interests you. 
 
-In my case, I'm using this library to present metrics about my path as a developer as well as my home energy efficiency and [decarbonization](https://greenbuildingcanada.ca/decarbonize-home/).  
+[storybook](https://cross-country-storybook.vercel.app/)
 
-### NextJS Install
+### Install
+
+```
+npm install cross-country
+```
+
+### Use
+
+```
+import { Column, Row, Paragraph, Table, Chart } from "cross-country"
+```
+
+### NextJS Support
 
 For this third-party library to work within NextJS, you need to make one change when you consume cross-country to import it's single css bundle.
 
@@ -33,7 +45,13 @@ function MyApp({ Component, pageProps }) {
 export default MyApp;
 ```
 
-After upgrading to Vite, this library did not with NextJS due to the way it imports its CSS. I tried [exploring different approaches](https://dev.to/headwinds/comment/2bel0) but for now I would recommend using this library within [Vite react starter](https://vitejs.dev/guide/), and landed on [rollup-plugin-css-only](https://www.npmjs.com/package/rollup-plugin-css-only) which has minimal configuration.
+### Tailwind CSS Support 
+
+Each component provides a `customClass` propertity where you can supply your own tailwind css classes.
+
+After upgrading to Vite, this library did not with NextJS due to the way it imports its CSS. I [explored different approaches](https://dev.to/headwinds/comment/2bel0) and landed on [rollup-plugin-css-only](https://www.npmjs.com/package/rollup-plugin-css-only) which has minimal configuration.
+
+### Example Page 
 
 By wrapping html, each component is augmented for building accessible experiences across screens. A simple page may look like this:
 
@@ -86,7 +104,7 @@ When you ready, remember to expose the component in the index.ts file at the roo
 
 ## SCSS to CSS modules
 
-Originally, I started with SCSS Module but "downgraded" to CSS to upgrade Node from 12 to 18 and am planning to invest in PostCSS and Tailwind.
+Originally, I started with SCSS Module but "downgraded" to CSS to upgrade Node from 12 to 18. I'm currently experimenting PostCSS variables and Tailwind, and have found that both are supported via the existing `customClass` prop.
 
 [n 14.20.1](https://www.npmjs.com/package/n)
 
@@ -94,7 +112,7 @@ Originally, I started with SCSS Module but "downgraded" to CSS to upgrade Node f
 
 [Storybook support for Webpack 5](https://github.com/storybookjs/storybook/issues/19692)
 
-## NextJS
+## Server Side Rendering
 
 Part of my dogfooding process is to use my library on my own site, [headwinds](https://headwinds.vercel.app).
 
@@ -136,6 +154,15 @@ yarn start
 
 Open your browser to http://localhost:6006/
 
+## Build the Static Site
+
+After running `npm run build-storybook`, I had to make one change to the iframe.html file in the storybook-static folder. 
+
+The bundle.css isn't added so I had to add it manually. 
+
+```
+  <link rel="stylesheet" href="./bundle.css" />
+```
 
 ## Publish to NPM
 
@@ -167,6 +194,7 @@ Since I had .npmrc setup in other projects, I had to one for this project [using
 - [nextra](https://nextra.vercel.app/)
 - [XState & React](https://xstate.js.org/docs/packages/xstate-react/#quick-start)
 - [Typescript & SCSS](https://lwebapp.com/en/post/cannot-find-module-scss)
+- [usehooks](https://usehooks.com/)
 
 ## Fullstack