finally got pseudo working on styled compoents

The-Code-Monkey · The-Code-Monkey · commit ad0f8045c02d · 2022-11-09T13:52:59.000Z
diff --git a/package.json b/package.json
@@ -28,10 +28,10 @@
     "prepare": "husky install"
   },
   "devDependencies": {
-    "husky": "8.0.2",
-    "lerna": "6.0.3",
-    "nx": "15.0.13",
-    "@nrwl/nx-cloud": "latest"
+    "@nrwl/nx-cloud": "^15.0.2",
+    "husky": "8.0.1",
+    "lerna": "6.0.1",
+    "nx": "15.0.8"
   },
   "prettier": {
     "printWidth": 80,
diff --git a/packages/components/.storybook/main.cjs b/packages/components/.storybook/main.cjs
@@ -2,7 +2,10 @@ const webpack = require("webpack");
 
 module.exports = {
   stories: ['../src/@(atoms|molecules|organisms|primal)/**/story.@(ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  features: {
+    interactionsDebugger: true, // 👈 Enable playback controls
+  },
   babel: async (options) => {
     return {
       ...options,
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -68,6 +68,9 @@
     "@storybook/client-api": "6.5.13",
     "@storybook/manager-webpack5": "6.5.13",
     "@storybook/react": "6.5.13",
+    "@storybook/testing-library": "0.0.13",
+    "@storybook/jest": "0.0.10",
+    "@storybook/addon-interactions": "6.5.13",
     "@techstack/tcm-cli": "0.2.64",
     "@testing-library/react": "13.4.0",
     "@tsconfig/create-react-app": "1.0.3",
diff --git a/packages/components/src/atoms/avatar/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/atoms/avatar/__test__/__snapshots__/index.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`<Avatar /> renders icon correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR cwxzdv"
+    class="sc-gswNZR lcFxDy"
     data-testid="box"
   >
     <div
-      class="sc-gswNZR hNMjxf sc-dkrFOg gpmtnr"
+      class="sc-gswNZR koCrta sc-dkrFOg gpmtnr"
       data-testid="box"
     >
       <svg
@@ -34,7 +34,7 @@ exports[`<Avatar /> renders icon correctly 1`] = `
 exports[`<Avatar /> renders img correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR cwxzdv"
+    class="sc-gswNZR lcFxDy"
     data-testid="box"
   >
     <img
@@ -48,11 +48,11 @@ exports[`<Avatar /> renders img correctly 1`] = `
 exports[`<Avatar /> renders text correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR cwxzdv"
+    class="sc-gswNZR lcFxDy"
     data-testid="box"
   >
     <div
-      class="sc-gswNZR fccXY"
+      class="sc-gswNZR kRtfDx"
       data-testid="box"
     >
       <span
diff --git a/packages/components/src/atoms/button/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/atoms/button/__test__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button /> renders default correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-hLBbgP wYYZF sc-jSUZER gtEhoc"
+    class="sc-hLBbgP wYYZF sc-jSUZER edMqWQ"
     data-testid="Default_button"
   >
     <span
@@ -19,11 +19,11 @@ exports[`<Button /> renders default correctly 1`] = `
 exports[`<Button /> renders icon correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-hLBbgP wYYZF sc-jSUZER gtEhoc"
+    class="sc-hLBbgP wYYZF sc-jSUZER edMqWQ"
     data-testid="Secondary_button"
   >
     <div
-      class="sc-gswNZR hNMjxf sc-dkrFOg bZrWwT"
+      class="sc-gswNZR koCrta sc-dkrFOg bZrWwT"
       data-testid="box"
     >
       <svg
@@ -56,11 +56,11 @@ exports[`<Button /> renders icon correctly 1`] = `
 exports[`<Button /> renders icon only correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-hLBbgP wYYZF sc-jSUZER gtEhoc"
+    class="sc-hLBbgP wYYZF sc-jSUZER edMqWQ"
     data-testid="_button"
   >
     <div
-      class="sc-gswNZR hNMjxf sc-dkrFOg gpmtnr"
+      class="sc-gswNZR koCrta sc-dkrFOg gpmtnr"
       data-testid="box"
     >
       <svg
@@ -91,7 +91,7 @@ exports[`<Button /> renders icon only correctly 1`] = `
 exports[`<Button /> renders primary correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-hLBbgP wYYZF sc-jSUZER cPyLBp"
+    class="sc-hLBbgP wYYZF sc-jSUZER lbvyDx"
     data-testid="Primary_button"
   >
     <span
@@ -107,7 +107,7 @@ exports[`<Button /> renders primary correctly 1`] = `
 exports[`<Button /> renders secondary correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-hLBbgP wYYZF sc-jSUZER gEuzsH"
+    class="sc-hLBbgP wYYZF sc-jSUZER gyElij"
     data-testid="Secondary_button"
   >
     <span
diff --git a/packages/components/src/atoms/grid/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/atoms/grid/__test__/__snapshots__/index.test.tsx.snap
@@ -3,35 +3,35 @@
 exports[`<Grid /> renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR jMgNck sc-jSUZER jjuHOd"
+    class="sc-gswNZR fLpaox sc-jSUZER jjuHOd"
     data-testid="undefined_table"
   >
     <div
-      class="sc-gswNZR jRJBfz sc-gKPRtg eRhLKA"
+      class="sc-gswNZR cbXJCa sc-gKPRtg eRhLKA"
       data-testid="cell_1_cell"
     >
       Cell 1
     </div>
     <div
-      class="sc-gswNZR jRJBfz sc-gKPRtg eRhLKA"
+      class="sc-gswNZR cbXJCa sc-gKPRtg eRhLKA"
       data-testid="cell_2_cell"
     >
       Cell 2
     </div>
     <div
-      class="sc-gswNZR jRJBfz sc-gKPRtg eRhLKA"
+      class="sc-gswNZR cbXJCa sc-gKPRtg eRhLKA"
       data-testid="cell_3_cell"
     >
       Cell 3
     </div>
     <div
-      class="sc-gswNZR jRJBfz sc-gKPRtg eRhLKA"
+      class="sc-gswNZR cbXJCa sc-gKPRtg eRhLKA"
       data-testid="cell_4_cell"
     >
       Cell 4
     </div>
     <div
-      class="sc-gswNZR jRJBfz sc-gKPRtg eRhLKA"
+      class="sc-gswNZR cbXJCa sc-gKPRtg eRhLKA"
       data-testid="cell_5_cell"
     >
       Cell 5
diff --git a/packages/components/src/atoms/input/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/atoms/input/__test__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Input /> checkbox renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR hpQrSe sc-hLBbgP wYYZF"
+    class="sc-gswNZR ebtlGz sc-hLBbgP wYYZF"
     data-checked="false"
     data-indeterminate="false"
     data-testid="checkbox"
diff --git a/packages/components/src/atoms/input/checkbox/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/atoms/input/checkbox/__test__/__snapshots__/index.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`<Checkbox /> renders correctly checked 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR BxOfl sc-hLBbgP wYYZF"
+    class="sc-gswNZR lnvaMQ sc-hLBbgP wYYZF"
     data-checked="true"
     data-indeterminate="false"
     data-testid="checkbox"
   >
     <div
-      class="sc-gswNZR hNMjxf sc-dkrFOg hKNMD"
+      class="sc-gswNZR koCrta sc-dkrFOg hKNMD"
       data-testid="box"
     >
       <svg
@@ -39,7 +39,7 @@ exports[`<Checkbox /> renders correctly checked 1`] = `
 exports[`<Checkbox /> renders correctly no icon 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR hpQrSe sc-hLBbgP wYYZF"
+    class="sc-gswNZR ebtlGz sc-hLBbgP wYYZF"
     data-checked="false"
     data-indeterminate="false"
     data-testid="checkbox"
diff --git a/packages/components/src/primal/box/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/primal/box/__test__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Box /> renders as a form correctly 1`] = `
 <DocumentFragment>
   <form
-    class="sc-gswNZR hNMjxf"
+    class="sc-gswNZR koCrta"
     data-testid="box"
   >
     This is some children
@@ -14,7 +14,7 @@ exports[`<Box /> renders as a form correctly 1`] = `
 exports[`<Box /> renders children correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR hNMjxf"
+    class="sc-gswNZR koCrta"
     data-testid="box"
   >
     This is some children
diff --git a/packages/components/src/primal/box/story.tsx b/packages/components/src/primal/box/story.tsx
@@ -32,3 +32,7 @@ BoxWithPseudo.args = {
     bg: 'red',
   },
 };
+
+BoxWithPseudo.parameters = {
+  pseudo: { hover: true },
+};
diff --git a/packages/components/src/primal/box/styled.ts b/packages/components/src/primal/box/styled.ts
@@ -10,6 +10,7 @@ import {
   system,
   typography,
   defaultStyles,
+  pseudo,
 } from '@techstack/styled-system';
 
 import { shouldForwardProp } from '../../utils';
@@ -46,4 +47,5 @@ export const StyledBox = styled.div.withConfig({
   display: block;
   box-sizing: border-box;
   ${StyledBoxProps}
+  ${pseudo}
 `;
diff --git a/packages/components/src/primal/icon/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/primal/icon/__test__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Icon /> renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gswNZR hNMjxf sc-dkrFOg gpmtnr"
+    class="sc-gswNZR koCrta sc-dkrFOg gpmtnr"
     data-testid="box"
   >
     <svg
diff --git a/packages/components/src/test-tools/index.tsx b/packages/components/src/test-tools/index.tsx
@@ -10,9 +10,7 @@ const config = {
   iconDir: 'feather',
 };
 
-type SnapshotSerializerPlugin = import('pretty-format').Plugin;
-
-const removeProperties = (): SnapshotSerializerPlugin => {
+const removeProperties = () => {
   const keys = ['theme', 'styledTheme'];
   return {
     test: (val: { props: unknown }) =>
diff --git a/packages/components/src/theme/variants.ts b/packages/components/src/theme/variants.ts
@@ -71,18 +71,18 @@ const variants = {
       bg: 'neutrals.4',
       _hover: {
         bg: 'neutrals.6',
-        _disabled: {
-          bg: 'neutrals.2',
-        },
+      },
+      _disabled: {
+        bg: 'neutrals.2',
       },
     },
     primary: {
       bg: 'primary.2',
       _hover: {
         bg: 'primary.1',
-        _disabled: {
-          bg: 'primary.0',
-        },
+      },
+      _disabled: {
+        bg: 'primary.0',
       },
       _active: {
         bg: 'primary.2',
@@ -98,9 +98,9 @@ const variants = {
       bg: 'highlights.0',
       _hover: {
         bg: 'highlights.2',
-        _disabled: {
-          bg: 'highlights.0',
-        },
+      },
+      _disabled: {
+        bg: 'highlights.0',
       },
       _active: {
         bg: 'highlights.2',
diff --git a/packages/styled-system/src/core/parser.ts b/packages/styled-system/src/core/parser.ts
@@ -4,7 +4,11 @@ import { defaultBreakpoints } from '../utils';
 
 import { get, merge, sort } from './util';
 
-type SxType = (a: string | number | object, b: Scale, c: unknown) => object;
+export type SxType = (
+  a: string | number | object,
+  b: Scale,
+  c: unknown
+) => object;
 
 function createMediaQuery(n: string) {
   return `@media screen and (min-width: ${n})`;
diff --git a/packages/styled-system/src/parsers/__test__/pseudo.spec.ts b/packages/styled-system/src/parsers/__test__/pseudo.spec.ts
@@ -0,0 +1,58 @@
+import { pseudo } from '../pseudo';
+
+const theme = {
+  colors: {
+    primary: 'tomato',
+    secondary: 'cyan',
+  },
+  fontSizes: [12, 14, 16, 24, 36],
+  fonts: {
+    monospace: 'Menlo, monospace',
+  },
+  lineHeights: {
+    body: 1.5,
+  },
+  fontWeights: {
+    bold: 600,
+  },
+  sizes: {
+    small: 4,
+    medium: 8,
+    large: 16,
+    sidebar: 320,
+  },
+  borderWidths: {
+    thin: 1,
+  },
+  borderStyles: {
+    thick: 'solid',
+  },
+  radii: {
+    small: 5,
+  },
+};
+
+describe('pseudo', () => {
+  it('should return object with pseudo', () => {
+    const style = pseudo({
+      theme,
+      _hover: {
+        bg: 'red',
+      },
+      _disabled: {
+        bg: 'blue',
+      },
+    });
+
+    expect(style).toEqual({
+      '&:hover, &[data-hover]': {
+        backgroundColor: 'red',
+        color: '#000',
+      },
+      '&[disabled], &[aria-disabled=true], &[data-disabled]': {
+        backgroundColor: 'blue',
+        color: '#FFF',
+      },
+    });
+  });
+});
diff --git a/packages/styled-system/src/parsers/pseudo.ts b/packages/styled-system/src/parsers/pseudo.ts
diff --git a/packages/styled-system/src/variant/index.ts b/packages/styled-system/src/variant/index.ts
diff --git a/yarn.lock b/yarn.lock
