wip

ooni · May 28, 2024 · 7acd561 · 7acd561
1 parent a1fe736
commit 7acd561
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 200 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "@storybook/react-vite": "^8.0.9",
     "@storybook/test": "^8.0.9",
     "@svgr/rollup": "^8.1.0",
+    "@tailwindcss/forms": "^0.5.7",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",

diff --git a/src/__test__/Container.test.tsx b/src/__test__/Container.test.tsx
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
@@ -25,61 +25,93 @@ const Checkbox = forwardRef(
     }: CheckboxProps,
     ref,
   ) => (
-    <Flex
-      sx={{
-        ...(reverse && {
-          flexDirection: 'row-reverse',
-          justifyContent: 'flex-end',
-        }),
-        gap: 2,
-      }}
-      {...getMarginProps(props)}
-    >
-      <Box
-        as="input"
-        ref={ref}
-        type="checkbox"
-        id={name}
-        {...omitMarginProps(props)}
-        __css={{
-          flexShrink: 0,
-          flexGrow: 0,
-          color: 'blue5',
-          appearance: 'none',
-          margin: 0,
-          font: 'inherit',
-          width: '1.25em',
-          height: '1.25em',
-          border: '0.07em solid gray',
-          display: 'grid',
-          placeContent: 'center',
-          '&::before': {
-            backgroundColor: 'currentColor',
-            content: '""',
-            width: '0.75em',
-            height: '0.75em',
-            transform: 'scale(0)',
-            transition: '120ms transform ease-in-out',
-          },
-          '&:checked::before': {
-            transform: 'scale(1)',
-          },
-          '&:focus': {
-            outline: 'max(1px, 0.02em) solid currentColor',
-            outlineOffset: 'max(1px, 0.15em)',
-          },
-        }}
-      />
-      <Box
-        as="label"
-        htmlFor={name}
-        css={{
-          overflowWrap: 'anywhere',
+    <>
+      <div className="relative flex items-start">
+        <div className="flex items-center h-5">
+          <input
+            // ref={ref}
+            id={name}
+            aria-describedby="comments-description"
+            name="comments"
+            type="checkbox"
+            className="
+              checked:bg-none
+              checked:bg-transparent
+              w-5
+              h-5
+              checked:border-black
+              before:content-['']
+              before:bg-current
+              before:w-3
+              before:h-3
+              before:scale-1
+              before:transition-transform
+              checked:before:scale-1
+            "
+          />
+        </div>
+        <div className="ml-3 text-sm">
+          <label htmlFor={name} className="font-medium text-gray-700">
+            {label}
+          </label>
+        </div>
+      </div>
+      <Flex
+        sx={{
+          ...(reverse && {
+            flexDirection: 'row-reverse',
+            justifyContent: 'flex-end',
+          }),
+          gap: 2,
         }}
+        {...getMarginProps(props)}
       >
-        {label}
-      </Box>
-    </Flex>
+        <Box
+          as="input"
+          ref={ref}
+          type="checkbox"
+          id={name}
+          {...omitMarginProps(props)}
+          __css={{
+            // flexShrink: 0,
+            // flexGrow: 0,
+            // color: 'blue5',
+            appearance: 'none',
+            margin: 0,
+            font: 'inherit',
+            width: '1.25em',
+            height: '1.25em',
+            border: '0.07em solid gray',
+            display: 'grid',
+            placeContent: 'center',
+            '&::before': {
+              backgroundColor: 'currentColor',
+              content: '""',
+              width: '0.75em',
+              height: '0.75em',
+              transform: 'scale(0)',
+              transition: '120ms transform ease-in-out',
+            },
+            '&:checked::before': {
+              transform: 'scale(1)',
+            },
+            '&:focus': {
+              outline: 'max(1px, 0.02em) solid currentColor',
+              outlineOffset: 'max(1px, 0.15em)',
+            },
+          }}
+        />
+        <Box
+          as="label"
+          htmlFor={name}
+          css={{
+            overflowWrap: 'anywhere',
+          }}
+        >
+          {label}
+        </Box>
+      </Flex>
+    </>
   ),
 )
 

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
diff --git a/src/index.ts b/src/index.ts
@@ -1,27 +1,27 @@
-export { default as colors } from './theme/colors'
-export { default as theme } from './theme'
 export { default as Box } from './components/Box'
+export { default as Button } from './components/Button'
+export { default as Checkbox } from './components/Checkbox'
+export { default as FacebookShareButton } from './components/FacebookShareButton'
 export { default as Flex } from './components/Flex'
-export { default as Container } from './components/Container'
 export { default as Heading } from './components/Heading'
+export { default as Hero } from './components/Hero'
+export { default as HeroLead } from './components/HeroLead'
 export { default as IconButton } from './components/IconButton'
+export { default as Image } from './components/Image'
 export { default as Input } from './components/Input'
-export { default as RadioButton } from './components/RadioButton'
-export { default as RadioGroup } from './components/RadioGroup'
-export { default as FacebookShareButton } from './components/FacebookShareButton'
-export { default as TwitterShareButton } from './components/TwitterShareButton'
-export { default as Text } from './components/Text'
 export { default as InputWithIconButton } from './components/InputWithIconButton'
+export { default as Label } from './components/Label'
+export { default as Link } from './components/Link'
 export { default as LogoOONIRun } from './components/LogoOONIRun'
-export { default as Hero } from './components/Hero'
-export { default as HeroLead } from './components/HeroLead'
 export { default as Modal } from './components/Modal'
-export { default as Button } from './components/Button'
-export { default as Textarea } from './components/Textarea'
-export { default as Link } from './components/Link'
-export { default as Image } from './components/Image'
-export { default as Select } from './components/Select'
-export { default as Checkbox } from './components/Checkbox'
-export { default as Label } from './components/Label'
-export { default as MultiSelectCreatable } from './components/MultiSelectCreatable'
 export { default as MultiSelect } from './components/MultiSelect'
+export { default as MultiSelectCreatable } from './components/MultiSelectCreatable'
+export { default as RadioButton } from './components/RadioButton'
+export { default as RadioGroup } from './components/RadioGroup'
+export { default as Select } from './components/Select'
+export { default as Text } from './components/Text'
+export { default as Textarea } from './components/Textarea'
+export { default as TwitterShareButton } from './components/TwitterShareButton'
+export { default as theme } from './theme'
+export { default as colors } from './theme/colors'
+
diff --git a/stories/Box.stories.tsx b/stories/Box.stories.tsx
diff --git a/stories/Container.stories.tsx b/stories/Container.stories.tsx
diff --git a/stories/InputWithIconButton.stories.tsx b/stories/InputWithIconButton.stories.tsx
@@ -2,7 +2,6 @@ import { action } from '@storybook/addon-actions'
 import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 import { MdDelete } from 'react-icons/md'
-import Container from '../src/components/Container'
 import InputWithIconButton from '../src/components/InputWithIconButton'
 
 const meta: Meta = {
@@ -16,14 +15,12 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: (args) => (
-    <Container>
-      <InputWithIconButton
-        {...args}
-        icon={<MdDelete size={30} />}
-        placeholder="https://twitter.com/"
-        onAction={action('icon clicked')}
-      />
-    </Container>
+    <InputWithIconButton
+      {...args}
+      icon={<MdDelete size={30} />}
+      placeholder="https://twitter.com/"
+      onAction={action('icon clicked')}
+    />
   ),
 }
 

diff --git a/stories/LogoOONIRun.stories.tsx b/stories/LogoOONIRun.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react'
 import React from 'react'
-import Container from '../src/components/Container'
 import LogoOONIRun from '../src/components/LogoOONIRun'
 
 const meta: Meta = {
@@ -11,9 +10,5 @@ const meta: Meta = {
 export default meta
 
 export const Default = () => {
-  return (
-    <Container bg="blue4">
-      <LogoOONIRun height="70px" />
-    </Container>
-  )
+  return <LogoOONIRun height="70px" />
 }
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
@@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react'
 import React, { useCallback, useState } from 'react'
 import Box from '../src/components/Box'
 import Button from '../src/components/Button'
-import Container from '../src/components/Container'
 import Flex from '../src/components/Flex'
 import Modal from '../src/components/Modal'
 
@@ -26,13 +25,13 @@ export const Default = () => {
   }, [])
 
   return (
-    <Container>
+    <>
       <Flex alignItems="center">
         <Button onClick={() => setShow(true)}> Show Modal </Button>
       </Flex>
       <Modal show={show} onHideClick={onClose}>
         <Box p={3}>Modal Content</Box>
       </Modal>
-    </Container>
+    </>
   )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -26,9 +26,9 @@ module.exports = {
     },
   },
 
-  // plugins: [
-  // 	require('@tailwindcss/typography'),
-  // 	require('@tailwindcss/aspect-ratio'),
-  // 	require('@tailwindcss/forms'),
-  // ],
+  plugins: [
+    // 	require('@tailwindcss/typography'),
+    // 	require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/forms')({ strategy: 'base' }),
+  ],
 }