rox-react-components 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+# Rox-React-Components
+
+# Usage & Components
+
+[Demo](https://stackblitz.com/edit/stackblitz-starters-wftsic?file=src%2FApp.tsx)

package/dist/es/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Button: () => React.JSX.Element;
+export default Button;

package/dist/es/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './Button';
+export default Button;

package/dist/es/Button/style.d.ts

@@ -0,0 +1,4 @@
+declare const styles: {
+    red: object;
+};
+export default styles;

package/dist/es/Card/Card.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+interface CardProps extends PropsWithChildren {
+    expand?: boolean;
+    duration?: number;
+}
+declare const Card: FC<CardProps>;
+export default Card;

package/dist/es/Card/Card.js

@@ -0,0 +1,17 @@
+import { css } from 'aphrodite';
+import React, { useMemo } from 'react';
+import styles from './styles.js';
+
+var Card = function (_a) {
+    var _b = _a.expand, expand = _b === void 0 ? false : _b, children = _a.children, _c = _a.duration, duration = _c === void 0 ? 200 : _c;
+    var transitionDuration = useMemo(function () { return ({
+        transitionDuration: "".concat(duration, "ms"),
+        msTransitionDuration: "".concat(duration, "ms"),
+        MozTransitionDuration: "".concat(duration, "ms"),
+        WebkitTransitionDuration: "".concat(duration, "ms"),
+    }); }, [duration]);
+    return (React.createElement("div", { style: transitionDuration, className: "".concat(css(styles.collapse), " ").concat(expand ? css(styles.expand) : '') },
+        React.createElement("div", { className: css(styles.hide0) }, children)));
+};
+
+export { Card as default };

package/dist/es/Card/index.d.ts

@@ -0,0 +1,2 @@
+import Card from './Card';
+export default Card;

package/dist/es/Card/index.js

@@ -0,0 +1,5 @@
+import Card from './Card.js';
+
+
+
+export { Card as default };

package/dist/es/Card/styles.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+    collapse: object;
+    expand: object;
+    hide0: object;
+};
+export default styles;

package/dist/es/Card/styles.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'aphrodite';
+
+var styles = StyleSheet.create({
+    collapse: {
+        display: 'grid',
+        gridTemplateRows: '0fr',
+        overflow: 'hidden',
+    },
+    expand: {
+        gridTemplateRows: '1fr',
+    },
+    hide0: {
+        minHeight: 0,
+    },
+});
+
+export { styles as default };

package/dist/es/Slide/Slide.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Slide: () => React.JSX.Element;
+export default Slide;

package/dist/es/Slide/index.d.ts

@@ -0,0 +1,2 @@
+import Slide from './Slide';
+export default Slide;

package/dist/es/index.d.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card';

package/dist/es/index.js

@@ -0,0 +1 @@
+export { default as Card } from './Card/Card.js';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+
+interface CardProps extends PropsWithChildren {
+    expand?: boolean;
+    duration?: number;
+}
+declare const Card: FC<CardProps>;
+
+export { Card };

package/dist/lib/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Button: () => React.JSX.Element;
+export default Button;

package/dist/lib/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './Button';
+export default Button;

package/dist/lib/Button/style.d.ts

@@ -0,0 +1,4 @@
+declare const styles: {
+    red: object;
+};
+export default styles;

package/dist/lib/Card/Card.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+interface CardProps extends PropsWithChildren {
+    expand?: boolean;
+    duration?: number;
+}
+declare const Card: FC<CardProps>;
+export default Card;

package/dist/lib/Card/Card.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var aphrodite = require('aphrodite');
+var React = require('react');
+var styles = require('./styles.js');
+
+var Card = function (_a) {
+    var _b = _a.expand, expand = _b === void 0 ? false : _b, children = _a.children, _c = _a.duration, duration = _c === void 0 ? 200 : _c;
+    var transitionDuration = React.useMemo(function () { return ({
+        transitionDuration: "".concat(duration, "ms"),
+        msTransitionDuration: "".concat(duration, "ms"),
+        MozTransitionDuration: "".concat(duration, "ms"),
+        WebkitTransitionDuration: "".concat(duration, "ms"),
+    }); }, [duration]);
+    return (React.createElement("div", { style: transitionDuration, className: "".concat(aphrodite.css(styles.collapse), " ").concat(expand ? aphrodite.css(styles.expand) : '') },
+        React.createElement("div", { className: aphrodite.css(styles.hide0) }, children)));
+};
+
+module.exports = Card;

package/dist/lib/Card/index.d.ts

@@ -0,0 +1,2 @@
+import Card from './Card';
+export default Card;

package/dist/lib/Card/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var Card = require('./Card.js');
+
+
+
+module.exports = Card;

package/dist/lib/Card/styles.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+    collapse: object;
+    expand: object;
+    hide0: object;
+};
+export default styles;

package/dist/lib/Card/styles.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var aphrodite = require('aphrodite');
+
+var styles = aphrodite.StyleSheet.create({
+    collapse: {
+        display: 'grid',
+        gridTemplateRows: '0fr',
+        overflow: 'hidden',
+    },
+    expand: {
+        gridTemplateRows: '1fr',
+    },
+    hide0: {
+        minHeight: 0,
+    },
+});
+
+module.exports = styles;

package/dist/lib/Slide/Slide.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Slide: () => React.JSX.Element;
+export default Slide;

package/dist/lib/Slide/index.d.ts

@@ -0,0 +1,2 @@
+import Slide from './Slide';
+export default Slide;

package/dist/lib/index.d.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card';

package/dist/lib/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var Card = require('./Card/Card.js');
+
+
+
+exports.Card = Card;

package/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "rox-react-components",
+	"version": "0.0.1",
+	"main": "dist/lib/index.js",
+	"module": "dist/es/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist",
+		"README.md",
+		"pakcage.json"
+	],
+	"author": "YangSu.Zhou",
+	"scripts": {
+		"dev": "cross-env NODE_ENV=development rollup -c",
+		"build": "cross-env NODE_ENV=production rollup -c -w"
+	},
+	"license": "MIT",
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-strip": "^3.0.4",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^11.1.5",
+		"@types/node": "^20.8.10",
+		"@types/react": "^18.2.35",
+		"@types/react-dom": "^18.2.14",
+		"cross-env": "^7.0.3",
+		"rollup": "^4.3.0",
+		"rollup-plugin-dts": "^6.1.0",
+		"rollup-plugin-node-externals": "^6.1.2"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"dependencies": {
+		"aphrodite": "^2.4.0",
+		"tslib": "^2.6.2"
+	}
+}