{"id":18074406,"url":"https://github.com/headwinds/cross-country","last_synced_at":"2025-04-05T18:46:02.065Z","repository":{"id":38172594,"uuid":"245869502","full_name":"headwinds/cross-country","owner":"headwinds","description":"an atomic react design system for personal metrics","archived":false,"fork":false,"pushed_at":"2024-04-13T20:52:54.000Z","size":50618,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"trunk","last_synced_at":"2024-04-14T10:59:35.595Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/headwinds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-08T18:50:06.000Z","updated_at":"2024-05-04T15:30:24.858Z","dependencies_parsed_at":"2024-04-13T21:41:03.510Z","dependency_job_id":"f652dd9d-62af-410f-9fa6-e2cf6a02d9c2","html_url":"https://github.com/headwinds/cross-country","commit_stats":{"total_commits":168,"total_committers":8,"mean_commits":21.0,"dds":0.6726190476190477,"last_synced_commit":"6ac794ab66fd8a87e4320b409476803f3aabcbb0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headwinds%2Fcross-country","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headwinds%2Fcross-country/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headwinds%2Fcross-country/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headwinds%2Fcross-country/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/headwinds","download_url":"https://codeload.github.com/headwinds/cross-country/tar.gz/refs/heads/trunk","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247385633,"owners_count":20930599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-31T10:12:31.263Z","updated_at":"2025-04-05T18:46:02.051Z","avatar_url":"https://github.com/headwinds.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cross-country\n\n\u003e an atomic react component library for personal metrics, simulations, and solo forest bathers\n\n[![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)\n\nCore Tech\n\n- React (18.02), react-spring \u0026 react-hook-form\n- CSS modules \u0026 Tailwind CSS compatible\n- D3\n- Storybook 8\n- Typescript 5\n- Vite\n\nDo 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.\n\n[storybook](https://cross-country-guide.vercel.app/)\n\n### Install\n\n```\npnpm i cross-country\n```\n\n### Types\n\nAll types are included in the library.\n\n### Use\n\n```\nimport { Column, Row, Paragraph, Table, Chart, Bento } from \"cross-country\"\n```\n\n### NextJS Support\n\nFor this third-party library to work within NextJS, there is one change required to import it's single css bundle.\n\n#### Import Styles - New App Strategy\n\nEdit the app\\layout.tsx file to:\n\n```\nimport type { Metadata } from \"next\";\nimport { Inter } from \"next/font/google\";\nimport \"./globals.css\";\nimport \"cross-country/dist/bundle.css\";\nimport { ScoutProviders } from \"./providers/providers\";\n```\n\n#### Import Styles - Old Pages Strategy\n\nEdit the pages\\_app.js file to:\n\n```\nimport type { Metadata } from \"next\";\nimport { Inter } from \"next/font/google\";\nimport \"./globals.css\";\nimport \"cross-country/dist/bundle.css\";\nimport { GoogleAnalytics } from \"@next/third-parties/google\";\n```\n\n### Import Styles - Storybook Support\n\nIf you use this library in your Storybook, update the .storybook/preview.tsx file \n\n```\nimport type { Preview } from \"@storybook/react\";\nimport { initialize, mswLoader } from \"msw-storybook-addon\";\nimport \"cross-country/dist/bundle.css\";\n```\n\nI also recommend the [mock service mocker addon](https://github.com/mswjs/msw-storybook-addon) to simulate data fetching in storybook which works very well with React hooks; similar to how we can intercept and mock response data with jest or vitest. \n\n### Tailwind CSS Support\n\nEach component provides a `customClass` property where you can supply your own tailwind css classes.\n\n### Example Page\n\nBy wrapping html, each component is augmented for building accessible experiences across screens. A simple page may look like this:\n\n```\n\u003cWrapper\u003e\n  \u003cPage\u003e\n    \u003cColumn\u003e\n      \u003cParagraph\u003e\n       Hello! I'm a developer with a mix of frontend and backend experience.\n      \u003c/Paragraph\u003e\n      \u003cMetrics keyValuePairs=[{label: \"Frontend\", value: 75, type: \"percent\"}, {label: \"Backend\", value: 25, type: \"percent\"}] /\u003e\n    \u003c/Column\u003e\n  \u003c/Page\u003e\n  \u003cWallpaper /\u003e\n\u003c/Wrapper\u003e\n```\n\n## Server Side Rendering\n\nPart of my [dogfooding](https://uxinsight.org/dogfooding-a-powerful-addition-to-the-user-research-toolkit/) process is to use my library on my own site, [headwinds](https://headwinds.vercel.app).\n\nInitially, 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!\n\n## Automated Component Creation\n\n```\npnpm new -- --type organisms --path component-name-here\n```\nor\n```\npnpm new -- --type molecules --path component-name-here/sub-component-name-here\n```\n\nYou can also scaffold only a story:\n```\npnpm new:story -- --type molecules --path policies/privacy-policy\n```\n\nThis will automatically scaffold the component directory creating all the files you will need including the tests and stories folders. It saved you at least 5 minutes if not especially around configuring the story; no more frustrating CSF errors!\n\n## Unsplash Config\n\nBefore installing, create a cross-country-config-private.js file in your root directory by copying the cross-country-config.js and renaming it.\n\n```\nexport const privateConfig = {\n  UNSPLASH_API_KEY: 'YOUR-UNSPLASH-KEY',\n};\n```\n\n## Storybook\n\nWhile creating components, you can use Storybook\n\n```\npnpm storybook\n```\n\nOpen your browser to http://localhost:6006/\n\n## Build the Static Site for Storybook\n\nAfter running `npm run build-storybook`, I had to make one change to the iframe.html file in the storybook-static folder.\n\nThe bundle.css isn't added so I had to add it manually.\n\n```\n  \u003clink rel=\"stylesheet\" href=\"./bundle.css\" /\u003e\n```\n\n## Before Publishing Check Types\n\n```\nnpx tsc --noEmit\n```\n\nRun [changesets](https://github.com/changesets/changesets)\n\n```\nnpx changeset\nnpx changeset version\npnpm publish\n```\n\nNeed to run both commands `npx changeset` only creates the changeset while `npx changeset version` will then update the package.json\n\n## Unit Tests\n\nThis library uses Jest \u0026 React Testing Library for unit tests.\n\n```\npnpm test\n```\n\n## Publish to NPM\n\n```\npnpm publish\n```\n\n```\npnpm login\nyour-username-not-your-email\nyour-password\nnow-your-email\npnpm publish\n```\n\n## Deploy to Vercel\n\n```\npnpm build-storybook\ncd storybook-static\nvercel --prod\n```\n\n## Wiki\n\n- [cross country wiki](https://github.com/headwinds/cross-country/wiki)\n\n## License\n\nMIT © [headwinds](https://github.com/headwinds)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheadwinds%2Fcross-country","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheadwinds%2Fcross-country","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheadwinds%2Fcross-country/lists"}