From 8ed0ae0d2675e3372343af0d82e9955698fdf613 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 16 Jan 2023 21:24:07 +0100 Subject: [PATCH 01/16] chore: add radix checkbox --- npm-shrinkwrap.json | 46 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 47 insertions(+) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 1905e9f47..fffed1c92 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -17,6 +17,7 @@ "@nivo/pie": "^0.80.0", "@nivo/scatterplot": "^0.80.0", "@primer/octicons-react": "^17.5.0", + "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-context-menu": "^1.0.0", "@radix-ui/react-dropdown-menu": "^1.0.0", "@radix-ui/react-hover-card": "^1.0.2", @@ -5894,6 +5895,51 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz", + "integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz", + "integrity": "sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-slot": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", + "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz", diff --git a/package.json b/package.json index ae0441992..609cfa661 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "@nivo/pie": "^0.80.0", "@nivo/scatterplot": "^0.80.0", "@primer/octicons-react": "^17.5.0", + "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-context-menu": "^1.0.0", "@radix-ui/react-dropdown-menu": "^1.0.0", "@radix-ui/react-hover-card": "^1.0.2", From adc69af84865266fdc241bc2b0ff3be380390684 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 16 Jan 2023 21:24:29 +0100 Subject: [PATCH 02/16] refactor: replace supabase to radix --- components/atoms/Button/button.tsx | 12 +++++---- components/atoms/Checkbox/checkbox.tsx | 34 +++++++++++++++++++++----- 2 files changed, 35 insertions(+), 11 deletions(-) diff --git a/components/atoms/Button/button.tsx b/components/atoms/Button/button.tsx index f4a1400f7..2a3ab0ac3 100644 --- a/components/atoms/Button/button.tsx +++ b/components/atoms/Button/button.tsx @@ -5,10 +5,9 @@ interface ButtonProps extends React.ComponentProps = ( props ) => { - +const Button: React.FC = (props) => { const style = { - primary: "!bg-orange-500 !border-orange-500 hover:!bg-orange-600", + primary: "!bg-light-orange-9 !text-light-orange-2 !border-light-orange-9 hover:!bg-light-orange-10", default: "!bg-slate-50 !border-slate-300 text-slate-800 hover:!bg-slate-100", outline: "!bg-orange-50 !border-orange-500 !text-orange-600 hover:!bg-orange-100", link: "!text-orange-600 hover:!bg-orange-100" @@ -18,12 +17,15 @@ const Button: React.FC = ( props ) => { + } + > {props.children} ); diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx index 8e85ca50c..2d2733636 100644 --- a/components/atoms/Checkbox/checkbox.tsx +++ b/components/atoms/Checkbox/checkbox.tsx @@ -1,13 +1,35 @@ import React, { HTMLAttributes } from "react"; -import { Checkbox as SupbaseCheckboxComponent } from "@supabase/ui"; +import * as Checkbox from "@radix-ui/react-checkbox"; +import { CheckIcon } from "@primer/octicons-react"; -interface CheckboxProps extends React.ComponentProps { +interface CheckboxProps { //Add additional prop definitions here - title: string + title: string; + name: string; + label: string; + value?: string | number | readonly string[]; + defaultChecked?: boolean; } -const Checkbox: React.FC = ( props ) => { - return ; +const CustomCheckbox: React.FC = ({ title, name, label, value, defaultChecked }) => { + return ( +
+ + + + + + +
+ ); }; -export default Checkbox; +export default CustomCheckbox; From b49d8b47883047239ffcbca69471774fcc8b61b4 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 16 Jan 2023 21:24:57 +0100 Subject: [PATCH 03/16] feat: create user Settings update page --- components/atoms/Pill/pill.tsx | 2 +- components/atoms/TextInput/text-input.tsx | 6 +- .../UserSettingsPage/user-settings-page.tsx | 102 ++++++++++++++++++ 3 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 components/organisms/UserSettingsPage/user-settings-page.tsx diff --git a/components/atoms/Pill/pill.tsx b/components/atoms/Pill/pill.tsx index 19784a6f0..f8165d7e6 100644 --- a/components/atoms/Pill/pill.tsx +++ b/components/atoms/Pill/pill.tsx @@ -24,7 +24,7 @@ const Pill: React.FC = ({ className, text, color = "slate", size = "b : "bg-light-slate-4 " } ${size === "small" ? "py-1 px-1.5 " : "py-1.5 px-2 "} - inline-flex items-center rounded-full gap-1`} + inline-flex items-center rounded-full gap-1 ${className}`} > {icon} diff --git a/components/atoms/TextInput/text-input.tsx b/components/atoms/TextInput/text-input.tsx index ff5dbdfb2..0494e4811 100644 --- a/components/atoms/TextInput/text-input.tsx +++ b/components/atoms/TextInput/text-input.tsx @@ -42,11 +42,11 @@ const TextInput = ({ {label &&

{label}

}
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx new file mode 100644 index 000000000..04f4d62c9 --- /dev/null +++ b/components/organisms/UserSettingsPage/user-settings-page.tsx @@ -0,0 +1,102 @@ +import Button from "components/atoms/Button/button"; +import Checkbox from "components/atoms/Checkbox/checkbox"; +import TextInput from "components/atoms/TextInput/text-input"; +import Title from "components/atoms/Typography/title"; +import React from "react"; +import Select from "components/atoms/Select/select"; +import SelectOption from "components/atoms/Select/select-option"; +import Pill from "components/atoms/Pill/pill"; +import { FaJava } from "react-icons/fa"; + +const UserSettingsPage = () => { + return ( +
+
+
+ + Public profile + +
+ + +
+ + + +
+ + + + {/* Bio section */} +
+ + +
+ + + + +
+ + + Other users will see the time difference from their local time. + +
+
+ + +
+ + +
+
+ + Interests + +
+ } /> + } /> + } /> + } /> + } /> + } /> +
+
+
+
+ ); +}; + +export default UserSettingsPage; From 8e9764e23981b20b3a8bb4e4df679c33ce601997 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 16 Jan 2023 21:25:13 +0100 Subject: [PATCH 04/16] docs: add user settings page to design system --- stories/organisms/user-settings-page.stories.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 stories/organisms/user-settings-page.stories.tsx diff --git a/stories/organisms/user-settings-page.stories.tsx b/stories/organisms/user-settings-page.stories.tsx new file mode 100644 index 000000000..2a6e554a3 --- /dev/null +++ b/stories/organisms/user-settings-page.stories.tsx @@ -0,0 +1,11 @@ +import UserSettingsPage from "components/organisms/UserSettingsPage/user-settings-page"; +import { ComponentStory } from "@storybook/react"; + +const StoryConfig = { + title: "Design System/Organisms/UserSettingsPage" +}; +export default StoryConfig; + +const UserSettingsPageTemplate: ComponentStory = () => ; + +export const Default = UserSettingsPageTemplate.bind({}); From 9068ae124ecbc9ef2c502f7bc2bebdbcaac4b3e7 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 17 Jan 2023 20:30:13 +0100 Subject: [PATCH 05/16] chore: add required assets --- "img/icons/\342\230\225\357\270\217.svg" | 9 +++++++++ "img/icons/\342\232\233\357\270\217.svg" | 9 +++++++++ "img/icons/\360\237\220\215.svg" | 9 +++++++++ "img/icons/\360\237\244\226.svg" | 9 +++++++++ "img/icons/\360\237\246\200.svg" | 9 +++++++++ "img/icons/\360\237\247\240.svg" | 9 +++++++++ 6 files changed, 54 insertions(+) create mode 100644 "img/icons/\342\230\225\357\270\217.svg" create mode 100644 "img/icons/\342\232\233\357\270\217.svg" create mode 100644 "img/icons/\360\237\220\215.svg" create mode 100644 "img/icons/\360\237\244\226.svg" create mode 100644 "img/icons/\360\237\246\200.svg" create mode 100644 "img/icons/\360\237\247\240.svg" diff --git "a/img/icons/\342\230\225\357\270\217.svg" "b/img/icons/\342\230\225\357\270\217.svg" new file mode 100644 index 000000000..ce848bc23 --- /dev/null +++ "b/img/icons/\342\230\225\357\270\217.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\342\232\233\357\270\217.svg" "b/img/icons/\342\232\233\357\270\217.svg" new file mode 100644 index 000000000..ade105a8a --- /dev/null +++ "b/img/icons/\342\232\233\357\270\217.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\220\215.svg" "b/img/icons/\360\237\220\215.svg" new file mode 100644 index 000000000..e206c22de --- /dev/null +++ "b/img/icons/\360\237\220\215.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\244\226.svg" "b/img/icons/\360\237\244\226.svg" new file mode 100644 index 000000000..50568cda3 --- /dev/null +++ "b/img/icons/\360\237\244\226.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\246\200.svg" "b/img/icons/\360\237\246\200.svg" new file mode 100644 index 000000000..34ebb806b --- /dev/null +++ "b/img/icons/\360\237\246\200.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\247\240.svg" "b/img/icons/\360\237\247\240.svg" new file mode 100644 index 000000000..a3e74010c --- /dev/null +++ "b/img/icons/\360\237\247\240.svg" @@ -0,0 +1,9 @@ + + + + + + + + + From 9785d1954b47b547068205602f4d7946e87b5237 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 17 Jan 2023 20:30:45 +0100 Subject: [PATCH 06/16] feat: create language pill --- .../atoms/LanguagePill/LanguagePill.tsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 components/atoms/LanguagePill/LanguagePill.tsx diff --git a/components/atoms/LanguagePill/LanguagePill.tsx b/components/atoms/LanguagePill/LanguagePill.tsx new file mode 100644 index 000000000..ce616be70 --- /dev/null +++ b/components/atoms/LanguagePill/LanguagePill.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import JavascriptIcon from "img/icons/☕️.svg"; +import ReactIcon from "/img/icons/⚛️.svg"; +import PythonIcon from "/img/icons/🐍.svg"; +import AIIcon from "/img/icons/🤖.svg"; +import MLIcon from "/img/icons/🧠.svg"; +import RustIcon from "/img/icons/🦀.svg"; +import Image from "next/legacy/image"; + +interface LanguagePillProps { + topic: "react" | "javascript" | "python" | "ML" | "AI" | "rust" | string; + classNames?: string; + onClick?: () => void; +} +const LanguagePill = ({ topic, classNames, onClick }: LanguagePillProps) => { + const renderTopicIcon = (name: string) => { + return name === "javascript" + ? JavascriptIcon + : name === "rust" + ? RustIcon + : name === "python" + ? PythonIcon + : name === "AI" + ? AIIcon + : name === "ML" + ? MLIcon + : name === "react" + ? ReactIcon + : ""; + }; + return ( +
+ {topic} + {topic} +
+ ); +}; + +export default LanguagePill; From 8f5892b1421dc9d5d387ace984af9cb6f318f49a Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 17 Jan 2023 20:33:54 +0100 Subject: [PATCH 07/16] feat: create user settings page component --- .../atoms/LanguagePill/LanguagePill.tsx | 3 +- .../UserSettingsPage/user-settings-page.tsx | 40 +++++++++++++------ 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/components/atoms/LanguagePill/LanguagePill.tsx b/components/atoms/LanguagePill/LanguagePill.tsx index ce616be70..66e607a3b 100644 --- a/components/atoms/LanguagePill/LanguagePill.tsx +++ b/components/atoms/LanguagePill/LanguagePill.tsx @@ -1,11 +1,12 @@ import React from "react"; +import Image from "next/legacy/image"; + import JavascriptIcon from "img/icons/☕️.svg"; import ReactIcon from "/img/icons/⚛️.svg"; import PythonIcon from "/img/icons/🐍.svg"; import AIIcon from "/img/icons/🤖.svg"; import MLIcon from "/img/icons/🧠.svg"; import RustIcon from "/img/icons/🦀.svg"; -import Image from "next/legacy/image"; interface LanguagePillProps { topic: "react" | "javascript" | "python" | "ML" | "AI" | "rust" | string; diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx index 04f4d62c9..ead1dccdf 100644 --- a/components/organisms/UserSettingsPage/user-settings-page.tsx +++ b/components/organisms/UserSettingsPage/user-settings-page.tsx @@ -1,14 +1,25 @@ +import React, { useState } from "react"; + import Button from "components/atoms/Button/button"; import Checkbox from "components/atoms/Checkbox/checkbox"; import TextInput from "components/atoms/TextInput/text-input"; import Title from "components/atoms/Typography/title"; -import React from "react"; import Select from "components/atoms/Select/select"; import SelectOption from "components/atoms/Select/select-option"; -import Pill from "components/atoms/Pill/pill"; -import { FaJava } from "react-icons/fa"; +import LanguagePill from "components/atoms/LanguagePill/LanguagePill"; const UserSettingsPage = () => { + const [selectedInterest, setSelectedInterest] = useState([]); + const interestArray = ["javascript", "python", "rust", "ML", "AI", "react"]; + + const handleSelectInterest = (interest: string) => { + if (selectedInterest.length > 0 && selectedInterest.includes(interest)) { + setSelectedInterest((prev) => prev.filter((item) => item !== interest)); + } else { + setSelectedInterest((prev) => [...prev, interest]); + } + }; + return (
@@ -81,18 +92,23 @@ const UserSettingsPage = () => {
-
- + <div className="flex flex-col gap-6"> + <Title className="!text-2xl !font-normal !text-light-slate-11" level={2}> Interests -
- } /> - } /> - } /> - } /> - } /> - } /> +
+ {interestArray.map((topic, index) => ( + handleSelectInterest(topic)} + classNames={`${selectedInterest.includes(topic) && "bg-light-orange-10 text-white"}`} + topic={topic} + key={index} + /> + ))}
+
From c417f85d08e7abeedf035358f5c36feb93d7822f Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 17 Jan 2023 20:34:17 +0100 Subject: [PATCH 08/16] docs: add user settings to storybook --- stories/atoms/language-pill.stories.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 stories/atoms/language-pill.stories.tsx diff --git a/stories/atoms/language-pill.stories.tsx b/stories/atoms/language-pill.stories.tsx new file mode 100644 index 000000000..9c1b40aa7 --- /dev/null +++ b/stories/atoms/language-pill.stories.tsx @@ -0,0 +1,22 @@ +import LanguagePill from "components/atoms/LanguagePill/LanguagePill"; +import { ComponentStory } from "@storybook/react"; + +const Storyconfig = { + title: "Design System/Atoms/LanguagePill" +}; +export default Storyconfig; + +const LanguagePillTemplate: ComponentStory = (args) => ; + +export const LanguagePillDefault = LanguagePillTemplate.bind({}); +export const LanguagePillSelected = LanguagePillTemplate.bind({}); + +LanguagePillDefault.args = { + topic: "javascript" +}; + +LanguagePillSelected.args = { + topic: "python", + + classNames: "bg-light-orange-10 text-white" +}; From 0d33d02bd8b1d867f3b87ab99c6b4dc0a1144544 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Thu, 19 Jan 2023 15:16:25 +0100 Subject: [PATCH 09/16] refactor: update checkbox color --- components/atoms/Checkbox/checkbox.tsx | 33 +++++++------------------- 1 file changed, 8 insertions(+), 25 deletions(-) diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx index 2d2733636..1a3bebccd 100644 --- a/components/atoms/Checkbox/checkbox.tsx +++ b/components/atoms/Checkbox/checkbox.tsx @@ -1,35 +1,18 @@ import React, { HTMLAttributes } from "react"; -import * as Checkbox from "@radix-ui/react-checkbox"; -import { CheckIcon } from "@primer/octicons-react"; +import { Checkbox as SupbaseCheckboxComponent } from "@supabase/ui"; -interface CheckboxProps { +interface CheckboxProps extends React.ComponentProps { //Add additional prop definitions here title: string; - name: string; - label: string; - value?: string | number | readonly string[]; - defaultChecked?: boolean; } -const CustomCheckbox: React.FC = ({ title, name, label, value, defaultChecked }) => { +const Checkbox: React.FC = (props) => { return ( -
- - - - - - -
+ *]:!bg-orange-500 !text-orange-500 ${props.className || ""}`} + {...props} + /> ); }; -export default CustomCheckbox; +export default Checkbox; From df105bd9c89564be25e1e1e1bb3530316af975ba Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Thu, 19 Jan 2023 15:17:33 +0100 Subject: [PATCH 10/16] chore: finishing touches --- .../organisms/UserSettingsPage/user-settings-page.tsx | 6 +++--- styles/globals.css | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx index ead1dccdf..626ea3cc8 100644 --- a/components/organisms/UserSettingsPage/user-settings-page.tsx +++ b/components/organisms/UserSettingsPage/user-settings-page.tsx @@ -40,8 +40,8 @@ const UserSettingsPage = () => { />
- - + +
+
+
+
+ + + +
+
- From 30c28a46f5e3fc6802fcf116f921f135eb6e3807 Mon Sep 17 00:00:00 2001 From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com> Date: Mon, 23 Jan 2023 16:25:14 +0100 Subject: [PATCH 16/16] Update components/organisms/UserSettingsPage/user-settings-page.tsx Co-authored-by: Brandon --- components/organisms/UserSettingsPage/user-settings-page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx index ee9f7ec28..5af5caef0 100644 --- a/components/organisms/UserSettingsPage/user-settings-page.tsx +++ b/components/organisms/UserSettingsPage/user-settings-page.tsx @@ -99,7 +99,7 @@ const UserSettingsPage = () => { ))}