feat: loads of little tweaks to get default styles and pseudos working

The-Code-Monkey · Apr 13, 2022 · d018334 · d018334
1 parent 3d5e28d
commit d018334
Show file tree

Hide file tree

Showing 32 changed files with 152 additions and 50 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -125,7 +125,7 @@
     "@aw-web-design/react-feather": "3.1.5",
     "@aw-web-design/styled-system": "3.1.5",
     "@aw-web-design/tcm-cli": "3.1.5",
-    "@aw-web-design/theme": "3.1.5",
+    "@aw-web-design/theme": "3.1.13",
     "classnames": "2.3.1",
     "csstype": "3.0.11",
     "memoize-one": "6.0.0",

diff --git a/packages/components/src/packages/atoms/input/Input.tsx b/packages/components/src/packages/atoms/input/Input.tsx
@@ -3,9 +3,12 @@ import React, {
   ChangeEvent,
   HTMLInputTypeAttribute,
   useState,
+  useContext,
 } from 'react';
+import { ThemeContext } from 'styled-components';
 
 import { BoxProps } from '../../primatives';
+import { ITheme } from '../../utils';
 
 import { StyledInput } from './styled';
 
@@ -25,6 +28,7 @@ const Input = ({
   placeholder = 'Placeholder',
   ...rest
 }: Props) => {
+  const theme = useContext<ITheme<unknown>>(ThemeContext);
   const [v, setValue] = useState<string | number | undefined>(value);
 
   const handleOnChange = useCallback(
@@ -42,6 +46,7 @@ const Input = ({
       value={v}
       type={type}
       onChange={handleOnChange}
+      {...theme.defaultStyles.input}
       {...rest}
     />
   );

diff --git a/packages/components/src/packages/atoms/input/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/packages/atoms/input/__test__/__snapshots__/index.test.tsx.snap
@@ -6,17 +6,30 @@ exports[`<Input /> renders correctly 1`] = `
     name="test"
   >
     <styled.input
+      _hover={
+        Object {
+          "bg": "blue",
+        }
+      }
+      border="1px solid #000"
+      borderRadius="6px"
+      cursor="pointer"
+      minHeight="24px"
       name="test"
       onChange={[Function]}
+      padding="6px"
       placeholder="Placeholder"
       type="text"
+      width="100%"
     >
       <input
-        className="sc-jSMfEi hHHIcy"
+        className="sc-jSMfEi eevSLp"
+        cursor="pointer"
         name="test"
         onChange={[Function]}
         placeholder="Placeholder"
         type="text"
+        width="100%"
       />
     </styled.input>
   </Input>

diff --git a/packages/components/src/packages/atoms/input/styled.ts b/packages/components/src/packages/atoms/input/styled.ts
@@ -3,12 +3,6 @@ import styled from 'styled-components';
 import { StyledBoxProps } from '../../primatives';
 
 export const StyledInput = styled.input`
-  padding: ${(p) => p.theme.space[3]};
-  border-radius: ${(p) => p.theme.radii[2]};
-  border: ${(p) => p.theme.borders[1]} ${(p) => p.theme.colors.common.black};
-  cursor: pointer;
-  min-height: ${(p) => p.theme.sizes[7]};
-
   ${StyledBoxProps}
 
   &::-webkit-calendar-picker-indicator {

diff --git a/packages/components/src/packages/atoms/table/Table.tsx b/packages/components/src/packages/atoms/table/Table.tsx
@@ -3,6 +3,8 @@ import React, { FC, useCallback, useContext, useMemo } from 'react';
 import { Accessor, TableOptions, useTable } from 'react-table';
 import { ThemeContext } from 'styled-components';
 
+import { ITheme } from '../../utils';
+
 import {
   StyledTable,
   StyledTHead,
@@ -18,8 +20,7 @@ export interface Props extends TableOptions<object> {
 }
 
 const Table: FC<Props> = ({ columns, data, className, onRowClick }: Props) => {
-  // @ts-ignore
-  const theme = useContext(ThemeContext);
+  const theme = useContext<ITheme<unknown>>(ThemeContext);
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
     useTable({ columns, data });
 
@@ -47,20 +48,20 @@ const Table: FC<Props> = ({ columns, data, className, onRowClick }: Props) => {
   return (
     <StyledTable
       {...tableProps}
-      {...theme.table?.table}
+      {...theme.defaultStyles.table}
       className={cn(className, tableProps.className)}
     >
-      <StyledTHead {...theme.table?.thead}>
+      <StyledTHead {...theme.defaultStyles.thead}>
         {headerGroups.map((headerGroup) => (
           <StyledTr
             {...headerGroup.getHeaderGroupProps()}
-            {...theme.table?.tr}
-            {...theme.table?.trHead}
+            {...theme.defaultStyles.tr}
+            {...theme.defaultStyles.trHead}
           >
             {headerGroup.headers.map((column, index) => (
               <StyledTh
                 {...column.getHeaderProps()}
-                {...theme.table?.th}
+                {...theme.defaultStyles.th}
                 onClick={() => handleColumnClick(columns[index].accessor)}
               >
                 {column.render('Header')}
@@ -69,19 +70,22 @@ const Table: FC<Props> = ({ columns, data, className, onRowClick }: Props) => {
           </StyledTr>
         ))}
       </StyledTHead>
-      <StyledTBody {...getTableBodyProps()} {...theme.table?.tbody}>
+      <StyledTBody {...getTableBodyProps()} {...theme.defaultStyles.tbody}>
         {rows.map((row) => {
           prepareRow(row);
           return (
             <StyledTr
               {...row.getRowProps()}
-              {...theme.table?.tr}
-              {...theme.table?.trBody}
+              {...theme.defaultStyles.tr}
+              {...theme.defaultStyles.trBody}
               onClick={() => handleRowClick(row.id)}
             >
               {row.cells.map((cell) => {
                 return (
-                  <StyledTd {...cell.getCellProps()} {...theme.table?.td}>
+                  <StyledTd
+                    {...cell.getCellProps()}
+                    {...theme.defaultStyles.td}
+                  >
                     {cell.render('Cell')}
                   </StyledTd>
                 );

diff --git a/packages/components/src/packages/atoms/table/__test__/__snapshots__/index.test.tsx.snap b/packages/components/src/packages/atoms/table/__test__/__snapshots__/index.test.tsx.snap
@@ -8,11 +8,15 @@ exports[`<Table /> should render correctly 1`] = `
   >
     <styled.table
       className=""
+      height="100%"
       role="table"
+      width="100%"
     >
       <table
-        className="sc-jSMfEi egMCEo"
+        className="sc-jSMfEi eVsqtd"
+        height="100%"
         role="table"
+        width="100%"
       >
         <styled.thead>
           <thead

diff --git a/packages/components/src/packages/primatives/box/styled.ts b/packages/components/src/packages/primatives/box/styled.ts
@@ -9,6 +9,7 @@ import {
   flexbox,
   system,
   get,
+  // pseudo,
   getContrast,
 } from '@aw-web-design/styled-system';
 import styled from 'styled-components';
@@ -37,6 +38,7 @@ export const StyledBoxProps = compose(
   border,
   shadow,
   flexbox,
+  // pseudo,
   utilProps
 );
 

diff --git a/packages/components/src/packages/theme/index.ts b/packages/components/src/packages/theme/index.ts
@@ -1,10 +1,10 @@
-import { IThemeColorsType, ModeThemeType } from '../../../dist';
-import { ITheme } from '../utils';
+import { ITheme, IThemeColorsType, ModeThemeType } from '../utils';
 
 import colors from './colors';
 import borders from './dist/borders';
 import breakpoints from './dist/breakpoints';
 import breakpointSizes from './dist/breakpointSizes';
+import defaultStyles from './dist/defaultStyles';
 import elevation from './dist/elevation';
 import fonts from './dist/fonts';
 import fontSizes from './dist/fontSizes';
@@ -41,6 +41,7 @@ const theme: ITheme<typeof variants> = {
   ...opacity,
   ...space,
   ...spacing,
+  ...defaultStyles,
 };
 
 export default theme;
diff --git a/packages/components/src/packages/utils/theme-provider/types.ts b/packages/components/src/packages/utils/theme-provider/types.ts
@@ -29,7 +29,7 @@ export type IThemeColorsType = {
   };
 };
 
-export interface ITheme<V extends {}> {
+export interface ITheme<V extends unknown> {
   colors?: ModeThemeType & IThemeColorsType;
   variants?: V;
   fonts: Record<string, string>;

diff --git a/packages/styled-system/src/core/styleFunction.ts b/packages/styled-system/src/core/styleFunction.ts
@@ -1,4 +1,4 @@
-import { Properties } from 'csstype';
+import { Properties, Pseudos } from 'csstype';
 
 import { Scale } from './types';
 import { get } from './util';
@@ -18,7 +18,7 @@ export interface StyleFn {
 }
 
 export interface CreateStyleFunctionArgs {
-  property?: keyof Properties;
+  property?: keyof Properties | `&${Pseudos}`;
   properties?: Array<keyof Properties>;
   scale?: string;
   transform?: (
@@ -49,6 +49,7 @@ export function createStyleFunction({
     }
 
     p.forEach((prop) => {
+      // @ts-ignore
       result[prop] = value;
     });
 

diff --git a/packages/styled-system/src/core/system.ts b/packages/styled-system/src/core/system.ts
@@ -7,11 +7,11 @@ import {
   StyleFn,
 } from './styleFunction';
 
-export interface SystemConfig {
-  [key: string]: boolean | CreateStyleFunctionArgs;
-}
+export type SystemConfig<T extends string> = {
+  [key in T]: boolean | CreateStyleFunctionArgs;
+};
 
-export function system(args: SystemConfig = {}): Parser {
+export function system(args: SystemConfig<string> = {}): Parser {
   const config: { [key: string]: StyleFn } = {};
 
   Object.keys(args).forEach((key) => {

diff --git a/packages/styled-system/src/index.ts b/packages/styled-system/src/index.ts
@@ -34,9 +34,10 @@ export { shadow, ShadowProps } from './parsers/shadow';
 export { space, SpaceProps } from './parsers/space';
 export { transition, TransitionProps } from './parsers/transition';
 export { typography, TypographyProps } from './parsers/typography';
+export { pseudo } from './parsers/pseudo';
 
 // pseudo props and mixin
-export { pseudoMixin, PseudoProps } from './pseudo';
+// export { pseudoMixin, PseudoProps } from './pseudo';
 
 // styled-system shouldForwardProp
 export {

diff --git a/packages/styled-system/src/parsers/animation.ts b/packages/styled-system/src/parsers/animation.ts
@@ -38,7 +38,7 @@ export interface AnimationProps<ThemeType extends Theme = RequiredTheme> {
   animationPlayState?: ResponsiveValue<Property.AnimationPlayState, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   animation: {
     property: 'animation',
     scale: 'animation.animation',

diff --git a/packages/styled-system/src/parsers/background.ts b/packages/styled-system/src/parsers/background.ts
@@ -42,7 +42,7 @@ export interface BackgroundProps<ThemeType extends Theme = RequiredTheme> {
   bgAttachment?: ResponsiveValue<Property.BackgroundAttachment, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   background: {
     property: 'background',
     scale: 'colors',

diff --git a/packages/styled-system/src/parsers/border.ts b/packages/styled-system/src/parsers/border.ts
@@ -90,7 +90,7 @@ export interface BorderProps<ThemeType extends Theme = RequiredTheme> {
   borderY?: ResponsiveValue<Property.Border<TLengthStyledSystem>, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   border: {
     property: 'border',
     scale: 'borders',

diff --git a/packages/styled-system/src/parsers/color.ts b/packages/styled-system/src/parsers/color.ts
@@ -13,7 +13,7 @@ export interface ColorProps<
   opacity?: ResponsiveValue<Property.Opacity, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   backgroundColor: {
     property: 'backgroundColor',
     scale: 'colors',

diff --git a/packages/styled-system/src/parsers/extendedFlexbox.ts b/packages/styled-system/src/parsers/extendedFlexbox.ts
@@ -10,7 +10,7 @@ export interface ExtendedFlexboxProps<ThemeType extends Theme = RequiredTheme>
   direction?: FlexboxProps['flexDirection'];
 }
 
-const extendedConfig: SystemConfig = {
+const extendedConfig: SystemConfig<string> = {
   align: {
     property: 'alignItems',
   },

diff --git a/packages/styled-system/src/parsers/extendedGrid.ts b/packages/styled-system/src/parsers/extendedGrid.ts
@@ -15,7 +15,7 @@ export interface ExtendedGridProps<ThemeType extends Theme = RequiredTheme>
   area?: GridProps['gridArea'];
 }
 
-const extendedConfig: SystemConfig = {
+const extendedConfig: SystemConfig<string> = {
   row: {
     property: 'gridRow',
   },

diff --git a/packages/styled-system/src/parsers/flexbox.ts b/packages/styled-system/src/parsers/flexbox.ts
@@ -32,7 +32,7 @@ export interface FlexboxProps<ThemeType extends Theme = RequiredTheme> {
   placeSelf?: ResponsiveValue<Property.PlaceSelf, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   alignItems: {
     property: 'alignItems',
   },

diff --git a/packages/styled-system/src/parsers/grid.ts b/packages/styled-system/src/parsers/grid.ts
@@ -47,7 +47,7 @@ export interface GridProps<ThemeType extends Theme = RequiredTheme> {
   gridArea?: ResponsiveValue<Property.GridArea, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   gridGap: {
     property: 'gridGap',
     scale: 'space',

diff --git a/packages/styled-system/src/parsers/layout.ts b/packages/styled-system/src/parsers/layout.ts
@@ -43,7 +43,7 @@ export interface LayoutProps<ThemeType extends Theme = RequiredTheme> {
   overflowY?: ResponsiveValue<Property.OverflowY, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   width: {
     property: 'width',
     scale: 'sizes',

diff --git a/packages/styled-system/src/parsers/other.ts b/packages/styled-system/src/parsers/other.ts
@@ -31,7 +31,7 @@ export interface OtherProps<ThemeType extends Theme = RequiredTheme> {
   outlineColor?: ResponsiveValue<ThemeValue<'colors', ThemeType>, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   appearance: {
     property: 'appearance',
   },

diff --git a/packages/styled-system/src/parsers/position.ts b/packages/styled-system/src/parsers/position.ts
@@ -18,7 +18,7 @@ export interface PositionProps<ThemeType extends Theme = RequiredTheme> {
   left?: ResponsiveValue<Property.Left<TLengthStyledSystem>, ThemeType>;
 }
 
-const config: SystemConfig = {
+const config: SystemConfig<string> = {
   position: {
     property: 'position',
   },