From 7762141270f0cf4f69fb6f634ff427dc81350cad Mon Sep 17 00:00:00 2001 From: majakomel Date: Wed, 3 Jul 2024 17:32:46 -0400 Subject: [PATCH] Style components with tailwind & update storybook --- .storybook/main.ts | 16 +- package.json | 62 +- postcss.config.js | 2 + src/__test__/Heading.test.tsx | 57 - src/__test__/Hero.test.tsx | 34 - src/__test__/Icons.test.tsx | 9 +- src/__test__/InputWithIconButton.test.tsx | 50 - src/__test__/Link.test.tsx | 43 - src/__test__/Text.test.tsx | 32 - src/components/Box.tsx | 48 - src/components/Button.tsx | 194 +- src/components/ButtonTW.tsx | 96 - src/components/Checkbox.tsx | 119 +- src/components/ErrorMessage.tsx | 7 +- src/components/FacebookShareButton.tsx | 17 +- src/components/Flex.tsx | 10 - src/components/Heading.tsx | 32 - src/components/Hero.tsx | 9 - src/components/HeroLead.tsx | 7 - src/components/IconButton.tsx | 10 +- src/components/Image.tsx | 17 - src/components/Input.tsx | 77 +- src/components/InputWithIconButton.tsx | 32 - src/components/Label.tsx | 15 +- src/components/Link.tsx | 9 - src/components/LogoOONIRun.tsx | 8 +- src/components/Modal.tsx | 87 +- src/components/MultiSelect.tsx | 127 +- src/components/MultiSelectCreatable.tsx | 211 +- src/components/RadioButton.tsx | 90 +- src/components/RadioGroup.tsx | 24 +- src/components/Select.tsx | 88 +- src/components/Text.tsx | 9 - src/components/Textarea.tsx | 68 +- src/components/TwitterShareButton.tsx | 21 +- src/index.ts | 12 +- src/theme/index.ts | 515 ++-- src/types/index.ts | 70 +- stories/Button.stories.tsx | 33 +- stories/ButtonTW.stories.tsx | 73 - stories/Checkbox.stories.tsx | 8 +- stories/Colors.mdx | 238 +- stories/GettingStarted.mdx | 3 +- stories/Heading.stories.tsx | 39 - stories/Hero.stories.tsx | 26 - stories/InputWithIconButton.stories.tsx | 31 - stories/Link.stories.tsx | 19 - stories/Modal.stories.tsx | 10 +- stories/MultiSelect.stories.tsx | 9 +- stories/MultiSelectCreatable.stories.tsx | 7 +- stories/OONIIcons.stories.tsx | 13 +- stories/RadioGroup.stories.tsx | 18 +- stories/Select.stories.tsx | 6 +- stories/Text.stories.tsx | 26 - stories/Textarea.stories.tsx | 7 +- stories/components/ColorPalette.tsx | 11 +- tailwind.config.js | 31 +- yarn.lock | 2692 ++++++++++++++++----- 58 files changed, 2956 insertions(+), 2678 deletions(-) delete mode 100644 src/__test__/Heading.test.tsx delete mode 100644 src/__test__/Hero.test.tsx delete mode 100644 src/__test__/InputWithIconButton.test.tsx delete mode 100644 src/__test__/Link.test.tsx delete mode 100644 src/__test__/Text.test.tsx delete mode 100644 src/components/Box.tsx delete mode 100644 src/components/ButtonTW.tsx delete mode 100644 src/components/Flex.tsx delete mode 100644 src/components/Heading.tsx delete mode 100644 src/components/Hero.tsx delete mode 100644 src/components/HeroLead.tsx delete mode 100644 src/components/Image.tsx delete mode 100644 src/components/InputWithIconButton.tsx delete mode 100644 src/components/Link.tsx delete mode 100644 src/components/Text.tsx delete mode 100644 stories/ButtonTW.stories.tsx delete mode 100644 stories/Heading.stories.tsx delete mode 100644 stories/Hero.stories.tsx delete mode 100644 stories/InputWithIconButton.stories.tsx delete mode 100644 stories/Link.stories.tsx delete mode 100644 stories/Text.stories.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index c8d06d3d..43f37f27 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -5,21 +5,27 @@ const config: StorybookConfig = { '../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', ], + staticDirs: ['../src/fonts/'], + addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-onboarding', '@storybook/addon-interactions', - '@storybook/addon-mdx-gfm', - '@chromatic-com/storybook' + '@chromatic-com/storybook', + '@storybook/addon-mdx-gfm' ], + framework: { name: '@storybook/react-vite', options: {}, }, - docs: { - autodocs: 'tag', - }, + + docs: {}, + + typescript: { + reactDocgen: 'react-docgen-typescript' + } } export default config diff --git a/package.json b/package.json index 76a170fd..2031fcf4 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,12 @@ "@styled-system/css": "^5.1.5", "@styled-system/should-forward-prop": "^5.1.5", "class-variance-authority": "^0.7.0", - "clsx": "^2.1.0", + "clsx": "^2.1.1", + "mini-svg-data-uri": "^1.4.4", "react-select": "^5.8.0", - "styled-system": "^5.1.5" + "styled-system": "^5.1.5", + "tailwind-merge": "^2.3.0", + "yalc": "^1.0.0-pre.53" }, "devDependencies": { "@babel/core": "^7.23.9", @@ -22,22 +25,22 @@ "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", "@biomejs/biome": "1.5.3", - "@chromatic-com/storybook": "^1", + "@chromatic-com/storybook": "^1.6.0", "@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.0.9", - "@storybook/addon-interactions": "^8.0.9", - "@storybook/addon-links": "^8.0.9", - "@storybook/addon-mdx-gfm": "^8.0.9", - "@storybook/addon-onboarding": "^8.0.9", - "@storybook/blocks": "^8.0.9", - "@storybook/react": "^8.0.9", - "@storybook/react-vite": "^8.0.9", - "@storybook/test": "^8.0.9", + "@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", "@svgr/rollup": "^8.1.0", "@tailwindcss/forms": "^0.5.7", "@testing-library/dom": "^9.3.4", @@ -58,10 +61,10 @@ "jest-environment-jsdom": "^29.7.0", "jest-styled-components": "^7.1.1", "jest-svg-transformer": "^1.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-icons": "^5.0.1", - "rimraf": "^5.0.1", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-icons": "^5.2.1", + "rimraf": "^5.0.7", "rollup": "^4.12.0", "rollup-plugin-copy": "^3.5.0", "rollup-plugin-delete": "^2.0.0", @@ -70,13 +73,13 @@ "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-typescript2": "^0.36.0", "rollup-plugin-visualizer": "^5.12.0", - "storybook": "^8.0.9", - "styled-components": "^6.1.8", - "tailwindcss": "^3.4.1", - "ts-jest": "^29.1.2", - "tslib": "^2.6.2", - "typescript": "^5.3.3", - "vite": "^5.1.3" + "storybook": "^8.1.11", + "styled-components": "^6.1.11", + "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", @@ -86,10 +89,12 @@ "peerDependencies": { "react": ">= 17", "react-icons": ">= 4", - "styled-components": ">= 6" + "styled-components": ">= 6", + "tailwindcss": ">=3.0.0" }, "scripts": { "build": "yarn run rollup -c", + "build:tailwind": "tailwindcss -o tailwind/tailwind.css", "create-icons-dir": "rimraf src/components/icons && npx mkdirp src/components/icons", "create-icons": "npm run create-icons-dir && node src/bin/create-icons", "tag": "git tag -s -a v$npm_package_version -m \"ooni-components $npm_package_version\"", @@ -105,5 +110,12 @@ "storybook": "storybook dev -p 6006", "storybook:build": "storybook build" }, - "files": ["dist", "animations", "svgs", "index.d.ts", "icons"] + "files": [ + "dist", + "animations", + "svgs", + "index.d.ts", + "icons", + "tailwind" + ] } diff --git a/postcss.config.js b/postcss.config.js index 33ad091d..825cb186 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,7 @@ module.exports = { plugins: { + 'postcss-import': {}, + 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/src/__test__/Heading.test.tsx b/src/__test__/Heading.test.tsx deleted file mode 100644 index 5dbcf83e..00000000 --- a/src/__test__/Heading.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' -import { screen } from '@testing-library/react' -import 'jest-styled-components' -import renderWithWrapper from './index' -import { Heading } from '..' - -describe('Heading', () => { - test('renders Heading', () => { - renderWithWrapper({ component: }) - - const headingElement = screen.getByRole('heading') - expect(headingElement).toBeInTheDocument() - }) - - test('render Heading with default h prop', () => { - renderWithWrapper({ component: }) - - const headingElement = screen.getByRole('heading', { level: 1 }) - expect(headingElement).toBeInTheDocument() - }) - - test('renders Heading with correct h prop', () => { - renderWithWrapper({ component: }) - - const headingElement = screen.getByRole('heading', { level: 3 }) - expect(headingElement).toBeInTheDocument() - }) - - test('render Heading with text', () => { - renderWithWrapper({ component: OONI Run! }) - - const headingElement = screen.getByText(/OONI Run!/i) - expect(headingElement).toBeVisible() - }) - - test('render Heading with variant styles', () => { - renderWithWrapper({ component: OONI Run! }) - - const headingElement = screen.getByRole('heading') - expect(headingElement).toHaveStyleRule('font-size', '36px') - expect(headingElement).toHaveStyleRule('font-weight', '300') - expect(headingElement).toHaveStyleRule('letter-spacing', '-1px') - }) - - test('render Heading with rebass style props', () => { - renderWithWrapper({ - component: ( - - OONI Run! - - ), - }) - - const headingElement = screen.getByRole('heading') - expect(headingElement).toHaveStyleRule('color', 'red') - }) -}) diff --git a/src/__test__/Hero.test.tsx b/src/__test__/Hero.test.tsx deleted file mode 100644 index 560373b9..00000000 --- a/src/__test__/Hero.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' -import { screen } from '@testing-library/react' -import 'jest-styled-components' -import renderWithWrapper from './index' -import { Hero, HeroLead } from '..' - -describe('Hero and HeroLead', () => { - test('renders Hero', () => { - renderWithWrapper({ component: }) - - const heroElement = screen.getByTestId('test-hero') - expect(heroElement).toBeInTheDocument() - }) - - test('renders HeroLead', () => { - renderWithWrapper({ - component: Testing, - }) - - const heroLeadElement = screen.getByTestId('test-hero-lead') - expect(heroLeadElement).toBeInTheDocument() - expect(heroLeadElement).toHaveTextContent(/Testing/i) - }) - - test('renders Hero with variant styles', () => { - renderWithWrapper({ component: }) - - const heroElement = screen.getByTestId('test-hero') - expect(heroElement).toHaveStyleRule('width', '100%') - expect(heroElement).toHaveStyleRule('text-align', 'center') - expect(heroElement).toHaveStyleRule('color', '#f8f9fa') - expect(heroElement).toHaveStyleRule('font-size', '28px') - }) -}) diff --git a/src/__test__/Icons.test.tsx b/src/__test__/Icons.test.tsx index b9d0667e..58e0399b 100644 --- a/src/__test__/Icons.test.tsx +++ b/src/__test__/Icons.test.tsx @@ -1,6 +1,6 @@ -import React from 'react' import { render, screen } from '@testing-library/react' -import Flex from '../components/Flex' +import React from 'react' + import { CategoryCodeALDR, CategoryCodeANON, @@ -106,9 +106,10 @@ describe('Icons', () => { {Object.keys(icons).map((k, i) => { const Icon = icons[i] return ( - + // biome-ignore lint/suspicious/noArrayIndexKey: +
- +
) })} , diff --git a/src/__test__/InputWithIconButton.test.tsx b/src/__test__/InputWithIconButton.test.tsx deleted file mode 100644 index 385cad6c..00000000 --- a/src/__test__/InputWithIconButton.test.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react' -import { fireEvent, screen } from '@testing-library/react' -import userEvent from '@testing-library/user-event' -import { FaAndroid } from 'react-icons/fa' -import renderWithWrapper from './index' -import { InputWithIconButton } from '..' - -describe('InputWithIconButton', () => { - test('renders InputWithIconButton', () => { - renderWithWrapper({ component: }) - - const element = screen.getByRole('textbox') - expect(element).toBeInTheDocument() - }) - - test('renders InputWithIconButton with icon element', () => { - renderWithWrapper({ - component: ( - } /> - ), - }) - - const element = screen.getByTestId('test-icon') - expect(element).toBeInTheDocument() - }) - - test('should be able to type in Input', async () => { - renderWithWrapper({ component: }) - - const inputElement: HTMLInputElement = screen.getByRole('textbox') - await userEvent.type(inputElement, 'testing input') - expect(inputElement.value).toBe('testing input') - }) - - test('onAction is called on click', () => { - const onAction = jest.fn() - renderWithWrapper({ - component: ( - } - /> - ), - }) - - const inputWithButton = screen.getByRole('button') - fireEvent.click(inputWithButton) - expect(onAction).toHaveBeenCalled() - }) -}) diff --git a/src/__test__/Link.test.tsx b/src/__test__/Link.test.tsx deleted file mode 100644 index 1bac41e7..00000000 --- a/src/__test__/Link.test.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' -import { screen } from '@testing-library/react' -import 'jest-styled-components' -import renderWithWrapper from './index' -import { Link } from '..' - -describe('Link', () => { - test('renders Link', () => { - renderWithWrapper({ - component: , - }) - - const linkElement = screen.getByTestId('link-test') - expect(linkElement).toBeInTheDocument() - }) - - test('renders Link with color and content', () => { - renderWithWrapper({ - component: ( - - OONI Explorer - - ), - }) - - const linkElement = screen.getByTestId('link-test') - expect(linkElement).toHaveStyleRule('color', 'red') - expect(linkElement).toHaveTextContent(/OONI Explorer/i) - }) - - test('renders Link with href', () => { - renderWithWrapper({ - component: ( - - OONI - - ), - }) - - const linkElement = screen.getByTestId('link-test') - expect(linkElement).toHaveAttribute('href', 'https://ooni.org') - }) -}) diff --git a/src/__test__/Text.test.tsx b/src/__test__/Text.test.tsx deleted file mode 100644 index e8ad668d..00000000 --- a/src/__test__/Text.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { screen } from '@testing-library/react' -import 'jest-styled-components' -import renderWithWrapper from './index' -import { Text } from '..' - -describe('Text', () => { - test('renders Text', () => { - renderWithWrapper({ component: }) - - const textElement = screen.getByTestId('test-text') - expect(textElement).toBeInTheDocument() - }) - - test('renders Text with props', () => { - renderWithWrapper({ - component: ( - - ), - }) - - const textElement = screen.getByTestId('test-text') - expect(textElement).toHaveStyleRule('font-size', '18px') - expect(textElement).toHaveStyleRule('font-weight', '500') - expect(textElement).toHaveStyleRule('text-align', 'center') - }) -}) diff --git a/src/components/Box.tsx b/src/components/Box.tsx deleted file mode 100644 index add38408..00000000 --- a/src/components/Box.tsx +++ /dev/null @@ -1,48 +0,0 @@ -// @ts-nocheck -import css, { get } from '@styled-system/css' -import shouldForwardProp from '@styled-system/should-forward-prop' -import { styled } from 'styled-components' -import { - color, - compose, - flexbox, - layout, - space, - typography, -} from 'styled-system' -import { BoxProps } from 'types' - -const sx = (props: any) => css(props?.sx)(props?.theme) -const base = (props: any) => css(props?.__css)(props?.theme) -const variant = ({ theme, variant, tx = 'variants' }: any) => { - let styles = {} - if (Array.isArray(variant)) { - variant.forEach((v) => { - styles = { - ...styles, - ...css(get(theme, `${tx}.${v}`, get(theme, v)))(theme), - } - }) - } else { - styles = { - ...styles, - ...css(get(theme, `${tx}.${variant}`, get(theme, variant)))(theme), - } - } - return styles -} - -const Box = styled('div').withConfig({ shouldForwardProp })( - { - boxSizing: 'border-box', - margin: 0, - minWidth: 0, - }, - base, - variant, - sx, - (props) => props.css, - compose(space, layout, typography, color, flexbox), -) - -export default Box diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 24ea3ef4..09065e2f 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,114 +1,96 @@ -import React, { forwardRef } from 'react' -import { ButtonProps as BP } from 'types' -import Box from './Box' -import Flex from './Flex' +import { VariantProps, cva } from 'class-variance-authority' +import React from 'react' -type Size = 'small' | 'medium' | 'large' | 'xLarge' | null -type Color = 'default' | 'dark' -type BaseVariants = 'primary' | 'hollow' | 'inverted' -type AdditionalVariants = - | 'iconButton' - | 'link' - | 'facebookShare' - | 'twitterShare' -type Variant = - | BaseVariants - | AdditionalVariants - | Size - | 'disabled' - | `${BaseVariants}-disabled` - | Color - | `${Color}-hollow` -export interface ButtonProps extends BP { - disabled?: boolean - inverted?: boolean - hollow?: boolean +const buttonStyles = cva( + 'flex items-center justify-center rounded-full font-medium border-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-white focus:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none', + { + variants: { + variant: { + primary: 'border-blue-500 hover:bg-blue-700 hover:border-blue-700', + dark: 'border-black hover:bg-gray-500 hover:border-gray-500', + white: '', + danger: 'bg-red-400 text-white focus:ring-red-400', + }, + hollow: { + true: 'bg-transparent', + }, + transparent: { + true: 'bg-transparent border-0', + }, + size: { + s: 'px-4 py-1 text-sm', + m: 'px-6 py-2 text-base', + l: 'px-8 py-2 text-2xl', + xl: 'px-16 py-3.5 text-2xl', + }, + }, + defaultVariants: { + variant: 'primary', + size: 'm', + hollow: false, + }, + compoundVariants: [ + { + variant: 'primary', + hollow: true, + class: + 'text-blue-500 hover:text-blue-500 hover:text-white hover:bg-blue-100 hover:border-blue-500', + }, + { + variant: 'primary', + hollow: false, + class: 'bg-blue-500 text-white', + }, + { + variant: 'dark', + hollow: true, + class: + 'bg-transparent text-black hover:text-black hover:text-white hover:bg-gray-100 hover:border-black', + }, + { + variant: 'dark', + hollow: false, + class: 'bg-black text-white', + }, + ], + }, +) + +export interface Props + extends VariantProps, + React.HTMLAttributes { + type?: 'button' | 'submit' loading?: boolean - spinner?: React.ReactNode - variant?: Variant - color?: Color - size?: Size + disabled?: boolean startIcon?: React.ReactNode endIcon?: React.ReactNode - onClick?: React.MouseEventHandler + children: React.ReactNode } -const Button = forwardRef( - ( - { - hollow = false, - inverted = false, - disabled = false, - variant = 'primary', - size = 'medium', - color = 'default', - type = 'button', - loading = false, - spinner, - children, - startIcon, - endIcon, - ...rest - }: ButtonProps, - ref, - ) => { - let btnSize = size - let componentVariant = ['base', variant] - - componentVariant.push(size) - if (disabled) componentVariant.push('disabled') - if (color) componentVariant.push(`${color}${hollow ? '-hollow' : ''}`) - if (hollow) componentVariant.push('hollow') - if (inverted) componentVariant.push('inverted') - - if (variant === 'link' || variant === 'iconButton') { - btnSize = null - componentVariant = [variant] - } - - return ( - - - {startIcon && ( - - {startIcon} - - )} - {children} - {endIcon && ( - - {endIcon} - - )} - - {loading && spinner} - - ) - }, -) +const Button = ({ + variant, + hollow, + disabled = false, + size, + type = 'button', + loading = false, + startIcon, + endIcon, + children, + ...props +}: Props) => { + return ( + + ) +} export default Button diff --git a/src/components/ButtonTW.tsx b/src/components/ButtonTW.tsx deleted file mode 100644 index 3e607c63..00000000 --- a/src/components/ButtonTW.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { VariantProps, cva } from 'class-variance-authority' -import React from 'react' - -const buttonStyles = cva( - 'flex items-center justify-center rounded-full font-medium border-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-white focus:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none', - { - variants: { - variant: { - primary: 'border-blue-600 hover:bg-blue-800 hover:border-blue-800', - dark: 'border-black hover:bg-gray-600 hover:border-gray-600', - white: '', - danger: 'bg-red-500 text-white focus:ring-red-500', - }, - hollow: { - true: 'bg-transparent', - }, - transparent: { - true: 'bg-transparent border-0', - }, - size: { - s: 'px-4 py-1 text-sm', - m: 'px-6 py-2 text-base', - l: 'px-8 py-2 text-2xl', - xl: 'px-16 py-3.5 text-2xl', - }, - }, - defaultVariants: { - variant: 'primary', - size: 'm', - hollow: false, - }, - compoundVariants: [ - { - variant: 'primary', - hollow: true, - class: - 'text-blue-600 hover:text-blue-600 hover:text-white hover:bg-blue-100 hover:border-blue-600', - }, - { - variant: 'primary', - hollow: false, - class: 'bg-blue-600 text-white', - }, - { - variant: 'dark', - hollow: true, - class: - 'bg-transparent text-black hover:text-black hover:text-white hover:bg-gray-100 hover:border-black', - }, - { - variant: 'dark', - hollow: false, - class: 'bg-black text-white', - }, - ], - }, -) - -export interface Props - extends VariantProps, - React.HTMLAttributes { - type?: 'button' | 'submit' - loading?: boolean - disabled?: boolean - startIcon?: React.ReactNode - endIcon?: React.ReactNode - children: React.ReactNode -} - -const Button = ({ - variant, - hollow, - disabled = false, - size, - type = 'button', - loading = false, - startIcon, - endIcon, - children, - ...props -}: Props) => { - return ( - - ) -} - -export default Button diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 8bf2fa63..16ed8ae5 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -1,116 +1,55 @@ import React, { forwardRef } from 'react' -import { CheckboxProps as CP } from 'types' -import { getMarginProps, omitMarginProps } from '../utils' -import Box from './Box' -import Flex from './Flex' - -export interface CheckboxProps extends CP { - error?: string | undefined +export interface CheckboxProps { + error?: string name: string label: string - reverse?: boolean + disabled?: boolean } -const Checkbox = forwardRef( - ( - { - className, - sx, - name, - label, - variant = 'checkbox', - reverse = false, - error, - ...props - }: CheckboxProps, - ref, - ) => ( +const Checkbox = forwardRef( + ({ name, label, error, disabled = false, ...props }, ref) => ( <> -
+
-
- +
+
+ {/* {error} */}
- - - - {label} - - ), ) diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx index b423e310..e9547274 100644 --- a/src/components/ErrorMessage.tsx +++ b/src/components/ErrorMessage.tsx @@ -1,16 +1,11 @@ import React, { ReactNode } from 'react' -import Text from './Text' interface ErrorMessageProps { children: ReactNode } const ErrorMessage = ({ children }: ErrorMessageProps) => { - return ( - - {children} - - ) + return

{children}

} export default ErrorMessage diff --git a/src/components/FacebookShareButton.tsx b/src/components/FacebookShareButton.tsx index c46ca718..20de1a37 100644 --- a/src/components/FacebookShareButton.tsx +++ b/src/components/FacebookShareButton.tsx @@ -1,10 +1,7 @@ import React from 'react' import { FaFacebook } from 'react-icons/fa' -import Button, { ButtonProps } from './Button' -import Link from './Link' -import Text from './Text' - -export interface FacebookShareButton extends ButtonProps { +import Button from './Button' +export interface FacebookShareButton { url?: string } @@ -13,14 +10,12 @@ const FacebookShareButton = ({ url = '', ...rest }: FacebookShareButton) => { href += `&u=${encodeURIComponent(url)}` return ( - - - + ) } diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx deleted file mode 100644 index a84aff8a..00000000 --- a/src/components/Flex.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { FlexProps } from 'types' -import React from 'react' -import { styled } from 'styled-components' -import Box from './Box' - -const Flex = styled(Box)({ - display: 'flex', -}) - -export default Flex diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx deleted file mode 100644 index 7ce86f96..00000000 --- a/src/components/Heading.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { TextProps } from 'types' -import Text from './Text' - -export interface HeadingProps extends TextProps { - h?: number -} - -const Heading = ({ h = 1, ...rest }: HeadingProps) => { - const getHeadingElement = () => { - switch (h) { - case 1: - return 'h1' - case 2: - return 'h2' - case 3: - return 'h3' - case 4: - return 'h4' - case 5: - return 'h5' - default: - return 'h3' - } - } - - return ( - - ) -} - -export default Heading diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx deleted file mode 100644 index f8886feb..00000000 --- a/src/components/Hero.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import { BoxProps } from 'types' -import Box from './Box' - -const Hero = (props: BoxProps) => { - return -} - -export default Hero diff --git a/src/components/HeroLead.tsx b/src/components/HeroLead.tsx deleted file mode 100644 index 52625ba7..00000000 --- a/src/components/HeroLead.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { TextProps } from 'types' -import Text from './Text' - -const HeroLead = (props: TextProps) => - -export default HeroLead diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx index 8c45bd9b..d9b491ed 100644 --- a/src/components/IconButton.tsx +++ b/src/components/IconButton.tsx @@ -1,16 +1,12 @@ import React, { ReactNode } from 'react' -import Button, { ButtonProps } from './Button' +import Button from './Button' -export interface IconButtonProps extends ButtonProps { +export interface IconButtonProps { icon: ReactNode } const IconButton = ({ icon, ...rest }: IconButtonProps) => { - return ( - - ) + return } export default IconButton diff --git a/src/components/Image.tsx b/src/components/Image.tsx deleted file mode 100644 index d8099e12..00000000 --- a/src/components/Image.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { forwardRef } from 'react' -import { ImageProps } from 'types' -import Box from './Box' - -const Image = forwardRef((props: ImageProps, ref) => ( - -)) - -export default Image diff --git a/src/components/Input.tsx b/src/components/Input.tsx index fabeb36a..6ba2e333 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -1,44 +1,49 @@ import React, { forwardRef } from 'react' -import { InputProps as IP } from 'types' -import { getMarginProps, omitMarginProps } from '../utils' import ErrorMessage from './ErrorMessage' -import Box from './Box' -import Text from './Text' -export interface InputProps extends IP { - error?: string | undefined +export interface InputProps { + error?: string label?: string + name: string } -const Input = forwardRef(({ error, name, label, ...rest }: InputProps, ref) => { - return ( - - {label && ( - - {label} - - )} - - {error && {error}} - - ) -}) +const Input = forwardRef( + ({ error, name, label, ...rest }, ref) => { + return ( +
+ {label && ( + + )} + + {error && {error}} +
+ ) + }, +) export default Input diff --git a/src/components/InputWithIconButton.tsx b/src/components/InputWithIconButton.tsx deleted file mode 100644 index 7ef912cc..00000000 --- a/src/components/InputWithIconButton.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { ReactNode } from 'react' -import { InputProps } from 'types' -import Box from './Box' -import Flex from './Flex' -import IconButton from './IconButton' -import Input from './Input' - -interface InputWithIconButtonProps extends InputProps { - onAction?: () => void - icon?: ReactNode -} - -export const InputWithIconButton = ({ - onAction, - icon, - ...rest -}: InputWithIconButtonProps) => { - return ( - - - - - {icon ? ( - - - - ) : null} - - ) -} - -export default InputWithIconButton diff --git a/src/components/Label.tsx b/src/components/Label.tsx index 30a4295f..37b70543 100644 --- a/src/components/Label.tsx +++ b/src/components/Label.tsx @@ -1,15 +1,14 @@ import React, { forwardRef } from 'react' -import { LabelProps } from 'types' -import Text from './Flex' -const Label = forwardRef((props: LabelProps, ref) => ( - +const Label = forwardRef((props, ref) => ( +
) } diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx index f80adfc6..238bd534 100644 --- a/src/components/MultiSelect.tsx +++ b/src/components/MultiSelect.tsx @@ -1,74 +1,71 @@ -import React, { forwardRef } from 'react' +import React from 'react' import Select from 'react-select' -import { SelectProps } from 'types' -import theme from '../theme' -import { getMarginProps, omitMarginProps } from '../utils' -import Box from './Box' -import Text from './Text' +import ErrorMessage from './ErrorMessage' -export interface MultiSelectProps extends SelectProps { +export interface MultiSelectProps { label?: string options: { label: string; value: string | number }[] + name: string + className?: string + error?: string } -const MultiSelect = forwardRef( - ({ label, name, options, ...rest }: MultiSelectProps, ref) => ( - - {label && ( - - {label} - - )} - ({ + ...baseStyles, + borderRadius: '32px', + minHeight: '36.5px', + borderWidth: '1px', + boxShadow: 'none', + paddingLeft: '5px', + }), + indicatorSeparator: () => ({ + display: 'none', + }), + dropdownIndicator: (baseStyles) => ({ + ...baseStyles, + padding: '7px', + }), + multiValue: (baseStyles) => ({ + ...baseStyles, + borderRadius: '20px', + }), + multiValueRemove: () => ({ + svg: { display: 'none' }, + '&:before': { + content: '"✕"', + fontSize: '80%', + padding: '0 6px 0 4px', + }, + }), + }} + classNames={{ + control: (state) => + state.isFocused + ? 'border-blue-500 hover:border-blue-500' + : 'border-grey-700 hover:border-gray-800', + multiValue: () => 'bg-gray-300', + multiValueRemove: () => 'hover:cursor-pointer text-red-700', + }} + /> + {error && {error}} +
) export default MultiSelect diff --git a/src/components/MultiSelectCreatable.tsx b/src/components/MultiSelectCreatable.tsx index 9a4dd430..0aabf5f5 100644 --- a/src/components/MultiSelectCreatable.tsx +++ b/src/components/MultiSelectCreatable.tsx @@ -1,25 +1,15 @@ -import React, { - FocusEvent, - forwardRef, - KeyboardEventHandler, - useEffect, -} from 'react' +import React, { FocusEvent, KeyboardEventHandler, useEffect } from 'react' import { MultiValue } from 'react-select' import CreatableSelect from 'react-select/creatable' -import { SelectProps as SP } from 'types' -import theme from '../theme' -import { getMarginProps, omitMarginProps } from '../utils' -import Box from './Box' import ErrorMessage from './ErrorMessage' -import Text from './Text' interface Option { readonly label: string readonly value: string } -export interface MultiSelectCreatableProps - extends Omit { +export interface MultiSelectCreatableProps { + name: string label?: string placeholder?: string value: MultiValue