From 66502e12c2be64d3b7e34a7a69b8a936125f977f Mon Sep 17 00:00:00 2001 From: Govind Singh Date: Tue, 14 Jun 2022 12:20:56 +0530 Subject: [PATCH 1/6] docs(storybook): :memo: refactor storybook preview --- .storybook/main.js | 2 +- .storybook/utils.ts | 173 ++++++++++++++---- .../stories/AccordionBasic.stories.tsx | 2 +- .../stories/AccordionMultiple.stories.tsx | 2 +- .../stories/AccordionStyled.stories.tsx | 6 +- .../stories/BreadcrumbsBasic.component.tsx | 2 + .../stories/BreadcrumbsBasic.stories.tsx | 14 +- .../stories/CalendarBasic.component.tsx | 17 +- .../stories/CalendarBasic.stories.tsx | 30 ++- .../stories/CalendarRange.component.tsx | 16 +- .../stories/CalendarRange.stories.tsx | 18 +- .../stories/CalendarRangeStyled.component.tsx | 14 +- .../stories/CalendarRangeStyled.stories.tsx | 17 +- .../stories/CalendarStyled.component.tsx | 16 +- src/calendar/stories/CalendarStyled.css | 61 ++++++ .../stories/CalendarStyled.stories.tsx | 30 ++- src/calendar/stories/tailwind.css | 53 ------ .../stories/DateFieldBasic.component.tsx | 13 +- .../stories/DateFieldBasic.stories.tsx | 30 +-- .../stories/DateFieldStyled.component.tsx | 14 +- src/datefield/stories/DateFieldStyled.css | 27 +++ .../stories/DateFieldStyled.stories.tsx | 30 +-- src/datefield/stories/tailwind.css | 3 - .../stories/DatePickerBasic.stories.tsx | 6 +- src/dialog/stories/DrawerBasic.component.tsx | 2 + src/dialog/stories/DrawerBasic.stories.tsx | 13 +- ...closureHorizontalCollapseBasic.stories.tsx | 9 +- ...isclosureVerticalCollapseBasic.stories.tsx | 2 +- ...ories.tsx => LinkBasicDefault.stories.tsx} | 7 +- .../LinkBasicDisabledExternalLink.stories.tsx | 43 +++++ .../stories/LinkBasicExternlaLink.stories.tsx | 44 +++++ yarn.lock | 5 - 32 files changed, 524 insertions(+), 197 deletions(-) create mode 100644 src/calendar/stories/CalendarStyled.css delete mode 100644 src/calendar/stories/tailwind.css create mode 100644 src/datefield/stories/DateFieldStyled.css delete mode 100644 src/datefield/stories/tailwind.css rename src/link/stories/{LinkBasic.stories.tsx => LinkBasicDefault.stories.tsx} (84%) create mode 100644 src/link/stories/LinkBasicDisabledExternalLink.stories.tsx create mode 100644 src/link/stories/LinkBasicExternlaLink.stories.tsx diff --git a/.storybook/main.js b/.storybook/main.js index 60db7f6fd..4b9d7d77c 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,7 +4,7 @@ module.exports = { features: { babelModeV7: true }, stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ - "storybook-addon-preview", + "storybook-addon-preview/register", "storybook-addon-react-docgen", "@storybook/addon-essentials", "@storybook/addon-a11y", diff --git a/.storybook/utils.ts b/.storybook/utils.ts index da8d73c98..13393ef03 100644 --- a/.storybook/utils.ts +++ b/.storybook/utils.ts @@ -1,5 +1,9 @@ /* eslint-disable no-new-func */ -import { CodeSandboxTemplate } from "storybook-addon-preview"; +import { + CodeSandboxTemplate, + CodeSandboxValue, + FilesParam, +} from "storybook-addon-preview"; type CreateControlsOptions = { unions?: string[]; @@ -29,9 +33,12 @@ export const createControls = (options?: CreateControlsOptions) => { } }; +interface FilesProp { + [index: string]: string; +} interface Props { - js?: string; - ts?: string; + js?: { template: string; files?: FilesProp }; + ts?: { template: string; files?: FilesProp }; jsUtils?: string; tsUtils?: string; css?: string; @@ -40,16 +47,18 @@ interface Props { export function createPreviewTabs(props: Props) { const { js, ts, jsUtils, tsUtils, css, deps: extraDeps = [] } = props; - const deps = ["@adaptui/react@latest", "reakit@latest", ...extraDeps]; const tabs = []; if (js) { tabs.push({ tab: "JSX", - template: js, + template: js.template, language: "jsx", copy: true, - codesandbox: REACTJS_CUSTOM_CODESANDBOX(deps), + codesandbox: REACTJS_CUSTOM_CODESANDBOX([...extraDeps], { + "src/components/index.js": js.template, + ...(js.files && js.files), + }), }); } @@ -59,17 +68,19 @@ export function createPreviewTabs(props: Props) { template: jsUtils, language: "jsx", copy: true, - codesandbox: REACTJS_CUSTOM_CODESANDBOX(deps), }); } if (ts) { tabs.push({ tab: "TSX", - template: ts, + template: ts.template, language: "tsx", copy: true, - codesandbox: REACT_CUSTOM_CODESANDBOX(deps), + codesandbox: REACT_CUSTOM_CODESANDBOX([...extraDeps], { + "src/components/index.tsx": ts.template, + ...(ts.files && ts.files), + }), }); } @@ -79,7 +90,6 @@ export function createPreviewTabs(props: Props) { template: tsUtils, language: "tsx", copy: true, - codesandbox: REACT_CUSTOM_CODESANDBOX(deps), }); } @@ -94,33 +104,124 @@ export function createPreviewTabs(props: Props) { return tabs; } - -const joinStrs = (strs: string[]) => { - return `[${strs.map(str => `"${str}"`).join(", ")}]`; -}; - -const REACTJS_CUSTOM_CODESANDBOX = (dependencies: string[]) => - new Function(` -var previews = arguments[0]; -return { - framework: "reactjs", +export const REACTJS_CUSTOM_CODESANDBOX: CodeSandboxTemplate = ( + userDependencies = [], + files = {}, +) => { + return { + template: "create-react-app-typescript", files: { - "src/App.js": previews["JSX"][0], - "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "", - ...(previews["UtilsJSX"] ? {"src/Utils.component.js": previews["UtilsJSX"][0]} : {}), + "public/index.html": ` + + + + + + + + + + React App + + + +
+ + + `, + "src/index.js": ` + import * as ReactDOM from "react-dom"; + import * as React from "react"; + import App from "./App"; + const rootElement = document.getElementById("root"); + ReactDOM.render(, rootElement); + `, + "src/App.js": `import React from \"react\";\nimport Component from \"./components\";\n\nexport default function App() {\n return (\n
\n
\n \n
\n
\n );\n}\n`, + ...files, }, - userDependencies: ${joinStrs(dependencies)}, -};`) as CodeSandboxTemplate; - -const REACT_CUSTOM_CODESANDBOX = (dependencies: string[]) => - new Function(` -var previews = arguments[0]; -return { - framework: "react", + dependencies: { + "@adaptui/react": "latest", + react: "18.0.0", + "react-dom": "18.0.0", + "react-scripts": "latest", + "@internationalized/date": "^3.0.0-rc.0", + }, + scripts: { + start: "react-scripts start", + build: "react-scripts build", + test: "react-scripts test --env=jsdom", + eject: "react-scripts eject", + }, + main: "src/index.js", + userDependencies, + }; +}; +export const REACT_CUSTOM_CODESANDBOX: CodeSandboxTemplate = ( + userDependencies = [], + files = {}, +) => { + return { + template: "create-react-app-typescript", files: { - "src/App.tsx": previews["TSX"][0], - "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "", - ...(previews["UtilsTSX"] ? {"src/Utils.component.tsx": previews["UtilsTSX"][0]} : {}), + "public/index.html": ` + + + + + + + + + + React App + + + +
+ + + `, + "src/index.tsx": ` + import * as ReactDOM from "react-dom"; + import * as React from "react"; + import App from "./App"; + const rootElement = document.getElementById("root"); + ReactDOM.render(, rootElement); + `, + "src/App.tsx": `import React from \"react\";\n import Component from \"./components\";\n\nexport default function App() {\n return (\n
\n
\n \n
\n
\n );\n}\n`, + ...files, + }, + dependencies: { + "@adaptui/react": "latest", + react: "17.0.2", + "react-dom": "17.0.2", + next: "12.0.7", }, - userDependencies: ${joinStrs(dependencies)}, -};`) as CodeSandboxTemplate; + devDependencies: { + "@types/node": "17.0.5", + "@types/react": "17.0.38", + "@types/react-dom": "17.0.11", + typescript: "4.5.4", + }, + scripts: { + dev: "next dev", + build: "next build", + start: "next start", + lint: "next lint", + }, + main: "src/index.ts", + userDependencies, + }; +}; diff --git a/src/accordion/stories/AccordionBasic.stories.tsx b/src/accordion/stories/AccordionBasic.stories.tsx index e4454db4a..ba77b5961 100644 --- a/src/accordion/stories/AccordionBasic.stories.tsx +++ b/src/accordion/stories/AccordionBasic.stories.tsx @@ -14,7 +14,7 @@ export default { component: AccordionBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ js: { template: js }, ts: { template: ts } }), }, } as Meta; diff --git a/src/accordion/stories/AccordionMultiple.stories.tsx b/src/accordion/stories/AccordionMultiple.stories.tsx index ce2edc1b1..831d10756 100644 --- a/src/accordion/stories/AccordionMultiple.stories.tsx +++ b/src/accordion/stories/AccordionMultiple.stories.tsx @@ -14,7 +14,7 @@ export default { component: AccordionMultiple, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ js: { template: js }, ts: { template: ts } }), }, } as Meta; diff --git a/src/accordion/stories/AccordionStyled.stories.tsx b/src/accordion/stories/AccordionStyled.stories.tsx index 7b785c286..fe9e1e944 100644 --- a/src/accordion/stories/AccordionStyled.stories.tsx +++ b/src/accordion/stories/AccordionStyled.stories.tsx @@ -17,7 +17,11 @@ export default { title: "Accordion/Styled", parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, css }), + preview: createPreviewTabs({ + js: { template: js }, + ts: { template: ts }, + css, + }), }, } as Meta; diff --git a/src/breadcrumbs/stories/BreadcrumbsBasic.component.tsx b/src/breadcrumbs/stories/BreadcrumbsBasic.component.tsx index 5a88c8647..008c7e182 100644 --- a/src/breadcrumbs/stories/BreadcrumbsBasic.component.tsx +++ b/src/breadcrumbs/stories/BreadcrumbsBasic.component.tsx @@ -2,6 +2,8 @@ import * as React from "react"; import { BreadcrumbLink, Breadcrumbs, BreadcrumbsProps } from "../../index"; +import "./BreadcrumbsBasic.css"; + export type BreadcrumbsBasicProps = BreadcrumbsProps & {}; export const BreadcrumbsBasic: React.FC = props => { diff --git a/src/breadcrumbs/stories/BreadcrumbsBasic.stories.tsx b/src/breadcrumbs/stories/BreadcrumbsBasic.stories.tsx index 9fffe76a2..872b67250 100644 --- a/src/breadcrumbs/stories/BreadcrumbsBasic.stories.tsx +++ b/src/breadcrumbs/stories/BreadcrumbsBasic.stories.tsx @@ -2,12 +2,11 @@ import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; +import css from "./templates/BreadcrumbsBasicCss"; import js from "./templates/BreadcrumbsBasicJsx"; import ts from "./templates/BreadcrumbsBasicTsx"; import { BreadcrumbsBasic } from "./BreadcrumbsBasic.component"; -import "./BreadcrumbsBasic.css"; - type Meta = ComponentMeta; type Story = ComponentStoryObj; @@ -16,7 +15,16 @@ export default { component: BreadcrumbsBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ + js: { + template: js, + files: { "src/components/BreadcrumbsBasic.css": css }, + }, + ts: { + template: ts, + files: { "src/components/BreadcrumbsBasic.css": css }, + }, + }), }, } as Meta; diff --git a/src/calendar/stories/CalendarBasic.component.tsx b/src/calendar/stories/CalendarBasic.component.tsx index 961dd62cc..2210ec0eb 100644 --- a/src/calendar/stories/CalendarBasic.component.tsx +++ b/src/calendar/stories/CalendarBasic.component.tsx @@ -1,6 +1,10 @@ import * as React from "react"; import { VisuallyHidden } from "ariakit"; -import { getWeeksInMonth, startOfWeek } from "@internationalized/date"; +import { + createCalendar, + getWeeksInMonth, + startOfWeek, +} from "@internationalized/date"; import { useLocale } from "@react-aria/i18n"; import { @@ -22,10 +26,17 @@ import { import { ChevronLeft, ChevronRight } from "./Utils.component"; -export type CalendarBasicProps = CalendarBaseStateProps & {}; +import "./CalendarBasic.css"; + +/** Omiting locale and createCalendar */ +export type CalendarBasicProps = Omit< + CalendarBaseStateProps, + "locale" | "createCalendar" +> & {}; export const CalendarBasic: React.FC = props => { - const state = useCalendarBaseState(props); + const { locale } = useLocale(); + const state = useCalendarBaseState({ ...props, locale, createCalendar }); const calendar = useCalendarState({ ...props, state }); return ( diff --git a/src/calendar/stories/CalendarBasic.stories.tsx b/src/calendar/stories/CalendarBasic.stories.tsx index 6701de79a..88b6a6760 100644 --- a/src/calendar/stories/CalendarBasic.stories.tsx +++ b/src/calendar/stories/CalendarBasic.stories.tsx @@ -1,6 +1,4 @@ import * as React from "react"; -import { createCalendar } from "@internationalized/date"; -import { useLocale } from "@react-aria/i18n"; import { ComponentMeta } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; @@ -12,8 +10,6 @@ import jsUtils from "./templates/UtilsJsx"; import tsUtils from "./templates/UtilsTsx"; import { CalendarBasic } from "./CalendarBasic.component"; -import "./CalendarBasic.css"; - type Meta = ComponentMeta; // type Story = ComponentStoryObj; @@ -22,12 +18,26 @@ export default { component: CalendarBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }), + preview: createPreviewTabs({ + js: { + template: js, + files: { + "src/components/CalendarBasic.css": css, + "src/components/Utils.component.js": jsUtils, + }, + }, + ts: { + template: ts, + files: { + "src/components/CalendarBasic.css": css, + "src/components/Utils.component.tsx": tsUtils, + }, + }, + css, + jsUtils, + tsUtils, + }), }, } as Meta; -export const Default = () => { - let { locale } = useLocale(); - - return ; -}; +export const Default = () => ; diff --git a/src/calendar/stories/CalendarRange.component.tsx b/src/calendar/stories/CalendarRange.component.tsx index 2b64e564a..c6bce1fdf 100644 --- a/src/calendar/stories/CalendarRange.component.tsx +++ b/src/calendar/stories/CalendarRange.component.tsx @@ -1,6 +1,10 @@ import * as React from "react"; import { VisuallyHidden } from "ariakit"; -import { getWeeksInMonth, startOfWeek } from "@internationalized/date"; +import { + createCalendar, + getWeeksInMonth, + startOfWeek, +} from "@internationalized/date"; import { useLocale } from "@react-aria/i18n"; import { @@ -22,10 +26,16 @@ import { import { ChevronLeft, ChevronRight } from "./Utils.component"; -export type CalendarRangeProps = RangeCalendarBaseStateProps & {}; +import "./CalendarRange.css"; + +export type CalendarRangeProps = Omit< + RangeCalendarBaseStateProps, + "locale" | "createCalendar" +> & {}; export const CalendarRange: React.FC = props => { - const state = useRangeCalendarBaseState(props); + const { locale } = useLocale(); + const state = useRangeCalendarBaseState({ ...props, locale, createCalendar }); const calendar = useRangeCalendarState({ ...props, state }); return ( diff --git a/src/calendar/stories/CalendarRange.stories.tsx b/src/calendar/stories/CalendarRange.stories.tsx index 102f97963..dc17a835f 100644 --- a/src/calendar/stories/CalendarRange.stories.tsx +++ b/src/calendar/stories/CalendarRange.stories.tsx @@ -1,6 +1,4 @@ import React from "react"; -import { createCalendar } from "@internationalized/date"; -import { useLocale } from "@react-aria/i18n"; import { ComponentMeta } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; @@ -12,8 +10,6 @@ import jsUtils from "./templates/UtilsJsx"; import tsUtils from "./templates/UtilsTsx"; import { CalendarRange } from "./CalendarRange.component"; -import "./CalendarRange.css"; - type Meta = ComponentMeta; // type Story = ComponentStoryObj; @@ -22,12 +18,14 @@ export default { component: CalendarRange, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }), + preview: createPreviewTabs({ + js: { template: js, files: { "src/components/CalendarRange.css": css } }, + ts: { template: ts, files: { "src/components/CalendarRange.css": css } }, + css, + jsUtils, + tsUtils, + }), }, } as Meta; -export const Default = () => { - let { locale } = useLocale(); - - return ; -}; +export const Default = () => ; diff --git a/src/calendar/stories/CalendarRangeStyled.component.tsx b/src/calendar/stories/CalendarRangeStyled.component.tsx index 2dd7515fd..4038719db 100644 --- a/src/calendar/stories/CalendarRangeStyled.component.tsx +++ b/src/calendar/stories/CalendarRangeStyled.component.tsx @@ -1,6 +1,10 @@ import * as React from "react"; import { VisuallyHidden } from "ariakit"; -import { getWeeksInMonth, startOfWeek } from "@internationalized/date"; +import { + createCalendar, + getWeeksInMonth, + startOfWeek, +} from "@internationalized/date"; import { useLocale } from "@react-aria/i18n"; import { @@ -22,12 +26,16 @@ import { import { ChevronLeft, ChevronRight } from "./Utils.component"; -export type CalendarRangeStyledProps = RangeCalendarBaseStateProps & {}; +export type CalendarRangeStyledProps = Omit< + RangeCalendarBaseStateProps, + "locale" | "createCalendar" +> & {}; export const CalendarRangeStyled: React.FC< CalendarRangeStyledProps > = props => { - const state = useRangeCalendarBaseState(props); + const { locale } = useLocale(); + const state = useRangeCalendarBaseState({ ...props, locale, createCalendar }); const calendar = useRangeCalendarState({ ...props, state }); return ( diff --git a/src/calendar/stories/CalendarRangeStyled.stories.tsx b/src/calendar/stories/CalendarRangeStyled.stories.tsx index 09db680aa..dbcc3947a 100644 --- a/src/calendar/stories/CalendarRangeStyled.stories.tsx +++ b/src/calendar/stories/CalendarRangeStyled.stories.tsx @@ -1,6 +1,4 @@ import React from "react"; -import { createCalendar } from "@internationalized/date"; -import { useLocale } from "@react-aria/i18n"; import { ComponentMeta } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; @@ -21,7 +19,12 @@ export default { component: CalendarRangeStyled, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, jsUtils, tsUtils }), + preview: createPreviewTabs({ + js: { template: js }, + ts: { template: ts }, + jsUtils, + tsUtils, + }), }, decorators: [ Story => { @@ -31,10 +34,4 @@ export default { ], } as Meta; -export const Default = () => { - let { locale } = useLocale(); - - return ( - - ); -}; +export const Default = () => ; diff --git a/src/calendar/stories/CalendarStyled.component.tsx b/src/calendar/stories/CalendarStyled.component.tsx index d02c09db3..7b3964abb 100644 --- a/src/calendar/stories/CalendarStyled.component.tsx +++ b/src/calendar/stories/CalendarStyled.component.tsx @@ -1,6 +1,10 @@ import * as React from "react"; import { VisuallyHidden } from "ariakit"; -import { getWeeksInMonth, startOfWeek } from "@internationalized/date"; +import { + createCalendar, + getWeeksInMonth, + startOfWeek, +} from "@internationalized/date"; import { useLocale } from "@react-aria/i18n"; import { @@ -22,10 +26,16 @@ import { import { ChevronLeft, ChevronRight } from "./Utils.component"; -export type CalendarStyledProps = CalendarBaseStateProps & {}; +import "./CalendarStyled.css"; + +export type CalendarStyledProps = Omit< + CalendarBaseStateProps, + "locale" | "createCalendar" +> & {}; export const CalendarStyled: React.FC = props => { - const state = useCalendarBaseState(props); + const { locale } = useLocale(); + const state = useCalendarBaseState({ ...props, locale, createCalendar }); const calendar = useCalendarState({ ...props, state }); return ( diff --git a/src/calendar/stories/CalendarStyled.css b/src/calendar/stories/CalendarStyled.css new file mode 100644 index 000000000..d91edc490 --- /dev/null +++ b/src/calendar/stories/CalendarStyled.css @@ -0,0 +1,61 @@ +.styled-datepicker .calendar__cell { + height: 32px; + width: 32px; + max-height: 32px; + max-width: 32px; + font-size: 0.875rem /* 14px */; + line-height: 1.25rem /* 20px */; + text-align: center; + border-radius: 0.5rem /* 8px */; +} +.styled-datepicker .calendar__cell[data-is-range-selection] { + background-color: rgb(219 234 254); + border-radius: 0px; + color: rgb(31 41 55); +} +.styled-datepicker .calendar__cell[data-is-selection-start] { + background-color: rgb(59 130 246); + border-top-left-radius: 0.5rem /* 8px */; + border-bottom-left-radius: 0.5rem /* 8px */; + color: rgb(255 255 255); +} +.styled-datepicker .calendar__cell[data-is-selection-end] { + background-color: rgb(59 130 246); + border-top-right-radius: 0.5rem /* 8px */; + border-bottom-right-radius: 0.5rem /* 8px */; + color: rgb(255 255 255); +} + +.styled-datepicker .calendar__cell[data-is-range-selection]:focus-within { + background-color: rgb(96 165 250); + color: rgb(255 255 255); +} +.styled-datepicker .calendar__cell:focus-within { + background-color: rgb(243 244 246); +} + +.styled-datepicker.calendar [data-weekend] { + color: rgb(220 38 38); +} + +.styled-datepicker.calendar [aria-selected="true"] { + color: rgb(255 255 255); + background-color: rgb(59 130 246); +} + +.styled-datepicker.calendar [aria-selected]:focus-within { + background-color: rgb(243 244 246); +} + +.styled-datepicker.calendar [aria-selected="true"]:focus-within { + color: rgb(255 255 255); + background-color: rgb(96 165 250); +} + +.styled-datepicker.calendar [aria-disabled="true"] { + color: rgb(107 114 128); +} + +.styled-datepicker.calendar span { + outline: none; +} diff --git a/src/calendar/stories/CalendarStyled.stories.tsx b/src/calendar/stories/CalendarStyled.stories.tsx index 497ccf0ba..2a1fb4887 100644 --- a/src/calendar/stories/CalendarStyled.stories.tsx +++ b/src/calendar/stories/CalendarStyled.stories.tsx @@ -1,18 +1,15 @@ import * as React from "react"; -import { createCalendar } from "@internationalized/date"; -import { useLocale } from "@react-aria/i18n"; import { ComponentMeta } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; +import css from "./templates/CalendarStyledCss"; import js from "./templates/CalendarStyledJsx"; import ts from "./templates/CalendarStyledTsx"; import jsUtils from "./templates/UtilsJsx"; import tsUtils from "./templates/UtilsTsx"; import { CalendarStyled } from "./CalendarStyled.component"; -import "./tailwind.css"; - type Meta = ComponentMeta; // type Story = ComponentStoryObj; @@ -21,7 +18,24 @@ export default { component: CalendarStyled, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, jsUtils, tsUtils }), + preview: createPreviewTabs({ + js: { + template: js, + files: { + "src/components/CalendarStyled.css": css, + "src/components/Utils.component.js": jsUtils, + }, + }, + ts: { + template: ts, + files: { + "src/components/CalendarStyled.css": css, + "src/components/Utils.component.js": tsUtils, + }, + }, + jsUtils, + tsUtils, + }), }, decorators: [ Story => { @@ -31,8 +45,4 @@ export default { ], } as Meta; -export const Default = () => { - let { locale } = useLocale(); - - return ; -}; +export const Default = () => ; diff --git a/src/calendar/stories/tailwind.css b/src/calendar/stories/tailwind.css deleted file mode 100644 index a7de9a2d9..000000000 --- a/src/calendar/stories/tailwind.css +++ /dev/null @@ -1,53 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer components { - .styled-datepicker .calendar__cell { - height: 32px; - width: 32px; - max-height: 32px; - max-width: 32px; - @apply text-sm text-center rounded-lg; - } - .styled-datepicker .calendar__cell[data-is-range-selection] { - @apply bg-blue-100 rounded-none text-gray-800 !important; - } - .styled-datepicker .calendar__cell[data-is-selection-start] { - @apply bg-blue-500 rounded-l-lg text-white !important; - } - .styled-datepicker .calendar__cell[data-is-selection-end] { - @apply bg-blue-500 rounded-r-lg text-white !important; - } - - .styled-datepicker .calendar__cell[data-is-range-selection]:focus-within { - @apply bg-blue-400 text-white !important; - } - .styled-datepicker .calendar__cell:focus-within { - @apply bg-gray-100; - } - - .styled-datepicker.calendar [data-weekend] { - @apply text-red-600; - } - - .styled-datepicker.calendar [aria-selected="true"] { - @apply text-white bg-blue-500; - } - - .styled-datepicker.calendar [aria-selected]:focus-within { - @apply bg-gray-100; - } - - .styled-datepicker.calendar [aria-selected="true"]:focus-within { - @apply text-white bg-blue-400; - } - - .styled-datepicker.calendar [aria-disabled="true"] { - @apply text-gray-500; - } - - .styled-datepicker.calendar span { - outline: none; - } -} diff --git a/src/datefield/stories/DateFieldBasic.component.tsx b/src/datefield/stories/DateFieldBasic.component.tsx index 328bf7d73..6369ac596 100644 --- a/src/datefield/stories/DateFieldBasic.component.tsx +++ b/src/datefield/stories/DateFieldBasic.component.tsx @@ -1,4 +1,6 @@ import React from "react"; +import { createCalendar } from "@internationalized/date"; +import { useLocale } from "@react-aria/i18n"; import { DateField, @@ -8,10 +10,17 @@ import { useDateFieldState, } from "../../index"; -export type DateFieldBasicProps = DateFieldBaseStateProps & {}; +import "./DateFieldBasic.css"; + +/** Omiting locale and createCalendar */ +export type DateFieldBasicProps = Omit< + DateFieldBaseStateProps, + "locale" | "createCalendar" +> & {}; export const DateFieldBasic: React.FC = props => { - const state = useDateFieldBaseState({ ...props }); + const { locale } = useLocale(); + const state = useDateFieldBaseState({ ...props, locale, createCalendar }); const datefield = useDateFieldState({ ...props, state }); return ( diff --git a/src/datefield/stories/DateFieldBasic.stories.tsx b/src/datefield/stories/DateFieldBasic.stories.tsx index 82cbd0bfa..2b53bf4af 100644 --- a/src/datefield/stories/DateFieldBasic.stories.tsx +++ b/src/datefield/stories/DateFieldBasic.stories.tsx @@ -1,6 +1,4 @@ import React from "react"; -import { createCalendar } from "@internationalized/date"; -import { useLocale } from "@react-aria/i18n"; import { ComponentMeta } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; @@ -10,8 +8,6 @@ import js from "./templates/DateFieldBasicJsx"; import ts from "./templates/DateFieldBasicTsx"; import { DateFieldBasic } from "./DateFieldBasic.component"; -import "./DateFieldBasic.css"; - type Meta = ComponentMeta; // type Story = ComponentStoryObj; @@ -20,18 +16,24 @@ export default { component: DateFieldBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, css }), + preview: createPreviewTabs({ + js: { + template: js, + files: { + "src/components/DateFieldBasic.css": css, + }, + }, + ts: { + template: ts, + files: { + "src/components/DateFieldBasic.css": css, + }, + }, + css, + }), }, } as Meta; export const Default = () => { - let { locale } = useLocale(); - - return ( - - ); + return ; }; diff --git a/src/datefield/stories/DateFieldStyled.component.tsx b/src/datefield/stories/DateFieldStyled.component.tsx index 131b2444d..1b1ed65b2 100644 --- a/src/datefield/stories/DateFieldStyled.component.tsx +++ b/src/datefield/stories/DateFieldStyled.component.tsx @@ -1,4 +1,6 @@ import React from "react"; +import { createCalendar } from "@internationalized/date"; +import { useLocale } from "@react-aria/i18n"; import { DateField, @@ -8,14 +10,20 @@ import { useDateFieldState, } from "../../index"; -export type DateFieldStyledProps = DateFieldBaseStateProps & {}; +import "./DateFieldStyled.css"; + +export type DateFieldStyledProps = Omit< + DateFieldBaseStateProps, + "locale" | "createCalendar" +> & {}; export const DateFieldStyled: React.FC = props => { - const state = useDateFieldBaseState({ ...props }); + const { locale } = useLocale(); + const state = useDateFieldBaseState({ ...props, locale, createCalendar }); const datefield = useDateFieldState({ ...props, state }); return ( - + {state.segments.map((segment, i) => ( :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; +} + +.focus\:text-blue-500:focus { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} diff --git a/src/datefield/stories/DateFieldStyled.stories.tsx b/src/datefield/stories/DateFieldStyled.stories.tsx index e292924bd..96325e400 100644 --- a/src/datefield/stories/DateFieldStyled.stories.tsx +++ b/src/datefield/stories/DateFieldStyled.stories.tsx @@ -1,16 +1,13 @@ import React from "react"; -import { createCalendar } from "@internationalized/date"; -import { useLocale } from "@react-aria/i18n"; import { ComponentMeta } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; +import css from "./templates/DateFieldStyledCss"; import js from "./templates/DateFieldStyledJsx"; import ts from "./templates/DateFieldStyledTsx"; import { DateFieldStyled } from "./DateFieldStyled.component"; -import "./tailwind.css"; - type Meta = ComponentMeta; // type Story = ComponentStoryObj; @@ -19,7 +16,20 @@ export default { component: DateFieldStyled, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ + js: { + template: js, + files: { + "src/components/DateFieldStyled.css": css, + }, + }, + ts: { + template: ts, + files: { + "src/components/DateFieldStyled.css": css, + }, + }, + }), }, decorators: [ Story => { @@ -30,13 +40,5 @@ export default { } as Meta; export const Default = () => { - let { locale } = useLocale(); - - return ( - - ); + return ; }; diff --git a/src/datefield/stories/tailwind.css b/src/datefield/stories/tailwind.css deleted file mode 100644 index b5c61c956..000000000 --- a/src/datefield/stories/tailwind.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/src/datepicker/stories/DatePickerBasic.stories.tsx b/src/datepicker/stories/DatePickerBasic.stories.tsx index 81592c411..4d9aaba7e 100644 --- a/src/datepicker/stories/DatePickerBasic.stories.tsx +++ b/src/datepicker/stories/DatePickerBasic.stories.tsx @@ -17,7 +17,11 @@ export default { component: DatePickerBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, css }), + preview: createPreviewTabs({ + js: { template: js }, + ts: { template: ts }, + css, + }), }, } as Meta; diff --git a/src/dialog/stories/DrawerBasic.component.tsx b/src/dialog/stories/DrawerBasic.component.tsx index 2e446e04e..9de08a0e1 100644 --- a/src/dialog/stories/DrawerBasic.component.tsx +++ b/src/dialog/stories/DrawerBasic.component.tsx @@ -9,6 +9,8 @@ import { import { Drawer } from "../../index"; +import "./DrawerBasic.css"; + export type DrawerBasicProps = DisclosureStateProps & {}; export const DrawerBasic: React.FC = props => { diff --git a/src/dialog/stories/DrawerBasic.stories.tsx b/src/dialog/stories/DrawerBasic.stories.tsx index f9e75fc05..6acbb8fd0 100644 --- a/src/dialog/stories/DrawerBasic.stories.tsx +++ b/src/dialog/stories/DrawerBasic.stories.tsx @@ -2,12 +2,11 @@ import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; +import css from "./templates/DrawerBasicCss"; import js from "./templates/DrawerBasicJsx"; import ts from "./templates/DrawerBasicTsx"; import { DrawerBasic } from "./DrawerBasic.component"; -import "./DrawerBasic.css"; - type Meta = ComponentMeta; type Story = ComponentStoryObj; @@ -16,7 +15,15 @@ export default { component: DrawerBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ + js: { + template: js, + files: { + "src/components/DrawerBasic.css": css, + }, + }, + ts: { template: ts }, + }), }, } as Meta; diff --git a/src/disclosure/stories/DisclosureHorizontalCollapseBasic.stories.tsx b/src/disclosure/stories/DisclosureHorizontalCollapseBasic.stories.tsx index 752d851d8..af9d74fe8 100644 --- a/src/disclosure/stories/DisclosureHorizontalCollapseBasic.stories.tsx +++ b/src/disclosure/stories/DisclosureHorizontalCollapseBasic.stories.tsx @@ -14,7 +14,14 @@ export default { component: DisclosureHorizontalCollapseBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ + js: { + template: js, + }, + ts: { + template: ts, + }, + }), }, } as Meta; diff --git a/src/disclosure/stories/DisclosureVerticalCollapseBasic.stories.tsx b/src/disclosure/stories/DisclosureVerticalCollapseBasic.stories.tsx index cbcb2a3d7..08340153f 100644 --- a/src/disclosure/stories/DisclosureVerticalCollapseBasic.stories.tsx +++ b/src/disclosure/stories/DisclosureVerticalCollapseBasic.stories.tsx @@ -14,7 +14,7 @@ export default { component: DisclosureVerticalCollapseBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ js: { template: js }, ts: { template: ts } }), }, } as Meta; diff --git a/src/link/stories/LinkBasic.stories.tsx b/src/link/stories/LinkBasicDefault.stories.tsx similarity index 84% rename from src/link/stories/LinkBasic.stories.tsx rename to src/link/stories/LinkBasicDefault.stories.tsx index 0cb1aa54c..0cc7196f5 100644 --- a/src/link/stories/LinkBasic.stories.tsx +++ b/src/link/stories/LinkBasicDefault.stories.tsx @@ -14,12 +14,15 @@ export default { component: LinkBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ js: { template: js }, ts: { template: ts } }), }, } as Meta; export const Default: Story = { - args: { href: "https://timeless.co/", children: "Timeless" }, + args: { + href: "https://timeless.co/", + children: "Timeless", + }, }; export const ExternlaLink: Story = { diff --git a/src/link/stories/LinkBasicDisabledExternalLink.stories.tsx b/src/link/stories/LinkBasicDisabledExternalLink.stories.tsx new file mode 100644 index 000000000..0cc7196f5 --- /dev/null +++ b/src/link/stories/LinkBasicDisabledExternalLink.stories.tsx @@ -0,0 +1,43 @@ +import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; + +import { createPreviewTabs } from "../../../.storybook/utils"; + +import js from "./templates/LinkBasicJsx"; +import ts from "./templates/LinkBasicTsx"; +import { LinkBasic } from "./LinkBasic.component"; + +type Meta = ComponentMeta; +type Story = ComponentStoryObj; + +export default { + title: "Link/Basic", + component: LinkBasic, + parameters: { + layout: "centered", + preview: createPreviewTabs({ js: { template: js }, ts: { template: ts } }), + }, +} as Meta; + +export const Default: Story = { + args: { + href: "https://timeless.co/", + children: "Timeless", + }, +}; + +export const ExternlaLink: Story = { + args: { + children: "Timeless", + href: "https://timeless.co/", + isExternal: true, + }, +}; + +export const DisabledExternalLink: Story = { + args: { + children: "Timeless", + href: "https://timeless.co/", + isExternal: true, + disabled: true, + }, +}; diff --git a/src/link/stories/LinkBasicExternlaLink.stories.tsx b/src/link/stories/LinkBasicExternlaLink.stories.tsx new file mode 100644 index 000000000..c12061ec0 --- /dev/null +++ b/src/link/stories/LinkBasicExternlaLink.stories.tsx @@ -0,0 +1,44 @@ +import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; + +import { createPreviewTabs } from "../../../.storybook/utils"; + +import js from "./templates/LinkBasicJsx"; +import ts from "./templates/LinkBasicTsx"; +import { LinkBasic } from "./LinkBasic.component"; + +type Meta = ComponentMeta; +type Story = ComponentStoryObj; + +export default { + title: "Link/Basic", + component: LinkBasic, + parameters: { + layout: "centered", + preview: createPreviewTabs({ + js: { + template: js, + }, + ts: { + template: ts, + }, + }), + }, +} as Meta; + +export const ExternlaLink: Story = { + parameters: { + preview: createPreviewTabs({ + js: { + template: js, + }, + ts: { + template: ts, + }, + }), + }, + args: { + children: "Timeless", + href: "https://timeless.co/", + isExternal: true, + }, +}; diff --git a/yarn.lock b/yarn.lock index eb80d520e..1ab5064d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10138,11 +10138,6 @@ date-fns@^2.16.1: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.22.1.tgz#1e5af959831ebb1d82992bf67b765052d8f0efc4" integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg== -date-fns@^2.28.0: - version "2.28.0" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2" - integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== - dateformat@^3.0.0: version "3.0.3" resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" From a04a9fa154dcfd421726d96a862017af5c87d016 Mon Sep 17 00:00:00 2001 From: Govind Singh Date: Tue, 14 Jun 2022 12:38:15 +0530 Subject: [PATCH 2/6] =?UTF-8?q?chore(husky):=20=F0=9F=94=A5=20=20remove=20?= =?UTF-8?q?husky=20precommit=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .husky/commit-msg | 0 .husky/post-checkout | 3 --- .husky/post-commit | 3 --- .husky/post-merge | 3 --- .husky/pre-push | 3 --- 5 files changed, 12 deletions(-) mode change 100755 => 100644 .husky/commit-msg delete mode 100755 .husky/post-checkout delete mode 100755 .husky/post-commit delete mode 100755 .husky/post-merge delete mode 100755 .husky/pre-push diff --git a/.husky/commit-msg b/.husky/commit-msg old mode 100755 new mode 100644 diff --git a/.husky/post-checkout b/.husky/post-checkout deleted file mode 100755 index c37815e2b..000000000 --- a/.husky/post-checkout +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh -command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-checkout'.\n"; exit 2; } -git lfs post-checkout "$@" diff --git a/.husky/post-commit b/.husky/post-commit deleted file mode 100755 index e5230c305..000000000 --- a/.husky/post-commit +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh -command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-commit'.\n"; exit 2; } -git lfs post-commit "$@" diff --git a/.husky/post-merge b/.husky/post-merge deleted file mode 100755 index c99b752a5..000000000 --- a/.husky/post-merge +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh -command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/post-merge'.\n"; exit 2; } -git lfs post-merge "$@" diff --git a/.husky/pre-push b/.husky/pre-push deleted file mode 100755 index 216e91527..000000000 --- a/.husky/pre-push +++ /dev/null @@ -1,3 +0,0 @@ -#!/bin/sh -command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting '.git/hooks/pre-push'.\n"; exit 2; } -git lfs pre-push "$@" From 383350ad80f3d7bff45e4adc90b9eac95ba51dc1 Mon Sep 17 00:00:00 2001 From: Govind Singh Date: Tue, 14 Jun 2022 12:46:06 +0530 Subject: [PATCH 3/6] =?UTF-8?q?chore(husky):=20=E2=9A=A1=EF=B8=8F=20=20ref?= =?UTF-8?q?actor=20husky=20pre-commit=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .husky/commit-msg | 0 1 file changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 .husky/commit-msg diff --git a/.husky/commit-msg b/.husky/commit-msg old mode 100644 new mode 100755 From ca3e80e29cbffad33bf259cf288e7516a655db64 Mon Sep 17 00:00:00 2001 From: Govind Singh Date: Mon, 27 Jun 2022 11:46:47 +0530 Subject: [PATCH 4/6] =?UTF-8?q?docs(storybook=20and=20codesandbox=20config?= =?UTF-8?q?):=20=F0=9F=93=9D=20=20storybook=20and=20codesandbox=20config?= =?UTF-8?q?=20change?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/utils.ts | 83 +++-- scripts/builds/create-previews.js | 3 +- .../stories/CalendarBasic.stories.tsx | 6 +- .../stories/CalendarRange.stories.tsx | 16 +- .../stories/CalendarStyled.stories.tsx | 4 +- .../stories/DatePickerBasic.component.tsx | 10 +- .../stories/DatePickerBasic.stories.tsx | 41 +- .../stories/DatePickerStyled.component.tsx | 10 +- src/datepicker/stories/DatePickerStyled.css | 81 ++++ .../stories/DatePickerStyled.stories.tsx | 36 +- .../DateRangePickerBasic.component.tsx | 14 +- .../stories/DateRangePickerBasic.stories.tsx | 50 ++- src/datepicker/stories/tailwind.css | 57 --- src/dialog/stories/DrawerBasic.stories.tsx | 7 +- src/link/stories/LinkBasicDefault.stories.tsx | 84 ++++- .../LinkBasicDisabledExternalLink.stories.tsx | 43 --- .../stories/LinkBasicExternlaLink.stories.tsx | 44 --- src/link/stories/LinkSpan.stories.tsx | 70 +++- src/meter/stories/MeterBasic.component.tsx | 2 + src/meter/stories/MeterBasic.stories.tsx | 31 +- src/meter/stories/MeterStyled.stories.tsx | 120 +++++- .../stories/NumberFieldBasic.stories.tsx | 20 +- .../stories/PaginationBasic.stories.tsx | 80 +++- .../stories/CircularProgress.stories.tsx | 8 +- .../stories/LinearProgress.stories.tsx | 8 +- .../stories/ProgressBasic.component.tsx | 2 + .../stories/ProgressBasic.stories.tsx | 57 ++- .../stories/SliderAllInOne.component.tsx | 2 + src/slider/stories/SliderAllInOne.stories.tsx | 350 +++++++++++++++++- src/slider/stories/SliderBasic.component.tsx | 2 + src/slider/stories/SliderBasic.stories.tsx | 166 ++++++++- src/slider/stories/SliderMulti.component.tsx | 2 + src/slider/stories/SliderMulti.stories.tsx | 211 ++++++++++- src/slider/stories/SliderRange.component.tsx | 2 + src/slider/stories/SliderRange.stories.tsx | 248 ++++++++++++- src/slider/stories/SliderSingle.component.tsx | 2 + src/slider/stories/SliderSingle.stories.tsx | 182 ++++++++- .../stories/SliderSingleOrigin.component.tsx | 2 + .../stories/SliderSingleOrigin.stories.tsx | 243 +++++++++++- .../SliderSingleReversed.component.tsx | 2 + .../stories/SliderSingleReversed.stories.tsx | 207 ++++++++++- .../SliderSingleVertical.component.tsx | 2 + .../stories/SliderSingleVertical.stories.tsx | 221 ++++++++++- .../stories/TimeFieldBasic.component.tsx | 2 + .../stories/TimeFieldBasic.stories.tsx | 32 +- .../stories/TimeFieldStyled.component.tsx | 2 + src/timefield/stories/TimeFieldStyled.css | 25 ++ .../stories/TimeFieldStyled.stories.tsx | 33 +- src/timefield/stories/tailwind.css | 3 - src/toast/stories/ToastBasic.component.tsx | 2 + src/toast/stories/ToastBasic.stories.tsx | 18 +- .../stories/ToastCSSAnimated.component.tsx | 2 + .../stories/ToastCSSAnimated.stories.tsx | 22 +- .../stories/ToastCSSTransition.component.tsx | 2 + .../stories/ToastCSSTransition.stories.tsx | 20 +- .../stories/ToastReactSpring.component.tsx | 2 + .../stories/ToastReactSpring.stories.tsx | 20 +- 57 files changed, 2670 insertions(+), 346 deletions(-) create mode 100644 src/datepicker/stories/DatePickerStyled.css delete mode 100644 src/datepicker/stories/tailwind.css delete mode 100644 src/link/stories/LinkBasicDisabledExternalLink.stories.tsx delete mode 100644 src/link/stories/LinkBasicExternlaLink.stories.tsx create mode 100644 src/timefield/stories/TimeFieldStyled.css delete mode 100644 src/timefield/stories/tailwind.css diff --git a/.storybook/utils.ts b/.storybook/utils.ts index 13393ef03..0ee66ead0 100644 --- a/.storybook/utils.ts +++ b/.storybook/utils.ts @@ -1,9 +1,6 @@ /* eslint-disable no-new-func */ -import { - CodeSandboxTemplate, - CodeSandboxValue, - FilesParam, -} from "storybook-addon-preview"; +import { CodeSandboxTemplate } from "storybook-addon-preview"; +import outdent from "outdent"; type CreateControlsOptions = { unions?: string[]; @@ -109,7 +106,7 @@ export const REACTJS_CUSTOM_CODESANDBOX: CodeSandboxTemplate = ( files = {}, ) => { return { - template: "create-react-app-typescript", + template: "create-react-app", files: { "public/index.html": ` @@ -135,15 +132,20 @@ export const REACTJS_CUSTOM_CODESANDBOX: CodeSandboxTemplate = ( `, "src/index.js": ` - import * as ReactDOM from "react-dom"; - import * as React from "react"; import App from "./App"; - const rootElement = document.getElementById("root"); - ReactDOM.render(, rootElement); + import { createRoot } from 'react-dom/client'; + const rootElement = document.getElementById('root'); + const root = createRoot(rootElement); + root.render(); `, - "src/App.js": `import React from \"react\";\nimport Component from \"./components\";\n\nexport default function App() {\n return (\n
\n
\n \n
\n
\n );\n}\n`, + "src/App.js": outdent` + import React from "react"; + import Component from "./components"; + + export default function App() { + return + } + `, ...files, }, dependencies: { @@ -171,27 +173,27 @@ export const REACT_CUSTOM_CODESANDBOX: CodeSandboxTemplate = ( template: "create-react-app-typescript", files: { "public/index.html": ` - - - - - - - - - - React App - - - -
- - + + + + + + + + + + React App + + + +
+ + `, "src/index.tsx": ` import * as ReactDOM from "react-dom"; @@ -199,7 +201,7 @@ export const REACT_CUSTOM_CODESANDBOX: CodeSandboxTemplate = ( import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); - `, + `, "src/App.tsx": `import React from \"react\";\n import Component from \"./components\";\n\nexport default function App() {\n return (\n
\n
\n \n
\n
\n );\n}\n`, ...files, }, @@ -225,3 +227,14 @@ export const REACT_CUSTOM_CODESANDBOX: CodeSandboxTemplate = ( userDependencies, }; }; + +export const CreateAppTemplate = (props: object | undefined) => { + return outdent` + import React from "react"; + import Component from "./components"; + + export default function App() { + return + } +`; +}; diff --git a/scripts/builds/create-previews.js b/scripts/builds/create-previews.js index fcf2e1dd1..e68f73bc1 100644 --- a/scripts/builds/create-previews.js +++ b/scripts/builds/create-previews.js @@ -15,7 +15,8 @@ const transpileTs = require("../utils/transpile-ts"); const addPackageName = string => string .replace("../../index", "@adaptui/react") - .replace("../../../index", "@adaptui/react"); + .replace("../../../index", "@adaptui/react") + .replace(/(\.\.\/\.\.\/).*(\/)/g, "./"); function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); diff --git a/src/calendar/stories/CalendarBasic.stories.tsx b/src/calendar/stories/CalendarBasic.stories.tsx index 88b6a6760..9037fbead 100644 --- a/src/calendar/stories/CalendarBasic.stories.tsx +++ b/src/calendar/stories/CalendarBasic.stories.tsx @@ -1,7 +1,10 @@ import * as React from "react"; import { ComponentMeta } from "@storybook/react"; -import { createPreviewTabs } from "../../../.storybook/utils"; +import { + CreateAppTemplate, + createPreviewTabs, +} from "../../../.storybook/utils"; import css from "./templates/CalendarBasicCss"; import js from "./templates/CalendarBasicJsx"; @@ -29,6 +32,7 @@ export default { ts: { template: ts, files: { + "src/App.tsx": CreateAppTemplate({}), "src/components/CalendarBasic.css": css, "src/components/Utils.component.tsx": tsUtils, }, diff --git a/src/calendar/stories/CalendarRange.stories.tsx b/src/calendar/stories/CalendarRange.stories.tsx index dc17a835f..9ef480151 100644 --- a/src/calendar/stories/CalendarRange.stories.tsx +++ b/src/calendar/stories/CalendarRange.stories.tsx @@ -19,8 +19,20 @@ export default { parameters: { layout: "centered", preview: createPreviewTabs({ - js: { template: js, files: { "src/components/CalendarRange.css": css } }, - ts: { template: ts, files: { "src/components/CalendarRange.css": css } }, + js: { + template: js, + files: { + "src/components/CalendarRange.css": css, + "src/components/Utils.component.jsx": jsUtils, + }, + }, + ts: { + template: ts, + files: { + "src/components/CalendarRange.css": css, + "src/components/Utils.component.tsx": tsUtils, + }, + }, css, jsUtils, tsUtils, diff --git a/src/calendar/stories/CalendarStyled.stories.tsx b/src/calendar/stories/CalendarStyled.stories.tsx index 2a1fb4887..6203884d2 100644 --- a/src/calendar/stories/CalendarStyled.stories.tsx +++ b/src/calendar/stories/CalendarStyled.stories.tsx @@ -23,14 +23,14 @@ export default { template: js, files: { "src/components/CalendarStyled.css": css, - "src/components/Utils.component.js": jsUtils, + "src/components/Utils.component.jsx": jsUtils, }, }, ts: { template: ts, files: { "src/components/CalendarStyled.css": css, - "src/components/Utils.component.js": tsUtils, + "src/components/Utils.component.tsx": tsUtils, }, }, jsUtils, diff --git a/src/datepicker/stories/DatePickerBasic.component.tsx b/src/datepicker/stories/DatePickerBasic.component.tsx index 42ea00d4d..42a8a5c89 100644 --- a/src/datepicker/stories/DatePickerBasic.component.tsx +++ b/src/datepicker/stories/DatePickerBasic.component.tsx @@ -15,6 +15,8 @@ import { import { CalendarIcon } from "./Utils.component"; +import "./DatePickerBasic.css"; + export type DatePickerBasicProps = DatePickerBaseStateProps & {}; export const DatePickerBasic: React.FC = props => { @@ -31,8 +33,8 @@ export const DatePickerBasic: React.FC = props => { > = props => { )} diff --git a/src/datepicker/stories/DatePickerBasic.stories.tsx b/src/datepicker/stories/DatePickerBasic.stories.tsx index 4d9aaba7e..e16e58e49 100644 --- a/src/datepicker/stories/DatePickerBasic.stories.tsx +++ b/src/datepicker/stories/DatePickerBasic.stories.tsx @@ -1,14 +1,23 @@ import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; -import { createPreviewTabs } from "../../../.storybook/utils"; +import { + CreateAppTemplate, + createPreviewTabs, +} from "../../../.storybook/utils"; +import CalendarBasicCss from "../../calendar/stories/templates/CalendarBasicCss"; +import CalendarBasicJsx from "../../calendar/stories/templates/CalendarBasicJsx"; +import CalendarBasicTsx from "../../calendar/stories/templates/CalendarBasicTsx"; +import DateFieldBasicCss from "../../datefield/stories/templates/DateFieldBasicCss"; +import DateFieldBasicJsx from "../../datefield/stories/templates/DateFieldBasicJsx"; +import DateFieldBasicTsx from "../../datefield/stories/templates/DateFieldBasicTsx"; import css from "./templates/DatePickerBasicCss"; import js from "./templates/DatePickerBasicJsx"; import ts from "./templates/DatePickerBasicTsx"; +import UtilsJsx from "./templates/UtilsJsx"; +import UtilsTsx from "./templates/UtilsTsx"; import { DatePickerBasic } from "./DatePickerBasic.component"; -import "./DatePickerBasic.css"; - type Meta = ComponentMeta; type Story = ComponentStoryObj; @@ -18,8 +27,30 @@ export default { parameters: { layout: "centered", preview: createPreviewTabs({ - js: { template: js }, - ts: { template: ts }, + js: { + template: js, + files: { + "src/App.js": CreateAppTemplate({ label: "DatePicker" }), + "src/components/CalendarBasic.component.jsx": CalendarBasicJsx, + "src/components/DateFieldBasic.component.jsx": DateFieldBasicJsx, + "src/components/DatePickerBasic.css": css, + "src/components/Utils.component.jsx": UtilsJsx, + "src/components/CalendarBasic.css": CalendarBasicCss, + "src/components/DateFieldBasic.css": DateFieldBasicCss, + }, + }, + ts: { + template: ts, + files: { + "src/App.tsx": CreateAppTemplate({ label: "DatePicker" }), + "src/components/CalendarBasic.component.tsx": CalendarBasicTsx, + "src/components/DateFieldBasic.component.tsx": DateFieldBasicTsx, + "src/components/DatePickerBasic.css": css, + "src/components/Utils.component.tsx": UtilsTsx, + "src/components/CalendarBasic.css": CalendarBasicCss, + "src/components/DateFieldBasic.css": DateFieldBasicCss, + }, + }, css, }), }, diff --git a/src/datepicker/stories/DatePickerStyled.component.tsx b/src/datepicker/stories/DatePickerStyled.component.tsx index e5501c84e..4870d9ab7 100644 --- a/src/datepicker/stories/DatePickerStyled.component.tsx +++ b/src/datepicker/stories/DatePickerStyled.component.tsx @@ -15,6 +15,8 @@ import { import { CalendarStyledIcon } from "./Utils.component"; +import "./DatePickerStyled.css"; + export type DatePickerStyledProps = DatePickerBaseStateProps & {}; export const DatePickerStyled: React.FC = props => { @@ -31,8 +33,8 @@ export const DatePickerStyled: React.FC = props => { > = props => { )} diff --git a/src/datepicker/stories/DatePickerStyled.css b/src/datepicker/stories/DatePickerStyled.css new file mode 100644 index 000000000..21649a0ea --- /dev/null +++ b/src/datepicker/stories/DatePickerStyled.css @@ -0,0 +1,81 @@ +.styled-datepicker .calendar__cell { + height: 32px; + width: 32px; + max-height: 32px; + max-width: 32px; + font-size: 0.875rem /* 14px */; + line-height: 1.25rem /* 20px */; + text-align: center; + border-radius: 0.5rem /* 8px */; +} +.styled-datepicker .calendar__cell[data-is-range-selection] { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + border-radius: 0px; + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +.styled-datepicker .calendar__cell[data-is-selection-start] { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + border-top-left-radius: 0.5rem /* 8px */; + border-bottom-left-radius: 0.5rem /* 8px */; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.styled-datepicker .calendar__cell[data-is-selection-end] { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + border-top-right-radius: 0.5rem /* 8px */; + border-bottom-right-radius: 0.5rem /* 8px */; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.styled-datepicker .calendar__cell[data-is-range-selection]:focus-within { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.styled-datepicker .calendar__cell:focus-within { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.styled-datepicker.calendar [data-weekend] { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); +} + +.styled-datepicker.calendar [aria-selected="true"] { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + +.styled-datepicker.calendar [aria-selected]:focus-within { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.styled-datepicker.calendar [aria-selected="true"]:focus-within { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); +} + +.styled-datepicker.calendar [aria-disabled="true"] { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.styled-datepicker.calendar span { + outline: none; +} + +.datepicker__dash:before { + content: "-"; +} diff --git a/src/datepicker/stories/DatePickerStyled.stories.tsx b/src/datepicker/stories/DatePickerStyled.stories.tsx index bb9ae71d1..4f697f723 100644 --- a/src/datepicker/stories/DatePickerStyled.stories.tsx +++ b/src/datepicker/stories/DatePickerStyled.stories.tsx @@ -2,13 +2,20 @@ import * as React from "react"; import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; import { createPreviewTabs } from "../../../.storybook/utils"; +import CalenderStyledCss from "../../calendar/stories/templates/CalendarStyledCss"; +import CalenderStyledJsx from "../../calendar/stories/templates/CalendarStyledJsx"; +import CalenderStyledTsx from "../../calendar/stories/templates/CalendarStyledTsx"; +import DateFieldStyledCsx from "../../datefield/stories/templates/DateFieldStyledCss"; +import DateFieldStyledJsx from "../../datefield/stories/templates/DateFieldStyledJsx"; +import DateFieldStyledTsx from "../../datefield/stories/templates/DateFieldStyledTsx"; +import css from "./templates/DatePickerStyledCss"; import js from "./templates/DatePickerStyledJsx"; import ts from "./templates/DatePickerStyledTsx"; +import UtilsJsx from "./templates/UtilsJsx"; +import UtilsTsx from "./templates/UtilsTsx"; import { DatePickerStyled } from "./DatePickerStyled.component"; -import "./tailwind.css"; - type Meta = ComponentMeta; type Story = ComponentStoryObj; @@ -17,7 +24,30 @@ export default { component: DatePickerStyled, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ + js: { + template: js, + files: { + "src/components/DatePickerStyled.css": css, + "src/components/CalendarStyled.component.jsx": CalenderStyledJsx, + "src/components/DateFieldStyled.component.jsx": DateFieldStyledJsx, + "src/components/Utils.component.jsx": UtilsJsx, + "src/components/CalendarStyled.css": CalenderStyledCss, + "src/components/DateFieldStyled.css": DateFieldStyledCsx, + }, + }, + ts: { + template: ts, + files: { + "src/components/DatePickerStyled.css": css, + "src/components/CalendarStyled.component.tsx": CalenderStyledTsx, + "src/components/DateFieldStyled.component.tsx": DateFieldStyledTsx, + "src/components/Utils.component.tsx": UtilsTsx, + "src/components/CalendarStyled.css": CalenderStyledCss, + "src/components/DateFieldStyled.css": DateFieldStyledCsx, + }, + }, + }), }, decorators: [ Story => { diff --git a/src/datepicker/stories/DateRangePickerBasic.component.tsx b/src/datepicker/stories/DateRangePickerBasic.component.tsx index 1bd85e3cc..3e35faf02 100644 --- a/src/datepicker/stories/DateRangePickerBasic.component.tsx +++ b/src/datepicker/stories/DateRangePickerBasic.component.tsx @@ -16,6 +16,8 @@ import { import DatePickerBasic from "./DatePickerBasic.component"; import { CalendarIcon } from "./Utils.component"; +import "./DateRangePickerBasic.css"; + export type DateRangePickerBasicProps = DateRangePickerBaseStateProps & {}; export const DateRangePickerBasic: React.FC< @@ -34,14 +36,14 @@ export const DateRangePickerBasic: React.FC< >