Styleguide Structure

This styleguide separates shared configuration from platform specific components. All code is plain JavaScript (no TypeScript).

/core   - shared tokens and theme configuration
/native - React Native components
/web    - React web components

Components import tokens from core/theme.js so that native and web implementations remain synchronized.

Web and React Native components are provided in separate subpaths so that styles are only loaded when the component is imported. For example:

There are multiple brand layers in the process of being implemented. Stay tuned.

import Button from 'liquid-spirit-styleguide/web/Button'
import NativeButton from 'liquid-spirit-styleguide/native/Button'

Tokens are still exported from the package root via core/theme.js.

Using the Components

React (Web)

1. Install the package and peer dependencies:

   yarn add liquid-spirit-styleguide react react-dom

2. Import the stylesheet once in your app entry:

   import 'liquid-spirit-styleguide/dist/liquid-spirit-styleguide.css';

   Or, if you need a URL for a <link> tag:

   import cssHref from 'liquid-spirit-styleguide/css-url';
   
   const App = () => (
     <>
       <link rel="stylesheet" href={cssHref} />
     </>
   );

3. Import components from the web subpath:

   import Button from 'liquid-spirit-styleguide/web/Button';
   import BrandProvider from 'liquid-spirit-styleguide/web/BrandProvider';
   
   const Example = () => (
     <BrandProvider brand="liquid-spirit">
       <Button label="Press me" onPress={() => {}} />
     </BrandProvider>
   );

React Native

1. Install the package and peer dependencies:

   yarn add liquid-spirit-styleguide react react-native

   If you use IconButton, install its peer dependency:

   yarn add react-native-vector-icons

2. Import components from the native subpath:

   import Button from 'liquid-spirit-styleguide/native/Button';
   import BrandProvider from 'liquid-spirit-styleguide/native/BrandProvider';
   
   const Example = () => (
     <BrandProvider brand="liquid-spirit">
       <Button label="Press me" onPress={() => {}} />
     </BrandProvider>
   );

React Native components live in the native folder and share the same theme tokens.

Getting Started

Use Node 20.19+ (Storybook requires it). An .nvmrc is provided in the repo.

Install dependencies with Yarn:

yarn

Start the development server:

yarn dev

Start Storybook:

yarn storybook

Build static Storybook:

yarn build-storybook

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

Updating native style variables

Less variables are converted to a JavaScript module for React Native. After modifying any files in core/tokens, run:

yarn generate:native

This regenerates src/styles/nativeVariables.js so the native components use the latest tokens.