feat(ValidCreatableSelect): separate CreatableSelect from Select #patch

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.6.1]
+### Refactored
+- `ValidSelect` remove creatable props
+
+### Added
+- `ValidCreatableSelect` component
+
 ## [0.6.0]
 ### Added
 - `ValidSelect` add creatable props

build/components/ValidatedInput/ValidCreatableSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ValidSelectProps } from "..";
+export declare const ValidCreatableSelect: ({ label, placeholder, options, name, value, onChange, errMessage, optionalLabel, isInvalid, isDisabled, isRequired, isClearable, tooltip, selectDataQa, isMulti, className, helperText, ...props }: ValidSelectProps) => JSX.Element;

build/components/ValidatedInput/ValidSelect.d.ts

@@ -30,4 +30,4 @@ export interface ValidSelectProps extends SelectProps {
     className?: string;
     helperText?: React.ReactNode;
 }
-export declare const ValidSelect: ({ label, placeholder, options, name, value, onChange, errMessage, optionalLabel, isInvalid, isDisabled, isRequired, isClearable, tooltip, selectDataQa, isMulti, className, helperText, isCreatable, ...props }: ValidSelectProps) => JSX.Element;
+export declare const ValidSelect: ({ label, placeholder, options, name, value, onChange, errMessage, optionalLabel, isInvalid, isDisabled, isRequired, isClearable, tooltip, selectDataQa, isMulti, className, helperText, ...props }: ValidSelectProps) => JSX.Element;

build/components/index.d.ts

@@ -3,6 +3,7 @@ export * from "./styled-atlaskit/DynamicTable/DynamicTable";
 export * from "./styled-atlaskit/Modal/Modal";
 export * from "./styled-atlaskit/Modal/utility";
 export * from "./styled-atlaskit/Select/Select";
+export * from "./styled-atlaskit/CreatableSelect/CreatableSelect";
 export * from "./styled-atlaskit/Tag/Tag";
 export * from "./styled-atlaskit/Tag/TagList";
 export * from "./styled-atlaskit/TextField/TextField";
@@ -42,6 +43,7 @@ export * from "./ValidatedInput/ValidFieldText";
 export * from "./ValidatedInput/ValidFieldTextArea";
 export * from "./ValidatedInput/ValidMultiSelect";
 export * from "./ValidatedInput/ValidSelect";
+export * from "./ValidatedInput/ValidCreatableSelect";
 export * from "./ValidatedInput/ValidSelectAsync";
 export * from "./ValidatedInput/ValidDynamicText";
 export * from "./ValidatedInput/ValidFieldPassword";

build/components/styled-atlaskit/CreatableSelect/CreatableSelect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "../Select/Select.scss";
+import { SelectProps } from "../Select/Select";
+export declare const CreatableSelect: ({ isMulti, onChange, ...props }: SelectProps) => JSX.Element;

build/components/styled-atlaskit/Select/Select.d.ts

@@ -4,6 +4,5 @@ import { SelectOption } from "../../../types";
 import "./Select.scss";
 export interface SelectProps extends Omit<AkSelectProps<SelectOption, boolean>, "onChange"> {
     onChange?: (option: SelectOption) => void;
-    isCreatable?: boolean;
 }
-export declare const Select: ({ isMulti, isCreatable, onChange, ...props }: SelectProps) => JSX.Element;
+export declare const Select: ({ isMulti, onChange, ...props }: SelectProps) => JSX.Element;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "justice-ui-library",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "author": "AccelByte Inc",
   "license": "AccelByte License",
   "main": "./build/index.js",

src/components/ValidatedInput/ValidCreatableSelect.stories.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2022 AccelByte Inc. All Rights Reserved.
+ * This is licensed software from AccelByte Inc, for limitations
+ * and restrictions contact your company contract manager.
+ */
+
+import React from "react";
+import { Meta, Story } from "@storybook/react/types-6-0";
+import { ValidSelectProps } from "./ValidSelect";
+import { ValidCreatableSelect } from "./ValidCreatableSelect";
+import { SelectOption } from "../../types";
+
+export default {
+  title: "Components/ValidatedInput/ValidCreatableSelect",
+  component: ValidCreatableSelect,
+} as Meta;
+
+const Template: Story<ValidSelectProps> = (args) => {
+  const [option, setOption] = React.useState<SelectOption | null>(null);
+  const onChange = (option: SelectOption) => {
+    setOption(option);
+  };
+  return <ValidCreatableSelect {...args} value={option} onChange={onChange} />;
+};
+
+export const Example = Template.bind({});
+Example.args = {
+  options: [
+    { label: "Value 1", value: "value1" },
+    { label: "Value 2", value: "value2" },
+  ],
+  label: "Label",
+  placeholder: "Select please...",
+};

src/components/ValidatedInput/ValidCreatableSelect.tsx

@@ -0,0 +1,51 @@
+/*
+ *
+ *  * Copyright (c) 2022 AccelByte Inc. All Rights Reserved.
+ *  * This is licensed software from AccelByte Inc, for limitations
+ *  * and restrictions contact your company contract manager.
+ *
+ */
+
+import * as React from "react";
+import { default as classNames } from "classnames";
+import { FieldErrorMessage, FieldHelperText, FieldLabel } from "../Form/utility";
+import { CreatableSelect, ValidSelectProps } from "..";
+
+export const ValidCreatableSelect = ({
+  label,
+  placeholder,
+  options = [],
+  name,
+  value,
+  onChange,
+  errMessage,
+  optionalLabel,
+  isInvalid,
+  isDisabled = false,
+  isRequired = true,
+  isClearable,
+  tooltip,
+  selectDataQa,
+  isMulti = false,
+  className,
+  helperText,
+  ...props
+}: ValidSelectProps) => (
+  <div className={classNames("valid-select-input", className)}>
+    {!!label && <FieldLabel label={label} optionalLabel={optionalLabel} isRequired={isRequired} tooltip={tooltip} />}
+    <CreatableSelect
+      {...props}
+      options={options}
+      placeholder={placeholder}
+      name={name}
+      value={value}
+      onChange={onChange}
+      isDisabled={isDisabled}
+      isClearable={isClearable}
+      isMulti={isMulti}
+      dataQa={selectDataQa}
+    />
+    {isInvalid && <FieldErrorMessage message={errMessage} />}
+    {helperText && <FieldHelperText message={helperText} />}
+  </div>
+);

src/components/ValidatedInput/ValidSelect.tsx

@@ -57,7 +57,6 @@ export const ValidSelect = ({
   isMulti = false,
   className,
   helperText,
-  isCreatable = false,
   ...props
 }: ValidSelectProps) => (
   <div className={classNames("valid-select-input", className)}>
@@ -72,7 +71,6 @@ export const ValidSelect = ({
       isDisabled={isDisabled}
       isClearable={isClearable}
       isMulti={isMulti}
-      isCreatable={isCreatable}
       dataQa={selectDataQa}
     />
     {isInvalid && <FieldErrorMessage message={errMessage} />}

src/components/index.ts

@@ -9,6 +9,7 @@ export * from "./styled-atlaskit/DynamicTable/DynamicTable";
 export * from "./styled-atlaskit/Modal/Modal";
 export * from "./styled-atlaskit/Modal/utility";
 export * from "./styled-atlaskit/Select/Select";
+export * from "./styled-atlaskit/CreatableSelect/CreatableSelect";
 export * from "./styled-atlaskit/Tag/Tag";
 export * from "./styled-atlaskit/Tag/TagList";
 export * from "./styled-atlaskit/TextField/TextField";
@@ -48,6 +49,7 @@ export * from "./ValidatedInput/ValidFieldText";
 export * from "./ValidatedInput/ValidFieldTextArea";
 export * from "./ValidatedInput/ValidMultiSelect";
 export * from "./ValidatedInput/ValidSelect";
+export * from "./ValidatedInput/ValidCreatableSelect";
 export * from "./ValidatedInput/ValidSelectAsync";
 export * from "./ValidatedInput/ValidDynamicText";
 export * from "./ValidatedInput/ValidFieldPassword";

src/components/styled-atlaskit/CreatableSelect/CreatableSelect.stories.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2022 AccelByte Inc. All Rights Reserved.
+ * This is licensed software from AccelByte Inc, for limitations
+ * and restrictions contact your company contract manager.
+ */
+
+import React from "react";
+import { Meta, Story } from "@storybook/react/types-6-0";
+import { CreatableSelect } from "./CreatableSelect";
+import { SelectOption } from "../../../types";
+import { SelectProps } from "../Select/Select";
+
+export default {
+  title: "Components/CreatableSelect",
+  component: CreatableSelect,
+} as Meta;
+
+const Template: Story<SelectProps> = (args) => {
+  const [option, setOption] = React.useState<SelectOption>(args.value);
+  const onChange = (option: SelectOption) => {
+    setOption(option);
+  };
+
+  React.useEffect(() => {
+    setOption(args.value);
+  }, [args.value]);
+  return <CreatableSelect {...args} value={option} onChange={onChange} />;
+};
+
+export const Example = Template.bind({});
+Example.args = {
+  value: { label: "Value 1", value: "value1" },
+  options: [
+    { label: "Value 1", value: "value1" },
+    { label: "Value 2", value: "value2" },
+    { label: "Value 3", value: "value3" },
+    { label: "Value 4", value: "value4" },
+    { label: "Value 5", value: "value5" },
+    { label: "Value 6", value: "value6" },
+    { label: "Value 7", value: "value7" },
+    { label: "Value 8", value: "value8" },
+    { label: "Value 9", value: "value9" },
+  ],
+};

src/components/styled-atlaskit/CreatableSelect/CreatableSelect.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 202s AccelByte Inc. All Rights Reserved.
+ * This is licensed software from AccelByte Inc, for limitations
+ * and restrictions contact your company contract manager.
+ */
+
+import React from "react";
+import { CreatableSelect as AkCreatableSelect } from "@atlaskit/select";
+import { SelectOption } from "../../../types";
+import "../Select/Select.scss";
+import { SelectProps } from "../Select/Select";
+
+export const CreatableSelect = ({ isMulti = false, onChange, ...props }: SelectProps) => {
+  return (
+    <AkCreatableSelect
+      className="styled-atlaskit-select"
+      classNamePrefix={"styled-atlaskit-select"}
+      isMulti={isMulti}
+      onChange={onChange ? (item) => onChange(item as SelectOption) : undefined}
+      {...props}
+    />
+  );
+};

src/components/styled-atlaskit/Select/Select.tsx

@@ -5,30 +5,22 @@
  */
 
 import React from "react";
-import {
-  default as AkSelect,
-  SelectProps as AkSelectProps,
-  CreatableSelect,
-  OptionType,
-  OptionsType,
-} from "@atlaskit/select";
+import { default as AkSelect, SelectProps as AkSelectProps } from "@atlaskit/select";
 import { SelectOption } from "../../../types";
 import "./Select.scss";
 
 export interface SelectProps extends Omit<AkSelectProps<SelectOption, boolean>, "onChange"> {
   onChange?: (option: SelectOption) => void;
-  isCreatable?: boolean;
 }
 
-export const Select = ({ isMulti = false, isCreatable = false, onChange, ...props }: SelectProps) => {
-  const defaultProps = {
-    isMulti,
-    className: "styled-atlaskit-select",
-    classNamePrefix: "styled-atlaskit-select",
-    onChange: onChange
-      ? (item: OptionType | OptionsType<OptionType> | null) => onChange(item as SelectOption)
-      : undefined,
-    ...props,
-  };
-  return isCreatable ? <CreatableSelect {...defaultProps} /> : <AkSelect {...defaultProps} />;
+export const Select = ({ isMulti = false, onChange, ...props }: SelectProps) => {
+  return (
+    <AkSelect
+      className="styled-atlaskit-select"
+      classNamePrefix={"styled-atlaskit-select"}
+      isMulti={isMulti}
+      onChange={onChange ? (item) => onChange(item as SelectOption) : undefined}
+      {...props}
+    />
+  );
 };