feat: TextField, Paragraph

Author: shiftpsh

.vscode/launch.json

@@ -0,0 +1,49 @@
+import { Paragraph } from '@solved-ac/ui-react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+export default {
+  title: 'Components/Paragraph',
+  component: Paragraph,
+  argTypes: {
+    children: {
+      control: 'none',
+      description: 'Children to display',
+    },
+    margin: {
+      control: { type: 'select', options: ['none', 'normal', 'wide'] },
+      description: 'The margin of the paragraph',
+    },
+    as: {
+      control: { type: 'select', options: ['div', 'span', 'button', 'a'] },
+      description: 'The element to render the paragraph as',
+    },
+  },
+} as ComponentMeta<typeof Paragraph>
+
+const Template: ComponentStory<typeof Paragraph> = (args) => (
+  <Paragraph {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  children: (
+    <>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+      vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
+      orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
+      metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
+      imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
+      quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
+      malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
+      eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
+      ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
+      id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
+      non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
+      parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
+      porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
+      aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
+      malesuada nisi.
+    </>
+  ),
+}

example/src/stories/Paragraph.stories.tsx

@@ -0,0 +1,42 @@
+import { TextField } from '@solved-ac/ui-react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+export default {
+  title: 'Components/TextField',
+  component: TextField,
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The value of the text field',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the text field should be full width',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the text field should be disabled',
+    },
+    multiline: {
+      control: 'boolean',
+      description: 'Whether the text field should be multiline',
+    },
+    resizable: {
+      control: {
+        type: 'select',
+        options: ['none', 'both', 'horizontal', 'vertical'],
+      },
+      description: 'Whether the text field should be resizable',
+    },
+  },
+} as ComponentMeta<typeof TextField>
+
+const Template: ComponentStory<typeof TextField> = (args) => (
+  <TextField {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  value: 'TextField',
+}

example/src/stories/TextField.stories.tsx

@@ -0,0 +1,32 @@
+import React, { ElementType } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../types/PolymorphicElementProps'
+
+const marginMap = {
+  none: '0',
+  normal: '1em',
+  wide: '2em',
+}
+
+interface ParagraphContainerProps {
+  margin: 'none' | 'normal' | 'wide'
+}
+
+const ParagraphContainer = styled.p<ParagraphContainerProps>`
+  margin-block-start: ${({ margin }) => marginMap[margin]};
+  margin-block-end: ${({ margin }) => marginMap[margin]};
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+`
+
+export interface ParagraphProps {
+  margin?: 'none' | 'normal' | 'wide'
+}
+
+export const Paragraph: PC<'p', ParagraphProps> = React.forwardRef(
+  <T extends ElementType>(props: PP<T, ParagraphProps>, ref?: PR<T>) => {
+    const { margin = 'normal', as = 'p', ...rest } = props
+
+    return <ParagraphContainer ref={ref} as={as} margin={margin} {...rest} />
+  }
+)

src/components/Paragraph.tsx

@@ -44,6 +44,7 @@ const TabContainer = styled.button<TabContainerProps>`
     border-color 0.3s ease;
   background: ${v.backgroundColor};
   color: ${v.textColor};
+  vertical-align: bottom;
   &:not([disabled]):hover,
   &:not([disabled]):active {
     color: ${v.hoverTextColor};

src/components/Tab/Tab.tsx

@@ -0,0 +1,70 @@
+import React, { ElementType } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { cssDisablable } from '../utils/styles'
+
+interface TextFieldContainerProps {
+  fullWidth: boolean
+  resizable: 'none' | 'both' | 'horizontal' | 'vertical'
+}
+
+const TextFieldContainer = styled.input<TextFieldContainerProps>`
+  ${cssDisablable}
+  font-family: inherit;
+  height: auto;
+  line-height: normal;
+  font-size: 1rem;
+  padding: 0.8em 0.5em;
+  background: ${({ theme }) => theme.color.background.footer};
+  color: ${({ theme }) => theme.color.text.primary.main};
+  border: ${({ theme }) => theme.styles.border()};
+  border-radius: 8px;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  resize: ${({ resizable }) => resizable};
+`
+
+export interface TextFieldProps {
+  fullWidth?: boolean
+  multiline?: boolean
+  disabled?: boolean
+  resizable?: 'none' | 'both' | 'horizontal' | 'vertical' | boolean
+}
+
+const getResizable = (
+  resizable: TextFieldProps['resizable']
+): 'none' | 'both' | 'horizontal' | 'vertical' => {
+  if (typeof resizable === 'boolean') {
+    return resizable ? 'both' : 'none'
+  }
+  if (!resizable) {
+    return 'none'
+  }
+  return resizable
+}
+
+export const TextField: PC<'input', TextFieldProps> = React.forwardRef(
+  <T extends ElementType>(props: PP<T, TextFieldProps>, ref?: PR<T>) => {
+    const {
+      fullWidth = false,
+      multiline = false,
+      disabled = false,
+      resizable = false,
+      as,
+      ...rest
+    } = props
+
+    // TODO types are wrong when `as` is inferred by variant
+    const calculatedAs = as || (multiline ? 'textarea' : 'input')
+
+    return (
+      <TextFieldContainer
+        fullWidth={fullWidth}
+        disabled={disabled}
+        resizable={getResizable(resizable)}
+        ref={ref}
+        as={calculatedAs}
+        {...rest}
+      />
+    )
+  }
+)

src/components/TextField.tsx

@@ -10,8 +10,10 @@ export * from './Footer'
 export * from './List'
 export * from './NavBar'
 export * from './PaginationItem'
+export * from './Paragraph'
 export * from './Space'
 export * from './Tab'
 export * from './Table'
+export * from './TextField'
 export * from './Typo'
 

src/components/index.ts

@@ -94,17 +94,15 @@ export const SolvedGlobalStyles = createGlobalStyle<{ theme: SolvedTheme }>`
         font-family: ${({ theme }) => theme.typography.code};
     }
 
+    /* @keepallvillain */
+    :lang(ko) { 
+        h1, h2, h3 {
+            word-break: keep-all;
+        }
+    }
+
     ${textInputs()} {
-        font-family: inherit;
-        height: auto;
-        line-height: normal;
-        font-size: 1rem;
-        width: 100%;
-        padding: 0.8em 0.5em;
-        background: ${({ theme }) => theme.color.background.footer};
-        color: ${({ theme }) => theme.color.text.primary.main};
-        border: ${({ theme }) => theme.styles.border()};
-        border-radius: 8px;
+        font: inherit;
     }
     
     ${buttons()} {

src/styles/GlobalStyles.ts

@@ -77,12 +77,16 @@ export const cssCentering = css`
   justify-content: center;
 `
 
-export const cssClickable = css`
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
+export const cssDisablable = css`
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
 `
+
+export const cssClickable = css`
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  ${cssDisablable}
+`