free-v-design-system

This is a community fork of freee/vibes (@freee_jp/vibes), the design system by freee K.K., republished to npm as free-v-design-system. This fork is not affiliated with, maintained by, or endorsed by freee K.K. "vibes" and "freee" are brands of freee K.K.; this package uses a different name for that reason and refers to them only to describe its origin.

Why this fork exists

Upstream @freee_jp/vibes declares react: ^16.8.x || ^17 || ^18 as a peer dependency, which blocks installation in React 19 apps. Inspection of the published code showed no actual dependency on APIs removed in React 19 (no findDOMNode calls, no function-component defaultProps, no legacy context, no UNSAFE_ lifecycles), so this fork simply widens the peer range.

The goal is to be a temporary bridge: if upstream adds React 19 support, use upstream and consider this fork deprecated.

Changes from upstream (per Apache License 2.0 §4)

Based on @freee_jp/vibes 100.1.0. Modifications:

• package.json: renamed package to free-v-design-system; added || ^19 to the react / react-dom peer dependency ranges; updated repository/homepage/bugs metadata; added description and fork-maintainer contributor entry
• README.md: replaced with this fork notice (original content below)
• .github/workflows/publish_package_to_npmjs.yml: switched to npm Trusted Publishing (OIDC) with manual dispatch

No component source code has been modified. Versioning mirrors upstream (100.1.0 = upstream 100.1.0); fork-only fixes, if ever needed, will be released as 100.1.0-fork.N style prereleases or patch bumps documented here.

Install

npm install free-v-design-system

Peer dependencies (same as upstream, plus React 19 allowed): react, react-dom, styled-components@^5, react-modal@^3.7.1, lottie-web@^5.5.7.

Usage

Import paths change from @freee_jp/vibes to free-v-design-system:

import 'free-v-design-system/css';
import { MessageBlock } from 'free-v-design-system';

Everything else is identical to upstream — see the upstream documentation and the original README below.

Fork changelog

• 100.1.2: React 19 fix — WithPopup (used by all dropdowns) rendered CSSTransition without nodeRef, hitting ReactDOM.findDOMNode (removed in React 19) whenever a popup opened. Now passes a wrapper nodeRef.
• 100.1.1: SSR fix — VibesContext evaluated document.body at module scope, crashing any server-side render (e.g. Next.js) that imports the package. Now guarded with typeof document === 'undefined'. Client behavior unchanged.
• 100.1.0: initial fork release (peer range widened only, dist byte-identical to upstream)

React 19 status

• Peer range widened; published dist is byte-identical to upstream 100.1.0
• Verified: no direct usage of APIs removed in React 19; one transitive hit (react-transition-group findDOMNode via WithPopup) fixed in 100.1.2
• If you hit a React 19 incompatibility, please open an issue so findings are shared publicly

License

Apache-2.0, same as upstream. Copyright freee K.K. (original work); modifications by fork contributors. See LICENSE.txt.

Original README (upstream)

世界を変えるためのデザインシステムです

Getting started

Install

TBD

Usage

スタイルを適用するため node_modules/vibes/vibes.css を読み込んでください。

from Sass:

@import 'node_modules/vibes/vibes_2021';

from JavaScript with CSS Modules:

import '@freee_jp/vibes/css';

スタイルを読み込んだら、vibes の React Component を次のように使うだけです。

import * as React from 'react';
import { Breadcrumbs } from '@freee_jp/vibes';
import { CompanyLogoT } from 'somewhere';

export default function App() {
  return (
    <div className="app">
      <CompanyLogoT size="fit-width" fill="default"/>
      <Breadcrumbs
        links={[
          { title: '取引', url: '/hub_pages/deals' },
          { title: '自動で経理', url: '/wallet_txns/stream' },
        ]}
      />
    </div>
  );
}

Contribution

こちらのガイドラインを参照してください。