Cleanup files

ooni · Jul 11, 2024 · cfc1f3a · cfc1f3a
1 parent 965ae2c
commit cfc1f3a
Show file tree

Hide file tree

Showing 17 changed files with 357 additions and 2,459 deletions.
diff --git a/.babelrc b/.babelrc
@@ -11,6 +11,5 @@
     ],
     "@babel/preset-typescript",
     "@babel/preset-react"
-  ],
-  "plugins": ["babel-plugin-styled-components"]
+  ]
 }
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -14,7 +14,6 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@chromatic-com/storybook',
-    '@storybook/addon-mdx-gfm'
   ],
 
   framework: {

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,5 @@
 import type { Preview } from '@storybook/react'
 import React from 'react'
-import { ThemeProvider } from 'styled-components'
 import '../src/tailwind.css'
 import theme from '../src/theme'
 
@@ -13,13 +12,7 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={theme}>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
 }
 
 export default preview
diff --git a/package.json b/package.json
@@ -9,38 +9,33 @@
   "author": "Arturo Filastò <arturo@filasto.net>",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "@styled-system/css": "^5.1.5",
-    "@styled-system/should-forward-prop": "^5.1.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "mini-svg-data-uri": "^1.4.4",
     "react-select": "^5.8.0",
-    "styled-system": "^5.1.5",
-    "tailwind-merge": "^2.3.0",
-    "yalc": "^1.0.0-pre.53"
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@biomejs/biome": "1.5.3",
-    "@chromatic-com/storybook": "^1.6.0",
+    "@chromatic-com/storybook": "^1.6.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-mdx-gfm": "^8.1.11",
-    "@storybook/addon-onboarding": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-onboarding": "^8.2.1",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/react": "^8.2.1",
+    "@storybook/react-vite": "^8.2.1",
+    "@storybook/test": "^8.2.1",
     "@svgr/rollup": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/dom": "^9.3.4",
@@ -50,16 +45,12 @@
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
-    "@types/styled-system": "^5.1.22",
-    "@types/styled-system__css": "^5.0.21",
     "autoprefixer": "^10.4.17",
     "babel-plugin-inline-react-svg": "^2.0.2",
-    "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
     "gh-pages": "^6.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-styled-components": "^7.1.1",
     "jest-svg-transformer": "^1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -73,23 +64,17 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.1.11",
-    "styled-components": "^6.1.11",
+    "storybook": "^8.2.1",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",
     "typescript": "^5.5.3",
-    "vite": "^5.3.3"
-  },
-  "resolutions": {
-    "serialize-javascript": "^6.0.0",
-    "node-fetch": "^2.6.7",
-    "jackspeak": "2.1.1"
+    "vite": "^5.3.3",
+    "yalc": "^1.0.0-pre.53"
   },
   "peerDependencies": {
     "react": ">= 17",
     "react-icons": ">= 4",
-    "styled-components": ">= 6",
     "tailwindcss": ">=3.0.0"
   },
   "scripts": {
@@ -110,12 +95,5 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build"
   },
-  "files": [
-    "dist",
-    "animations",
-    "svgs",
-    "index.d.ts",
-    "icons",
-    "tailwind"
-  ]
+  "files": ["dist", "animations", "svgs", "index.d.ts", "icons", "tailwind"]
 }
diff --git a/src/__test__/Button.test.tsx b/src/__test__/Button.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
 import { screen } from '@testing-library/react'
 import 'jest-styled-components'
-import renderWithWrapper from './index'
+import React from 'react'
 import { Button } from '..'
+import renderWithWrapper from './index'
 
 describe('Button', () => {
   test('renders Button', () => {
@@ -27,13 +27,4 @@ describe('Button', () => {
     // expect(buttonElement).toHaveStyleRule('color', '#0588cb')
     expect(buttonElement).toHaveStyleRule('background-color', 'transparent')
   })
-
-  test('renders Button with rebass props', () => {
-    renderWithWrapper({ component: <Button width={1} m={2} fontSize={2} /> })
-
-    const buttonElement = screen.getByRole('button')
-    expect(buttonElement).toHaveStyleRule('width', '100%')
-    expect(buttonElement).toHaveStyleRule('margin', '8px')
-    expect(buttonElement).toHaveStyleRule('font-size', '22px')
-  })
 })
diff --git a/src/__test__/index.tsx b/src/__test__/index.tsx
@@ -1,7 +1,5 @@
 import { render } from '@testing-library/react'
 import React, { ReactElement } from 'react'
-import { ThemeProvider } from 'styled-components'
-import theme from '../theme'
 
 interface IRenderWithWrapper {
   component: ReactElement
@@ -13,9 +11,7 @@ interface IWrapper {
 }
 
 function renderWithWrapper({ component, options }: IRenderWithWrapper) {
-  const Wrapper = ({ children }: IWrapper) => (
-    <ThemeProvider theme={theme}>{children}</ThemeProvider>
-  )
+  const Wrapper = ({ children }: IWrapper) => <>{children}</>
 
   return render(component, { wrapper: Wrapper, ...options })
 }

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -8,7 +8,7 @@ export interface InputProps {
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ error, name, label, ...rest }, ref) => {
+  ({ error, name, label, ...props }, ref) => {
     return (
       <div>
         {label && (
@@ -39,6 +39,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                 : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
             }
           `}
+          {...props}
         />
         {error && <ErrorMessage>{error}</ErrorMessage>}
       </div>

diff --git a/src/components/Label.tsx b/src/components/Label.tsx
@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 interface LabelProps {
   children?: React.ReactNode
 }
-// React.LabelHTMLAttributes<HTMLLabelElement>
+
 const Label = forwardRef<HTMLLabelElement, LabelProps>((props, ref) => (
   <label
     ref={ref}

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -33,7 +33,7 @@ export const Modal = ({
     <div className={`relative ${!show && 'hidden'}`}>
       <div
         className={twMerge(
-          'fixed top-[50%] left-[50%] transform-[translate(-50%, -50%)] max-w-[100vw] max-h-[100vh] overflow-auto z-[1050] bg-white rounded',
+          'fixed top-[50%] left-[50%] transform-[translate(-50%,-50%)] max-w-[100vw] max-h-[100vh] overflow-auto z-[1050] bg-white rounded',
           className,
         )}
         {...rest}

diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx
@@ -16,6 +16,7 @@ const MultiSelect = ({
   options,
   className,
   error,
+  ...props
 }: MultiSelectProps) => (
   <div className={className}>
     {label && (
@@ -63,6 +64,7 @@ const MultiSelect = ({
         multiValue: () => 'bg-gray-300',
         multiValueRemove: () => 'hover:cursor-pointer text-red-700',
       }}
+      {...props}
     />
     {error && <ErrorMessage>{error}</ErrorMessage>}
   </div>

diff --git a/src/components/MultiSelectCreatable.tsx b/src/components/MultiSelectCreatable.tsx
@@ -30,6 +30,7 @@ const MultiSelectCreatable = ({
   onChange,
   onBlur,
   error,
+  ...props
 }: MultiSelectCreatableProps) => {
   const [inputValue, setInputValue] = React.useState('')
   const [value, setValue] = React.useState<MultiValue<Option>>(initialValue)
@@ -112,6 +113,7 @@ const MultiSelectCreatable = ({
             },
           }),
         }}
+        {...props}
       />
       {error && <ErrorMessage>{error}</ErrorMessage>}
     </div>

diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
@@ -6,7 +6,7 @@ export interface RadioButtonProps extends React.HTMLProps<HTMLInputElement> {
 }
 
 const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
-  ({ label, name, ...rest }, ref) => {
+  ({ label, name, ...props }, ref) => {
     return (
       <label
         htmlFor={name}
@@ -42,8 +42,8 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
             focus:outline-offset-1
             focus:ring-blue-100
           "
+          {...props}
         />
-
         {label}
       </label>
     )

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -7,7 +7,7 @@ export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
 }
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ label, name, className, error, ...rest }, ref) => (
+  ({ label, name, className, error, ...props }, ref) => (
     <div className={className}>
       {label && (
         <label className="font-semibold mb-1 block" htmlFor={name}>
@@ -42,7 +42,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
               : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
           }
         `}
-        {...rest}
+        {...props}
       />
       {error && <ErrorMessage>{error}</ErrorMessage>}
     </div>

diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
@@ -9,7 +9,7 @@ export interface TextareaProps {
 }
 
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ error, label, name, ...rest }, ref) => {
+  ({ error, label, name, ...props }, ref) => {
     return (
       <div>
         {label && (
@@ -39,7 +39,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
             }
           `}
-          {...rest}
+          {...props}
         />
         {error && <ErrorMessage>{error}</ErrorMessage>}
       </div>

diff --git a/src/types/declarations.d.ts b/src/types/declarations.d.ts