From 9edff6b228e206da6eb80e5eff572f613c78894c Mon Sep 17 00:00:00 2001
From: Scott Vandehey Figures are usually used to refer to images:Hello world! This is the MLTSHP pattern library.
+
+
diff --git a/package.json b/package.json
index 8e1769a0..7908775f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
{
"name": "mltshp-patterns",
"version": "2.3.0",
+ "type": "module",
"author": "Scott Vandehey",
"description": "Pattern Library for MLTSHP Apps",
"homepage": "https://github.com/MLTSHP/mltshp-patterns#readme",
@@ -21,65 +22,55 @@
"!.gitignore"
],
"scripts": {
- "storybook": "yarn build:tokens && run-p watch start-storybook",
- "start-storybook": "start-storybook -p 6006 -s static",
- "build-storybook": "yarn build:tokens && build-storybook -s static",
+ "start": "yarn storybook",
+ "storybook": "yarn build:tokens && storybook dev -p 6006",
+ "build-storybook": "yarn build:tokens && storybook build",
"build": "run-s build:*",
- "build:tokens": "node ./build-tokens.js",
- "build:sass": "gulp build-sass",
- "watch": "run-s watch:*",
- "watch:tokens": "chokidar \"src/tokens/**/*.+(js|json)\" -c \"npm run build:tokens\"",
- "test": "yarn lint",
+ "build:tokens": "node ./build-tokens.cjs",
+ "build:scss": "sass --no-source-map src:.temp",
+ "build:postcss": "postcss .temp/*.css -d dist",
+ "build:min": "postcss .temp/*.css -u cssnano -d dist --ext .min.css --no-map",
+ "svgo": "svgo -r -f ./src/assets",
+ "test": "yarn lint:check",
"lint": "run-s lint:js lint:css lint:prettier",
"lint:check": "run-s lint:*:check",
"lint:js": "eslint --fix . --ext .js,.mdx",
"lint:js:check": "eslint . --ext .js,.mdx",
"lint:css": "stylelint --fix '**/*.scss'",
"lint:css:check": "stylelint '**/*.scss'",
- "lint:prettier": "prettier --write .",
- "lint:prettier:check": "prettier --check .",
- "prepublishOnly": "yarn && yarn lint:check && yarn build"
+ "lint:prettier": "prettier . --write",
+ "lint:prettier:check": "prettier . --check",
+ "prepublishOnly": "yarn && yarn test && yarn build"
},
"devDependencies": {
- "@babel/core": "7.21.8",
- "@babel/preset-env": "7.21.5",
- "@storybook/addon-a11y": "6.5.16",
- "@storybook/addon-essentials": "6.5.16",
- "@storybook/builder-webpack5": "6.5.16",
- "@storybook/html": "6.5.16",
- "@storybook/manager-webpack5": "6.5.16",
- "@svgr/webpack": "6.5.1",
- "babel-loader": "9.1.2",
- "chokidar-cli": "3.0.0",
- "css-loader": "6.7.3",
- "cssnano": "5.1.15",
- "eslint": "8.40.0",
- "eslint-config-prettier": "8.8.0",
- "eslint-plugin-mdx": "1.17.1",
- "eslint-plugin-prettier": "4.2.1",
- "eslint-plugin-react": "7.32.2",
- "gulp": "4.0.2",
- "gulp-postcss": "9.0.1",
- "gulp-prettier": "4.0.0",
- "gulp-rename": "2.0.0",
- "gulp-sass": "5.1.0",
- "npm-run-all": "4.1.5",
- "postcss": "8.4.23",
- "postcss-inline-svg": "5.0.0",
- "postcss-loader": "6.2.1",
- "prettier": "2.8.8",
- "remark-preset-lint-recommended": "5.0.0",
- "remark-preset-prettier": "0.5.1",
- "require-dir": "1.2.0",
- "sass": "1.62.1",
- "sass-loader": "12.6.0",
- "storybook-addon-themes": "6.1.0",
- "storybook-dark-mode": "2.1.1",
- "style-dictionary": "3.8.0",
- "style-loader": "3.3.2",
- "stylelint": "14.16.1",
- "stylelint-config-prettier": "9.0.5",
- "stylelint-config-spaceninja": "12.0.0",
- "tiny-glob": "0.2.9"
+ "@storybook/addon-a11y": "^7.0.11",
+ "@storybook/addon-essentials": "^7.0.11",
+ "@storybook/blocks": "^7.0.11",
+ "@storybook/html-vite": "^7.0.11",
+ "@storybook/testing-library": "^0.1.0",
+ "cssnano": "^6.0.1",
+ "eslint": "^8.40.0",
+ "eslint-config-prettier": "^8.8.0",
+ "eslint-plugin-mdx": "^2.1.0",
+ "eslint-plugin-react": "^7.32.2",
+ "eslint-plugin-storybook": "^0.6.12",
+ "npm-run-all": "^4.1.5",
+ "postcss": "^8.4.23",
+ "postcss-cli": "^10.1.0",
+ "postcss-inline-svg": "^6.0.0",
+ "prettier": "^2.8.8",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "sass": "^1.62.1",
+ "storybook": "^7.0.11",
+ "storybook-addon-themes": "^6.1.0",
+ "storybook-dark-mode": "^3.0.0",
+ "style-dictionary": "^3.8.0",
+ "stylelint": "^15.6.1",
+ "stylelint-config-prettier": "^9.0.5",
+ "stylelint-config-spaceninja": "^12.0.0",
+ "svgo": "^3.0.2",
+ "vite": "^4.3.2",
+ "vite-plugin-svgr": "^3.2.0"
}
}
diff --git a/postcss.config.js b/postcss.config.cjs
similarity index 79%
rename from postcss.config.js
rename to postcss.config.cjs
index c209289c..9d32d736 100644
--- a/postcss.config.js
+++ b/postcss.config.cjs
@@ -1,6 +1,5 @@
module.exports = {
plugins: [
- require('autoprefixer'),
require('postcss-inline-svg')({
paths: ['./src/assets'],
}),
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 00000000..a7c24b3c
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/avatars/default-icon-tall.svg b/src/assets/avatars/default-icon-tall.svg
index a7c24b3c..583e17bc 100644
--- a/src/assets/avatars/default-icon-tall.svg
+++ b/src/assets/avatars/default-icon-tall.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/avatars/default-icon-venti.svg b/src/assets/avatars/default-icon-venti.svg
index cda4d6f7..40333751 100644
--- a/src/assets/avatars/default-icon-venti.svg
+++ b/src/assets/avatars/default-icon-venti.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/balloons/comment-quip-left.svg b/src/assets/balloons/comment-quip-left.svg
index 5b0f03ee..bfdbcc1a 100644
--- a/src/assets/balloons/comment-quip-left.svg
+++ b/src/assets/balloons/comment-quip-left.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/balloons/error-tail.svg b/src/assets/balloons/error-tail.svg
index 6cf65243..824ee387 100644
--- a/src/assets/balloons/error-tail.svg
+++ b/src/assets/balloons/error-tail.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/icons.stories.mdx b/src/assets/icons.stories.mdx
deleted file mode 100644
index ce4eecfa..00000000
--- a/src/assets/icons.stories.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meta, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
-import { extname, relative } from 'path';
-// Import whole directory of icons together
-// @see https://webpack.js.org/guides/dependency-management/#context-module-api
-const iconDir = require.context('../assets/icons', true, /\.svg$/);
-const iconElements = iconDir.keys().map((key) => {
- const Icon = iconDir(key).default;
- // Retains subdirectory if we want to organize with those in the future
- const name = relative('.', key).replace(extname(key), '');
- return (
-
@@ -21,7 +21,7 @@
diff --git a/src/base/media.stories.js b/src/base/media.stories.js new file mode 100644 index 00000000..6c2aaca5 --- /dev/null +++ b/src/base/media.stories.js @@ -0,0 +1,26 @@ +import imagesMarkup from './examples/images.html?raw'; +import figuresMarkup from './examples/figures.html?raw'; +import embedsMarkup from './examples/embeds.html?raw'; + +export default { + title: 'Base/Media', + tags: ['autodocs'], +}; + +/** + * Images are made responsive so that it scales with the parent element. + */ +export const Images = { + render: () => imagesMarkup, +}; + +export const Figures = { + render: () => figuresMarkup, +}; + +/** + * Sometimes all you want to do is embed a little love from another location and set your post alive. + */ +export const Embeds = { + render: () => embedsMarkup, +}; diff --git a/src/base/media.stories.mdx b/src/base/media.stories.mdx deleted file mode 100644 index 9133cd6a..00000000 --- a/src/base/media.stories.mdx +++ /dev/null @@ -1,30 +0,0 @@ -import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; -import imagesMarkup from './examples/images.html'; -import figuresMarkup from './examples/figures.html'; -import embedsMarkup from './examples/embeds.html'; - - - -# Media - -## Images - -Images are made responsive so that it scales with the parent element. - - - -## Figures - - - -## Embeds - -Sometimes all you want to do is embed a little love from another location and set your post alive. - - diff --git a/src/base/typography.stories.js b/src/base/typography.stories.js new file mode 100644 index 00000000..5ddf90fb --- /dev/null +++ b/src/base/typography.stories.js @@ -0,0 +1,63 @@ +import headingsMarkup from './examples/headings.html?raw'; +import fontFeaturesMarkup from './examples/font-features.html?raw'; +import linkStylesMarkup from './examples/link-styles.html?raw'; +import listsMarkup from './examples/lists.html?raw'; +import tablesMarkup from './examples/tables.html?raw'; +import preMarkup from './examples/preformatted.html?raw'; +import blockquotesMarkup from './examples/blockquotes.html?raw'; +import textSemanticsMarkup from './examples/text-semantics.html?raw'; + +/** + * Below is just about everything you’ll need to style in the app. + * Check the source code to see the many embedded elements within paragraphs. + */ +export default { + title: 'Base/Typography', + tags: ['autodocs'], +}; + +export const Headings = { + render: () => headingsMarkup, +}; + +/** + * We apply some font-features such as ligatures and kerning to headlines. + * Here's an example that should have it applied. + * + * Note that these features are not available in every font. + * In particular, our headlines use the system font stack, + * and these rules don't seem to have any affect on the Mac system font. + */ +export const FontFeatures = { + render: () => fontFeaturesMarkup, +}; + +export const TextLevelSemantics = { + render: () => textSemanticsMarkup, +}; + +export const LinkStyles = { + render: () => linkStylesMarkup, +}; + +export const Lists = { + render: () => listsMarkup, +}; + +export const Tables = { + render: () => tablesMarkup, +}; + +export const Blockquotes = { + render: () => blockquotesMarkup, +}; + +/** + * Including, but not limited to code. + * Typographically, preformatted text is not the same thing as code. + * Sometimes, a faithful execution of the text requires preformatted text + * that may not have anything to do with code. For example: + */ +export const Preformatted = { + render: () => preMarkup, +}; diff --git a/src/base/typography.stories.mdx b/src/base/typography.stories.mdx deleted file mode 100644 index dc7946f8..00000000 --- a/src/base/typography.stories.mdx +++ /dev/null @@ -1,73 +0,0 @@ -import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; -import headingsMarkup from './examples/headings.html'; -import fontFeaturesMarkup from './examples/font-features.html'; -import linkStylesMarkup from './examples/link-styles.html'; -import listsMarkup from './examples/lists.html'; -import tablesMarkup from './examples/tables.html'; -import preMarkup from './examples/preformatted.html'; -import blockquotesMarkup from './examples/blockquotes.html'; -import textSemanticsMarkup from './examples/text-semantics.html'; - - - -# Content - -Below is just about everything you’ll need to style in the app. -Check the source code to see the many embedded elements within paragraphs. - -## Headings - - - -## Font Features - -We apply some font-features such as ligatures and kerning to headlines. -Here's an example that should have it applied. - -Note that these features are not available in every font. -In particular, our headlines use the system font stack, -and these rules don't seem to have any affect on the Mac system font. - - - -## Text-Level Semantics - - - -## Link Styles - - - -## Lists - - - -## Tables - - - -## Blockquotes - - - -## Preformatted - -Including, but not limited to code. Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. For example: - - diff --git a/src/brand/color.mdx b/src/brand/color.mdx new file mode 100644 index 00000000..18a37c6f --- /dev/null +++ b/src/brand/color.mdx @@ -0,0 +1,36 @@ +import { Meta, Title, ColorPalette, ColorItem } from '@storybook/blocks'; +import tokens from '../compiled/js/tokens.json'; +export const generateColorPalette = (props) => { + return Object.values(props).map((prop) => ( +