From df8db05ce50e97a195ef6ff5d03fea97109504c9 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Mon, 18 Mar 2024 17:01:10 +0000 Subject: [PATCH] chore: reduce TW @layer usage, simplify story imports and types, restore hljs safelisting --- .storybook/application.css | 48 +++++++++---------- .storybook/preview.tsx | 2 - .storybook/styles.css | 1 - src/core/Code/Code.stories.tsx | 12 ++--- .../CustomerLogos/CustomerLogos.stories.tsx | 2 +- .../DropdownMenu/DropdownMenu.stories.tsx | 5 +- src/core/FeaturedLink/component.jsx | 23 --------- src/core/Meganav/Meganav.stories.tsx | 2 +- tailwind.config.js | 1 + 9 files changed, 31 insertions(+), 65 deletions(-) diff --git a/.storybook/application.css b/.storybook/application.css index c0171b89e..846924d82 100644 --- a/.storybook/application.css +++ b/.storybook/application.css @@ -1,28 +1,26 @@ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap"); -@layer components { - .pi-checkered-bg { - --size: 0.25rem; - --double: calc(var(--size) * 2); - --bg: #eee; - --fg: #ddd; - background: linear-gradient( - 45deg, - var(--fg) 25%, - transparent 25.1%, - transparent 74.9%, - var(--fg) 75% - ), - linear-gradient( - 45deg, - var(--fg) 25%, - transparent 25.1%, - transparent 74.9%, - var(--fg) 75% - ), - var(--bg); - background-repeat: repeat, repeat; - background-position: 0 0, var(--size) var(--size); - background-size: var(--double) var(--double), var(--double) var(--double); - } +.pi-checkered-bg { + --size: 0.25rem; + --double: calc(var(--size) * 2); + --bg: #eee; + --fg: #ddd; + background: linear-gradient( + 45deg, + var(--fg) 25%, + transparent 25.1%, + transparent 74.9%, + var(--fg) 75% + ), + linear-gradient( + 45deg, + var(--fg) 25%, + transparent 25.1%, + transparent 74.9%, + var(--fg) 75% + ), + var(--bg); + background-repeat: repeat, repeat; + background-position: 0 0, var(--size) var(--size); + background-size: var(--double) var(--double), var(--double) var(--double); } diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1be4fe723..907f1ff35 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,11 +1,9 @@ import React from "react"; import { DocsContainer } from "@storybook/blocks"; -import { rest } from "msw"; import { initialize, mswDecorator } from "msw-storybook-addon"; import "./styles.css"; import theme from "./theme"; -import "../src/core/utils/syntax-highlighter"; import loadIcons from "../src/core/icons"; const docsContainer = ({ children, context, ...props }) => { diff --git a/.storybook/styles.css b/.storybook/styles.css index 99a131692..d1d5916d4 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -6,6 +6,5 @@ @import "../src/core/fonts/manrope.css"; @import "../src/core/styles.css"; @import "../src/reset/styles.css"; -@import "../src/core/utils/syntax-highlighter.css"; @import "./application.css"; diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx index e23c2b948..0a6454b64 100644 --- a/src/core/Code/Code.stories.tsx +++ b/src/core/Code/Code.stories.tsx @@ -1,16 +1,12 @@ -import type { StoryObj } from "@storybook/react"; - import Code from "./component.jsx"; -type Story = StoryObj; - export default { title: "Components/Code", component: Code, tags: ["autodocs"], }; -export const Javascript: Story = { +export const Javascript = { args: { language: "javascript", snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'); @@ -23,7 +19,7 @@ channel.subscribe('greeting', function(message) { }, }; -export const Swift: Story = { +export const Swift = { args: { language: "swift", snippet: `let ably = ARTRealtime(key: "1WChTA.mc0Biw:kNfiYG4KiPgmHHgH") @@ -36,7 +32,7 @@ channel.subscribe("greeting") { message in }, }; -export const Java: Story = { +export const Java = { args: { language: "java", snippet: `AblyRealtime ably = new AblyRealtime("1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"); @@ -55,7 +51,7 @@ channel.subscribe("greeting", listener);`, }, }; -export const Kotlin: Story = { +export const Kotlin = { args: { language: "kotlin", snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'); diff --git a/src/core/CustomerLogos/CustomerLogos.stories.tsx b/src/core/CustomerLogos/CustomerLogos.stories.tsx index 00a30cb19..190d72d40 100644 --- a/src/core/CustomerLogos/CustomerLogos.stories.tsx +++ b/src/core/CustomerLogos/CustomerLogos.stories.tsx @@ -1,4 +1,4 @@ -import CustomerLogos from "../CustomerLogos/component.jsx"; +import CustomerLogos from "./component.jsx"; import hubspot from "../images/cust-logo-hubspot-mono-pos.svg"; import webflow from "../images/cust-logo-webflow-col-pos.svg"; diff --git a/src/core/DropdownMenu/DropdownMenu.stories.tsx b/src/core/DropdownMenu/DropdownMenu.stories.tsx index 51f9c54cb..48d768c02 100644 --- a/src/core/DropdownMenu/DropdownMenu.stories.tsx +++ b/src/core/DropdownMenu/DropdownMenu.stories.tsx @@ -1,16 +1,13 @@ import React from "react"; import Icon from "../Icon/component.jsx"; import DropdownMenu from "./component.jsx"; -import { StoryObj } from "@storybook/react"; export default { title: "Components/Dropdown Menu", component: DropdownMenu, }; -type Story = StoryObj; - -export const Default: Story = { +export const Default = { render: () => ( diff --git a/src/core/FeaturedLink/component.jsx b/src/core/FeaturedLink/component.jsx index 06ac1721b..694683688 100644 --- a/src/core/FeaturedLink/component.jsx +++ b/src/core/FeaturedLink/component.jsx @@ -71,35 +71,12 @@ const FeaturedLink = ({ }; FeaturedLink.propTypes = { - /** - * Passed to the href in the anchor. - */ url: T.string, - /** - * Text size of the link. - */ children: T.node, - /** - * Passed to the href in the anchor. - */ textSize: T.string, - /** - * Color of the icon. Depends on icons being drawn with strokes and the currentColor - * property being applied to all svgs. Use tailwind color classes (i.e. - * text-white). - */ iconColor: T.string, - /** - * If true, removes the default vertical padding. - */ flush: T.bool, - /** - * If true, the arrow is positioned on the left side of the text. - */ reverse: T.bool, - /** - * Additional classes to be added to the link. - */ additionalCSS: T.string, newWindow: T.bool, onClick: T.func, diff --git a/src/core/Meganav/Meganav.stories.tsx b/src/core/Meganav/Meganav.stories.tsx index 4831e3e1a..2c2f702e7 100644 --- a/src/core/Meganav/Meganav.stories.tsx +++ b/src/core/Meganav/Meganav.stories.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import { rest } from "msw"; -import Meganav from "../../../src/core/Meganav/component.jsx"; +import Meganav from "./component.jsx"; import loadIcons from "../icons.js"; import logo from "../images/ably-logo.png"; import ablyStack from "../images/ably-stack.svg"; diff --git a/tailwind.config.js b/tailwind.config.js index 0cb5c2f3d..32da0d6a9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,7 @@ module.exports = { "w-1/4", "w-1/5", "w-1/6", + { pattern: /^hljs.*/ }, { pattern: /^ui-.*/ }, ], theme: {