Feat/#71 and #70 label + radios (#72)

* feat: add in Radio + Radio group

* feat: add in label

* feat: add in extra argument available to users

* fix: darkmode placement, adding darkmode to label

* fix: radio svg, label font weight

* fix: radio svg, label font weight

* fix: touching up Radio

* feat: more stories based on radix options

* fix: remove loop

* fix: address feedback; LabelProps tyle, line height

package.json

@@ -61,6 +61,8 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "tailwind-merge": "^1.14.0"

src/assets/build/-radio-selected.icon.tsx

@@ -0,0 +1,13 @@
+/* 🤖 this file was generated by svg-to-ts */
+export const RadioSelected = (props: any) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="State=Selected">
+      <circle id="Ellipse 1" cx="10" cy="10" r="4" />
+    </g>
+  </svg>
+)

src/assets/index.ts

@@ -1,3 +1,4 @@
 /* 🤖 this file was generated by svg-to-ts */
 export * from './build/-check.icon';
 export * from './build/-minus.icon';
+export * from './build/-radio-selected.icon';

src/components/Label/index.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import type { LabelProps } from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const labelVariants = cva(
+  'text-sm font-medium leading-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-foreground-inverse'
+)
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label, LabelProps }

src/components/Radio/RadioGroup.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+
+import { cn } from '@/lib/utils'
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+export { RadioGroup }

src/components/Radio/RadioGroupItem.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cn } from '@/lib/utils'
+import { RadioSelected } from '@/assets'
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'h-5 w-5 rounded-full border-[0.67px] border-border-default bg-grey-50 disabled:opacity-50 data-[state=checked]:border-primary-600 data-[state=checked]:bg-primary-600 text-foreground-inverse',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <RadioSelected className="text-inherit stroke-current stroke-1 fill-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroupItem as Radio }

src/components/Radio/index.tsx

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup'
+export { Radio } from './RadioGroupItem'

stories/Label/Label.example.tsx

@@ -0,0 +1,20 @@
+import { Checkbox } from '@/components/Checkbox'
+import { Label, LabelProps } from '@/components/Label'
+
+interface LabelDemoProps extends LabelProps {
+  labelText: string
+}
+const LabelDemo = (props: LabelDemoProps) => {
+  return (
+    <>
+      <div className="space-x-2">
+        <Label htmlFor={'checkbox'} className="dark:">
+          {props.labelText}
+        </Label>
+        <Checkbox id="checkbox" />
+      </div>
+    </>
+  )
+}
+
+export { LabelDemo }

stories/Label/Label.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { LabelDemo } from './Label.example'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Components/Label',
+  component: LabelDemo,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered'
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs']
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta<typeof LabelDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    labelText: 'A Label with a Checkbox',
+    htmlFor: 'checkbox'
+  }
+}

stories/Radio/Radio.example.tsx

@@ -0,0 +1,39 @@
+import { Label } from '@/components/Label'
+import { Radio, RadioGroup } from '@/components/Radio'
+import { useState } from 'react'
+export const RadioGroupDemo = ({
+  defaultValue,
+  disabled,
+  loop
+}: {
+  defaultValue?: string
+  disabled?: boolean
+  loop?: boolean
+}): JSX.Element => {
+  const [value, setValue] = useState(defaultValue)
+  const handleValueChange = (newValue: string) => {
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <RadioGroup
+      defaultValue={defaultValue}
+      onValueChange={handleValueChange}
+      disabled={disabled}
+      loop={loop}
+    >
+      <RadioWithLabel value="hello" />
+      <RadioWithLabel value="world" />
+      <RadioWithLabel value="goodbye" />
+      <RadioWithLabel value="friend" />
+    </RadioGroup>
+  )
+}
+const RadioWithLabel = ({ value }: { value: string }) => {
+  return (
+    <span className="flex items-center space-x-1">
+      <Radio value={value} />
+      <Label htmlFor={value}>{value}</Label>
+    </span>
+  )
+}