style card and button with new theme package

Author: natterstefan

.storybook/addons.js

@@ -4,5 +4,5 @@ import '@storybook/addon-knobs/register'
 import '@storybook/addon-viewport/register'
 import 'storybook-addon-jsx/register'
 import '@storybook/addon-storysource/register'
-import '@storybook/addon-backgrounds/register'
+// import '@storybook/addon-backgrounds/register'
 import '@storybook/addon-options/register'

.storybook/config.js

@@ -36,12 +36,13 @@ configureViewport({
   },
 })
 
-addDecorator(
-  withBackgrounds([
-    { name: 'gray', value: '#efefef' },
-    { name: 'white', value: '#fff', default: true },
-  ]),
-)
+// NOTE: does not work when using <GlobalStyles /> in a story
+// addDecorator(
+//   withBackgrounds([
+//     { name: 'gray', value: '#efefef' },
+//     { name: 'white', value: '#fff', default: true },
+//   ]),
+// )
 
 setAddon(JSXAddon)
 

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<!-- register fonts or other assets here -->
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

packages/button/.eslintrc.js packages/base/.eslintrc.js

@@ -1,7 +1,7 @@
 {
-  "name": "@natterstefan/ns-button-js",
+  "name": "@natterstefan/ns-base-js",
   "version": "0.1.0",
-  "description": "Example button component",
+  "description": "Example base components",
   "main": "lib/index.js",
   "module": "src/index.js",
   "files": ["dist", "es", "esm", "lib"],
@@ -29,6 +29,7 @@
   "author": "Stefan Natter",
   "license": "MIT",
   "dependencies": {
+    "lodash": "^4.17.11",
     "react": "^16.8.1",
     "styled-components": "^4.1.3"
   }

packages/button/.gitignore packages/base/.gitignore

@@ -1,13 +1,16 @@
 import React from 'react'
+import { get } from 'lodash'
 import styled from 'styled-components'
 
 export const StyledButton = styled.button`
-  border: 1px solid #000;
+  border: 2px solid ${props => get(props, 'theme.colors.accent') || '#000'};
+  border-radius: 5px;
   padding: 10px;
+  margin-top: 10px;
 
   :hover {
-    border: 2px solid blue;
     cursor: pointer;
+    border-color: ${props => get(props, 'theme.colors.secondary') || '#000'};
     font-weight: 700;
   }
 

packages/button/.stylelintrc packages/base/.stylelintrc

@@ -3,8 +3,10 @@ import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { withKnobs, text } from '@storybook/addon-knobs'
 import { withReadme } from 'storybook-readme'
+import { ThemeProvider } from 'styled-components'
 
-import ButtonReadme from '../README.md'
+import { GlobalStyle, theme } from '../../../../theme/src'
+import ButtonReadme from '../../../README.md'
 
 import Button from '.'
 
@@ -23,10 +25,13 @@ const StoryComponent = () => {
   }
 
   return (
-    <div>
-      <p>You clicked {count} times</p>
-      <Button onClick={onClick}>{buttonText}</Button>
-    </div>
+    <ThemeProvider theme={theme}>
+      <div style={{ margin: '0 auto', width: '300px' }}>
+        <GlobalStyle />
+        <p>You clicked {count} times</p>
+        <Button onClick={onClick}>{buttonText}</Button>
+      </div>
+    </ThemeProvider>
   )
 }
 
@@ -35,6 +40,13 @@ storiesOf('Button', module)
   .addDecorator(withReadme(ButtonReadme))
   .addWithJSX('default', () => {
     const buttonText = text('text', 'Click me')
-    return <Button onClick={onClickHandler}>{buttonText}</Button>
+    return (
+      <ThemeProvider theme={theme}>
+        <div style={{ margin: '0 auto', width: '300px' }}>
+          <GlobalStyle />
+          <Button onClick={onClickHandler}>{buttonText}</Button>
+        </div>
+      </ThemeProvider>
+    )
   })
   .addWithJSX('with click counter (hooks)', () => <StoryComponent />)

packages/button/README.md packages/base/README.md

@@ -0,0 +1 @@
+export * from './button'

packages/button/jest.config.js packages/base/jest.config.js

@@ -0,0 +1 @@
+export * from './components'

packages/button/package.json packages/base/package.json

@@ -4,7 +4,12 @@
   "description": "Example card component",
   "main": "lib/index.js",
   "module": "src/index.js",
-  "files": ["dist", "es", "esm", "lib"],
+  "files": [
+    "dist",
+    "es",
+    "esm",
+    "lib"
+  ],
   "directories": {
     "lib": "src"
   },
@@ -29,7 +34,8 @@
   "author": "Stefan Natter",
   "license": "MIT",
   "dependencies": {
-    "@natterstefan/ns-button-js": "^0.1.0",
+    "@natterstefan/ns-base-js": "^0.1.0",
+    "lodash": "^4.17.11",
     "react": "^16.8.1",
     "styled-components": "^4.1.3"
   }

packages/button/src/index.js packages/base/src/components/button/index.js

@@ -1,16 +1,28 @@
 import React from 'react'
+import { get } from 'lodash'
 import styled from 'styled-components'
-import Button from '@natterstefan/ns-button-js'
+import { Button } from '@natterstefan/ns-base-js'
 
 export const StyledCard = styled.div`
-  border: 1px solid black;
-  padding: 0 10px 15px;
+  border: 5px solid ${props => get(props, 'theme.Card.borderColor') || '#000'};
+  border-radius: 10px;
+  padding: 20px;
   text-align: center;
+
+  h1 {
+    color: ${props => get(props, 'theme.colors.primary') || 'inherit'};
+    margin-bottom: 25px;
+  }
+
+  button {
+    margin-top: 20px;
+  }
 `
 
-export const Card = ({ onClick, buttonText, title }) => (
+export const Card = ({ children, onClick, buttonText, title }) => (
   <StyledCard>
     <h1>{title}</h1>
+    <p>{children}</p>
     <Button onClick={onClick}>{buttonText}</Button>
   </StyledCard>
 )

packages/button/src/index.stories.js packages/base/src/components/button/index.stories.js

@@ -1,9 +1,11 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { withKnobs, text } from '@storybook/addon-knobs'
+import { withKnobs, color, text } from '@storybook/addon-knobs'
 import { withReadme } from 'storybook-readme'
+import { ThemeProvider } from 'styled-components'
 
+import { GlobalStyle, createTheme } from '../../theme/src'
 import CardReadme from '../README.md'
 
 import Card from '.'
@@ -18,7 +20,27 @@ storiesOf('Card', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(CardReadme))
   .addWithJSX('default', () => {
-    const cardTitle = text('cardTitle', 'Card')
-    const buttonText = text('buttonText', 'Click me')
-    return <Card buttonText={buttonText} onClick={onClick} title={cardTitle} />
+    // data
+    const cardTitle = text('Card Title', 'Card', 'Data')
+    const cardText = text(
+      'Card Text',
+      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+    )
+    const buttonText = text('Button Text', 'Click me', 'Data')
+
+    // styling and theme
+    const accent = color('Accent Color', '#9FB1BC', 'Colors')
+    const bodyColor = color('Body Color', '#465775', 'Colors')
+    const theme = createTheme({ colors: { bodyColor, accent } })
+
+    return (
+      <ThemeProvider theme={theme}>
+        <div style={{ margin: '0 auto', width: '300px' }}>
+          <GlobalStyle />
+          <Card buttonText={buttonText} onClick={onClick} title={cardTitle}>
+            {cardText}
+          </Card>
+        </div>
+      </ThemeProvider>
+    )
   })

packages/button/src/index.test.js packages/base/src/components/button/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount, shallow } from 'enzyme'
-import Button from '@natterstefan/ns-button-js'
+import { Button } from '@natterstefan/ns-base-js'
 
 import Card from '.'
 

packages/base/src/components/index.js

@@ -0,0 +1,3 @@
+const rules = require('../../.eslintrc.js')
+
+module.exports = rules

packages/base/src/index.js

@@ -0,0 +1,5 @@
+.DS_Store
+dist
+node_modules
+*.log
+tmp

packages/button/webpack.config.js packages/base/webpack.config.js

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "../../.stylelintrc"
+  ]
+}

packages/card/package.json

@@ -0,0 +1,21 @@
+# Example App Theme
+
+## Usage
+
+```js
+import React from 'react';
+import { ThemeProvider } from 'styled-components
+import { GlobalStyles } from '@natterstefan/ns-theme-js'
+
+import { theme } from './theme'
+
+export const App = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles>
+      <div>Hello World</div>
+    </ThemeProvider>
+  );
+};
+
+```

packages/card/src/index.js

@@ -0,0 +1,13 @@
+const baseConfig = require('../../jest.config.js')
+
+const pack = require('./package')
+
+module.exports = {
+  ...baseConfig,
+  displayName: pack.name,
+  modulePaths: ['<rootDir>'],
+  name: pack.name,
+  rootDir: '../..',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  testMatch: ['/**/*.test.js'],
+}

packages/card/src/index.stories.js

@@ -0,0 +1,41 @@
+{
+  "name": "@natterstefan/ns-theme-js",
+  "version": "0.1.0",
+  "description": "Example theme component",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "dist",
+    "es",
+    "esm",
+    "lib"
+  ],
+  "directories": {
+    "lib": "src"
+  },
+  "private": true,
+  "scripts": {
+    "prebuild": "rimraf dist && rimraf es && rimraf esm && rimraf lib",
+    "build": "yarn build-csj && yarn build-es && yarn build-esm && yarn build-umd",
+    "build-csj": "BABEL_ENV=cjs babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir lib",
+    "build-esm": "BABEL_ENV=esm babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir esm",
+    "build-es": "BABEL_ENV=es babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir es",
+    "build-umd": "webpack --mode=production",
+    "lint": "yarn lint-js && yarn lint-css",
+    "lint-js": "eslint src",
+    "lint-css": "stylelint 'src/**/*.js'",
+    "pretest": "yarn build",
+    "test": "jest"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "http://localhost:4873/"
+  },
+  "author": "Stefan Natter",
+  "license": "MIT",
+  "dependencies": {
+    "lodash": "^4.17.11",
+    "react": "^16.8.1",
+    "styled-components": "^4.1.3"
+  }
+}

packages/card/src/index.test.js

@@ -0,0 +1,2 @@
+export * from './styles'
+export * from './theme'