Alpha 9

.eslintrc

@@ -12,28 +12,13 @@
     "project": "./tsconfig.json"
   },
   "rules": {
-    "import/named": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "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"
+    "react/jsx-props-no-spreading": "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',
+};

CHANGELOG.md

@@ -0,0 +1,134 @@
+<!--
+
+## 0.0.0-alpha.0 (DD Month, Year)
+
+### Features
+
+- todo
+
+### Changes
+
+- todo
+
+### Bug Fixes
+
+- todo
+
+-->
+
+## 0.0.1-alpha.9 (7 November, 2020)
+
+### Features
+
+- New Theme component
+  - Replaces the ThemeProvider.
+  - Replaces the CssReset component with a new `injectGlobalStyles` function which allows a user to restyle and extend their apps base CSS.
+
+### Changes
+
+- Removed the following components
+  - ColorModeProvider (see below)
+  - CssReset (moved into Theme)
+  - Field (see below)
+  - SpicyProvider
+  - ThemeProvider
+- Removed color mode implementations from all components
+  - Our intention is to provide an alternate dark theme instead of a provider + hook.
+- Removed Field component
+  - Determined through implementations that this provider is best implemented by the consumer as different form libraries (formik, react-form-hook) call for different implementations and usages.
+- Default theme now uses Tailwind CSS colors
+- Component styles have been adjusted to use new theme colors
+- Added CHANGELOG.md
+
+### Bug Fixes
+
+- Fixed outline and ghost variants of the Button component not having transparent background colors
+- Fixed issue with color prop on Text and Heading components
+- Fixed height prop not being avaliable on Input, Select and TextArea components
+- Fixed ref forwarding issue with Input, Select and TextArea components
+
+## 0.0.1-alpha.8 (28 October, 2020)
+
+### Bug Fixes
+
+- Fix for menu background
+- Fix menu in dark mode
+
+## 0.0.1-alpha.7 (28 October, 2020)
+
+### Features
+
+- New Avatar component
+- New Popover component
+- New Menu component
+
+### Changes
+
+- Improvements to box shadows steps in theme
+- Renamed Drawer and Modal props
+
+### Bug Fixes
+
+- Fix for headers receiving default browser margin/padding
+
+## 0.0.1-alpha.6 (26 October, 2020)
+
+### Changes
+
+- Raise opacity on disabled elements
+- Reduced x padding on inputs
+- Black button consistency
+
+### Bug Fixes
+
+- Dependencies update and React 17 fix
+- Possible iOS button appearance fix
+
+## 0.0.1-alpha.5 (29 July, 2020)
+
+### Changes
+
+- Try to improve Link component again
+- Change all component styles to be functions so they're used consistently when imported/extended
+
+## 0.0.1-alpha.4 (29 July, 2020)
+
+### Changes
+
+- Removed device-width padding from noscroll class
+- Improved types for Box component and Link
+- Modified when variants for components are called
+- Other component changes
+- Fixed tests not running
+
+## 0.0.1-alpha.3 (13 July, 2020)
+
+### Changes
+
+- Reworked theme system
+- Aligned design choices with those found in [Tailwind CSS](https://tailwindcss.com/)
+- Component styles are now found in `system.components` e.g. `system.components.Button` which allows for extending variants, colors, sizes etc.
+- Updated storybook to 6.0 beta
+- Various improvements all over the library
+
+## 0.0.1-alpha.2 (22 June, 2020)
+
+### Features
+
+- New Portal component
+- New Modal component
+- New Drawer component
+
+### Changes
+
+- Various changes to component styles
+- Split CssReset component out of the Theme component
+- Implemented shouldForwardProp on styled components
+
+### Fixes
+
+- Various fixes to types, linting and component internals
+
+## 0.0.1-alpha.1 (26 April, 2020)
+
+- First publish of components

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.1.0-beta.3",
+    "@storybook/react": "^6.1.0-beta.3",
     "@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[];