docs(story): ✨ isolate story styles with post css (#149)

* feat(story): ✨  isolate story styles with post css

* fix(story): 🐛  single style for multiple stories with custom decorator

* fix(story): 🐛  deploy css error

* fix(story): 🐛  deploy story styles with wrong id

.storybook/postcss.config.js

@@ -0,0 +1,31 @@
+const path = require("path");
+const convertImports = require("postcss-import");
+const scopify = require("postcss-scopify");
+const { kebabCase } = require("lodash");
+
+function rewriteRootRule() {
+  return root => {
+    root.walkRules(rule => {
+      rule.selectors = rule.selectors.map(selector => {
+        if (selector === ":root") {
+          return "&";
+        }
+        return selector;
+      });
+    });
+  };
+}
+
+function addIdScope() {
+  return root => {
+    const filename = root.source.input.file;
+    const basename = path.basename(filename, ".css");
+    const id = kebabCase(basename);
+    return scopify(`#${id}`)(root);
+  };
+}
+
+module.exports = {
+  exec: true,
+  plugins: [convertImports(), rewriteRootRule(), addIdScope()],
+};

.storybook/preview.tsx

@@ -1,3 +1,6 @@
+import React from "react";
+import { kebabCase } from "lodash";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,3 +9,10 @@ export const parameters = {
     hideNoControlsWarning: true,
   },
 };
+
+export const decorators = [
+  (Story, context) => {
+    document.body.id = kebabCase(context.kind);
+    return <Story />;
+  },
+];

.storybook/webpack.config.js

@@ -5,6 +5,19 @@ module.exports = ({ config }) => {
     ...config.resolve.alias,
     "renderless-components": path.resolve(__dirname, "../src"),
   };
+  config.module.rules.push({
+    test: /\.css$/,
+    use: [
+      {
+        loader: require.resolve("postcss-loader"),
+        options: {
+          config: {
+            path: __dirname,
+          },
+        },
+      },
+    ],
+  });
 
   return config;
 };

package.json

@@ -118,6 +118,8 @@
     "lodash": "4.17.20",
     "mockdate": "^3.0.2",
     "outdent": "^0.7.1",
+    "postcss-import": "^12.0.1",
+    "postcss-scopify": "^0.1.9",
     "prettier": "2.1.2",
     "raw-loader": "^4.0.2",
     "react": "16.14.0",

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

@@ -2,9 +2,9 @@ import * as React from "react";
 import { Meta } from "@storybook/react";
 
 import { CompositeState } from "reakit/ts";
-import { App as Accordion } from "./Accordion.component";
 import { AccordionInitialState } from "../AccordionState";
-import { accordionTemplate, accordionTemplateJs } from "./templates";
+import { App as Accordion } from "./AccordionBasic.component";
+import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export const Default: React.FC<Omit<
@@ -17,8 +17,8 @@ export default {
   title: "Accordion/Basic",
   parameters: {
     preview: createPreviewTabs({
-      js: accordionTemplateJs,
-      ts: accordionTemplate,
+      js: accordionBasicTemplateJs,
+      ts: accordionBasicTemplate,
     }),
   },
 } as Meta;

src/calendar/stories/Calendar.stories.tsx → src/calendar/stories/CalendarBase.stories.tsx

@@ -3,18 +3,18 @@ import { Meta, Story } from "@storybook/react";
 import { useArgs } from "@storybook/client-api";
 import { addWeeks, format, subWeeks } from "date-fns";
 
-import "./Calendar.css";
+import "./CalendarBase.css";
 import {
-  calendarTemplate,
-  calendarTemplateJs,
-  calendarCssTemplate,
+  calendarBaseTemplate,
+  calendarBaseTemplateJs,
+  calendarBaseCssTemplate,
 } from "./templates";
-import { App as Calendar } from "./Calendar.component";
+import { App as Calendar } from "./CalendarBase.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: Calendar,
-  title: "Calendar",
+  title: "Calendar/Base",
   argTypes: {
     value: { control: "date" },
     minValue: { control: "date" },
@@ -23,9 +23,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: calendarTemplateJs,
-      ts: calendarTemplate,
-      css: calendarCssTemplate,
+      js: calendarBaseTemplateJs,
+      ts: calendarBaseTemplate,
+      css: calendarBaseCssTemplate,
     }),
   },
 } as Meta;

src/calendar/stories/RangeCalendar.stories.tsx → src/calendar/stories/CalendarRange.stories.tsx

@@ -3,17 +3,17 @@ import { Meta, Story } from "@storybook/react";
 import { useArgs } from "@storybook/client-api";
 import { addDays, addWeeks, subDays, format, subWeeks } from "date-fns";
 
-import "./RangeCalendar.css";
+import "./CalendarRange.css";
 import {
-  rangeCalendarTemplate,
-  rangeCalendarTemplateJs,
-  rangeCalendarCssTemplate,
+  calendarRangeTemplate,
+  calendarRangeTemplateJs,
+  calendarRangeCssTemplate,
 } from "./templates";
-import { App as RangeCalendar } from "./RangeCalendar.component";
+import { App as RangeCalendar } from "./CalendarRange.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
-  title: "RangeCalendar",
+  title: "Calendar/Range",
   component: RangeCalendar,
   argTypes: {
     start: { control: "date", name: "value.start" },
@@ -31,9 +31,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: rangeCalendarTemplateJs,
-      ts: rangeCalendarTemplate,
-      css: rangeCalendarCssTemplate,
+      js: calendarRangeTemplateJs,
+      ts: calendarRangeTemplate,
+      css: calendarRangeCssTemplate,
     }),
   },
 } as Meta;

src/datepicker/stories/DatePicker.stories.tsx → src/datepicker/stories/DatePickerBase.stories.tsx

@@ -4,17 +4,17 @@ import { useArgs } from "@storybook/client-api";
 import { addWeeks, subWeeks, format, addDays } from "date-fns";
 
 import {
-  datePickerTemplate,
-  datePickerTemplateJs,
-  datePickerCssTemplate,
+  datePickerBaseTemplate,
+  datePickerBaseTemplateJs,
+  datePickerBaseCssTemplate,
 } from "./templates";
-import "./DatePicker.css";
-import { App as DatePicker } from "./DatePicker.component";
+import "./DatePickerBase.css";
+import { App as DatePicker } from "./DatePickerBase.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: DatePicker,
-  title: "DatePicker",
+  title: "DatePicker/Base",
   argTypes: {
     value: { control: "date" },
     minValue: { control: "date" },
@@ -23,9 +23,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: datePickerTemplateJs,
-      ts: datePickerTemplate,
-      css: datePickerCssTemplate,
+      js: datePickerBaseTemplateJs,
+      ts: datePickerBaseTemplate,
+      css: datePickerBaseCssTemplate,
     }),
   },
 } as Meta;

src/datepicker/stories/DateRangePicker.stories.tsx → src/datepicker/stories/DatePickerRange.stories.tsx

@@ -5,16 +5,16 @@ import { useArgs } from "@storybook/client-api";
 import { addWeeks, setDate, subWeeks } from "date-fns";
 
 import {
-  dateRangePickerTemplate,
-  dateRangePickerTemplateJs,
-  dateRangePickerCssTemplate,
+  datePickerRangeTemplate,
+  datePickerRangeTemplateJs,
+  datePickerRangeCssTemplate,
 } from "./templates";
-import "./DatePicker.css";
-import { App as DateRangePicker } from "./DateRangePicker.component";
+import "./DatePickerRange.css";
+import { App as DateRangePicker } from "./DatePickerRange.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
-  title: "DateRangePicker",
+  title: "DatePicker/Range",
   component: DateRangePicker,
   argTypes: {
     start: { control: "date", name: "value.start" },
@@ -24,9 +24,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: dateRangePickerTemplateJs,
-      ts: dateRangePickerTemplate,
-      css: dateRangePickerCssTemplate,
+      js: datePickerRangeTemplateJs,
+      ts: datePickerRangeTemplate,
+      css: datePickerRangeCssTemplate,
     }),
   },
 } as Meta;

src/number-input/stories/NumberInput.stories.tsx

@@ -8,8 +8,8 @@ import {
   NumberInputDecrementButton,
   NumberInputIncrementButton,
 } from "../index";
-import { numberInputTemplate, numberInputTemplateJs } from "./templates";
 import { App as NumberInput } from "./NumberInput.component";
+import { numberInputTemplate, numberInputTemplateJs } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {

src/select/stories/Combobox.stories.tsx

@@ -7,6 +7,7 @@ import {
   comboboxTemplate,
   comboboxTemplateJs,
 } from "./templates";
+import "./Select.css";
 import { App as Combobox } from "./Combobox.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 import {
@@ -16,7 +17,7 @@ import {
   SelectOption,
   useSelectState,
   SelectInitialState,
-} from "..";
+} from "../index";
 
 export const Default: React.FC<Omit<
   SelectInitialState,
@@ -33,6 +34,12 @@ export default {
       css: selectCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "select";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const countries = [

src/select/stories/Select.stories.tsx

@@ -34,6 +34,12 @@ export default {
       css: selectCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "select";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const countries = [

src/slider/stories/MultiSlider.stories.tsx

@@ -21,6 +21,12 @@ export default {
       deps: ["reakit@latest"],
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <MultiSlider {...args} />;

src/slider/stories/RangeSlider.stories.tsx

@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <RangeSlider {...args} />;

src/slider/stories/SingleOriginSlider.stories.tsx

@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleOriginSlider {...args} />;

src/slider/stories/SingleReversedSlider.stories.tsx

@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleReversedSlider {...args} />;

src/slider/stories/SingleSlider.stories.tsx

@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleSlider {...args} />;

src/slider/stories/SingleVerticalSlider.stories.tsx

@@ -9,7 +9,6 @@ import {
 } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 import { App as SingleVerticalSlider } from "./SingleVerticalSlider.component";
-import { DefaultPage } from "renderless-components/pagination/stories/Pagination.stories";
 
 export default {
   component: SingleVerticalSlider,
@@ -21,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleVerticalSlider {...args} />;