docs(tailwind): 📝 add tailwind support for adding examples

.storybook/postcss.config.js

@@ -18,6 +18,10 @@ function rewriteRootRule() {
 function addIdScope() {
   return root => {
     const filename = root.source.input.file;
+
+    const isTailwind = path.basename(path.dirname(filename)) === "tailwind";
+    if (isTailwind) return scopify("#tailwind")(root);
+
     const basename = path.basename(filename, ".css");
     const id = kebabCase(basename);
     return scopify(`#${id}`)(root);
@@ -26,5 +30,11 @@ function addIdScope() {
 
 module.exports = {
   exec: true,
-  plugins: [rewriteRootRule(), addIdScope()],
+  plugins: [
+    require("postcss-import"),
+    require("tailwindcss"),
+    require("autoprefixer"),
+    rewriteRootRule(),
+    addIdScope(),
+  ],
 };

.storybook/preview-body.html

@@ -0,0 +1,8 @@
+<style>
+  body {
+    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+      "Noto Color Emoji";
+  }
+</style>

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
+  rel="stylesheet"
+/>

package.json

@@ -92,7 +92,7 @@
     "@testing-library/dom": "^7.28.1",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
-    "@testing-library/react-hooks": "3.4.2",
+    "@testing-library/react-hooks": "3.6.0",
     "@testing-library/user-event": "12.5.0",
     "@textlint/markdown-to-ast": "^6.2.5",
     "@types/jest": "26.0.16",
@@ -107,6 +107,7 @@
     "@typescript-eslint/parser": "4.9.0",
     "all-contributors-cli": "^6.19.0",
     "ast-to-markdown": "^1.0.0",
+    "autoprefixer": "^9.8.6",
     "axios": "^0.21.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "^26.6.3",
@@ -117,8 +118,8 @@
     "concurrently": "5.3.0",
     "conventional-github-releaser": "3.1.5",
     "cross-env": "7.0.3",
-    "eslint": "7.14.0",
-    "eslint-config-prettier": "6.15.0",
+    "eslint": "7.15.0",
+    "eslint-config-prettier": "7.0.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.2.0",
     "eslint-plugin-import": "2.22.1",
@@ -129,26 +130,28 @@
     "gacp": "2.10.2",
     "glob": "^7.1.6",
     "glob-fs": "^0.1.7",
-    "husky": "4.3.0",
+    "husky": "4.3.5",
     "jest": "26.6.3",
     "jest-axe": "4.1.0",
     "jest-in-case": "1.0.2",
     "jest-matcher-utils": "26.6.2",
-    "lint-staged": "10.5.2",
+    "lint-staged": "10.5.3",
     "lodash": "4.17.20",
     "markdown-to-ast": "^6.0.3",
     "markdown-toc": "^1.2.0",
     "md-node-inject": "^1.0.1",
     "mockdate": "^3.0.2",
     "outdent": "^0.7.1",
+    "postcss": "^7.0.35",
+    "postcss-import": "^12.0.1",
     "postcss-scopify": "^0.1.9",
     "prettier": "2.2.1",
     "raw-loader": "^4.0.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-hook-form": "6.12.2",
     "react-spring": "8.0.27",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "17.0.1",
     "react-transition-group": "4.4.1",
     "react-virtual": "^2.3.2",
     "reakit": "1.3.1",
@@ -158,12 +161,13 @@
     "standard-version": "9.0.0",
     "storybook-addon-preview": "^2.1.0",
     "strip-comments": "^2.0.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "26.4.4",
     "ts-morph": "^9.1.0",
     "ts-node": "^9.1.0",
     "tsd": "^0.14.0",
     "typescript": "4.1.2",
-    "webpack": "^5.9.0",
+    "webpack": "^5.10.0",
     "yaml": "^1.10.0"
   },
   "peerDependencies": {

src/datepicker/stories/DatePickerStyled.stories.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import "../../../tailwind/index.css";
+import { DatePicker } from "./styled/DatePicker.component";
+import { RangeDatePicker } from "./styled/RangeDatePicker.component";
+
+export default {
+  component: DatePicker,
+  title: "DatePicker/Styled",
+  argTypes: {
+    value: { control: "date" },
+    minValue: { control: "date" },
+    maxValue: { control: "date" },
+    defaultValue: { control: "date", defaultValue: new Date() },
+  },
+  decorators: [
+    Story => {
+      document.body.id = "tailwind";
+      return <Story />;
+    },
+  ],
+} as Meta;
+
+const Base: Story = args => <DatePicker {...args} />;
+const RangeBase: Story = args => <RangeDatePicker {...args} />;
+
+export const Default = Base.bind({});
+Default.args = {};
+
+export const Range = RangeBase.bind({});
+Default.args = {};

src/datepicker/stories/Utils.component.tsx

@@ -10,6 +10,7 @@ export const CalendarIcon = () => (
 export const DoubleChevronLeft = (props: any) => {
   return (
     <svg
+      style={{ width: 16 }}
       {...props}
       fill="none"
       stroke="currentColor"
@@ -19,8 +20,8 @@ export const DoubleChevronLeft = (props: any) => {
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth="2"
-        d="M15 19l-7-7 7-7"
+        strokeWidth={2}
+        d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
       />
     </svg>
   );
@@ -29,26 +30,30 @@ export const DoubleChevronLeft = (props: any) => {
 export const ChevronLeft = (props: any) => {
   return (
     <svg
+      style={{ width: 16 }}
       {...props}
+      xmlns="http://www.w3.org/2000/svg"
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth="2"
-        d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+        strokeWidth={2}
+        d="M15 19l-7-7 7-7"
       />
     </svg>
   );
 };
 
 export const ChevronRight = (props: any) => (
-  <ChevronLeft style={{ transform: "rotate(180deg)" }} {...props} />
+  <ChevronLeft style={{ transform: "rotate(180deg)", width: 16 }} {...props} />
 );
 
 export const DoubleChevronRight = (props: any) => (
-  <DoubleChevronLeft style={{ transform: "rotate(180deg)" }} {...props} />
+  <DoubleChevronLeft
+    style={{ transform: "rotate(180deg)", width: 16 }}
+    {...props}
+  />
 );

src/datepicker/stories/styled/Calendar.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import {
+  CalendarCell,
+  CalendarGrid,
+  CalendarHeader,
+  CalendarButton,
+  CalendarWeekTitle,
+  CalendarCellButton,
+  CalendarStateReturn,
+  Calendar as CalendarWrapper,
+} from "@renderlesskit/react";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  DoubleChevronLeft,
+  DoubleChevronRight,
+} from "../Utils.component";
+
+export const Calendar: React.FC<CalendarStateReturn> = state => {
+  return (
+    <CalendarWrapper
+      {...state}
+      className="styled-datepicker calendar p-3 rounded-md bg-white shadow-lg w-max"
+    >
+      <div className="flex justify-between">
+        <CalendarButton
+          {...state}
+          goto="previousYear"
+          className="text-gray-700 w-16px"
+        >
+          <DoubleChevronLeft />
+        </CalendarButton>
+        <CalendarButton
+          {...state}
+          goto="previousMonth"
+          className="text-gray-700 w-16px"
+        >
+          <ChevronLeft />
+        </CalendarButton>
+        <CalendarHeader
+          className="text-gray-700 font-bold text-sm"
+          {...state}
+        />
+        <CalendarButton
+          {...state}
+          goto="nextMonth"
+          className="text-gray-700 w-16px"
+        >
+          <ChevronRight />
+        </CalendarButton>
+        <CalendarButton
+          {...state}
+          goto="nextYear"
+          className="text-gray-700 w-16px"
+        >
+          <DoubleChevronRight />
+        </CalendarButton>
+      </div>
+
+      <CalendarGrid {...state} as="table" className="p-4 mt-2">
+        <thead>
+          <tr className="text-center">
+            {state.weekDays.map((day, dayIndex) => {
+              return (
+                <CalendarWeekTitle
+                  {...state}
+                  className="text-gray-500 font-light calendar__cell"
+                  as="th"
+                  scope="col"
+                  key={dayIndex}
+                  dayIndex={dayIndex}
+                >
+                  <abbr title={day.title}>{day.abbr.slice(0, 2)}</abbr>
+                </CalendarWeekTitle>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {state.daysInMonth.map((week, weekIndex) => (
+            <tr key={weekIndex}>
+              {week.map((day, dayIndex) => (
+                <CalendarCell
+                  {...state}
+                  className="calendar__cell"
+                  as="td"
+                  key={dayIndex}
+                  date={day}
+                >
+                  <CalendarCellButton className="p-2" {...state} date={day} />
+                </CalendarCell>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </CalendarGrid>
+    </CalendarWrapper>
+  );
+};
+
+export const CalendarIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    focusable="false"
+    aria-hidden="true"
+    role="img"
+    className="w-5 stroke-current"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+    />
+  </svg>
+);

src/datepicker/stories/styled/DatePicker.component.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import {
+  DatePickerSegment,
+  DatePickerContent,
+  DatePickerTrigger,
+  useDatePickerState,
+  DatePickerSegmentField,
+  DatePickerInitialState,
+  DatePicker as DatePickerWrapper,
+} from "@renderlesskit/react";
+import { Calendar, CalendarIcon } from "./Calendar";
+
+export const DatePicker: React.FC<DatePickerInitialState> = props => {
+  const state = useDatePickerState({
+    gutter: 0,
+    unstable_offset: [-19, 10],
+    formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" },
+    ...props,
+  });
+
+  return (
+    <>
+      <DatePickerWrapper
+        className="styled-datepicker bg-white w-max rounded-md shadow-sm relative inline-block border border-gray-300"
+        {...state}
+      >
+        <div className="flex gap-4 justify-between p-2 pr-4 pl-4 rounded-md">
+          <DatePickerSegmentField
+            {...state}
+            className="flex justify-between gap-1"
+          >
+            {state.segments.map((segment, i) => (
+              <DatePickerSegment
+                key={i}
+                segment={segment}
+                {...state}
+                className="focus:text-blue-500 focus:outline-none font-mono"
+              />
+            ))}
+          </DatePickerSegmentField>
+
+          <DatePickerTrigger
+            className="text-gray-700 focus:outline-none focus:text-blue-500 relative inline-block"
+            {...state}
+          >
+            <CalendarIcon />
+          </DatePickerTrigger>
+        </div>
+      </DatePickerWrapper>
+      <DatePickerContent {...state}>
+        <Calendar {...state.calendar} />
+      </DatePickerContent>
+    </>
+  );
+};