Skip to content

Commit 00b956f

Browse files
author
Gurpreet Singh
committed
toggle component
0 parents  commit 00b956f

14 files changed

+15014
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/node_modules
2+
.DS_Store
3+
dist/

‎.npmignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/src
2+
rollup.config.js
3+
.storybook
4+
node_modules

‎.storybook/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
"stories": [
3+
"../src/**/*.stories.mdx",
4+
"../src/**/*.stories.@(js|jsx|ts|tsx)"
5+
],
6+
"addons": [
7+
"@storybook/addon-links",
8+
"@storybook/addon-essentials"
9+
]
10+
}

‎.storybook/preview.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
controls: {
5+
matchers: {
6+
color: /(background|color)$/i,
7+
date: /Date$/,
8+
},
9+
},
10+
}

‎README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# ReactJS TailwindCSS component library
2+
3+
## Installation
4+
`npm i reactjs-tailwindcss`
5+
6+
## How to use
7+
`import { Toggle } from "reactjs-tailwindcss"`
8+

‎package-lock.json

+14,778
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "react-tailwind-components",
3+
"version": "1.0.0",
4+
"description": "ReactJS components using Tailwind CSS style classes",
5+
"main": "dist/index.js",
6+
"module": "dist/index.es.js",
7+
"private": false,
8+
"publishConfig": {
9+
"access": "public"
10+
},
11+
"scripts": {
12+
"test": "echo \"Error: no test specified\" && exit 1",
13+
"storybook": "start-storybook -p 6006",
14+
"build-storybook": "build-storybook",
15+
"prepublish": "npm run build-lib",
16+
"build-lib": "rm -rf dist && rollup -c"
17+
},
18+
"author": "Gurpreet Singh",
19+
"license": "MIT",
20+
"keywords": [
21+
"reactjs",
22+
"tailwindcss",
23+
"js",
24+
"javascript"
25+
],
26+
"devDependencies": {
27+
"@babel/core": "^7.13.16",
28+
"@babel/preset-react": "^7.13.13",
29+
"@rollup/plugin-node-resolve": "^11.2.1",
30+
"@storybook/addon-actions": "^6.2.9",
31+
"@storybook/addon-essentials": "^6.2.9",
32+
"@storybook/addon-links": "^6.2.9",
33+
"@storybook/react": "^6.2.9",
34+
"babel-loader": "^8.2.2",
35+
"prop-types": "^15.7.2",
36+
"react": "^17.0.2",
37+
"react-dom": "^17.0.2",
38+
"rollup": "^2.45.2",
39+
"rollup-plugin-babel": "^4.4.0",
40+
"rollup-plugin-peer-deps-external": "^2.2.4",
41+
"rollup-plugin-postcss": "^4.0.0",
42+
"rollup-plugin-terser": "^7.0.2"
43+
},
44+
"peerDependencies": {
45+
"react": "^17.0.2",
46+
"prop-types": "^15.7.2",
47+
"react-dom": "^17.0.2"
48+
},
49+
"dependencies": {}
50+
}

‎rollup.config.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import babel from "rollup-plugin-babel";
2+
import resolve from "@rollup/plugin-node-resolve";
3+
import external from "rollup-plugin-peer-deps-external";
4+
import postcss from "rollup-plugin-postcss";
5+
import { terser } from "rollup-plugin-terser";
6+
7+
export default [
8+
{
9+
input: "src/index.js",
10+
output: [
11+
{
12+
file: "dist/index.js",
13+
format: "cjs",
14+
},
15+
{
16+
file: "dist/index.es.js",
17+
format: "es",
18+
exports: "named",
19+
}
20+
],
21+
plugins: [
22+
postcss({
23+
plugins: [],
24+
minimize: true,
25+
}),
26+
babel({
27+
exclude: "node_modules/**",
28+
presets: ["@babel/preset-react"],
29+
}),
30+
external(),
31+
resolve({
32+
extensions: ['.js', '.jsx'],
33+
}),
34+
terser(),
35+
]
36+
}
37+
];

‎src/components/Toggle/Toggle.jsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { useState } from 'react'
2+
import PropTypes from 'prop-types';
3+
import { SIZES } from './constants';
4+
import './index.css';
5+
6+
export const Toggle = (props) => {
7+
const { className, onChange, isChecked, ariaLabel } = props;
8+
const [isCheckedFromState, setIsCheckedFromState] = useState(isChecked);
9+
10+
function onChangeLocal() {
11+
setIsCheckedFromState(!isCheckedFromState);
12+
onChange(e);
13+
}
14+
15+
return <label className={`switch ${className}`} aria-label={ariaLabel}>
16+
<input type="checkbox" checked={isCheckedFromState} onChange={onChangeLocal} />
17+
<span className="rounded-3xl"></span>
18+
</label>
19+
};
20+
21+
Toggle.defaultProps = {
22+
isChecked: false,
23+
onChange: () => { },
24+
ariaLabel: "toggle",
25+
};
26+
27+
Toggle.propType = {
28+
onChange: PropTypes.func,
29+
isChecked: PropTypes.bool,
30+
className: PropTypes.string,
31+
ariaLabel: PropTypes.string,
32+
size: PropTypes.oneOf(SIZES),
33+
};
34+
35+
/* class Toggle extends React.PureComponent {
36+
static defaultProps = {
37+
isChecked: false,
38+
onChange: () => { },
39+
}
40+
41+
static propType = {
42+
onChange: PropTypes.func,
43+
isChecked: PropTypes.bool,
44+
className: PropTypes.string,
45+
ariaLabel: PropTypes.string,
46+
size: PropTypes.oneOf(SIZES),
47+
}
48+
49+
constructor(props) {
50+
super(props);
51+
this.state = {
52+
isChecked: props.isChecked,
53+
}
54+
}
55+
56+
onChange = (e) => {
57+
const { onChange } = this.props;
58+
this.setState({ isChecked: !this.state.isChecked });
59+
onChange(e);
60+
}
61+
62+
render() {
63+
const { className, ariaLabel } = this.props;
64+
const { isChecked } = this.state;
65+
66+
return (
67+
<label className={`switch ${className}`} aria-label={ariaLabel}>
68+
<input type="checkbox" checked={isChecked} onChange={this.onChange} />
69+
<span className="rounded-3xl"></span>
70+
</label>
71+
)
72+
}
73+
} */

‎src/components/Toggle/constants.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const SIZES = ['SMALL', 'MEDIUM', 'LARGE'];

‎src/components/Toggle/index.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.switch {
2+
@apply h-8 md:h-6 w-14 md:w-12 relative inline-block;
3+
}
4+
5+
.switch span {
6+
@apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 transition-all;
7+
}
8+
9+
.switch span:before {
10+
content: "";
11+
@apply absolute h-6 w-6 md:h-4 md:w-4 left-1 bottom-1 bg-white transition-all rounded-50-percent;
12+
}
13+
14+
.switch input {
15+
@apply opacity-0 w-0 h-0;
16+
}
17+
18+
.switch input:checked + span {
19+
@apply bg-green-400;
20+
}
21+
22+
.switch input:focus + span {
23+
@apply shadow-md;
24+
}
25+
26+
.switch input:checked + span:before {
27+
@apply transform translate-x-6;
28+
}

‎src/components/Toggle/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Toggle";

‎src/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./components/Toggle"

‎src/stories/toggle.stories.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
import { storiesOf } from "@storybook/react";
3+
4+
import { Toggle } from "../components/Toggle";
5+
6+
const stories = storiesOf('Components', module);
7+
8+
stories.add('Toggle', () => {
9+
return (<Toggle />);
10+
})

0 commit comments

Comments
 (0)