refactor(accordion): ♻️ remove console logs & rename item to trigger

adaptui · Oct 14, 2020 · e6a998b · e6a998b
1 parent a794ac6
commit e6a998b
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 47 deletions.
diff --git a/src/accordion/AccordionItem.tsx → src/accordion/AccordionTrigger.tsx b/src/accordion/AccordionItem.tsx → src/accordion/AccordionTrigger.tsx
@@ -14,7 +14,7 @@ import { createHook, createComponent } from "reakit-system";
 import { ACCORDION_ITEM_KEYS } from "./__keys";
 import { AccordionStateReturn } from "./AccordionState";
 
-export type AccordionItemOptions = ButtonOptions &
+export type AccordionTriggerOptions = ButtonOptions &
   CompositeItemOptions &
   Pick<Partial<AccordionStateReturn>, "manual"> &
   Pick<
@@ -28,13 +28,15 @@ export type AccordionItemOptions = ButtonOptions &
     | "allowToggle"
   >;
 
-export type AccordionItemHTMLProps = ButtonHTMLProps & CompositeItemHTMLProps;
+export type AccordionTriggerHTMLProps = ButtonHTMLProps &
+  CompositeItemHTMLProps;
 
-export type AccordionItemProps = AccordionItemOptions & AccordionItemHTMLProps;
+export type AccordionTriggerProps = AccordionTriggerOptions &
+  AccordionTriggerHTMLProps;
 
-export const useAccordionItem = createHook<
-  AccordionItemOptions,
-  AccordionItemHTMLProps
+export const useAccordionTrigger = createHook<
+  AccordionTriggerOptions,
+  AccordionTriggerHTMLProps
 >({
   name: "Accordion",
   compose: [useButton, useCompositeItem],
@@ -125,20 +127,20 @@ export const useAccordionItem = createHook<
   },
 });
 
-export const AccordionItem = createComponent({
+export const AccordionTrigger = createComponent({
   as: "button",
   memo: true,
-  useHook: useAccordionItem,
+  useHook: useAccordionTrigger,
 });
 
-function isAccordionSelected(options: AccordionItemOptions) {
+function isAccordionSelected(options: AccordionTriggerOptions) {
   const { id, allowMultiple, selectedId, selectedIds } = options;
 
   if (!allowMultiple) return selectedId === id;
   return selectedIds?.includes(id);
 }
 
-function useAccordionPanelId(options: AccordionItemOptions) {
+function useAccordionPanelId(options: AccordionTriggerOptions) {
   const { panels, id } = options;
 
   return React.useMemo(

diff --git a/src/accordion/__tests__/Accordion.test.tsx b/src/accordion/__tests__/Accordion.test.tsx
@@ -4,7 +4,7 @@ import { axe, render, press } from "reakit-test-utils";
 import {
   AccordionPanel,
   Accordion,
-  AccordionItem,
+  AccordionTrigger,
   useAccordionState,
 } from "../index";
 
@@ -14,17 +14,17 @@ const AccordionComponent = (props: any) => {
   return (
     <Accordion {...state}>
       <h3>
-        <AccordionItem {...state}>Trigger 1</AccordionItem>
+        <AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
       </h3>
       <AccordionPanel {...state}>Panel 1</AccordionPanel>
       <h3>
-        <AccordionItem id="accordion-2" {...state}>
+        <AccordionTrigger id="accordion-2" {...state}>
           Trigger 2
-        </AccordionItem>
+        </AccordionTrigger>
       </h3>
       <AccordionPanel {...state}>Panel 2</AccordionPanel>
       <h3>
-        <AccordionItem {...state}>Trigger 3</AccordionItem>
+        <AccordionTrigger {...state}>Trigger 3</AccordionTrigger>
       </h3>
       <AccordionPanel {...state}>Panel 3</AccordionPanel>
     </Accordion>

diff --git a/src/accordion/index.ts b/src/accordion/index.ts
@@ -1,4 +1,4 @@
 export * from "./AccordionState";
 export * from "./Accordion";
-export * from "./AccordionItem";
+export * from "./AccordionTrigger";
 export * from "./AccordionPanel";
diff --git a/src/accordion/stories/Accordion.stories.tsx b/src/accordion/stories/Accordion.stories.tsx
@@ -5,7 +5,7 @@ import "./index.css";
 import {
   useAccordionState,
   Accordion,
-  AccordionItem,
+  AccordionTrigger,
   AccordionPanel,
   AccordionInitialState,
 } from "../index";
@@ -20,25 +20,25 @@ const AccordionComponent: React.FC<AccordionInitialState> = props => {
   return (
     <Accordion {...state}>
       <h2>
-        <AccordionItem {...state}>Trigger 1</AccordionItem>
+        <AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
       </h2>
       <AccordionPanel {...state}>Panel 1</AccordionPanel>
       <h2>
-        <AccordionItem {...state}>Trigger 2</AccordionItem>
+        <AccordionTrigger {...state}>Trigger 2</AccordionTrigger>
       </h2>
       <AccordionPanel {...state}>Panel 2</AccordionPanel>
       <h2>
-        <AccordionItem {...state} id="accordion3">
+        <AccordionTrigger {...state} id="accordion3">
           Trigger 3
-        </AccordionItem>
+        </AccordionTrigger>
       </h2>
       <AccordionPanel {...state}>Panel 3</AccordionPanel>
       <h2>
-        <AccordionItem {...state}>Trigger 4</AccordionItem>
+        <AccordionTrigger {...state}>Trigger 4</AccordionTrigger>
       </h2>
       <AccordionPanel {...state}>Panel 4</AccordionPanel>
       <h2>
-        <AccordionItem {...state}>Trigger 5</AccordionItem>
+        <AccordionTrigger {...state}>Trigger 5</AccordionTrigger>
       </h2>
       <AccordionPanel {...state}>Panel 5</AccordionPanel>
     </Accordion>
@@ -66,12 +66,12 @@ export const Styled = () => {
   return (
     <Accordion {...props} id="accordionGroup" className="accordion">
       <h2>
-        <AccordionItem {...props} className="accordion-trigger">
+        <AccordionTrigger {...props} className="accordion-trigger">
           <span className="accordion-title">
             Personal Information
             <span className="accordion-icon"></span>
           </span>
-        </AccordionItem>
+        </AccordionTrigger>
       </h2>
       <AccordionPanel {...props} className="accordion-panel">
         <div>
@@ -117,12 +117,12 @@ export const Styled = () => {
       </AccordionPanel>
 
       <h2>
-        <AccordionItem {...props} className="accordion-trigger">
+        <AccordionTrigger {...props} className="accordion-trigger">
           <span className="accordion-title">
             Billing Address
             <span className="accordion-icon"></span>
           </span>
-        </AccordionItem>
+        </AccordionTrigger>
       </h2>
       <AccordionPanel {...props} className="accordion-panel">
         <div>
@@ -152,12 +152,12 @@ export const Styled = () => {
       </AccordionPanel>
 
       <h2>
-        <AccordionItem {...props} className="accordion-trigger">
+        <AccordionTrigger {...props} className="accordion-trigger">
           <span className="accordion-title">
             Shipping Address
             <span className="accordion-icon"></span>
           </span>
-        </AccordionItem>
+        </AccordionTrigger>
       </h2>
       <AccordionPanel {...props} className="accordion-panel">
         <div>

diff --git a/src/calendar/CalendarState.ts b/src/calendar/CalendarState.ts
@@ -69,7 +69,6 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     onChange,
     shouldUpdate: (prev, next) => prev !== next,
   });
-  console.log("%c value", "color: #d90000", value);
 
   const minValue = parseDate(minValueProp);
   const maxValue = parseDate(maxValueProp);

diff --git a/src/calendar/__tests__/RangeCalendar.test.tsx b/src/calendar/__tests__/RangeCalendar.test.tsx
@@ -17,11 +17,7 @@ const RangeCalendarComp: React.FC<RangeCalendarInitialState> = props => {
   const state = useRangeCalendarState(props);
 
   return (
-    <Calendar
-      {...state}
-      onChange={() => console.log("change")}
-      className="calendar-range"
-    >
+    <Calendar {...state} className="calendar-range">
       <div className="header">
         <CalendarButton {...state} goto="previousYear">
           previous year

diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/RangeCalendar.stories.tsx
@@ -32,11 +32,7 @@ const RangeCalendarComp: React.FC<RangeCalendarInitialState> = props => {
   const state = useRangeCalendarState(props);
 
   return (
-    <Calendar
-      {...state}
-      onChange={() => console.log("change")}
-      className="calendar-range"
-    >
+    <Calendar {...state} className="calendar-range">
       <div className="header">
         <CalendarButton {...state} goto="previousYear" className="prev-year">
           <DoubleChevronLeft />

diff --git a/src/datepicker/stories/DateRangePicker.stories.tsx b/src/datepicker/stories/DateRangePicker.stories.tsx
@@ -39,11 +39,7 @@ export default {
 
 const RangeCalendarComp: React.FC<RangeCalendarStateReturn> = state => {
   return (
-    <Calendar
-      {...state}
-      onChange={() => console.log("change")}
-      className="calendar-range"
-    >
+    <Calendar {...state} className="calendar-range">
       <div className="header">
         <CalendarButton {...state} goto="previousYear" className="prev-year">
           <DoubleChevronLeft />

diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx
@@ -9,7 +9,6 @@ import { UseNumberInputProps, useNumberInputState } from "../NumberInputState";
 
 const NumberInputComp = (props: UseNumberInputProps) => {
   const state = useNumberInputState(props);
-  console.log("%c state", "color: #5200cc", state);
 
   return (
     <div>

diff --git a/src/select/SelectState.ts b/src/select/SelectState.ts
@@ -92,7 +92,6 @@ export const useSelectState = (
   const setSelected = React.useCallback(
     (value: string, shouldRemainOpen?: boolean) => {
       if (allowMultiselect) {
-        console.log("%c selectedValue", "color: #00a3cc", selectedValue);
         selectedValue.includes(value)
           ? setSelectedValue(selectedValue.filter(item => item !== value))
           : setSelectedValue([...selectedValue, value]);