feat: add select component

abelflopes · abelflopes · commit 91fb188ef63d · 2023-11-24T01:17:30.000Z
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
@@ -40,7 +40,7 @@ This roadmap is our plan for building a complete front-end framework. Each item
 
 [ ] **Form Field:** Boxes where people type stuff or pick options.
 
-[ ] **Select:** A drop-down menu to choose things.
+[x] **Select:** A drop-down menu to choose things.
 
 [ ] **Textarea:** A big box for writing lots of stuff.
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/select/README.md b/packages/components/select/README.md
@@ -0,0 +1,32 @@
+# RCK | React Select 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 Select component in the React-CK library is a fundamental tool for empowering user interactions in React applications. It provides an elegant and user-friendly way to handle selections, offering a polished experience for users to pick from a predefined set of options.
+
+Developers can utilize this component to create various types of select fields, including single and multiple selections, with customizable styles and behaviors. Dive into the customization pool and define attributes like placeholder text, default values, and option groups to tailor the select component to suit your application's needs.
+
+### Installation 
+
+To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/select` or `yarn add @react-ck/select`.
+
+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 { Select } from "@react-ck/select";
+
+const myApp = () => (
+    <ThemeProvider>
+        <Select ... />
+    </ThemeProvider>
+);
+```
+
+<!-- storybook-ignore -->
+
+---
+
+Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
diff --git a/packages/components/select/babel.config.js b/packages/components/select/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@react-ck/babel-config",
+};
diff --git a/packages/components/select/declarations.d.ts b/packages/components/select/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const content: Record<string, string>;
+  export default content;
+}
diff --git a/packages/components/select/index.ts b/packages/components/select/index.ts
@@ -0,0 +1,2 @@
+// Hack for module resolution of non built packages
+export * from "./src/index";
diff --git a/packages/components/select/jest.config.ts b/packages/components/select/jest.config.ts
@@ -0,0 +1 @@
+export { config as default } from "@react-ck/jest-config";
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@react-ck/select",
+  "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/select#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"
+  }
+}
diff --git a/packages/components/select/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/select/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Select renders correctly 1`] = `
+<select
+  className="root"
+/>
+`;
diff --git a/packages/components/select/specs/index.snapshot.test.tsx b/packages/components/select/specs/index.snapshot.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { Select } from "../src/index";
+import renderer from "react-test-renderer";
+
+describe("Snapshot Select", () => {
+  test("renders correctly", async () => {
+    const tree = renderer.create(<Select />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/components/select/specs/index.unit.test.tsx b/packages/components/select/specs/index.unit.test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Select } from "../src/index";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Unit Select", () => {
+  test("renders correctly", async () => {
+    render(<Select data-testid="select" />);
+    const find = await screen.findByTestId("select");
+    expect(find).toBeInTheDocument();
+  });
+});
diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+/**
+ * Select is a type of input that allows users to choose one or more options from a list of choices.
+ * The options are hidden by default and revealed when a user interacts with an element. It shows the currently selected option in its default collapsed state.
+ * @param props - {@link SelectProps}
+ * @returns a React element
+ */
+
+export const Select = ({ className, ...props }: Readonly<SelectProps>): React.ReactElement => (
+  <select {...props} className={classNames(className, styles.root)} />
+);
diff --git a/packages/components/select/src/SelectOption.tsx b/packages/components/select/src/SelectOption.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {}
+
+export const SelectOption = ({ ...props }: Readonly<SelectOptionProps>): React.ReactElement => (
+  <option {...props} />
+);
diff --git a/packages/components/select/src/index.ts b/packages/components/select/src/index.ts
@@ -0,0 +1,3 @@
+export * from "./Select";
+
+export * from "./SelectOption";
diff --git a/packages/components/select/src/styles/index.module.scss b/packages/components/select/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;
+  }
+}
diff --git a/packages/components/select/tsconfig.build.json b/packages/components/select/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*"]
+}
diff --git a/packages/components/select/tsconfig.json b/packages/components/select/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@react-ck/typescript-config/tsconfig.json",
+  "include": ["./**/*"]
+}
diff --git a/packages/components/select/webpack.config.ts b/packages/components/select/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,
+});
diff --git a/packages/docs/stories/package.json b/packages/docs/stories/package.json
@@ -33,6 +33,7 @@
     "@react-ck/input": "^1.0.0",
     "@react-ck/list": "^1.0.0",
     "@react-ck/overlay": "^1.0.0",
+    "@react-ck/select": "^1.0.0",
     "@react-ck/table": "^1.0.0",
     "@react-ck/text": "^1.0.0",
     "@react-ck/textarea": "^1.0.0",
diff --git a/packages/docs/stories/src/select.stories.tsx b/packages/docs/stories/src/select.stories.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@react-ck/theme";
+import { faker } from "@faker-js/faker";
+import { configureStory } from "@react-ck/story-config";
+import { Select, SelectOption } from "@react-ck/select/src";
+
+type Story = StoryObj<typeof Select>;
+
+const meta: Meta<typeof Select> = {
+  title: "Form/Select",
+  ...configureStory(Select, {
+    decorators: [
+      (Story) => (
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      ),
+    ],
+  }),
+};
+
+export default meta;
+
+export const Component: Story = {
+  args: {
+    required: true,
+    children: (
+      <>
+        <SelectOption selected disabled value="">
+          Select Value
+        </SelectOption>
+        <SelectOption>{faker.lorem.word()}</SelectOption>
+        <SelectOption>{faker.lorem.word()}</SelectOption>
+        <SelectOption>{faker.lorem.word()}</SelectOption>
+      </>
+    ),
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ extends: "@react-ck/babel-config",`
	`3`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// Hack for module resolution of non built packages`
	`2`	`+export * from "./src/index";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { config as default } from "@react-ck/jest-config";`