Skip to content

Commit

Permalink
Merge pull request #27 from 8845musign/fix-code-of-js-to-be-copied
Browse files Browse the repository at this point in the history
Fix Code of JS to be copied
  • Loading branch information
takanorip authored Jan 18, 2024
2 parents dcac03c + 8d44cf2 commit 0c57e52
Show file tree
Hide file tree
Showing 10 changed files with 39 additions and 28 deletions.
4 changes: 2 additions & 2 deletions src/components/react/Grid.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import styles from './Grid.module.css';
import type { FC, ReactNode } from 'react';

Expand All @@ -12,7 +12,7 @@ interface Props {
const Grid: FC<Props> = ({
children,
minimum = '250px',
space = DesignToken.size['spacing-lg'].value.toString(),
space = DesignTokens.size['spacing-lg'].value.toString(),
role,
}) => {
const cssCariables = {
Expand Down
20 changes: 13 additions & 7 deletions src/components/react/figures/color/ColorChip.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import ButtonCopy from '@components/react/CopyButton';
import { validateContrast, convertHexWithPercentage, convertDisplayName, deleteAlpha } from '@utils/client';
import {
validateContrast,
convertHexWithPercentage,
convertDisplayName,
deleteAlpha,
createColorTokenJsCode,
} from '@utils/client';
import styles from './ColorChip.module.css';
import ColorChipValidationIndicator from './ColorChipValidationIndicator';
import type { DesignToken as Token } from '@types';
Expand All @@ -13,11 +19,11 @@ interface Props {
const ColorChip: FC<Props> = ({ token }) => {
const cssVariables = `--${token.path?.[0]}-${token.path?.[1]}`;

const jsonPath = `DesignToken.${token.path?.[0]}['${token.path?.[1]}']`;
const jsPath = createColorTokenJsCode(token);

const blackIsValid = validateContrast(token.original.value, DesignToken.color['text-main'].value);
const blackIsValid = validateContrast(token.original.value, DesignTokens.color['text-main'].value);

const whiteIsValid = validateContrast(token.original.value, DesignToken.color['ubie-white'].original.value);
const whiteIsValid = validateContrast(token.original.value, DesignTokens.color['ubie-white'].original.value);

const name = convertDisplayName(token.name ?? '');

Expand Down Expand Up @@ -57,8 +63,8 @@ const ColorChip: FC<Props> = ({ token }) => {
<div className={styles.value}>
<p className={styles.valueTypeName}>JavaScript Object</p>

<code className={styles.code}>{jsonPath}</code>
<ButtonCopy className={styles.copy} text={`var(${jsonPath})`}></ButtonCopy>
<code className={styles.code}>{jsPath}</code>
<ButtonCopy className={styles.copy} text={jsPath}></ButtonCopy>
</div>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions src/components/react/figures/color/ColorListBase.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import ColorChip from './ColorChip';
import Grid from '../../Grid';
import type { DesignToken as Token } from '@types';
Expand All @@ -9,7 +9,7 @@ interface Props {
}

const ColorListBase: FC<Props> = ({ tokens }) => (
<Grid minimum="200px" space={DesignToken.size['spacing-sm'].value}>
<Grid minimum="200px" space={DesignTokens.size['spacing-sm'].value}>
{tokens.map((token, index) => {
return <ColorChip token={token} key={index} />;
})}
Expand Down
7 changes: 2 additions & 5 deletions src/components/react/figures/color/semantic/BaseGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import CopyButton from '@components/react/CopyButton';
import { convertHexWithPercentage, convertDisplayName, deleteAlpha } from '@utils/client';
import { convertHexWithPercentage, convertDisplayName, deleteAlpha, createColorTokenJsCode } from '@utils/client';
import styles from './BaseGrid.module.css';
import type { DesignToken } from '@types';
import type { FC } from 'react';
Expand Down Expand Up @@ -46,10 +46,7 @@ const BaseGrid: FC<Props> = ({ colors }) => (
<td className={styles.cellCopy}>
<CopyButton label="HEX" text={deleteAlpha(color.token.value)}></CopyButton>
<CopyButton label="CSS" text={`var(--${color.token.path?.[0]}-${color.token.path?.[1]})`}></CopyButton>
<CopyButton
label="JS"
text={`DesignToken.${color.token.path?.[0]}['${color.token.path?.[1]}']`}
></CopyButton>
<CopyButton label="JS" text={createColorTokenJsCode(color.token)}></CopyButton>
</td>
</tr>
))}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import BaseGrid from './BaseGrid';
import type { FC } from 'react';

const { color } = DesignToken;
const { color } = DesignTokens;

const ColorListAlert: FC = () => {
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import BaseGrid from './BaseGrid';
import type { FC } from 'react';

const { color } = DesignToken;
const { color } = DesignTokens;

const ColorListBranding: FC = () => {
return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/react/figures/color/semantic/ColorListUI.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import BaseGrid from './BaseGrid';
import type { FC } from 'react';

const { color } = DesignToken;
const { color } = DesignTokens;

const ColorListUI: FC = () => {
return (
Expand Down
6 changes: 3 additions & 3 deletions src/components/react/figures/radius/TokenList.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import CopyButton from '@components/react/CopyButton';
import Table, { Row, TBody, THead, Cell, HeadCell, HeadRow } from '@components/react/Table';
import { pascalCaseToCSSVariables } from '@utils/client/css';
import { getKeys } from '@utils/client/object';
import type { FC } from 'react';

const { radius } = DesignToken;
const { radius } = DesignTokens;
const radiusArray = getKeys(radius)
.map((key) => {
return {
Expand Down Expand Up @@ -51,7 +51,7 @@ const TokenList: FC = () => (
label="CSS"
></CopyButton>
<CopyButton
text={`DesignToken.${radius.token.path?.[0]}['${radius.token.path?.[1]}']`}
text={`DesignTokens.${radius.token.path?.[0]}['${radius.token.path?.[1]}']`}
label="JS"
></CopyButton>
</Cell>
Expand Down
9 changes: 6 additions & 3 deletions src/components/react/figures/spacing/TokenList.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import DesignToken from '@ubie/design-tokens';
import DesignTokens from '@ubie/design-tokens';
import CopyButton from '@components/react/CopyButton';
import Table, { Row, TBody, THead, Cell, HeadCell, HeadRow } from '@components/react/Table';
import { pascalCaseToCSSVariables } from '@utils/client/css';
import { getKeys } from '@utils/client/object';
import type { FC } from 'react';

const { size } = DesignToken;
const { size } = DesignTokens;
const sizeArray = getKeys(size)
.map((key) => {
return {
Expand Down Expand Up @@ -54,7 +54,10 @@ const TokenList: FC = () => (
text={`var(${pascalCaseToCSSVariables(size.token.name ? size.token.name : '')})`}
label="CSS"
></CopyButton>
<CopyButton text={`DesignToken.${size.token.path?.[0]}['${size.token.path?.[1]}']`} label="JS"></CopyButton>
<CopyButton
text={`DesignTokens.${size.token.path?.[0]}['${size.token.path?.[1]}']`}
label="JS"
></CopyButton>
</Cell>
</Row>
))}
Expand Down
5 changes: 5 additions & 0 deletions src/utils/client/color.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { normal } from 'color-blend';
import rgba from 'color-rgba';
import type { DesignToken } from '@types';

type RGBA = {
r: number;
Expand Down Expand Up @@ -238,3 +239,7 @@ if (import.meta.vitest) {
});
});
}

export const createColorTokenJsCode = (token: DesignToken): string => {
return `DesignTokens.${token.path?.[0]}['${token.path?.[1]}']`;
};

0 comments on commit 0c57e52

Please sign in to comment.