cross-country
an atomic react design system for personal metrics and creating courses
Core Tech
- React (18.02), react-spring & react-hook-form
- CSS modules & Tailwind CSS compatible
- D3
- Storybook 7
- Typescript 5
- 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.
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.
Edit the _app.js file to:
import "../styles/globals.css";
import "cross-country/dist/bundle.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
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 and landed on 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:
<Wrapper>
<Page>
<Column>
<Paragraph>
Hello! I'm a developer with a mix of frontend and backend experience.
</Paragraph>
<Metrics keyValuePairs=[{label: "Frontend", value: 75, type: "percent"}, {label: "Backend", value: 25, type: "percent"}] />
</Column>
</Page>
<Wallpaper />
</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.
Webpack 4 migration to 5
Storybook support for Webpack 5
Server Side Rendering
Part of my dogfooding process is to use my library on my own site, headwinds.
Initially, I ran into a build error where I had to account for every window
and document
ensuring that they are not referenced until the UI hits the client. After hunting through my webpack build file, I was ble to eliminate them all, and it now works 100% server side!
Unsplash Config
Before installing, create a cross-country-config-private.js file in your root directory by copying the cross-country-config.js and renaming it.
export const privateConfig = {
UNSPLASH_API_KEY: 'YOUR-UNSPLASH-KEY',
};
Install
yarn add cross-country
or
npm install --save cross-country
While building, you can use Storybook
yarn storybook
When you are ready to publish, you can test the build by starting it
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
After you commit, make sure you have updated the version number before publishing usually npm version patch
npm login
your-username-not-your-email
your-password
now-your-email
npm publish
Since I had .npmrc setup in other projects, I had to one for this project using the default. 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)
- creating your own react component library
- Shopify polaris-viz
- create-react-library
- mobile-first media queries
- pure-css-accessible-checkboxes-and-radios-buttons
- multiple-classnames-css-modules-react
- a-guide-to-js-docs-for-react-js
- wattenberger react-and-d3
- tile corner reticle
- flexboxpatterns
- nextra
- XState & React
- Typescript & SCSS
- usehooks
Fullstack
TILE
MODELS & DATASETS
ALGORITHMS
Maps
Automation
Functional Programming
Graph
Learning Python
Data Visualization
Stats, NLP & Machine Learning
- what is machine learning anway
- build a basic model
- Spacey
- Open AI
- Hugging Face
- Kaggle
- Rasa
- Harvest Entities in Text with Wolfram
- Storytelling
- Contextual Bandit
- Deep Learning Drizzle
- Intro to Tensorflow
- Distill
- Creative Applications
- Making of an AI Storyteller
- Ivy: a mission to unify all ML frameworks
- Replicate
Gaming
Goal Setting
License
MIT © headwinds