Skip to content

Commit aa10fbc

Browse files
einazareeinazare
committed
Add v0.1.0 to master
2 parents 11ad644 + 2b9c6fc commit aa10fbc

32 files changed

+2438
-12
lines changed

‎README.md‎

100644100755
Lines changed: 966 additions & 10 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@tailwindjs/react-tailwindjs",
33
"version": "0.1.0",
44
"description": "Dynamic components for Tailwindcss and ReactJS",
5-
"main": "index.js",
5+
"main": "./src/index.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
88
},
@@ -29,5 +29,12 @@
2929
"bugs": {
3030
"url": "https://github.com/tailwindjs/react-tailwindjs/issues"
3131
},
32-
"homepage": "https://github.com/tailwindjs/react-tailwindjs#readme"
32+
"homepage": "https://github.com/tailwindjs/react-tailwindjs#readme",
33+
"peerDependencies": {
34+
"@popperjs/core": "2.2.x",
35+
"classnames": "2.2.x",
36+
"prop-types": "15.7.x",
37+
"react": "16.13.x",
38+
"tailwindcss": "1.2.x"
39+
}
3340
}

‎src/Alert.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import classnames from "classnames";
4+
5+
const colorSchemes = {
6+
black: "bg-black text-gray-200 border-gray-900",
7+
white: "bg-white text-gray-600 border-gray-100",
8+
gray: "bg-gray-200 text-gray-800 border-gray-300",
9+
red: "bg-red-200 text-red-800 border-red-300",
10+
orange: "bg-orange-200 text-orange-800 border-orange-300",
11+
yellow: "bg-yellow-200 text-yellow-800 border-yellow-300",
12+
green: "bg-green-200 text-green-800 border-green-300",
13+
teal: "bg-teal-200 text-teal-800 border-teal-300",
14+
blue: "bg-blue-200 text-blue-800 border-blue-300",
15+
indigo: "bg-indigo-200 text-indigo-800 border-indigo-300",
16+
purple: "bg-purple-200 text-purple-800 border-purple-300",
17+
pink: "bg-pink-200 text-pink-800 border-pink-300"
18+
};
19+
20+
const Alert = ({ controlled, color, icon, children }) => {
21+
const [show, setShow] = React.useState(true);
22+
const closeAlert = () => {
23+
setShow(false);
24+
};
25+
if (!show) {
26+
return null;
27+
}
28+
return (
29+
<div
30+
className={classnames(
31+
"px-5 py-3 border border-solid rounded relative mb-4",
32+
colorSchemes[color]
33+
)}
34+
>
35+
{icon !== "" ? (
36+
<span className="text-xl inline-block mr-5 align-middle">
37+
<i className={icon}></i>
38+
</span>
39+
) : null}
40+
{icon ? (
41+
<span className="inline-block align-middle mr-8">{children}</span>
42+
) : (
43+
children
44+
)}
45+
{controlled ? null : (
46+
<button
47+
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 outline-none focus:outline-none opacity-50 px-5 py-3 hover:opacity-75 hover:text-black"
48+
onClick={closeAlert}
49+
>
50+
<span>×</span>
51+
</button>
52+
)}
53+
</div>
54+
);
55+
};
56+
57+
Alert.defaultProps = {
58+
controlled: false,
59+
color: "pink",
60+
icon: ""
61+
};
62+
63+
Alert.propTypes = {
64+
// if set to false, then a closing button will be rendered so that the alert can be closed
65+
// if set to true, then the closing button will not be rendered
66+
controlled: PropTypes.bool,
67+
// set the background, border and text color for the alert
68+
color: PropTypes.oneOf([
69+
"black",
70+
"white",
71+
"gray",
72+
"red",
73+
"orange",
74+
"yellow",
75+
"green",
76+
"teal",
77+
"blue",
78+
"indigo",
79+
"purple",
80+
"pink"
81+
]),
82+
// adds a font icon to the left of the message
83+
// for example, if you have included into your project font-awesome free
84+
// you could send "fa fa-heart"
85+
icon: PropTypes.string,
86+
children: PropTypes.node.isRequired
87+
};
88+
89+
export default Alert;

‎src/Button.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import classnames from "classnames";
4+
5+
const colorSchemes = {
6+
black:
7+
"bg-black border border-solid border-gray-900 hover:bg-gray-900 hover:border-gray-800 active:bg-gray-900 active:border-gray-800 text-white",
8+
white:
9+
"bg-white border border-solid border-gray-100 hover:bg-gray-100 hover:border-gray-200 active:bg-gray-100 active:border-gray-200 text-black",
10+
gray:
11+
"bg-gray-600 border border-solid border-gray-600 hover:bg-gray-700 hover:border-gray-800 active:bg-gray-700 active:border-gray-800 text-white",
12+
red:
13+
"bg-red-600 border border-solid border-red-600 hover:bg-red-700 hover:border-red-800 active:bg-red-700 active:border-red-800 text-white",
14+
orange:
15+
"bg-orange-600 border border-solid border-orange-600 hover:bg-orange-700 hover:border-orange-800 active:bg-orange-700 active:border-orange-800 text-white",
16+
yellow:
17+
"bg-yellow-600 border border-solid border-yellow-600 hover:bg-yellow-700 hover:border-yellow-800 active:bg-yellow-700 active:border-yellow-800 text-white",
18+
green:
19+
"bg-green-600 border border-solid border-green-600 hover:bg-green-700 hover:border-green-800 active:bg-green-700 active:border-green-800 text-white",
20+
teal:
21+
"bg-teal-600 border border-solid border-teal-600 hover:bg-teal-700 hover:border-teal-800 active:bg-teal-700 active:border-teal-800 text-white",
22+
blue:
23+
"bg-blue-600 border border-solid border-blue-600 hover:bg-blue-700 hover:border-blue-800 active:bg-blue-700 active:border-blue-800 text-white",
24+
indigo:
25+
"bg-indigo-600 border border-solid border-indigo-600 hover:bg-indigo-700 hover:border-indigo-800 active:bg-indigo-700 active:border-indigo-800 text-white",
26+
purple:
27+
"bg-purple-600 border border-solid border-purple-600 hover:bg-purple-700 hover:border-purple-800 active:bg-purple-700 active:border-purple-800 text-white",
28+
pink:
29+
"bg-pink-600 border border-solid border-pink-600 hover:bg-pink-700 hover:border-pink-800 active:bg-pink-700 active:border-pink-800 text-white"
30+
};
31+
32+
const Button = React.forwardRef(({ color, children, ...rest }, ref) => {
33+
return (
34+
<>
35+
<button
36+
{...rest}
37+
className={classnames(
38+
"rounded font-normal outline-none focus:outline-none align-middle text-base px-3 py-2 leading-tight",
39+
colorSchemes[color]
40+
)}
41+
>
42+
{children}
43+
</button>
44+
</>
45+
);
46+
});
47+
48+
Button.defaultProps = {
49+
color: "pink"
50+
};
51+
52+
Button.propTypes = {
53+
// set the background, border and text color
54+
color: PropTypes.oneOf([
55+
"black",
56+
"white",
57+
"gray",
58+
"red",
59+
"orange",
60+
"yellow",
61+
"green",
62+
"teal",
63+
"blue",
64+
"indigo",
65+
"purple",
66+
"pink"
67+
]),
68+
children: PropTypes.node
69+
};
70+
71+
export default Button;

‎src/Dropdown.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { createPopper } from "@popperjs/core";
4+
5+
const Dropdown = ({ controlled, placement, children }) => {
6+
const [show, setShow] = React.useState(false);
7+
if (controlled) {
8+
return <div className="relative">{children}</div>;
9+
} else {
10+
const toggleDropdown = () => {
11+
if (!show) {
12+
createPopper(togglerRef.current, menuRef.current, {
13+
placement: placement
14+
});
15+
}
16+
setShow(!show);
17+
};
18+
let togglerRef = React.createRef();
19+
let menuRef = React.createRef();
20+
let toggler = React.cloneElement(children[0], {
21+
onClick: () => toggleDropdown(),
22+
ref: togglerRef
23+
});
24+
let menu = React.cloneElement(children[1], { show: show, ref: menuRef });
25+
return (
26+
<>
27+
<div className="relative">
28+
{toggler}
29+
{menu}
30+
</div>
31+
</>
32+
);
33+
}
34+
};
35+
36+
Dropdown.defaultProps = {
37+
placement: "bottom",
38+
controlled: false
39+
};
40+
41+
Dropdown.propTypes = {
42+
// where the Dropdown should be rendered
43+
// NOTE: if there is no place for the dropdown to be rendered
44+
// on the choosen placement, PopperJS will rendered it
45+
// where it has place
46+
placement: PropTypes.oneOf(["top", "bottom", "left", "right"]),
47+
// if you want to controll the open/close of the DropdownMenu yourself
48+
controlled: PropTypes.bool,
49+
// when using the uncontrolled version
50+
// you need to send exactly two children
51+
// - DropdownToggle
52+
// and
53+
// - DropdownMenu
54+
// if you fail to do so, an error will be thrown
55+
children: PropTypes.node.isRequired
56+
};
57+
58+
export default Dropdown;

‎src/DropdownItem.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import classnames from "classnames";
4+
5+
const DropdownItem = ({ divider, children, disabled, ...rest }) => {
6+
if (divider) {
7+
return (
8+
<div className="h-0 my-2 border border-solid border-t-0 border-gray-900 opacity-25" />
9+
);
10+
}
11+
let classes = classnames(
12+
"block w-full py-1 px-6 clear-both font-normal whitespace-no-wrap bg-transparent border-0 hover:opacity-75 cursor-pointer",
13+
{ "text-gray-400 pointer-events-none": disabled }
14+
);
15+
return (
16+
<>
17+
<a {...rest} className={classes}>
18+
{children}
19+
</a>
20+
</>
21+
);
22+
};
23+
24+
DropdownItem.defaultProps = {
25+
divider: false,
26+
disabled: false,
27+
children: null
28+
};
29+
30+
DropdownItem.propTypes = {
31+
// this will make the component to be rendered as a divider line
32+
divider: PropTypes.bool,
33+
// this will make the component to not be clickable
34+
disabled: PropTypes.bool,
35+
children: PropTypes.node
36+
};
37+
38+
export default DropdownItem;

‎src/DropdownMenu.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import classnames from "classnames";
4+
5+
const margins = {
6+
top: "mb-1",
7+
bottom: "mt-1",
8+
left: "mr-1",
9+
right: "ml-1"
10+
};
11+
12+
const colorSchemes = {
13+
black: "bg-black border-gray-900 text-white",
14+
white: "bg-white border-gray-100 text-gray-100",
15+
gray: "bg-gray-500 border-gray-600 text-white",
16+
red: "bg-red-500 border-gray-600 text-white",
17+
orange: "bg-orange-500 border-orange-600 text-white",
18+
yellow: "bg-yellow-500 border-yellow-600 text-white",
19+
green: "bg-green-500 border-green-600 text-white",
20+
teal: "bg-teal-500 border-teal-600 text-white",
21+
blue: "bg-blue-500 border-blue-600 text-white",
22+
indigo: "bg-indigo-500 border-indigo-600 text-white",
23+
purple: "bg-purple-500 border-purple-600 text-white",
24+
pink: "bg-pink-500 border-pink-600 text-white"
25+
};
26+
27+
const DropdownMenu = React.forwardRef(
28+
({ placement, show, children, color }, ref) => {
29+
return (
30+
<>
31+
<div
32+
ref={ref}
33+
className={classnames(
34+
"absolute left-0 z-50 py-2 text-base text-left list-none border border-solid rounded",
35+
colorSchemes[color],
36+
margins[placement],
37+
{ hidden: !show, block: show }
38+
)}
39+
>
40+
{children}
41+
</div>
42+
</>
43+
);
44+
}
45+
);
46+
47+
DropdownMenu.defaultProps = {
48+
show: false,
49+
placement: "top",
50+
color: "white"
51+
};
52+
53+
DropdownMenu.propTypes = {
54+
// make the menu hidden or visible
55+
show: PropTypes.bool,
56+
// where the DropdownMenu should be rendered
57+
// NOTE: if there is no place for the dropdown menu to be rendered
58+
// on the choosen placement, PopperJS will rendered it
59+
// where it has place
60+
placement: PropTypes.oneOf(["top", "bottom", "left", "right"]),
61+
// set the background
62+
color: PropTypes.oneOf([
63+
"black",
64+
"white",
65+
"gray",
66+
"red",
67+
"orange",
68+
"yellow",
69+
"green",
70+
"teal",
71+
"blue",
72+
"indigo",
73+
"purple",
74+
"pink"
75+
])
76+
};
77+
78+
export default DropdownMenu;

0 commit comments

Comments
 (0)