├── .babelrc
├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── examples
│ └── App.js
├── index.css
├── index.js
└── lib
│ ├── components
│ ├── TextInput.css
│ ├── TextInput.js
│ ├── TextInput.test.js
│ └── __snapshots__
│ │ └── TextInput.test.js.snap
│ └── index.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-app"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
23 | /dist
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # simple-component-library
2 |
3 | A library of React components created using [`create-component-lib`](https://www.npmjs.com/package/create-component-lib).
4 |
5 | Learn more: https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b
6 |
7 | ## Installation
8 |
9 | ```
10 | npm install simple-component-library
11 | ```
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "simple-component-library",
3 | "version": "0.1.0",
4 | "main": "dist/index.js",
5 | "module": "dist/index.js",
6 | "files": ["dist"],
7 | "devDependencies": {
8 | "babel-cli": "^6.26.0",
9 | "react": "^16.3.2",
10 | "react-dom": "^16.3.2",
11 | "react-scripts": "1.1.4",
12 | "react-test-renderer": "^16.3.2"
13 | },
14 | "peerDependencies": {
15 | "react": "^16.3.2",
16 | "react-dom": "^16.3.2"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build-examples": "react-scripts build",
21 | "test": "react-scripts test --env=jsdom",
22 | "eject": "react-scripts eject",
23 | "build":
24 | "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aakashns/simple-component-library/0c8e465879c55c4e3be10434db6f97ee332c5fed/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 | React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/examples/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { TextInput } from "../lib";
3 |
4 | const App = () => (
5 |
6 |
Hello React
7 |
8 |
9 | );
10 |
11 | export default App;
12 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./examples/App";
4 |
5 | import "./index.css";
6 |
7 | ReactDOM.render(, document.getElementById("root"));
8 |
--------------------------------------------------------------------------------
/src/lib/components/TextInput.css:
--------------------------------------------------------------------------------
1 | .simple-form-group {
2 | margin-bottom: 1rem;
3 | }
4 |
5 | .simple-text-label {
6 | display: block;
7 | color: red;
8 | }
9 |
10 | .simple-text-input {
11 | display: inline-block;
12 | margin-bottom: 0.5rem;
13 | font-size: 16px;
14 | font-weight: 400;
15 | color: rgb(33, 37, 41);
16 | }
17 |
18 | .simple-form-text {
19 | color: #6c757d !important;
20 | display: block;
21 | margin-top: 0.25rem;
22 | font-size: 80%;
23 | font-weight: 400;
24 | }
25 |
--------------------------------------------------------------------------------
/src/lib/components/TextInput.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./TextInput.css";
3 |
4 | const TextInput = ({
5 | type = "text",
6 | label,
7 | placeholder,
8 | value,
9 | onChange,
10 | helpText
11 | }) => (
12 |
13 | {label && }
14 | onChange && onChange(e.target.value)}
19 | placeholder={placeholder}
20 | />
21 | {helpText && {helpText}}
22 |
23 | );
24 |
25 | export default TextInput;
26 |
--------------------------------------------------------------------------------
/src/lib/components/TextInput.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import TextInput from "./TextInput";
3 | import renderer from "react-test-renderer";
4 |
5 | describe("TextInput", () => {
6 | it("renders properly", () => {
7 | const tree = renderer
8 | .create()
9 | .toJSON();
10 | expect(tree).toMatchSnapshot();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/lib/components/__snapshots__/TextInput.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`TextInput renders properly 1`] = `
4 |
7 |
12 |
19 |
20 | `;
21 |
--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | import TextInput from "./components/TextInput";
2 |
3 | export { TextInput };
4 |
--------------------------------------------------------------------------------