fix storybok (codesandbox#3926)

* fix storybok

* clean styles

* fix ts

Author: SaraVieira

packages/components/.storybook/config.tsx

@@ -5,11 +5,14 @@ import { withA11y } from '@storybook/addon-a11y';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
-// @ts-ignore
-import global from './global.css';
 import { makeTheme, getThemes } from '../src/components/ThemeProvider';
 import { withThemesProvider } from './storybook-addon-styled-component-theme';
 
+type Theme = {
+  colors: any;
+  name: string;
+};
+
 const viewports = {
   mobile: {
     name: 'Mobile',
@@ -32,28 +35,43 @@ const viewports = {
 // new globals based on theme?
 // using sidebar as the styles for body for now 🤷
 const GlobalStyle = createGlobalStyle`
-  ${global};
+
+
   html body {
     font-family: 'Inter', sans-serif;
+    -webkit-font-smoothing: auto;
+    -moz-font-smoothing: auto;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-smooth: always;
+    min-height: 100%;
+    height: 100%;
+    font-size: 16px;
     width: 400px;
     margin: 0;
-    background-color: ${props =>
-      // @ts-ignore
-      props.theme.colors.sideBar.background} !important;
-    color: ${props =>
-      // @ts-ignore
-      props.theme.colors.sideBar.foreground} !important;
+    background-color: ${({ theme }: { theme: Theme }) =>
+      theme.colors.sideBar.background};
+    color: ${({ theme }: { theme: Theme }) => theme.colors.sideBar.foreground};
+
     * {
       box-sizing: border-box;
     }
 
+    a {
+      color: #40a9f3;
+    }
+
   }
 `;
 const allThemes = getThemes();
 const vsCodeThemes = allThemes.map(b => makeTheme(b, b.name));
 
 const blackCodesandbox = vsCodeThemes.find(
-  theme => theme.name === 'CodeSandbox Black'
+  (theme: Theme) => theme.name === 'CodeSandbox Black'
 );
 
 if (!isChromatic()) {
@@ -64,7 +82,9 @@ if (!isChromatic()) {
     </>
   );
 
-  const rest = vsCodeThemes.filter(theme => theme.name !== 'CodeSandbox Black');
+  const rest = vsCodeThemes.filter(
+    (theme: Theme) => theme.name !== 'CodeSandbox Black'
+  );
   addDecorator(withGlobal);
   addDecorator(withThemesProvider([blackCodesandbox, ...rest]));
 } else {

packages/components/.storybook/global.css

@@ -44,13 +44,13 @@
     "typeface-inter": "^3.11.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^5.2.8",
-    "@storybook/addon-actions": "^5.2.8",
-    "@storybook/addon-knobs": "^5.2.8",
-    "@storybook/addon-storysource": "^5.2.8",
-    "@storybook/addon-viewport": "^5.2.8",
+    "@storybook/addon-a11y": "^5.3.18",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/addon-storysource": "^5.3.18",
+    "@storybook/addon-viewport": "^5.3.18",
     "@storybook/csf": "^0.0.1",
-    "@storybook/react": "^5.2.8",
+    "@storybook/react": "^5.3.18",
     "@types/color": "3.0.1",
     "@types/lodash": "^4.14.149",
     "@types/styled-components": "^4.4.1",
@@ -59,7 +59,7 @@
     "np": "^5.2.1",
     "rimraf": "^3.0.0",
     "storybook-addon-styled-component-theme": "^1.3.0",
-    "storybook-chromatic": "^3.4.1",
+    "storybook-chromatic": "^3.5.3",
     "typescript": "3.7.4"
   },
   "peerDependencies": {

packages/components/package.json

@@ -1 +1,3 @@
-export * from './theme';
+import designLanguage from './theme';
+
+export default designLanguage;

packages/components/src/design-language/index.ts

@@ -8,7 +8,7 @@
 import deepmerge from 'deepmerge';
 import Color from 'color';
 import { object } from './dot';
-import designLanguage from '../design-language/theme';
+import designLanguage from '../design-language';
 import codesandboxBlack from '../themes/codesandbox-black';
 import codesandboxLight from '../themes/codesandbox-light.json';