[Improvement] - Added Disabled mode (#8) (#9)

* [Improvement] - Added Disabled mode (#8)

* Added Disable mode

* Removed unnecesary style option for the tag

* Changing a little the storybook to Show Disabled Mode

* chore: 🧹 housekeeping

Co-authored-by: Julmer Olivero Ocando <jolivero.03@gmail.com>

Author: harshzalavadiya

.github/workflows/main.yml

@@ -8,10 +8,10 @@ jobs:
       - name: Begin CI...
         uses: actions/checkout@v2
 
-      - name: Use Node 12
+      - name: Use Node 16
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 16.x
 
       - name: Use cached node_modules
         uses: actions/cache@v1

.nvmrc

@@ -1 +1 @@
-12
+16

.storybook/main.js

@@ -1,24 +1,12 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.(ts|tsx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
-          },
-        },
-        {
-          loader: require.resolve('react-docgen-typescript-loader'),
-        },
-      ],
-    });
-
-    config.resolve.extensions.push('.ts', '.tsx');
-
-    return config;
-  },
-};
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -16,36 +16,37 @@
     "build": "tsdx build && filesize",
     "lint": "tsdx lint",
     "prepare": "tsdx build && filesize",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "export NODE_OPTIONS=--openssl-legacy-provider; start-storybook -p 6006",
+    "build-storybook": "export NODE_OPTIONS=--openssl-legacy-provider; build-storybook"
   },
   "peerDependencies": {
     "react": ">=16"
   },
   "dependencies": {
-    "goober": "^2.0.18"
+    "goober": "^2.1.10"
   },
   "devDependencies": {
-    "@ampproject/filesize": "^4.2.0",
-    "@babel/core": "^7.12.10",
-    "@storybook/addon-actions": "^6.1.11",
-    "@storybook/addon-docs": "^6.1.11",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "babel-loader": "^8.2.2",
-    "husky": "^4.3.6",
-    "react": "^17.0.1",
+    "@ampproject/filesize": "^4.3.0",
+    "@babel/core": "^7.18.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "babel-loader": "^8.2.5",
+    "react": "^18.2.0",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^17.0.1",
-    "react-is": "^17.0.1",
-    "ts-loader": "^8.0.12",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "ts-loader": "^9.3.1",
     "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
-    "typescript": "^4.1.3"
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4"
   },
   "prettier": {
     "printWidth": 80,

src/index.tsx

@@ -13,19 +13,21 @@ export interface TagsInputProps {
   seprators?: string[];
   onExisting?: (tag: string) => void;
   onRemoved?: (tag: string) => void;
+  disabled?: boolean;
 }
 
 // initialize goober once
 setup(React.createElement);
 
 const RTIContainer = css({
-  "--rtiBg": "#fff",
-  "--rtiBorder": "#ccc",
-  "--rtiMain": "#3182ce",
-  "--rtiRadius": "0.375rem",
-  "--rtiS": "0.5rem",
-  "--rtiTag": "#edf2f7",
-  "--rtiTagRemove": "#e53e3e",
+  "--rti-bg": "#fff",
+  "--rti-border": "#ccc",
+  "--rti-main": "#3182ce",
+  "--rti-radius": "0.375rem",
+  "--rti-s": "0.5rem",
+  "--rti-tag": "#edf2f7",
+  "--rti-tag-remove": "#e53e3e",
+  "--rti-tag-padding": "0.15rem 0.25rem",
 
   "*": {
     boxSizing: "border-box",
@@ -67,6 +69,7 @@ export const TagsInput = ({
   seprators,
   onExisting,
   onRemoved,
+  disabled,
 }: TagsInputProps) => {
   const [tags, setTags] = useState(value || []);
 
@@ -102,7 +105,7 @@ export const TagsInput = ({
   return (
     <div aria-labelledby={name} className={cc("rti--container", RTIContainer)}>
       {tags.map(tag => (
-        <Tag key={tag} text={tag} remove={onTagRemove} />
+        <Tag key={tag} text={tag} remove={onTagRemove} disabled={disabled} />
       ))}
 
       <input
@@ -112,6 +115,7 @@ export const TagsInput = ({
         placeholder={placeHolder}
         onKeyDown={handleOnKeyUp}
         onBlur={onBlur}
+        disabled={disabled}
       />
     </div>
   );

src/tag.tsx

@@ -5,6 +5,7 @@ import cc from "./classnames";
 interface TagProps {
   text: string;
   remove: any;
+  disabled?: boolean;
 }
 
 const tagStyles = css({
@@ -13,7 +14,7 @@ const tagStyles = css({
   borderRadius: "var(--rti-radius)",
   display: "inline-flex",
   justifyContent: "center",
-  paddingLeft: "var(--rti-s)",
+  padding: "var(--rti-tag-padding)",
 
   button: {
     background: "none",
@@ -29,7 +30,7 @@ const tagStyles = css({
   },
 });
 
-export default function Tag({ text, remove }: TagProps) {
+export default function Tag({ text, remove, disabled }: TagProps) {
   const handleOnRemove = e => {
     e.stopPropagation();
     remove(text);
@@ -38,13 +39,15 @@ export default function Tag({ text, remove }: TagProps) {
   return (
     <span className={cc("rti--tag", tagStyles)}>
       <span>{text}</span>
-      <button
-        type="button"
-        onClick={handleOnRemove}
-        aria-label={`remove ${text}`}
-      >
-        &#10005;
-      </button>
+      {!disabled && (
+        <button
+          type="button"
+          onClick={handleOnRemove}
+          aria-label={`remove ${text}`}
+        >
+          &#10005;
+        </button>
+      )}
     </span>
   );
 }

stories/tags-input.stories.tsx

@@ -6,8 +6,9 @@ export default {
   title: "Tags Input",
 };
 
-export const Default = () => {
+export const Page = () => {
   const [selected, setSelected] = useState(["papaya"]);
+  const [disabled, setDisabled] = useState(false);
 
   return (
     <div>
@@ -18,7 +19,17 @@ export const Default = () => {
         onChange={setSelected}
         name="fruits"
         placeHolder="enter fruits"
+        disabled={disabled}
       />
+      <div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
+        <button
+          onClick={() => setDisabled(!disabled)}
+          style={{ marginRight: "2rem" }}
+        >
+          Toggle Disable
+        </button>
+        <pre>Disable: {JSON.stringify(disabled)}</pre>
+      </div>
     </div>
   );
 };