Initial commit from create-react-styleguide v4.0.3

Author: Brian Stone

.eslintignore

@@ -0,0 +1,6 @@
+/coverage
+/es
+/lib
+/styleguide
+jest.config.js
+styleguide.config.js

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:zillow/recommended", "plugin:zillow/jest"]
+}

.gitignore

@@ -0,0 +1,6 @@
+/coverage
+/es
+/lib
+/node_modules
+/styleguide
+npm-debug.log*

CONTRIBUTING.md

@@ -0,0 +1,27 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= v4 must be installed.
+
+## Installation
+
+- Running `npm install` in the component's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `npm start` will run a development server with the style guide components at [http://localhost:6060](http://localhost:6060).
+
+## Running Tests
+
+- `npm test` will run the tests once.
+
+- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+
+- `npm run test:update` will update the test snapshots.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `npm run clean` will delete built resources.

README.md

@@ -0,0 +1,3 @@
+# drywall Style Guide
+
+Describe drywall here.

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    presets: [['zillow', { modules: false }]],
+    env: {
+        cjs: {
+            presets: ['zillow'],
+        },
+        test: {
+            presets: ['zillow'],
+        },
+    },
+};

docs/introduction.md

@@ -0,0 +1,2 @@
+Provide extra Markdown documentation using the [`sections`](https://react-styleguidist.js.org/docs/components.html#sections) configuration from
+[react-styleguidist](https://react-styleguidist.js.org/). You can remove this introduction by deleting the sections key from `styleguide.config.js`.

jest.config.js

@@ -0,0 +1,6 @@
+const { createJestConfig } = require('create-react-styleguide');
+
+module.exports = createJestConfig({
+    /* your own config shallowly merged */
+    setupFilesAfterEnv: ['jest-styled-components'],
+});

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "drywall",
+  "version": "1.0.0",
+  "description": "drywall React component",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "sideEffects": false,
+  "files": [
+    "es",
+    "lib",
+    "src",
+    "docs",
+    "styleguide.config.js"
+  ],
+  "scripts": {
+    "build": "create-react-styleguide script build",
+    "build:watch": "create-react-styleguide script build:watch",
+    "build:styleguide": "create-react-styleguide script build:styleguide",
+    "clean": "create-react-styleguide script clean",
+    "eslint": "create-react-styleguide script eslint",
+    "eslint:fix": "create-react-styleguide script eslint:fix",
+    "start": "create-react-styleguide script start",
+    "test": "create-react-styleguide script test",
+    "test:coverage": "create-react-styleguide script test:coverage",
+    "test:update": "create-react-styleguide script test:update",
+    "test:watch": "create-react-styleguide script test:watch",
+    "prepublishOnly": "create-react-styleguide script prepublishOnly"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run eslint && npm run test"
+    }
+  },
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "styled-components": "^4.2.0"
+  },
+  "peerDependencies": {
+    "react": "16.x"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.10.0",
+    "babel-preset-zillow": "^4.0.3",
+    "create-react-styleguide": "^4.0.3",
+    "eslint-plugin-jest": "^22.4.1",
+    "eslint-plugin-zillow": "^3.1.0",
+    "husky": "^1.3.1",
+    "jest-styled-components": "^6.3.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-test-renderer": "^16.8.6"
+  },
+  "author": "[email protected]",
+  "homepage": "",
+  "license": "MIT",
+  "repository": "",
+  "keywords": [
+    "react-component"
+  ]
+}

src/__tests__/index.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Button, { StyledButton } from '../components/Button/Button';
+import Bootstrap from '../themes';
+
+describe('Themed Styled Button', () => {
+    it('displays a button with requested text', () => {
+        const component = renderer.create(<StyledButton theme={Bootstrap}>Click Me!</StyledButton>);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('displays a secondary button with requested text', () => {
+        const component = renderer.create(
+            <StyledButton theme={Bootstrap} type="secondary">
+                ⊙_ʘ
+            </StyledButton>
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});
+
+describe('Themed Button', () => {
+    it('displays a button with requested text', () => {
+        const component = renderer.create(<Button theme={Bootstrap}>Click Me!</Button>);
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('displays a secondary button with requested text', () => {
+        const component = renderer.create(
+            <Button theme={Bootstrap} type="secondary">
+                ⊙_ʘ
+            </Button>
+        );
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});

src/components/Button/Button.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+export const StyledButton = styled.button`
+    ${props => props.theme.Button};
+`;
+const Button = props => <StyledButton {...props} />;
+
+Button.propTypes = {
+    /** Button content */
+    children: PropTypes.node.isRequired,
+    /** Button type */
+    type: PropTypes.oneOf(['primary', 'secondary']),
+    /** Enable outline buttons */
+    outline: PropTypes.bool,
+};
+
+Button.defaultProps = {
+    type: 'primary',
+    outline: false,
+};
+
+export default Button;

src/components/Button/Button.md

@@ -0,0 +1,15 @@
+Button types:
+
+```jsx
+<div>
+    <Button>Primary</Button> <Button type="secondary">Secondary</Button>
+</div>
+```
+
+Outline buttons:
+
+```jsx
+<div>
+    <Button outline={true}>Primary</Button> <Button outline type="secondary">Secondary</Button>
+</div>
+```

src/components/Button/index.js

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

src/index.js

@@ -0,0 +1 @@
+export { default } from './components/Button';

src/styleguidist/ThemeWrapper.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import theme from '../themes';
+
+export default props => <ThemeProvider {...props} theme={theme} />;

src/themes/Bootstrap/index.js

@@ -0,0 +1,70 @@
+/* eslint-disable no-confusing-arrow */
+
+import { css } from 'styled-components';
+
+const ButtonDefault = css`
+    color: #fff;
+    background-color: #6c747d;
+    border-color: #6c757d;
+
+    &:hover {
+        color: #fff;
+        background-color: #5a6268;
+        border-color: #545b62;
+    }
+`;
+
+const ButtonPrimary = css`
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+
+    &:hover {
+        color: #fff;
+        background-color: #0069d9;
+        border-color: #0062cc;
+    }
+`;
+
+const ButtonDefaultOutline = css`
+    color: #6c757d;
+    background-color: transparent;
+    border-color: #6c757d;
+
+    &:hover {
+        background-color: #6c757d;
+    }
+`;
+
+const ButtonPrimaryOutline = css`
+    color: #007bff;
+    background-color: transparent;
+    border-color: #007bff;
+
+    &:hover {
+        background-color: #007bff;
+    }
+`;
+
+const Button = css`
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+
+    ${props => (!props.outline && props.type === 'primary' ? ButtonPrimary : ButtonDefault)}
+    ${props => (props.outline && props.type === 'primary' ? ButtonPrimaryOutline : '')}
+    ${props => (props.outline && props.type !== 'primary' ? ButtonDefaultOutline : '')}
+`;
+
+export default {
+    Button,
+};

src/themes/index.js

@@ -0,0 +1,2 @@
+// The default export will be the theme used by the styleguide
+export { default } from './Bootstrap';

styleguide.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+const { createStyleguideConfig } = require('create-react-styleguide');
+
+module.exports = createStyleguideConfig({
+    /* your own config shallowly merged */
+    sections: [{
+        name: 'Introduction',
+        content: 'docs/introduction.md'
+    }],
+    styleguideComponents: {
+        Wrapper: path.join(__dirname, 'src/styleguidist/ThemeWrapper'),
+    },
+});