Add toggle features for compnent

.eslintrc.js

@@ -57,6 +57,7 @@ module.exports = {
           'as',
           'border',
           'flexAling',
+          'featureName',
         ],
       },
     ],

json-server/db.json

@@ -116,7 +116,7 @@
         "isArticleRaitingEnebled": true
       },
       "jsonSettings": {
-        "theme": "app_dark_green",
+        "theme": "app_light_theme",
         "isArticlePageWasOpen": true
       },
       "avatar": "https://sun9-60.userapi.com/impg/eqo5sYxr_jyw_yWO9_pKJRMkx8WVwVENfJrecQ/1zVSkEZs5NM.jpg?size=1620x2160&quality=95&sign=73cab6427b2934395f04d96835eb3720&type=album"

package.json

@@ -30,7 +30,8 @@
     "storybook:build": "build-storybook -c ./config/storybook",
     "prepare": "husky install",
     "create:slice": "node ./scripts/createSlice/index.js",
-    "postinstall": "node ./scripts/clear-cache.js"
+    "postinstall": "node ./scripts/clear-cache.js",
+    "remove-feature": "npx ts-node scripts/refactoring/removeFeature.ts"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [

scripts/refactoring/removeFeature.ts

@@ -1,10 +1,13 @@
-import { Node, Project, SyntaxKind } from 'ts-morph'
+import { JsxAttribute, Node, Project, SyntaxKind } from 'ts-morph'
 
 let isNotFoundFeature = true
 
 const removedFeatureName = process.argv[2] // isArticleRaitingEnebled
 const featureState = process.argv[3] // on/off
 
+const toggleFeaturesName = 'toggleFeatures'
+const ToggleFeaturesComponentName = 'ToggleFeaturesComponent'
+
 if (!removedFeatureName) {
   throw new Error('Введите название фитчи')
 }
@@ -26,7 +29,6 @@ if (featureState === 'off' && !isNotFoundFeature) {
 }
 
 const project = new Project({})
-
 project.addSourceFilesAtPaths('src/**/*.ts')
 project.addSourceFilesAtPaths('src/**/*.tsx')
 
@@ -35,7 +37,7 @@ const files = project.getSourceFiles()
 function isToggleFunction(node: Node) {
   let isToggleFunctionFlag = false
   node.forEachChild((childNode) => {
-    if (childNode.isKind(SyntaxKind.Identifier) && childNode.getText() === 'toggleFeatures') {
+    if (childNode.isKind(SyntaxKind.Identifier) && childNode.getText() === toggleFeaturesName) {
       isNotFoundFeature = false
       isToggleFunctionFlag = true
     }
@@ -44,31 +46,86 @@ function isToggleFunction(node: Node) {
   return isToggleFunctionFlag
 }
 
-files.forEach((sourceFile) => {
-  sourceFile.forEachDescendant((node) => {
-    if (node.isKind(SyntaxKind.CallExpression) && isToggleFunction(node)) {
-      const objectOptions = node.getFirstDescendantByKind(SyntaxKind.ObjectLiteralExpression)
+function isToggleComponent(node: Node) {
+  const identifier = node.getFirstDescendantByKind(SyntaxKind.Identifier)
+
+  return identifier?.getText() === ToggleFeaturesComponentName
+}
+
+function replaceToggleFeature(node: Node) {
+  const objectOptions = node.getFirstDescendantByKind(SyntaxKind.ObjectLiteralExpression)
+
+  const nameFunctionProperty = objectOptions?.getProperty('name')
+  const onFunctionProperty = objectOptions?.getProperty('on')
+  const offFunctionProperty = objectOptions?.getProperty('off')
 
-      const nameFunctionProperty = objectOptions?.getProperty('name')
-      const onFunctionProperty = objectOptions?.getProperty('on')
-      const offFunctionProperty = objectOptions?.getProperty('off')
+  const featureName = nameFunctionProperty?.getFirstDescendantByKind(SyntaxKind.StringLiteral)?.getText().slice(1, -1)
+  const onFunction = onFunctionProperty?.getFirstDescendantByKind(SyntaxKind.ArrowFunction)
+  const offFunction = offFunctionProperty?.getFirstDescendantByKind(SyntaxKind.ArrowFunction)
 
-      const featureName = nameFunctionProperty
-        ?.getFirstDescendantByKind(SyntaxKind.StringLiteral)
-        ?.getText()
-        .slice(1, -1)
-      const onFunction = onFunctionProperty?.getFirstDescendantByKind(SyntaxKind.ArrowFunction)
-      const offFunction = offFunctionProperty?.getFirstDescendantByKind(SyntaxKind.ArrowFunction)
+  if (featureName !== removedFeatureName) return
 
-      if (featureName !== removedFeatureName) return
+  if (featureState === 'on') {
+    node.replaceWithText(onFunction?.getBody()?.getText() ?? '')
+  }
+
+  if (featureState === 'off') {
+    node.replaceWithText(offFunction?.getBody()?.getText() ?? '')
+  }
+}
+
+function getAttributeNodeByName(JsxAttributes: JsxAttribute[], name: string) {
+  return JsxAttributes.find((node) => node.getName() === name)
+}
+const getReplacedComponent = (attribute?: JsxAttribute) => {
+  const value = attribute?.getFirstDescendantByKind(SyntaxKind.JsxExpression)?.getExpression()?.getText()
+
+  if (value?.startsWith('(')) {
+    return value.slice(1, -1)
+  }
+
+  return value
+}
 
-      if (featureState === 'on') {
-        node.replaceWithText(onFunction?.getBody()?.getText() ?? '')
-      }
+function replaceToggleFeatureComponent(node: Node) {
+  const attributes = node.getDescendantsOfKind(SyntaxKind.JsxAttribute)
+
+  const onAttribute = getAttributeNodeByName(attributes, 'on')
+  const offAttribute = getAttributeNodeByName(attributes, 'off')
+
+  const featureNameAttribute = getAttributeNodeByName(attributes, 'featureName')
+  const featureName = featureNameAttribute?.getFirstDescendantByKind(SyntaxKind.StringLiteral)?.getText()?.slice(1, -1)
+
+  if (featureName !== removedFeatureName) return
+
+  const offValue = getReplacedComponent(offAttribute)
+  const onValue = getReplacedComponent(onAttribute)
+
+  if (featureState === 'on' && onValue) {
+    node.replaceWithText(onValue)
+  }
+
+  if (featureState === 'off' && offValue) {
+    node.replaceWithText(offValue)
+  }
+}
+
+files.forEach((sourceFile) => {
+  sourceFile.forEachDescendant((node) => {
+    const isToggleFunctionCondition = node.isKind(SyntaxKind.CallExpression) && isToggleFunction(node)
+    const isToggleComponentCondition = node.isKind(SyntaxKind.JsxSelfClosingElement) && isToggleComponent(node)
+
+    if (isToggleFunctionCondition && isToggleComponentCondition) {
+      replaceToggleFeature(node)
+      replaceToggleFeatureComponent(node)
+    }
+
+    if (isToggleFunctionCondition) {
+      replaceToggleFeature(node)
+    }
 
-      if (featureState === 'off') {
-        node.replaceWithText(offFunction?.getBody()?.getText() ?? '')
-      }
+    if (isToggleComponentCondition) {
+      replaceToggleFeatureComponent(node)
     }
   })
 })

src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx

@@ -12,7 +12,7 @@ import { Page } from '@/widgets/Page'
 import { VStack } from '@/shared/ui/Stack'
 import { ArticleRecomendationsList } from '@/features/ArticleRecomendationsList'
 import { ArticleRating } from '@/features/ArticleRating'
-import { toggleFeatures } from '@/shared/lib/features'
+import { ToggleFeaturesComponent, toggleFeatures } from '@/shared/lib/features'
 import { Card } from '@/shared/ui/Card'
 
 interface ArticleDetailsPageProps {
@@ -44,6 +44,7 @@ const ArticleDetailsPage: React.FC<ArticleDetailsPageProps> = (props) => {
         <VStack data-testid="ArticleDetailsPage.ParentBlock" max gap="16">
           <ArticleDetailsPageHeader />
           <ArticleDetails id={id} />
+          <ArticleRating articleId={id} />
           {ArticleRatingCard}
           <ArticleRecomendationsList />
           <ArticleDetailsComments id={id} />

src/shared/lib/features/ToggleFeaturesComponent/ToggleFeaturesComponent.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react'
+
+import { getFeatureFlag } from '../setGetFeatures/setGetFeatures'
+
+import { FeatureFlags } from '@/shared/types/featureFlags'
+
+interface ToggleFeaturesComponentProps {
+  featureName: keyof FeatureFlags
+  on: ReactElement
+  off: ReactElement
+}
+
+export const ToggleFeaturesComponent = (props: ToggleFeaturesComponentProps) => {
+  const { featureName, on, off } = props
+
+  if (getFeatureFlag(featureName)) {
+    return on
+  }
+
+  return off
+}

src/shared/lib/features/index.ts

@@ -1,3 +1,5 @@
+export { ToggleFeaturesComponent } from './ToggleFeaturesComponent/ToggleFeaturesComponent'
+
 export { toggleFeatures } from './toggleFeatures/toggleFeatures'
 
 export { getFeatureFlag, setFeatureFlags } from './setGetFeatures/setGetFeatures'