@smg-automotive/components 25.30.0 → 25.31.0-chakra-v3.2

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,13 +94,29 @@ 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:
 
 ```tsx
 // app.tsx
-import { ThemeProvider } from '@smg-automotive/components';
+import { ThemeProvider } from '@smg-automotive/components/theme-provider';
 
 const App = ({ Component, pageProps }) => {
   return (
@@ -111,7 +132,7 @@ export default MyApp;
 Theme objects can also be imported directly from the package (for showcasing, debugging, etc.):
 
 ```tsx
-import { autoScout24Theme } from '@smg-automotive/components';
+import { autoScout24Theme } from '@smg-automotive/components/themes';
 ```
 
 ### Switching themes in storybook

package/dist/bin/chakraTypegenTheme.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const { createSystem, defaultBaseConfig, mergeConfigs, } = require('@chakra-ui/react');
+const { autoScout24Config, motoScout24Config } = require('../cjs/themes.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,KAAgC,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,6 +6369,20 @@ function isYargsInstance(y) {
 
 const Yargs = YargsFactory(esmPlatformShim);
 
+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);
@@ -6477,6 +6492,11 @@ Yargs(hideBin(process.argv))
         '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/copyFonts.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ path: destinationRoot }: {
+    path: string;
+}) => void;
+export default _default;
+//# sourceMappingURL=copyFonts.d.ts.map

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

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

package/dist/bin/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/bin/paths.d.ts

@@ -0,0 +1,3 @@
+export declare const source: string;
+export declare const destination: (base: string) => string;
+//# sourceMappingURL=paths.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../src/lib/cli/paths.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,QAAyC,CAAC;AAC7D,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAA+B,CAAC"}

package/dist/bin/setup/addPostinstallScript.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"addPostinstallScript.d.ts","sourceRoot":"","sources":["../../../src/lib/cli/setup/addPostinstallScript.ts"],"names":[],"mappings":"yBAGgB,WAAW,MAAM;AAAjC,wBAYE"}

package/dist/bin/setup/appendGitignore.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"appendGitignore.d.ts","sourceRoot":"","sources":["../../../src/lib/cli/setup/appendGitignore.ts"],"names":[],"mappings":"yBAGgB,cAAc,MAAM;AAApC,wBAIE"}

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

@@ -0,0 +1,5 @@
+declare const _default: ({ path: destinationRoot }: {
+    path: string;
+}) => void;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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/setupNextFonts/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: ({ "fonts-path": destinationRoot, "component-path": componentPath, }: {
+    "fonts-path": string;
+    "component-path": string;
+}) => void;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/cli/setupNextFonts/index.ts"],"names":[],"mappings":"yBAOgB,qEAGb;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAND,wBA2BE"}

package/dist/bin/setupNextFonts/template.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+declare const Fonts: FC;
+export default Fonts;
+//# sourceMappingURL=template.d.ts.map

package/dist/bin/setupNextFonts/template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/lib/cli/setupNextFonts/template.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAuBlC,QAAA,MAAM,KAAK,EAAE,EAQZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

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"}

package/dist/breakpoints.d.mts

@@ -0,0 +1,18 @@
+declare const emBreakpoints: {
+    base: string;
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+type BreakpointName = keyof typeof emBreakpoints;
+declare const pxBreakpoints: Record<BreakpointName, string>;
+declare const breakpoints: Record<BreakpointName, {
+    em: number;
+    px: number;
+}>;
+
+export { breakpoints, emBreakpoints, pxBreakpoints };
+export type { BreakpointName };

package/dist/breakpoints.d.ts

@@ -0,0 +1,18 @@
+declare const emBreakpoints: {
+    base: string;
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+type BreakpointName = keyof typeof emBreakpoints;
+declare const pxBreakpoints: Record<BreakpointName, string>;
+declare const breakpoints: Record<BreakpointName, {
+    em: number;
+    px: number;
+}>;
+
+export { breakpoints, emBreakpoints, pxBreakpoints };
+export type { BreakpointName };

package/dist/cjs/breakpoints.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const convertRemEmToPx = (value) => {
+    const baseFontSize = 16;
+    const unitRemEm = parseFloat(value);
+    return unitRemEm * baseFontSize;
+};
+
+const emBreakpoints = {
+    base: '0em',
+    '2xs': '20em',
+    xs: '22.5em',
+    sm: '48em',
+    md: '64em',
+    lg: '80em',
+    xl: '120em',
+};
+const pxBreakpoints = Object.fromEntries(Object.entries(emBreakpoints).map(([name, emValue]) => [
+    name,
+    `${convertRemEmToPx(emValue)}px`,
+]));
+const breakpoints = Object.fromEntries(Object.keys(emBreakpoints).map((name) => [
+    name,
+    {
+        em: parseFloat(emBreakpoints[name]),
+        px: parseFloat(pxBreakpoints[name]),
+    },
+]));
+
+exports.breakpoints = breakpoints;
+exports.emBreakpoints = emBreakpoints;
+exports.pxBreakpoints = pxBreakpoints;
+//# sourceMappingURL=breakpoints.js.map

package/dist/cjs/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../src/utilities/convertRemEmToPx.ts","../../../src/themes/shared/breakpoints.ts"],"sourcesContent":[null,null],"names":[],"mappings":";;AAAO,MAAM,gBAAgB,GAAG,CAAC,KAAa,KAAI;IAChD,MAAM,YAAY,GAAG,EAAE;AACvB,IAAA,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC;IACnC,OAAO,SAAS,GAAG,YAAY;AACjC,CAAC;;ACFM,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,KAAK;AACX,IAAA,KAAK,EAAE,MAAM;AACb,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,OAAO;;AAIN,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAC7C,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK;IACrD,IAAI;AACJ,IAAA,CAAA,EAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA,EAAA,CAAI;AACjC,CAAA,CAAC;MAGS,WAAW,GAAG,MAAM,CAAC,WAAW,CAC3C,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;IACvC,IAAI;AACJ,IAAA;AACE,QAAA,EAAE,EAAE,UAAU,CAAC,aAAa,CAAC,IAAsB,CAAC,CAAC;AACrD,QAAA,EAAE,EAAE,UAAU,CAAC,aAAa,CAAC,IAAsB,CAAC,CAAC;AACtD,KAAA;AACF,CAAA,CAAC;;;;;;"}