cross-country 1.2.8 → 1.2.10

package/README.md

@@ -11,9 +11,9 @@ Core Tech
 - D3
 - Storybook 7
 - Typescript 5
-- Vite 
+- Vite
 
-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. 
+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.
 
 [storybook](https://cross-country-storybook.vercel.app/)
 
@@ -31,27 +31,23 @@ 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.
+For this third-party library to work within NextJS, there is one change required to import it's single css bundle.
+
+Edit the \_app.js file to:
 
-Edit the _app.js file to:
 ```
-import "../styles/globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
 import "cross-country/dist/bundle.css";
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;
+import { GoogleAnalytics } from "@next/third-parties/google";
 ```
 
-### Tailwind CSS Support 
+### 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 
+### Example Page
 
 By wrapping html, each component is augmented for building accessible experiences across screens. A simple page may look like this:
 
@@ -69,49 +65,6 @@ By wrapping html, each component is augmented for building accessible experience
 </Wrapper>
 ```
 
-### Generating New Components
-
-I've included a handy NodeJS util file under `generate-component` folder. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to plan & start building out a new component. To use it:
-
-```
-yarn new YourComponentName YourAtomicType
-```
-
-example
-
-```
-yarn new accordion molecules
-```
-
-This will generate the following files and your component name will also be captilized (ie import { Accordion } from "country-country"):
-
-```
-/src
-  /YourComponentName
-    /__stories__
-      YourComponentName.stories.tsx
-    /__tests__
-      YourComponentName.test.tsx
-    index.ts
-    YourComponentName.tsx
-    YourComponentName.types.ts
-    YourComponentName.module.css
-    index.d.ts
-    typings.d.ts
-```
-
-When you ready, remember to expose the component in the index.ts file at the root.
-
-## SCSS to CSS modules
-
-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)
-
-## Webpack 4 migration to 5
-
-[Storybook support for Webpack 5](https://github.com/storybookjs/storybook/issues/19692)
-
 ## Server Side Rendering
 
 Part of my dogfooding process is to use my library on my own site, [headwinds](https://headwinds.vercel.app).
@@ -128,45 +81,35 @@ export const privateConfig = {
 };
 ```
 
-## Install
-
-```
-yarn add cross-country
-```
+## Storybook
 
-or
+While creating compoents, you can use Storybook
 
 ```
-npm install --save cross-country
+npm run storybook
 ```
 
-While building, you can use Storybook
+Open your browser to http://localhost:6006/
 
-```
-yarn storybook
-```
+## Build the Static Site for Storybook
+
+After running `npm run build-storybook`, I had to make one change to the iframe.html file in the storybook-static folder.
 
-When you are ready to publish, you can test the build by starting it
+The bundle.css isn't added so I had to add it manually.
 
 ```
-yarn start
+  <link rel="stylesheet" href="./bundle.css" />
 ```
 
-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. 
+## Before Publishing Check Types
 
 ```
-  <link rel="stylesheet" href="./bundle.css" />
+npx tsc --noEmit
 ```
 
 ## Publish to NPM
 
-After you commit, make sure you have updated the version number before publishing usually `npm version patch`
+Update the version number before publishing via `npm version patch`
 
 ```
 npm login
@@ -176,106 +119,9 @@ now-your-email
 npm publish
 ```
 
-Since I had .npmrc setup in other projects, I had to one for this project [using the default](https://docs.npmjs.com/cli/v8/using-npm/registry). At first, I thought I needed /headwinds and then /headwinds/cross-country but nope! Just use the default - see my .npmrc file.
-
-## Inspiration
-
-- [Create a Component Library Fast🚀(using Vite's library mode)](https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma)
-- [creating your own react component library](https://blog.harveydelaney.com/creating-your-own-react-component-library/)
-- [Shopify polaris-viz](https://polaris-viz.shopify.com/)
-- [create-react-library](https://www.npmjs.com/package/create-react-library)
-- [mobile-first media queries](https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2)
-- [pure-css-accessible-checkboxes-and-radios-buttons](https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3)
-- [multiple-classnames-css-modules-react](https://zeph.co/multiple-classnames-css-modules-react)
-- [a-guide-to-js-docs-for-react-js](https://www.inkoop.io/blog/a-guide-to-js-docs-for-react-js/)
-- [wattenberger react-and-d3](https://wattenberger.com/blog/react-and-d3)
-- [tile corner reticle](https://codepen.io/NyX/pen/JYOzWW)
-- [flexboxpatterns](https://www.flexboxpatterns.com/)
-- [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
-
-- [Flask & React](https://blog.appseed.us/flask-react-full-stack-seed-projects/)
-
-## TILE
-
-- [mapeditor](https://www.mapeditor.org/)
-- [phase3 tile demo](https://itnext.io/modular-game-worlds-in-phaser-3-tilemaps-3-procedural-dungeon-3bc19b841cd)
-
-## MODELS & DATASETS
-
-- [tensorflowjs model](https://www.tensorflow.org/js/models)
-- [tidy models](https://www.tidymodels.org/)
-- [fivethirtyeight](https://fivethirtyeight.com/)
-- [Public APIs](https://github.com/public-apis/public-apis)
-
-## ALGORITHMS
-
-- [Javascript The Algorithms](https://github.com/TheAlgorithms/Javascript)
-- [New Years Gift 75 Leetcode Questions](https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU)
-
-## Maps
-
-- [stygiangen](https://github.com/slashman/stygiangen/)
-- [Fantasy-Map-Generator](https://azgaar.github.io/Fantasy-Map-Generator/)
-- [react plotly mapbox](https://towardsdatascience.com/a-step-by-step-guide-to-develop-a-map-based-application-part-i-757766b04f77)
-
-## Automation
-
-- [Playwright & Github Actions](https://maciekpalmowski.dev/buying-a-bicycle-using-playwright/)
-- [Vercel cronjobs](https://vercel.com/blog/cron-jobs)
-
-## Functional Programming
-
-- [practical-functional-programming-in-javascript-side-effects-and-purity](https://dev.to/richytong/practical-functional-programming-in-javascript-side-effects-and-purity-revised-420h)
-
-## Graph
-
-- [networkx](https://networkx.org/documentation/stable/auto_examples/index.html)
-
-## Learning Python
-
-- [realpython quizzes](https://realpython.com/quizzes/)
-
-## Data Visualization
-
-- [Seeing Theory](https://seeing-theory.brown.edu/)
-- [Setosa](https://setosa.io/)
-- [moebio](http://moebio.com/)
-
-## Stats, NLP & Machine Learning
-
-- [what is machine learning anway](https://boingboing.net/2021/11/08/what-is-machine-learning-anyway-this-three-minute-animation-delivers-an-excellent-simple-explanation.html)
-- [build a basic model](https://towardsdatascience.com/building-a-basic-machine-learning-model-in-python-d7cca929ee62)
-- [Spacey](https://spacy.io/)
-- [Open AI](https://openai.com/)
-- [Hugging Face](https://huggingface.co/)
-- [Kaggle](https://www.kaggle.com/)
-- [Rasa](https://rasa.com/)
-- [Harvest Entities in Text with Wolfram](https://www.wolfram.com/language/12/natural-language-processing/harvest-entities-in-text.html?product=mathematica)
-- [Storytelling](https://pudding.cool/process/how-to-make-dope-shit-part-3/)
-- [Contextual Bandit](https://towardsdatascience.com/contextual-bandits-and-reinforcement-learning-6bdfeaece72a)
-- [Deep Learning Drizzle](https://deep-learning-drizzle.github.io/)
-- [Intro to Tensorflow](https://www.youtube.com/watch?v=LwM7xabuiIc)
-- [Distill](https://distill.pub/)
-- [Creative Applications](https://www.creativeapplications.net/)
-- [Making of an AI Storyteller](https://towardsdatascience.com/the-making-of-an-ai-storyteller-c3b8d5a983f5)
-- [Ivy: a mission to unify all ML frameworks](https://lets-unify.ai/)
-- [Replicate](https://replicate.com/)
-
-### Gaming
-
-- [Crafter](https://danijar.com/project/crafter/)
-- [TextWorldExpress](https://github.com/cognitiveailab/TextWorldExpress)
-- [Fari](https://fari.app/)
-
-## Goal Setting
+## Wiki
 
-- [80 days to get into FAANG](https://towardsdatascience.com/80-days-to-get-into-faang-5c77f27d5224)
-- [Jack Dorsey's Don't do list](https://www.cnbc.com/2018/10/22/twitter-ceo-jack-dorsey-writes-a-wont-do-list-every-day.html)
+- [cross country wiki](https://github.com/headwinds/cross-country/wiki)
 
 ## License
 

package/dist/CheckCircle-gl03mB4s.js

@@ -0,0 +1,41 @@
+import e, { forwardRef as m } from "react";
+import { P as c } from "./IconBase-DEMV1w2X.js";
+const o = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z", opacity: "0.2" }), /* @__PURE__ */ e.createElement("path", { d: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76ZM230,128A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M170.83,101.17a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17ZM228,128A100,100,0,1,1,128,28,100.11,100.11,0,0,1,228,128Zm-8,0a92,92,0,1,0-92,92A92.1,92.1,0,0,0,220,128Z" }))
+  ]
+]);
+var p = Object.defineProperty, i = Object.defineProperties, Z = Object.getOwnPropertyDescriptors, r = Object.getOwnPropertySymbols, A = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable, n = (t, a, l) => a in t ? p(t, a, { enumerable: !0, configurable: !0, writable: !0, value: l }) : t[a] = l, E = (t, a) => {
+  for (var l in a || (a = {}))
+    A.call(a, l) && n(t, l, a[l]);
+  if (r)
+    for (var l of r(a))
+      f.call(a, l) && n(t, l, a[l]);
+  return t;
+}, d = (t, a) => i(t, Z(a));
+const u = m((t, a) => /* @__PURE__ */ e.createElement(c, d(E({ ref: a }, t), { weights: o })));
+u.displayName = "CheckCircle";
+export {
+  u as k
+};

package/dist/CheckSquare-B8fUZqrA.js

@@ -0,0 +1,47 @@
+import e, { forwardRef as m } from "react";
+import { P as c } from "./IconBase-DEMV1w2X.js";
+const o = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0ZM228,48V208a20,20,0,0,1-20,20H48a20,20,0,0,1-20-20V48A20,20,0,0,1,48,28H208A20,20,0,0,1,228,48Zm-24,4H52V204H204Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      "path",
+      {
+        d: "M216,48V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e.createElement("path", { d: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm-34.34,77.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76ZM222,48V208a14,14,0,0,1-14,14H48a14,14,0,0,1-14-14V48A14,14,0,0,1,48,34H208A14,14,0,0,1,222,48Zm-12,0a2,2,0,0,0-2-2H48a2,2,0,0,0-2,2V208a2,2,0,0,0,2,2H208a2,2,0,0,0,2-2Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M170.83,101.17a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17ZM220,48V208a12,12,0,0,1-12,12H48a12,12,0,0,1-12-12V48A12,12,0,0,1,48,36H208A12,12,0,0,1,220,48Zm-8,0a4,4,0,0,0-4-4H48a4,4,0,0,0-4,4V208a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4Z" }))
+  ]
+]);
+var p = Object.defineProperty, H = Object.defineProperties, V = Object.getOwnPropertyDescriptors, r = Object.getOwnPropertySymbols, i = Object.prototype.hasOwnProperty, Z = Object.prototype.propertyIsEnumerable, n = (t, a, l) => a in t ? p(t, a, { enumerable: !0, configurable: !0, writable: !0, value: l }) : t[a] = l, A = (t, a) => {
+  for (var l in a || (a = {}))
+    i.call(a, l) && n(t, l, a[l]);
+  if (r)
+    for (var l of r(a))
+      Z.call(a, l) && n(t, l, a[l]);
+  return t;
+}, f = (t, a) => H(t, V(a));
+const u = m((t, a) => /* @__PURE__ */ e.createElement(c, f(A({ ref: a }, t), { weights: o })));
+u.displayName = "CheckSquare";
+export {
+  u as q
+};