@smg-automotive/components 25.24.0-security-settings-link.1 → 25.24.0-typegen-command.1

package/README.md

@@ -10,6 +10,7 @@
    ```sh
    npm install @smg-automotive/components
    ```
+
 2. run the setup script
    ```sh
    npx components setup --path=<path to you public dir>
@@ -73,6 +74,10 @@
 
      We recommend adding fallback font families of `Arial, Helvetica, Sans-Serif`
 
+## Migrating to chakra-ui v3
+
+When migrating to chakra-ui v3, we introduced a set of breaking changes aligning with the parent library. You can get the overview of the changes in our components in the [migration guide](./migration-guide.md)
+
 ## Development
 
 ```
@@ -89,6 +94,22 @@ cd <project directory>
 npm link ../smg-automotive-components-pkg
 ```
 
+### Type generation
+
+Chakra UI provides type generation for tokens. This is incorporated into the `typegen` script.
+If you're adding new tokens you will need to re-generate the types:
+
+```bash
+$ npm run typegen
+```
+
+If you're heavily modifying the theme you can watch the changes with:
+```bash
+$ npm run typegen:watch
+```
+
+Since re-installing chakra ui will clean the generated types we're running the type generation as a post-install script.
+
 ## Theming
 
 As agreed upon in the [RFC](https://github.com/smg-automotive/au-docs/discussions/3) we will handle the differences between AS24 and MS24 with two different themes. They can be then used via a theme provider that needs to wrap the application:

package/dist/bin/chakraTypegenTheme.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const { createSystem, defaultBaseConfig, mergeConfigs, } = require('@chakra-ui/react');
+const { autoScout24Config, motoScout24Config } = require('../cjs/index.js');
+module.exports = createSystem(defaultBaseConfig, mergeConfigs(autoScout24Config, motoScout24Config), { preflight: true });

package/dist/bin/chakraTypegenTheme.d.ts

@@ -0,0 +1,3 @@
+declare const createSystem: any, defaultBaseConfig: any, mergeConfigs: any;
+declare const autoScout24Config: any, motoScout24Config: any;
+//# sourceMappingURL=chakraTypegenTheme.d.ts.map

package/dist/bin/chakraTypegenTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chakraTypegenTheme.d.ts","sourceRoot":"","sources":["../../src/lib/cli/chakraTypegenTheme.ts"],"names":[],"mappings":"AAAA,QAAA,MACE,YAAY,OACZ,iBAAiB,OACjB,YAAY,KACiB,CAAC;AAEhC,QAAA,MAAQ,iBAAiB,OAAE,iBAAiB,KAA+B,CAAC"}

package/dist/bin/cli

@@ -9,6 +9,7 @@ var node_module = require('node:module');
 var assert = require('assert');
 var url = require('url');
 var node_fs = require('node:fs');
+var child_process = require('child_process');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 class YError extends Error {
@@ -6368,55 +6369,65 @@ function isYargsInstance(y) {
 
 const Yargs = YargsFactory(esmPlatformShim);
 
-var fontsPath = 'assets/fonts';
-var source = path.join(__dirname, '../', fontsPath);
-var destination = function (base) { return path.join(base, fontsPath); };
+const resolveThemeBridgePath = () => path.resolve(__dirname, 'chakraTypegenTheme.cjs');
+var typegenChakra = () => {
+    var _a;
+    const npxBin = process.platform === 'win32' ? 'npx.cmd' : 'npx';
+    const result = child_process.spawnSync(npxBin, ['chakra', 'typegen', resolveThemeBridgePath(), '--clean'], {
+        cwd: process.cwd(),
+        stdio: 'inherit',
+    });
+    if (result.error) {
+        process.exit(1);
+    }
+    process.exit((_a = result.status) !== null && _a !== void 0 ? _a : 1);
+};
+
+const fontsPath = 'assets/fonts';
+const source = path.join(__dirname, '../', fontsPath);
+const destination = (base) => path.join(base, fontsPath);
 
 /* eslint-disable no-console */
-var fs$2 = require('fs-extra');
-var setupNextFonts = (function (_a) {
-    var destinationRoot = _a["fonts-path"], componentPath = _a["component-path"];
-    var componentDestination = path.join(componentPath, 'Fonts.tsx');
+const fs$2 = require('fs-extra');
+var setupNextFonts = ({ 'fonts-path': destinationRoot, 'component-path': componentPath, }) => {
+    const componentDestination = path.join(componentPath, 'Fonts.tsx');
     console.info('Creating a <Fonts /> component in', componentDestination);
-    var resolvedDestination = destination(destinationRoot);
-    var pathToFonts = path.relative(componentPath, resolvedDestination);
-    var component = fs$2
+    const resolvedDestination = destination(destinationRoot);
+    const pathToFonts = path.relative(componentPath, resolvedDestination);
+    const component = fs$2
         .readFileSync(path.join(__dirname, 'template.tsx'))
         .toString('utf8')
         .replace(/%fontPath%/gi, pathToFonts)
         .split('\n')
-        .filter(function (line) {
-        return !line.match(/^\s*\/\/.*$/) && !line.match(/^\/\*\s.*\s\*\/$/);
-    })
+        .filter((line) => !line.match(/^\s*\/\/.*$/) && !line.match(/^\/\*\s.*\s\*\/$/))
         .join('\n');
     fs$2.writeFileSync(componentDestination, component);
     console.info('<Fonts /> component created');
-});
+};
 
 /* eslint-disable no-console */
-var fs$1 = require('fs-extra');
-var copyFonts = (function (_a) {
-    var destinationRoot = _a.path;
-    var resolvedDestination = destination(destinationRoot);
+const fs$1 = require('fs-extra');
+var copyFonts = ({ path: destinationRoot }) => {
+    const resolvedDestination = destination(destinationRoot);
     console.info('copying fonts from the package to', resolvedDestination);
     fs$1.copySync(source, resolvedDestination);
     console.info('fonts copied');
-});
+};
 
 /* eslint-disable no-console */
-var fs = require('fs-extra');
-var appendGitignore = (function (pathToIgnore) {
+const fs = require('fs-extra');
+var appendGitignore = (pathToIgnore) => {
     console.info('adding', pathToIgnore, 'to .gitignore');
     fs.appendFileSync('./.gitignore', pathToIgnore);
     console.info('.gitignore extended');
-});
+};
 
 /* eslint-disable no-console */
-var mergeJSONSync = require('merge-json-file').mergeJSONSync;
-var addPostinstallScript = (function (fontsRoot) {
-    var scriptEntry = {
+const { mergeJSONSync } = require('merge-json-file');
+var addPostinstallScript = (fontsRoot) => {
+    const scriptEntry = {
         scripts: {
-            postinstall: "components copy-fonts --path=".concat(fontsRoot),
+            postinstall: `components copy-fonts --path=${fontsRoot}`,
         },
     };
     console.info('adding script to package.json');
@@ -6425,61 +6436,67 @@ var addPostinstallScript = (function (fontsRoot) {
         pretty: true,
     });
     console.info('package.json extended');
-});
+};
 
-var setup = (function (_a) {
-    var destinationRoot = _a.path;
+var setup = ({ path: destinationRoot }) => {
     appendGitignore(destination(destinationRoot));
     addPostinstallScript(destinationRoot);
     copyFonts({ path: destinationRoot });
-});
+};
 
 Yargs(hideBin(process.argv))
     .command({
     command: 'setup',
     describe: 'Setup copy-fonts script and gitignore copied files',
-    builder: function (args) {
-        return args.option('path', {
+    builder: {
+        path: {
             alias: 'p',
             description: 'Path to copy fonts to, it should be public directory in your web project',
             type: 'string',
             default: 'public',
-        });
+        },
     },
-    handler: setup,
+    handler: ({ path }) => setup({ path }),
 })
     .command({
     command: 'copy-fonts',
     describe: 'Copy fonts from the package to required destination',
-    builder: function (args) {
-        return args.option('path', {
+    builder: {
+        path: {
             alias: 'p',
             description: 'Path to copy fonts to',
             type: 'string',
             demandOption: 'Please specify path to copy fonts to',
-        });
+        },
     },
-    handler: copyFonts,
+    handler: ({ path }) => copyFonts({ path }),
 })
     .command({
     command: 'setup-next-fonts',
     describe: 'Generate a component to load fonts with @next/fonts',
-    builder: function (args) {
-        return args
-            .option('component-path', {
+    builder: {
+        'component-path': {
             alias: 'cp',
             description: 'Path to save the generated component, relative to the current working directory',
             type: 'string',
             demandOption: 'Please specify where to save the component',
-        })
-            .option('fonts-path', {
+        },
+        'fonts-path': {
             alias: 'fp',
             description: 'Path where fonts are copied to',
             type: 'string',
             demandOption: 'Please specify fonts path',
-        });
+        },
     },
-    handler: setupNextFonts,
+    handler: ({ componentPath, fontsPath }) => setupNextFonts({
+        'component-path': componentPath,
+        'fonts-path': fontsPath,
+    }),
+})
+    .command({
+    command: 'typegen-chakra',
+    describe: 'Generate Chakra typings for consumers using the bundled autoScout24 theme',
+    handler: typegenChakra,
 })
     .help()
     .demandCommand()

package/dist/bin/setup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/cli/setup/index.ts"],"names":[],"mappings":"yBAKgB,2BAA2B;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE;AAA3D,wBAIE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/cli/setup/index.ts"],"names":[],"mappings":"yBAMgB,2BAA2B;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE;AAA3D,wBAIE"}

package/dist/bin/typegenChakra.d.ts

@@ -0,0 +1,3 @@
+declare const _default: () => never;
+export default _default;
+//# sourceMappingURL=typegenChakra.d.ts.map

package/dist/bin/typegenChakra.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typegenChakra.d.ts","sourceRoot":"","sources":["../../src/lib/cli/typegenChakra.ts"],"names":[],"mappings":";AAMA,wBAiBE"}