Merge branch 'feat/dark-mode'

.gitignore

@@ -1,5 +1,3 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
 

.playroom/frame.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import '../src/index.css';
+import '../src/styles.css';
 
 export default (props) => {
     const { children } = props;

.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-docs',
+    '@storybook/addon-viewport/register',
     'storybook-addon-playroom',
   ],
 };

.storybook/preview.js

@@ -1,15 +1,18 @@
 
-import '../src/index.css';
 import { addDecorator, addParameters } from '@storybook/react';
 import { withMemoryRouter } from './decorators/memoryRouter'
 import { withPlayroom } from 'storybook-addon-playroom';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import '../src/styles.css';
 
 addDecorator(withPlayroom);
-
 addDecorator(withMemoryRouter);
 
 addParameters({
   playroom: {
     url: process.env.NODE_ENV === 'production' ? '/playroom/' : undefined,
   },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS
+  }
 });

.stylelintrc.json

@@ -0,0 +1,20 @@
+{
+    "extends": "stylelint-config-recommended",
+    "rules": {
+        "at-rule-no-unknown": [ 
+            true, 
+            {
+                "ignoreAtRules": [
+                    "tailwind",
+                    "apply",
+                    "variants",
+                    "responsive",
+                    "screen"  
+                ]
+            }
+        ],
+        "block-no-empty": null,
+        "unit-whitelist": ["em", "rem", "s", "px"]
+    }
+}
+

package.json

@@ -23,30 +23,39 @@
     "typescript": "^3.8.3"
   },
   "scripts": {
+    "prestart": "yarn run build:styles",
     "start": "BROWSER=none react-scripts start",
-    "now-start": "serve --single ./build",
+    "now-start": "serve -s ./build",
+    "prebuild": "NODE_ENV=production yarn run build:styles",
     "build": "react-scripts build",
+    "build:styles": "postcss src/tailwind.css -o src/styles.css",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "storybook:start": "start-storybook -p 9009 -s public",
     "storybook": "concurrently \"yarn storybook:start\" \"yarn playroom\"",
-    "build-storybook": "build-storybook -s public",
+    "storybook:build": "build-storybook -s public",
     "playroom": "playroom start",
-    "build-playroom": "playroom build"
+    "playroom:build": "playroom build"
   },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^2.1.0",
     "@storybook/addon-actions": "^5.3.17",
     "@storybook/addon-docs": "^5.3.18",
     "@storybook/addon-links": "^5.3.17",
+    "@storybook/addon-viewport": "^5.3.18",
     "@storybook/addons": "^5.3.17",
     "@storybook/preset-create-react-app": "^2.1.1",
     "@storybook/react": "^5.3.17",
-    "babel-loader": "^8.1.0",
+    "autoprefixer": "^9.7.5",
     "concurrently": "^5.1.0",
     "playroom": "^0.21.2",
+    "postcss-cli": "^7.1.0",
     "react-docgen-typescript-loader": "^3.7.2",
     "redux-devtools": "^3.5.0",
     "storybook-addon-playroom": "^1.0.0",
+    "stylelint": "^13.3.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "tailwindcss": "^1.2.0",
     "ts-loader": "^6.2.2"
   },
   "browserslist": {

postcss.config.js

@@ -0,0 +1,19 @@
+const purgecss = require('@fullhuman/postcss-purgecss')({
+
+  content: [
+    './src/**/*.tsx',
+    './public/index.html',
+  ],
+
+  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+})
+
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    ...process.env.NODE_ENV === 'production'
+    ? [purgecss]
+    : []
+  ]
+}

src/components/About/About.tsx

@@ -13,7 +13,7 @@ export const About: React.FC = () => {
         Yet another Hacker News clone
       </p>
       <p className="dark:text-white">
-        Featuring <a className="dark:hover:text-gray-700" href="https://reactjs.org/">React 16</a>, <a className="dark:hover:text-gray-700" href="https://reacttraining.com/react-router/">React Router 4</a>, <a className="dark:hover:text-gray-700" href="https://react-redux.js.org/">React Redux</a>, <a className="dark:hover:text-gray-700" href="https://github.com/gaearon/redux-thunk">Redux Thunk</a>, <a className="dark:hover:text-gray-700" href="https://github.com/cheeaun/node-hnapi/">HN API</a>, CSS variables, unread link highlighting, clickable links in comments, dark mode <a href="https://github.com/ptibbetts/reactHN/pull/2">(#2)</a>, TailwindCSS, Storybook <a href="https://github.com/ptibbetts/reactHN/pull/2/commits/22cd78ccdc9e1bf275913ad1d66898a2bd0e0e0f">(22cd78c)</a>and playroom <a href="https://github.com/ptibbetts/reactHN/pull/2/commits/ae522750b8c2921eb1dfe716078b4695ce3661c6">(ae52275)</a>.
+        Featuring <a className="dark:hover:text-gray-700" href="https://reactjs.org/">React 16</a>, <a className="dark:hover:text-gray-700" href="https://reacttraining.com/react-router/">React Router 4</a>, <a className="dark:hover:text-gray-700" href="https://react-redux.js.org/">React Redux</a>, <a className="dark:hover:text-gray-700" href="https://github.com/gaearon/redux-thunk">Redux Thunk</a>, <a className="dark:hover:text-gray-700" href="https://github.com/cheeaun/node-hnapi/">HN API</a>, unread link highlighting, clickable links in comments, dark mode <a className="dark:hover:text-gray-700" href="https://github.com/ptibbetts/reactHN/pull/2">(#2)</a>, TailwindCSS, Storybook <a className="dark:hover:text-gray-700" href="https://github.com/ptibbetts/reactHN/pull/2/commits/22cd78ccdc9e1bf275913ad1d66898a2bd0e0e0f">(22cd78c)</a>and playroom <a className="dark:hover:text-gray-700" href="https://github.com/ptibbetts/reactHN/pull/2/commits/ae522750b8c2921eb1dfe716078b4695ce3661c6">(ae52275)</a>.
       </p>
       <p className="dark:text-white">
         View the source code on <a className="dark:hover:text-gray-700" href="https://github.com/ptibbetts/reactHN">GitHub</a>

src/components/Collection/Collection.stories.tsx

@@ -24,4 +24,14 @@ export const Default = () => (
         path=":page?"
         page={1}
     />
+)
+
+export const IsFetching = () => (
+    <Collection
+        type='news'
+        collection={collectionData}
+        isFetching={true}
+        path=":page?"
+        page={1}
+    />
 )

src/components/Collection/Collection.tsx

@@ -31,13 +31,19 @@ export const Collection = (props: Props) => {
   const pageNumber: string = page.toString() || '1';
 
   const renderList = (data: StoryModel[], perPage: number) => {
+<<<<<<< HEAD
     let classNames = "collection content";
     if (isFetching) {
       classNames = `${classNames} is-fetching`;
     }
     return (
       <div className={classNames}>
         <ol className="collection__list">
+=======
+    return (
+      <div>
+        <ol>
+>>>>>>> feat/dark-mode
           {renderStories(data, perPage)}
         </ol>
       </div>
@@ -68,10 +74,19 @@ export const Collection = (props: Props) => {
       return (
         <div>
           {renderList(content, content.length)}
+<<<<<<< HEAD
           <Pagination 
             page={pageNumber ? pageNumber : '1'} 
             type={type} 
           />
+=======
+          <div className="my-4">
+            <Pagination 
+              page={pageNumber ? pageNumber : '1'} 
+              type={type}
+            />
+          </div>
+>>>>>>> feat/dark-mode
         </div>
       );
     }
@@ -89,7 +104,11 @@ export const Collection = (props: Props) => {
   }
 
   return (
+<<<<<<< HEAD
     <div className="container">
+=======
+    <div>
+>>>>>>> feat/dark-mode
       {renderContent(collection)}
     </div>
   );

src/components/Comment/Comment.stories.tsx

@@ -39,4 +39,13 @@ export const WithSubComments = () => (
     <Comment
         data={subCommentData}
     />
-)
+)
+
+export const WithCodeBlock = () => (
+    <Comment
+        data={{
+            ...commentData,
+            content: '<p><pre><code>echo "Hello World!!1"</code></pre></p>'
+        }}
+    />
+);

src/components/Comment/Comment.tsx

@@ -33,7 +33,10 @@ export const Comment = (props: ICommentProps): JSX.Element => {
           dangerouslySetInnerHTML={renderMarkup(comment.content)}
         />
       </div>
+<<<<<<< HEAD
       <div dangerouslySetInnerHTML={renderMarkup(comment.content)} />
+=======
+>>>>>>> feat/dark-mode
       {comment.comments.length > 0
         ? <Comments data={comment.comments} />
         : ''

src/components/Item/Item.stories.tsx

@@ -12,7 +12,7 @@ export default {
 
 const itemData = {
     ...defaultStoryData,
-    content: '<p>Isolated components</p>',
+    content: '',
     comments: defaultCommentsData,
     comments_count: defaultCommentsData.length
 }
@@ -35,9 +35,13 @@ const noContentItemData = {
     ...itemData,
     content: ''
 }
-export const NoContent = () => (
+export const WithContent = () => (
     <Item
-        item={noContentItemData}
+        item={{
+            ...itemData,
+            title: 'Show HN: Storybook',
+            content: '<p>Some example content</p>'
+        }}
         isFetching={false}
     />
 )

src/components/Item/Item.tsx

@@ -50,7 +50,11 @@ export const Item = (props: Props) => {
             }
           </div>
           <div
+<<<<<<< HEAD
             className="item__content"
+=======
+            className="mt-3"
+>>>>>>> feat/dark-mode
             dangerouslySetInnerHTML={renderMarkup(data.content)}
           />
         </div>
@@ -73,7 +77,7 @@ export const Item = (props: Props) => {
 
   const renderContents = (data: ItemModel) => {
     return (
-      <div className={isFetching ? 'is-fetching' : ''}>
+      <div className={isFetching ? 'opacity-25' : ''}>
         { renderItem(data) }
         {
           data.comments && data.comments.length > 0
@@ -85,7 +89,7 @@ export const Item = (props: Props) => {
   }
 
   return (
-    <div className="container">
+    <div>
       {renderContents(item)}
     </div>
   );

src/components/Navigation/Navigation.tsx

@@ -25,31 +25,31 @@ const links: { dest: string, label: string }[] = [
   }
 ];
 
-const className = "navigation__link";
-const activeClassName = `${className}--active`;
+const navLinkClass = 'inline-block text-white p-2 hover:text-blue-500 border-transparent border-b-2';
+const navLinkActiveClass = 'border-blue-500 text-blue-500';
 
 export const Navigation: React.FC = () => (
   <nav
-    className="navigation"
+    className="sticky top-0 bg-black-600"
     onClick={() => scrollToTop()}
   >
-    <div className="container">
-      <ul className="navigation__list">
+    <div className="max-w-screen-lg mx-auto">
+      <ul className="flex items-center">
         {links.map((link, index) => (
-          <li className="navigation__listItem" key={index}>
+          <li key={index}>
             <NavLink
               to={link.dest}
-              className={className}
-              activeClassName={activeClassName}
+              className={navLinkClass}
+              activeClassName={navLinkActiveClass}
             >
               {link.label}
             </NavLink>
           </li>
         ))}
-        <li className="navigation__listItem navigation__listItem--about">
+        <li className="ml-auto">
           <NavLink to="/about"
-            className={className}
-            activeClassName={activeClassName}
+            className={navLinkClass}
+            activeClassName={navLinkActiveClass}
           >
             about
           </NavLink>

src/components/User/User.tsx

@@ -58,7 +58,7 @@ export const User = (props: Props) => {
   }
 
   return (
-    <div className="container">
+    <div>
       {props.isFetching 
         ? <Loading /> 
         : renderUser(props.user)

src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './styles.css';
 import * as serviceWorker from './serviceWorker';
 
 import { Provider } from 'react-redux';
@@ -27,18 +27,20 @@ const root: JSX.Element = (
       <div>
         <Navigation />
         <main>
-          <Switch>
-            <Route exact path="/" component={DefaultFeature} />
-            <Route path="/item/:id" component={ItemFeature} />
-            <Route path="/user/:id" component={UserFeature} />
-            <Route path="/news/:page?" render={props => <CollectionFeature {...props} type='news' />} />
-            <Route path="/newest/:page?" render={props => <CollectionFeature {...props} type='newest' />} />
-            <Route path="/show/:page?" render={props => <CollectionFeature {...props} type='show' />} />
-            <Route path="/ask/:page?" render={props => <CollectionFeature {...props} type='ask' />} />
-            <Route path="/jobs/:page?" render={props => <CollectionFeature {...props} type='jobs' />} />
-            <Route exact path="/about" component={About} />
-            <Route component={NoMatch} />
-          </Switch>
+          <div className="max-w-screen-lg my-4 mx-auto">
+            <Switch>
+              <Route exact path="/" component={DefaultFeature} />
+              <Route path="/item/:id" component={ItemFeature} />
+              <Route path="/user/:id" component={UserFeature} />
+              <Route path="/news/:page?" render={props => <CollectionFeature {...props} type='news' />} />
+              <Route path="/newest/:page?" render={props => <CollectionFeature {...props} type='newest' />} />
+              <Route path="/show/:page?" render={props => <CollectionFeature {...props} type='show' />} />
+              <Route path="/ask/:page?" render={props => <CollectionFeature {...props} type='ask' />} />
+              <Route path="/jobs/:page?" render={props => <CollectionFeature {...props} type='jobs' />} />
+              <Route exact path="/about" component={About} />
+              <Route component={NoMatch} />
+            </Switch>
+          </div>
         </main>
       </div>
     </Router>