linglong-react

This is linglong-react, a React library designed for use with the Super8 platform. It provides a set of tools and components to enhance your development experience.

Installation

You can install linglong-react via npm:

npm install linglong-react

Make sure you have the following peer dependencies installed in your project:

"peerDependencies": {
    "@material-ui/core": "^4.12.4",
    "classnames": "^2.5.1",
    "hex-rgba": "^1.0.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-portal": "4.2.2",
    "currency.js": "2.0.4"
}

To install the peer dependencies, you can use the following command:

npm install @material-ui/core@^4.12.4 classnames@^2.5.1 [email protected] [email protected] hex-rgba@^1.0.2 [email protected] [email protected]

Usage

Once installed, you can import and use the components provided by linglong-react in your React project. Here's a basic example:

import { SomeComponent } from 'linglong-react';

function App() {
  return (
    <div>
      <SomeComponent />
    </div>
  );
}

export default App;

i18n Usage

The library provides a customizable theme system:

import { LingLongReactI18nProvider } from 'linglong-react';

// Use default provider
const MyComponent = () => (
  <LingLongReactI18nProvider defaultLocale="zh-TW">
    <YourApp />
  </LingLongReactI18nProvider>
);

// Using translation functionality and language switching in components
import { useTranslation } from 'linglong-react';

const YourApp = () => {
  // Get the translation function t and the function to change language setLocale
  const { t, setLocale } = useTranslation();

  return (
    <div>
      {/* Use the translation function to translate text */}
      <div>{t('hello')}</div>

      {/* Language switching examples */}
      <button onClick={() => setLocale('en-US')}>English</button>
      <button onClick={() => setLocale('zh-TW')}>Traditional Chinese</button>
    </div>
  );
};

Icons Usage

The library includes a set of icons that you can easily integrate:

import { Icon } from 'linglong-react/icon';

const MyComponent = () => (
  <div>
    <Icon name="home" size="medium" />
    <Icon name="settings" size="small" color="primary" />
  </div>
);

Project Structure

linglong-react/
└── dist/                # Build output
    ├── plugin.es.js     # Uncompressed version
    ├── plugin.es.min.js # Compressed version
    ├── theme/           # Theme-related output
    │   └── index.js     # Theme entry point
    ├── icon/            # Icon-related output
    │   └── index.js     # Theme entry point
    └── locale/          # i18n-related output

Build Information

• Regular Module Entry Point: dist/plugin.es.js
• Minified Module Entry Point: dist/plugin.es.min.js
• Theme Module: dist/theme/index.js
• Icon Module: dist/icon/index.js

SVG Optimization

This project uses SVGO (SVG Optimizer) to optimize SVG files for better performance during the build process. Large SVG files (>8KB) may not be automatically converted to base64 data URLs by the Rollup build system.

Optimizing SVG Icons

To optimize SVG files, you can use SVGO:

# Install SVGO globally (optional)
npm install -g svgo

# Optimize a single SVG file
npx svgo path/to/your/icon.svg --output path/to/optimized/icon.svg

# Optimize all SVG files in a directory
npx svgo -f src/icon/assets -o src/icon/assets --recursive

Common SVGO Benefits

• File Size Reduction: Typically reduces SVG file sizes by 40-70%
• Better Build Performance: Smaller files are more likely to be inlined as base64 data URLs
• Cleaner Code: Removes unnecessary metadata, comments, and precision from SVG paths
• Faster Loading: Optimized SVGs load faster in the browser

Build Configuration

The Rollup configuration includes a size limit for inlining SVG files as base64. Files larger than the configured limit will be copied as separate files instead of being inlined. If you encounter issues with large SVG files not being converted to base64, consider:

1. Optimizing the SVG file using SVGO
2. Increasing the url() plugin limit in rollup.config.js

url({
  limit: 10000, // Increase limit to 10KB for larger SVGs
}),

Development with Storybook

This project uses Storybook for component development and documentation. Storybook provides a development environment for UI components where you can visualize different states of your components and develop them interactively.

Running Storybook

To start the Storybook development server:

npm run storybook

This will launch Storybook at http://localhost:6006/ by default.

Writing Stories

Stories are placed in the stories directory. Each component should have its own story file.

Example story structure:

import React from 'react';
import { Button } from '../src/components/Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      options: ['primary', 'secondary', 'text'],
      control: { type: 'select' },
    },
    disabled: {
      control: { type: 'boolean' },
    },
  },
};

const Template = args => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  children: 'Primary Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary',
  children: 'Secondary Button',
};

Building Storybook

To build a static version of Storybook:

npm run build-storybook

The built version will be in the storybook-static directory, ready to be deployed.

Author

This library was developed by Eric, Jerry.

License

linglong-react is licensed under the MIT License. See the LICENSE file for more details.

Feel free to reach out if you have any questions or need assistance!