Merge pull request #142 from JorgeRojo/develop

v1.6.0

.github/workflows/artifact-pages.yml

@@ -35,8 +35,7 @@ jobs:
       - name: Build artifacts
         uses: actions/setup-node@v3
         with:
-          node-version: 16
-      - run: rm -f ./yarn.lock
+          node-version: '16.16.0'
       - run: yarn install
       - run: yarn storybook:build
       - run: yarn test:cover

.github/workflows/coverage.yml

@@ -14,8 +14,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
-      - run: rm -f ./yarn.lock
+          node-version: '16.16.0'
       - run: yarn install
       - name: 'Test cover'
         run: yarn test:cover

.github/workflows/npm-publish.yml

@@ -10,9 +10,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: '16.16.0'
           registry-url: https://registry.npmjs.org/
-      - run: rm -f ./yarn.lock
       - run: yarn install --disable-pnp
       - run: yarn test
       - run: yarn dist

.gitignore

@@ -134,5 +134,4 @@ dist
 /storybook-static
 *.tgz
 .DS_Store
-.npmrc
 /target

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

.yarnrc

@@ -1 +1 @@
-registry: https://registry.npmjs.org/
+registry "https://registry.npmjs.org/"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fratch-ui",
-  "version": "1.5.23",
+  "version": "1.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/JorgeRojo/fratch-ui.git"
@@ -28,30 +28,33 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.4.0",
-    "@storybook/addon-interactions": "7.4.0",
-    "@storybook/addon-links": "7.4.0",
-    "@storybook/blocks": "7.4.0",
-    "@storybook/react": "7.4.0",
-    "@storybook/react-vite": "7.4.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "7.5.2",
+    "@storybook/addon-interactions": "7.5.2",
+    "@storybook/addon-links": "7.5.2",
+    "@storybook/blocks": "7.5.2",
+    "@storybook/react": "7.5.2",
+    "@storybook/react-vite": "7.5.2",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/coverage-v8": "^0.34.6",
     "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "prettier": "^3.0.0",
-    "simple-update-notifier": "^2.0.0",
-    "storybook": "7.4.0",
+    "simple-update-notifier": "2.0.0",
+    "storybook": "7.5.2",
+    "string-width": "6.1.0",
+    "typescript": "5.2.2",
     "typescript-plugin-css-modules": "^5.0.1",
     "vite": "^4.4.7",
     "vite-plugin-dts": "^3.3.1",

src/components/Form/InputText/InputText.module.css

@@ -19,6 +19,9 @@
   border-radius: var(--ft-form-item-border-radius);
   background-color: transparent;
 }
+.input_text .input.cleanable {
+  padding-right: calc(var(--ft-form-item-padding-x) * 3);
+}
 .input_text .input:focus {
   outline: var(--ft-select-list-item-bg-color-active) solid 2px;
 }
@@ -42,7 +45,7 @@
   right: 0;
   border: none;
   margin: 0;
-  padding: var(--ft-form-item-padding-y) var(--ft-form-item-padding-x);
+  padding: var(--ft-form-item-padding-y) 0;
   border-left: none;
   transition: background-color 0.2s ease-out;
   display: flex;
@@ -52,6 +55,7 @@
   height: 100%;
   line-height: 100%;
   right: 0;
+  width: calc(var(--ft-form-item-padding-x) * 3);
 }
 .input_text .cleaner > i {
   display: none;

src/components/Form/InputText/InputText.tsx

@@ -56,7 +56,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
         <input
           id={id}
           name={id}
-          className={c(styles.input)}
+          className={c(styles.input, cleanable ? styles.cleanable : '')}
           disabled={disabled}
           onBlur={onBlur}
           onChange={onChange}

src/components/Form/InputText/__snapshots__/InputText.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`InputText > should be cleanable, perform onClean and onChange 1`] = `
     class="_input_text_300ab4"
   >
     <input
-      class="_input_300ab4"
+      class="_input_300ab4 _cleanable_300ab4"
       type="text"
     />
     <button

src/components/Form/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Select > should perform onClean and clean filtered options 1`] = `
             class="_input_text_300ab4 _trigger_bae547"
           >
             <input
-              class="_input_300ab4"
+              class="_input_300ab4 _cleanable_300ab4"
               id="mock-test-id"
               name="mock-test-id"
               placeholder="Select an option"
@@ -125,7 +125,7 @@ exports[`Select > should render a filtered list of options 1`] = `
             class="_input_text_300ab4 _trigger_bae547"
           >
             <input
-              class="_input_300ab4"
+              class="_input_300ab4 _cleanable_300ab4"
               id="mock-test-id"
               name="mock-test-id"
               placeholder="Select an option"
@@ -214,7 +214,7 @@ exports[`Select > should render as disabled 1`] = `
           class="_input_text_300ab4 _trigger_bae547"
         >
           <input
-            class="_input_300ab4"
+            class="_input_300ab4 _cleanable_300ab4"
             disabled=""
             id="mock-test-id"
             name="mock-test-id"
@@ -281,7 +281,7 @@ exports[`Select > should render as visible on trigger click 1`] = `
             class="_input_text_300ab4 _trigger_bae547"
           >
             <input
-              class="_input_300ab4"
+              class="_input_300ab4 _cleanable_300ab4"
               id="mock-test-id"
               name="mock-test-id"
               placeholder="Select an option"
@@ -391,7 +391,7 @@ exports[`Select > should render properly 1`] = `
             class="_input_text_300ab4 _trigger_bae547"
           >
             <input
-              class="_input_300ab4"
+              class="_input_300ab4 _cleanable_300ab4"
               id="mock-test-id"
               name="mock-test-id"
               placeholder="Select an option"
@@ -489,7 +489,7 @@ exports[`Select > should render properly 1`] = `
 exports[`Select > should render the options list displayer by ref 1`] = `
 {
   "current": <input
-    class="_input_300ab4"
+    class="_input_300ab4 _cleanable_300ab4"
     id="mock-test-id"
     name="mock-test-id"
     placeholder="Select an option"