feat: add textarea component

packages/components/textarea/README.md

@@ -0,0 +1,32 @@
+# RCK | React Textarea Component
+
+> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
+
+The React Multiline Text Input component in the React-CK library is a fundamental pillar for driving user interactions in React applications. It provides a user-friendly way to collect and validate multiline text, accommodating everything from simple notes to more intricate data such as addresses or code snippets.
+
+This component empowers developers to create various types of multiline text fields, including regular text inputs, password-protected inputs, checkboxes, radio buttons, and more. Dive into the customization pool and define attributes like placeholder text, default values, and validation rules to tailor the component to your exact needs.
+
+### Installation 
+
+To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/textarea` or `yarn add @react-ck/textarea`.
+
+You will also need to set up the theme provider, install it using npm or yarn: `npm i --save @react-ck/theme` or `yarn add @react-ck/theme`.
+
+Wrap your app root with the theme provider and use this component:
+
+```tsx
+import { ThemeProvider } from "@react-ck/theme";
+import { Textarea } from "@react-ck/textarea";
+
+const myApp = () => (
+    <ThemeProvider>
+        <Textarea ... />
+    </ThemeProvider>
+);
+```
+
+<!-- storybook-ignore -->
+
+---
+
+Check the documentation website - [react-ck.js.org](https://react-ck.js.org).

packages/components/textarea/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@react-ck/babel-config",
+};

packages/components/textarea/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const content: Record<string, string>;
+  export default content;
+}

packages/components/textarea/index.ts

@@ -0,0 +1,2 @@
+// Hack for module resolution of non built packages
+export * from "./src/index";

packages/components/textarea/jest.config.ts

@@ -0,0 +1 @@
+export { config as default } from "@react-ck/jest-config";

packages/components/textarea/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@react-ck/textarea",
+  "private": false,
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "homepage": "https://github.com/abelflopes/react-ck/tree/master/packages/components/textarea#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abelflopes/react-ck.git"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production webpack",
+    "lint:typescript": "tsc --noEmit",
+    "test": "npx -y npm-run-all -s test:*",
+    "test:unit": "jest --testPathPattern=\".unit.*\"",
+    "test:snapshot": "jest --testPathPattern=\".snapshot.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
+  },
+  "devDependencies": {
+    "@react-ck/babel-config": "^1.0.0",
+    "@react-ck/jest-config": "^1.0.0",
+    "@react-ck/typescript-config": "^1.0.0",
+    "@react-ck/webpack-config": "^1.0.0",
+    "@types/react": "^18.2.33"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "@react-ck/scss-utils": "^1.1.2",
+    "@react-ck/theme": "^1.3.0",
+    "classnames": "^2.3.2"
+  }
+}

packages/components/textarea/specs/__snapshots__/index.snapshot.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Textarea renders correctly 1`] = `
+<textarea
+  className="root"
+/>
+`;

packages/components/textarea/specs/index.snapshot.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Textarea } from "../src/index";
+import renderer from "react-test-renderer";
+
+describe("Snapshot Textarea", () => {
+  test("renders correctly", async () => {
+    const tree = renderer.create(<Textarea />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/components/textarea/specs/index.unit.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Textarea } from "../src/index";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Unit Textarea", () => {
+  test("renders correctly", async () => {
+    render(<Textarea data-testid="textarea" />);
+    const find = await screen.findByTestId("textarea");
+    expect(find).toBeInTheDocument();
+  });
+});

packages/components/textarea/src/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+/**
+ * Textarea is a form element that accepts multiple lines of text.
+ * @param props - {@link TextareaProps}
+ * @returns a React element
+ */
+
+export const Textarea = ({ className, ...props }: Readonly<TextareaProps>): React.ReactElement => (
+  <textarea {...props} className={classNames(className, styles.root)} />
+);

packages/components/textarea/src/styles/index.module.scss

@@ -0,0 +1,24 @@
+@import "@react-ck/theme";
+@import "@react-ck/scss-utils";
+
+.root {
+  @include font-base;
+
+  background: get-color(neutral-100);
+  color: get-color(neutral-900);
+  border: none;
+  width: 100%;
+  padding: get-spacing(1) get-spacing(2);
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+  border-radius: get-spacing(1);
+
+  &::placeholder {
+    color: get-color(neutral-300);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

packages/components/textarea/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@react-ck/typescript-config/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["./*.d.ts", "./src/**/*", "./src/index.ts*"]
+}

packages/components/textarea/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@react-ck/typescript-config/tsconfig.json",
+  "include": ["./**/*"]
+}

packages/components/textarea/webpack.config.ts

@@ -0,0 +1,6 @@
+import { getWebpackConfig } from "@react-ck/webpack-config";
+import packageJson from "./package.json";
+
+export default getWebpackConfig({
+  cssHashSalt: packageJson.name,
+});

packages/docs/stories/package.json

@@ -35,6 +35,7 @@
     "@react-ck/overlay": "^1.0.0",
     "@react-ck/table": "^1.0.0",
     "@react-ck/text": "^1.0.0",
+    "@react-ck/textarea": "^1.0.0",
     "@react-ck/theme": "^1.0.0"
   }
 }

packages/docs/stories/src/textarea.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@react-ck/theme";
+import { faker } from "@faker-js/faker";
+import { sentenceCase } from "change-case";
+import { configureStory } from "@react-ck/story-config";
+import { Textarea } from "@react-ck/textarea/src";
+
+type Story = StoryObj<typeof Textarea>;
+
+const meta: Meta<typeof Textarea> = {
+  title: "Form/Textarea",
+  ...configureStory(Textarea, {
+    decorators: [
+      (Story) => (
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      ),
+    ],
+  }),
+};
+
+export default meta;
+
+export const Component: Story = {
+  args: {
+    rows: 5,
+    required: true,
+    placeholder: sentenceCase(faker.lorem.words({ min: 10, max: 20 })),
+  },
+};