From fc1e408b64a2c038bfc5f357f397b2fe5f144206 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Sat, 8 Jul 2023 19:07:47 +0100 Subject: [PATCH] text utility classes and docs with new CopyTable --- .storybook/preview-head.html | 4 + .vscode/settings.json | 2 +- package.json | 6 + src/docs/docs-components/.eslintrc.cjs | 36 ++++++ src/docs/docs-components/CopyTable/Table.jsx | 39 +++++++ .../CopyTable/styles.module.scss | 61 ++++++++++ src/docs/docs-components/MdxTheme/Theme.jsx | 29 +++++ src/docs/styles/typography/styles.scss | 2 +- .../typography/using-the-system.stories.mdx | 3 +- .../styles/typography/utilities.stories.mdx | 106 ++++++++++++++++++ tsconfig.json | 6 +- yarn.lock | 13 ++- 12 files changed, 297 insertions(+), 10 deletions(-) create mode 100644 src/docs/docs-components/.eslintrc.cjs create mode 100644 src/docs/docs-components/CopyTable/Table.jsx create mode 100644 src/docs/docs-components/CopyTable/styles.module.scss create mode 100644 src/docs/docs-components/MdxTheme/Theme.jsx create mode 100644 src/docs/styles/typography/utilities.stories.mdx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 05da1e9d..f8cf98cc 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +1,7 @@ + + + + \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 8bf25639..fab96555 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,7 @@ { "i18n-ally.localesPaths": ["locales"], "i18n-ally.keystyle": "nested", - "eslint.validate": ["javascript", "svelte"], + "eslint.validate": ["javascript", "svelte", "jsx"], "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true diff --git a/package.json b/package.json index 6c56847f..90c7a725 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,12 @@ "chromatic": "^6.19.9", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", + "eslint-config-standard-jsx": "^11.0.0", + "eslint-config-standard-react": "^13.0.0", + "eslint-plugin-import": "^2.27.5", "eslint-plugin-n": "^16.0.0", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-storybook": "^0.6.12", "eslint-plugin-svelte3": "^4.0.0", @@ -73,6 +78,7 @@ "prettier": "^2.8.8", "prettier-plugin-svelte": "^2.10.1", "prompts": "^2.4.2", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-syntax-highlighter": "^15.5.0", diff --git a/src/docs/docs-components/.eslintrc.cjs b/src/docs/docs-components/.eslintrc.cjs new file mode 100644 index 00000000..899ce0ab --- /dev/null +++ b/src/docs/docs-components/.eslintrc.cjs @@ -0,0 +1,36 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + ignorePatterns: ['node_modules', 'docs/**'], + extends: [ + 'standard', + 'standard-jsx', + 'standard-react', + ], + plugins: ['@typescript-eslint'], + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + }, + env: { + browser: true, + es2022: true, + }, + rules: { + indent: ['error', 2], + semi: ['error', 'always'], + 'comma-dangle': [ + 'error', + { + arrays: 'always-multiline', + objects: 'always-multiline', + imports: 'always-multiline', + exports: 'never', + functions: 'never', + }, + ], + 'operator-linebreak': ['error', 'after'], + 'space-before-function-paren': ['error', 'never'], + 'react/prop-types': 'never', + }, +}; diff --git a/src/docs/docs-components/CopyTable/Table.jsx b/src/docs/docs-components/CopyTable/Table.jsx new file mode 100644 index 00000000..c0ab43d1 --- /dev/null +++ b/src/docs/docs-components/CopyTable/Table.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { Unstyled } from '@storybook/blocks'; +import classes from './styles.module.scss'; + +const handleClick = async(props) => { + const copyText = typeof props.copyable[props.column] === 'function' ? + props.copyable[props.column](`${props.children}`) : `${props.children}`; + await navigator.clipboard.writeText(copyText); +} + +const MultiLine = (props) => props.children.split('\n').map(t => (
{t}
)) + +const Copyable = (props) => props.copyable && props.copyable[props.column] ? + : + {props.children}; +const TD = (props) => {props.children} +const TR = (props) => {props.children.map((c, i) => ({c}))} +const TH = (props) => {props.children}; + +const CopyTable = (props) => { + return ( + + + + + {props.header.map(h => ())} + + + + {props.body.map(b => ({b}))} + +
{h}
+ + ) +}; + +export default CopyTable; \ No newline at end of file diff --git a/src/docs/docs-components/CopyTable/styles.module.scss b/src/docs/docs-components/CopyTable/styles.module.scss new file mode 100644 index 00000000..2885187d --- /dev/null +++ b/src/docs/docs-components/CopyTable/styles.module.scss @@ -0,0 +1,61 @@ +$copyable: #0071a1; +$header: #5e81ac; + +.table { + min-height: 100px; + margin: 0 0 3rem; + width: 100%; + max-width: 600px; + border-collapse: collapse; + border-radius: 4px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + overflow: hidden; + th, + td { + padding: 6px 10px; + } + thead tr { + background-color: #5e81ac; + color: #ffffff; + text-align: left; + th { + font-weight: 500; + border-right: 1px solid rgba(255, 255, 255, 0.2); + } + } + tbody tr { + border-bottom: 1px solid #dddddd; + border-radius: 4px; + font-family: 'Fira Code', monospace; + letter-spacing: -1px; + font-size: 0.9rem; + font-weight: 400; + color: #404040; + td { + border-right: 1px solid #eee; + vertical-align: text-top; + button { + text-align: left; + padding: 0; + border: 0; + background-color: transparent; + cursor: pointer; + color: $copyable; + letter-spacing: -1px; + span { + font-size: 1rem; + color: inherit; + margin-right: 5px; + vertical-align: bottom; + } + &:active { + transform: translate(1px, 1px); + } + } + } + } + + tbody tr:nth-of-type(even) { + background-color: #f3f3f3; + } +} diff --git a/src/docs/docs-components/MdxTheme/Theme.jsx b/src/docs/docs-components/MdxTheme/Theme.jsx new file mode 100644 index 00000000..41e46e85 --- /dev/null +++ b/src/docs/docs-components/MdxTheme/Theme.jsx @@ -0,0 +1,29 @@ +import { Canvas, Unstyled } from '@storybook/blocks'; + +import React from 'react'; +import flatten from '../../../components/Theme/utils/flatten'; +import lightTheme from '../../../components/Theme/themes/light'; + +// This is a React equivalent for the Svelte Theme component +// which is useful for setting CSS variables in MDX docs around +// typography demos. It also wraps demos in an unstyled storybook +// canvas. + +const ThemeWrapper = (props) => { + const theme = flatten(lightTheme); + const styleObj = {}; + Object.keys(theme).forEach(key => { + styleObj[`--theme-${key}`] = theme[key]; + }); + return ( + + +
+ {props.children} +
+ + + ); +}; + +export default ThemeWrapper; diff --git a/src/docs/styles/typography/styles.scss b/src/docs/styles/typography/styles.scss index 342a1928..fe79e529 100644 --- a/src/docs/styles/typography/styles.scss +++ b/src/docs/styles/typography/styles.scss @@ -1,6 +1,6 @@ div.type-system-demo { @import '../../../scss/typography/mixins'; - @import '../../../scss/typography/classes'; + @import '../../../scss/typography/rules'; *:first-child { margin-top: 0; diff --git a/src/docs/styles/typography/using-the-system.stories.mdx b/src/docs/styles/typography/using-the-system.stories.mdx index bd15fb69..874cbc74 100644 --- a/src/docs/styles/typography/using-the-system.stories.mdx +++ b/src/docs/styles/typography/using-the-system.stories.mdx @@ -1,7 +1,6 @@ import { Meta } from '@storybook/addon-docs'; import { parameters } from '$docs/utils/docsPage.js'; -import { Canvas, Unstyled } from '@storybook/blocks'; -import Theme from './MdxTheme.jsx'; +import Theme from '../../docs-components/MdxTheme/Theme.jsx'; import './styles.scss'; diff --git a/src/docs/styles/typography/utilities.stories.mdx b/src/docs/styles/typography/utilities.stories.mdx new file mode 100644 index 00000000..5a81e190 --- /dev/null +++ b/src/docs/styles/typography/utilities.stories.mdx @@ -0,0 +1,106 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; +import CopyTable from '../../docs-components/CopyTable/Table.jsx'; + +import './styles.scss'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Utility classes + +Utility classes apply various often used styles to your markup. Just copy a class and use it on the element you wish to style. + +For example, these classes will bold and uppercase your text: + +```html +
My text
+``` + +### Make it `!important` + +You can make any utility class `!important` by adding a `!` to the front of the class name. + +```html +
My text
+``` + +--- + +### Font style + + + +### Font weight + + + +### Text align + + + +### Text transform + + + +### White space + + + +### Word break + + diff --git a/tsconfig.json b/tsconfig.json index 79fec58e..26c7ac14 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,10 +9,11 @@ "resolveJsonModule": true, "allowJs": true, "checkJs": true, - "jsx": "react", "emitDeclarationOnly": true, + "jsx": "react", "baseUrl": ".", "rootDir": ".", + "rootDirs": [".", "docs/docs-components"], "outDir": "dist", "paths": { "$lib": ["src"], @@ -32,7 +33,8 @@ "src/**/*.jsx", "bin/**/*.{js,cjs}", "*.ts", - "*.js" + "*.js", + "src/docs/**/*.css" ], "exclude": ["dist"] } diff --git a/yarn.lock b/yarn.lock index e7b65397..07de7fdd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4119,7 +4119,12 @@ eslint-config-prettier@^8.8.0: resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348" integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA== -eslint-config-standard-react@*: +eslint-config-standard-jsx@^11.0.0: + version "11.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-standard-jsx/-/eslint-config-standard-jsx-11.0.0.tgz#70852d395731a96704a592be5b0bfaccfeded239" + integrity sha512-+1EV/R0JxEK1L0NGolAr8Iktm3Rgotx3BKwgaX+eAuSX8D952LULKtjgZD3F+e6SvibONnhLwoTi9DPxN5LvvQ== + +eslint-config-standard-react@*, eslint-config-standard-react@^13.0.0: version "13.0.0" resolved "https://registry.yarnpkg.com/eslint-config-standard-react/-/eslint-config-standard-react-13.0.0.tgz#dcc85bc3210dac858bc94ac53d024a5488ce5568" integrity sha512-HrVPGj8UncHfV+BsdJTuJpVsomn6AIrke3Af2Fh4XFvQQDU+iO6N2ZL+UsC+scExft4fU3uf7fJwj7PKWnXJDA== @@ -4161,7 +4166,7 @@ eslint-plugin-es@^3.0.0: eslint-utils "^2.0.0" regexpp "^3.0.0" -eslint-plugin-import@*: +eslint-plugin-import@*, eslint-plugin-import@^2.27.5: version "2.27.5" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65" integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow== @@ -4196,7 +4201,7 @@ eslint-plugin-n@^16.0.0: resolve "^1.22.2" semver "^7.5.0" -eslint-plugin-node@*: +eslint-plugin-node@*, eslint-plugin-node@^11.1.0: version "11.1.0" resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz#c95544416ee4ada26740a30474eefc5402dc671d" integrity sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g== @@ -4208,7 +4213,7 @@ eslint-plugin-node@*: resolve "^1.10.1" semver "^6.1.0" -eslint-plugin-promise@*: +eslint-plugin-promise@*, eslint-plugin-promise@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz#269a3e2772f62875661220631bd4dafcb4083816" integrity sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==