🗨️ Textarea (#154)

➕ Add Textarea support
dracula · Nov 13, 2023 · 3e5e82c · 3e5e82c
1 parent 1eaa8e1
commit 3e5e82c
Show file tree

Hide file tree

Showing 7 changed files with 1,100 additions and 1 deletion.
diff --git a/dsp/data/components.json b/dsp/data/components.json
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,80 @@
+import cx from 'classnames/dedupe'
+import React, { TextareaHTMLAttributes } from 'react'
+import { BaseColorMap } from '../../base/colors'
+import {
+  cleanProps,
+  marginMixin,
+  MarginMixin,
+  paddingMixin,
+  PaddingMixin
+} from '../../base/spacing'
+
+export const textareaVariants = {
+  normal: 'drac-textarea',
+  outline: 'drac-textarea-outline'
+}
+
+export const textareaSizes = {
+  lg: 'drac-textarea-lg',
+  md: 'drac-textarea',
+  sm: 'drac-textarea-sm'
+}
+
+export const textareaBorderSizes = {
+  lg: 'drac-textarea-border-lg',
+  md: 'drac-textarea-border-md',
+  sm: 'drac-textarea-border-sm'
+}
+
+export const textareaColors: BaseColorMap & { white: string } = {
+  white: 'drac-textarea-white drac-text-white',
+  cyan: 'drac-textarea-cyandrac-text-cyan',
+  green: 'drac-textarea-green drac-text-green',
+  orange: 'drac-textarea-orange drac-text-orange',
+  pink: 'drac-textarea-pink drac-text-pink',
+  purple: 'drac-textarea-purple drac-text-purple',
+  red: 'drac-textarea-red drac-text-red',
+  yellow: 'drac-textarea-yellow drac-text-yellow'
+}
+
+export interface TextareaProps 
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, 
+  PaddingMixin, 
+  MarginMixin {
+
+  color?: keyof typeof textareaColors
+
+  size?: keyof typeof textareaSizes | number
+
+  borderSize?: keyof typeof textareaBorderSizes
+
+  variant?: keyof typeof textareaVariants
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const { color, size, borderSize, variant, ...htmlProps} = props
+
+    const finalProps: Record<string, any> = {
+      ...htmlProps,
+	  className: cx(
+	    `drac-textarea`,
+	    props.className,
+	    variant && textareaVariants[variant],
+	    size && typeof size === 'string' && textareaSizes[size],
+	    borderSize && textareaBorderSizes[borderSize],
+	    color && textareaColors[color],
+	    ...paddingMixin(props),
+	    ...marginMixin(props)
+	  )
+    }
+
+    if (size && typeof size === 'number') {
+	  finalProps[size] = size
+    }
+
+    return <textarea ref={ref} {...cleanProps(finalProps)}></textarea>
+  }
+)
+
+Textarea.displayName = 'Textarea'
diff --git a/src/components/Textarea/__tests__/Textarea.test.tsx b/src/components/Textarea/__tests__/Textarea.test.tsx
@@ -0,0 +1,130 @@
+import React from 'react'
+import { docs } from '@/documentation/site-docs'
+import { snapshot } from '@/documentation/render-component'
+import { Box } from '@/components/Box/Box'
+import { Textarea } from '@/components/Textarea/Textarea'
+import { Heading } from '@/components/Heading/Heading'
+
+docs(Textarea, {
+  basic() {
+    return snapshot('Usage', Usage, 'Styles or abstrats HTML textarea elements.')
+  },
+  variations() {
+  	return [
+  	  snapshot(
+  	  	'Colors',
+  	  	Colors,
+  	  	'Textareas can be customized to use any of the Dracula UI theme colors.'
+  	  ),
+  	  snapshot(
+  	  	'Sizes',
+  	  	Sizes,
+  	  	'Textareaas can be customized to use several different sizes.'
+  	  ),
+  	  snapshot(
+  	  	'Variants',
+  	  	Variants,
+  	  	'Use the `outline` variant to represent subtler Textareas'
+  	  ),
+  	  snapshot(
+  	  	'Border Sizes',
+  	  	BorderSizes,
+  	  	'Border size can be customized to use several different sizes'
+  	  )
+  	]
+  }
+})
+
+function Usage() {
+	return <Textarea placeholder="Textarea" color="white"></Textarea>
+}
+
+function Colors() {
+  return (
+    <Box>
+      <Textarea color="purple" placeholder="purple" m="xs"></Textarea>
+      <Textarea color="green" placeholder="green" m="xs"></Textarea>
+    </Box>
+  )
+}
+
+function Sizes() {
+  return (
+    <Box>
+      <Textarea color="white" size="sm" placeholder="small" m="xs"></Textarea>
+      <Textarea color="white" size="md" placeholder="medium" m="xs"></Textarea>
+      <Textarea color="white" size="lg" placeholder="large" m="xs"></Textarea>
+    </Box>
+  )
+}
+
+function Variants() {
+  return (
+    <Box>
+      <Textarea color="white" variant="normal" placeholder="normal" m="xs"></Textarea>
+      <Textarea color="white" variant="outline" placeholder="outline" m="xs"></Textarea>
+    </Box>
+  )
+}
+
+function BorderSizes() {
+  return (
+    <Box>
+      <Box mb="sm">
+        <Heading size="sm">sm</Heading>
+        <Textarea
+          color="green"
+          variant="normal"
+          borderSize="sm"
+          placeholder="small border outline"
+          m="xs"
+        ></Textarea>
+        <Textarea
+          color="green"
+          variant="outline"
+          borderSize="sm"
+          placeholder="small border outline"
+          m="xs"
+        ></Textarea>
+      </Box>
+
+      <Box mb="sm">
+        <Heading size="sm">md</Heading>
+
+        <Textarea
+          color="purple"
+          variant="normal"
+          borderSize="md"
+          placeholder="medium border outline"
+          m="xs"
+        ></Textarea>
+        <Textarea
+          color="purple"
+          variant="outline"
+          borderSize="md"
+          placeholder="medium border outline"
+          m="xs"
+        ></Textarea>
+      </Box>
+
+      <Box mb="sm">
+        <Heading size="sm">lg</Heading>
+
+        <Textarea
+          color="yellow"
+          variant="normal"
+          borderSize="lg"
+          placeholder="large border outline"
+          m="xs"
+        ></Textarea>
+        <Textarea
+          color="yellow"
+          variant="outline"
+          borderSize="lg"
+          placeholder="large border outline"
+          m="xs"
+        ></Textarea>
+      </Box>
+    </Box>
+  )
+}
diff --git a/src/components/Textarea/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/components/Textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Site: Textarea Basic Usage 1`] = `
+Object {
+  "docs": "Styles or abstrats HTML textarea elements.",
+  "html": "<textarea
+  placeholder=\\"Textarea\\"
+  class=\\"drac-textarea drac-textarea-white drac-text-white\\"
+></textarea>
+",
+  "react": "<Textarea placeholder=\\"Textarea\\" color=\\"white\\" />;
+",
+  "title": "Usage",
+}
+`;
+
+exports[`Site: Textarea Border Sizes 1`] = `
+Object {
+  "docs": "Border size can be customized to use several different sizes",
+  "html": "<div class=\\"drac-box\\">
+  <div class=\\"drac-box drac-mb-sm\\">
+    <h2 class=\\"drac-heading drac-heading-sm drac-text-white\\">sm</h2>
+    <textarea
+      placeholder=\\"small border outline\\"
+      class=\\"drac-textarea drac-textarea-border-sm drac-textarea-green drac-text-green drac-m-xs\\"
+    ></textarea
+    ><textarea
+      placeholder=\\"small border outline\\"
+      class=\\"drac-textarea drac-textarea-outline drac-textarea-border-sm drac-textarea-green drac-text-green drac-m-xs\\"
+    ></textarea>
+  </div>
+  <div class=\\"drac-box drac-mb-sm\\">
+    <h2 class=\\"drac-heading drac-heading-sm drac-text-white\\">md</h2>
+    <textarea
+      placeholder=\\"medium border outline\\"
+      class=\\"drac-textarea drac-textarea-border-md drac-textarea-purple drac-text-purple drac-m-xs\\"
+    ></textarea
+    ><textarea
+      placeholder=\\"medium border outline\\"
+      class=\\"drac-textarea drac-textarea-outline drac-textarea-border-md drac-textarea-purple drac-text-purple drac-m-xs\\"
+    ></textarea>
+  </div>
+  <div class=\\"drac-box drac-mb-sm\\">
+    <h2 class=\\"drac-heading drac-heading-sm drac-text-white\\">lg</h2>
+    <textarea
+      placeholder=\\"large border outline\\"
+      class=\\"drac-textarea drac-textarea-border-lg drac-textarea-yellow drac-text-yellow drac-m-xs\\"
+    ></textarea
+    ><textarea
+      placeholder=\\"large border outline\\"
+      class=\\"drac-textarea drac-textarea-outline drac-textarea-border-lg drac-textarea-yellow drac-text-yellow drac-m-xs\\"
+    ></textarea>
+  </div>
+</div>
+",
+  "react": "<Box>
+  <Box mb=\\"sm\\">
+    <Heading size=\\"sm\\">sm</Heading>
+    <Textarea
+      color=\\"green\\"
+      variant=\\"normal\\"
+      borderSize=\\"sm\\"
+      placeholder=\\"small border outline\\"
+      m=\\"xs\\"
+    />
+    <Textarea
+      color=\\"green\\"
+      variant=\\"outline\\"
+      borderSize=\\"sm\\"
+      placeholder=\\"small border outline\\"
+      m=\\"xs\\"
+    />
+  </Box>
+  <Box mb=\\"sm\\">
+    <Heading size=\\"sm\\">md</Heading>
+    <Textarea
+      color=\\"purple\\"
+      variant=\\"normal\\"
+      borderSize=\\"md\\"
+      placeholder=\\"medium border outline\\"
+      m=\\"xs\\"
+    />
+    <Textarea
+      color=\\"purple\\"
+      variant=\\"outline\\"
+      borderSize=\\"md\\"
+      placeholder=\\"medium border outline\\"
+      m=\\"xs\\"
+    />
+  </Box>
+  <Box mb=\\"sm\\">
+    <Heading size=\\"sm\\">lg</Heading>
+    <Textarea
+      color=\\"yellow\\"
+      variant=\\"normal\\"
+      borderSize=\\"lg\\"
+      placeholder=\\"large border outline\\"
+      m=\\"xs\\"
+    />
+    <Textarea
+      color=\\"yellow\\"
+      variant=\\"outline\\"
+      borderSize=\\"lg\\"
+      placeholder=\\"large border outline\\"
+      m=\\"xs\\"
+    />
+  </Box>
+</Box>;
+",
+  "title": "Border Sizes",
+}
+`;
+
+exports[`Site: Textarea Colors 1`] = `
+Object {
+  "docs": "Textareas can be customized to use any of the Dracula UI theme colors.",
+  "html": "<div class=\\"drac-box\\">
+  <textarea
+    placeholder=\\"purple\\"
+    class=\\"drac-textarea drac-textarea-purple drac-text-purple drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"green\\"
+    class=\\"drac-textarea drac-textarea-green drac-text-green drac-m-xs\\"
+  ></textarea>
+</div>
+",
+  "react": "<Box>
+  <Textarea color=\\"purple\\" placeholder=\\"purple\\" m=\\"xs\\" />
+  <Textarea color=\\"green\\" placeholder=\\"green\\" m=\\"xs\\" />
+</Box>;
+",
+  "title": "Colors",
+}
+`;
+
+exports[`Site: Textarea Sizes 1`] = `
+Object {
+  "docs": "Textareaas can be customized to use several different sizes.",
+  "html": "<div class=\\"drac-box\\">
+  <textarea
+    placeholder=\\"small\\"
+    class=\\"drac-textarea drac-textarea-sm drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"medium\\"
+    class=\\"drac-textarea drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"large\\"
+    class=\\"drac-textarea drac-textarea-lg drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea>
+</div>
+",
+  "react": "<Box>
+  <Textarea color=\\"white\\" size=\\"sm\\" placeholder=\\"small\\" m=\\"xs\\" />
+  <Textarea color=\\"white\\" size=\\"md\\" placeholder=\\"medium\\" m=\\"xs\\" />
+  <Textarea color=\\"white\\" size=\\"lg\\" placeholder=\\"large\\" m=\\"xs\\" />
+</Box>;
+",
+  "title": "Sizes",
+}
+`;
+
+exports[`Site: Textarea Variants 1`] = `
+Object {
+  "docs": "Use the \`outline\` variant to represent subtler Textareas",
+  "html": "<div class=\\"drac-box\\">
+  <textarea
+    placeholder=\\"normal\\"
+    class=\\"drac-textarea drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"outline\\"
+    class=\\"drac-textarea drac-textarea-outline drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea>
+</div>
+",
+  "react": "<Box>
+  <Textarea color=\\"white\\" variant=\\"normal\\" placeholder=\\"normal\\" m=\\"xs\\" />
+  <Textarea color=\\"white\\" variant=\\"outline\\" placeholder=\\"outline\\" m=\\"xs\\" />
+</Box>;
+",
+  "title": "Variants",
+}
+`;