diff --git a/packages/ui-library/.storybook/preview.js b/packages/ui-library/.storybook/preview.js index 55c9d76e9aa..19cc3b9ee89 100644 --- a/packages/ui-library/.storybook/preview.js +++ b/packages/ui-library/.storybook/preview.js @@ -1,7 +1,10 @@ import "../src/elements/style.css"; export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, + actions: { + disable: true, + argTypesRegex: "^on[A-Z].*", + }, controls: { disable: true, matchers: { @@ -10,3 +13,5 @@ export const parameters = { }, }, }; + +// TODO: disable all addons here by default and enable manually? \ No newline at end of file diff --git a/packages/ui-library/package.json b/packages/ui-library/package.json index 93991639813..04b89150ff4 100644 --- a/packages/ui-library/package.json +++ b/packages/ui-library/package.json @@ -3,19 +3,20 @@ "version": "0.0.0", "description": "Yoast UI library", "main": "dist/index.js", - "author": "nolledgeable ", + "author": "Team Yoast ", "license": "MIT", "private": true, "sideEffects": false, "scripts": { "clean:build": "rm -rf build", - "build:ts": "tsc", + "build:js": "babel src --out-dir dist --ignore \"src/**/*.stories.@(js|jsx|ts|tsx)\",\"src/**/stories.@(js|jsx|ts|tsx)\"", "build:css": "postcss src/components/style.css --dir build", "build": "yarn clean:build && yarn build:ts && yarn build:css", "build:storybook": "build-storybook", "storybook": "start-storybook -p 6006" }, "devDependencies": { + "@babel/cli": "^7.17.3", "@babel/core": "^7.15.5", "@babel/parser": "^7.16.8", "@storybook/addon-a11y": "^6.4.14", @@ -25,12 +26,6 @@ "@storybook/addons": "^6.3.9", "@storybook/react": "^6.3.8", "@storybook/theming": "^6.3.9", - "@tsconfig/recommended": "^1.0.1", - "@types/classnames": "^2.3.1", - "@types/react": "^17.0.26", - "@types/react-dom": "^17.0.9", - "@typescript-eslint/eslint-plugin": "^4.31.2", - "@typescript-eslint/parser": "^4.31.2", "@whitespace/storybook-addon-html": "^5.0.0", "autoprefixer": "^10.4.2", "babel-loader": "^8.2.2", @@ -42,12 +37,15 @@ "postcss-cli": "^9.0.0", "postcss-import": "^14.0.2", "tailwindcss": "^3.0.15", - "typescript": "^4.4.3" + "@yoast/babel-preset": "link:packages/babel-preset" }, "dependencies": { "@heroicons/react": "^1.0.5", "classnames": "^2.3.1", + "lodash": "^4.17.21", + "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2" } } + diff --git a/packages/ui-library/postcss.config.js b/packages/ui-library/postcss.config.js index 7e731bc118e..d7e5b6bddb8 100644 --- a/packages/ui-library/postcss.config.js +++ b/packages/ui-library/postcss.config.js @@ -2,6 +2,7 @@ module.exports = { plugins: [ require( "postcss-import" ), require( "tailwindcss" ), + require( "tailwindcss/nesting" ), require( "autoprefixer" ), ...( process.env.NODE_ENV === "production" ? [ require( "cssnano" ) ] : [] ) ], diff --git a/packages/ui-library/src/elements/Button/stories.tsx b/packages/ui-library/src/elements/Button/stories.tsx index 9caf4b148cd..74a1c8185dd 100644 --- a/packages/ui-library/src/elements/Button/stories.tsx +++ b/packages/ui-library/src/elements/Button/stories.tsx @@ -5,7 +5,7 @@ import Button from "."; export default { - title: "Elements/Forms/Button", + title: "Elements/Button", component: Button, argTypes: { children: { control: "text" }, diff --git a/packages/ui-library/src/theme/index.js b/packages/ui-library/src/theme/index.js index 1be5b47e14d..09f70d4c602 100644 --- a/packages/ui-library/src/theme/index.js +++ b/packages/ui-library/src/theme/index.js @@ -1,6 +1,6 @@ // TODO: Move this to Tailwind preset package. module.exports = { - fontSize: { + fontSizes: { "xxs": "0.6rem", "xs": ".75rem", "sm": ".8125rem", // 13px instead of 14pxx diff --git a/packages/ui-library/tailwind.config.js b/packages/ui-library/tailwind.config.js index f6cfb51b526..02a08a53e50 100644 --- a/packages/ui-library/tailwind.config.js +++ b/packages/ui-library/tailwind.config.js @@ -2,9 +2,10 @@ const theme = require( "./src/theme" ); module.exports = { - content: [ "./src/**/*.tsx" ], + content: [ "./src/**/*.js" ], theme: { extend: { + fontSizes: theme.fontSizes, colors: theme.colors }, }, diff --git a/packages/ui-library/tsconfig.json b/packages/ui-library/tsconfig.json deleted file mode 100644 index 569260e39c2..00000000000 --- a/packages/ui-library/tsconfig.json +++ /dev/null @@ -1,112 +0,0 @@ -{ - "include": [ - "src/**/*" - ], - "exclude": [ - "node_modules", - // Exclude Storybook files - "**/*.stories.*", - "**/stories.*", - // Exclude test files - "**/*.test.*", - "**/test.*" - ], - "compilerOptions": { - /* Visit https://aka.ms/tsconfig.json to read more about this file */ - - /* Projects */ - // "incremental": true, /* Enable incremental compilation */ - // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ - // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ - // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ - // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ - // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ - - /* Language and Environment */ - "target": "es5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ - // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ - "jsx": "react", /* Specify what JSX code is generated. */ - // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ - // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ - // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ - // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ - // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ - // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ - // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ - // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ - - /* Modules */ - "module": "commonjs", /* Specify what module code is generated. */ - // "rootDir": "", /* Specify the root folder within your source files. */ - // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ - // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ - // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ - // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ - // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ - // "types": [], /* Specify type package names to be included without being referenced in a source file. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - // "resolveJsonModule": true, /* Enable importing .json files */ - // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ - - /* JavaScript Support */ - "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ - // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ - // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ - - /* Emit */ - // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ - // "declarationMap": true, /* Create sourcemaps for d.ts files. */ - // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ - // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ - // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ - "outDir": "build", /* Specify an output folder for all emitted files. */ - // "removeComments": true, /* Disable emitting comments. */ - // "noEmit": true, /* Disable emitting files from a compilation. */ - // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ - // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ - // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ - // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ - // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ - // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ - // "newLine": "crlf", /* Set the newline character for emitting files. */ - // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ - // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ - // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ - // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ - // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ - - /* Interop Constraints */ - // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ - // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ - "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ - // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ - "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ - - /* Type Checking */ - "strict": true, /* Enable all strict type-checking options. */ - // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ - // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ - // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ - // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ - // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ - // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ - // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ - // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ - // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ - // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ - // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ - // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ - // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ - // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ - // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ - // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ - // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ - // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ - - /* Completeness */ - // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ - "skipLibCheck": true /* Skip type checking all .d.ts files. */ - } -}