From c9733c29282be8d724a529880e190fb8923bedd9 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 29 Oct 2024 17:28:44 -0300 Subject: [PATCH 01/25] feat: create Checkbox component in namekit-react --- apps/nameguard.io/package.json | 1 - apps/nameguard.io/tailwind.config.ts | 5 +-- .../SettingsModal/SettingsModal.tsx | 14 ++---- packages/namekit-react/package.json | 2 + .../namekit-react/src/components/Checkbox.tsx | 11 +++++ packages/namekit-react/src/index.ts | 1 + packages/namekit-react/tailwind.config.ts | 1 + pnpm-lock.yaml | 45 +++++++------------ 8 files changed, 35 insertions(+), 45 deletions(-) create mode 100644 packages/namekit-react/src/components/Checkbox.tsx diff --git a/apps/nameguard.io/package.json b/apps/nameguard.io/package.json index 8b111e3aa..ae6c2490a 100644 --- a/apps/nameguard.io/package.json +++ b/apps/nameguard.io/package.json @@ -26,7 +26,6 @@ "sugar-high": "0.7.0" }, "devDependencies": { - "@tailwindcss/forms": "0.5.9", "@types/node": "22.7.4", "@types/react": "18.3.11", "@types/react-dom": "18.3.0", diff --git a/apps/nameguard.io/tailwind.config.ts b/apps/nameguard.io/tailwind.config.ts index bdbe5d434..ae13d0232 100644 --- a/apps/nameguard.io/tailwind.config.ts +++ b/apps/nameguard.io/tailwind.config.ts @@ -57,10 +57,7 @@ const config: Config = { }, }, }, - plugins: [ - require("@tailwindcss/forms")({ strategy: "class" }), - require("tailwind-scrollbar-hide"), - ], + plugins: [require("tailwind-scrollbar-hide")], }; export default config; diff --git a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx index 0a377651c..4dface9ab 100644 --- a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx +++ b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx @@ -1,7 +1,7 @@ import React, { useState, Fragment } from "react"; import { Dialog, Transition } from "@headlessui/react"; import { XMarkIcon } from "@heroicons/react/24/solid"; -import { Button, IconButton } from "@namehash/namekit-react"; +import { Button, IconButton, Checkbox } from "@namehash/namekit-react"; import { useSettingsStore, type Settings } from "../../stores/settings"; @@ -73,12 +73,10 @@ export const SettingsModal = () => {
- setLocalSettings((prev) => ({ @@ -108,12 +106,10 @@ export const SettingsModal = () => {
- setLocalSettings((prev) => ({ @@ -142,12 +138,10 @@ export const SettingsModal = () => {
- setLocalSettings((prev) => ({ diff --git a/packages/namekit-react/package.json b/packages/namekit-react/package.json index 1f5972738..6abc90641 100644 --- a/packages/namekit-react/package.json +++ b/packages/namekit-react/package.json @@ -55,6 +55,8 @@ "react-dom": "18.3.1", "tailwindcss": "3.4.13", "tsup": "8.3.0", + "@types/node": "22.7.4", + "@tailwindcss/forms": "0.5.9", "typescript": "5.6.2" }, "peerDependencies": { diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx new file mode 100644 index 000000000..f365d2be7 --- /dev/null +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -0,0 +1,11 @@ +import React, { InputHTMLAttributes } from "react"; + +export const Checkbox = (props: InputHTMLAttributes) => { + return ( + + ); +}; diff --git a/packages/namekit-react/src/index.ts b/packages/namekit-react/src/index.ts index 77e97e8d9..637b4d8a3 100644 --- a/packages/namekit-react/src/index.ts +++ b/packages/namekit-react/src/index.ts @@ -13,3 +13,4 @@ export { ENSTextArea } from "./components/ENSTextArea"; export { Input } from "./components/Input"; export { ENSInput } from "./components/ENSInput"; export { Link } from "./components/Link"; +export { Checkbox } from "./components/Checkbox"; diff --git a/packages/namekit-react/tailwind.config.ts b/packages/namekit-react/tailwind.config.ts index a0197b1eb..3da2a2eab 100644 --- a/packages/namekit-react/tailwind.config.ts +++ b/packages/namekit-react/tailwind.config.ts @@ -11,6 +11,7 @@ const config: Config = { }, }, }, + plugins: [require("@tailwindcss/forms")({ strategy: "class" })], }; export default config; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eceafb81a..842b1164b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -149,9 +149,6 @@ importers: specifier: 0.7.0 version: 0.7.0 devDependencies: - '@tailwindcss/forms': - specifier: 0.5.9 - version: 0.5.9(tailwindcss@3.4.13) '@types/node': specifier: 22.7.4 version: 22.7.4 @@ -572,6 +569,12 @@ importers: '@namekit/tsconfig': specifier: workspace:* version: link:../../internal/tsconfig + '@tailwindcss/forms': + specifier: 0.5.9 + version: 0.5.9(tailwindcss@3.4.13) + '@types/node': + specifier: 22.7.4 + version: 22.7.4 '@types/react': specifier: 18.3.11 version: 18.3.11 @@ -3193,15 +3196,6 @@ packages: supports-color: optional: true - debug@4.3.4: - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - debug@4.3.7: resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} engines: {node: '>=6.0'} @@ -4661,9 +4655,6 @@ packages: ms@2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} - ms@2.1.2: - resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} - ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -9003,7 +8994,7 @@ snapshots: '@typescript-eslint/types': 7.2.0 '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.6.2) '@typescript-eslint/visitor-keys': 7.2.0 - debug: 4.3.4 + debug: 4.3.7(supports-color@8.1.1) eslint: 8.57.1 optionalDependencies: typescript: 5.6.2 @@ -9910,10 +9901,6 @@ snapshots: dependencies: ms: 2.1.3 - debug@4.3.4: - dependencies: - ms: 2.1.2 - debug@4.3.7(supports-color@8.1.1): dependencies: ms: 2.1.3 @@ -10315,7 +10302,7 @@ snapshots: eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.1) eslint-plugin-react: 7.34.1(eslint@8.57.1) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1) @@ -10335,11 +10322,11 @@ snapshots: eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1): dependencies: - debug: 4.3.4 + debug: 4.3.7(supports-color@8.1.1) enhanced-resolve: 5.16.1 eslint: 8.57.1 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.7.5 is-core-module: 2.13.1 @@ -10352,10 +10339,10 @@ snapshots: eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.1): dependencies: - debug: 4.3.4 + debug: 4.3.7(supports-color@8.1.1) enhanced-resolve: 5.16.1 eslint: 8.57.1 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.1))(eslint@8.57.1) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.7.5 @@ -10378,7 +10365,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1): + eslint-module-utils@2.8.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -10389,7 +10376,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -10426,7 +10413,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -11671,8 +11658,6 @@ snapshots: ms@2.0.0: {} - ms@2.1.2: {} - ms@2.1.3: {} mute-stream@0.0.8: {} From a9e4ea5bf2f69500dc91a7f59d6596a40afd29a2 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 29 Oct 2024 18:58:39 -0300 Subject: [PATCH 02/25] feat: update Checkbox style --- packages/namekit-react/src/components/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index f365d2be7..6e4ca90d5 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -4,7 +4,7 @@ export const Checkbox = (props: InputHTMLAttributes) => { return ( ); From 2dbdc1f1ebd36cd0c17ba7ff067651c9c9f1e2f7 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 29 Oct 2024 19:02:09 -0300 Subject: [PATCH 03/25] feat: add the disabled variant style --- packages/namekit-react/src/components/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 6e4ca90d5..03b502772 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -4,7 +4,7 @@ export const Checkbox = (props: InputHTMLAttributes) => { return ( ); From 2f91c7e1bfcc391f2cb0a8b56fb25f459fcbfa1e Mon Sep 17 00:00:00 2001 From: eduramme Date: Wed, 30 Oct 2024 10:59:30 -0300 Subject: [PATCH 04/25] feat: create Checkbox Custom --- packages/namekit-react/src/components/Checkbox.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 03b502772..73044a90c 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -1,11 +1,15 @@ +import cc from "classcat"; import React, { InputHTMLAttributes } from "react"; export const Checkbox = (props: InputHTMLAttributes) => { return ( ); }; From f40de57964ca9bf3086c3ab07c0e18f4c770cdd2 Mon Sep 17 00:00:00 2001 From: eduramme Date: Wed, 30 Oct 2024 11:01:01 -0300 Subject: [PATCH 05/25] feat: disable hover effects when disabled --- .../stories/Namekit/Checkbox.stories.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx new file mode 100644 index 000000000..cb592c8af --- /dev/null +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; +import { Checkbox } from "@namehash/namekit-react"; + +const meta: Meta = { + title: "UI/Checkbox", + component: Checkbox, + argTypes: { + disabled: { control: "boolean" }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const Disabled: Story = { + args: { + disabled: true, + }, +}; + +export const DisabledChecked: Story = { + args: { + checked: true, + disabled: true, + }, +}; + +export const CustomStyling: Story = { + args: { + style: { + width: "24px", + height: "24px", + backgroundColor: "blue", + borderWidth: "2px", + borderColor: "red", + transition: "all 0.3s ease", + }, + }, +}; From 1a4637d7abb802a18341177c7200811d1057f1e8 Mon Sep 17 00:00:00 2001 From: eduramme Date: Wed, 30 Oct 2024 11:01:26 -0300 Subject: [PATCH 06/25] feat: remove hover effects when disabled --- packages/namekit-react/src/components/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 73044a90c..3f246a424 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -7,7 +7,7 @@ export const Checkbox = (props: InputHTMLAttributes) => { type="checkbox" {...props} className={cc([ - "nk-form-checkbox nk-h-4 nk-w-4 nk-rounded nk-border-[1.25px] nk-border-gray-300 nk-text-black nk-ring-0 nk-cursor-pointer checked:nk-ring-0 focus:nk-ring-0 focus:nk-ring-transparent focus:nk-outline-none focus-visible:nk-border-gray-400 active:nk-ring-0 hover:nk-border-gray-400 disabled:nk-cursor-not-allowed disabled:nk-opacity-50 disabled:nk-bg-gray-100 disabled:checked:nk-bg-gray-300", + "nk-form-checkbox nk-h-4 nk-w-4 nk-rounded nk-border-[1.25px] nk-border-gray-300 nk-text-black nk-ring-0 nk-cursor-pointer checked:nk-ring-0 focus:nk-ring-0 focus:nk-ring-transparent focus:nk-outline-none focus-visible:nk-border-gray-400 active:nk-ring-0 enabled:hover:nk-border-gray-400 disabled:nk-cursor-not-allowed disabled:nk-opacity-50 disabled:nk-bg-gray-100 disabled:checked:nk-bg-gray-300", props.className, ])} /> From 5023c121e51066b8d13a527bac0a32d68ab5e9d6 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 18:56:37 -0300 Subject: [PATCH 07/25] feat: create Checkbox item with description --- .../SettingsModal/SettingsModal.tsx | 136 ++++++------------ .../namekit-react/src/components/Checkbox.tsx | 45 ++++-- 2 files changed, 78 insertions(+), 103 deletions(-) diff --git a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx index 4dface9ab..4c5f7a074 100644 --- a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx +++ b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx @@ -71,102 +71,50 @@ export const SettingsModal = () => { Adjust these settings based on your preferences.
-
-
- - setLocalSettings((prev) => ({ - ...prev, - attemptEnsNormalization: e.target.checked, - })) - } - /> -
-
- -

- Attempt ENS Normalization before inspecting search - queries. If normalization fails the raw search query - will be inspected instead. -

-
-
+ + setLocalSettings((prev) => ({ + ...prev, + attemptEnsNormalization: e.target.checked, + })) + } + /> -
-
- - setLocalSettings((prev) => ({ - ...prev, - assumedTld: e.target.checked ? "eth" : null, - })) - } - /> -
-
- -

- Automatically adds “.eth” as an assumed top-level - name. -

-
-
+ + setLocalSettings((prev) => ({ + ...prev, + assumedTld: e.target.checked ? "eth" : null, + })) + } + /> -
-
- - setLocalSettings((prev) => ({ - ...prev, - trimWhitespace: e.target.checked, - })) - } - /> -
-
- -

- Remove any leading or trailing whitespace characters - before performing inspection. -

-
-
+ + setLocalSettings((prev) => ({ + ...prev, + trimWhitespace: e.target.checked, + })) + } + />
diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 3f246a424..d58c8c022 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -1,15 +1,42 @@ import cc from "classcat"; import React, { InputHTMLAttributes } from "react"; -export const Checkbox = (props: InputHTMLAttributes) => { +interface CheckboxProps extends InputHTMLAttributes { + label?: string; + description?: string; +} + +export const Checkbox = ({ label, description, ...props }: CheckboxProps) => { return ( - +
+
+ +
+ {label && ( +
+ + {description && ( +

+ {description} +

+ )} +
+ )} +
); }; From 1ccd60f674d0abb16e50b7a8adc9e0b3521043d6 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 19:00:27 -0300 Subject: [PATCH 08/25] refactor: Checkbox code --- packages/namekit-react/src/components/Checkbox.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index d58c8c022..1caad5392 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -6,7 +6,12 @@ interface CheckboxProps extends InputHTMLAttributes { description?: string; } -export const Checkbox = ({ label, description, ...props }: CheckboxProps) => { +export const Checkbox = ({ + label, + description, + className, + ...props +}: CheckboxProps) => { return (
@@ -14,8 +19,8 @@ export const Checkbox = ({ label, description, ...props }: CheckboxProps) => { type="checkbox" {...props} className={cc([ - "nk-form-checkbox nk-h-4 nk-w-4 nk-rounded nk-border-[1.25px] nk-border-gray-300 nk-text-black nk-ring-0 nk-cursor-pointer checked:nk-ring-0 focus:nk-ring-0 focus:nk-ring-transparent focus:nk-outline-none focus-visible:nk-border-gray-400 active:nk-ring-0 enabled:hover:nk-border-gray-400 disabled:nk-cursor-not-allowed disabled:nk-opacity-50 disabled:nk-bg-gray-100 disabled:checked:nk-bg-gray-300", - props.className, + "nk-form-checkbox nk-h-4 nk-w-4 nk-rounded nk-border-[1.25px] nk-border-gray-300 nk-text-black nk-cursor-pointer checked:nk-ring-0 focus:nk-ring-0 focus:nk-ring-transparent focus:nk-outline-none focus-visible:nk-border-gray-400 enabled:hover:nk-border-gray-400 disabled:nk-cursor-not-allowed disabled:nk-opacity-50 disabled:nk-bg-gray-100 disabled:checked:nk-bg-gray-300", + className, ])} />
From 549f14ebb984508b2a0ab68d20c61414c161eaa5 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 19:25:50 -0300 Subject: [PATCH 09/25] test sotrybook --- .../stories/Namekit/Checkbox.stories.tsx | 20 +++++++++++++++++++ .../namekit-react/src/components/Checkbox.tsx | 6 ++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index cb592c8af..546c3d137 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -7,6 +7,11 @@ const meta: Meta = { component: Checkbox, argTypes: { disabled: { control: "boolean" }, + checked: { control: "boolean" }, + className: { control: "text" }, + label: { control: "text" }, + description: { control: "text" }, + id: { control: "text" }, }, }; @@ -29,6 +34,21 @@ export const DisabledChecked: Story = { }, }; +export const WithClassName: Story = { + args: { + className: "bg-red-500", + }, +}; + +export const WithLabel: Story = { + args: { + label: "Checkbox", + description: "This is a checkbox", + id: "checkbox-1", + disabled: true, + }, +}; + export const CustomStyling: Story = { args: { style: { diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 1caad5392..24a0f483e 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -10,6 +10,7 @@ export const Checkbox = ({ label, description, className, + id, ...props }: CheckboxProps) => { return ( @@ -17,6 +18,7 @@ export const Checkbox = ({
{description && (

{description} From d06a0fe84116c8361dc7d114c9ddba6798c1100b Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 20:32:15 -0300 Subject: [PATCH 10/25] feat: create label (children) logic --- .../stories/Namekit/Checkbox.stories.tsx | 5 +-- .../SettingsModal/SettingsModal.tsx | 41 +++++++++++------ .../namekit-react/src/components/Checkbox.tsx | 44 ++++++------------- 3 files changed, 42 insertions(+), 48 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index 546c3d137..f5ec8eabd 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -9,8 +9,6 @@ const meta: Meta = { disabled: { control: "boolean" }, checked: { control: "boolean" }, className: { control: "text" }, - label: { control: "text" }, - description: { control: "text" }, id: { control: "text" }, }, }; @@ -42,8 +40,7 @@ export const WithClassName: Story = { export const WithLabel: Story = { args: { - label: "Checkbox", - description: "This is a checkbox", + children: "Checkbox", id: "checkbox-1", disabled: true, }, diff --git a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx index 4c5f7a074..cc1e513a8 100644 --- a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx +++ b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx @@ -76,55 +76,70 @@ export const SettingsModal = () => { aria-describedby="attempt-ens-normalization-description" name="attempt-ens-normalization" checked={localSettings.attemptEnsNormalization} - label="Attempt normalization" - description="Attempt ENS Normalization before inspecting search queries. If normalization fails the raw search query will be inspected instead." onChange={(e) => setLocalSettings((prev) => ({ ...prev, attemptEnsNormalization: e.target.checked, })) } - /> + > +

Attempt normalization

+

+ Attempt ENS Normalization before inspecting search + queries. If normalization fails the raw search query + will be inspected instead. +

+ setLocalSettings((prev) => ({ ...prev, assumedTld: e.target.checked ? "eth" : null, })) } - /> + > +

Assume ".eth"

+

+ Automatically adds “.eth” as an assumed top-level + name. +

+ setLocalSettings((prev) => ({ ...prev, trimWhitespace: e.target.checked, })) } - /> + > +

Trim whitespace

+

+ Remove any leading or trailing whitespace characters + before performing inspection. +

+
- - +
diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 24a0f483e..6bced6bf3 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -1,49 +1,31 @@ import cc from "classcat"; import React, { InputHTMLAttributes } from "react"; -interface CheckboxProps extends InputHTMLAttributes { - label?: string; - description?: string; -} - export const Checkbox = ({ - label, - description, className, id, + children, ...props -}: CheckboxProps) => { +}: InputHTMLAttributes) => { return ( -
-
+
+
{children}
+ ); }; From 12dce6422da7e31e703ec72761aa7d95d162a1b7 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 20:36:32 -0300 Subject: [PATCH 11/25] feat: create EnabledUnchecked and EnabledChecked stories --- .../stories/Namekit/Checkbox.stories.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index f5ec8eabd..9bfa8f5f7 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -19,6 +19,20 @@ type Story = StoryObj; export const Default: Story = {}; +export const EnabledUnchecked: Story = { + args: { + checked: false, + disabled: false, + }, +}; + +export const EnabledChecked: Story = { + args: { + checked: true, + disabled: false, + }, +}; + export const Disabled: Story = { args: { disabled: true, From 9e68b88fe5cc8688858b91b9c44e4d47e74f3212 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 20:55:39 -0300 Subject: [PATCH 12/25] feat: create label stories --- .../stories/Namekit/Checkbox.stories.tsx | 67 +++++++++++++++++-- 1 file changed, 60 insertions(+), 7 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index 9bfa8f5f7..6260520a4 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -46,16 +46,9 @@ export const DisabledChecked: Story = { }, }; -export const WithClassName: Story = { - args: { - className: "bg-red-500", - }, -}; - export const WithLabel: Story = { args: { children: "Checkbox", - id: "checkbox-1", disabled: true, }, }; @@ -72,3 +65,63 @@ export const CustomStyling: Story = { }, }, }; + +export const EnabledWithLabel: Story = { + args: { + children: "Enabled Checkbox", + disabled: false, + }, +}; + +export const DisabledWithLabel: Story = { + args: { + children: "Disabled Checkbox", + disabled: true, + }, +}; + +export const CheckboxWithDescriptiveText: Story = { + args: { + children: ( + <> +

Accept Terms & Conditions

+

+ I agree to the Terms of Service and Privacy Policy. By checking this + box, I acknowledge that I have read and understood all terms and + conditions. +

+ + ), + id: "checkbox-with-description", + disabled: false, + }, +}; + +export const DisabledCheckboxWithDescriptiveText: Story = { + args: { + children: ( + <> +

Accept Terms & Conditions

+

+ I agree to the Terms of Service and Privacy Policy. By checking this + box, I acknowledge that I have read and understood all terms and + conditions. +

+ + ), + id: "checkbox-with-description", + disabled: true, + }, +}; From 521c11c872385513e0cd1ef6e068849d2086051e Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 20:56:51 -0300 Subject: [PATCH 13/25] refactor checkbox --- .../namekit-react/src/components/Checkbox.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 6bced6bf3..12df8d9af 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -5,19 +5,21 @@ export const Checkbox = ({ className, id, children, + disabled, ...props }: InputHTMLAttributes) => { return ( ); }; From 3fd741f0cfb4ac20401b37830521b5729d4463fa Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 21:16:21 -0300 Subject: [PATCH 14/25] run changesets --- .changeset/lovely-lemons-design.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lovely-lemons-design.md diff --git a/.changeset/lovely-lemons-design.md b/.changeset/lovely-lemons-design.md new file mode 100644 index 000000000..8c60f27a3 --- /dev/null +++ b/.changeset/lovely-lemons-design.md @@ -0,0 +1,5 @@ +--- +"@namehash/namekit-react": minor +--- + +Added new Checkbox component to the package. The Checkbox component allows rendering checkboxes with labels in a consistent style. From 808ee4eb9c6874f6b4ae4fa98f794dbcf82da78e Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 21:25:06 -0300 Subject: [PATCH 15/25] fix storybook styles --- .../stories/Namekit/Checkbox.stories.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index 6260520a4..418896175 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -46,13 +46,6 @@ export const DisabledChecked: Story = { }, }; -export const WithLabel: Story = { - args: { - children: "Checkbox", - disabled: true, - }, -}; - export const CustomStyling: Story = { args: { style: { @@ -66,21 +59,26 @@ export const CustomStyling: Story = { }, }; -export const EnabledWithLabel: Story = { +export const WithLabel: Story = { args: { - children: "Enabled Checkbox", - disabled: false, + children: "Accept Terms & Conditions", }, }; export const DisabledWithLabel: Story = { args: { - children: "Disabled Checkbox", + children: "Accept Terms & Conditions", disabled: true, }, }; -export const CheckboxWithDescriptiveText: Story = { +export const WithCustomLabel: Story = { + args: { + children:

Accept Terms & Conditions

, + }, +}; + +export const WithDescriptiveText: Story = { args: { children: ( <> @@ -103,7 +101,7 @@ export const CheckboxWithDescriptiveText: Story = { }, }; -export const DisabledCheckboxWithDescriptiveText: Story = { +export const DisabledWithDescriptiveText: Story = { args: { children: ( <> From bd470b87feb50b56130b98aaa792aebc15d38435 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 21:30:29 -0300 Subject: [PATCH 16/25] remove unused variables --- .../storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index 418896175..5193d9c0b 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -8,8 +8,6 @@ const meta: Meta = { argTypes: { disabled: { control: "boolean" }, checked: { control: "boolean" }, - className: { control: "text" }, - id: { control: "text" }, }, }; @@ -96,7 +94,6 @@ export const WithDescriptiveText: Story = {

), - id: "checkbox-with-description", disabled: false, }, }; @@ -119,7 +116,6 @@ export const DisabledWithDescriptiveText: Story = {

), - id: "checkbox-with-description", disabled: true, }, }; From 5bb25cbdc7cf1ccb22ce4eb15a9fa7c17ee890a2 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 21:34:39 -0300 Subject: [PATCH 17/25] fix label styling --- .../src/components/SettingsModal/SettingsModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx index cc1e513a8..8329e1d20 100644 --- a/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx +++ b/packages/nameguard-react/src/components/SettingsModal/SettingsModal.tsx @@ -84,7 +84,7 @@ export const SettingsModal = () => { } >

Attempt normalization

-

+

Attempt ENS Normalization before inspecting search queries. If normalization fails the raw search query will be inspected instead. @@ -104,7 +104,7 @@ export const SettingsModal = () => { } >

Assume ".eth"

-

+

Automatically adds “.eth” as an assumed top-level name.

@@ -123,7 +123,7 @@ export const SettingsModal = () => { } >

Trim whitespace

-

+

Remove any leading or trailing whitespace characters before performing inspection.

From a227968dba1ff7f9e698854ca87065fa71244a3c Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 21:35:06 -0300 Subject: [PATCH 18/25] fix label styling --- packages/namekit-react/src/components/Checkbox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index 12df8d9af..a121231a6 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -11,7 +11,7 @@ export const Checkbox = ({ return (
From d3524e8fb76ff4fd6da0dd4b365c2da40ea35b93 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 21:38:17 -0300 Subject: [PATCH 19/25] improve CheckBox.stories --- .../stories/Namekit/Checkbox.stories.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index 5193d9c0b..7bf7323a6 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -83,9 +83,8 @@ export const WithDescriptiveText: Story = {

Accept Terms & Conditions

I agree to the Terms of Service and Privacy Policy. By checking this @@ -105,9 +104,8 @@ export const DisabledWithDescriptiveText: Story = {

Accept Terms & Conditions

I agree to the Terms of Service and Privacy Policy. By checking this From 8237d32f736da9060f1eb70d37a9adba07671866 Mon Sep 17 00:00:00 2001 From: eduramme Date: Tue, 5 Nov 2024 21:45:26 -0300 Subject: [PATCH 20/25] remove "@types/node" from namekit-react --- packages/namekit-react/package.json | 1 - pnpm-lock.yaml | 9 +++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/namekit-react/package.json b/packages/namekit-react/package.json index 1074c6df3..4d106f802 100644 --- a/packages/namekit-react/package.json +++ b/packages/namekit-react/package.json @@ -54,7 +54,6 @@ "react": "18.3.1", "react-dom": "18.3.1", "tailwindcss": "3.4.13", - "@types/node": "22.7.4", "@tailwindcss/forms": "0.5.9", "tsup": "8.3.5", "typescript": "5.6.2" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4904fd25d..c3602b613 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -566,9 +566,6 @@ importers: '@tailwindcss/forms': specifier: 0.5.9 version: 0.5.9(tailwindcss@3.4.13) - '@types/node': - specifier: 22.7.4 - version: 22.7.4 '@types/react': specifier: 18.3.11 version: 18.3.11 @@ -10566,7 +10563,7 @@ snapshots: debug: 4.3.7(supports-color@8.1.1) enhanced-resolve: 5.16.1 eslint: 8.57.1 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.7.5 @@ -10595,7 +10592,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -10627,7 +10624,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 From 870fe0bb54a1bfa86b0f2ca596d794831978d3a5 Mon Sep 17 00:00:00 2001 From: eduramme Date: Wed, 6 Nov 2024 10:42:39 -0300 Subject: [PATCH 21/25] include own css reset input styles --- packages/namekit-react/src/components/Input.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/namekit-react/src/components/Input.tsx b/packages/namekit-react/src/components/Input.tsx index 0aee82c07..db3014d87 100644 --- a/packages/namekit-react/src/components/Input.tsx +++ b/packages/namekit-react/src/components/Input.tsx @@ -25,7 +25,7 @@ const sizeClasses = { }; const slotBaseClasses = - "nk-h-full nk-justify-center nk-flex nk-items-center nk-select-none"; + "nk-h-full nk-justify-center nk-flex nk-items-center nk-select-none nk-cursor-text"; const slotColorClasses = { primary: "nk-text-gray-500", @@ -45,12 +45,12 @@ const getVariantClasses = ( const stateClasses = disabled ? { - primary: "nk-text-gray-500 nk-bg-gray-50", - secondary: "nk-text-gray-500 nk-bg-gray-200", + primary: "nk-text-gray-500 nk-bg-gray-50 nk-cursor-default", + secondary: "nk-text-gray-500 nk-bg-gray-200 nk-cursor-default", } : { - primary: "nk-bg-white hover:nk-border-gray-400", - secondary: "nk-bg-gray-100 hover:nk-border-gray-300", + primary: "nk-bg-white hover:nk-border-gray-400 nk-cursor-text", + secondary: "nk-bg-gray-100 hover:nk-border-gray-300 nk-cursor-text", }; return cc([baseClasses[variant], stateClasses[variant]]); @@ -85,7 +85,7 @@ export const Input: React.FC & { Slot: React.FC } = ({ ]); const inputClasses = cc([ - "nk-ring-0 focus:nk-outline-none nk-w-full h-full placeholder:nk-text-gray-500 nk-bg-transparent nk-border-red-300 nk-flex-1", + "nk-ring-0 nk-p-0 focus:nk-outline-none focus:nk-ring-0 focus:nk-ring-offset-0 nk-w-full h-full placeholder:nk-text-gray-500 nk-bg-transparent nk-outline-none nk-border-0 nk-flex-1", hasSlot && slotPosition === "left" ? "nk-pl-2" : "nk-pr-2", ]); From 8bed7360824b2db63f3d3a569d245f9ecc11ce52 Mon Sep 17 00:00:00 2001 From: eduramme Date: Wed, 6 Nov 2024 10:47:46 -0300 Subject: [PATCH 22/25] remove root README warning --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index ca8cc8b1e..2e24abc96 100644 --- a/README.md +++ b/README.md @@ -514,9 +514,3 @@ We use [Storybook](https://storybook.namekit.io/) to preview components across o - `@namehash/ens-webfont` - `@namehash/ui` - These components are mostly internal and not intended for public use, but they are used across our packages. - -## Tailwind Configuration - -When configuring Tailwind CSS for use with this project, please note the following: - -If you're using the `@tailwindcss/forms` plugin in your `tailwind.config.ts`, you may encounter some styling conflicts with our components. To resolve this, you should use the plugin with the class strategy applied. Here's an example of how to configure it: https://github.com/tailwindlabs/tailwindcss-forms?tab=readme-ov-file#using-only-global-styles-or-only-classes From c5d18fa970e5b93f5f6fe8768563f94593e56be7 Mon Sep 17 00:00:00 2001 From: eduramme Date: Wed, 6 Nov 2024 19:44:29 -0300 Subject: [PATCH 23/25] improve Checkbox stories --- .../stories/Namekit/Checkbox.stories.tsx | 53 +++++-------------- 1 file changed, 12 insertions(+), 41 deletions(-) diff --git a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx index 7bf7323a6..0a5b5dbaf 100644 --- a/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx +++ b/apps/storybook.namekit.io/stories/Namekit/Checkbox.stories.tsx @@ -15,12 +15,17 @@ export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + args: { + children: "Accept Terms & Conditions", + }, +}; export const EnabledUnchecked: Story = { args: { checked: false, disabled: false, + children: "Accept Terms & Conditions", }, }; @@ -28,12 +33,14 @@ export const EnabledChecked: Story = { args: { checked: true, disabled: false, + children: "Accept Terms & Conditions", }, }; export const Disabled: Story = { args: { disabled: true, + children: "Accept Terms & Conditions", }, }; @@ -41,11 +48,13 @@ export const DisabledChecked: Story = { args: { checked: true, disabled: true, + children: "Accept Terms & Conditions", }, }; export const CustomStyling: Story = { args: { + children:

Accept Terms & Conditions

, style: { width: "24px", height: "24px", @@ -57,26 +66,9 @@ export const CustomStyling: Story = { }, }; -export const WithLabel: Story = { - args: { - children: "Accept Terms & Conditions", - }, -}; - -export const DisabledWithLabel: Story = { - args: { - children: "Accept Terms & Conditions", - disabled: true, - }, -}; - -export const WithCustomLabel: Story = { - args: { - children:

Accept Terms & Conditions

, - }, -}; +export const WithoutLabel: Story = {}; -export const WithDescriptiveText: Story = { +export const WithAdvancedChildren: Story = { args: { children: ( <> @@ -96,24 +88,3 @@ export const WithDescriptiveText: Story = { disabled: false, }, }; - -export const DisabledWithDescriptiveText: Story = { - args: { - children: ( - <> -

Accept Terms & Conditions

-

- I agree to the Terms of Service and Privacy Policy. By checking this - box, I acknowledge that I have read and understood all terms and - conditions. -

- - ), - disabled: true, - }, -}; From 9d14070d1daa60ca6650338dc5d7692b3965d3a2 Mon Sep 17 00:00:00 2001 From: eduramme Date: Wed, 6 Nov 2024 20:53:37 -0300 Subject: [PATCH 24/25] apply inline-flex to Checkbox --- packages/namekit-react/src/components/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/namekit-react/src/components/Checkbox.tsx b/packages/namekit-react/src/components/Checkbox.tsx index a121231a6..99ca5bacb 100644 --- a/packages/namekit-react/src/components/Checkbox.tsx +++ b/packages/namekit-react/src/components/Checkbox.tsx @@ -11,7 +11,7 @@ export const Checkbox = ({ return (