Merged in fix/3697-prettier-configs (pull request #3396)
fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
||||
import { useState } from 'react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import { useState } from "react"
|
||||
import copy from "copy-to-clipboard"
|
||||
|
||||
import { kebabify } from '../../generate/utils'
|
||||
import { kebabify } from "../../generate/utils"
|
||||
|
||||
export type ThemeValue = Record<'resolved' | 'alias', string | number>
|
||||
export type ThemeValue = Record<"resolved" | "alias", string | number>
|
||||
|
||||
export type Theme = Record<string, ThemeValue>
|
||||
|
||||
@@ -20,7 +20,7 @@ export type ColorsProps = {
|
||||
defaultThemeName?: string
|
||||
}
|
||||
|
||||
import styles from './colors.module.css'
|
||||
import styles from "./colors.module.css"
|
||||
|
||||
function getContrastColor(bgColor: string) {
|
||||
const r = parseInt(bgColor.substring(1, 3), 16)
|
||||
@@ -34,12 +34,12 @@ function getContrastColor(bgColor: string) {
|
||||
|
||||
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
|
||||
if (luminance > 0.5) {
|
||||
return '#000'
|
||||
return "#000"
|
||||
} else {
|
||||
if (a < 255 / 2) {
|
||||
return '#000'
|
||||
return "#000"
|
||||
}
|
||||
return '#fff'
|
||||
return "#fff"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@ export function Colors({
|
||||
defaultThemeName,
|
||||
}: ColorsProps) {
|
||||
const [selectedThemeName, setSelectedThemeName] = useState<string>(
|
||||
defaultThemeName || themes?.[0]?.name || ''
|
||||
defaultThemeName || themes?.[0]?.name || ""
|
||||
)
|
||||
const [, setCopiedKey] = useState<string | null>(null)
|
||||
|
||||
@@ -78,8 +78,8 @@ export function Colors({
|
||||
const grouping: Record<string, Theme> = {}
|
||||
|
||||
for (const [k, v] of Object.entries(currentTheme)) {
|
||||
if (typeof v.resolved === 'string' && v.resolved.startsWith('#')) {
|
||||
const key = k.replace(/\/[^/]+$/, '')
|
||||
if (typeof v.resolved === "string" && v.resolved.startsWith("#")) {
|
||||
const key = k.replace(/\/[^/]+$/, "")
|
||||
if (!grouping[key]) {
|
||||
grouping[key] = {}
|
||||
}
|
||||
@@ -120,8 +120,8 @@ export function Colors({
|
||||
onChange={(e) => {
|
||||
const el = document.getElementById(e.target.value)
|
||||
el?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
})
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { CornerRadius } from './CornerRadius'
|
||||
import { CornerRadius } from "./CornerRadius"
|
||||
|
||||
import { base } from '../../lib/tokens'
|
||||
import { base } from "../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Corner Radius" />
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
||||
import copy from 'copy-to-clipboard'
|
||||
import copy from "copy-to-clipboard"
|
||||
|
||||
import { kebabify } from '../../generate/utils'
|
||||
import { kebabify } from "../../generate/utils"
|
||||
|
||||
import tableStyles from './tokens.module.css'
|
||||
import tableStyles from "./tokens.module.css"
|
||||
|
||||
type ThemeValue = {
|
||||
resolved: string | number
|
||||
@@ -24,15 +24,15 @@ export function CornerRadius({ theme }: CornerRadiusProps) {
|
||||
// Filter corner radius tokens
|
||||
const cornerRadiusTokens: Theme = {}
|
||||
for (const [k, v] of Object.entries(theme)) {
|
||||
if (k.startsWith('Corner radius/')) {
|
||||
if (k.startsWith("Corner radius/")) {
|
||||
cornerRadiusTokens[k] = v as ThemeValue
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by value
|
||||
const sortedTokens = Object.entries(cornerRadiusTokens).sort((a, b) => {
|
||||
const aValue = typeof a[1].resolved === 'number' ? a[1].resolved : 0
|
||||
const bValue = typeof b[1].resolved === 'number' ? b[1].resolved : 0
|
||||
const aValue = typeof a[1].resolved === "number" ? a[1].resolved : 0
|
||||
const bValue = typeof b[1].resolved === "number" ? b[1].resolved : 0
|
||||
return aValue - bValue
|
||||
})
|
||||
|
||||
@@ -51,7 +51,7 @@ export function CornerRadius({ theme }: CornerRadiusProps) {
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedTokens.map(([k, v]) => {
|
||||
const value = typeof v.resolved === 'number' ? v.resolved : 0
|
||||
const value = typeof v.resolved === "number" ? v.resolved : 0
|
||||
const valuePx = `${value}px`
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Shadow } from './Shadow'
|
||||
import { Shadow } from "./Shadow"
|
||||
|
||||
import { base } from '../../lib/tokens'
|
||||
import { base } from "../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Shadow" />
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
||||
import copy from 'copy-to-clipboard'
|
||||
import copy from "copy-to-clipboard"
|
||||
|
||||
import { kebabify } from '../../generate/utils'
|
||||
import { kebabify } from "../../generate/utils"
|
||||
|
||||
import tableStyles from './tokens.module.css'
|
||||
import tableStyles from "./tokens.module.css"
|
||||
|
||||
type ThemeValue = {
|
||||
resolved: string | number
|
||||
@@ -24,15 +24,15 @@ export function Shadow({ theme }: ShadowProps) {
|
||||
// Filter shadow tokens
|
||||
const shadowTokens: Theme = {}
|
||||
for (const [k, v] of Object.entries(theme)) {
|
||||
if (k.startsWith('BoxShadow-')) {
|
||||
if (k.startsWith("BoxShadow-")) {
|
||||
shadowTokens[k] = v as ThemeValue
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by level
|
||||
const sortedTokens = Object.entries(shadowTokens).sort((a, b) => {
|
||||
const aLevel = parseInt(a[0].match(/\d+/)?.[0] || '0')
|
||||
const bLevel = parseInt(b[0].match(/\d+/)?.[0] || '0')
|
||||
const aLevel = parseInt(a[0].match(/\d+/)?.[0] || "0")
|
||||
const bLevel = parseInt(b[0].match(/\d+/)?.[0] || "0")
|
||||
return aLevel - bLevel
|
||||
})
|
||||
|
||||
@@ -53,8 +53,8 @@ export function Shadow({ theme }: ShadowProps) {
|
||||
<tbody>
|
||||
{sortedTokens.map(([k, v]) => {
|
||||
const shadowValue =
|
||||
typeof v.resolved === 'string' ? v.resolved : ''
|
||||
const level = k.match(/\d+/)?.[0] || '0'
|
||||
typeof v.resolved === "string" ? v.resolved : ""
|
||||
const level = k.match(/\d+/)?.[0] || "0"
|
||||
|
||||
return (
|
||||
<tr key={k} className={tableStyles.tableRow}>
|
||||
@@ -80,8 +80,8 @@ export function Shadow({ theme }: ShadowProps) {
|
||||
}}
|
||||
title="Click to copy"
|
||||
style={{
|
||||
fontSize: '0.75rem',
|
||||
wordBreak: 'break-all',
|
||||
fontSize: "0.75rem",
|
||||
wordBreak: "break-all",
|
||||
}}
|
||||
>
|
||||
{shadowValue}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Spacing } from './Spacing'
|
||||
import { Spacing } from "./Spacing"
|
||||
|
||||
import { base } from '../../lib/tokens'
|
||||
import { base } from "../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Spacing" />
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
||||
import copy from 'copy-to-clipboard'
|
||||
import copy from "copy-to-clipboard"
|
||||
|
||||
import { kebabify } from '../../generate/utils'
|
||||
import { kebabify } from "../../generate/utils"
|
||||
|
||||
import tableStyles from './tokens.module.css'
|
||||
import tableStyles from "./tokens.module.css"
|
||||
|
||||
type ThemeValue = {
|
||||
resolved: string | number
|
||||
@@ -24,15 +24,15 @@ function copyToClipboard(text: string) {
|
||||
function getBaseUnitMultiplier(tokenName: string): string {
|
||||
// Token names are like "Space/x0", "Space/x025", "Space/x05", "Space/x1", "Space/x15", etc.
|
||||
const match = tokenName.match(/Space\/x(\d+)/)
|
||||
if (!match) return '0x'
|
||||
if (!match) return "0x"
|
||||
|
||||
const num = match[1]
|
||||
|
||||
// Handle special cases
|
||||
if (num === '0') return '0x'
|
||||
if (num === '025') return '0.25x'
|
||||
if (num === '05') return '0.5x'
|
||||
if (num === '15') return '1.5x'
|
||||
if (num === "0") return "0x"
|
||||
if (num === "025") return "0.25x"
|
||||
if (num === "05") return "0.5x"
|
||||
if (num === "15") return "1.5x"
|
||||
|
||||
// For other numbers, they're already the multiplier (x1 = 1x, x2 = 2x, etc.)
|
||||
return `${num}x`
|
||||
@@ -42,15 +42,15 @@ export function Spacing({ theme }: SpacingProps) {
|
||||
// Filter spacing tokens
|
||||
const spacingTokens: Theme = {}
|
||||
for (const [k, v] of Object.entries(theme)) {
|
||||
if (k.startsWith('Space/')) {
|
||||
if (k.startsWith("Space/")) {
|
||||
spacingTokens[k] = v as ThemeValue
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by value
|
||||
const sortedTokens = Object.entries(spacingTokens).sort((a, b) => {
|
||||
const aValue = typeof a[1].resolved === 'number' ? a[1].resolved : 0
|
||||
const bValue = typeof b[1].resolved === 'number' ? b[1].resolved : 0
|
||||
const aValue = typeof a[1].resolved === "number" ? a[1].resolved : 0
|
||||
const bValue = typeof b[1].resolved === "number" ? b[1].resolved : 0
|
||||
return aValue - bValue
|
||||
})
|
||||
|
||||
@@ -72,7 +72,7 @@ export function Spacing({ theme }: SpacingProps) {
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedTokens.map(([k, v]) => {
|
||||
const value = typeof v.resolved === 'number' ? v.resolved : 0
|
||||
const value = typeof v.resolved === "number" ? v.resolved : 0
|
||||
const valuePx = `${value}px`
|
||||
const multiplier = getBaseUnitMultiplier(k)
|
||||
|
||||
@@ -112,7 +112,7 @@ export function Spacing({ theme }: SpacingProps) {
|
||||
className={tableStyles.visualBar}
|
||||
style={{
|
||||
width: `${value}px`,
|
||||
minWidth: value > 0 ? '2px' : '0',
|
||||
minWidth: value > 0 ? "2px" : "0",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from './Colors'
|
||||
import { Colors } from "./Colors"
|
||||
|
||||
import { base } from '../../lib/tokens'
|
||||
import { base } from "../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Base" />
|
||||
|
||||
|
||||
@@ -170,7 +170,7 @@
|
||||
}
|
||||
|
||||
.colorValue {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
@@ -203,7 +203,7 @@
|
||||
}
|
||||
|
||||
.tokenCode {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
font-size: 12px;
|
||||
background: #f9fafb;
|
||||
padding: 0.375rem 0.625rem;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { downtownCamper } from '../../../lib/tokens'
|
||||
import { downtownCamper } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Downtown Camper" />
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { grandHotel } from '../../../lib/tokens'
|
||||
import { grandHotel } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Grand Hotel" />
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { haymarket } from '../../../lib/tokens'
|
||||
import { haymarket } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Haymarket" />
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { hotelNorge } from '../../../lib/tokens'
|
||||
import { hotelNorge } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Hotel Norge" />
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import {
|
||||
base,
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
hotelNorge,
|
||||
grandHotel,
|
||||
theDock,
|
||||
} from '../../../lib/tokens'
|
||||
} from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors" />
|
||||
|
||||
@@ -22,19 +22,19 @@ Select a theme to view all available color tokens. Click on any value to copy it
|
||||
|
||||
<Colors
|
||||
themes={[
|
||||
{ name: 'base', displayName: 'Base', theme: base },
|
||||
{ name: 'scandic', displayName: 'Scandic', theme: scandic },
|
||||
{ name: 'scandicGo', displayName: 'Scandic Go', theme: scandicGo },
|
||||
{ name: "base", displayName: "Base", theme: base },
|
||||
{ name: "scandic", displayName: "Scandic", theme: scandic },
|
||||
{ name: "scandicGo", displayName: "Scandic Go", theme: scandicGo },
|
||||
{
|
||||
name: 'downtownCamper',
|
||||
displayName: 'Downtown Camper',
|
||||
name: "downtownCamper",
|
||||
displayName: "Downtown Camper",
|
||||
theme: downtownCamper,
|
||||
},
|
||||
{ name: 'haymarket', displayName: 'Haymarket', theme: haymarket },
|
||||
{ name: 'marski', displayName: 'Marski', theme: marski },
|
||||
{ name: 'hotelNorge', displayName: 'Hotel Norge', theme: hotelNorge },
|
||||
{ name: 'grandHotel', displayName: 'Grand Hotel', theme: grandHotel },
|
||||
{ name: 'theDock', displayName: 'The Dock', theme: theDock },
|
||||
{ name: "haymarket", displayName: "Haymarket", theme: haymarket },
|
||||
{ name: "marski", displayName: "Marski", theme: marski },
|
||||
{ name: "hotelNorge", displayName: "Hotel Norge", theme: hotelNorge },
|
||||
{ name: "grandHotel", displayName: "Grand Hotel", theme: grandHotel },
|
||||
{ name: "theDock", displayName: "The Dock", theme: theDock },
|
||||
]}
|
||||
defaultThemeName="scandic"
|
||||
/>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { marski } from '../../../lib/tokens'
|
||||
import { marski } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Marski" />
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { scandic } from '../../../lib/tokens'
|
||||
import { scandic } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Scandic" />
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { scandicGo } from '../../../lib/tokens'
|
||||
import { scandicGo } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/Scandic Go" />
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
import { Colors } from '../Colors'
|
||||
import { Colors } from "../Colors"
|
||||
|
||||
import { theDock } from '../../../lib/tokens'
|
||||
import { theDock } from "../../../lib/tokens"
|
||||
|
||||
<Meta title="Tokens/Colors/The Dock" />
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta } from '@storybook/addon-docs/blocks'
|
||||
import { Meta } from "@storybook/addon-docs/blocks"
|
||||
|
||||
<Meta title="Introduction" />
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
}
|
||||
|
||||
.tokenName {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
background: #f3f4f6;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
@@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease;
|
||||
@@ -98,7 +98,7 @@
|
||||
}
|
||||
|
||||
.visualBarLabel {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
min-width: 40px;
|
||||
|
||||
Reference in New Issue
Block a user