tinper-bee

If you are contributing to or developing based on tinper-bee, you can build the project using gulp and webpack.

1. Clone the repository.
2. Install dependencies.
3. Run gulp to build.

$ git clone git@github.com:iuap-design/tinper-bee.git
$ npm install
$ gulp

Follow these steps to release a new version:

1. Prepare Versioning: Update the version field in package.json and the version constant in index.js.
2. Publish: Run npm publish to publish the package to the registry.
3. Generate GitHub Release:
   • Go to the tinper-bee releases page.
   • Click Draft a new release and fill in the release details.
   • Click Publish release.
4. Update CDN:
   • Log in to the AliOSS client.
   • Navigate to oss://iuap-design-cdn/static/tinper-bee/.
   • Create a new folder named after the version (e.g., 2.3.4).
   • Upload the assets, build, style, and theme files.
   • Important: Back up the latest directory by copying tinper-bee/latest/ to tinper-bee/latest-back/ before updating the latest folder with the new assets.

To use tinper-bee in your project, import the specific components you need and the library's CSS file. The library provides separate bundles for JS and CSS to allow for granular handling.

import React,{ Component } from 'react';

// Import tinper-bee components
import { Button, Panel } from 'tinper-bee';

// Import tinper-bee CSS
import 'tinper-bee/assets/tinper-bee.css';

// Your project styles
import './index.less';

class Example extends Component{
  constructor(props) {
   super(props);
 }

  render({
    return (
    <Panel>
      hello world
    </Panel>)
  }
}

export default Example;

If you need to add one of the 66 base components to the library, follow these steps:

1. Add the new component to the dependencies in package.json.
2. Create new directories for the component in both tinper-bee/components and tinper-bee/lib.
3. Register and export the new component in tinper-bee/index.js.
4. Import the new component's style file in tinper-bee/style/component.scss.

Before publishing, verify your changes (including styles and logic) by installing the local version of tinper-bee into the tinper-bee-overview test project.

1. In the tinper-bee-overview directory, install your local library using a relative path:

   npm install -S ../tinper-bee

2. Run the development server to verify the changes:

   npm run dev

You can include tinper-bee using a CDN. You can either reference a specific version or always use the latest version.

Note: When using the CDN approach, you must configure your Webpack externals to map the module name to the global variable TinperBee.

<!-- CSS: Reference specific version or latest -->
<link href="//design.yonyoucloud.com/static/tinper-bee/[VERSION]/assets/tinper-bee.css">
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css">

<!-- JS: Reference specific version or latest -->
<script src="//design.yonyoucloud.com/static/tinper-bee/[VERSION]/build/tinper-bee.js"></script>
<script src="//design.yonyoucloud.com/static/tinper-bee/latest/build/tinper-bee.js"></script>

// Webpack configuration
externals: {
   'tinper-bee': 'TinperBee'
}

If you are contributing to the project or performing secondary development, you can build the project using gulp.

First, clone the repository, then install dependencies, and finally run the build command.

$ git clone git@github.com:iuap-design/tinper-bee.git
$ cd tinper-bee && npm install
$ gulp

You can install the tinper-bee component library using npm, cnpm, yarn, or ynpm.

npm install tinper-bee --save

You can install tinper-bee using npm, by cloning the GitHub repository, or via CDN.

npm install --save tinper-bee

To update the component library with the latest versions of all base components, use the provided automation script. This generates a JSON mapping of component names to their latest version numbers.

1. Run the version retrieval command:

   npm run getVersion

2. The latest version information is saved to ./utils/comNew.json.
3. Copy the version mappings from that file into the dependencies property of your package.json.

Note: All component versions must be locked (do not use ranges like ^ or ~).

To maintain compatibility with Internet Explorer, you must manually patch the build output.

1. Open build/tinper-bee.js.
2. Search for the following pattern:

   candidates.find

3. Replace the existing supported variable assignment with the following loop-based implementation to avoid using .find() which is not supported in IE:

var supported = "";
for(var k = 0; k++; k < candidates.length) {
	if(candidates[k] === "on" + eventName in document){
		supported = candidates[k];
	}
}

After every release, you must manually update the theme customization server using the CLI tool.

1. Install the CLI tool globally if you haven't already:

   npm install tinper-bee-theme-cli -g

2. Run the update command and provide the new version number when prompted:

tinper-theme update