Skip to content

Commit 3d3376c

Browse files
HacksoreHacksore
authored
migrate/tsdown (#177)
1 parent 0063c55 commit 3d3376c

9 files changed

Lines changed: 1117 additions & 1120 deletions

File tree

‎.storybook/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { StorybookConfig } from "@storybook/react-vite";
22
const config: StorybookConfig = {
33
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
4-
addons: ["@storybook/addon-essentials", "@storybook/addon-controls"],
4+
addons: ["@storybook/addon-docs"],
55

66
framework: {
77
name: "@storybook/react-vite",

‎.storybook/preview.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { Preview } from "@storybook/react";
2-
import { themes } from "@storybook/theming";
1+
import type { Preview } from "@storybook/react-vite";
2+
import { themes } from "storybook/theming";
33

44
const preview: Preview = {
55
parameters: {

‎package.json‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,47 @@
11
{
22
"name": "react-skinview3d",
3-
"version": "6.0.0",
3+
"version": "7.0.0",
44
"description": "A React component for skinview3d Minecraft viewer",
55
"author": "Hacksore",
66
"license": "MIT",
77
"repository": "Hacksore/react-skinview3d",
88
"type": "module",
9+
"files": ["dist"],
10+
"main": "./dist/index.cjs",
11+
"module": "./dist/index.js",
12+
"types": "./dist/index.d.ts",
913
"exports": {
1014
".": {
11-
"types": "./dist/index.d.ts",
12-
"import": "./dist/index.es.js"
15+
"import": {
16+
"types": "./dist/index.d.ts",
17+
"default": "./dist/index.js"
18+
},
19+
"require": {
20+
"types": "./dist/index.d.cts",
21+
"default": "./dist/index.cjs"
22+
}
1323
}
1424
},
1525
"engines": {
1626
"node": ">=22"
1727
},
1828
"scripts": {
19-
"build": "rollup -c",
20-
"start": "rollup -c -w",
29+
"build": "tsdown",
2130
"format": "biome format --write",
2231
"lint": "biome lint",
2332
"storybook": "storybook dev -p 6006",
2433
"build-storybook": "storybook build"
2534
},
2635
"devDependencies": {
2736
"@biomejs/biome": "^1.9.4",
28-
"@rollup/plugin-commonjs": "^28.0.3",
29-
"@rollup/plugin-node-resolve": "^16.0.1",
30-
"@rollup/plugin-terser": "^0.4.1",
31-
"@rollup/plugin-typescript": "^12.1.2",
32-
"@storybook/addon-controls": "^8.6.12",
33-
"@storybook/addon-essentials": "^8.6.12",
34-
"@storybook/react": "^8.6.12",
35-
"@storybook/react-vite": "^8.6.12",
36-
"@storybook/theming": "^8.6.12",
37+
"@storybook/react-vite": "^9.1.4",
3738
"@types/react": "^19.1.2",
3839
"@types/react-dom": "^19.1.3",
39-
"rollup": "^4.40.1",
40-
"storybook": "^8.6.12",
41-
"typescript": "5.8.3"
40+
"storybook": "^9.1.4",
41+
"tsdown": "^0.14.2",
42+
"typescript": "5.8.3",
43+
"@storybook/addon-docs": "^9.1.4"
4244
},
43-
"files": ["dist"],
4445
"peerDependencies": {
4546
"react": ">=16.8.0",
4647
"react-dom": ">=16.8.0"

‎pnpm-lock.yaml‎

Lines changed: 933 additions & 985 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rollup.config.js‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/index.tsx‎

Lines changed: 3 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,13 @@
11
import { useEffect, useRef } from "react";
2-
import { SkinViewer, type SkinViewerOptions } from "skinview3d";
3-
import type { HTMLAttributes } from "react";
4-
5-
/**
6-
* Interface describing the callback parameters when the skin viewer is ready
7-
*/
8-
export interface ViewerReadyCallbackOptions {
9-
/**
10-
* The instance of the skinview3d viewer that can be used to control the skin display
11-
*/
12-
viewer: SkinViewer;
13-
/**
14-
* The reference to the canvas element where the skin is rendered
15-
*/
16-
canvasRef: HTMLCanvasElement;
17-
}
18-
19-
/**
20-
* Props interface for the ReactSkinview3d component
21-
*/
22-
export interface ReactSkinview3dOptions {
23-
/**
24-
* CSS class names to apply to the canvas element
25-
*/
26-
className?: HTMLAttributes<HTMLCanvasElement>["className"];
27-
/**
28-
* The width of the canvas in pixels or as a CSS value
29-
*/
30-
width: number | string;
31-
/**
32-
* The height of the canvas in pixels or as a CSS value
33-
*/
34-
height: number | string;
35-
/**
36-
* URL of the Minecraft skin texture to display
37-
*/
38-
skinUrl: string;
39-
/**
40-
* Optional URL of the Minecraft cape texture to display
41-
*/
42-
capeUrl?: string;
43-
/**
44-
* A callback function that is called when the skin viewer is ready
45-
* @param {ViewerReadyCallbackOptions} options - The options object containing the viewer instance and canvas reference
46-
* @param {SkinViewer} options.viewer - The instance of the skinview3d viewer
47-
* @param {HTMLCanvasElement} options.canvasRef - The reference to the canvas element
48-
* @example
49-
* ```tsx
50-
* onReady={({ viewer, canvasRef }) => {
51-
* // Access the viewer instance
52-
* viewer.autoRotate = true;
53-
* // Access the canvas element
54-
* console.log(canvasRef);
55-
* }}
56-
* ```
57-
*/
58-
onReady?: ({ viewer, canvasRef }: ViewerReadyCallbackOptions) => void;
59-
/**
60-
* Additional configuration options passed directly to the skinview3d constructor
61-
* @see [skinview3d documentation](https://bs-community.github.io/skinview3d/) for available options
62-
*/
63-
options?: SkinViewerOptions;
64-
}
2+
import { SkinViewer } from "skinview3d";
3+
import type { ReactSkinview3dOptions } from "./types.js";
654

665
/**
676
* React component that renders a 3D Minecraft skin viewer
687
* @param {ReactSkinview3dOptions} props - The component props
698
* @returns {React.ReactElement} A canvas element with the 3D skin viewer
709
*/
71-
const ReactSkinview3d = ({
10+
export const ReactSkinview3d = ({
7211
className,
7312
width,
7413
height,
@@ -126,5 +65,3 @@ const ReactSkinview3d = ({
12665

12766
return <canvas className={className} ref={canvasRef} />;
12867
};
129-
130-
export default ReactSkinview3d;

‎src/stories/skinview3d.stories.tsx‎

Lines changed: 84 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,66 @@
11
import React, { useRef, useState } from "react";
2-
import type { Meta, StoryObj } from "@storybook/react";
3-
import ReactSkinview3d from "..";
2+
import type { Meta, StoryObj } from "@storybook/react-vite";
3+
import { ReactSkinview3d } from "..";
44
import type { SkinViewer } from "skinview3d";
55
import { WalkingAnimation } from "skinview3d";
66

77
const meta: Meta<typeof ReactSkinview3d> = {
88
title: "Examples",
99
component: ReactSkinview3d,
1010
tags: ["autodocs"],
11+
argTypes: {
12+
width: {
13+
control: { type: "number" },
14+
description: "Width of the canvas in pixels",
15+
defaultValue: 150,
16+
},
17+
height: {
18+
control: { type: "number" },
19+
description: "Height of the canvas in pixels",
20+
defaultValue: 300,
21+
},
22+
skinUrl: {
23+
control: { type: "select" },
24+
options: [
25+
"textures/skin-legacyhat-default-no_hd.png",
26+
"textures/skin-1.8-default-no_hd.png",
27+
"textures/skin-1.8-slim-no_hd.png",
28+
"textures/skin-old-default-no_hd.png",
29+
],
30+
description: "Select a skin texture to display",
31+
},
32+
capeUrl: {
33+
control: { type: "text" },
34+
description: "Optional URL of the Minecraft cape texture",
35+
},
36+
className: {
37+
control: { type: "text" },
38+
description: "CSS class names to apply to the canvas element",
39+
},
40+
onReady: {
41+
control: false,
42+
description: "Callback function when the skin viewer is ready",
43+
},
44+
options: {
45+
control: false,
46+
description: "Additional configuration options for skinview3d",
47+
},
48+
},
49+
args: {
50+
width: 150,
51+
height: 300,
52+
skinUrl: "textures/skin-legacyhat-default-no_hd.png",
53+
},
1154
} satisfies Meta<typeof ReactSkinview3d>;
1255

1356
export default meta;
1457
type Story = StoryObj<typeof meta>;
1558

1659
export const Basic: Story = {
17-
render: () => {
18-
return (
19-
<ReactSkinview3d
20-
skinUrl="textures/skin-legacyhat-default-no_hd.png"
21-
height={300}
22-
width={150}
23-
/>
24-
);
60+
args: {
61+
skinUrl: "textures/skin-legacyhat-default-no_hd.png",
62+
height: 300,
63+
width: 150,
2564
},
2665
};
2766

@@ -50,12 +89,15 @@ export const Multiple: Story = {
5089
};
5190

5291
export const Animation: Story = {
53-
render: () => (
92+
args: {
93+
className: "viewer",
94+
skinUrl: "textures/skin-legacyhat-default-no_hd.png",
95+
height: 300,
96+
width: 150,
97+
},
98+
render: (args) => (
5499
<ReactSkinview3d
55-
className="viewer"
56-
skinUrl="textures/skin-legacyhat-default-no_hd.png"
57-
height={300}
58-
width={150}
100+
{...args}
59101
onReady={({ viewer }) => {
60102
// Add an animation
61103
viewer.animation = new WalkingAnimation();
@@ -66,6 +108,33 @@ export const Animation: Story = {
66108
),
67109
};
68110

111+
export const Interactive: Story = {
112+
args: {
113+
skinUrl: "textures/skin-legacyhat-default-no_hd.png",
114+
height: 300,
115+
width: 150,
116+
className: "viewer",
117+
},
118+
argTypes: {
119+
...meta.argTypes,
120+
skinUrl: {
121+
control: { type: "select" },
122+
options: [
123+
"textures/skin-legacyhat-default-no_hd.png",
124+
"textures/skin-1.8-default-no_hd.png",
125+
"textures/skin-1.8-slim-no_hd.png",
126+
"textures/skin-old-default-no_hd.png",
127+
],
128+
description: "Select a skin texture to display",
129+
},
130+
capeUrl: {
131+
control: { type: "select" },
132+
options: ["", "textures/mojang-classic-cape.png"],
133+
description: "Select a cape texture to display",
134+
},
135+
},
136+
};
137+
69138
export const Screenshot: Story = {
70139
render: () => {
71140
const [url, setUrl] = useState("");

‎src/types.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import type { SkinViewer } from "skinview3d";
2+
import type { SkinViewerOptions } from "skinview3d";
3+
import type { HTMLAttributes } from "react";
4+
5+
/**
6+
* Interface describing the callback parameters when the skin viewer is ready
7+
*/
8+
export interface ViewerReadyCallbackOptions {
9+
/**
10+
* The instance of the skinview3d viewer that can be used to control the skin display
11+
*/
12+
viewer: SkinViewer;
13+
/**
14+
* The reference to the canvas element where the skin is rendered
15+
*/
16+
canvasRef: HTMLCanvasElement;
17+
}
18+
19+
/**
20+
* Props interface for the ReactSkinview3d component
21+
*/
22+
export interface ReactSkinview3dOptions {
23+
/**
24+
* CSS class names to apply to the canvas element
25+
*/
26+
className?: HTMLAttributes<HTMLCanvasElement>["className"];
27+
/**
28+
* The width of the canvas in pixels or as a CSS value
29+
*/
30+
width: number | string;
31+
/**
32+
* The height of the canvas in pixels or as a CSS value
33+
*/
34+
height: number | string;
35+
/**
36+
* URL of the Minecraft skin texture to display
37+
*/
38+
skinUrl: string;
39+
/**
40+
* Optional URL of the Minecraft cape texture to display
41+
*/
42+
capeUrl?: string;
43+
/**
44+
* A callback function that is called when the skin viewer is ready
45+
* @param {ViewerReadyCallbackOptions} options - The options object containing the viewer instance and canvas reference
46+
* @param {SkinViewer} options.viewer - The instance of the skinview3d viewer
47+
* @param {HTMLCanvasElement} options.canvasRef - The reference to the canvas element
48+
* @example
49+
* ```tsx
50+
* onReady={({ viewer, canvasRef }) => {
51+
* // Access the viewer instance
52+
* viewer.autoRotate = true;
53+
* // Access the canvas element
54+
* console.log(canvasRef);
55+
* }}
56+
* ```
57+
*/
58+
onReady?: ({ viewer, canvasRef }: ViewerReadyCallbackOptions) => void;
59+
/**
60+
* Additional configuration options passed directly to the skinview3d constructor
61+
* @see [skinview3d documentation](https://bs-community.github.io/skinview3d/) for available options
62+
*/
63+
options?: SkinViewerOptions;
64+
}

0 commit comments

Comments
 (0)