feat: switch from styled-components to stitchesjs

refactor all components to make us of the stitches styling library ahead of removing styled
components and styled system from the package entirely

.storybook/preview.js

@@ -1,5 +1,5 @@
 import { addDecorator } from '@storybook/react'
-import StoryBookTheme from '../src/storybookTheme'
+import StoryBookTheme from '../src/components/storybookTheme'
 
 addDecorator(StoryBookTheme)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "camara",
-  "version": "1.0.0-beta.46",
+  "version": "1.0.0-beta.75",
   "description": "A design system that helps you build your ideas quickly",
   "author": {
     "name": "Presh Onyee",
@@ -130,10 +130,11 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-standard": "^5.0.0",
     "gh-pages": "^3.1.0",
-    "jest": "^27.0.0",
+    "jest": "^27.0.3",
+    "jest-watch-typeahead": "^0.6.4",
     "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
-    "polished": "^4.1.2",
+    "polished": "^4.1.3",
     "prettier": "^2.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -149,6 +150,7 @@
     "dist"
   ],
   "dependencies": {
+    "@stitches/react": "^0.1.9",
     "react-feather": "^2.0.9",
     "react-is": "^17.0.2"
   },

src/components/anchor/anchor.stories.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react';
-import { Anchor, AnchorProps } from '.';
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { Anchor, AnchorProps } from '.'
 
 export default {
   title: 'Components/Anchor',
   component: Anchor,
   args: {
     href: 'https://source.unsplash.com/8TQUF6UbpAk/1600x900',
-    children: 'Click me',
-  },
-} as Meta;
+    children: 'Click me'
+  }
+} as Meta
 
-const Template: Story<AnchorProps> = args => <Anchor {...args} />;
+const Template: Story<AnchorProps> = (args) => <Anchor {...args} />
 
 // Base default anchor
-export const Base = Template.bind({});
+export const Base = Template.bind({})
 
 // open link in new tab
-export const asNew = (args: AnchorProps) => <Anchor {...args} external />;
+export const External = (args: AnchorProps) => <Anchor {...args} external />
 
 // link appear as Button
-// export const asButton = (args: AnchorProps) => <Anchor {...args} asBtn />
+export const asButton = (args: AnchorProps) => <Anchor {...args} asBtn />

src/components/anchor/anchor.test.tsx

@@ -8,6 +8,15 @@ describe('Anchor', () => {
     expect(screen.getByText('Camara'))
     screen.debug()
   })
+  test('renders external Anchor component', () => {
+    render(
+      <Anchor external href='https://camara.space'>
+        Camara
+      </Anchor>
+    )
+    expect(screen.getByText('Camara'))
+    screen.debug()
+  })
   it('is truthy', () => {
     expect(Anchor).toBeTruthy()
   })

src/components/anchor/anchor.tsx

@@ -1,64 +1,60 @@
-import styled, { StyledComponentProps } from 'styled-components';
-import React, { FunctionComponent } from 'react';
-import { color, ColorProps, compose, space, SpaceProps } from 'styled-system';
+import React, { AnchorHTMLAttributes } from 'react'
+import { styled } from '../../stitches.config'
+import { Button } from '../button'
 
-type StyledAnchorProps = ColorProps & SpaceProps;
-
-type AnchorCompProps = StyledComponentProps<
-  'button',
-  any,
-  StyledAnchorProps,
-  never
->;
-
-export interface AnchorProps extends AnchorCompProps {
+export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /* link content */
-  children: React.ReactNode;
+  children: React.ReactNode
   /* Link URL */
-  href: string;
+  href: string
   /* Use Anchor as a Button? */
-  // asBtn?: boolean
+  asBtn?: boolean
   /* Open link in new tab? */
-  external?: boolean;
+  external?: boolean
 }
 
-const StyledAnchor = styled.a<AnchorProps>`
-  ${compose(color, space)}
-  text-decoration: none;
-  color: ${({ theme }) => theme.colors.button.background};
-  cursor: pointer;
-  /* visited Anchor */
-  &:visited {
-    color: 'purple';
-  }
-  /* mouse over Anchor */
-  &:hover {
-    color: ${({ theme }) => theme.colors.button.hover};
+const StyledAnchor = styled('a', {
+  textDecoration: 'none',
+  color: '$button_background',
+  cursor: 'pointer',
+  '&:visited': {
+    color: 'purple'
+  },
+  '&:hover': {
+    color: '$button_hover'
+  },
+  '&:active': {
+    color: '$button_focus'
   }
-  /* selected Anchor */
-  &:active {
-    color: ${({ theme }) => theme.colors.button.focus};
-  }
-`;
+})
+
+const LinkButton = styled(Button, {})
 
-export const Anchor: FunctionComponent<AnchorProps> = ({
+export const Anchor: React.FC<AnchorProps> = ({
   href,
   children,
   external,
+  asBtn
 }) => {
   if (external) {
     return (
-      <StyledAnchor href={href} target="_blank" rel="noopener noreferrer">
+      <StyledAnchor href={href} target='_blank' rel='noopener noreferrer'>
         {children}
       </StyledAnchor>
-    );
+    )
+  } else if (asBtn) {
+    return (
+      <StyledAnchor href={href}>
+        <LinkButton>{children}</LinkButton>
+      </StyledAnchor>
+    )
   } else {
-    return <StyledAnchor href={href}>{children}</StyledAnchor>;
+    return <StyledAnchor href={href}>{children}</StyledAnchor>
   }
-};
+}
 
 Anchor.defaultProps = {
-  external: false,
-};
+  external: false
+}
 
-Anchor.displayName = 'Anchor';
+Anchor.displayName = 'Anchor'