app-studio 0.1.18 → 0.1.19

package/codemod/CHANGELOG.md

@@ -0,0 +1,32 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.1](https://github.com/reflexjs/reflexjs/compare/@reflexjs/codemod@0.1.0...@reflexjs/codemod@0.1.1) (2021-03-11)
+
+
+### Bug Fixes
+
+* update repository name for all packages ([fdc25b0](https://github.com/reflexjs/reflexjs/commit/fdc25b02d1008749a36e2c9027a701fc6a2c0168))
+
+
+
+
+
+# 0.1.0 (2020-12-03)
+
+
+### Bug Fixes
+
+* **www:** update to reflexjs ([251deb5](https://github.com/reflexjs/reflex/commit/251deb5fd6df6c7155eedb401ea1eccc0f9a5ef2))
+* update example-video ([449fe8d](https://github.com/reflexjs/reflex/commit/449fe8da1d9b188d66ca1a07d2ec8a457593f2fc))
+* **codemod:** check for name ([6166b20](https://github.com/reflexjs/reflex/commit/6166b20eee9b0b18f14fb9d05a87d71b39ffca93))
+* **codemod:** update bin ([2e569b3](https://github.com/reflexjs/reflex/commit/2e569b3a41991070b091e19f83dd273671dc4663))
+* **codemod:** update tests ([2b9086e](https://github.com/reflexjs/reflex/commit/2b9086e7cd6783898e0fd5c3eef84fbeb72d906e))
+
+
+### Features
+
+* **codemod:** change Container to variant container ([33563d0](https://github.com/reflexjs/reflex/commit/33563d06087a2c7762a6b26027ef9677acc579c3))
+* add codemods ([9292862](https://github.com/reflexjs/reflex/commit/9292862ceb82d81efc1bd64cbcace240d7a40550))

package/codemod/README.md

@@ -0,0 +1,52 @@
+# @app-studio/codemod
+
+Provides Codemod transformations to help with code upgrade and migration.
+
+## Usage
+
+```sh
+npx @app-studio/codemod <transform> <path
+```
+
+- `transform` - name of the transform
+- `path` - files or directory to transform
+- `--dry` - Performs a dry-run, no code changes
+- `--print` - Prints the changes for comparison
+
+## Codemods
+
+### `to-reflexjs`
+
+This Codemod migrates your `@app-studio/components` code to `app-studio` code.
+
+```js
+npx @reflexjs/codemod to-app-studio
+```
+
+Example:
+
+```jsx
+import { Div, H1, Button } from "@app-studio/components"
+
+export default function () {
+  return (
+    <Div d="flex">
+      <H1>This is a heading</H1>
+      <Button variant="primary lg">Button</Button>
+    </Div>
+  )
+}
+```
+
+Will be transformed to:
+
+```jsx
+export default function () {
+  return (
+    <div display="flex">
+      <h1 variant="heading.h1">This is a heading</h1>
+      <button variant="button.primary.lg">Button</button>
+    </div>
+  )
+}
+```

package/codemod/bin/app-studio-codemod.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/react-codemod.js
+
+require('./cli').run();

package/codemod/bin/cli.js

@@ -0,0 +1,200 @@
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/cli.js
+// @next/codemod optional-name-of-transform optional/path/to/src [...options]
+
+const globby = require('globby');
+const inquirer = require('inquirer');
+const meow = require('meow');
+const path = require('path');
+const execa = require('execa');
+const chalk = require('chalk');
+const isGitClean = require('is-git-clean');
+
+const transformerDirectory = path.join(__dirname, '../', 'transforms');
+const jscodeshiftExecutable = require.resolve('.bin/jscodeshift');
+
+function checkGitStatus(force) {
+  let clean = false;
+  let errorMessage = 'Unable to determine if git directory is clean';
+  try {
+    clean = isGitClean.sync(process.cwd());
+    errorMessage = 'Git directory is not clean';
+  } catch (err) {
+    if (err && err.stderr && err.stderr.indexOf('Not a git repository') >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    if (force) {
+      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
+    } else {
+      console.log('Thank you for using app-studio/codemod!');
+      console.log(
+        chalk.yellow(
+          '\nBut before we continue, please stash or commit your git changes.'
+        )
+      );
+      console.log(
+        '\nYou may use the --force flag to override this safety check.'
+      );
+      process.exit(1);
+    }
+  }
+}
+
+function runTransform({ files, flags, transformer }) {
+  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
+
+  let args = [];
+
+  const { dry, print } = flags;
+
+  if (dry) {
+    args.push('--dry');
+  }
+  if (print) {
+    args.push('--print');
+  }
+
+  args.push('--verbose=0');
+
+  args.push('--ignore-pattern=**/node_modules/**');
+  args.push('--ignore-pattern=**/.next/**');
+  args.push('--ignore-pattern=**/.cache/**');
+
+  args.push('--extensions=tsx,ts,jsx,js,mdx');
+  args.push('--parser=tsx');
+
+  args = args.concat(['--transform', transformerPath]);
+
+  if (flags.jscodeshift) {
+    args = args.concat(flags.jscodeshift);
+  }
+
+  args = args.concat(files);
+
+  console.log(`Executing command: jscodeshift ${args.join(' ')}`);
+
+  const result = execa.sync(jscodeshiftExecutable, args, {
+    stdio: 'inherit',
+    stripEof: false,
+  });
+
+  if (result.error) {
+    throw result.error;
+  }
+}
+
+const TRANSFORMER_INQUIRER_CHOICES = [
+  {
+    name: 'to-app-studio: Transforms styled-components to App Studio View components.',
+    value: 'to-app-studio', // This should correspond to a file named "to-app-studio.js" in your "transforms" directory
+  },
+];
+
+function expandFilePathsIfNeeded(filesBeforeExpansion) {
+  const shouldExpandFiles = filesBeforeExpansion.some((file) =>
+    file.includes('*')
+  );
+  return shouldExpandFiles
+    ? globby.sync(filesBeforeExpansion)
+    : filesBeforeExpansion;
+}
+
+function run() {
+  const cli = meow(
+    {
+      description: 'Codemods for updating Reflexjs apps.',
+      help: `
+    Usage
+      $ npx app-studio/codemod <transform> <path> <...options>
+        transform    Name of the transform
+        path         Files or directory to transform. Can be a glob like pages/**.js
+    Options
+      --force            Bypass Git safety checks and forcibly run codemods
+      --dry              Dry run (no changes are made to files)
+      --print            Print transformed files to your terminal
+      --jscodeshift  (Advanced) Pass options directly to jscodeshift
+    `,
+    },
+    {
+      boolean: ['force', 'dry', 'print', 'help'],
+      string: ['_'],
+      alias: {
+        h: 'help',
+      },
+    }
+  );
+
+  if (!cli.flags.dry) {
+    checkGitStatus(cli.flags.force);
+  }
+
+  if (
+    cli.input[0] &&
+    !TRANSFORMER_INQUIRER_CHOICES.find((x) => x.value === cli.input[0])
+  ) {
+    console.error('Invalid transform choice, pick one of:');
+    console.error(
+      TRANSFORMER_INQUIRER_CHOICES.map((x) => '- ' + x.value).join('\n')
+    );
+    process.exit(1);
+  }
+
+  inquirer
+    .prompt([
+      {
+        type: 'input',
+        name: 'files',
+        message: 'On which files or directory should the codemods be applied?',
+        when: !cli.input[1],
+        default: '.',
+        // validate: () =>
+        filter: (files) => files.trim(),
+      },
+      {
+        type: 'list',
+        name: 'transformer',
+        message: 'Which transform would you like to apply?',
+        when: !cli.input[0],
+        pageSize: TRANSFORMER_INQUIRER_CHOICES.length,
+        choices: TRANSFORMER_INQUIRER_CHOICES,
+      },
+    ])
+    .then((answers) => {
+      const { files, transformer } = answers;
+
+      const filesBeforeExpansion = cli.input[1] || files;
+      const filesExpanded = expandFilePathsIfNeeded([filesBeforeExpansion]);
+
+      const selectedTransformer = cli.input[0] || transformer;
+
+      if (!filesExpanded.length) {
+        console.log(
+          `No files found matching ${filesBeforeExpansion.join(' ')}`
+        );
+        return null;
+      }
+
+      return runTransform({
+        files: filesExpanded,
+        flags: cli.flags,
+        transformer: selectedTransformer,
+      });
+    });
+}
+
+module.exports = {
+  run: run,
+  runTransform: runTransform,
+  checkGitStatus: checkGitStatus,
+  jscodeshiftExecutable: jscodeshiftExecutable,
+  transformerDirectory: transformerDirectory,
+};

package/codemod/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@app-studio/codemod",
+  "description": "Migration helpers for app-studio",
+  "version": "0.1.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "watch": "yarn tsc -d -w -p tsconfig.json",
+    "prepare": "yarn tsc -d -p tsconfig.json",
+    "test": "jest"
+  },
+  "files": [
+    "transforms/*.js",
+    "bin/*.js"
+  ],
+  "bin": "./bin/app-studio-codemod.js",
+  "bugs": {
+    "url": "https://github.com/rize-network/app-studio/issues"
+  },
+  "homepage": "https://github.com/rize-network/app-studio",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rize-network/app-studio.git",
+    "directory": "packages/codemod"
+  },
+  "dependencies": {
+    "chalk": "^4.1.0",
+    "execa": "^4.1.0",
+    "globby": "^11.0.1",
+    "gray-matter": "^4.0.2",
+    "inquirer": "^7.3.3",
+    "is-git-clean": "^1.1.0",
+    "jscodeshift": "^0.11.0",
+    "meow": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/jscodeshift": "^0.7.1"
+  }
+}

package/codemod/transforms/__tests__/to-app-studio.test.js

@@ -0,0 +1,268 @@
+const j = require('jscodeshift');
+const {
+  transformStyledToView,
+  transformHTMLToView,
+  transformStyleToProps,
+  COMPONENT_MAPPING,
+} = require('./to-app-studio.test'); // Assurez-vous d'exporter la fonction
+
+describe('transformHTMLToComponent', () => {
+  it('should transform html tag to component', () => {
+    const sourceCode = `<button className="some-class"></button>`;
+    const root = j(sourceCode);
+    transformHTMLToView(root, j);
+
+    expect(root.toSource()).toEqual(`
+    import {${COMPONENT_MAPPING['button']}} from '@app-studio/components'
+
+    <${COMPONENT_MAPPING['button']} className="some-class"></${COMPONENT_MAPPING['button']}>`);
+  });
+  // Ajoutez d'autres cas de test pour d'autres transformations si nécessaire
+});
+
+describe('transformHTMLToView', () => {
+  it('should transform html tag to View with as attribute', () => {
+    const sourceCode = `<button className="some-class"></button>`;
+    const root = j(sourceCode);
+    transformHTMLToView(root, j);
+
+    expect(root.toSource()).toEqual(
+      '<View as="button" className="some-class"></View>'
+    );
+  });
+
+  it('should transform div to Div', () => {
+    const sourceCode = `<div className="some-class"></div>`;
+    const root = j(sourceCode);
+    transformHTMLToView(root, j);
+
+    expect(root.toSource()).toEqual('<Div className="some-class"></View>');
+  });
+
+  it('should transform div to Div', () => {
+    const sourceCode = `<div className="some-class"></div>`;
+    const root = j(sourceCode);
+    transformHTMLToView(root, j);
+
+    expect(root.toSource()).toEqual('<Div className="some-class"></View>');
+  });
+
+  it('should transform span to View with as attribute', () => {
+    const sourceCode = `<span></span>`;
+    const root = j(sourceCode);
+    transformHTMLToView(root, j);
+
+    expect(root.toSource()).toEqual('<View as="span"></View>');
+  });
+
+  // Ajoutez d'autres cas de test pour d'autres transformations si nécessaire
+});
+
+describe('transformStyledToView', () => {
+  it('should transform css to props', () => {
+    const input = `
+    import styled from 'styled-component'
+
+    const Container = styled.div\`
+        background-color: blue;
+        color: white:
+    \`;
+
+    const App = () => <Container />;
+    `;
+
+    const root = j(input);
+    transformStyledToView(root, j);
+
+    expect(root.toSource()).toEqual(`
+    import {View} from 'app-studio'
+
+    const Container = (props) => <View 
+            backgroundColor='blue' 
+            color="white" {...props} />;
+
+    const App = () => <Container />;
+    `);
+  });
+
+  it('should handle multiple events', () => {
+    const input = `
+    import styled from 'styled-component'
+    
+    const Container = styled.div\`
+        :hover {
+          color: red;
+        }
+        :active {
+          color: blue;
+        }
+    \`;
+
+    const App = () => <Container  />;
+    `;
+
+    const root = j(input);
+    transformStyledToView(root, j);
+
+    expect(root.toSource()).toEqual(`
+    import {View} from 'app-studio'
+
+    const Container = (props) => <View 
+        on={{
+            hover: {color: 'red'}, 
+            active: {color: 'blue'}
+            }} 
+        {...props} />;
+
+
+    const App = () => <Container  />;
+    `);
+  });
+
+  it('should transform media query to props with breakpoints', () => {
+    const breakpoints = {
+      xs: 0,
+      sm: 340,
+      md: 560,
+      lg: 1080,
+      xl: 1300,
+    };
+
+    const input = `
+    import styled from 'styled-component'
+
+    const Container = styled.div\`
+        background-color: blue;
+        @media (min-width: ${breakpoints.md.toString()} px) {
+            background-color: red;
+        }
+    \`;
+
+    const App = () => <Container />;
+    `;
+
+    const root = j(input);
+    transformStyledToView(root, j);
+
+    expect(root.toSource()).toEqual(`
+    import {View} from 'app-studio'
+
+    const Container = (props) => <View 
+            backgroundColor='blue'
+            media={{
+                md : 'red'
+            }}
+            {...props} />;
+
+    const App = () => <Container />;
+    `);
+  });
+
+  it('should transform media query to props with breakpoints', () => {
+    const breakpoints = {
+      xs: 0,
+      sm: 340,
+      md: 560,
+      lg: 1080,
+      xl: 1300,
+    };
+
+    const devices = {
+      mobile: ['xs', 'sm'],
+      tablet: ['md', 'lg'],
+      desktop: ['lg', 'xl'],
+    };
+
+    const input = `
+    import styled from 'styled-component'
+
+    const Container = styled.div\`
+        background-color: blue;
+        @media (min-width: ${Math.min(
+          devices.mobile.map((v) => breakpoints[v])
+        ).toString()}px and ${Math.max(
+      devices.mobile.map((v) => breakpoints[v])
+    ).toString()}px) {
+            background-color: red;
+        }
+    \`;
+
+    const App = () => <Container />;
+    `;
+
+    const root = j(input);
+    transformStyledToView(root, j);
+
+    expect(root.toSource()).toEqual(`
+    import {View} from 'app-studio'
+
+    const Container = (props) => <View 
+            backgroundColor='blue'
+            media={{
+                mobile : {
+                  backgroundColor:'red'
+                }
+            }}
+            {...props} />;
+
+    const App = () => <Container />;
+    `);
+  });
+});
+
+describe('transformStyleToProps', () => {
+  it('should transform style (text) to props', () => {
+    const input = `
+    const Container = (props) => <div 
+        style="background-color: blue;color: white;"
+        {...props} 
+        />;
+
+    const App = () => <Container />;
+    `;
+
+    const root = j(input);
+    transformStyleToProps(root, j);
+
+    expect(root.toSource()).toEqual(`
+    import {View} from 'app-studio'
+
+    const Container = (props) => <View 
+            backgroundColor='blue' 
+            color='white' 
+            {...props} 
+            />;
+
+    const App = () => <Container />;
+    `);
+  });
+
+  it('should transform  style (object) to props', () => {
+    const input = `
+    const Container = (props) => <div 
+        style={{
+            backgroundColor: 'blue',
+            color: 'white'
+        }} 
+        {...props} 
+        />;
+
+    const App = () => <Container />;
+    `;
+
+    const root = j(input);
+    transformStyleToProps(root, j);
+
+    expect(root.toSource()).toEqual(`
+    import {View} from 'app-studio'
+
+    const Container = (props) => <View 
+            backgroundColor='blue' 
+            color="white" 
+            {...props} 
+            />;
+
+    const App = () => <Container />;
+    `);
+  });
+});

package/codemod/transforms/to-app-studio.ts

@@ -0,0 +1,486 @@
+import fs from 'fs';
+import path from 'path';
+import postcss from 'postcss';
+
+export const APP_MAPPING = {
+  a: 'A',
+  img: 'Image',
+  div: 'View',
+  span: 'Span',
+};
+
+export const COMPONENT_MAPPING = {
+  textarea: 'Textarea',
+  svg: 'Svg',
+  select: 'Select',
+  picture: 'Image',
+  option: 'Option',
+  map: 'Map',
+  input: 'Input',
+  iframe: 'Iframe',
+  form: 'Form',
+  button: 'Button',
+  audio: 'Audio',
+  video: 'Video',
+  img: 'Image',
+};
+
+// eslint-disable-next-line prefer-const
+let IMPORT_APP = {};
+// eslint-disable-next-line prefer-const
+let IMPORT_COMPONENT = {};
+
+function isHtmlElement(elementName) {
+  return elementName[0] === elementName[0].toLowerCase();
+}
+
+export function transformStyledComponentsToView(root, j, imports) {
+  root
+    .find(j.TaggedTemplateExpression)
+    .filter((path) => {
+      return (
+        path.node.tag.type === 'Identifier' && path.node.tag.name === 'styled'
+      );
+    })
+    .forEach((path) => {
+      const quasis = path.node.quasi.quasis;
+
+      // eslint-disable-next-line prefer-const
+      let mediaQueries = {};
+      let rootStyles = {};
+
+      quasis.forEach((quasi) => {
+        const cssString = quasi.value.raw;
+
+        // Extrait les media queries
+        const mediaRegex =
+          /@media \(?(min-width:\s*(\d+)px)?\s*(and)?\s*(max-width:\s*(\d+)px)?\)?\s*\{([\s\S]*?)\}/g;
+        let match;
+
+        while ((match = mediaRegex.exec(cssString)) !== null) {
+          const minWidth = match[2] ? parseInt(match[2], 10) : null;
+          const maxWidth = match[5] ? parseInt(match[5], 10) : null;
+          const stylesString = match[6].trim();
+
+          let breakpointName = 'xs';
+
+          if (minWidth) {
+            breakpointName += `min[${minWidth}]`;
+          }
+          if (maxWidth) {
+            breakpointName += `max[${maxWidth}]`;
+          }
+
+          const styles = stylesString
+            .split(';')
+            .filter(Boolean)
+            .reduce((acc, style) => {
+              const [key, value] = style.split(':').map((str) => str.trim());
+              if (key && value) {
+                acc[key] = value;
+              }
+              return acc;
+            }, {});
+
+          mediaQueries[breakpointName] = styles;
+        }
+
+        // Extrait les styles root
+        const rootRegex = /([^@{}]+)\{([\s\S]*?)\}/g;
+        while ((match = rootRegex.exec(cssString)) !== null) {
+          const stylesString = match[2].trim();
+          const styles = stylesString
+            .split(';')
+            .filter(Boolean)
+            .reduce((acc, style) => {
+              const [key, value] = style.split(':').map((str) => str.trim());
+              if (key && value) {
+                acc[key] = value;
+              }
+              return acc;
+            }, {});
+          rootStyles = { ...rootStyles, ...styles };
+        }
+      });
+
+      let attributes = [j.jsxSpreadAttribute(j.identifier('props'))];
+
+      if (Object.keys(mediaQueries).length > 0) {
+        const mediaProp = j.jsxAttribute(
+          j.jsxIdentifier('media')
+          // ... (le même code pour créer la prop 'media') ...
+        );
+        attributes.push(mediaProp);
+      }
+
+      if (Object.keys(rootStyles).length > 0) {
+        const rootStyleProps = Object.keys(rootStyles).map((key) =>
+          j.jsxAttribute(j.jsxIdentifier(key), j.literal(rootStyles[key]))
+        );
+        attributes = [...attributes, ...rootStyleProps];
+      }
+
+      path.node.init = j.arrowFunctionExpression(
+        [j.identifier('props')],
+        j.jsxElement(
+          j.jsxOpeningElement(j.jsxIdentifier('View'), attributes),
+          j.jsxClosingElement(j.jsxIdentifier('View')),
+          []
+        )
+      );
+      imports['View'] = true;
+    });
+}
+
+export function transformStyleToProps(root, j, imports) {
+  root.find(j.JSXAttribute, { name: { name: 'style' } }).forEach((path) => {
+    const attrValue = path.node.value;
+    // eslint-disable-next-line prefer-const
+    let newAttributes = [];
+
+    if (attrValue.type === 'Literal') {
+      const inlineStyles = attrValue.value.split(';').filter(Boolean);
+      inlineStyles.forEach((inlineStyle) => {
+        const [key, value] = inlineStyle.split(':').map((s) => s.trim());
+        const propName = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        newAttributes.push(
+          j.jsxAttribute(j.jsxIdentifier(propName), j.stringLiteral(value))
+        );
+      });
+    } else if (
+      attrValue.type === 'JSXExpressionContainer' &&
+      attrValue.expression.type === 'ObjectExpression'
+    ) {
+      attrValue.expression.properties.forEach((prop) => {
+        const propName = prop.key.name;
+        const propValue = prop.value;
+        newAttributes.push(
+          j.jsxAttribute(j.jsxIdentifier(propName), propValue)
+        );
+      });
+    }
+
+    const openingElement = path.parentPath.node;
+    openingElement.attributes = openingElement.attributes.filter(
+      (attr) => attr.name.name !== 'style'
+    );
+    openingElement.attributes.push(...newAttributes);
+    imports['View'] = true;
+  });
+}
+
+// Fonction pour ajouter une déclaration d'importation si elle n'est pas déjà présente
+export function addImportStatement(root, j, importNames = [], fromModule) {
+  const existingImport = root.find(j.ImportDeclaration, {
+    source: { value: fromModule },
+  });
+  if (existingImport.size() === 0) {
+    const importStatement = j.importDeclaration(
+      importNames.map((importName) =>
+        j.importSpecifier(j.identifier(importName))
+      ),
+      j.literal(fromModule)
+    );
+    root.find(j.Program).get('body', 0).insertBefore(importStatement);
+  }
+}
+
+export function removeCSSImport(root, j) {
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (/\.css$/.test(path.node.source.value)) {
+      j(path).remove();
+    }
+  });
+}
+
+export function getCSSImportPath(root, j) {
+  let cssPath = null;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const isCSSImport = /\.css$/.test(path.node.source.value);
+    if (isCSSImport) {
+      cssPath = path.node.source.value;
+    }
+  });
+
+  return cssPath;
+}
+
+function addReactImportIfMissing(root, j) {
+  const hasReactImport = root
+    .find(j.ImportDeclaration, {
+      source: { value: 'react' },
+    })
+    .size();
+
+  if (!hasReactImport) {
+    const importStatement = j.importDeclaration([], j.literal('react'));
+    root.find(j.Program).get('body', 0).insertBefore(importStatement);
+  }
+}
+
+function getTemplateLiteralValue(node) {
+  if (node.type !== 'TemplateLiteral') {
+    throw new Error('Node is not a TemplateLiteral');
+  }
+
+  let value = '';
+
+  // Loop through each quasi and expression, and append them to the value string
+  for (let i = 0; i < node.quasis.length; i++) {
+    value += node.quasis[i].value.raw; // Get the raw value of the quasi
+
+    // If there's an expression after this quasi, append its value too
+    if (i < node.expressions.length) {
+      value += node.expressions[i].name; // Assuming the expression is an Identifier for simplicity
+    }
+  }
+
+  return value;
+}
+
+function transformCode(root, j, cssClassStyles, assetsDir, assetsUrl) {
+  // eslint-disable-next-line prefer-const
+  let MapComponent = {};
+
+  function processPropValue(prop, value, className) {
+    const numericalMatch = value.match(/^\d+(\.\d+)?(px)?$/);
+
+    if (numericalMatch) {
+      const number = numericalMatch[0].replace('px', ''); // Remove 'px' if present
+      if (number.indexOf('.') >= 0) {
+        return parseFloat(number);
+      } else {
+        return parseInt(number, 10);
+      }
+    } else if (prop === 'boxShadow') {
+      const matches = /(\d+)px (\d+)px (\d+)px rgba\(([\d,]+),([\d.]+)\)/.exec(
+        value
+      );
+      if (matches) {
+        const [, height, width, radius, shadowColor, opacity] = matches;
+        return {
+          shadow: {
+            shadowOffset: { height: parseInt(height), width: parseInt(width) },
+            shadowRadius: parseInt(radius),
+            shadowColor: shadowColor.split(',').map(Number),
+            shadowOpacity: parseFloat(opacity),
+          },
+        };
+      }
+    } else if (value.indexOf('url(') >= 0) {
+      const parts = value.split('url("data:image/');
+      if (parts.length > 1) {
+        const [imageTypeAndEncoding, dataWithQuotes] = parts[1].split(',');
+        const imageType = imageTypeAndEncoding.split(';')[0].split('+')[0];
+        const data = dataWithQuotes.slice(0, -2); // Remove trailing '")'
+
+        const filename = `${className}.${imageType}`;
+
+        // Decoding the base64 content and writing as binary
+        if (value.indexOf('base64') > 0) {
+          const buffer = Buffer.from(data, 'base64');
+          fs.writeFileSync(path.join(assetsDir, filename), buffer);
+        } else {
+          fs.writeFileSync(
+            path.join(assetsDir, filename),
+            decodeURIComponent(data)
+          );
+        }
+
+        return `url("${assetsUrl}/${filename}")`;
+      }
+    } else {
+      return value;
+    }
+  }
+
+  root.find(j.JSXElement).forEach((path) => {
+    const tagName = path.node.openingElement.name.name;
+    // eslint-disable-next-line prefer-const
+    let mappedComponent = COMPONENT_MAPPING[tagName] || APP_MAPPING[tagName];
+
+    if (APP_MAPPING[tagName]) IMPORT_APP[mappedComponent] = true;
+    else if (COMPONENT_MAPPING[tagName])
+      IMPORT_COMPONENT[mappedComponent] = true;
+    else IMPORT_APP['View'] = true;
+
+    const attributes = path.node.openingElement.attributes;
+    let classNames = [];
+
+    for (const attribute of attributes) {
+      if (
+        attribute.type === 'JSXAttribute' &&
+        attribute.name.name === 'className'
+      ) {
+        const classNameString = getTemplateLiteralValue(
+          attribute.value.expression
+        );
+        classNames = classNameString.split(' '); // Assuming class names are separated by spaces
+      }
+    }
+
+    const combinedProps = classNames.reduce((acc, className) => {
+      const props = cssClassStyles[className];
+      if (props) {
+        const processedProps = {};
+
+        for (const [key, value] of Object.entries(props)) {
+          processedProps[key] = processPropValue(key, value, className);
+        }
+
+        return { ...acc, ...processedProps };
+      }
+      return acc;
+    }, {});
+
+    const combinedComponentName = classNames
+      .map((className) =>
+        className
+          .match(/\w+/g)
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join('')
+      )
+      .join('');
+
+    MapComponent[combinedComponentName] = mappedComponent || 'View';
+
+    path.node.openingElement.attributes =
+      path.node.openingElement.attributes.filter(
+        (attribute) => attribute.name.name !== 'className'
+      );
+
+    if (combinedComponentName) {
+      path.node.openingElement.name.name = combinedComponentName;
+      if (path.node.closingElement)
+        path.node.closingElement.name.name = combinedComponentName;
+    } else if (tagName && isHtmlElement(tagName)) {
+      const asAttribute = j.jsxAttribute(
+        j.jsxIdentifier('as'),
+        j.stringLiteral(tagName)
+      );
+      path.node.openingElement.name.name = 'View';
+      if (path.node.closingElement) path.node.closingElement.name.name = 'View';
+      path.node.openingElement.attributes.push(asAttribute);
+    }
+
+    const props = Object.entries(combinedProps).map(([key, value]) => {
+      let valueLiteral;
+      if (typeof value === 'object' && value !== null) {
+        valueLiteral = j.objectExpression(
+          Object.entries(value).map(([innerKey, innerValue]) =>
+            j.objectProperty(j.identifier(innerKey), j.literal(innerValue))
+          )
+        );
+      } else if (typeof value === 'string') {
+        valueLiteral = j.literal(value);
+      } else {
+        valueLiteral = j.numericLiteral(value);
+      }
+
+      return j.jsxAttribute(
+        j.jsxIdentifier(key),
+        j.jsxExpressionContainer(valueLiteral)
+      );
+    });
+
+    const newComponent = j.variableDeclaration('const', [
+      j.variableDeclarator(
+        j.identifier(combinedComponentName),
+        j.arrowFunctionExpression(
+          [j.identifier('props')],
+          j.jsxElement(
+            j.jsxOpeningElement(
+              j.jsxIdentifier(MapComponent[combinedComponentName] || 'View'),
+              [...props, j.jsxSpreadAttribute(j.identifier('props'))],
+              true
+            ),
+            null
+          )
+        )
+      ),
+    ]);
+
+    root.find(j.Program).forEach((path) => {
+      path.node.body.push(newComponent);
+    });
+  });
+}
+
+export default function transform(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const assetsDir = options.assetsDir || 'src/assets';
+  const assetsUrl = options.assetsUrl || '/assets';
+
+  // eslint-disable-next-line prefer-const
+  let imports = {};
+
+  const cssImportPath = getCSSImportPath(root, j);
+  let cssContent = '';
+
+  if (cssImportPath) {
+    const cssFilePath = path.resolve(path.dirname(file.path), cssImportPath);
+    try {
+      cssContent = fs.readFileSync(cssFilePath, 'utf8');
+    } catch (err) {
+      console.error('Failed to read CSS file:', err);
+    }
+  }
+
+  const cssClassStyles = {};
+
+  // Parse CSS content using postcss
+  const rootCss = postcss.parse(cssContent);
+
+  rootCss.walkRules((rule) => {
+    if (rule.selector.startsWith('.')) {
+      const className = rule.selector.slice(1);
+      const styles = {};
+
+      rule.walkDecls((decl) => {
+        const key = decl.prop;
+        const value = decl.value;
+        const propName = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        styles[propName] = value;
+      });
+
+      cssClassStyles[className] = styles;
+    }
+  });
+
+  transformCode(root, j, cssClassStyles, assetsDir, assetsUrl);
+  addReactImportIfMissing(root, j);
+
+  transformStyledComponentsToView(root, j, imports);
+  transformStyleToProps(root, j, imports);
+
+  removeCSSImport(root, j);
+
+  const componentImport = Object.keys(IMPORT_COMPONENT);
+
+  const appImport = Object.keys(IMPORT_APP);
+
+  for (const componentName in imports) {
+    if (
+      APP_MAPPING[componentName] !== undefined &&
+      !appImport.includes(componentName)
+    ) {
+      appImport.push(componentName);
+    } else if (
+      COMPONENT_MAPPING[componentName] !== undefined &&
+      !componentImport.includes(componentName)
+    ) {
+      componentImport.push(componentName);
+    }
+  }
+
+  if (componentImport.length > 0)
+    addImportStatement(root, j, componentImport, '@app-studio/web');
+
+  if (appImport.length > 0)
+    addImportStatement(root, j, appImport, 'app-studio');
+
+  return root.toSource();
+}

package/codemod/transforms/utils.ts

@@ -0,0 +1,267 @@
+export const APP_MAPPING = {
+  A: 'a',
+  Image: 'img',
+  Div: 'div',
+  Span: 'span',
+  View: 'div',
+};
+
+export const COMPONENT_MAPPING = {
+  Textarea: 'textarea',
+  Svg: 'svg',
+  Select: 'select',
+  Image: 'picture',
+  Option: 'option',
+  Map: 'map',
+  Input: 'input',
+  Iframe: 'iframe',
+  Form: 'form',
+  Button: 'button',
+  Audio: 'audio',
+  Video: 'video',
+};
+
+export function transformHTMLToView(root, j, imports) {
+  root.find(j.JSXElement).forEach((path) => {
+    const tagName = path.node.openingElement.name.name;
+    const mappedComponent = COMPONENT_MAPPING[tagName];
+
+    if (mappedComponent) {
+      path.node.openingElement.name.name = mappedComponent;
+      if (path.node.closingElement)
+        path.node.closingElement.name.name = mappedComponent;
+    } else {
+      console.log({ tagName });
+      if (tagName && isHtmlElement(tagName)) {
+        const asAttribute = j.jsxAttribute(
+          j.jsxIdentifier('as'),
+          j.stringLiteral(tagName)
+        );
+        console.log({ name: path.node.openingElement.name.name });
+
+        path.node.openingElement.name.name = 'View';
+        if (path.node.closingElement)
+          path.node.closingElement.name.name = 'View';
+        path.node.openingElement.attributes.push(asAttribute);
+      }
+    }
+  });
+}
+
+function isHtmlElement(elementName) {
+  return elementName[0] === elementName[0].toLowerCase();
+}
+
+export function transformStyledComponentsToView(root, j, imports) {
+  root
+    .find(j.TaggedTemplateExpression)
+    .filter((path) => {
+      return (
+        path.node.tag.type === 'Identifier' && path.node.tag.name === 'styled'
+      );
+    })
+    .forEach((path) => {
+      const quasis = path.node.quasi.quasis;
+
+      // eslint-disable-next-line prefer-const
+      let mediaQueries = {};
+      let rootStyles = {};
+
+      quasis.forEach((quasi, index) => {
+        const cssString = quasi.value.raw;
+
+        // Extrait les media queries
+        const mediaRegex =
+          /@media \(?(min-width:\s*(\d+)px)?\s*(and)?\s*(max-width:\s*(\d+)px)?\)?\s*\{([\s\S]*?)\}/g;
+        let match;
+
+        while ((match = mediaRegex.exec(cssString)) !== null) {
+          const minWidth = match[2] ? parseInt(match[2], 10) : null;
+          const maxWidth = match[5] ? parseInt(match[5], 10) : null;
+          const stylesString = match[6].trim();
+
+          let breakpointName = 'xs';
+
+          if (minWidth) {
+            breakpointName += `min[${minWidth}]`;
+          }
+          if (maxWidth) {
+            breakpointName += `max[${maxWidth}]`;
+          }
+
+          const styles = stylesString
+            .split(';')
+            .filter(Boolean)
+            .reduce((acc, style) => {
+              const [key, value] = style.split(':').map((str) => str.trim());
+              if (key && value) {
+                acc[key] = value;
+              }
+              return acc;
+            }, {});
+
+          mediaQueries[breakpointName] = styles;
+        }
+
+        // Extrait les styles root
+        const rootRegex = /([^@{}]+)\{([\s\S]*?)\}/g;
+        while ((match = rootRegex.exec(cssString)) !== null) {
+          const stylesString = match[2].trim();
+          const styles = stylesString
+            .split(';')
+            .filter(Boolean)
+            .reduce((acc, style) => {
+              const [key, value] = style.split(':').map((str) => str.trim());
+              if (key && value) {
+                acc[key] = value;
+              }
+              return acc;
+            }, {});
+          rootStyles = { ...rootStyles, ...styles };
+        }
+      });
+
+      let attributes = [j.jsxSpreadAttribute(j.identifier('props'))];
+
+      if (Object.keys(mediaQueries).length > 0) {
+        const mediaProp = j.jsxAttribute(
+          j.jsxIdentifier('media')
+          // ... (le même code pour créer la prop 'media') ...
+        );
+        attributes.push(mediaProp);
+      }
+
+      if (Object.keys(rootStyles).length > 0) {
+        const rootStyleProps = Object.keys(rootStyles).map((key) =>
+          j.jsxAttribute(j.jsxIdentifier(key), j.literal(rootStyles[key]))
+        );
+        attributes = [...attributes, ...rootStyleProps];
+      }
+
+      path.node.init = j.arrowFunctionExpression(
+        [j.identifier('props')],
+        j.jsxElement(
+          j.jsxOpeningElement(j.jsxIdentifier('View'), attributes),
+          j.jsxClosingElement(j.jsxIdentifier('View')),
+          []
+        )
+      );
+      imports['View'] = true;
+    });
+}
+
+export function transformStyleToProps(root, j, imports) {
+  root.find(j.JSXAttribute, { name: { name: 'style' } }).forEach((path) => {
+    const attrValue = path.node.value;
+    // eslint-disable-next-line prefer-const
+    let newAttributes = [];
+
+    if (attrValue.type === 'Literal') {
+      const inlineStyles = attrValue.value.split(';').filter(Boolean);
+      inlineStyles.forEach((inlineStyle) => {
+        const [key, value] = inlineStyle.split(':').map((s) => s.trim());
+        const propName = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        newAttributes.push(
+          j.jsxAttribute(j.jsxIdentifier(propName), j.stringLiteral(value))
+        );
+      });
+    } else if (
+      attrValue.type === 'JSXExpressionContainer' &&
+      attrValue.expression.type === 'ObjectExpression'
+    ) {
+      attrValue.expression.properties.forEach((prop) => {
+        const propName = prop.key.name;
+        const propValue = prop.value;
+        newAttributes.push(
+          j.jsxAttribute(j.jsxIdentifier(propName), propValue)
+        );
+      });
+    }
+
+    const openingElement = path.parentPath.node;
+    openingElement.attributes = openingElement.attributes.filter(
+      (attr) => attr.name.name !== 'style'
+    );
+    openingElement.attributes.push(...newAttributes);
+    imports['View'] = true;
+  });
+}
+
+// Fonction pour ajouter une déclaration d'importation si elle n'est pas déjà présente
+export function addImportStatement(root, j, importName, fromModule) {
+  const existingImport = root.find(j.ImportDeclaration, {
+    source: { value: fromModule },
+  });
+  if (existingImport.size() === 0) {
+    const importStatement = j.importDeclaration(
+      [j.importSpecifier(j.identifier(importName))],
+      j.literal(fromModule)
+    );
+    root.find(j.Program).get('body', 0).insertBefore(importStatement);
+  }
+}
+
+export function mapCSSClassToProps(root, j, cssContent) {
+  // Use a simple regex to extract class names and their styles
+  const cssClassRegex = /\.([a-zA-Z0-9-_]+)\s*\{([\s\S]*?)\}/g;
+  let cssClassMatch;
+
+  const cssClassStyles = {};
+
+  while ((cssClassMatch = cssClassRegex.exec(cssContent)) !== null) {
+    const className = cssClassMatch[1];
+    const styles = cssClassMatch[2]
+      .split(';')
+      .filter(Boolean)
+      .reduce((acc, style) => {
+        const [key, value] = style.split(':').map((str) => str.trim());
+        if (key && value) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+
+    cssClassStyles[className] = styles;
+  }
+
+  // Iterate over JSXElements and check for className attributes
+  root.find(j.JSXElement).forEach((path) => {
+    const classNameAttribute = path.node.openingElement.attributes.find(
+      (attr) => attr.name && attr.name.name === 'className'
+    );
+
+    if (classNameAttribute) {
+      const classNameValue = classNameAttribute.value.value;
+      const mappedStyles = cssClassStyles[classNameValue];
+      if (mappedStyles) {
+        const newAttributes = Object.keys(mappedStyles).map((key) => {
+          const propName = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+          return j.jsxAttribute(
+            j.jsxIdentifier(propName),
+            j.stringLiteral(mappedStyles[key])
+          );
+        });
+
+        path.node.openingElement.attributes = [
+          ...path.node.openingElement.attributes.filter(
+            (attr) => attr.name.name !== 'className'
+          ),
+          ...newAttributes,
+        ];
+      }
+    }
+  });
+}
+
+export function getCSSImportPath(root, j) {
+  let cssPath = null;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const isCSSImport = /\.css$/.test(path.node.source.value);
+    if (isCSSImport) {
+      cssPath = path.node.source.value;
+    }
+  });
+
+  return cssPath;
+}

package/codemod/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "downlevelIteration": true,
+    "preserveWatchOutput": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.18",
+  "version": "0.1.19",
   "name": "app-studio",
   "description": "App Studio is a responsive and themeable framework to build cross platform applications",
   "repository": "git@github.com:rize-network/app-studio.git",
@@ -18,7 +18,8 @@
     "responsive"
   ],
   "files": [
-    "dist"
+    "dist",
+    "codemod"
   ],
   "engines": {
     "node": ">=10"