{"id":14965850,"url":"https://github.com/interpause/interpause-components","last_synced_at":"2026-01-22T16:41:57.755Z","repository":{"id":112541342,"uuid":"328165819","full_name":"Interpause/interpause-components","owner":"Interpause","description":"ReactJS component library using twin.macro and emotionjs","archived":false,"fork":false,"pushed_at":"2022-12-21T08:30:52.000Z","size":2740,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T09:18:18.563Z","etag":null,"topics":["component-library","emotionjs","react","tailwindcss","typescript","yarn2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Interpause.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-01-09T13:51:30.000Z","updated_at":"2023-01-31T14:58:45.000Z","dependencies_parsed_at":"2023-05-15T22:30:26.672Z","dependency_job_id":null,"html_url":"https://github.com/Interpause/interpause-components","commit_stats":{"total_commits":62,"total_committers":1,"mean_commits":62.0,"dds":0.0,"last_synced_commit":"cf17c105ad0fd1aaf2dbe9df3da062995483c71a"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Interpause%2Finterpause-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Interpause%2Finterpause-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Interpause%2Finterpause-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Interpause%2Finterpause-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Interpause","download_url":"https://codeload.github.com/Interpause/interpause-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248056847,"owners_count":21040458,"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":["component-library","emotionjs","react","tailwindcss","typescript","yarn2"],"created_at":"2024-09-24T13:35:28.334Z","updated_at":"2026-01-22T16:41:57.696Z","avatar_url":"https://github.com/Interpause.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Interpause's Components](https://github.com/Interpause/interpause-components)\n\n\u003e Next.js Component Library using typescript, twin.macro and Emotion with Yarn 2's Plug'n'Play working and Storybook to ease component development.\n\nMy personal components library using [twin.macro](https://github.com/ben-rogerson/twin.macro) and [emotion-js](https://emotion.sh/) as its CSS-in-JS solution. This repository uses [Next.js](https://nextjs.org/docs/api-reference/create-next-app) however the components are reusable in any project that uses React, twin.macro and emotion-js (see \u003chttps://github.com/ben-rogerson/twin.examples\u003e).\n\n## Table of Contents\n\n- [Documentation](#documentation)\n- [Installation](#installation)\n- [Theme System](#theme)\n- [How it was set up](#setup)\n- [Credits](#credits)\n\n## Documentation\n\n- For full details on the components, types and so on, see the [typedoc](https://typedoc.org/) documentation: \u003chttps://interpause.github.io/interpause-components\u003e\n- For interacting with the components live, see the [Storybook.js](https://storybook.js.org/docs/react/get-started/introduction) documentation: \u003chttps://storybook.interpause.dev\u003e\n- To return back to the repository: \u003chttps://github.com/Interpause/interpause-components\u003e\n\n## Installation\n\n```sh\nyarn install\n# see it works by opening http://localhost:3000\nyarn dev\n# start the storybook (incomplete)\nyarn storybook\n```\n\nTo ensure Typescript linting works properly with [Yarn 2](https://yarnpkg.com/getting-started/install) run these:\n\n```sh\nyarn add --dev @yarnpkg/pnpify\n# for VSCode:\nyarn pnpify --sdk vscode\n```\n\nSee \u003chttps://yarnpkg.com/getting-started/editor-sdks\u003e for other IDEs.\n\nWhile I have yet to make it installable as a module, one possible approach for now is to add this repository as a remote:\n\n```sh\ngit remote add components https://github.com/Interpause/interpause-components.git\ngit fetch components\n# make sure you push to correct repository\ngit push --set-upstream origin main\n```\n\n## Theme\n\nI created a simple theming system via CSS variables. The 8 different accents are dynamically generated inside [`tailwind.config.js`](https://github.com/Interpause/interpause-components/blob/main/tailwind.config.js):\n\n- `primary`: emphasis, important\n- `secondary`: contrasting primary\n- `info`: notifications, loading alerts, updates\n- `trivial`: disabled, unimportant, extraneous\n- `good`: success, logged in, purchases, loading complete\n- `risky`: warnings, confirmations\n- `bad`: errors, wrong password, serious warnings\n- `normal`: text\n\nThe base theme is included via:\n\n```jsx\n//add this to pages/_app.tsx and .storybook/preview.js\nimport { Global } from '@emotion/react'\nimport { baseStyle } from '../src/theme/baseTheme'\n\n\u003cGlobal styles={baseStyle}/\u003e\n```\n\nI preserved the `--tw-opacity` CSS variables, allowing control over the intensity of the color via changing its opacity for various stuff such as backgrounds and borders:\n\n```json\n{\n  \"primary\":\"rgba(var(--hi-color-primary), var(--tw-text-opacity))\"\n}\n```\n\n```jsx\n// e.g. this is still possible\n\u003cdiv tw=\"bg-primary bg-opacity-50\"\u003e\u003c/div\u003e\n```\n\nUnfortunately, the above is currently backfiring for anything not on a plain background. For such components, I have made their backgrounds plain. TODO: A future approach might be to use the CSS3 `hsla()` function and generate a bunch of tailwind classes for luminosity instead of using opacity as the way to control color intensity. Actually see \u003chttps://github.com/tailwindlabs/tailwindcss/pull/3850\u003e, might aid you in doing so.\n\nAs for how the base theme is configured by default, [`baseTheme.ts`](https://github.com/Interpause/interpause-components/blob/main/src/theme/baseTheme.ts):\n\n```ts\n/** Used to convert hex to `${r},${g},${b}`. */\nconst rgb = (c: string) =\u003e Color(c).array().join(',');\n/** SerializedStyles containing default values for CSS vars. */\nconst themeVars = css`\n  --hi-color-primary:   ${rgb('#0288d1')};\n  --hi-color-secondary: ${rgb('#311b92')};\n  --hi-color-info:      ${rgb('#0288d1')};\n  --hi-color-trivial:   ${rgb('#9e9e9e')};\n  --hi-color-good:      ${rgb('#4caf50')};\n  --hi-color-risky:     ${rgb('#fbc02d')};\n  --hi-color-bad:       ${rgb('#d50000')};\n  --hi-color-normal:    ${rgb('#000')};\n\n  --tw-text-opacity:        1;\n  --tw-placeholder-opacity: 0.65;\n  --tw-bg-opacity:          0.3;\n  --tw-border-opacity:      1;\n  --tw-divide-opacity:      0.2;\n  --tw-ring-opacity:        0.2;\n`;\n```\n\nI have also made dark and light themes (really go check out [`baseTheme.ts`](https://github.com/Interpause/interpause-components/blob/main/src/theme/baseTheme.ts)). Do follow it if you want to change the theme colors. As for changing the accent names and so on, my code in [`tailwind.config.js`](https://github.com/Interpause/interpause-components/blob/main/tailwind.config.js) should be fairly easy to change.\n\nFinally, I provided a function in [`baseTheme.ts`](https://github.com/Interpause/interpause-components/blob/main/src/theme/baseTheme.ts) to make it easy to change the accent of a component easily:\n\n```ts\n/** creates a SerializedStyles that sets all colors to that of the accent given. */\nconst getAccent = (accent:accentTypes) =\u003e css`\n  color: rgba(var(--hi-color-${accent}), var(--tw-text-opacity));\n  background-color: rgba(var(--hi-color-${accent}), var(--tw-bg-opacity));\n  border-color: rgba(var(--hi-color-${accent}), var(--tw-border-opacity));\n\n  --tw-ring-color: rgba(var(--hi-color-${accent}), var(--tw-ring-opacity));\n  --tw-ring-offset-color: rgba(var(--hi-color-${accent}), 1);\n\n  \u0026 \u003e * + * {\n    border-color: rgba(var(--hi-color-${accent}), var(--tw-divide-opacity));\n  }\n  \u0026::placeholder {\n    color: rgba(var(--hi-color-${accent}), var(--tw-placeholder-opacity));\n  }\n`;\n```\n\n## Setup\n\nYou can follow along with the commit history of this repository to see the effects of each step.\n\n1. [Setup Next.js with Typescript](#setup-nextjs-with-typescript)\n2. (Optional) [Setup Yarn 2 PnPify](#optional-setup-yarn-2-pnpify)\n3. [Setup twin.macro and emotion](#setup-twinmacro-and-emotion)\n4. [Setup Storybook](#setup-storybook)\n\n### Setup Next.js with Typescript\n\nFirst, create the Next.js project:\n\n```sh\nyarn create next-app\n```\n\nNext, create `tsconfig.json` in the root folder and run:\n\n```sh\nyarn add --dev typescript @types/react @types/node\n# Next.js initializes tsconfig.json for you on the first run\nyarn dev\n```\n\nOptionally, change these `tsconfig.json` settings once done:\n\n```json\n{\n  \"allowJs\": false,\n  \"strict\": true\n}\n```\n\nAs we will not be using them anymore, you may delete `./styles`. Look in [`./pages`](https://github.com/Interpause/interpause-components/blob/main/pages) for how code can be written once installation is complete. If using this repository as a Next.js template, see \u003chttps://nextjs.org/docs/basic-features/typescript\u003e for further details.\n\n### (Optional) Setup Yarn 2 PnPify\n\nTo setup [Yarn 2](https://yarnpkg.com/getting-started/install):\n\n```sh\nyarn set version berry\n```\n\nAdd these to the generated `.gitignore`:\n\n```sh\n# dependencies\n.yarn/*\n!.yarn/releases\n!.yarn/plugins\n!.yarn/versions\n```\n\nThen do:\n\n```sh\nyarn add --dev @yarnpkg/pnpify\n# for VSCode:\nyarn pnpify --sdk vscode\n# see https://yarnpkg.com/getting-started/editor-sdks for other IDEs\n# you might want to add to .gitignore some of the generated files like .vscode\n```\n\nIf you run into module resolution problems, you can try adding to `.yarnrc.yml`:\n\n```yaml\nnodeLinker: \"pnp\"\npnpMode: \"loose\"\n```\n\n### Setup twin.macro and emotion\n\nAdapted from \u003chttps://github.com/ben-rogerson/twin.examples/tree/master/next-emotion\u003e. My steps are very similar to that of the original, but additional dependencies `@emotion/babel-plugin babel-plugin-macros` are needed if you are using Yarn 2. Do take a look at the original as it covers some of the features as well as contains optional steps that I skipped. Perhaps this is specifically an issue with VSCode, but I had to use \"reload window\" sometimes to get the Typescript linter to update, so try that if you get weird warnings.\n\nFirst, install the dependencies:\n\n```sh\nyarn add twin.macro tailwindcss @emotion/react @emotion/styled @emotion/css\nyarn add --dev @emotion/babel-plugin babel-plugin-macros\n```\n\nIn [_app.tsx](https://github.com/Interpause/interpause-components/blob/main/pages/_app.tsx) add `\u003cGlobalStyles/\u003e` like this:\n\n```tsx\nimport { GlobalStyles } from 'twin.macro';\n\nexport default function App({Component, pageProps}:AppProps){\n  return \u003c\u003e\n    \u003cGlobalStyles/\u003e\n    \u003cComponent {...pageProps}/\u003e\n  \u003c/\u003e;\n}\n```\n\nCreate `.babelrc.js` in the root folder and add:\n\n```js\nmodule.exports = {\n  presets: [\n    [\n      'next/babel',\n      {\n        'preset-react': {\n          runtime: 'automatic',\n          importSource: '@emotion/react',\n        },\n      },\n    ],\n  ],\n  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],\n}\n```\n\nThen, create `next.config.js` in the root folder and add:\n\n```js\nmodule.exports = {\n  webpack: (config, { isServer }) =\u003e {\n    // Fixes packages that depend on fs/module module\n    if (!isServer) {\n      config.node = { fs: 'empty', module: 'empty' }\n    }\n\n    return config\n  },\n}\n```\n\nFinally, create `twin.d.ts` in the root folder and add these type declarations:\n\n```ts\nimport 'twin.macro'\nimport styledImport from '@emotion/styled'\nimport { css as cssImport } from '@emotion/react'\n\n// The css prop\n// https://emotion.sh/docs/typescript#css-prop\nimport {} from '@emotion/react/types/css-prop'\n\ndeclare module 'twin.macro' {\n  // The styled and css imports\n  const styled: typeof styledImport\n  const css: typeof cssImport\n}\n\n// The 'as' prop on styled components\ndeclare global {\n  namespace JSX {\n    interface IntrinsicAttributes\u003cT\u003e extends DOMAttributes\u003cT\u003e {\n      as?: string\n    }\n  }\n}\n```\n\nAnd include it into `tsconfig.json`:\n\n```json\n{\n  \"include\": [\"twin.d.ts\"]\n}\n```\n\nSee [`./pages/index.tsx`](https://github.com/Interpause/interpause-components/blob/main/pages/index.tsx) for code that uses twin.macro's features to see if everything so far is setup correctly.\n\n#### Setup TailwindCSS Twin Intellisense for VSCode\n\nGet it from \u003chttps://marketplace.visualstudio.com/items?itemName=lightyen.tailwindcss-intellisense-twin\u003e. Great extension that is better than the official one specifically for twin.macro.\n\n### Setup Storybook\n\nTo add [Storybook.js](https://storybook.js.org/docs/react/get-started/introduction):\n\n```sh\n#Storybook v6.2.0 was needed to solve something related to core-js\nyarn add --dev @storybook/cli@next prop-types @emotion/babel-plugin-jsx-pragmatic @babel/plugin-transform-react-jsx\nyarn sb init\nyarn storybook\n```\n\nCreate `./.storybook/.babelrc` and add:\n\n```json\n{\n  \"presets\": [\n    [ \"next/babel\" ]\n  ],\n  \"plugins\": [\n    \"babel-plugin-macros\",\n    [\n      \"@emotion/babel-plugin-jsx-pragmatic\",\n      {\n        \"export\": \"jsx\",\n        \"import\": \"__cssprop\",\n        \"module\": \"@emotion/react\"\n      }\n    ],\n    [\n      \"@babel/plugin-transform-react-jsx\",\n      {\n        \"pragma\": \"__cssprop\"\n      },\n      \"emotion-css-prop\"\n    ]\n  ]\n}\n```\n\nAdapted from \u003chttps://github.com/ben-rogerson/twin.examples/blob/master/storybook-emotion/.storybook/.babelrc\u003e. A different set of plugins had to be used for Storybook's `.babelrc` to work. This is probably because the way Next.js and Storybook transpiles is different, leading to the `@emotion/babel-plugin` not working for storybook. Presets had to be respecified too as they were overwritten. Also, see [`./src/containers/Card.stories.js`](https://github.com/Interpause/interpause-components/blob/main/src/containers/Card.stories.js) for an example.\n\nFinally, to `./.storybook/preview.js` add:\n\n```jsx\nimport { GlobalStyles } from 'twin.macro'\n\nexport const decorators = [\n  Story =\u003e (\n    \u003cdiv\u003e\n      {/* */}\n      \u003cGlobalStyles /\u003e\n      \u003cStory /\u003e\n    \u003c/div\u003e\n  ),\n]\n```\n\n## Credits\n\nMany thanks to [ben-rogerson](https://github.com/ben-rogerson) for developing twin.macro, if not for which none of this would be possible. I really like the twin.macro + emotionjs library to the point when I tried to switch to a component library, I was actually put off by the relative difficulty of styling things. He had also made several examples of how to use twin.macro with various frameworks, without which it would have taken me much longer to get this to work.\n\n## Standards (unfinished)\n\nMost of my components will have a `type` and `variant` prop. `type` refers to mainly the accent, allowing you to customize which accent is used for the component. `variant` refers to the style of the component, for example, an outlined button with transparent background versus one that is filled in.\n\nAll components will pass the `className` prop to the root element, allowing you to style them directly using the `tw` or `css` props. Components that contain other sub-components that makes sense to be stylable will attach classes to those sub-components so that they can be styled from outside. In that case, the classes will be mentioned in the documentation. Else, you could use the browser's debtools to inspect the classes added. Refs are sometimes forwarded.\n\nNote to self, bookmark this: \u003chttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts\u003e. Still hate how tslinter seems to arbitrarily resolve or not resolve types. Really wish they would show Omit\u003c...\u003e rather than resolve it automatically to Pick\u003c...super long list...\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterpause%2Finterpause-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finterpause%2Finterpause-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterpause%2Finterpause-components/lists"}