Skip to content

Commit

Permalink
Use switch from shadcn
Browse files Browse the repository at this point in the history
Improve test behavior
  • Loading branch information
razzeee committed Oct 13, 2024
1 parent 4e8c71c commit f420bfd
Show file tree
Hide file tree
Showing 9 changed files with 242 additions and 58 deletions.
2 changes: 1 addition & 1 deletion frontend/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
stories: ["../**/*.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-themes",
Expand Down
65 changes: 65 additions & 0 deletions frontend/@/components/ui/Switch.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import type { Meta, StoryObj } from "@storybook/react"

import { Switch } from "./switch"
import { expect, within } from "@storybook/test"
import { useArgs } from "@storybook/preview-api"
import React from "react"

const meta = {
title: "Components/Switch",
component: Switch,
} satisfies Meta<typeof Switch>

export default meta

type Story = StoryObj<typeof meta>

export const Enabled: Story = {
args: {
checked: true,
onCheckedChange: () => {},
},
render: function Render(args) {
const [{ checked }, updateArgs] = useArgs()

function onChange() {
updateArgs({ checked: !checked })
}

return <Switch checked={checked} onCheckedChange={onChange} />
},

play: async ({ canvasElement }) => {
const canvas = within(canvasElement)

const button = canvas.getByRole("switch")

expect(button).toBeInTheDocument()
expect(button).toHaveAttribute("data-state", "checked")
},
}

export const Disabled: Story = {
args: {
checked: false,
onCheckedChange: () => {},
},
render: function Render(args) {
const [{ checked }, updateArgs] = useArgs()

function onChange() {
updateArgs({ checked: !checked })
}

return <Switch checked={checked} onCheckedChange={onChange} />
},

play: async ({ canvasElement }) => {
const canvas = within(canvasElement)

const button = canvas.getByRole("switch")

expect(button).toBeInTheDocument()
expect(button).toHaveAttribute("data-state", "unchecked")
},
}
29 changes: 29 additions & 0 deletions frontend/@/components/ui/switch.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className,
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
)}
/>
</SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@headlessui/react": "^2.1.2",
"@mitresthen/matomo-tracker-react": "^0.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.1",
"@resvg/resvg-js": "^2.6.2",
"@sentry/nextjs": "^8.34.0",
"@storybook/test": "^8.3.5",
Expand Down
14 changes: 0 additions & 14 deletions frontend/src/components/Toggle.stories.tsx

This file was deleted.

37 changes: 0 additions & 37 deletions frontend/src/components/Toggle.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { VendingConfig } from "../../../types/Vending"
import Button from "../../Button"
import * as Currency from "../../currency"
import Spinner from "../../Spinner"
import Toggle from "../../Toggle"
import AppShareSlider from "./AppShareSlider"
import VendingSharesPreview from "./VendingSharesPreview"
import { useMutation, useQuery } from "@tanstack/react-query"
Expand All @@ -24,6 +23,7 @@ import {
getAppVendingSetupVendingappAppIdSetupGet,
postAppVendingSetupVendingappAppIdSetupPost,
} from "src/codegen"
import { Switch } from "@/components/ui/switch"

interface Props {
app: Appstream
Expand Down Expand Up @@ -149,7 +149,10 @@ const SetupControls: FunctionComponent<Props> = ({ app, vendingConfig }) => {
>
<div className="flex gap-3 border-b border-slate-400/20 pb-3">
<label>{t("enable-app-vending")}</label>
<Toggle enabled={vendingEnabled} setEnabled={setVendingEnabled} />
<Switch
checked={vendingEnabled}
onCheckedChange={setVendingEnabled}
/>
</div>
<div>
<label>{t("recommended-payment")}</label>
Expand Down Expand Up @@ -188,7 +191,10 @@ const SetupControls: FunctionComponent<Props> = ({ app, vendingConfig }) => {
)}
<div className="flex gap-3 border-t border-slate-400/20 pt-3">
<label>{t("require-payment")}</label>
<Toggle enabled={requirePayment} setEnabled={setRequirePayment} />
<Switch
checked={requirePayment}
onCheckedChange={setRequirePayment}
/>
</div>
<div>
<label>{t("minimum-payment")}</label>
Expand Down
4 changes: 2 additions & 2 deletions frontend/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
--popover: var(--flathub-white);
--popover-foreground: var(--flathub-dark-gunmetal);

--primary: 0 0% 9%;
--primary: var(--flathub-celestial-blue);
--primary-foreground: var(--flathub-lotion);

--secondary: 0 0% 96.1%;
Expand Down Expand Up @@ -154,7 +154,7 @@
--popover: var(--flathub-dark-gunmetal);
--popover-foreground: var(--flathub-lotion);

--primary: var(--flathub-lotion);
--primary: var(--flathub-celestial-blue);
--primary-foreground: 0 0% 9%;

--secondary: var(--flathub-arsenic);
Expand Down
136 changes: 135 additions & 1 deletion frontend/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4382,6 +4382,13 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/primitive@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/primitive@npm:1.1.0"
checksum: 10c0/1dcc8b5401799416ff8bdb15c7189b4536c193220ad8fd348a48b88f804ee38cec7bd03e2b9641f7da24610e2f61f23a306911ce883af92c4e8c1abac634cb61
languageName: node
linkType: hard

"@radix-ui/react-compose-refs@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-compose-refs@npm:1.1.0"
Expand All @@ -4395,7 +4402,39 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-slot@npm:^1.1.0":
"@radix-ui/react-context@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-context@npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/fc4ace9d79d7954c715ade765e06c95d7e1b12a63a536bcbe842fb904f03f88fc5bd6e38d44bd23243d37a270b4c44380fedddaeeae2d274f0b898a20665aba2
languageName: node
linkType: hard

"@radix-ui/react-primitive@npm:2.0.0":
version: 2.0.0
resolution: "@radix-ui/react-primitive@npm:2.0.0"
dependencies:
"@radix-ui/react-slot": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/00cb6ca499252ca848c299212ba6976171cea7608b10b3f9a9639d6732dea2df1197ba0d97c001a4fdb29313c3e7fc2a490f6245dd3579617a0ffd85ae964fdd
languageName: node
linkType: hard

"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-slot@npm:1.1.0"
dependencies:
Expand All @@ -4410,6 +4449,100 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-switch@npm:^1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-switch@npm:1.1.1"
dependencies:
"@radix-ui/primitive": "npm:1.1.0"
"@radix-ui/react-compose-refs": "npm:1.1.0"
"@radix-ui/react-context": "npm:1.1.1"
"@radix-ui/react-primitive": "npm:2.0.0"
"@radix-ui/react-use-controllable-state": "npm:1.1.0"
"@radix-ui/react-use-previous": "npm:1.1.0"
"@radix-ui/react-use-size": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/8b61aa3bf80d3a2037d67495cf5de9e1ffc0d0843edc0cde5adc1ff1a9b99b0a6b63a85951c79769ab5a44d484611d90dc85933a86d71f28028caa53d8db177b
languageName: node
linkType: hard

"@radix-ui/react-use-callback-ref@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/e954863f3baa151faf89ac052a5468b42650efca924417470efd1bd254b411a94c69c30de2fdbb90187b38cb984795978e12e30423dc41e4309d93d53b66d819
languageName: node
linkType: hard

"@radix-ui/react-use-controllable-state@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-use-controllable-state@npm:1.1.0"
dependencies:
"@radix-ui/react-use-callback-ref": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/2af883b5b25822ac226e60a6bfde647c0123a76345052a90219026059b3f7225844b2c13a9a16fba859c1cda5fb3d057f2a04503f71780e607516492db4eb3a1
languageName: node
linkType: hard

"@radix-ui/react-use-layout-effect@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-use-layout-effect@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/9bf87ece1845c038ed95863cfccf9d75f557c2400d606343bab0ab3192b9806b9840e6aa0a0333fdf3e83cf9982632852192f3e68d7d8367bc8c788dfdf8e62b
languageName: node
linkType: hard

"@radix-ui/react-use-previous@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-use-previous@npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/9787d24790d4e330715127f2f4db56c4cbed9b0a47f97e11a68582c08a356a53c1ec41c7537382f6fb8d0db25de152770f17430e8eaf0fa59705be97760acbad
languageName: node
linkType: hard

"@radix-ui/react-use-size@npm:1.1.0":
version: 1.1.0
resolution: "@radix-ui/react-use-size@npm:1.1.0"
dependencies:
"@radix-ui/react-use-layout-effect": "npm:1.1.0"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/4c8b89037597fdc1824d009e0c941b510c7c6c30f83024cc02c934edd748886786e7d9f36f57323b02ad29833e7fa7e8974d81969b4ab33d8f41661afa4f30a6
languageName: node
linkType: hard

"@react-aria/focus@npm:^3.17.1":
version: 3.17.1
resolution: "@react-aria/focus@npm:3.17.1"
Expand Down Expand Up @@ -10542,6 +10675,7 @@ __metadata:
"@mitresthen/matomo-tracker-react": "npm:^0.1.1"
"@neshca/cache-handler": "npm:^1.7.2"
"@radix-ui/react-slot": "npm:^1.1.0"
"@radix-ui/react-switch": "npm:^1.1.1"
"@resvg/resvg-js": "npm:^2.6.2"
"@sentry/nextjs": "npm:^8.34.0"
"@storybook/addon-a11y": "npm:^8.3.5"
Expand Down

0 comments on commit f420bfd

Please sign in to comment.