Merge pull request #742 from thunderstore-io/cyberstorm-switch

Add Switch component into Cyberstorm
thunderstore-io · Jul 13, 2023 · d1e2edf · d1e2edf
2 parents 914d433 + 6243979
commit d1e2edf
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 6 deletions.
diff --git a/apps/cyberstorm-storybook/stories/components/Switch.stories.tsx b/apps/cyberstorm-storybook/stories/components/Switch.stories.tsx
@@ -0,0 +1,53 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { Switch } from "@thunderstore/cyberstorm";
+import React, { CSSProperties, useState } from "react";
+
+export default {
+  title: "Cyberstorm/Components/Switch",
+  component: Switch,
+} as Meta<typeof Switch>;
+
+const backgroundStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--gap--16)",
+  backgroundColor: "var(--color-purple--4)",
+  padding: "var(--gap--16)",
+};
+
+const Template: StoryFn<typeof Switch> = () => {
+  const [state, setState] = useState(false);
+
+  return (
+    <div style={backgroundStyle}>
+      <div>
+        <Switch state={state} onChange={setState} />
+      </div>
+    </div>
+  );
+};
+
+const SameStateSwitchTemplate: StoryFn<typeof Switch> = () => {
+  const [state, setState] = useState(false);
+
+  return (
+    <div style={backgroundStyle}>
+      <div>
+        <Switch state={state} onChange={setState} />
+      </div>
+      <div>
+        <Switch state={state} onChange={setState} />
+      </div>
+    </div>
+  );
+};
+
+const RegularSwitch = Template.bind({});
+const DisabledSwitch = Template.bind({});
+DisabledSwitch.args = {
+  state: false,
+  disabled: true,
+};
+const SameStateSwitch = SameStateSwitchTemplate.bind({});
+
+export { RegularSwitch, DisabledSwitch, SameStateSwitch };
diff --git a/packages/cyberstorm-styles/src/styles/globals.css b/packages/cyberstorm-styles/src/styles/globals.css
@@ -39,6 +39,7 @@
   --border-radius--8: 0.5rem;
   --border-radius--12: 0.75rem;
   --border-radius--16: 1rem;
+  --border-radius--48: 3rem;
   --font-size--xs: var(--space--10);
   --font-size--s: var(--space--12);
   --font-size--m: var(--space--14);

diff --git a/packages/cyberstorm/package.json b/packages/cyberstorm/package.json
@@ -14,7 +14,6 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@thunderstore/dapper": "^0.1.0",
     "@babel/runtime": "^7.17.0",
     "@faker-js/faker": "^8.0.2",
     "@fortawesome/fontawesome-svg-core": "6.2.0",
@@ -29,7 +28,9 @@
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
     "@radix-ui/react-select": "^1.2.0",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.2",
+    "@thunderstore/dapper": "^0.1.0",
     "@types/react": "^18.0.0",
     "react": "^18.2.0",
     "react-data-table-component": "^7.5.3",

diff --git a/packages/cyberstorm/src/components/Layout/Settings/Connections/Connections.tsx b/packages/cyberstorm/src/components/Layout/Settings/Connections/Connections.tsx
@@ -1,10 +1,13 @@
+"use client";
+
 import styles from "./Connections.module.css";
 import { SettingItem } from "../../../SettingItem/SettingItem";
 import { Connection, UserSettings } from "@thunderstore/dapper/src/schema";
 import { PrivacyPolicyLink } from "../../../Links/Links";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { useState } from "react";
+import { Switch } from "../../../..";
 
 export interface ConnectionsProps {
   userData: UserSettings;
@@ -45,11 +48,7 @@ export function ConnectionsItem(props: ConnectionsItemProps) {
               </div>
             </div>
           ) : null}
-          <input
-            type="checkbox"
-            checked={enabled}
-            onClick={() => setEnabled(!enabled)}
-          />
+          <Switch state={enabled} onChange={() => setEnabled(!enabled)} />
         </div>
       </div>
     </div>

diff --git a/packages/cyberstorm/src/components/Switch/Switch.module.css b/packages/cyberstorm/src/components/Switch/Switch.module.css
@@ -0,0 +1,39 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space--40);
+  height: var(--space--24);
+  border: 1px solid rgb(55 55 134);
+  border-radius: var(--border-radius--48);
+  background-color: var(--color-surface--5);
+}
+
+.root:hover {
+  border: 1px solid rgb(99 90 159);
+  background-color: var(--color-surface--7);
+}
+
+.root[data-state="checked"] {
+  border: 1px solid rgb(57 233 170);
+  background-color: rgb(57 233 170);
+}
+
+.thumb {
+  width: var(--space--16);
+  height: var(--space--16);
+  border-radius: 2.875rem;
+  background-color: var(--color-text--secondary);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
+  transition: ease-out 120ms;
+}
+
+.root[data-state="unchecked"] .thumb {
+  background-color: var(--color-text--default);
+  transform: translateX(-0.5rem);
+}
+
+.root[data-state="checked"] .thumb {
+  background-color: var(--color-text--default);
+  transform: translateX(0.5rem);
+}
diff --git a/packages/cyberstorm/src/components/Switch/Switch.tsx b/packages/cyberstorm/src/components/Switch/Switch.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Dispatch, SetStateAction } from "react";
+import styles from "./Switch.module.css";
+import * as RadixSwitch from "@radix-ui/react-switch";
+
+export interface SwitchProps {
+  state: boolean;
+  onChange?: Dispatch<SetStateAction<boolean>>;
+  disabled?: boolean;
+}
+
+export function Switch(props: SwitchProps) {
+  const { state, onChange, disabled = false } = props;
+  return (
+    <RadixSwitch.Root
+      className={styles.root}
+      disabled={disabled}
+      onCheckedChange={onChange}
+      checked={state}
+    >
+      <RadixSwitch.Thumb className={styles.thumb} />
+    </RadixSwitch.Root>
+  );
+}
diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
@@ -58,6 +58,7 @@ export {
   MetaInfoItemList,
   type MetaInfoItemListProps,
 } from "./components/MetaInfoItemList/MetaInfoItemList";
+export { Switch, type SwitchProps } from "./components/Switch/Switch";
 export {
   PackageCard,
   type PackageCardProps,

diff --git a/yarn.lock b/yarn.lock
@@ -3385,6 +3385,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/[email protected]":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz#93b0ff95f65e2264a05b14ef1031ec798243dd6f"
@@ -3426,13 +3433,27 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
   integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dialog@^1.0.2":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.3.tgz#a715bf30f35fcd80476c0a07fcc073c1968e6d3e"
@@ -3579,6 +3600,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.1"
 
+"@radix-ui/[email protected]":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/[email protected]":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.3.tgz#0b4f4f9bd509f4510079e9e0734a734fd17cdce3"
@@ -3631,6 +3660,28 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
+"@radix-ui/react-switch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
+  integrity sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-tooltip@^1.0.2":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.5.tgz#fe20274aeac874db643717fc7761d5a8abdd62d1"
@@ -3657,6 +3708,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
@@ -3665,6 +3723,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/[email protected]":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz#09ab6455ab240b4f0a61faf06d4e5132c4d639f6"
@@ -3680,13 +3746,27 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
   integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
+  integrity sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"
@@ -3703,6 +3783,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/[email protected]":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.2.tgz#29b117a59ef09a984bdad12cb98d81e8350be450"