yet another overhaul

.eslintrc

@@ -12,28 +12,22 @@
     "project": "./tsconfig.json"
   },
   "rules": {
-    "import/named": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    // "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    // "@typescript-eslint/indent": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    // "@typescript-eslint/quotes": "off",
+    // "import/named": "off",
     "import/no-cycle": "off",
-    "import/order": [
-      "error",
-      {
-        "groups": ["builtin", "external", "parent", "sibling", "index"],
-        "newlines-between": "never"
-      }
-    ],
     "import/prefer-default-export": "off",
     "jsx-a11y/accessible-emoji": "off",
-    "no-console": "off",
-    "no-underscore-dangle": "off",
-    "react/jsx-curly-newline": "off",
-    "react/jsx-one-expression-per-line": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react/jsx-wrap-multilines": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/indent": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/quotes": "off"
+    // "no-console": "off",
+    // "no-underscore-dangle": "off",
+    // "react/jsx-curly-newline": "off",
+    // "react/jsx-one-expression-per-line": "off",
+    "react/jsx-props-no-spreading": "off"
+    // "react/jsx-wrap-multilines": "off"
   },
   "overrides": [
     {

.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../src/**/*.stories.@(tsx|mdx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-knobs', '@storybook/addon-actions'],
+  addons: ['@storybook/addon-essentials'],
 };

.storybook/preview.js

@@ -1,5 +1,17 @@
 import { addDecorator } from '@storybook/react';
 import React from 'react';
-import { SpicyProvider } from '../src';
+import { Box, injectGlobalStyles, ThemeProvider } from '../src';
 
-addDecorator((storyFn) => <SpicyProvider>{storyFn()}</SpicyProvider>);
+const { GlobalStyle } = injectGlobalStyles();
+
+addDecorator((storyFn) => (
+  <ThemeProvider>
+    <GlobalStyle />
+    <Box p={4}>{storyFn()}</Box>
+  </ThemeProvider>
+));
+
+export const parameters = {
+  controls: { expanded: true },
+  layout: 'fullscreen',
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicy-ui/core",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1-alpha.9",
   "description": "A React component library to spice up your UI",
   "keywords": [
     "react",
@@ -68,10 +68,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
-    "@storybook/addon-actions": "^6.0.27",
-    "@storybook/addon-docs": "^6.0.27",
-    "@storybook/addon-knobs": "^6.0.27",
-    "@storybook/react": "^6.0.27",
+    "@storybook/addon-essentials": "^6.0.28",
+    "@storybook/react": "^6.0.28",
     "@types/jest": "^26.0.15",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",

@types/styled-components/index.d.ts → src/@types/styled-components/index.d.ts

@@ -1,8 +1,7 @@
 import 'styled-components';
+import { theme } from '../../theme';
 
-import { System } from '../../src/system';
-
-type ThemeInterface = System;
+type ThemeInterface = typeof theme;
 
 declare module 'styled-components' {
   export interface DefaultTheme extends ThemeInterface {}

@types/styled-system__should-forward-prop/index.d.ts → src/@types/styled-system__should-forward-prop/index.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-shadow, @typescript-eslint/naming-convention */
 
 declare module '@styled-system/should-forward-prop' {
+  // Fix: didn't support number type prop arg
   type genericShouldForwardProp = (prop: string | number) => boolean;
 
   export const props: string[];