Adds some styling

doc/architecture/API.md

@@ -0,0 +1,25 @@
+Organizations
+
+Contacts
+
+Locations
+
+Phones
+
+Postal Addresses
+
+Programs
+
+Holiday Schedules
+
+Languages
+
+Services
+
+Physical Addresses
+
+Regular Schedules
+
+Taxonomies
+
+Eligibilities

link-admin/.eslintrc.js

@@ -0,0 +1,88 @@
+const OFF = 0
+const WARN = 1
+const ERROR = 2
+
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    browser: true,
+    'jest/globals': true,
+    node: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    experimentalObjectRestSpread: true,
+    jsx: true,
+    sourceType: 'module'
+  },
+  plugins: [
+    'react',
+    'jest',
+    'jsx-a11y',
+    'import'
+  ],
+  settings: {
+    'import/extensions': [
+      '.js',
+      '.jsx',
+      '.css'
+    ],
+    'react': {
+      'version': 'detect'
+    }
+  },
+  rules: {
+    'indent': [ERROR, 2, {
+      'SwitchCase': 1
+    }],
+    'semi': [ERROR, 'never'],
+    'brace-style': [ERROR, '1tbs', {
+      allowSingleLine: true
+    }],
+    'object-curly-spacing': [ERROR, 'always'], 
+    'array-bracket-spacing': [ERROR, 'never'], 
+    'space-before-blocks': [ERROR, 'always'],
+    'class-methods-use-this': OFF,
+    'comma-dangle': [ERROR, 'never'],
+    'jest/no-disabled-tests': ERROR,
+    'jest/no-focused-tests': ERROR,
+    'jest/no-identical-title': ERROR,
+    'jest/prefer-to-have-length': ERROR,
+    'jest/valid-expect': ERROR,
+    'jsx-a11y/anchor-is-valid': [ERROR, {
+      components: ['Link'],
+      specialLink: ['to'],
+      aspects: ['noHref', 'invalidHref', 'preferButton']
+    }],
+    'function-paren-newline': OFF,
+    'import/extensions': [ERROR, 'never', {
+      'css': 'ignorePackages',
+      'svg': 'ignorePackages',
+      'jpg': 'ignorePackages',
+      'png': 'ignorePackages',
+      'gif': 'ignorePackages'
+    }],
+    'no-unused-expressions': [ERROR, {
+      allowShortCircuit: false,
+      allowTernary: false
+    }],
+    'no-unused-vars': WARN,
+    'object-curly-newline': OFF,
+    'quotes': [ERROR, 'single', {
+      allowTemplateLiterals: true
+    }],
+    'react/jsx-curly-spacing': [ERROR, 'always', {
+      spacing: { objectLiterals: 'never' }
+    }],
+    'react/no-redundant-should-component-update': ERROR,
+    'react/no-unused-prop-types': WARN,
+    'react/no-typos': ERROR,
+    'react/prefer-stateless-function': OFF,
+    'eol-last': [ERROR, 'always']
+  }
+}

link-admin/.storybook/main.js

@@ -12,4 +12,4 @@ module.exports = {
 		)
 		return config
 	}
-}
+}

link-admin/.storybook/preview.js

@@ -1,21 +1,13 @@
 import React from 'react'
-import { RendererProvider as FelaProvider } from 'react-fela'
 import { configure, addDecorator } from '@storybook/react'
 
-import { Provider } from 'react-redux'
+import { Provider as ReduxProvider } from 'react-redux'
 import store from 'store'
-import { createRenderer } from 'fela'
 
-import '../src/index.css'
-
-const renderer = createRenderer()
-
-const withFelaProvider = story => (
-  <FelaProvider renderer={renderer}>{ story() }</FelaProvider>
-)
+import StyleProviders from '../src/app/providers/style'
 
 const withReduxProvider = story => (
-  <Provider store={ store }>{ story() }</Provider>
+  <ReduxProvider store={ store }>{ story() }</ReduxProvider>
 )
 
 const req = require.context('../src', true, /\.stories.js$/)
@@ -24,6 +16,13 @@ function loadStories() {
   req.keys().forEach(filename => req(filename))
 }
 
-addDecorator(withFelaProvider)
 addDecorator(withReduxProvider)
 configure(loadStories, module)
+
+export const decorators = [
+  (Story) => (
+    <StyleProviders>
+      <Story />
+    </StyleProviders>
+  )
+]

link-admin/craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [
+        require('tailwindcss'),
+        require('autoprefixer')
+      ]
+    }
+  }
+}

link-admin/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "HOST=blomp.localhost PORT=3001 react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "start": "HOST=blomp.localhost PORT=3001 craco start",
+    "build": "craco build",
+    "test": "craco test --env=jsdom",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
@@ -22,33 +22,41 @@
     "@zendeskgarden/react-tags": "^8.21.2",
     "@zendeskgarden/react-theming": "^8.21.2",
     "@zendeskgarden/react-typography": "^8.21.2",
+    "@zendeskgarden/svg-icons": "^6.27.0",
+    "@zendeskgarden/tailwindcss": "^1.1.0",
     "axios": "^0.20.0",
+    "classnames": "^2.2.6",
     "connected-react-router": "^6.8.0",
-    "fela": "^11.3.1",
     "global": "^4.3.2",
     "link-rest-client": "^1.0.0",
     "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-fela": "^11.3.1",
+    "react-hook-form": "^6.14.0",
     "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
     "redux": "^4.0.5",
     "redux-loop": "^6.0.1",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.1.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   },
   "devDependencies": {
+    "@craco/craco": "^5.9.0",
     "@storybook/addon-actions": "^6.0.21",
     "@storybook/addon-links": "^6.0.21",
     "@storybook/addons": "^6.0.21",
     "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^6.0.21",
+    "autoprefixer": "^9.8.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
+    "eslint-plugin-jest": "^24.1.3",
     "jest": "^26.4.2",
+    "jest-styled-components": "^7.0.3",
+    "postcss": "^7.0.35",
     "prettier": "^2.1.1",
     "react-test-renderer": "^16.13.1",
     "redux-devtools": "^3.6.1"

link-admin/src/app/App.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { Provider as ReduxProvider } from 'react-redux'
+import store from 'store'
+
+import StyleProviders from 'app/providers/style'
+import Router from 'app/router'
+
+const App = () => (
+  <ReduxProvider store={ store }>
+    <StyleProviders>
+      <Router />
+    </StyleProviders>
+  </ReduxProvider>
+)
+
+export default App

link-admin/src/app/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

link-admin/src/app/index.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Something's wrong with the preflight setting for border values. https://github.com/tailwindlabs/tailwindcss/pull/116 */
+*,
+*:before,
+*:after {
+  border-width: 0;
+}
+
+html {
+  /* Unsetting this property set by zendeskgarden base theme */
+  overflow-y: unset;
+}

link-admin/src/app/layout/admin/Footer/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <footer id="footer" className="border-t-default border-grey-300 flex flex-row-reverse p-1 border-solid">
+      <div className="text-grey-700">©2020</div>
+    </footer>
+  )
+}
+
+export default Footer

link-admin/src/app/layout/admin/Sidebar/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import MenuToggleButton from 'components/MenuToggleButton'
+
+const Sidebar = () => {
+  return (
+    <SidebarContainer id="sidebar" className="bg-explore flex flex-col justify-between">
+      <nav>
+        <div className="pt-2 pr-4 text-right">
+          <MenuToggleButton color="white" size="36" />
+        </div>
+      </nav>
+    </SidebarContainer>
+  )
+}
+
+const SidebarContainer = styled.div`
+  z-index: 1000;
+`
+
+export default Sidebar