✨ Add useAckeeFelaPackage config option

Author: horaklukas

README.md

@@ -6,31 +6,34 @@ A set of usefull snippets and commands we use at Ackee for web apps development.
 
 ## Features
 
-* Commands for project scaffolding (typescript supported)
-* React/Fela snippets
+- Commands for project scaffolding (typescript supported)
+- React/Fela snippets
 
 ## Contents
 
- - [Commands](#commands)
- - [Settings](#settings)
- - [Snippets](#snippets)
+- [Commands](#commands)
+- [Settings](#settings)
+- [Snippets](#snippets)
 
 ## Commands
 
 ### Create component
-*  `Component.(j|t)sx` - React stateless component
-* `index.(j|t)s` - index file to export the React component
+
+- `Component.(j|t)sx` - React stateless component
+- `index.(j|t)s` - index file to export the React component
 
 ### Create Fela component
 
 Creates a folder with following structure:
-*  `Component.(j|t)sx` - React stateless component with `styles` prop
-*  `Component.styles.(j|t)s` - fela rules
-* `index.(j|t)s` - index file to export the React component and wrap it with `connectFela`
+
+- `Component.(j|t)sx` - React stateless component with `styles` prop
+- `Component.styles.(j|t)s` - fela rules
+- `index.(j|t)s` - index file to export the React component and wrap it with `connectFela`
 
 #### Usage
+
 1. Right click to a folder where you want to create a component
-2. Select *"Ackee: create component"*
+2. Select _"Ackee: create component"_
 3. Type a name and press enter
 
 ![Create component example](images/create_component_example.jpg)
@@ -41,31 +44,30 @@ Creates a folder with following structure:
 
 These settings can be changed in VS Code settings under `ackeeFrontend` namespace.
 
-| Name | Default value | Description |
-|---|---|---|
-| `moduleDependencies` | `true`  | If enabled it uses named imports from dependencies.js file of the module. |
-| `felaHooks`  |  `false` | If enabled, scaffolded components will use enhanced fela hooks instead of connect HOC.  |
-|  `typescript` |  `false` |  If enabled, scaffolded components will be in TypeScript. |
-| `typescriptFelaTheme`  |  `false` | If enabled, scaffolded styles of components will have `TRuleWithTheme` instead of simple `TRule` (`typescript` option must be enabled).  |
-| `typescriptFelaExtendProp`  |  `false` | If enabled, scaffolded interfaces of components will have `extend` prop.  (`typescript` option must enabled).  |
-| `includeReactImport`  |  `false` | If enabled, a scaffolded component will include import of React. |
+| Name                       | Default value | Description                                                                                                                             |
+| -------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `moduleDependencies`       | `true`        | If enabled it uses named imports from dependencies.js file of the module.                                                               |
+| `felaHooks`                | `false`       | If enabled, scaffolded components will use enhanced fela hooks instead of connect HOC.                                                  |
+| `typescript`               | `false`       | If enabled, scaffolded components will be in TypeScript.                                                                                |
+| `typescriptFelaTheme`      | `false`       | If enabled, scaffolded styles of components will have `TRuleWithTheme` instead of simple `TRule` (`typescript` option must be enabled). |
+| `typescriptFelaExtendProp` | `false`       | If enabled, scaffolded interfaces of components will have `extend` prop. (`typescript` option must enabled).                            |
+| `includeReactImport`       | `false`       | If enabled, a scaffolded component will include import of React.                                                                        |
+| `useAckeeFelaPackage`      | `false`       | If enabled, useFelaEnhanced and related types will be imported from @ackee/fela package.                                                |
 
 ## Snippets
 
 Supported languages:
 
-* JavaScript (.js)
-* JavaScript React (.jsx)
-
-| Trigger  | Content  |
-|---|---|
-| `frd→`  | Fela rule (default export)  |
-| `frdt→`  | Fela rule with theme (default export)  |
-| `fr→`  | Fela rule (named export)  |
-| `frt→`  | Fela rule with theme (named export)  |
-| `imrd→`  | Import React and PropTypes from dependencies  |
-| `ed→` |  Export for component indexes  |
-| `rfc→`  | React stateless component with FelaComponent  |
-| `rfcc→`  | React stateless component with connectFela HOC  |
-
-
+- JavaScript (.js)
+- JavaScript React (.jsx)
+
+| Trigger | Content                                        |
+| ------- | ---------------------------------------------- |
+| `frd→`  | Fela rule (default export)                     |
+| `frdt→` | Fela rule with theme (default export)          |
+| `fr→`   | Fela rule (named export)                       |
+| `frt→`  | Fela rule with theme (named export)            |
+| `imrd→` | Import React and PropTypes from dependencies   |
+| `ed→`   | Export for component indexes                   |
+| `rfc→`  | React stateless component with FelaComponent   |
+| `rfcc→` | React stateless component with connectFela HOC |

package.json

@@ -91,6 +91,11 @@
           "type": "boolean",
           "default": false,
           "description": "If enabled, a scaffolded component will include import of React."
+        },
+        "ackeeFrontend.useAckeeFelaPackage": {
+          "type": "boolean",
+          "default": false,
+          "description": "If enabled, useFelaEnhanced and related types will be imported from @ackee/fela package."
         }
       }
     }

src/template/component.ts

@@ -41,7 +41,9 @@ export const felaHookComponent = (name: string, config: Configuration) => `${
     ? `import {${config.includeReactImport ? " React," : ""} PropTypes, useFelaEnhanced } from '../../dependencies';`
     : `${
         config.includeReactImport ? `import React from 'react';\n` : ""
-      }import PropTypes from 'prop-types';\nimport { useFelaEnhanced } from 'hooks'`
+      }import PropTypes from 'prop-types';\nimport { useFelaEnhanced } from '${
+        config.useAckeeFelaPackage ? "@ackee/fela" : "hooks"
+      }'`
 }
 
 import * as felaRules from './${name}.rules';

src/template/componentsTypescript.ts

@@ -9,13 +9,13 @@ const getExtendProp = (config: Configuration) =>
       }`
     : "";
 
-const getExtendPropImport = ({ typescriptFelaExtendProp, typescriptFelaTheme }: Configuration) => {
+const getExtendPropImport = ({ typescriptFelaExtendProp, typescriptFelaTheme, useAckeeFelaPackage }: Configuration) => {
   if (!typescriptFelaExtendProp) {
     return "";
   }
 
   return typescriptFelaTheme
-    ? `import type { RulesExtend } from 'styles/theme';`
+    ? `import type { RulesExtend } from '${useAckeeFelaPackage ? "@ackee/fela" : "styles/theme"}';`
     : "import type { TRule } from 'fela';";
 };
 
@@ -47,7 +47,9 @@ export const ${name} = ({ styles }: ${name}Props) => {
 export const felaHookComponent = (name: string, config: Configuration) => `${
   config.moduleDependencies
     ? `import {${config.includeReactImport ? " React," : ""} useFelaEnhanced } from '../../dependencies';`
-    : `${config.includeReactImport ? `import React from 'react';\n` : ""}import { useFelaEnhanced } from 'hooks';`
+    : `${config.includeReactImport ? `import React from 'react';\n` : ""}import { useFelaEnhanced } from '${
+        config.useAckeeFelaPackage ? "@ackee/fela" : "hooks"
+      }';`
 }
 ${getExtendPropImport(config)}
 
@@ -70,7 +72,9 @@ export const ${name} = ({ ${config.typescriptFelaExtendProp ? "extend" : ""} }:
 
 export const styles = (config: Configuration) => `${
   config.typescriptFelaTheme
-    ? `import type { TRuleWithTheme } from '${config.moduleDependencies ? "../../dependencies" : "styles/theme"}';\n`
+    ? `import type { TRuleWithTheme } from '${
+        config.moduleDependencies ? "../../dependencies" : config.useAckeeFelaPackage ? "@ackee/fela" : "styles/theme"
+      }';\n`
     : `import type { TRule } from '${config.moduleDependencies ? "../../dependencies" : "fela"}';`
 }
 

src/types.ts

@@ -7,4 +7,5 @@ export interface Configuration extends vscode.WorkspaceConfiguration {
   typescriptFelaTheme: boolean;
   typescriptFelaExtendProp: boolean;
   includeReactImport: boolean;
+  useAckeeFelaPackage: boolean;
 }