refactor(backdrop, badge, and table tsx, tests, stories, and default …

config.js

@@ -1,6 +1,6 @@
 const deepMerge = require('deepmerge')
 const Color = require('color')
-const customFormsPlugin = require('@tailwindcss/custom-forms')
+const customFormsPlugin = require('@tailwindcss/forms')
 const multiThemePlugin = require('tailwindcss-multi-theme')
 const shadowOutlinePlugin = ({ addUtilities, theme, variants }) => {
   const newUtilities = {}
@@ -9,7 +9,7 @@ const shadowOutlinePlugin = ({ addUtilities, theme, variants }) => {
     const color = value[300] ? value[300] : value
     const hsla = Color(color).alpha(0.45).hsl().string()
 
-    newUtilities[`.shadow-outline-${name}`] = {
+    newUtilities[`.ring-${name}`] = {
       'box-shadow': `0 0 0 3px ${hsla}`,
     }
   })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windmill/react-ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React UI component library built with Tailwind CSS",
   "main": "dist/index.js",
   "files": [
@@ -33,13 +33,15 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "tailwindcss": ">=1.4.6"
+    "tailwindcss": "^2.0.2"
   },
   "dependencies": {
-    "@tailwindcss/custom-forms": "0.2.1",
+    "@tailwindcss/forms": "^0.2.1",
+    "autoprefixer": "^10.1.0",
     "classnames": "2.2.6",
     "color": "3.1.2",
     "deepmerge": "4.2.2",
+    "postcss": "^8.2.2",
     "prop-types": "15.7.2",
     "react-focus-lock": "2.4.1",
     "react-transition-group": "4.4.1",
@@ -91,7 +93,7 @@
     "release-it": "14.2.0",
     "rimraf": "3.0.2",
     "style-loader": "1.2.1",
-    "tailwindcss": "1.4.6",
+    "tailwindcss": "2.0.2",
     "ts-jest": "26.3.0",
     "ts-loader": "8.0.3",
     "typescript": "4.0.2",

src/Backdrop.tsx

@@ -2,9 +2,9 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-const Backdrop = React.forwardRef<HTMLDivElement, Props>(function Backdrop(props, ref) {
+const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {
   const { className, ...other } = props
   const {
     theme: { backdrop },

src/Badge.tsx

@@ -2,14 +2,14 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * The type of the badge
    */
   type?: 'success' | 'danger' | 'warning' | 'neutral' | 'primary'
 }
 
-const Badge = React.forwardRef<HTMLSpanElement, Props>(function Badge(props, ref) {
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(props, ref) {
   const { className, children, type = 'primary', ...other } = props
 
   const {

src/Table.tsx

@@ -6,7 +6,7 @@ const Table = React.forwardRef<HTMLTableElement, Props>(function Table(props, re
   const { children, ...other } = props
   return (
     <div className="w-full overflow-x-auto">
-      <table className="w-full whitespace-no-wrap" ref={ref} {...other}>
+      <table className="w-full whitespace-nowrap" ref={ref} {...other}>
         {children}
       </table>
     </div>

src/__tests__/Button.test.tsx

@@ -144,7 +144,7 @@ describe('Primary Button', () => {
   })
 
   it('should contain primary active classes', () => {
-    const expected = 'active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple'
+    const expected = 'active:bg-purple-600 hover:bg-purple-700 focus:ring-purple'
     const wrapper = mount(<Button aria-label="test" />)
 
     expect(wrapper.find('button').getDOMNode().getAttribute('class')).toContain(expected)
@@ -158,7 +158,7 @@ describe('Primary Button', () => {
   })
 
   it('should not contain primary active classes when disabled', () => {
-    const expected = 'active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple'
+    const expected = 'active:bg-purple-600 hover:bg-purple-700 focus:ring-purple'
     const wrapper = mount(<Button aria-label="test" disabled />)
 
     expect(wrapper.find('button').getDOMNode().getAttribute('class')).not.toContain(expected)
@@ -175,7 +175,7 @@ describe('Outline Button', () => {
 
   it('should contain outline active classes', () => {
     const expected =
-      'active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:shadow-outline-gray'
+      'active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:ring-gray'
     const wrapper = mount(<Button aria-label="test" layout="outline" />)
 
     expect(wrapper.find('button').getDOMNode().getAttribute('class')).toContain(expected)
@@ -199,7 +199,7 @@ describe('Link Button', () => {
 
   it('should contain link active classes', () => {
     const expected =
-      'active:bg-transparent hover:bg-gray-100 focus:shadow-outline-gray dark:hover:bg-gray-500 dark:hover:text-gray-300 dark:hover:bg-opacity-10'
+      'active:bg-transparent hover:bg-gray-100 focus:ring-gray dark:hover:bg-gray-500 dark:hover:text-gray-300 dark:hover:bg-opacity-10'
     const wrapper = mount(<Button aria-label="test" layout="link" />)
 
     expect(wrapper.find('button').getDOMNode().getAttribute('class')).toContain(expected)

src/__tests__/Card.test.tsx

@@ -8,7 +8,7 @@ describe('Card', () => {
   })
 
   it('should render with base styles', () => {
-    const expected = 'min-w-0 rounded-lg shadow-xs overflow-hidden'
+    const expected = 'min-w-0 rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden'
     const wrapper = mount(<Card />)
 
     expect(wrapper.find(Card).getDOMNode().getAttribute('class')).toContain(expected)
@@ -29,7 +29,7 @@ describe('Card', () => {
   })
 
   it('should add classes to base styles', () => {
-    const expected = 'min-w-0 rounded-lg shadow-xs overflow-hidden bg-red-400'
+    const expected = 'min-w-0 rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden bg-red-400'
     const wrapper = mount(<Card className="bg-red-400" colored />)
 
     expect(wrapper.find(Card).getDOMNode().getAttribute('class')).toBe(expected)

src/__tests__/Input.test.tsx

@@ -17,7 +17,7 @@ describe('Input', () => {
 
   it('should render with active styles', () => {
     const expected =
-      'focus:border-purple-400 dark:border-gray-600 focus:shadow-outline-purple dark:focus:border-gray-600 dark:focus:shadow-outline-gray dark:bg-gray-700'
+      'focus:border-purple-400 dark:border-gray-600 focus:ring-purple dark:focus:border-gray-600 dark:focus:ring-gray dark:bg-gray-700'
     const wrapper = mount(<Input />)
 
     expect(wrapper.find('input').getDOMNode().getAttribute('class')).toContain(expected)
@@ -32,23 +32,23 @@ describe('Input', () => {
 
   it('should render with valid styles', () => {
     const expected =
-      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:shadow-outline-green dark:focus:shadow-outline-green'
+      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring-green dark:focus:ring-green'
     const wrapper = mount(<Input valid />)
 
     expect(wrapper.find('input').getDOMNode().getAttribute('class')).toContain(expected)
   })
 
   it('should render with invalid styles', () => {
     const expected =
-      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:shadow-outline-red dark:focus:shadow-outline-red'
+      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring-red dark:focus:ring-red'
     const wrapper = mount(<Input valid={false} />)
 
     expect(wrapper.find('input').getDOMNode().getAttribute('class')).toContain(expected)
   })
 
   it('should render with radio styles', () => {
     const expected =
-      'text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray'
+      'text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:ring-purple dark:focus:ring-gray'
     const wrapper = mount(<Input type="radio" />)
 
     expect(wrapper.find('input[type="radio"]').getDOMNode().getAttribute('class')).toContain(
@@ -58,7 +58,7 @@ describe('Input', () => {
 
   it('should render with checkbox styles', () => {
     const expected =
-      'text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray'
+      'text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:ring-purple dark:focus:ring-gray'
     const wrapper = mount(<Input type="checkbox" />)
 
     expect(wrapper.find('input[type="checkbox"]').getDOMNode().getAttribute('class')).toContain(

src/__tests__/Select.test.tsx

@@ -34,23 +34,23 @@ describe('Select', () => {
 
   it('should render with active styles', () => {
     const expected =
-      'focus:border-purple-400 dark:border-gray-600 dark:bg-gray-700 focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:focus:border-gray-600'
+      'focus:border-purple-400 dark:border-gray-600 dark:bg-gray-700 focus:ring-purple dark:focus:ring-gray dark:focus:border-gray-600'
     const wrapper = mount(<Select />)
 
     expect(wrapper.find('select').getDOMNode().getAttribute('class')).toContain(expected)
   })
 
   it('should render with valid styles', () => {
     const expected =
-      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:shadow-outline-green dark:focus:shadow-outline-green'
+      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring-green dark:focus:ring-green'
     const wrapper = mount(<Select valid />)
 
     expect(wrapper.find('select').getDOMNode().getAttribute('class')).toContain(expected)
   })
 
   it('should render with invalid styles', () => {
     const expected =
-      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:shadow-outline-red dark:focus:shadow-outline-red'
+      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring-red dark:focus:ring-red'
     const wrapper = mount(<Select valid={false} />)
 
     expect(wrapper.find('select').getDOMNode().getAttribute('class')).toContain(expected)

src/__tests__/TableContainer.test.tsx

@@ -8,7 +8,7 @@ describe('TableContainer', () => {
   })
 
   it('should render with base styles', () => {
-    const expected = 'w-full overflow-hidden rounded-lg shadow-xs'
+    const expected = 'w-full overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5'
     const wrapper = mount(<TableContainer />)
 
     expect(wrapper.find(TableContainer).getDOMNode().getAttribute('class')).toContain(expected)

src/__tests__/Textarea.test.tsx

@@ -16,7 +16,7 @@ describe('Textarea', () => {
 
   it('should render with active styles', () => {
     const expected =
-      'focus:border-purple-400 dark:border-gray-600 dark:focus:border-gray-600 dark:bg-gray-700 dark:focus:shadow-outline-gray focus:shadow-outline-purple'
+      'focus:border-purple-400 dark:border-gray-600 dark:focus:border-gray-600 dark:bg-gray-700 dark:focus:ring-gray focus:ring-purple'
     const wrapper = mount(<Textarea />)
 
     expect(wrapper.find('textarea').getDOMNode().getAttribute('class')).toContain(expected)
@@ -31,15 +31,15 @@ describe('Textarea', () => {
 
   it('should render with valid styles', () => {
     const expected =
-      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:shadow-outline-green dark:focus:shadow-outline-green'
+      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring-green dark:focus:ring-green'
     const wrapper = mount(<Textarea valid />)
 
     expect(wrapper.find('textarea').getDOMNode().getAttribute('class')).toContain(expected)
   })
 
   it('should render with invalid styles', () => {
     const expected =
-      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:shadow-outline-red dark:focus:shadow-outline-red'
+      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring-red dark:focus:ring-red'
     const wrapper = mount(<Textarea valid={false} />)
 
     expect(wrapper.find('textarea').getDOMNode().getAttribute('class')).toContain(expected)

src/stories/Backdrop.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Backdrop, { BackdropProps } from '../Backdrop'
+
+export default {
+  title: 'Backdrop',
+  component: Backdrop,
+} as Meta
+
+const Template: Story<BackdropProps> = (args) => <Backdrop {...args} />
+
+export const Regular = Template.bind({})
+Regular.args = {
+}

src/stories/Badge.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Badge, { BadgeProps } from '../Badge'
+
+export default {
+  title: 'Badge',
+  component: Badge,
+} as Meta
+
+const Template: Story<BadgeProps> = (args) => <Badge {...args} />
+
+export const Neutral = Template.bind({})
+Neutral.args = {
+  children: 'This is a neutral badge.',
+  type: 'neutral'
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  children: 'Success!',
+  type: 'success',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  children: 'Warning!',
+  type: 'warning',
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+  children: 'Problem!',
+  type: 'danger',
+}
+
+export const Primary = Template.bind({})
+Primary.args = {
+  type: 'primary',
+  children: "Primary theme.",
+}

src/stories/Button.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Button, { ButtonProps } from '../Button'
+
+import { FaHeart } from 'react-icons/fa'
+
+export default {
+  title: 'Button',
+  component: Button,
+} as Meta
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />
+
+export const Regular = Template.bind({})
+Regular.args = {
+  children: 'Regular',
+  size: 'regular'
+}
+
+export const Larger = Template.bind({})
+Larger.args = {
+  children: 'Larger',
+  size: 'larger'
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  children: 'Large',
+  size: 'large',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  children: 'Small',
+  size: 'small',
+}
+
+export const Outline = Template.bind({})
+Outline.args = {
+  children: 'Outline',
+  layout: 'outline'
+}
+
+export const Link = Template.bind({})
+Link.args = {
+  children: 'Link',
+  layout: 'link'
+}
+
+export const Icon = Template.bind({})
+Icon.args = {
+  children: 'Like',
+  icon: FaHeart
+}
+
+export const IconOutline = Template.bind({})
+IconOutline.args = {
+  children: 'Like',
+  layout: 'outline',
+  icon: FaHeart
+}
+
+export const IconLink = Template.bind({})
+IconLink.args = {
+  children: 'Like',
+  layout: 'link',
+  icon: FaHeart
+}
+

src/themes/default.ts

@@ -37,7 +37,7 @@ export default {
   },
   // TableContainer
   tableContainer: {
-    base: 'w-full overflow-hidden rounded-lg shadow-xs',
+    base: 'w-full overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5',
   },
   // TableCell
   tableCell: {
@@ -108,25 +108,25 @@ export default {
   textarea: {
     base: 'block w-full text-sm dark:text-gray-300 form-textarea focus:outline-none',
     active:
-      'focus:border-purple-400 dark:border-gray-600 dark:focus:border-gray-600 dark:bg-gray-700 dark:focus:shadow-outline-gray focus:shadow-outline-purple',
+      'focus:border-purple-400 dark:border-gray-600 dark:focus:border-gray-600 dark:bg-gray-700 dark:focus:ring-gray focus:ring-purple',
     disabled: 'cursor-not-allowed opacity-50 bg-gray-300 dark:bg-gray-800',
     valid:
-      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:shadow-outline-green dark:focus:shadow-outline-green',
+      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring-green dark:focus:ring-green',
     invalid:
-      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:shadow-outline-red dark:focus:shadow-outline-red',
+      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring-red dark:focus:ring-red',
   },
   // Select
   select: {
     base: 'block w-full text-sm dark:text-gray-300 focus:outline-none',
     active:
-      'focus:border-purple-400 dark:border-gray-600 dark:bg-gray-700 focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:focus:border-gray-600',
+      'focus:border-purple-400 dark:border-gray-600 dark:bg-gray-700 focus:ring-purple dark:focus:ring-gray dark:focus:border-gray-600',
     select: 'form-select leading-5',
     multiple: 'form-multiselect',
     disabled: 'cursor-not-allowed opacity-50 bg-gray-300 dark:bg-gray-800',
     valid:
-      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:shadow-outline-green dark:focus:shadow-outline-green',
+      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring-green dark:focus:ring-green',
     invalid:
-      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:shadow-outline-red dark:focus:shadow-outline-red',
+      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring-red dark:focus:ring-red',
   },
   // Label
   label: {
@@ -139,16 +139,16 @@ export default {
   input: {
     base: 'block w-full text-sm focus:outline-none dark:text-gray-300 form-input leading-5',
     active:
-      'focus:border-purple-400 dark:border-gray-600 focus:shadow-outline-purple dark:focus:border-gray-600 dark:focus:shadow-outline-gray dark:bg-gray-700',
+      'focus:border-purple-400 dark:border-gray-600 focus:ring-purple dark:focus:border-gray-600 dark:focus:ring-gray dark:bg-gray-700',
     disabled: 'cursor-not-allowed opacity-50 bg-gray-300 dark:bg-gray-800',
     valid:
-      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:shadow-outline-green dark:focus:shadow-outline-green',
+      'border-green-600 dark:bg-gray-700 focus:border-green-400 dark:focus:border-green-400 focus:ring-green dark:focus:ring-green',
     invalid:
-      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:shadow-outline-red dark:focus:shadow-outline-red',
+      'border-red-600 dark:bg-gray-700 focus:border-red-400 dark:focus:border-red-400 focus:ring-red dark:focus:ring-red',
     radio:
-      'text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray',
+      'text-purple-600 form-radio focus:border-purple-400 focus:outline-none focus:ring-purple dark:focus:ring-gray',
     checkbox:
-      'text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray',
+      'text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:ring-purple dark:focus:ring-gray',
   },
   // HelperText
   helperText: {
@@ -158,7 +158,7 @@ export default {
   },
   // Card
   card: {
-    base: 'min-w-0 rounded-lg shadow-xs overflow-hidden',
+    base: 'min-w-0 rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden',
     default: 'bg-white dark:bg-gray-800',
   },
   cardBody: {
@@ -193,19 +193,19 @@ export default {
     },
     primary: {
       base: 'text-white bg-purple-600 border border-transparent',
-      active: 'active:bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
+      active: 'active:bg-purple-600 hover:bg-purple-700 focus:ring-purple',
       disabled: 'opacity-50 cursor-not-allowed',
     },
     outline: {
       base: 'text-gray-600 border-gray-300 border dark:text-gray-400 focus:outline-none',
       active:
-        'active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:shadow-outline-gray',
+        'active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:ring-gray',
       disabled: 'opacity-50 cursor-not-allowed bg-gray-300',
     },
     link: {
       base: 'text-gray-600 dark:text-gray-400 focus:outline-none border border-transparent',
       active:
-        'active:bg-transparent hover:bg-gray-100 focus:shadow-outline-gray dark:hover:bg-gray-500 dark:hover:text-gray-300 dark:hover:bg-opacity-10',
+        'active:bg-transparent hover:bg-gray-100 focus:ring-gray dark:hover:bg-gray-500 dark:hover:text-gray-300 dark:hover:bg-opacity-10',
       disabled: 'opacity-50 cursor-not-allowed',
     },
     // this is the button that lives inside the DropdownItem