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 "$@" 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..0ee66ead0 100644 --- a/.storybook/utils.ts +++ b/.storybook/utils.ts @@ -1,5 +1,6 @@ /* eslint-disable no-new-func */ import { CodeSandboxTemplate } from "storybook-addon-preview"; +import outdent from "outdent"; type CreateControlsOptions = { unions?: string[]; @@ -29,9 +30,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 +44,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 +65,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 +87,6 @@ export function createPreviewTabs(props: Props) { template: tsUtils, language: "tsx", copy: true, - codesandbox: REACT_CUSTOM_CODESANDBOX(deps), }); } @@ -94,33 +101,140 @@ 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", 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 App from "./App"; + import { createRoot } from 'react-dom/client'; + const rootElement = document.getElementById('root'); + const root = createRoot(rootElement); + root.render(); + `, + "src/App.js": outdent` + import React from "react"; + import Component from "./components"; + + export default function App() { + return + } + `, + ...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, }, - userDependencies: ${joinStrs(dependencies)}, -};`) as CodeSandboxTemplate; + dependencies: { + "@adaptui/react": "latest", + react: "17.0.2", + "react-dom": "17.0.2", + next: "12.0.7", + }, + 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, + }; +}; + +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/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..9037fbead 100644 --- a/src/calendar/stories/CalendarBasic.stories.tsx +++ b/src/calendar/stories/CalendarBasic.stories.tsx @@ -1,9 +1,10 @@ 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 { + CreateAppTemplate, + createPreviewTabs, +} from "../../../.storybook/utils"; import css from "./templates/CalendarBasicCss"; import js from "./templates/CalendarBasicJsx"; @@ -12,8 +13,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 +21,27 @@ 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/App.tsx": CreateAppTemplate({}), + "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..9ef480151 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,26 @@ 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, + "src/components/Utils.component.jsx": jsUtils, + }, + }, + ts: { + template: ts, + files: { + "src/components/CalendarRange.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/CalendarRangeStyled.component.tsx b/src/calendar/stories/CalendarRangeStyled.component.tsx index 2dd7515fd..03988332d 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,18 @@ import { import { ChevronLeft, ChevronRight } from "./Utils.component"; -export type CalendarRangeStyledProps = RangeCalendarBaseStateProps & {}; +import "./CalendarRangeStyled.css"; + +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.css b/src/calendar/stories/CalendarRangeStyled.css new file mode 100644 index 000000000..8f412964e --- /dev/null +++ b/src/calendar/stories/CalendarRangeStyled.css @@ -0,0 +1,154 @@ +button { + all: unset; +} + +.justify-between { + justify-content: space-between; +} +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.px-2 { + padding-left: 0.5rem /* 8px */; + padding-right: 0.5rem /* 8px */; +} +.py-1 { + padding-top: 0.25rem /* 4px */; + padding-bottom: 0.25rem /* 4px */; +} +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow, 0 0 #0000); +} +.flex-shrink-0 { + flex-shrink: 0; +} +.w-4 { + width: 1rem /* 16px */; +} +.text-center { + text-align: center; +} +.font-light { + font-weight: 300; +} +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.p-2 { + padding: 0.5rem /* 8px */; +} +.text-sm { + font-size: 0.875rem /* 14px */; + line-height: 1.25rem /* 20px */; +} +.font-bold { + font-weight: 700; +} +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.px-2 { + padding-left: 0.5rem /* 8px */; + padding-right: 0.5rem /* 8px */; +} +.py-1 { + padding-top: 0.25rem /* 4px */; + padding-bottom: 0.25rem /* 4px */; +} +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.w-max { + width: max-content; +} +.rounded-md { + border-radius: 0.375rem /* 6px */; +} +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.p-3 { + padding: 0.75rem /* 12px */; +} +.flex { + display: flex; +} +.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 */; +} +.calendar__cell[data-is-range-selection] { + background-color: rgb(219 234 254); + border-radius: 0px; + color: rgb(31 41 55); +} +.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); +} +.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); +} + +.calendar__cell[data-is-range-selection]:focus-within { + background-color: rgb(96 165 250); + color: rgb(255 255 255); +} +.calendar__cell:focus-within { + background-color: rgb(243 244 246); +} + +.calendar [data-weekend] { + color: rgb(220 38 38); +} + +.calendar [aria-selected="true"] { + color: rgb(255 255 255); + background-color: rgb(59 130 246); +} + +.calendar [aria-selected]:focus-within { + background-color: rgb(243 244 246); +} + +.calendar [aria-selected="true"]:focus-within { + color: rgb(255 255 255); + background-color: rgb(96 165 250); +} + +.calendar [aria-disabled="true"] { + color: rgb(107 114 128); +} + +.calendar span { + outline: none; +} diff --git a/src/calendar/stories/CalendarRangeStyled.stories.tsx b/src/calendar/stories/CalendarRangeStyled.stories.tsx index 09db680aa..59c73f9bc 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"; @@ -11,8 +9,6 @@ import jsUtils from "./templates/UtilsJsx"; import tsUtils from "./templates/UtilsTsx"; import { CalendarRangeStyled } from "./CalendarRangeStyled.component"; -import "./tailwind.css"; - type Meta = ComponentMeta; // type Story = ComponentStoryObj; @@ -21,20 +17,13 @@ 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 => { - document.body.id = "tailwind"; - return ; - }, - ], } 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..8f412964e --- /dev/null +++ b/src/calendar/stories/CalendarStyled.css @@ -0,0 +1,154 @@ +button { + all: unset; +} + +.justify-between { + justify-content: space-between; +} +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.px-2 { + padding-left: 0.5rem /* 8px */; + padding-right: 0.5rem /* 8px */; +} +.py-1 { + padding-top: 0.25rem /* 4px */; + padding-bottom: 0.25rem /* 4px */; +} +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow, 0 0 #0000); +} +.flex-shrink-0 { + flex-shrink: 0; +} +.w-4 { + width: 1rem /* 16px */; +} +.text-center { + text-align: center; +} +.font-light { + font-weight: 300; +} +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.p-2 { + padding: 0.5rem /* 8px */; +} +.text-sm { + font-size: 0.875rem /* 14px */; + line-height: 1.25rem /* 20px */; +} +.font-bold { + font-weight: 700; +} +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.px-2 { + padding-left: 0.5rem /* 8px */; + padding-right: 0.5rem /* 8px */; +} +.py-1 { + padding-top: 0.25rem /* 4px */; + padding-bottom: 0.25rem /* 4px */; +} +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.w-max { + width: max-content; +} +.rounded-md { + border-radius: 0.375rem /* 6px */; +} +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.p-3 { + padding: 0.75rem /* 12px */; +} +.flex { + display: flex; +} +.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 */; +} +.calendar__cell[data-is-range-selection] { + background-color: rgb(219 234 254); + border-radius: 0px; + color: rgb(31 41 55); +} +.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); +} +.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); +} + +.calendar__cell[data-is-range-selection]:focus-within { + background-color: rgb(96 165 250); + color: rgb(255 255 255); +} +.calendar__cell:focus-within { + background-color: rgb(243 244 246); +} + +.calendar [data-weekend] { + color: rgb(220 38 38); +} + +.calendar [aria-selected="true"] { + color: rgb(255 255 255); + background-color: rgb(59 130 246); +} + +.calendar [aria-selected]:focus-within { + background-color: rgb(243 244 246); +} + +.calendar [aria-selected="true"]:focus-within { + color: rgb(255 255 255); + background-color: rgb(96 165 250); +} + +.calendar [aria-disabled="true"] { + color: rgb(107 114 128); +} + +.calendar span { + outline: none; +} diff --git a/src/calendar/stories/CalendarStyled.stories.tsx b/src/calendar/stories/CalendarStyled.stories.tsx index 497ccf0ba..ba2ea3783 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,18 +18,25 @@ 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.jsx": jsUtils, + }, + }, + ts: { + template: ts, + files: { + "src/components/CalendarStyled.css": css, + "src/components/Utils.component.tsx": tsUtils, + }, + }, + jsUtils, + tsUtils, + }), }, - decorators: [ - Story => { - document.body.id = "tailwind"; - return ; - }, - ], } 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..d75de7bb6 100644 --- a/src/datefield/stories/DateFieldStyled.stories.tsx +++ b/src/datefield/stories/DateFieldStyled.stories.tsx @@ -1,16 +1,16 @@ 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 { + CreateAppTemplate, + 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,24 +19,29 @@ export default { component: DateFieldStyled, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts }), + preview: createPreviewTabs({ + js: { + template: js, + files: { + "src/components/DateFieldStyled.css": css, + "src/App.js": CreateAppTemplate({ + label: "DateField", + }), + }, + }, + ts: { + template: ts, + files: { + "src/components/DateFieldStyled.css": css, + "src/App.tsx": CreateAppTemplate({ + label: "DateField", + }), + }, + }, + }), }, - decorators: [ - Story => { - document.body.id = "tailwind"; - return ; - }, - ], } 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.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 81592c411..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; @@ -17,7 +26,33 @@ export default { component: DatePickerBasic, parameters: { layout: "centered", - preview: createPreviewTabs({ js, ts, css }), + preview: createPreviewTabs({ + 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, + }), }, } as Meta; diff --git a/src/datepicker/stories/DatePickerStyled.component.tsx b/src/datepicker/stories/DatePickerStyled.component.tsx index e5501c84e..df925de33 100644 --- a/src/datepicker/stories/DatePickerStyled.component.tsx +++ b/src/datepicker/stories/DatePickerStyled.component.tsx @@ -13,7 +13,9 @@ import { useDatePickerState, } from "../../index"; -import { CalendarStyledIcon } from "./Utils.component"; +import { CalendarIcon, CalendarStyledIcon } from "./Utils.component"; + +import "./DatePickerStyled.css"; export type DatePickerStyledProps = DatePickerBaseStateProps & {}; @@ -31,21 +33,22 @@ export const DatePickerStyled: React.FC = props => { > - + {state.popover.visible && ( )} diff --git a/src/datepicker/stories/DatePickerStyled.css b/src/datepicker/stories/DatePickerStyled.css new file mode 100644 index 000000000..9465d9d1f --- /dev/null +++ b/src/datepicker/stories/DatePickerStyled.css @@ -0,0 +1,173 @@ +button { + all: unset; +} + +.justify-between { + justify-content: space-between; +} +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow, 0 0 #0000); +} +.flex-shrink-0 { + flex-shrink: 0; +} +.w-4 { + width: 1rem; +} +.text-center { + text-align: center; +} +.font-light { + font-weight: 300; +} +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.p-2 { + padding: 0.5rem; +} +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} +.font-bold { + font-weight: 700; +} +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} +.w-max { + width: max-content; +} +.rounded-md { + border-radius: 0.375rem; +} +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} +.p-3 { + padding: 0.75rem; +} +.flex { + display: flex; +} +.items-center { + align-items: center; +} +.datepicker__trigger { + display: flex; + padding: 5px; + margin-left: 10px; + background-color: #f8f8f8; + border: none; +} + +.datepicker__trigger:focus-visible { + outline: none; +} + +.datepicker__trigger svg { + fill: #43424d; + width: 20px; +} +.calendar__cell { + height: 32px; + width: 32px; + max-height: 32px; + max-width: 32px; + font-size: 0.875rem; + line-height: 1.25rem; + text-align: center; + border-radius: 0.5rem; +} +.calendar__cell[data-is-range-selection] { + background-color: rgb(219 234 254); + border-radius: 0px; + color: rgb(31 41 55); +} +.calendar__cell[data-is-selection-start] { + background-color: rgb(59 130 246); + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + color: rgb(255 255 255); +} +.calendar__cell[data-is-selection-end] { + background-color: rgb(59 130 246); + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; + color: rgb(255 255 255); +} + +.calendar__cell[data-is-range-selection]:focus-within { + background-color: rgb(96 165 250); + color: rgb(255 255 255); +} +.calendar__cell:focus-within { + background-color: rgb(243 244 246); +} + +.calendar [data-weekend] { + color: rgb(220 38 38); +} + +.calendar [aria-selected="true"] { + color: rgb(255 255 255); + background-color: rgb(59 130 246); +} + +.calendar [aria-selected]:focus-within { + background-color: rgb(243 244 246); +} + +.calendar [aria-selected="true"]:focus-within { + color: rgb(255 255 255); + background-color: rgb(96 165 250); +} + +.calendar [aria-disabled="true"] { + color: rgb(107 114 128); +} + +.calendar span { + outline: none; +} diff --git a/src/datepicker/stories/DatePickerStyled.stories.tsx b/src/datepicker/stories/DatePickerStyled.stories.tsx index bb9ae71d1..db02003f8 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,14 +24,31 @@ 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 => { - document.body.id = "tailwind"; - return ; - }, - ], } as Meta; export const Default: 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< >