feat: incorporate chakra type generation in the workflow #1207

Averethel · 2024-11-15T14:05:09Z

References: https://smg-au.atlassian.net/browse/FED-421

Chakra-ui provides type generation based on the tokens defined in the theme.

This PR integrates the typegen in our workflow and ensures that we have proper type definitions in our component library

Averethel · 2024-11-15T14:20:33Z

src-v2/components/vehicleReference/index.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof VehicleReference> = {
  component: VehicleReference,
  decorators: [
    (Story) => (
-      <Box maxW={{ '2xs': '100%', md: '600px' }}>
+      <Box maxW={{ '2xs': 'full', md: '7xl' }}>


Strict tokens mean we need to use design tokens here

Averethel · 2024-11-15T14:21:46Z

package.json

@@ -43,8 +43,11 @@
    "format:i18n": "npx sort-phraseapp-locales src/locales/de/dict.json src/locales/en/dict.json src/locales/fr/dict.json src/locales/it/dict.json --fix",
    "format": "npm run format:i18n && npm run lint -- --fix",
    "typecheck": "tsc --noEmit",
+    "typegen": "npx chakra typegen src/themes/autoScout24.ts --clean",


We need to pass a single system; both shapes are the same.

Averethel · 2024-11-15T14:22:52Z

src/components/icons/HeartIcon.tsx

+  fill?: 'none';
+  stroke?: 'currentColor';


extending props as these values are not supported and we need them for animations in listings

Averethel · 2024-11-15T14:23:39Z

src/components/icons/CompareIcon.tsx

@@ -15,7 +15,7 @@ export const CompareIcon = createIcon({
  ),
  defaultProps: {
    boxSize: 'sm',
-    fill: 'currentColor',
+    fill: 'currentBg',


currentColor is not supported, currentBg makes sense for fill

Averethel · 2024-11-15T14:24:23Z

src/components/icons/RocketIcon.tsx

-    fill: 'none',
-    stroke: 'currentColor',


We don't seem to pass these as props, moving them to the path definition

Averethel · 2024-11-15T14:25:32Z

src/components/themeProvider/index.stories.tsx

@@ -51,19 +51,19 @@ const meta: Meta<typeof ThemeProvider> = {
        box: (
          <Box
            display="flex"
-            direction="row"
+            flexDirection="row"


direction works on Stack, but css direction attribute has nothing with flex directions.

Averethel · 2024-11-15T14:25:58Z

src/themes/shared/tokens/sizes.ts

@@ -1,6 +1,7 @@
 import { defineTokens } from '@chakra-ui/react';

 export const sizes = defineTokens.sizes({
+  auto: { value: 'auto' },


Adding this as a utility

Averethel · 2024-11-15T14:26:09Z

src/themes/shared/tokens/spacing.ts

@@ -1,6 +1,7 @@
 import { defineTokens } from '@chakra-ui/react';

 export const spacing = defineTokens.spacing({
+  '0': { value: '0' },


Adding this as a utility

Averethel · 2024-11-15T14:27:52Z

src/themes/stories/TokenShowcase.tsx

  tokenPath: string;
  renderValue?: boolean;
-  renderDemo?: (tokenValue: string) => React.ReactNode;
+  renderDemo?: (tokenName: Tokens[Token]) => React.ReactNode;


If we pass string and want to use it as a token value, strict tokens would yell at us.
This is why we add type parameters so we can properly cast a token name to an expected token.

Averethel · 2024-11-15T14:28:31Z

src/themes/stories/tokens.stories.tsx

@@ -22,7 +22,7 @@ const conversionToPixels = {

 export const BorderRadius: StoryType = {
  render: () => (
-    <TokenShowcase
+    <TokenShowcase<'radii'>


Passing token type

Averethel · 2024-11-15T15:06:41Z

src/themes/shared/tokens/colors.ts

+  none: { value: 'none' },
+  currentColor: { value: 'currentColor' },


Adding this two utilities to streamline svg icons

automotiveengineeringbot · 2024-11-15T15:15:20Z

🎉 This PR is included in version 23.12.0-chakra-v3-2b01e1695f18cd9d9904654a954403715816f889.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-11-20T08:15:52Z

🎉 This PR is included in version 23.12.0-chakra-v3-48faf66f285855f83fe067b3e1023b7d201e3356.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-11-26T13:34:19Z

🎉 This PR is included in version 23.12.0-chakra-v3-cd3fc71866ab1effc5e6b22bb42a02eb8dd830bd.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-11-26T14:44:36Z

🎉 This PR is included in version 23.12.0-chakra-v3-b007baa34b3042d13cb9ebf96bd863b4c5b0e151.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-11-26T16:39:11Z

🎉 This PR is included in version 23.15.0-chakra-v3-f0a29c4689b248124d11f182c1701bad4af03971.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-12-05T13:34:18Z

🎉 This PR is included in version 23.16.0-chakra-v3-1179149485ac09b9c262ae8648e855b1ce506b02.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-12-10T07:33:56Z

🎉 This PR is included in version 23.16.0-chakra-v3-7a58fab7dfb141d07161cc692ea467088dbf00b4.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-12-11T12:44:34Z

🎉 This PR is included in version 23.17.0-chakra-v3-ed38805868813712826f68f9fd6cbcde5f1c3db6.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

automotiveengineeringbot · 2024-12-13T07:42:57Z

🎉 This PR is included in version 23.17.0-chakra-v3-a3e5a49230070338bd79966543c4f14023c39dab.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Averethel added 6 commits November 15, 2024 14:52

fix: generate the types in the post-install script

219a74a

chore(types): fix icon prop types

17a8ff5

chore(typing): use design token

387cb57

feat: utility styles

e296054

chore(typing): use design system tokens in storybook

3c6e503

chore(typing): kick the type checker on the showcase component

c645754

automotiveengineeringbot deployed to branch-components-pkg-chakra-v3-type-generation November 15, 2024 14:10 Active

chore: update readme

d2b9dd5

Averethel force-pushed the chakra-v3/type-generation branch from 8cf3f22 to d2b9dd5 Compare November 15, 2024 14:12

automotiveengineeringbot deployed to branch-components-pkg-chakra-v3-type-generation November 15, 2024 14:17 Active

chore: new scripts

59205ed

automotiveengineeringbot deployed to branch-components-pkg-chakra-v3-type-generation November 15, 2024 14:24 Active

Averethel commented Nov 15, 2024

View reviewed changes

Averethel requested review from talamcol, masone, a team, braopa-smg and marko-markovic-smg and removed request for a team November 15, 2024 14:34

Averethel marked this pull request as ready for review November 15, 2024 14:35

chore: add none and currentColor color utilities

1f95c17

marko-markovic-smg approved these changes Nov 15, 2024

View reviewed changes

Averethel commented Nov 15, 2024

View reviewed changes

automotiveengineeringbot deployed to branch-components-pkg-chakra-v3-type-generation November 15, 2024 15:07 Active

Averethel merged commit 2b01e16 into chakra-v3/root Nov 15, 2024
10 checks passed

Averethel deleted the chakra-v3/type-generation branch November 15, 2024 15:09

automotiveengineeringbot added the released on @chakra-v3/root label Nov 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: incorporate chakra type generation in the workflow #1207

feat: incorporate chakra type generation in the workflow #1207

Averethel commented Nov 15, 2024 •

edited

Loading

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

Averethel Nov 15, 2024

automotiveengineeringbot commented Nov 15, 2024

automotiveengineeringbot commented Nov 20, 2024

automotiveengineeringbot commented Nov 26, 2024

automotiveengineeringbot commented Nov 26, 2024

automotiveengineeringbot commented Nov 26, 2024

automotiveengineeringbot commented Dec 5, 2024

automotiveengineeringbot commented Dec 10, 2024

automotiveengineeringbot commented Dec 11, 2024

automotiveengineeringbot commented Dec 13, 2024

		none: { value: 'none' },
		currentColor: { value: 'currentColor' },

feat: incorporate chakra type generation in the workflow #1207

feat: incorporate chakra type generation in the workflow #1207

Conversation

Averethel commented Nov 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

automotiveengineeringbot commented Nov 15, 2024

automotiveengineeringbot commented Nov 20, 2024

automotiveengineeringbot commented Nov 26, 2024

automotiveengineeringbot commented Nov 26, 2024

automotiveengineeringbot commented Nov 26, 2024

automotiveengineeringbot commented Dec 5, 2024

automotiveengineeringbot commented Dec 10, 2024

automotiveengineeringbot commented Dec 11, 2024

automotiveengineeringbot commented Dec 13, 2024

Averethel commented Nov 15, 2024 •

edited

Loading