init

Author: csvenke

.gitignore

@@ -0,0 +1,20 @@
+# dependencies
+/node_modules
+
+# testing
+
+# production
+/dist
+
+# workspace
+.vscode
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 89,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

README.md

@@ -0,0 +1,77 @@
+# React semantics
+
+Are you tired of your react components looking like an unreadable mess?
+Have you often asked yourself: "there must be a better way!"?
+Then look no further, because this library is just what you need!
+
+Multiple studies from reputable anonymous sources have shown that projects using `react-semantics` have 24% higher productivity and increased life satisfaction.
+Does this sound too good to be true?
+Does the rational part of your brain see through this shallow pitch for yet another mediocre react library?
+Reject those thoughts and allow me to demonstrate the might of this library with a simple example below!
+
+### Before
+
+```javascript
+const Menu = ({ showMenuItems }) => (
+  <nav>
+    <a href="/">Home</a>
+    {showMenuItems ? (
+      <ul>
+        {['prices', 'contact', 'about'].map(m => (
+          <li key={m}>
+            <a href={`/${m}`}>{m}</a>
+          </li>
+        ))}
+      </ul>
+    ) : null}
+  </nav>
+);
+```
+
+### After
+
+```javascript
+import { Array, Show } from 'react-semantics';
+
+const Menu = ({ showMenuItems }) => (
+  <nav>
+    <a href="/">Home</a>
+    <Show when={showMenuItems}>
+      <ul>
+        <Array.Map
+          array={['prices', 'contact', 'about']}
+          render={m => (
+            <li key={m}>
+              <a href={`/${m}`}>{m}</a>
+            </li>
+          )}
+        />
+      </ul>
+    </Show>
+  </nav>
+);
+```
+
+## Install
+
+Coming soon...
+
+## Usage
+
+```javascript
+import React from 'react';
+import { Show, Array } from 'react-semantics';
+
+<Show when={5 === 2 + 2}>
+  <div>Will only render in 1984</div>
+</Show>
+
+```
+
+## API
+
+Coming soon...
+
+## License
+
+MIT

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "react-semantics",
+  "version": "0.1.0",
+  "description": "Useful semantic helper components for working with React.",
+  "author": "Christian Svenkerud",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/csvenke/react-semantics.git"
+  },
+  "main": "index.ts",
+  "types": "index.d.ts",
+  "private": false,
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "react-components",
+    "react-utils",
+    "react-library",
+    "components",
+    "semantic"
+  ],
+  "dependencies": {
+    "prop-types": "^15.6.2"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.4.1",
+    "react": "^16.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.4.6",
+    "@types/react-dom": "^16.0.6",
+    "husky": "1.0.0-rc.2",
+    "lint-staged": "^7.2.0",
+    "prettier": "^1.13.7",
+    "react-dom": "^16.4.1",
+    "react": "^16.4.1",
+    "rimraf": "^2.6.2",
+    "tslint-config-prettier": "^1.14.0",
+    "tslint-plugin-prettier": "^1.3.0",
+    "tslint": "^5.11.0",
+    "typescript": "^2.9.2"
+  },
+  "scripts": {
+    "build": "npm run clean:build && npm run lint && npm run prettify && tsc -p ./tsconfig.build.json && cp ./package.json ./dist/lib",
+    "clean:build": "rimraf ./dist/lib",
+    "dist": "cd ./dist/lib && npm publish",
+    "lint": "tslint -c tslint.json './src/**/*'",
+    "lintfix": "tslint -c tslint.json --fix './src/**/*'",
+    "prettify": "prettier -c .prettierrc --write \"src/**/*.@(ts|tsx)\""
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier -c .prettierrc --write",
+      "tslint -c tslint.json --fix",
+      "git add"
+    ]
+  }
+}

src/components/Array/Array.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import ArrayMap from './ArrayMap';
+
+class Array extends React.Component {
+  public static Map = ArrayMap;
+  public render() {
+    return null;
+  }
+}
+
+export default Array;

src/components/Array/ArrayMap.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface IArrayMapProps {
+  array: any[];
+  render?: (value?: any, index?: number, array?: any[]) => React.ReactNode;
+  children?: (value?: any, index?: number, array?: any[]) => React.ReactNode;
+}
+
+const ArrayMap: React.SFC<IArrayMapProps> = ({ array, render, children }) => {
+  const func = children ? children : render;
+
+  if (!func) {
+    return null;
+  }
+
+  return <React.Fragment>{array.map((a, b, c) => func(a, b, c))}</React.Fragment>;
+};
+
+export default ArrayMap;

src/components/Array/index.ts

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

src/components/Show/Show.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { isEmptyChildren } from '../../utils';
+
+export interface IShowProps {
+  when: boolean;
+  render?: () => React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const Show: React.SFC<IShowProps> = ({ when, render, children }) => {
+  if (when) {
+    if (children && !isEmptyChildren(children)) {
+      return React.Children.only(children);
+    }
+
+    if (render) {
+      return <React.Fragment>{render()}</React.Fragment>;
+    }
+  }
+
+  return null;
+};
+
+export default Show;

src/components/Show/index.ts

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

src/components/Switch/Switch.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export interface ISwitchProps {
+  value: string | boolean | number;
+  children: React.ReactNode;
+}
+
+class Switch extends React.Component<ISwitchProps> {
+  public render() {
+    return null;
+  }
+}
+
+export default Switch;