@akinon/projectzero 2.0.0-beta.1 → 2.0.0-beta.11

package/app-template/src/views/sales-contract-modal/index.tsx

@@ -169,19 +169,19 @@ export const SalesContractModal = ({ data }: Props) => {
               </div>
             </div>
 
-            <table className="w-full border">
+            <table className="w-full border border-gray-200">
               <thead className="text-sm">
                 <tr>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product')}
                   </th>
-                  <th className="border font-normal py-2 px-3">
+                  <th className="border border-gray-200 font-normal py-2 px-3">
                     {t('account.sales_contract.quantity')}
                   </th>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product_price')}
                   </th>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.total_price')}
                   </th>
                 </tr>
@@ -191,20 +191,20 @@ export const SalesContractModal = ({ data }: Props) => {
                 {data.orderitem_set.map((value, index) => {
                   return (
                     <tr key={index.toString()}>
-                      <td className="border font-light text-left py-2 px-3">
+                      <td className="border border-gray-200 font-light text-left py-2 px-3">
                         {value.product.name}
                       </td>
-                      <td className="border font-light text-center py-2 px-3">
+                      <td className="border border-gray-200 font-light text-center py-2 px-3">
                         {value.quantity ? value.quantity : '1'}
                       </td>
-                      <td className="border font-light text-center py-2 px-3">
+                      <td className="border border-gray-200 font-light text-center py-2 px-3">
                         <Price
                           value={
                             value.unit_price ? value.unit_price : value.price
                           }
                         />
                       </td>
-                      <td className="border font-light text-right py-2 px-3">
+                      <td className="border border-gray-200 font-light text-right py-2 px-3">
                         <Price
                           value={
                             value.total_amount
@@ -222,12 +222,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.products_total')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.discount_amount} />
@@ -237,12 +237,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.shipping_price')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.shipping_amount} />
@@ -252,12 +252,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.payment_type')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     {data.payment_option_slug}
@@ -267,12 +267,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.order_total')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.amount} />

package/app-template/src/widgets/footer-info.tsx

@@ -19,7 +19,7 @@ export default async function FooterInfo() {
   const data = await getWidgetData<FooterInfoType>({ slug: 'footer-info' });
 
   return (
-    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
+    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b border-gray-200 md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
       <div className="flex items-center mb-8">
         <div className="mr-3">
           <svg

package/app-template/src/widgets/footer-menu.tsx

@@ -50,7 +50,7 @@ export default async function FooterMenu() {
 
   return (
     <div className="flex-1">
-      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l">
+      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l md:border-gray-200">
         <div>
           <div className="mb-4 font-medium" data-testid="footer-categories">
             {data?.attributes?.first_column_title?.value}

package/app-template/src/widgets/footer-subscription/index.tsx

@@ -19,7 +19,7 @@ export default async function FooterSubscription() {
   });
 
   return (
-    <div className="py-4 border-t md:border-t-0 lg:pl-7">
+    <div className="py-4 border-t border-gray-200 md:border-t-0 lg:pl-7">
       <h3 className="mb-1 text-xs font-medium">
         {data?.attributes?.title?.value}
       </h3>

package/app-template/src/widgets/home-stories-eng.tsx

@@ -82,7 +82,7 @@ export default async function HomeStoriesEng() {
         {data?.attributes?.stories?.map((story, index) => {
           return (
             <div
-              className="mr-4 flex-shrink-0 first:ms-4 w-32 md:w-32"
+              className="mr-4 shrink-0 first:ms-4 w-32 md:w-32"
               key={`story__${index}`}
             >
               <Link href={story?.value?.url} aria-label={story?.value?.alt}>

package/app-template/tailwind.config.js

@@ -1,5 +1,5 @@
+const getAkinonNextContent = require('@akinon/next/tailwind/content');
 const deepMerge = require('@akinon/next/utils/deep-merge');
-const defaultTheme = require('tailwindcss/defaultTheme');
 const plugins = require('./src/plugins');
 const fs = require('fs');
 const path = require('path');
@@ -26,140 +26,8 @@ const defaultConfig = {
     './src/widgets/**/*.{js,ts,jsx,tsx}',
     './src/hooks/**/*.{js,ts,jsx,tsx}',
     './src/utils/**/*.{js,ts,jsx,tsx}',
-    ...plugins
-      .map((plugin) => [
-        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
-        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
-      ])
-      .flat()
+    ...getAkinonNextContent(plugins)
   ],
-  theme: {
-    extend: {
-      fontSize: {
-        '2xs': '0.5rem'
-      },
-      outline: {
-        off: 'none'
-      },
-      width: {
-        '1/10': '10%',
-        '2/10': '20%',
-        '3/10': '30%',
-        '4/10': '40%',
-        '5/10': '50%',
-        '6/10': '60%',
-        '7/10': '70%',
-        '8/10': '80%',
-        '9/10': '90%'
-      },
-      transitionProperty: {
-        'max-width': 'max-width'
-      },
-      backgroundImage: {
-        'skeleton-shimmer':
-          'linear-gradient(90deg, #d7d7d7 0%, #ebebeb 40%, #eeeeee 60%, #d7d7d7)'
-      },
-      keyframes: {
-        'skeleton-shimmer': {
-          '100%': {
-            transform: 'translateX(100%)'
-          }
-        }
-      },
-      animation: {
-        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite'
-      }
-    },
-    colors: {
-      transparent: 'transparent',
-      white: '#ffffff',
-      primary: {
-        DEFAULT: '#000000',
-        hover: '#181818',
-        foreground: '#ffffff',
-        100: '#525252',
-        200: '#404040',
-        300: '#3d3d3d',
-        400: '#333333',
-        500: '#2d2d2d',
-        600: '#292929',
-        700: '#2b2b2b',
-        800: '#181818',
-        900: '#000000'
-      },
-      secondary: {
-        DEFAULT: '#e95151',
-        hover: '#d03838',
-        foreground: '#ffffff',
-        100: '#ffb7b7',
-        200: '#ff9e9e',
-        300: '#ff8484',
-        400: '#ff6b6b',
-        500: '#e95151',
-        600: '#d72b01',
-        700: '#b61e1e',
-        800: '#9d0505',
-        900: '#830000'
-      },
-      black: {
-        DEFAULT: '#000000',
-        100: '#525252',
-        200: '#404040',
-        300: '#3d3d3d',
-        400: '#333333',
-        500: '#2d2d2d',
-        600: '#292929',
-        700: '#2b2b2b',
-        800: '#181818',
-        900: '#000000'
-      },
-      gray: {
-        DEFAULT: '#ebebeb',
-        25: '#fdfdfd',
-        50: '#f7f7f7',
-        100: '#f5f5f5',
-        150: '#f4f4f4',
-        200: '#eeeeee',
-        300: '#ebebeb',
-        400: '#d7d7d7',
-        450: '#d4d4d4',
-        500: '#c9c9c9',
-        600: '#9d9d9d',
-        700: '#686868',
-        800: '#615f62',
-        850: '#58585a',
-        900: '#4a4f54',
-        950: '#424242'
-      },
-      error: {
-        DEFAULT: '#d72b01',
-        100: '#e20008'
-      },
-      success: {
-        DEFAULT: '#7b9d76',
-        100: '#7b9d76'
-      }
-    },
-    container: {
-      center: true,
-      padding: {
-        DEFAULT: '0rem',
-        sm: '2rem',
-        '2xl': '0rem'
-      }
-    },
-    fontFamily: {
-      sans: ['Jost'].concat(defaultTheme.fontFamily.sans)
-    },
-    screens: {
-      xs: '575px',
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1170px',
-      '2xl': '1370px'
-    }
-  },
   plugins: [require('@tailwindcss/typography')]
 };
 

package/codemods/sentry-9/index.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const { execSync } = require('child_process');
+
+const codemodScripts = [
+  path.resolve(__dirname, 'remove-sentry-dependency.js'),
+  path.resolve(__dirname, 'remove-sentry-configs.js'),
+  path.resolve(__dirname, 'replace-error-page.js')
+];
+
+const transform = () => {
+  const workingDir = path.resolve(process.cwd());
+
+  codemodScripts.forEach((script) => {
+    try {
+      execSync(
+        `jscodeshift --ignore-pattern="**/node_modules/**" -t ${script} ${workingDir} --extensions=json,ts,tsx,js,jsx,properties,md`,
+        {
+          cwd: workingDir,
+          stdio: 'inherit'
+        }
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  });
+};
+
+module.exports = {
+  transform
+};

package/codemods/sentry-9/remove-sentry-configs.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+
+const transform = (fileInfo, api, options) => {
+  const filePath = fileInfo.path;
+  const regex = /sentry\.\w+\.config\.(ts|js)$|sentry\.properties$/i;
+
+  if (regex.test(filePath) && fs.existsSync(filePath)) {
+    fs.unlinkSync(filePath);
+  }
+
+  return fileInfo.source;
+};
+
+module.exports = transform;

package/codemods/sentry-9/remove-sentry-dependency.js

@@ -0,0 +1,25 @@
+const transform = (fileInfo, api, options) => {
+  if (fileInfo.path.endsWith('package.json')) {
+    const packageJson = JSON.parse(fileInfo.source);
+
+    if (
+      packageJson.dependencies &&
+      packageJson.dependencies['@sentry/nextjs']
+    ) {
+      delete packageJson.dependencies['@sentry/nextjs'];
+    }
+
+    if (
+      packageJson.devDependencies &&
+      packageJson.devDependencies['@sentry/nextjs']
+    ) {
+      delete packageJson.devDependencies['@sentry/nextjs'];
+    }
+
+    return JSON.stringify(packageJson, null, 2);
+  }
+
+  return fileInfo.source;
+};
+
+module.exports = transform;

package/codemods/sentry-9/replace-error-page.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+
+const template = `
+'use client';
+
+import { useSentryUncaughtErrors } from '@akinon/next/hooks';
+import PzErrorPage from '@akinon/next/views/error-page';
+
+export default function ErrorPage({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string; isServerError?: boolean };
+  reset: () => void;
+}) {
+  // DO NOT REMOVE THIS LINE TO REPORT UNCAUGHT ERRORS TO SENTRY
+  useSentryUncaughtErrors(error);
+
+  return <PzErrorPage error={error} reset={reset} />;
+}
+
+`;
+
+const transform = (fileInfo, api, options) => {
+  const filePath = fileInfo.path;
+
+  if (filePath.endsWith('error.tsx')) {
+    fs.writeFileSync(filePath, template, { encoding: 'utf8' });
+  }
+};
+
+module.exports = transform;

package/codemods/update-tailwind-config/index.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const jscodeshift = require('jscodeshift/src/Runner');
+
+const codemodScript = path.resolve(__dirname, 'transform.js');
+
+const transform = () => {
+  const workingDir = path.resolve(process.cwd());
+
+  jscodeshift
+    .run(codemodScript, [workingDir], {
+      verbose: 0,
+      dry: false,
+      print: false,
+      extensions: 'js',
+      ignorePattern: '**/node_modules/**',
+      filter: '**/tailwind.config.js'
+    })
+    .then(
+      (stats) => {
+        console.log(`Codemod completed. Stats:`, stats);
+      },
+      (error) => {
+        console.error(`Error executing codemod: ${error.message}`);
+      }
+    );
+};
+
+module.exports = {
+  transform
+};

package/codemods/update-tailwind-config/transform.js

@@ -0,0 +1,102 @@
+function transform(fileInfo, api) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  if (!fileInfo.path.includes('tailwind.config.js')) {
+    return fileInfo.source;
+  }
+
+  console.log(`Processing file: ${fileInfo.path}`);
+
+  const hasAkinonNextImport = root.find(j.VariableDeclarator, {
+    id: { name: 'getAkinonNextContent' }
+  });
+
+  if (hasAkinonNextImport.size() === 0) {
+    const requireStatement = j.variableDeclaration('const', [
+      j.variableDeclarator(
+        j.identifier('getAkinonNextContent'),
+        j.callExpression(j.identifier('require'), [
+          j.literal('@akinon/next/tailwind/content')
+        ])
+      )
+    ]);
+
+    root.get().node.program.body.unshift(requireStatement);
+
+    console.log(`Added getAkinonNextContent import to ${fileInfo.path}`);
+  }
+
+  const defaultConfig = root
+    .find(j.VariableDeclarator, {
+      id: { name: 'defaultConfig' },
+      init: { type: 'ObjectExpression' }
+    })
+    .paths()[0];
+
+  if (!defaultConfig) {
+    console.log(`No defaultConfig found in ${fileInfo.path}`);
+    return fileInfo.source;
+  }
+
+  const contentArray = defaultConfig.value.init.properties.find(
+    (prop) =>
+      prop.key.name === 'content' && prop.value.type === 'ArrayExpression'
+  );
+
+  if (!contentArray) {
+    console.log(`No content array found in defaultConfig`);
+    return fileInfo.source;
+  }
+
+  const pluginsVarName = root
+    .find(j.VariableDeclarator, {
+      id: { name: 'plugins' },
+      init: {
+        type: 'CallExpression',
+        callee: { name: 'require' }
+      }
+    })
+    .paths()[0]?.value.id.name;
+
+  if (!pluginsVarName) {
+    console.log(`No plugins variable found in ${fileInfo.path}`);
+    return fileInfo.source;
+  }
+
+  const contentElements = contentArray.value.elements;
+
+  const filteredElements = contentElements.filter((element) => {
+    if (element.type === 'SpreadElement') {
+      if (
+        element.argument.type === 'CallExpression' &&
+        element.argument.callee.object?.callee.object.name === 'plugins'
+      ) {
+        return false;
+      }
+
+      if (
+        element.argument.type === 'CallExpression' &&
+        element.argument.callee.name === 'getAkinonNextContent'
+      ) {
+        return false;
+      }
+    }
+    return true;
+  });
+
+  filteredElements.push(
+    j.spreadElement(
+      j.callExpression(j.identifier('getAkinonNextContent'), [
+        j.identifier(pluginsVarName)
+      ])
+    )
+  );
+
+  contentArray.value.elements = filteredElements;
+
+  console.log(`Successfully updated ${fileInfo.path}`);
+  return root.toSource();
+}
+
+module.exports = transform;

package/commands/codemod.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const args = yargs(hideBin(process.argv)).argv;
+
+export default () => {
+  const codemodName = args.codemod;
+  const codemodPath = path.resolve(
+    __dirname,
+    `../../codemods/${codemodName}/index.js`
+  );
+
+  const codemod = require(codemodPath);
+
+  codemod.transform();
+};

package/commands/index.ts

@@ -4,6 +4,7 @@ import addLanguage from './add-language';
 import removeLanguage from './remove-language';
 import defaultLanguage from './default-language';
 import plugins from './plugins';
+import codemod from './codemod';
 
 export default {
   commerceUrl,
@@ -11,5 +12,6 @@ export default {
   addLanguage,
   removeLanguage,
   defaultLanguage,
-  plugins
+  plugins,
+  codemod
 };

package/commands/plugins.ts

@@ -2,8 +2,7 @@ import * as fs from 'fs';
 import path from 'path';
 import { execSync } from 'child_process';
 import semver from 'semver';
-
-const Prompt = require('prompt-checkbox');
+import { checkbox } from '@inquirer/prompts';
 
 const rootDir = path.resolve(process.cwd());
 
@@ -113,39 +112,32 @@ export default async () => {
     {
       name: 'Tabby Payment Extension',
       value: 'pz-tabby-extension'
+    },
+    {
+      name: 'Tamara Payment Extension',
+      value: 'pz-tamara-extension'
     }
   ];
 
-  const prompt = new Prompt({
-    name: 'plugins',
-    message: 'Please check/uncheck plugins to install/uninstall.',
-    type: 'checkbox',
-    default: installedPlugins.map((p) =>
-      definedPlugins.findIndex((dp) => dp.value === p)
-    ),
-    choices: definedPlugins.map((p, index) => `${index + 1}) ${p.name}`)
-  });
-
-  prompt.ask(async (answers: Array<string>) => {
-    const formattedAnswers = answers.map((answer) =>
-      answer.replace(/\d\)\s/, '')
-    );
-
-    const values = formattedAnswers.map(
-      (answer) => definedPlugins.find((p) => p.name === answer)?.value
-    );
-
-    if (formattedAnswers.length) {
-      console.log(`\nInstalling ${formattedAnswers.join(', ')}.`);
-    } else {
-      console.log(`\nUninstalling all plugins.`);
+  try {
+    const answers = await checkbox({
+      message: 'Please check/uncheck plugins to install/uninstall.',
+      choices: definedPlugins.map((plugin) => ({
+        name: plugin.name,
+        value: plugin.value,
+        checked: installedPlugins.includes(plugin.value)
+      }))
+    });
+
+    if (!answers.length) {
+      console.log('\x1b[33m%s\x1b[0m', `\nUninstalling all plugins.`);
     }
 
-    console.log(`\nPlease wait...`);
+    console.log('\x1b[36m%s\x1b[0m', `\nPlease wait...`);
 
     fs.writeFileSync(
       pluginsFilePath,
-      `module.exports = ${JSON.stringify(values)};\n`,
+      `module.exports = ${JSON.stringify(answers)};\n`,
       {
         encoding: 'utf-8'
       }
@@ -155,11 +147,13 @@ export default async () => {
 
     console.log(
       '\x1b[32m%s\x1b[0m',
-      `\n ✓ ${
-        formattedAnswers.length
+      `\n✓ ${
+        answers.length
           ? 'Installed selected plugins'
           : 'Uninstalled all plugins'
       }.\n`
     );
-  });
+  } catch (error) {
+    process.exit(1);
+  }
 };

package/dist/codemods/sentry-9/templates/error.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const hooks_1 = require("@akinon/next/hooks");
+const error_page_1 = __importDefault(require("@akinon/next/views/error-page"));
+function ErrorPage({ error, reset }) {
+    // DO NOT REMOVE THIS LINE TO REPORT UNCAUGHT ERRORS TO SENTRY
+    (0, hooks_1.useSentryUncaughtErrors)(error);
+    return React.createElement(error_page_1.default, { error: error, reset: reset });
+}
+exports.default = ErrorPage;