@layerfi/components 0.1.0 → 0.1.2

package/.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  ignorePatterns: ['build/*', 'dist/*', 'bin/*'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint', 'prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    indent: ['off', 2, { SwitchCase: 1 }],
+    'linebreak-style': ['error', 'unix'],
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    quotes: ['error', 'single'],
+    'react/react-in-jsx-scope': 'off',
+    semi: ['error', 'never'],
+    'object-curly-spacing': ['error', 'always', { objectsInObjects: true }],
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+}

package/.prettierrc.json

@@ -0,0 +1,21 @@
+{
+  "semi": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "importOrder": [
+    "^react.*",
+    "<THIRD_PARTY_MODULES>",
+    "^src",
+    "^\\.\\./', ^\\./"
+  ],
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports"
+  ]
+}

package/README.md

@@ -3,27 +3,34 @@
 This is a Javascript library that provides easy access to Layer Financial's
 acounting offering through React components.
 
+<br />
+
 ## Installation
 
 ```
 npm install --save @layerfi/components
 ```
-   or
+
+or
+
 ```
 yarn install @layerfi/components
 ```
 
+<br />
+
 ## Usage
 
 Nest the components you want to use under the `LayerProvider` component. You
 need to provide the component with a few props, though:
 
-* `appId` Your appId
-* `appSecret` A secret for signing in to Layer
-* `businessId` The ID of the business whose infomation you're showing.
-* `clientId` The ID of the application you're writing
-* `envronment` (Optional, defaults to "production") the Layer environment you're
+- `appId` Your appId
+- `appSecret` A secret for signing in to Layer
+- `businessId` The ID of the business whose infomation you're showing.
+- `clientId` The ID of the application you're writing
+- `envronment` (Optional, defaults to "production") the Layer environment you're
   attempting to access ["staging" or "production"]
+- `theme` (Optional) to customize the look of components
 
 ```
 import { LayerProvider } from "@layerfi/components";
@@ -38,15 +45,22 @@ import { LayerProvider } from "@layerfi/components";
 </LayerProvider>
 ```
 
-## Bank Transactions
+<br />
+<br />
+
+## Components
+
+### Bank Transactions
 
 ```
 import { BankTransactions } from "@layerfi/components";
 …
-<BankTransactions/>
+<BankTransactions />
 ```
 
-## Profit And Loss
+<br />
+
+### Profit And Loss
 
 You can rearrange the order as you like.
 
@@ -61,10 +75,100 @@ import { ProfitAndLoss } from "@layerfi/components";
 </ProfitAndLoss>
 ```
 
-## Balance Sheet
+<br />
+
+### Balance Sheet
 
 ```
 import { BalanceSheet } from "@layerfi/components";
 …
 <BalanceSheet/>
 ```
+
+<br />
+<br />
+
+## Styling
+
+Components can be customized:
+
+- using `theme` attribute of `LayerProvider`,
+- setting CSS variables,
+- overwriting CSS classes.
+
+<br />
+
+### Using `theme` attribute
+
+```ts
+<LayerProvider
+  businessId="..."
+  environment="..."
+  appId="..."
+  clientId="..."
+  appSecret="..."
+  theme={{
+    colors: {
+      // Base colors:
+      dark: { h: '28', s: '26%', l: '11%' },
+      light: { h: '52', s: '100%', l: '55%' },
+    },
+  }}
+>
+  {...}
+</LayerProvider>
+```
+
+The `colors` can be defined in `HSL`, `RGB` or `HEX`:
+
+```
+// HSL:
+colors: {
+  dark: { h: '28', s: '26%', l: '11%' },
+  light: { h: '52', s: '100%', l: '55%' },
+},
+
+// RGB:
+colors: {
+  dark: { r: '36', g: '28', b: '21' },
+  light: { r: '255', g: '224', b: '27' },
+},
+
+// HEX:
+colors: {
+  dark: { hex: '#241C15' },
+  light: { hex: '#FFE01B' },
+},
+```
+
+<br />
+
+### CSS variables
+
+```css
+body .Layer__component {
+  --color-dark-h: 167;
+  --color-dark-s: 38%;
+  --color-dark-l: 15%;
+
+  --text-color-primary: #333;
+}
+```
+
+See [`variables.scss`](https://github.com/Layer-Fi/layer-react/blob/main/src/styles/variables.scss) to find more CSS variables available to customize.
+
+<br />
+
+### CSS classes
+
+For example:
+
+```css
+body .Layer__table-cell-content {
+  background: white;
+}
+
+body .Layer__bank-transaction-row .Layer__table-cell-content {
+  background: gray;
+}
+```