Merge pull request #1 from SoftwareBrothers/beta

Beta

.eslintrc.js

@@ -8,6 +8,14 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
   ],
+  ignorePatterns: [
+    '*/build/**/*',
+    '*.json',
+    '*.txt',
+    'yarn.lock',
+    '*.yaml',
+    '*/public/**/*',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
@@ -39,6 +47,13 @@ module.exports = {
     rules: {
       'react/prop-types': 'off',
       'react/jsx-props-no-spreading': 'off',
+      'import/no-extraneous-dependencies': 'off',
+    },
+  }, {
+    files: ['./src/**/*.spec.ts', '**/*/spec/**/*.ts'],
+    rules: {
+      'no-unused-expressions': 'off',
+      'import/no-extraneous-dependencies': 'off',
     },
   }],
-}
+}

.github/workflows/push.yml

@@ -27,6 +27,8 @@ jobs:
         run: yarn install
       - name: Lint
         run: yarn lint
+      - name: Test
+        run: yarn test
       - name: Build
         run: yarn build
       - name: Release

.gitignore

@@ -161,3 +161,4 @@ build
 .adminbro
 
 example-app/cypress/videos
+example-app/public

README.md

@@ -1,51 +1,18 @@
-# AdminBro Addon template
+# Upload Feature for AdminBro
 
-This an AdminBro addon template repository. You may use it if you want to create
+This is an official [AdminBro](https://github.com/SoftwareBrothers/admin-bro) feature which uploads files to resources.
 
-* AdminBro plugin
-* AdminBro adapter
-* AdminBro feature
+## AdminBro
 
-## What is inside
+AdminBro is an automatic admin interface which can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminBro generates UI which allows you (or other trusted users) to manage content.
 
-It is a typescript repository with:
+Check out the example application with mongo and postgres models here: https://admin-bro-example-app-staging.herokuapp.com/admin
 
-* TypeScript
-* linter with semantic commits (ensures the same style across AdminBro packages)
-* semantic-release
-* github actions
-* example application with cypress
+Or visit [AdminBro](https://github.com/SoftwareBrothers/admin-bro) github page.
 
-What is missing:
-* cypress run in the CI which is an optional. You can take a look at admin-bro/core repository to see how to build it.
+## Usage
 
-## How to use it
-
-In order to start working on an AdminBro feature/plugin/adapter follow this steps:
-
-1. fork this repository
-2. Make sure it uses the latest versions of the packages
-2. rename package in package.json
-3. add env variables github settings:
-- SLACK_WEBHOOK
-- NPM_TOKEN
-4. in the root folder:
-- `yarn install`
--  `yarn link` (registers package in `linked packages` repository)
-5. cd example-app
-- `yarn install`
-- `yarn add NAME_OF_YOUR_PACKAGE`
-- `yarn link NAME_OF_YOUR_PACKAGE`
-6. then in one terminal in the root folder run:
-- `yarn build --watch`
-7. in the second terminal in example app:
-- `yarn start:dev`
-
-You can read more about package linking in [yarn link documentation](https://classic.yarnpkg.com/en/docs/cli/link/)
-
-## Publishing to NPM
-
-package has semantic-release configured, but it don't upload build to NPM because of `private: true` set in package.json. In order to trigger automatic releases simply remove this line.
+To see example usage see the [example-app](https://github.com/SoftwareBrothers/admin-bro-upload/tree/master/example-app) or visit the [@admin-bro/upload section under AdminBro project page](https://adminbro.com/module-@admin-bro_upload.html)
 
 ## License
 
@@ -58,4 +25,4 @@ AdminBro is Copyright © 2020 SoftwareBrothers.co. It is free software, and may
 We’re an open, friendly team that helps clients from all over the world to transform their businesses and create astonishing products.
 
 * We are available for [hire](https://softwarebrothers.co/contact).
-* If you want to work for us - checkout the [career page](https://softwarebrothers.co/career).
+* If you want to work for us - checkout the [career page](https://softwarebrothers.co/career).

example-app/.env-example

@@ -0,0 +1,7 @@
+POSTGRES_PASSWORD=
+POSTGRES_DATABASE=
+POSTGRES_USER=
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_REGION=
+AWS_BUCKET=

example-app/cypress/plugins/index.js

@@ -15,6 +15,7 @@
 /**
  * @type {Cypress.PluginConfig}
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config

example-app/ormconfig.js

@@ -7,7 +7,7 @@ module.exports = {
   type: 'postgres',
   host: process.env.POSTGRES_HOST || 'localhost',
   port: +(process.env.POSTGRES_PORT || 5432),
-  username: 'postgres',
+  username: process.env.POSTGRES_USER || 'postgres',
   password: process.env.POSTGRES_PASSWORD || 'secret',
   database: process.env.POSTGRES_DATABASE || 'postgres',
   entities: [`${__dirname}/./**/*.entity.js`],

example-app/package.json

@@ -19,10 +19,11 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "@admin-bro/express": "^3.0.0-beta.3",
-    "@admin-bro/typeorm": "1.1.1",
-    "@admin-bro/upload-files": "../",
-    "admin-bro": "^3.0.0-beta.12",
+    "@admin-bro/express": "^3.0.0",
+    "@admin-bro/typeorm": "1.2.0",
+    "@admin-bro/upload": "v1.0.0-beta.3",
+    "admin-bro": "^3.2.5",
+    "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express-formidable": "^1.2.0",
     "express-session": "^1.17.1",

example-app/src/admin/resources/custom/custom.resource.ts

@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+/* eslint-disable class-methods-use-this */
+import uploadFeature, { BaseProvider } from '@admin-bro/upload'
+
+import { CreateResourceResult } from '../create-resource-result.type'
+import { Custom } from '../../../custom/custom.entity'
+
+class MyProvider extends BaseProvider {
+  constructor() {
+    super('bucketName')
+  }
+
+  public async upload() {
+    console.log('uploaded')
+    return true
+  }
+
+  public async delete() {
+    console.log('deleted')
+    return true
+  }
+
+  public async path() {
+    return '/fle-url'
+  }
+}
+
+const createPhotoResource = (): CreateResourceResult<typeof Custom> => ({
+  resource: Custom,
+  options: {
+    properties: { file: { isVisible: { list: true, show: true, edit: true, filter: false } } },
+  },
+  features: [uploadFeature({
+    provider: new MyProvider(),
+    properties: { file: 'file', key: 'filePath', bucket: 'bucket' },
+    validation: { mimeTypes: ['image/png'] },
+  })],
+})
+
+export default createPhotoResource

example-app/src/admin/resources/photo/photo.resource.ts

@@ -1,22 +1,17 @@
-import uploadFeature from '@admin-bro/upload-files'
-import { Photo } from '../../../photo/photo.entity'
+import uploadFeature from '@admin-bro/upload'
+
 import { CreateResourceResult } from '../create-resource-result.type'
-import credentials from '../../../credentials'
+import { Photo } from '../../../photo/photo.entity'
 
 const createPhotoResource = (): CreateResourceResult<typeof Photo> => ({
   resource: Photo,
   options: {
     listProperties: ['id', 's3Key', 'bucket', 'path'],
-    actions: {
-      bulkDelete: {
-        isAccessible: (): boolean => false,
-      },
-    },
   },
   features: [uploadFeature({
-    credentials,
-    properties: { file: 'file', key: 's3Key', bucket: 'bucket' },
-    validation: { mimeTypes: ['application/pdf'] },
+    provider: { local: { bucket: 'public' } },
+    properties: { file: 'file', key: 's3Key', bucket: 'bucket', mimeType: 'mime' },
+    validation: { mimeTypes: ['image/png'] },
   })],
 })
 

example-app/src/admin/resources/user/user.resource.ts

@@ -1,4 +1,4 @@
-import uploadFeature from '@admin-bro/upload-files'
+import uploadFeature from '@admin-bro/upload'
 import { CreateResourceResult } from '../create-resource-result.type'
 import credentials from '../../../credentials'
 import { User } from '../../../user/user.entity'
@@ -7,14 +7,9 @@ const createUserResource = (): CreateResourceResult<typeof User> => ({
   resource: User,
   options: {
     listProperties: ['id', 'avatar', 'email', 'test'],
-    actions: {
-      bulkDelete: {
-        isAccessible: (): boolean => false,
-      },
-    },
   },
   features: [uploadFeature({
-    credentials,
+    provider: { aws: credentials },
     properties: {
       filename: 'name',
       file: 'test',

example-app/src/credentials.ts

@@ -1,7 +1,7 @@
 const credentials = {
-  accessKeyId: process.env.AWS_ACCESS_KEY_ID || 'AKIAWDVPBGHHOMJ3EOAL',
-  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || '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',
-  region: process.env.AWS_REGION || 'eu-west-2',
-  bucket: process.env.AWS_BUCKET || 'onserro-media-local-plorenc',
+  accessKeyId: process.env.AWS_ACCESS_KEY_ID as string,
+  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string,
+  region: process.env.AWS_REGION as string,
+  bucket: process.env.AWS_BUCKET as string,
 }
 export default credentials

example-app/src/custom/custom.entity.ts

@@ -0,0 +1,29 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable import/no-cycle */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  BaseEntity,
+  Column,
+  CreateDateColumn,
+  Entity,
+  PrimaryGeneratedColumn,
+  UpdateDateColumn,
+} from 'typeorm'
+
+@Entity({ name: 'custom' })
+export class Custom extends BaseEntity {
+  @PrimaryGeneratedColumn()
+  public id: number;
+
+  @Column({ nullable: true })
+  public filePath: string;
+
+  @Column({ nullable: true })
+  public bucket: string;
+
+  @CreateDateColumn()
+  public createdAt: Date;
+
+  @UpdateDateColumn()
+  public updatedAt: Date;
+}

example-app/src/index.ts

@@ -1,5 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable import/first */
+import path from 'path'
+import { config } from 'dotenv'
+
+config({ path: path.join(__dirname, '../../.env') })
+
 import express from 'express'
 import AdminBro from 'admin-bro'
 import { buildRouter } from '@admin-bro/express'
@@ -8,20 +12,35 @@ import { createConnection } from 'typeorm'
 
 import createPhotoResource from './admin/resources/photo/photo.resource'
 import createUserResource from './admin/resources/user/user.resource'
+import createCustomResource from './admin/resources/custom/custom.resource'
 
 const PORT = 3000
 
 AdminBro.registerAdapter({ Resource, Database })
 const run = async () => {
   await createConnection()
   const app = express()
+  app.use('/public', express.static('public'))
   const admin = new AdminBro({
     resources: [
       createPhotoResource(),
       createUserResource(),
+      createCustomResource(),
     ],
+    locale: {
+      language: 'en',
+      translations: {
+        labels: {
+          Photo: 'photos (Local)',
+          User: 'users (AWS)',
+          Custom: 'custom provider',
+        },
+      },
+    },
   })
 
+  admin.watch()
+
   const router = buildRouter(admin)
 
   app.use(admin.options.rootPath, router)

example-app/src/photo/photo.entity.ts

@@ -27,6 +27,9 @@ export class Photo extends BaseEntity {
   @Column({ nullable: true })
   public path: string;
 
+  @Column({ nullable: true })
+  public mime: string;
+
   @CreateDateColumn({ name: 'created_at' })
   public createdAt: Date;
 

example-app/src/user/user.entity.ts

@@ -37,9 +37,6 @@ export class User extends BaseEntity {
   @Column({ nullable: true })
   public avatar: string;
 
-  @Column({ nullable: true })
-  public path: string;
-
   @CreateDateColumn({ name: 'created_at' })
   public createdAt: Date;