feat(slider): ✨ add slider component

package.json

@@ -24,20 +24,22 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "reakit": "^1.2.2",
-    "reakit-system": "^0.14.2",
-    "reakit-utils": "^0.14.2"
+    "@chakra-ui/hooks": "1.0.0-next.7",
+    "@chakra-ui/utils": "1.0.0-next.7",
+    "reakit": "1.2.2",
+    "reakit-system": "0.14.2",
+    "reakit-utils": "0.14.2"
   },
   "devDependencies": {
     "@babel/core": "7.11.1",
     "@commitlint/cli": "9.1.2",
     "@commitlint/config-conventional": "9.1.2",
-    "@storybook/addon-a11y": "6.0.12",
-    "@storybook/addon-actions": "6.0.12",
-    "@storybook/addon-essentials": "6.0.12",
-    "@storybook/addon-links": "6.0.12",
-    "@storybook/addon-storysource": "6.0.12",
-    "@storybook/react": "6.0.12",
+    "@storybook/addon-a11y": "6.0.14",
+    "@storybook/addon-actions": "6.0.14",
+    "@storybook/addon-essentials": "6.0.14",
+    "@storybook/addon-links": "6.0.14",
+    "@storybook/addon-storysource": "6.0.14",
+    "@storybook/react": "6.0.14",
     "@types/react": "16.9.46",
     "@types/react-dom": "16.9.8",
     "@typescript-eslint/eslint-plugin": "3.9.1",

src/accordion/Accordion.ts

@@ -1,9 +1,13 @@
 import { createComponent, createHook } from "reakit-system";
+import { BoxHTMLProps, useBox } from "reakit";
+
+import { AccordionStateReturn } from "./AccordionState";
 import { ACCORDION_KEYS } from "./__keys";
 
-export const useAccordion = createHook<{}, {}>({
+export const useAccordion = createHook<AccordionStateReturn, BoxHTMLProps>({
   name: "AccordionPanel",
   keys: ACCORDION_KEYS,
+  compose: [useBox],
 });
 
 export const Accordion = createComponent({

src/accordion/Accordion.stories.tsx → src/accordion/stories/Accordion.stories.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 
-import { useAccordionState } from "./AccordionState";
-import { Accordion } from "./Accordion";
-import { AccordionItem } from "./AccordionItem";
-import { AccordionTrigger } from "./AccordionTrigger";
-import { AccordionPanel } from "./AccordionPanel";
+import { useAccordionState } from "../AccordionState";
+import { Accordion } from "../Accordion";
+import { AccordionItem } from "../AccordionItem";
+import { AccordionTrigger } from "../AccordionTrigger";
+import { AccordionPanel } from "../AccordionPanel";
 
 export default {
   title: "Component/Accordion",

src/slider/Slider.ts

@@ -0,0 +1,29 @@
+import { createComponent, createHook } from "reakit-system";
+import { mergeRefs, ariaAttr, dataAttr } from "@chakra-ui/utils";
+import { BoxHTMLProps, useBox } from "reakit";
+
+import { UseSliderReturn } from "./SliderState";
+import { SLIDER_KEYS } from "./__keys";
+
+export const useSlider = createHook<UseSliderReturn, BoxHTMLProps>({
+  name: "useSlider",
+  keys: SLIDER_KEYS,
+  compose: [useBox],
+
+  useProps(options, { ref: htmlRef, style: htmlStyle, ...htmlProps }) {
+    return {
+      ref: mergeRefs(htmlRef, options.refs.rootRef),
+      tabIndex: -1,
+      "aria-disabled": ariaAttr(options.state.isDisabled),
+      "data-focused": dataAttr(options.state.isFocused),
+      style: { ...options.styles.rootStyle, ...htmlStyle },
+      ...htmlProps,
+    };
+  },
+});
+
+export const Slider = createComponent({
+  as: "div",
+  memo: true,
+  useHook: useSlider,
+});

src/slider/SliderFilledTrack.ts

@@ -0,0 +1,24 @@
+import { createComponent, createHook } from "reakit-system";
+import { BoxHTMLProps, useBox } from "reakit";
+
+import { UseSliderReturn } from "./SliderState";
+import { SLIDER_FILLED_TRACK_KEYS } from "./__keys";
+
+export const useSliderFilledTrack = createHook<UseSliderReturn, BoxHTMLProps>({
+  name: "useSliderFilledTrack",
+  keys: SLIDER_FILLED_TRACK_KEYS,
+  compose: [useBox],
+
+  useProps(options, { style: htmlStyle, ...htmlProps }) {
+    return {
+      style: { ...options.styles.innerTrackStyle, ...htmlStyle },
+      ...htmlProps,
+    };
+  },
+});
+
+export const SliderFilledTrack = createComponent({
+  as: "div",
+  memo: true,
+  useHook: useSliderFilledTrack,
+});