Merge pull request #491 from tianenpang/refactor/radio

refactor(react-radio): integration with react-aria radio
nextui-org · Jun 2, 2022 · 4fb15f0 · 4fb15f0
2 parents b7e052d + 79864b2
commit 4fb15f0
Show file tree

Hide file tree

Showing 30 changed files with 1,018 additions and 905 deletions.
diff --git a/apps/docs/content/components/radio/color.ts b/apps/docs/content/components/radio/color.ts
@@ -1,26 +1,22 @@
-const App = `import { Radio, Spacer } from "@nextui-org/react";
+const App = `import { Radio } from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Radio.Group row value="primary">
+    <Radio.Group label="Colors" defaultValue="primary" isRow>
       <Radio value="primary" color="primary">
-        Primary
+        primary
       </Radio>
-      <Spacer />
       <Radio value="secondary" color="secondary">
-        Secondary
+        secondary
       </Radio>
-      <Spacer />
       <Radio value="success" color="success">
-        Success
+        success
       </Radio>
-      <Spacer />
       <Radio value="warning" color="warning">
-        Warning
+        warning
       </Radio>
-      <Spacer />
       <Radio value="error" color="error">
-        Error
+        error
       </Radio>
     </Radio.Group>
   );

diff --git a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts
@@ -0,0 +1,40 @@
+const App = `import React from 'react'
+import { Radio, Grid } from "@nextui-org/react";
+
+export default function App() {
+  const [checked, setChecked] = React.useState('B');
+
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Radio.Group label="Options (controlled)" defaultValue="A">
+          <Radio value="A">Option A</Radio>
+          <Radio value="B">Option B</Radio>
+          <Radio value="C">Option C</Radio>
+          <Radio value="D">Option D</Radio>
+        </Radio.Group>
+      </Grid>
+      <Grid>
+        <Radio.Group 
+          label="Options (uncontrolled)"
+          color="secondary"
+          value={checked}
+          onChange={setChecked}
+        >
+          <Radio value="A">Option A</Radio>
+          <Radio value="B">Option B</Radio>
+          <Radio value="C">Option C</Radio>
+          <Radio value="D">Option D</Radio>
+        </Radio.Group>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  '/App.js': App
+};
+
+export default {
+  ...react
+};
diff --git a/apps/docs/content/components/radio/default.ts b/apps/docs/content/components/radio/default.ts
@@ -2,7 +2,7 @@ const App = `import { Radio } from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Radio.Group value="A">
+    <Radio.Group label="Options" defaultValue="A">
       <Radio value="A">Option A</Radio>
       <Radio value="B">Option B</Radio>
       <Radio value="C">Option C</Radio>

diff --git a/apps/docs/content/components/radio/description.ts b/apps/docs/content/components/radio/description.ts
@@ -2,7 +2,7 @@ const App = `import { Radio } from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Radio.Group value="1">
+    <Radio.Group label="Options" defaultValue="1">
       <Radio value="1">
         Option 1
         <Radio.Description>
@@ -17,9 +17,9 @@ export default function App() {
       </Radio>
       <Radio value="3">
         Option 3
-          <Radio.Desc>
-            Description for Option2
-          </Radio.Desc>
+        <Radio.Desc>
+          Description for Option2
+        </Radio.Desc>
       </Radio>
     </Radio.Group>
   );

diff --git a/apps/docs/content/components/radio/disabled.ts b/apps/docs/content/components/radio/disabled.ts
@@ -2,27 +2,13 @@ const App = `import { Radio } from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Radio.Group value="1">
-      <Radio 
-        value="1"
-      >
-        Option 1
-      </Radio>
-      <Radio 
-        value="2" 
-        disabled
-      >
+    <Radio.Group label="Options" defaultValue="1">
+      <Radio value="1">Option 1</Radio>
+      <Radio value="2" isDisabled>
         Option 2
       </Radio>
-      <Radio 
-        value="3"
-      >
-        Option 3
-      </Radio>
-      <Radio 
-        value="4" 
-        disabled
-      >
+      <Radio value="3">Option 3</Radio>
+      <Radio value="4" isDisabled>
         Option 4
       </Radio>
     </Radio.Group>

diff --git a/apps/docs/content/components/radio/events.ts b/apps/docs/content/components/radio/events.ts
@@ -0,0 +1,31 @@
+const App = `import React from 'react'
+import { Radio, Text, Spacer } from "@nextui-org/react";
+
+export default function App() {
+  const [checked, setChecked] = React.useState('');
+
+  return (
+    <>
+      <Radio.Group 
+        label="Options"
+        value={checked}
+        onChange={setChecked}
+      >
+        <Radio value="A">Option A</Radio>
+        <Radio value="B">Option B</Radio>
+        <Radio value="C">Option C</Radio>
+        <Radio value="D">Option D</Radio>
+      </Radio.Group>
+      <Spacer y={1} />
+      <Text>You've checked: {checked}</Text>
+    </>
+  );
+}`;
+
+const react = {
+  '/App.js': App
+};
+
+export default {
+  ...react
+};
diff --git a/apps/docs/content/components/radio/index.ts b/apps/docs/content/components/radio/index.ts
@@ -1,19 +1,25 @@
-import default_radio from "./default";
-import disabled from "./disabled";
-import size from "./size";
-import color from "./color";
-import textColor from "./textColor";
-import squared from "./squared";
-import description from "./description";
-import row from "./row";
+import default_radio from './default';
+import disabled from './disabled';
+import size from './size';
+import color from './color';
+import labelColor from './labelColor';
+import squared from './squared';
+import description from './description';
+import row from './row';
+import noAnimation from './noAnimation';
+import controlledVsUncontrolled from './controlled-vs-uncontrolled';
+import events from './events';
 
 export default {
   default_radio,
   disabled,
   size,
   color,
-  textColor,
+  labelColor,
   squared,
   description,
   row,
+  noAnimation,
+  controlledVsUncontrolled,
+  events
 };
diff --git a/apps/docs/content/components/radio/labelColor.ts b/apps/docs/content/components/radio/labelColor.ts
@@ -0,0 +1,31 @@
+const App = `import { Radio } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Radio.Group label="Label colors" defaultValue="primary" isRow>
+      <Radio value="primary" color="primary" labelColor="primary">
+        primary
+      </Radio>
+      <Radio value="secondary" color="secondary" labelColor="secondary">
+        secondary
+      </Radio>
+      <Radio value="success" color="success" labelColor="success">
+        success
+      </Radio>
+      <Radio value="warning" color="warning" labelColor="warning">
+        warning
+      </Radio>
+      <Radio value="error" color="error" labelColor="error">
+        error
+      </Radio>
+    </Radio.Group>
+  );
+}`;
+
+const react = {
+  '/App.js': App
+};
+
+export default {
+  ...react
+};
diff --git a/apps/docs/content/components/radio/noAnimation.ts b/apps/docs/content/components/radio/noAnimation.ts
@@ -0,0 +1,20 @@
+const App = `import { Radio } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Radio.Group label="Options" defaultValue="1">
+      <Radio value="1" disableAnimation={true}>Option 1</Radio>
+      <Radio value="2" disableAnimation={true}>Option 2</Radio>
+      <Radio value="3" disableAnimation={true}>Option 3</Radio>
+      <Radio value="4" disableAnimation={true}>Option 4</Radio>
+    </Radio.Group>
+  );
+}`;
+
+const react = {
+  '/App.js': App
+};
+
+export default {
+  ...react
+};
diff --git a/apps/docs/content/components/radio/row.ts b/apps/docs/content/components/radio/row.ts
@@ -2,15 +2,24 @@ const App = `import { Radio } from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Radio.Group value="1" row>
+    <Radio.Group label="Options" defaultValue="1" isRow>
       <Radio value="1">
-        Option 1<Radio.Description>Description for Option1</Radio.Description>
+        Option 1
+        <Radio.Desc>
+          Description for Option1
+        </Radio.Desc>
       </Radio>
       <Radio value="2">
-        Option 2<Radio.Desc>Description for Option2</Radio.Desc>
+        Option 2
+        <Radio.Desc>
+          Description for Option2
+        </Radio.Desc>
       </Radio>
       <Radio value="3">
-        Option 3<Radio.Desc>Description for Option2</Radio.Desc>
+        Option 3
+        <Radio.Desc>
+          Description for Option2
+        </Radio.Desc>
       </Radio>
     </Radio.Group>
   );

diff --git a/apps/docs/content/components/radio/size.ts b/apps/docs/content/components/radio/size.ts
@@ -1,50 +1,24 @@
-const App = `import { Radio, Spacer } from "@nextui-org/react";
-import React from "react";
+const App = `import { Radio } from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState("xs");
   return (
-    <>
-      <Radio
-        checked={selected === "xs"}
-        onChange={() => setSelected("xs")}
-        size="xs"
-      >
-        xs
+    <Radio.Group label="Sizes" defaultValue="md">
+      <Radio value="xs" size="xs">
+        mini
       </Radio>
-      <Spacer />
-      <Radio
-        checked={selected === "sm"}
-        onChange={() => setSelected("sm")}
-        size="sm"
-      >
+      <Radio value="sm" size="sm">
         small
       </Radio>
-      <Spacer />
-      <Radio
-        checked={selected === "md"}
-        onChange={() => setSelected("md")}
-        size="md"
-      >
+      <Radio value="md" size="md">
         medium
       </Radio>
-      <Spacer />
-      <Radio
-        checked={selected === "lg"}
-        onChange={() => setSelected("lg")}
-        size="lg"
-      >
+      <Radio value="lg" size="lg">
         large
       </Radio>
-      <Spacer />
-      <Radio
-        checked={selected === "xl"}
-        onChange={() => setSelected("xl")}
-        size="xl"
-      >
+      <Radio value="xl" size="xl">
         xlarge
       </Radio>
-    </>
+    </Radio.Group>
   );
 }`;
 

diff --git a/apps/docs/content/components/radio/squared.ts b/apps/docs/content/components/radio/squared.ts
@@ -2,29 +2,17 @@ const App = `import { Radio } from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Radio.Group value="1">
-      <Radio 
-        value="1" 
-        squared
-      >
+    <Radio.Group label="Options" defaultValue="1">
+      <Radio value="1" isSquared>
         Option 1
       </Radio>
-      <Radio 
-        value="2" 
-        squared
-      >
+      <Radio value="2" isSquared>
         Option 2
       </Radio>
-      <Radio 
-        value="3" 
-        squared
-      >
+      <Radio value="3" isSquared>
         Option 3
       </Radio>
-      <Radio 
-        value="4" 
-        squared
-      >
+      <Radio value="4" isSquared>
         Option 4
       </Radio>
     </Radio.Group>