{children}
7 | );
8 | const instance = Content
12 | * );
13 | * };
14 | */
15 | export const useReducedMotion = () => {
16 | return useMatchMedia("(prefers-reduced-motion: reduce)");
17 | };
--------------------------------------------------------------------------------
/packages/babel-plugin-include-styles/src/__tests__/helpers/utils.ts:
--------------------------------------------------------------------------------
1 | import { transformSync } from '@babel/core';
2 | import plugin from '../..';
3 |
4 | /** Run the plugin on some code */
5 | export const transform = (source: string, filename = '/test.js') => {
6 | const results = transformSync(source, {
7 | filename,
8 | plugins: [[plugin, { scope: 'cgds' }]],
9 | configFile: false
10 | });
11 |
12 | if (results && results.code) {
13 | return results.code;
14 | }
15 |
16 | throw Error('Something went wrong.');
17 | };
18 |
--------------------------------------------------------------------------------
/packages/load-config/README.md:
--------------------------------------------------------------------------------
1 | # @design-systems/load-config
2 |
3 | This package handles loading the config for a `@design-systems/cli` project.
4 |
5 | ## Installation
6 |
7 | ```sh
8 | npm i @design-systems/load-config
9 | # or with yarn
10 | yarn add @design-systems/load-config
11 | ```
12 |
13 | ```js
14 | import { loadConfig, validateConfig } from '@design-systems/load-config';
15 |
16 | loadConfig().then(config => {
17 | const validatedConfig = validateConfig(config);
18 | console.log('Loaded with config', validatedConfig);
19 | });
20 | ```
21 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing
2 |
3 | We do not allow contributors to claim issues. If you find something interesting you can contribute to the repo, feel free to raise a PR
4 |
5 | 1. Fork the repo
6 | 1. Install dependencies locally `yarn`
7 | 1. Make sure it builds `yarn start`
8 | 1. Make your changes locally
9 | 1. Ensure the code coverage is the same or higher than before your changes.
10 | 1. Create a PR to the `master` branch
11 |
12 | To scaffold a new plugin inside this repo run the following command:
13 |
14 | `yarn run create:plugin "my plugin"`
15 |
16 |
--------------------------------------------------------------------------------
/packages/babel-plugin-replace-styles/src/__tests__/helpers/utils.ts:
--------------------------------------------------------------------------------
1 | import { transformSync } from '@babel/core';
2 | import plugin from '../../index';
3 |
4 | /** Run the plugin on some code */
5 | export const transform = (source: string, filename = 'test/test.js') => {
6 | const results = transformSync(source, {
7 | filename,
8 | plugins: [[plugin, { scope: 'cgds', use: 'test' }]],
9 | configFile: false,
10 | });
11 |
12 | if (results && results.code) {
13 | return results.code;
14 | }
15 |
16 | throw Error('Something went wrong.');
17 | };
18 |
--------------------------------------------------------------------------------
/packages/hooks/src/usePrefersHighContrast.tsx:
--------------------------------------------------------------------------------
1 | import { useMatchMedia } from './useMatchMedia';
2 |
3 | /**
4 | * Determine if the user has "prefers-contrast: more" enabled in their browser.
5 | *
6 | * @example
7 | * const Example = () => {
8 | * const isPrefersHighContrast = usePrefersHighContrast();
9 | *
10 | * return (
11 | * Content
12 | * );
13 | * };
14 | */
15 | export const usePrefersHighContrast = () => {
16 | return useMatchMedia('(prefers-contrast: more)');
17 | };
18 |
--------------------------------------------------------------------------------
/packages/hooks/src/usePrefersLessContrast.tsx:
--------------------------------------------------------------------------------
1 | import { useMatchMedia } from './useMatchMedia';
2 |
3 | /**
4 | * Determine if the user has "prefers-contrast: less" enabled in their browser.
5 | *
6 | * @example
7 | * const Example = () => {
8 | * const isPrefersLessContrast = usePrefersLessContrast();
9 | *
10 | * return (
11 | * Content
12 | * );
13 | * };
14 | */
15 | export const usePrefersLessContrast = () => {
16 | return useMatchMedia('(prefers-contrast: less)');
17 | };
18 |
--------------------------------------------------------------------------------
/packages/cli-utils/src/which.ts:
--------------------------------------------------------------------------------
1 | import npmWhich from 'npm-which';
2 | import path from 'path';
3 |
4 | const w = npmWhich(process.cwd());
5 |
6 | /** Locate a program or locally installed node module executable. */
7 | export default function which(cmd: string): string {
8 | try {
9 | return w.sync(cmd);
10 | } catch (e) {
11 | try {
12 | return w.sync(cmd, {
13 | cwd: __dirname
14 | });
15 | } catch (err) {
16 | return w.sync(cmd, {
17 | cwd: path.join(__dirname, '..', '..', '..')
18 | });
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/utils/src/utils/__tests__/createInstanceIfDefined.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { createInstanceIfDefined } from '../createInstanceIfDefined';
3 |
4 | test('it should create the instance', () => {
5 | const Text: React.FC = ({ children }) => {children}
;
6 |
7 | expect(createInstanceIfDefined('A string', Text)).toMatchSnapshot();
8 | });
9 |
10 | test('it not create the instance', () => {
11 | const Text: React.FC = ({ children }) => {children}
;
12 |
13 | expect(createInstanceIfDefined(null, Text)).toBeUndefined();
14 | });
15 |
--------------------------------------------------------------------------------
/packages/hooks/src/useDarkMode.tsx:
--------------------------------------------------------------------------------
1 | import { useMatchMedia } from "./useMatchMedia";
2 |
3 | /**
4 | * Determine if the user has a "prefers-color-scheme" mode enabled in their browser.
5 | * This is helpful for detecting if a user prefers dark mode.
6 | *
7 | * @example
8 | * const Example = () => {
9 | * const isDarkMode = useDarkMode();
10 | *
11 | * return (
12 | * Content
13 | * );
14 | * };
15 | */
16 | export const useDarkMode = () => {
17 | return useMatchMedia("(prefers-color-scheme: dark)");
18 | };
--------------------------------------------------------------------------------
/packages/next-esm-css/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/next-esm-css",
3 | "version": "4.15.4",
4 | "main": "./src/index.js",
5 | "repository": "https://github.com/intuit/design-systems-cli.git",
6 | "author": "Andrew Lisowski lisowski54@gmail.com",
7 | "contributors": [
8 | "Andrew Lisowski lisowski54@gmail.com"
9 | ],
10 | "license": "MIT",
11 | "files": [
12 | "dist",
13 | "src",
14 | "!*.test.*",
15 | "!__snapshots__",
16 | "!__tests__"
17 | ],
18 | "dependencies": {
19 | "@babel/runtime": "^7.13.9"
20 | },
21 | "publishConfig": {
22 | "access": "public"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/babel-plugin-include-styles/README.md:
--------------------------------------------------------------------------------
1 | # @design-systems/babel-plugin-include-styles
2 |
3 | This babel plugin will automatically include the styles for a scoped monorepo design system built with `@design-systems/cli`.
4 |
5 | ## Usage
6 |
7 | .babelrc:
8 |
9 | ```json
10 | {
11 | "plugins": [
12 | ["@design-systems/babel-plugin-include-styles", { "scope": "my-scope" }]
13 | ]
14 | }
15 | ```
16 |
17 | ## Example
18 |
19 | Input:
20 |
21 | ```js
22 | import Card from '@my-scope/card';
23 | ```
24 |
25 | Output:
26 |
27 | ```js
28 | import Card from '@my-scope/card';
29 | import '@my-scope/card/dist/main.css';
30 | ```
31 |
--------------------------------------------------------------------------------
/action.yml:
--------------------------------------------------------------------------------
1 | name: Format
2 | on:
3 | pull_request:
4 | branches: [master]
5 | jobs:
6 | format:
7 | runs-on: ubuntu-latest
8 | steps:
9 | - uses: actions/checkout@v2
10 | with:
11 | ref: ${{ github.head_ref }}
12 | - uses: actions/setup-node@v1
13 | with:
14 | node-version: '12.x'
15 | - name: Format
16 | run: |
17 | yarn install --frozen-lockfile
18 | yarn run format
19 | - name: Commit changes
20 | uses: stefanzweifel/git-auto-commit-action@v4.14.1
21 | with:
22 | commit_message: Apply formatting changes
23 | branch: ${{ github.head_ref }}
24 |
--------------------------------------------------------------------------------
/packages/utils/src/utils/displayName.ts:
--------------------------------------------------------------------------------
1 | export interface DisplayNamed {
2 | /** The name various dev tools should use to display the component */
3 | displayName?: string;
4 | }
5 |
6 | /**
7 | * Set a displayName on a component. This name is used in various dev tools.
8 | *
9 | * @param comp - The component to set the display name on
10 | * @param name - The display name for the component
11 | *
12 | * @example
13 | * displayName(Component, 'MyCoolComponent');
14 | */
15 | export const displayName =
8 |
15 | `;
16 |
17 | exports[`it should detect when an element is sticking 1`] = `
18 |
12 | not sticky
13 |
14 |
22 |
29 | `;
30 |
--------------------------------------------------------------------------------
/packages/utils/src/utils/createInstanceIfDefined.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | /**
4 | * Create an instance of the component only if the element is defined.
5 | *
6 | * @param node - The node to check if it's defined
7 | * @param Component - The component to wrap the node in
8 | *
9 | * @example
10 | * const child = 'Foo'
11 | * createInstanceIfDefined(child, Wrapper)
12 | * //
26 | sticky
27 |
28 |
12 | Click outside of me
13 |
14 | );
15 | };
16 |
17 | const { getByTestId } = render(
18 |
19 |
21 | );
22 |
23 | fireEvent.mouseUp(getByTestId('target'));
24 | expect(spy).toHaveBeenCalledWith(false);
25 | fireEvent.mouseUp(getByTestId('root'));
26 | expect(spy).toHaveBeenCalledWith(true);
27 | });
28 |
--------------------------------------------------------------------------------
/packages/svg-icon-builder/src/icon.template:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import makeClass from 'clsx';
3 | import { IconProps, IconSizes } from '../props';
4 |
5 | import styles from '../Icon.css';
6 |
7 | /**
8 | * {{iconName}}
9 | *
10 | * @param iconProps - SVG props
11 | */
12 | const {{iconName}} = (iconProps: IconProps) => {
13 | const { className, fill, size, inline, ...html } = iconProps;
14 | const iconSize = size ? IconSizes[size] : undefined;
15 |
16 | return (
17 |
29 | );
30 | };
31 |
32 | export default {{iconName}};
33 |
--------------------------------------------------------------------------------
/packages/cli-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/cli-utils",
3 | "version": "4.15.4",
4 | "description": "Utility functions for the @design-systems CLI",
5 | "main": "dist/index.js",
6 | "author": "Adam Dierkens Click outside of me
17 | * );
18 | * };
19 | */
20 | export const useConditionalAnimation = (
21 | defaultClass: string,
22 | animation: string,
23 | condition: boolean
24 | ) => {
25 | const entranceAnimation = React.useRef(defaultClass);
26 |
27 | React.useEffect(() => {
28 | if (condition) {
29 | entranceAnimation.current = animation;
30 | }
31 | }, [condition, animation]);
32 |
33 | return entranceAnimation.current;
34 | };
--------------------------------------------------------------------------------
/plugins/clean/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/clean",
3 | "version": "4.15.4",
4 | "description": "The clean command for @design-systems-cli",
5 | "main": "dist/index.js",
6 | "author": "Adam Dierkens
2 | 
3 |
4 |
5 | # Welcome
6 |
7 | `@design-systems/cli` is a command line application (CLI) for creating and working with design systems in [react](https://reactjs.org/).
8 | It takes care of the boring parts of setting up a monorepo based component library so you can do what you do best, create amazing components!
9 |
10 | ## Features
11 |
12 | 🏗 Scaffold components and entire design systems
13 |
14 | 🎯 Build your components for multiple outputs (`cjs` and `esm`)
15 |
16 | 💅🏼 Write styles with styled-components or css-modules
17 |
18 | 📖 Craft excellent components using [Storybook](https://storybook.js.org/)
19 |
20 | 🧸 Let component consumer try your components with [playroom](https://github.com/seek-oss/playroom)
21 |
22 | 👮🏼♀️ Testing and linting support
23 |
24 | 💻 Typescript supported out of the box
25 |
26 | ⚖️ Track the size of your components and debug the changes
27 |
--------------------------------------------------------------------------------
/packages/babel-plugin-replace-styles/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/babel-plugin-replace-styles",
3 | "version": "4.15.4",
4 | "description": "A babel plugin that replaces CSS imports for a scoped monorepo design system built with `@design-systems/cli`",
5 | "main": "./dist/index.js",
6 | "types": "./dist",
7 | "author": "Tyler Krupicka Tyler_Krupicka@intuit.com",
8 | "contributors": [
9 | "Tyler Krupicka Tyler_Krupicka@intuit.com"
10 | ],
11 | "license": "MIT",
12 | "publishConfig": {
13 | "access": "public"
14 | },
15 | "scripts": {
16 | "build": "tsc --build tsconfig.json",
17 | "test": "../cli/bin/ds.js test",
18 | "lint": "../cli/bin/ds.js lint"
19 | },
20 | "files": [
21 | "dist",
22 | "!*.test.*",
23 | "!__snapshots__",
24 | "!__tests__"
25 | ],
26 | "dependencies": {
27 | "tslib": "2.0.1"
28 | },
29 | "devDependencies": {
30 | "@babel/core": "^7.13.8",
31 | "@babel/types": "^7.13.0",
32 | "@types/node": "14.14.31"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/plugins/lint/src/interfaces.ts:
--------------------------------------------------------------------------------
1 | import stylelint from 'stylelint';
2 |
3 | export interface LintArgs {
4 | /** Attempt to fix the lint errors. */
5 | fix?: boolean;
6 | /** Do not use any cached results from previous runs. */
7 | noCache?: boolean;
8 | /** Post lint results as annotations to PR. Only in CI. */
9 | annotate?: boolean;
10 | /** An optional list of files to lint */
11 | files?: string[];
12 | /** An optional number of warnings to trigger nonzero exit code, default: 1 */
13 | maxWarnings?: number;
14 | }
15 |
16 | export type StylelintResult = stylelint.LinterResult & {
17 | /** Lines with needless disables */
18 | needlessDisables?: {
19 | /** The files the needless disables are found in */
20 | source: string;
21 | /** Ranges with needless disables */
22 | ranges: {
23 | /** Rule name */
24 | unusedRule: string;
25 | /** Line number */
26 | start: number;
27 | }[];
28 | }[];
29 | };
30 |
--------------------------------------------------------------------------------
/packages/hooks/src/__tests__/useReduceMotion.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook } from '@testing-library/react-hooks';
2 | import { useReducedMotion } from '../useReducedMotion';
3 |
4 | test("it detect if reduced motion isn't set", () => {
5 | // @ts-ignore
6 | jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
7 | matches: false,
8 | addListener: jest.fn(),
9 | removeListener: jest.fn()
10 | }));
11 |
12 | const { result } = renderHook(() => useReducedMotion());
13 | expect(result.current).toBe(false);
14 | });
15 |
16 | test('it detect if reduced motion is set', () => {
17 | const addListener = jest.fn();
18 | const removeListener = jest.fn();
19 | // @ts-ignore
20 | jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
21 | matches: true,
22 | addListener,
23 | removeListener
24 | }));
25 |
26 | const { result, unmount } = renderHook(() => useReducedMotion());
27 |
28 | expect(result.current).toBe(true);
29 | unmount();
30 | expect(removeListener).toHaveBeenCalled();
31 | });
--------------------------------------------------------------------------------
/packages/utils/src/utils/__tests__/__snapshots__/createSlots.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`it should gather all instances into one bucket 1`] = `
4 |
3 |
5 |
27 | `;
28 |
29 | exports[`it should order the elements correctly 1`] = `
30 |
6 | top
7 |
8 |
9 | I
10 |
11 |
12 | have
13 |
14 |
15 | lots
16 |
17 |
18 | of
19 |
20 |
21 | bodies.
22 |
23 |
24 | bottom
25 |
26 |
31 |
41 | `;
42 |
43 | exports[`it should slot props 1`] = `
44 |
32 | top
33 |
34 |
35 | middle
36 |
37 |
38 | bottom
39 |
40 |
51 |
61 | `;
62 |
--------------------------------------------------------------------------------
/plugins/bundle/src/command.ts:
--------------------------------------------------------------------------------
1 | import { CliCommand } from '@design-systems/plugin';
2 | import dedent from 'dedent';
3 |
4 | const command: CliCommand = {
5 | name: 'bundle',
6 | description: 'Creates a webpack bundle of your component',
7 | options: [
8 | {
9 | name: 'debug',
10 | alias: 'd',
11 | type: Boolean,
12 | description: 'Produce a non-minified "debug" bundle'
13 | }
14 | ],
15 | footer: [
16 | {
17 | header: 'Custom Babel Config',
18 | content:
19 | 'To customize your babel configuration, create a .babelrc at the root of your project'
20 | },
21 | {
22 | header: 'Custom webpack config',
23 | content: [
24 | dedent`
25 | To customize your webpack configuration, create webpack.config.js file at the root of the project.
26 |
27 | You'll want to extend the base config: \`@design-systems/bundle/webpack.config.base.js\` for things to function properly.
28 | `
29 | ]
30 | }
31 | ]
32 | };
33 |
34 | export default command;
35 |
--------------------------------------------------------------------------------
/packages/svg-icon-builder/src/logger.ts:
--------------------------------------------------------------------------------
1 | import { Signale, DefaultMethods, SignaleOptions } from 'signale';
2 |
3 | const options: SignaleOptions<
4 | DefaultMethods | 'skip' | 'trace' | 'debug' | 'done' | 'disable'
5 | > = {
6 | types: {
7 | debug: {
8 | badge: '🦄',
9 | color: 'magenta',
10 | label: 'debug'
11 | },
12 | skip: {
13 | badge: '🤷',
14 | color: 'yellow',
15 | label: 'Skipping...'
16 | },
17 | info: {
18 | badge: '💾',
19 | color: 'cyan',
20 | label: 'info'
21 | },
22 | complete: {
23 | badge: '🌟',
24 | color: 'green',
25 | label: 'complete'
26 | },
27 | await: {
28 | badge: '⏳',
29 | color: 'cyan',
30 | label: 'awaiting'
31 | },
32 | done: {
33 | badge: '🎉',
34 | color: 'greenBright',
35 | label: 'done'
36 | },
37 | error: {
38 | badge: '🚒',
39 | color: 'red',
40 | label: 'error'
41 | }
42 | }
43 | };
44 | const Logger = new Signale(options);
45 | export default Logger;
46 |
--------------------------------------------------------------------------------
/packages/hooks/src/__tests__/usePrefersHighContrast.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook } from '@testing-library/react-hooks';
2 | import { usePrefersHighContrast } from '../usePrefersHighContrast';
3 |
4 | test('it detect if prefers contrast more is set', () => {
5 | // @ts-ignore
6 | jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
7 | matches: true,
8 | addListener: jest.fn(),
9 | removeListener: jest.fn(),
10 | }));
11 |
12 | const { result } = renderHook(() => usePrefersHighContrast());
13 | expect(result.current).toBe(true);
14 | });
15 |
16 | test('it detect if prefers contrast less is set', () => {
17 | const addListener = jest.fn();
18 | const removeListener = jest.fn();
19 | // @ts-ignore
20 | jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
21 | matches: false,
22 | addListener,
23 | removeListener,
24 | }));
25 |
26 | const { result, unmount } = renderHook(() => usePrefersHighContrast());
27 |
28 | expect(result.current).toBe(false);
29 | unmount();
30 | expect(removeListener).toHaveBeenCalled();
31 | });
32 |
--------------------------------------------------------------------------------
/packages/hooks/src/__tests__/usePrefersLessContrast.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook } from '@testing-library/react-hooks';
2 | import { usePrefersLessContrast } from '../usePrefersLessContrast';
3 |
4 | test('it detect if prefers contrast more is set', () => {
5 | // @ts-ignore
6 | jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
7 | matches: false,
8 | addListener: jest.fn(),
9 | removeListener: jest.fn(),
10 | }));
11 |
12 | const { result } = renderHook(() => usePrefersLessContrast());
13 | expect(result.current).toBe(false);
14 | });
15 |
16 | test('it detect if prefers contrast less is set', () => {
17 | const addListener = jest.fn();
18 | const removeListener = jest.fn();
19 | // @ts-ignore
20 | jest.spyOn(window, 'matchMedia').mockImplementation(() => ({
21 | matches: true,
22 | addListener,
23 | removeListener,
24 | }));
25 |
26 | const { result, unmount } = renderHook(() => usePrefersLessContrast());
27 |
28 | expect(result.current).toBe(true);
29 | unmount();
30 | expect(removeListener).toHaveBeenCalled();
31 | });
32 |
--------------------------------------------------------------------------------
/plugins/proof/proof.config.base.js:
--------------------------------------------------------------------------------
1 | const BabelPlugin = require('@proof-ui/babel-plugin').default;
2 | const JunitPlugin = require('@proof-ui/junit-plugin').default;
3 | const SkipPlugin = require('@proof-ui/skip-tests-plugin').default;
4 | const A11yPlugin = require('@proof-ui/a11y-plugin').default;
5 | const AddAllPlugin = require('@proof-ui/add-all-plugin').default;
6 |
7 | const babelConfig = {
8 | extensions: ['.js', '.jsx', '.ts', '.tsx'],
9 | presets: [
10 | '@babel/preset-env',
11 | '@babel/preset-typescript',
12 | 'babel-preset-power-assert'
13 | ],
14 | plugins: [
15 | [
16 | '@babel/plugin-transform-runtime',
17 | {
18 | regenerator: true
19 | }
20 | ]
21 | ]
22 | };
23 |
24 | module.exports = {
25 | url: 'localhost:6006',
26 | logLevel: 'info',
27 | testMatch: './**/__automation__/**/*.proof.ts',
28 | plugins: [
29 | new AddAllPlugin(),
30 | new JunitPlugin(),
31 | new SkipPlugin(),
32 | new A11yPlugin({ config: {} }),
33 | new BabelPlugin({
34 | config: babelConfig
35 | })
36 | ]
37 | };
38 |
--------------------------------------------------------------------------------
/packages/babel-plugin-include-styles/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/babel-plugin-include-styles",
3 | "version": "4.15.4",
4 | "description": "A babel plugin that automatically includes the styles for a scoped monorepo design system built with `@design-systems/cli`",
5 | "main": "./dist/index.js",
6 | "types": "./dist",
7 | "author": "Andrew Lisowski lisowski54@gmail.com",
8 | "contributors": [
9 | "Andrew Lisowski lisowski54@gmail.com"
10 | ],
11 | "license": "MIT",
12 | "publishConfig": {
13 | "access": "public"
14 | },
15 | "scripts": {
16 | "build": "tsc --build tsconfig.json",
17 | "test": "../cli/bin/ds.js test",
18 | "lint": "../cli/bin/ds.js lint"
19 | },
20 | "files": [
21 | "dist",
22 | "!*.test.*",
23 | "!__snapshots__",
24 | "!__tests__"
25 | ],
26 | "dependencies": {
27 | "@babel/traverse": "^7.13.0",
28 | "find-up": "5.0.0",
29 | "tslib": "2.0.1"
30 | },
31 | "devDependencies": {
32 | "@babel/core": "^7.13.8",
33 | "@babel/types": "^7.13.0",
34 | "@types/node": "14.14.31"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/cli-utils/src/utils/monorepo-name.ts:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 |
4 | import getMonorepoRoot from './get-monorepo-root';
5 |
6 | const DEFAULT_NAME = 'monorepo';
7 |
8 | /** Determine if the monorepo name contains a scope. */
9 | function getScope(pkgName: string): string {
10 | const match = pkgName.match(/@([\S]+)\//);
11 | if (!match) {
12 | return pkgName;
13 | }
14 |
15 | return match[1];
16 | }
17 |
18 | /** Determine the monorepo's name. */
19 | const monorepoName = () => {
20 | try {
21 | const monorepoRoot = getMonorepoRoot();
22 |
23 | if (!monorepoRoot) {
24 | return DEFAULT_NAME;
25 | }
26 |
27 | const pkgName = JSON.parse(
28 | fs.readFileSync(path.join(monorepoRoot, 'package.json'), 'utf-8')
29 | ).name as string;
30 |
31 | let parsed = pkgName;
32 |
33 | if (pkgName && pkgName.startsWith('@')) {
34 | parsed = getScope(pkgName);
35 | }
36 |
37 | return parsed || DEFAULT_NAME;
38 | } catch (error) {
39 | return DEFAULT_NAME;
40 | }
41 | };
42 |
43 | export default monorepoName;
44 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2020 Intuit
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
14 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
15 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
16 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
17 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
18 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
19 | OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/plugins/update/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/update",
3 | "version": "4.15.4",
4 | "description": "The update command for @design-systems-cli",
5 | "main": "dist/index.js",
6 | "author": "Adam Dierkens
52 | top
53 |
54 |
55 | middle
56 |
57 |
58 | bottom
59 |
60 |
27 |
29 | );
30 |
31 | fireEvent.keyDown(getByTestId('root'), { key: 'Tab' });
32 | expect(queryByTestId('keyboardNav')).toBeDefined();
33 | });
34 |
--------------------------------------------------------------------------------
/packages/utils/src/utils/debounce.ts:
--------------------------------------------------------------------------------
1 | // https://davidwalsh.name/javascript-debounce-function
2 |
3 | type Args = any[];
4 | type Base = (...args: Args) => void;
5 |
6 | export const WINDOW_RESIZE_DELAY = 150;
7 |
8 | /**
9 | * Only call a function once every 'wait" seconds.
10 | *
11 | * @param func - the callback to debounce
12 | * @param wait - how long to wait until to run the callback
13 | * @param immediate - run the callback immediately
14 | *
15 | * @example
16 | * const onClick = debounce(
17 | * () => console.log('I was clicked'),
18 | * 1000
19 | * );
20 | */
21 | export function debounce(
22 | func: Base,
23 | wait = WINDOW_RESIZE_DELAY,
24 | immediate = false
25 | ): Base {
26 | let timeout: NodeJS.Timeout | null;
27 |
28 | return function x(...args: Args) {
29 | /** The function that actually runs the user's function. */
30 | const later = () => {
31 | timeout = null;
32 |
33 | if (!immediate) func(...args);
34 | };
35 |
36 | const callNow = immediate && !timeout;
37 |
38 | if (timeout) {
39 | clearTimeout(timeout);
40 | }
41 |
42 | timeout = setTimeout(later, wait);
43 |
44 | if (callNow) func(...args);
45 | };
46 | }
47 |
--------------------------------------------------------------------------------
/packages/core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.build.json",
3 | "include": ["src/**/*.ts", "../../typings/**/*"],
4 | "compilerOptions": {
5 | "outDir": "./dist",
6 | "rootDir": "./src",
7 | "composite": true
8 | },
9 | "references": [
10 | {
11 | "path": "../plugin"
12 | },
13 | {
14 | "path": "../cli-utils"
15 | },
16 | {
17 | "path": "../../plugins/build"
18 | },
19 | {
20 | "path": "../../plugins/bundle"
21 | },
22 | {
23 | "path": "../../plugins/clean"
24 | },
25 | {
26 | "path": "../../plugins/create-command"
27 | },
28 | {
29 | "path": "../../plugins/dev"
30 | },
31 | {
32 | "path": "../../plugins/lint"
33 | },
34 | {
35 | "path": "../../plugins/playroom"
36 | },
37 | {
38 | "path": "../../plugins/size"
39 | },
40 | {
41 | "path": "../../plugins/storybook"
42 | },
43 | {
44 | "path": "../../plugins/test"
45 | },
46 | {
47 | "path": "../../plugins/update"
48 | },
49 | {
50 | "path": "../../plugins/proof"
51 | },
52 | {
53 | "path": "../../plugins/bundle"
54 | }
55 | ]
56 | }
57 |
--------------------------------------------------------------------------------
/packages/plugin/src/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | MultiCommand as AppMultiCommand,
3 | Command as AppCommand,
4 | Option as AppOption
5 | } from 'command-line-application';
6 | import { Overwrite } from 'utility-types';
7 |
8 | /** An Option for the @design-systems/cli */
9 | export type Option = AppOption & {
10 | /** Whether the Option should be configurable via ds.config.json */
11 | config?: boolean;
12 | };
13 |
14 | interface Configurable {
15 | /** Options for the @design-systems/cli */
16 | options?: Option[];
17 | }
18 |
19 | /** An Command for the @design-systems/cli */
20 | export type Command = Overwrite{'Click outside of me'}
14 | * );
15 | * };
16 | */
17 | export const useClickOutside =
12 |
13 |
15 |
16 | );
17 |
18 | expect(getByTestId('portal')).toBeInTheDocument();
19 | expect(
20 | getByTestId('root').querySelector('[data-testid="portal"]')
21 | ).not.toBeInTheDocument();
22 | });
23 |
24 | test('it should work with hydrate', () => {
25 | const options = { hydrate: true };
26 | const { getByTestId } = render(
27 | Rendered elsewhere
14 |
28 |
29 |
31 |
,
32 | options
33 | );
34 | expect(getByTestId('portal')).toBeInTheDocument();
35 | });
36 |
37 | test('it should clean up', () => {
38 | const { queryByTestId, unmount } = render(
39 | Rendered elsewhere
30 |
40 |
41 |
43 |
44 | );
45 | expect(queryByTestId('portal')).toBeInTheDocument();
46 | unmount();
47 | expect(queryByTestId('portal')).toBeNull();
48 | });
49 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | Open source projects are “living.” Contributions in the form of issues and pull requests are welcomed and encouraged. When you contribute, you explicitly say you are part of the community and abide by its Code of Conduct.
2 |
3 | # The Code
4 |
5 | At Intuit, we foster a kind, respectful, harassment-free cooperative community. Our open source community works to:
6 |
7 | - Be kind and respectful;
8 | - Act as a global community;
9 | - Conduct ourselves professionally.
10 |
11 | As members of this community, we will not tolerate behaviors including, but not limited to:
12 |
13 | - Violent threats or language;
14 | - Discriminatory or derogatory jokes or language;
15 | - Public or private harassment of any kind;
16 | - Other conduct considered inappropriate in a professional setting.
17 |
18 | ## Reporting Concerns
19 |
20 | If you see someone violating the Code of Conduct please email TechOpenSource@intuit.com
21 |
22 | ## Scope
23 |
24 | This code of conduct applies to:
25 |
26 | All repos and communities for Intuit-managed projects, whether or not the text is included in a Intuit-managed project’s repository;
27 |
28 | Individuals or teams representing projects in official capacity, such as via official social media channels or at in-person meetups.
29 |
30 | ## Attribution
31 |
32 | This Code of Conduct is partly inspired by and based on those of Amazon, CocoaPods, GitHub, Microsoft, thoughtbot, and on the Contributor Covenant version 1.4.1.
33 |
--------------------------------------------------------------------------------
/packages/eslint-config/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/eslint-config",
3 | "version": "4.15.4",
4 | "description": "The eslint-config of the @design-systems CLI",
5 | "main": "index.js",
6 | "author": "Adam Dierkens Rendered elsewhere
42 | foo
;
8 | const instance = foo
;
15 | const instance = bar
;
16 |
17 | expect(isReactInstanceOf(instance, Test)).toBe(false);
18 | });
19 |
20 | test('it determine if the child is an instance - Class Component', () => {
21 | class Test extends React.Component {
22 | render() {
23 | return foo
;
24 | }
25 | }
26 |
27 | const instance = foo
;
36 | }
37 | }
38 |
39 | const instance = bar
;
40 |
41 | expect(isReactInstanceOf(instance, Test)).toBe(false);
42 | });
43 |
44 | test('handles non function', () => {
45 | const instance = bar
;
46 |
47 | // @ts-ignore
48 | expect(isReactInstanceOf(instance, {})).toBe(false);
49 | });
50 |
--------------------------------------------------------------------------------
/packages/babel-plugin-include-styles/src/__tests__/with-deps.test.ts:
--------------------------------------------------------------------------------
1 | import { transform } from './helpers/utils';
2 | import exists from '../exists';
3 | import resolvePackage from '../resolve-package';
4 |
5 | jest.mock('../exists.ts');
6 | jest.mock('../resolve-package.ts');
7 |
8 | jest.mock('@cgds/last/package.json', () => ({ name: '@cgds/last' }), {
9 | virtual: true
10 | });
11 |
12 | jest.mock(
13 | '@cgds/other/package.json',
14 | () => ({ name: '@cgds/other', dependencies: { '@cgds/last': '1.0.0' } }),
15 | { virtual: true }
16 | );
17 |
18 | jest.mock(
19 | '@cgds/test/package.json',
20 | () => ({ name: '@cgds/test', dependencies: { '@cgds/other': '1.0.0' } }),
21 | { virtual: true }
22 | );
23 |
24 | const resolveSpy = resolvePackage as jest.Mock;
25 |
26 | test("should add dependency's css", () => {
27 | // @ts-ignore
28 | exists.mockReturnValueOnce(true);
29 | resolveSpy.mockReturnValueOnce('@cgds/test/package.json');
30 | // @cgds/other doesn't have css itself, but import components that do have css
31 | // @ts-ignore
32 | exists.mockReturnValueOnce(false);
33 | resolveSpy.mockReturnValueOnce('@cgds/other/package.json');
34 | // @ts-ignore
35 | exists.mockReturnValueOnce(true);
36 | resolveSpy.mockReturnValueOnce('@cgds/last/package.json');
37 |
38 | const source = 'import Test from "@cgds/test";';
39 | expect(transform(source)).toBe(
40 | 'import Test from "@cgds/test";\nimport "@cgds/last/dist/main.css";\nimport "@cgds/test/dist/main.css";'
41 | );
42 | });
43 |
--------------------------------------------------------------------------------
/packages/hooks/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/hooks",
3 | "version": "4.15.4",
4 | "main": "./dist/cjs/index.js",
5 | "module": "./dist/esm/index.js",
6 | "types": "./dist",
7 | "repository": "https://github.com/intuit/design-systems-cli",
8 | "author": "Melinda Li contact.melindali@gmail.com",
9 | "sideEffects": false,
10 | "contributors": [
11 | "Tyler Krupicka Tyler_Krupicka@intuit.com"
12 | ],
13 | "license": "MIT",
14 | "publishConfig": {
15 | "access": "public"
16 | },
17 | "scripts": {
18 | "clean": "ds clean",
19 | "build": "ds build",
20 | "start": "ds build --watch",
21 | "test": "ds test",
22 | "lint": "ds lint",
23 | "size": "ds size",
24 | "docs": "ts-readme"
25 | },
26 | "files": [
27 | "dist",
28 | "src",
29 | "!*.test.*",
30 | "!__snapshots__",
31 | "!__tests__"
32 | ],
33 | "dependencies": {
34 | "@babel/runtime": "7.14.0",
35 | "@design-systems/cli": "link:../cli",
36 | "@design-systems/utils": "link:../utils",
37 | "@popperjs/core": "^2.9.0",
38 | "@testing-library/react": "11.2.7",
39 | "@testing-library/react-hooks": "7.0.0",
40 | "fromentries": "1.3.2",
41 | "react-fast-compare": "3.2.0",
42 | "resize-observer-polyfill": "1.5.1",
43 | "tslib": "^2.3.0",
44 | "use-isomorphic-layout-effect": "1.1.1"
45 | },
46 | "peerDependencies": {
47 | "react": ">= 16.8.6",
48 | "react-dom": ">= 16.8.6"
49 | },
50 | "devDependencies": {
51 | "ts-readme": "1.1.3"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/hooks/src/useLocale.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | /** Get the locale using navigator */
4 | const getLocale = (initial?: string) => {
5 | let modern: string | undefined;
6 | if (navigator.languages && navigator.languages.length) {
7 | [modern] = navigator.languages;
8 | }
9 |
10 | const old = navigator.language;
11 | return modern || old || initial || "en-US";
12 | };
13 |
14 | /**
15 | * This hook allows you to get the users Internationalization locale string.
16 | * If one is not found, it defaults to US English, or a provided default.
17 | *
18 | * @param initial - A default locale string, if you want something different than en-US.
19 | *
20 | * @example
21 | * const Example = () => {
22 | * const locale = useLocale();
23 | * const localeModifiedDefault = useLocale("en-GB");
24 | *
25 | * return (
26 | * The users locale is {locale}
27 | * );
28 | * };
29 | */
30 | export const useLocale = (initial?: string) => {
31 | const [locale, setLocale] = React.useState(getLocale(initial));
32 |
33 | /** Watch for locale changes */
34 | React.useEffect(() => {
35 | // https://developer.mozilla.org/en-US/docs/Web/API/Window/languagechange_event
36 | /** Set locale state */
37 | const languageListener = () => {
38 | setLocale(getLocale());
39 | };
40 |
41 | window.addEventListener("languagechange", languageListener);
42 |
43 | return () => {
44 | window.removeEventListener("languagechange", languageListener);
45 | };
46 | });
47 |
48 | return locale;
49 | };
50 |
--------------------------------------------------------------------------------
/packages/core/__tests__/plugins.test.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import { tryRequire, requirePlugin, getPlugins } from '../src/plugins';
3 |
4 | describe('tryRequire', () => {
5 | test("should not find module that doesn't exists", async () => {
6 | expect(tryRequire('foo-bar')).toStrictEqual({});
7 | });
8 |
9 | test('should find module that does exists', async () => {
10 | const plugin = tryRequire('@design-systems/test');
11 | expect(plugin).not.toStrictEqual({});
12 | expect(plugin).not.toBeUndefined();
13 | });
14 | });
15 |
16 | describe('requirePlugin', () => {
17 | test('should find official plugin', async () => {
18 | expect(requirePlugin('test')).not.toBeUndefined();
19 | });
20 |
21 | test('should find official plugin-command', async () => {
22 | expect(requirePlugin('create')).not.toBeUndefined();
23 | });
24 |
25 | test('should find plugin from path', async () => {
26 | expect(
27 | requirePlugin(path.join(__dirname, './test-plugin'))
28 | ).not.toBeUndefined();
29 | });
30 |
31 | test("should not find plugins that don't exist", async () => {
32 | expect(requirePlugin('foo-bar')).toBeUndefined();
33 | });
34 | });
35 |
36 | describe('getPlugins', () => {
37 | test('should work with no plugins in config', async () => {
38 | expect(getPlugins()).toHaveLength(0);
39 | });
40 |
41 | test('should get plugins from config', async () => {
42 | const plugins = getPlugins({
43 | plugins: [path.join(__dirname, './test-plugin')]
44 | });
45 | expect(Object.keys(plugins[0][1]).length > 0).toBe(true);
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/packages/core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/core",
3 | "version": "4.15.4",
4 | "description": "The core structure of the @design-systems CLI",
5 | "author": "Adam Dierkens
2 | 
3 |
4 |
5 |
6 |
8 |
9 | [Read the full documentation](https://intuit.github.io/design-systems-cli/#/welcome)
10 |
11 | ```
12 | ds
13 |
14 | A toolbox for creating design systems
15 |
16 | Synopsis
17 |
18 | $ ds
3 |
4 |
5 |
6 | A CLI toolbox for creating design systems.
7 |
17 | {isSticky ? 'sticky' : 'not sticky'}
18 |
19 | );
20 | };
21 |
22 | const { container } = render(
23 |
24 |
26 | );
27 |
28 | act(() => {
29 | jest.runOnlyPendingTimers();
30 | });
31 |
32 | expect(container.firstChild).toMatchSnapshot();
33 | });
34 |
35 | test('it should detect when an element is sticking', () => {
36 | jest.useFakeTimers();
37 | const Test = () => {
38 | const ref = React.useRef
47 | {isSticky ? 'sticky' : 'not sticky'}
48 |
49 | );
50 | };
51 |
52 | const { container } = render(
53 |
54 |
56 | );
57 |
58 | act(() => {
59 | jest.runOnlyPendingTimers();
60 | });
61 |
62 | expect(container.firstChild).toMatchSnapshot();
63 | });
64 |
--------------------------------------------------------------------------------
/packages/hooks/src/useMatchMedia.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | /**
4 | * Determine if the user has media preferences enabled in their browser.
5 | *
6 | * @example
7 | * const Example = () => {
8 | * const isReducedMotion = useMatchMedia('(prefers-reduced-motion: reduce)');
9 | *
10 | * return (
11 | * Content
12 | * );
13 | * };
14 | */
15 | export const useMatchMedia = (selector: string) => {
16 | const [mediaState, setMediaState] = React.useState(
17 | window ? window.matchMedia(selector).matches : false
18 | );
19 |
20 | React.useEffect(() => {
21 | if (!window) {
22 | return;
23 | }
24 |
25 | const mediaQuery = window.matchMedia(selector);
26 |
27 | /** Ran when the user changes this setting. */
28 | const changeMatchMedia = () => setMediaState(!mediaState);
29 |
30 | /** Use newer method if is available, else fall back to deprecated method */
31 | if (typeof mediaQuery.addEventListener === 'function') {
32 | /** This method listens when the user toggles the reduced motion option */
33 | /** https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener */
34 | mediaQuery.addEventListener('change', changeMatchMedia);
35 | } else {
36 | mediaQuery.addListener(changeMatchMedia);
37 | }
38 |
39 | return () => {
40 | if (typeof mediaQuery.removeEventListener === 'function') {
41 | mediaQuery.removeEventListener('change', changeMatchMedia);
42 | } else {
43 | mediaQuery.removeListener(changeMatchMedia);
44 | }
45 | };
46 | }, [mediaState, selector]);
47 |
48 | return mediaState;
49 | };
50 |
--------------------------------------------------------------------------------
/packages/utils/src/utils/logger.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
3 | type logFunction = (message?: any, ...optionalParams: any[]) => void;
4 |
5 | /** Noop version of a logging function */
6 | // eslint-disable-next-line
7 | const noop = (message?: any, ...optionalParams: any[]) => {};
8 |
9 | /** Subset of console.log calls that are removed outside of development */
10 | interface LoggerInterface {
11 | /**
12 | * The `console.debug()` function is an alias for {@link console.log()}.
13 | */
14 | debug: logFunction;
15 | /**
16 | * Prints to `stderr` with newline.
17 | */
18 | error: logFunction;
19 | /**
20 | * The {@link console.info()} function is an alias for {@link console.log()}.
21 | */
22 | info: logFunction;
23 | /**
24 | * Prints to `stdout` with newline.
25 | */
26 | log: logFunction;
27 | /**
28 | * The {@link console.warn()} function is an alias for {@link console.error()}.
29 | */
30 | warn: logFunction;
31 | }
32 |
33 | /** Logger which no-ops in production */
34 | const noopLogger: LoggerInterface = {
35 | debug: noop,
36 | error: noop,
37 | info: noop,
38 | log: noop,
39 | warn: noop
40 | };
41 |
42 | /** Logger which returns console in development mode */
43 | const consoleLogger: LoggerInterface = {
44 | debug: console.debug,
45 | error: console.error,
46 | info: console.info,
47 | log: console.log,
48 | warn: console.warn
49 | };
50 |
51 | /**
52 | * Logger
53 | * A logging utility which maps to console in development but
54 | * is a no-op in production.
55 | */
56 | export const logger =
57 | process.env.NODE_ENV === 'development' ? consoleLogger : noopLogger;
58 |
--------------------------------------------------------------------------------
/packages/utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/utils",
3 | "version": "4.15.4",
4 | "description": "Helper utilities for developing react components",
5 | "main": "./dist/cjs/index.js",
6 | "module": "./dist/esm/index.js",
7 | "types": "./dist",
8 | "sideEffects": false,
9 | "repository": "https://github.com/intuit/design-systems-cli.git",
10 | "author": "Andrew Lisowski lisowski54@gmail.com",
11 | "contributors": [
12 | "Andrew Lisowski lisowski54@gmail.com"
13 | ],
14 | "license": "MIT",
15 | "scripts": {
16 | "build": "ds build",
17 | "test": "ds test",
18 | "lint": "ds lint",
19 | "docs": "ts-readme"
20 | },
21 | "files": [
22 | "dist",
23 | "src",
24 | "!*.test.*",
25 | "!__snapshots__",
26 | "!__tests__"
27 | ],
28 | "dependencies": {
29 | "@babel/runtime": "^7.13.9",
30 | "clsx": "^1.0.4",
31 | "focus-lock": "^0.8.0",
32 | "react-merge-refs": "^1.0.0"
33 | },
34 | "peerDependencies": {
35 | "@types/react": "*",
36 | "react": ">= 16.8.6",
37 | "react-dom": ">= 16.8.6"
38 | },
39 | "publishConfig": {
40 | "access": "public"
41 | },
42 | "devDependencies": {
43 | "@design-systems/cli": "link:../cli",
44 | "@testing-library/jest-dom": "4.0.0",
45 | "@testing-library/react": "8.0.7",
46 | "@testing-library/react-hooks": "1.1.0",
47 | "@types/classnames": "2.2.11",
48 | "@types/react-dom": "16.9.0",
49 | "auto": "10.36.5",
50 | "husky": "3.0.1",
51 | "lint-staged": "9.2.1",
52 | "prettier": "1.19.1",
53 | "react": "16.8.6",
54 | "react-dom": "16.8.6",
55 | "react-test-renderer": "16.8.6",
56 | "ts-readme": "1.1.3",
57 | "typescript": "4.2.2"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/packages/create/scripts/update-templates.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const { execSync } = require('child_process');
6 |
7 | const templatesPath = path.join(__dirname, '../src/templates.json');
8 | const currentTemplates = JSON.parse(fs.readFileSync(templatesPath, 'utf8'));
9 |
10 | const sources = {
11 | system: path.join(__dirname, '../../../../monorepo-template'),
12 | component: path.join(__dirname, '../../../../component-template'),
13 | package: path.join(__dirname, '../../../../package-template')
14 | };
15 |
16 | /** Get the SHA for the HEAD of a branch */
17 | function getSha(branch) {
18 | return execSync(`git rev-parse ${branch}`)
19 | .toString()
20 | .trim();
21 | }
22 |
23 | /** Go through each template and update their sha if needed */
24 | Object.entries(currentTemplates).forEach(([type, templates]) => {
25 | // eslint-disable-next-line no-console
26 | console.log('TYPE:', type);
27 | process.chdir(sources[type]);
28 |
29 | templates.forEach(template => {
30 | const branch = template.name === 'ts' ? 'master' : template.name;
31 | const sha = getSha(branch);
32 |
33 | // The templates.json is out of date with the SHAs on the system
34 | if (template.sha !== sha) {
35 | // eslint-disable-next-line no-console
36 | console.log(
37 | `Template "${template.name}" is out of date! Updating to: ${sha}`
38 | );
39 | // eslint-disable-next-line no-console
40 | console.log({ old: template.sha, new: sha });
41 |
42 | // eslint-disable-next-line no-param-reassign
43 | template.sha = sha;
44 | }
45 | });
46 | });
47 |
48 | fs.writeFileSync(templatesPath, JSON.stringify(currentTemplates, null, 2));
49 |
--------------------------------------------------------------------------------
/packages/docs/src/deploy.md:
--------------------------------------------------------------------------------
1 | # Deploying Your Project
2 |
3 | `@design-systems/cli` can and should have it's [storybook](https://storybook.js.org/) and [playroom](https://github.com/seek-oss/playroom) deployed in some capacity.
4 |
5 | ## 1. Build
6 |
7 | First you must build both tools.
8 |
9 | ```sh
10 | yarn build:storybook && yarn build:playroom
11 | ```
12 |
13 | Both of these command will output build assets to the `out` directory at the root of the project.
14 |
15 | ```txt
16 | out/
17 | playroom/
18 | index.html <- The start page for your playroom
19 | ...
20 | index.html <- The start page for your storybook
21 | ...
22 | ```
23 |
24 | ## 2. Serve
25 |
26 | After you have built your files you can push this folder to any static website serving solution. This could be anything like [netlify](https://www.netlify.com/), [heroku](https://www.heroku.com/), [AWS S3](https://aws.amazon.com/s3/), etc.
27 |
28 | The simplest solution though is to just use [GitHub Pages](https://pages.github.com/).
29 |
30 | The following script uses [push-dir](https://www.npmjs.com/package/push-dir) to deploy the built storybook + playroom to our project's `gh-pages` branch.
31 |
32 | ```json
33 | {
34 | "scripts": {
35 | "deploy": "push-dir --cleanup --dir=out --branch=gh-pages"
36 | }
37 | }
38 | ```
39 |
40 | ## 3. Consume
41 |
42 | Once you have done all of the above your storybook will be deploy to the root of your URL and the playroom will be deployed under the `/playroom` path.
43 |
44 | For example, if we were to deploy a project to `https://github.com/pages/design-systems/test-repo`:
45 |
46 | - https://github.com/pages/design-systems/test-repo - serves the storybook
47 | - https://github.com/pages/design-systems/test-repo/playroom - serves the playroom
48 |
--------------------------------------------------------------------------------
/packages/svg-icon-builder/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/svg-icon-builder",
3 | "version": "4.15.4",
4 | "main": "./dist/cjs/index.js",
5 | "description": "A simple CLI for generating icon components from SVGs.",
6 | "bin": {
7 | "icon-build": "./bin/icon.js"
8 | },
9 | "types": "./dist",
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/intuit/design-systems-cli.git"
13 | },
14 | "author": "Tyler Krupicka github@tylerkrupicka.com",
15 | "contributors": [
16 | "Tyler Krupicka github@tylerkrupicka.com",
17 | "Andrew Lisowski lisowski54@gmail.com"
18 | ],
19 | "license": "MIT",
20 | "publishConfig": {
21 | "access": "public"
22 | },
23 | "scripts": {
24 | "clean": "ds clean",
25 | "build": "ds build",
26 | "start": "ds build --watch",
27 | "test": "yarn build && ./bin/icon.js --svg ./svg --out output --overwrite",
28 | "test:colored": "yarn build && ./bin/icon.js --svg ./svg --out output --no-strip-color --overwrite",
29 | "help": "./bin/icon.js -h",
30 | "lint": "ds lint"
31 | },
32 | "files": [
33 | "bin",
34 | "dist",
35 | "!*.test.*",
36 | "!__snapshots__",
37 | "!__tests__"
38 | ],
39 | "dependencies": {
40 | "change-case": "3.1.0",
41 | "command-line-application": "0.10.1",
42 | "endent": "2.1.0",
43 | "fs-extra": "9.0.1",
44 | "maxstache": "1.0.7",
45 | "signale": "1.4.0",
46 | "svgo": "1.3.2"
47 | },
48 | "devDependencies": {
49 | "@auto-it/jira": "10.36.5",
50 | "@auto-it/slack": "10.36.5",
51 | "@design-systems/cli": "link:../cli",
52 | "@types/change-case": "2.3.1",
53 | "@types/fs-extra": "9.0.1",
54 | "@types/signale": "1.4.1",
55 | "@types/svgo": "1.3.3"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["group:monorepos", "packages:postcss", "schedule:earlyMondays"],
3 | "masterIssue": true,
4 | "automerge": false,
5 | "prConcurrentLimit": 3,
6 | "separateMajorMinor": false,
7 | "patch": {
8 | "labels": ["dependency-update"]
9 | },
10 | "minor": {
11 | "labels": ["dependency-update"]
12 | },
13 | "major": {
14 | "labels": ["dependency-update"]
15 | },
16 | "digest": {
17 | "labels": ["dependency-update"]
18 | },
19 | "packageRules": [
20 | {
21 | "matchPackagePatterns": ["@storybook"],
22 | "groupName": "storybook",
23 | "rangeStrategy": "bump"
24 | },
25 | {
26 | "matchPackagePatterns": ["@babel", "babel"],
27 | "groupName": "babel",
28 | "rangeStrategy": "bump"
29 | },
30 | {
31 | "packageNames": ["autoprefixer", "icss-utils"],
32 | "matchPackagePatterns": ["^postcss"],
33 | "groupName": "postcss",
34 | "rangeStrategy": "replace"
35 | },
36 | {
37 | "packageNames": ["@testing-library"],
38 | "matchPackagePatterns": ["^@testing-library"],
39 | "groupName": "testing-library",
40 | "rangeStrategy": "replace"
41 | },
42 | {
43 | "matchPackagePatterns": ["@proof-ui"],
44 | "groupName": "proof"
45 | },
46 | {
47 | "matchPackagePatterns": ["@reach"],
48 | "groupName": "reach"
49 | },
50 | {
51 | "matchPackagePatterns": ["auto", "@auto-it"],
52 | "groupName": "auto",
53 | "excludePackageNames": ["autoprefixer"]
54 | },
55 | {
56 | "extends": "packages:linters",
57 | "matchPackagePatterns": ["^eslint"],
58 | "groupName": "linters"
59 | },
60 | {
61 | "matchPackagePatterns": ["stylelint"],
62 | "groupName": "stylelint"
63 | }
64 | ]
65 | }
66 |
--------------------------------------------------------------------------------
/plugins/size/src/utils/BuildUtils.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from 'child_process';
2 | import os from 'os';
3 | import path from 'path';
4 | import { getMonorepoRoot, createLogger } from '@design-systems/cli-utils';
5 |
6 | const logger = createLogger({ scope: 'size' });
7 |
8 | /** Builds the specified commit */
9 | export function buildPackages(args: {
10 | /** Merge base to run build */
11 | mergeBase: string
12 | /** Build command for merge base */
13 | buildCommand: string
14 | }) {
15 | const id = Math.random().toString(36).substring(7);
16 | const dir = path.join(os.tmpdir(), `commit-build-${id}`);
17 | const root = getMonorepoRoot();
18 |
19 | const commit = execSync(`git merge-base HEAD ${args.mergeBase}`, { cwd: root }).toString().trim();
20 | execSync(`git clone . ${dir}`, { cwd: root, stdio: 'ignore' });
21 | execSync(`git checkout ${commit}`, { cwd: dir, stdio: 'ignore' });
22 |
23 | logger.info(`Installing dependencies for commit: ${commit} ...`);
24 | execSync('yarn', { cwd: dir });
25 |
26 | logger.info(`Running command "${args.buildCommand}" for commit: ${commit} ...`);
27 | execSync(args.buildCommand, {
28 | cwd: dir,
29 | stdio: 'inherit'
30 | });
31 |
32 | return dir;
33 | }
34 |
35 | /** Get path to local built master package */
36 | export function getLocalPackage(
37 | /** Package name */
38 | name: string,
39 | /** Path to local built master */
40 | local: string
41 | ) {
42 | const packages = execSync(`lerna list --ndjson`)
43 | .toString()
44 | .trim()
45 | .split('\n');
46 |
47 | const pkg = packages
48 | .map((p: string) => JSON.parse(p))
49 | .find((p) => p.name === name);
50 |
51 | if (!pkg) {
52 | throw new Error(`Package not found: ${name}`);
53 | }
54 |
55 | return path.join(local, path.relative(getMonorepoRoot(), pkg.location));
56 | }
57 |
--------------------------------------------------------------------------------
/plugins/lint/src/utils/helperUtils.ts:
--------------------------------------------------------------------------------
1 | import getPackages from 'get-monorepo-packages';
2 | import fs from 'fs';
3 | import stylelint from 'stylelint';
4 | import path from 'path';
5 | import {
6 | getMonorepoRoot
7 | } from '@design-systems/cli-utils';
8 | import { LintArgs, StylelintResult } from '../interfaces';
9 |
10 | /** Get the folders that contain packages in the monorepo. */
11 | function getPackageFolders() {
12 | return [
13 | ...getPackages('.').reduce((all, p) => {
14 | all.add(p.location.split('/')[0]);
15 | return all;
16 | }, new Set {
59 | if (
60 | e.relatedTarget &&
61 | (e.relatedTarget as HTMLElement).getAttribute('data-focus-guard')
62 | ) {
63 | trapFocus();
64 | }
65 |
66 | onBlur(e);
67 | }}
68 | />
69 | {
24 | private logger = createLogger({ scope: 'test' });
25 |
26 | async run(args: TestArgs) {
27 | process.env.NODE_ENV = 'test';
28 |
29 | if (process.env.CLI_APP_ID && process.env.CLI_PRIVATE_KEY) {
30 | process.env.JEST_APP_ID =
31 | process.env.JEST_APP_ID || process.env.CLI_APP_ID;
32 | process.env.JEST_PRIVATE_KEY =
33 | process.env.JEST_PRIVATE_KEY || process.env.CLI_PRIVATE_KEY;
34 | }
35 |
36 | const annotate = Boolean(
37 | args.annotate || (process.env.CLI_APP_ID && process.env.CLI_PRIVATE_KEY)
38 | );
39 |
40 | try {
41 | const { results } = await runCLI(
42 | {
43 | _: [],
44 | $0: 'jest',
45 | updateSnapshot: args.update,
46 | watch: args.watch,
47 | testPathPattern: args.files,
48 | ci: env().isCi,
49 | runInBand: args.runInBand
50 | },
51 | [process.cwd()]
52 | );
53 |
54 | if (annotate) {
55 | await createJestAnnotations(results);
56 | }
57 |
58 | if (!results.success) {
59 | process.exit(1);
60 | }
61 | } catch (e) {
62 | this.logger.error(e);
63 | process.exit(1);
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/packages/create/src/init.ts:
--------------------------------------------------------------------------------
1 | import { app } from 'command-line-application';
2 | import dedent from 'dedent';
3 | import {
4 | setLogLevel,
5 | getMonorepoRoot,
6 | createLogger
7 | } from '@design-systems/cli-utils';
8 | import { CliCommand } from '@design-systems/plugin';
9 |
10 | import run, { CreateComponentArgs, CreateSystemArgs } from './run';
11 | import { system } from './cli';
12 |
13 | const systemStandalone: CliCommand = {
14 | ...system,
15 | examples: [
16 | 'npm init @design-systems',
17 | 'npm init @design-systems --name my-design-system --repo hipstersmoothie/material'
18 | ],
19 | options: [
20 | ...(system.options || []),
21 | {
22 | name: 'verbose',
23 | alias: 'v',
24 | description: 'Output the debug logs. Debug: -v Trace: -vv',
25 | type: Boolean,
26 | multiple: true
27 | }
28 | ]
29 | };
30 |
31 | const [, , ...processArgs] = process.argv;
32 |
33 | const args = app(systemStandalone, { argv: processArgs });
34 | const logger = createLogger({ scope: 'create' });
35 |
36 | if (args) {
37 | // eslint-disable-next-line no-underscore-dangle
38 | args._command = 'system';
39 | const verbosity = args.verbose ? args.verbose.length : 0;
40 | setLogLevel(
41 | (verbosity === 1 && 'debug') || (verbosity === 2 && 'trace') || 'info'
42 | );
43 |
44 | const monorepoRoot = getMonorepoRoot();
45 |
46 | if (monorepoRoot && process.cwd().includes(monorepoRoot)) {
47 | logger.error(dedent`Already in a @design-systems monorepo!
48 |
49 | You seem to be trying to create a new @design-systems monorepo from within another.
50 |
51 | This probably isn\'t what you want. Common situations:
52 |
53 | 1. Ran \`yarn run create\` from a sub-package
54 | => Change directories to the root of the project and re-run command
55 |
56 | 2. Ran \`npm init @design-systems\` within a design system
57 | => Change directories to a folder that isn't in a monorepo (no lerna.json in parent folders)
58 | `);
59 | } else {
60 | run(args as (CreateComponentArgs | CreateSystemArgs));
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/plugins/storybook/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/storybook",
3 | "version": "4.15.4",
4 | "description": "The storybook command for @design-systems-cli",
5 | "main": "dist/index.js",
6 | "author": "Adam Dierkens ",
7 | "license": "MIT",
8 | "scripts": {
9 | "build": "tsc --build"
10 | },
11 | "files": [
12 | "dist",
13 | ".storybook",
14 | "preset.js",
15 | "preview.js"
16 | ],
17 | "repository": {
18 | "type": "git",
19 | "url": "https://github.com/intuit/design-systems-cli.git"
20 | },
21 | "publishConfig": {
22 | "access": "public"
23 | },
24 | "dependencies": {
25 | "@alisowski/storybook-addon-notes": "^6.0.1",
26 | "@babel/core": "^7.13.8",
27 | "@design-systems/build": "link:../build",
28 | "@design-systems/cli-utils": "link:../../packages/cli-utils",
29 | "@design-systems/plugin": "link:../../packages/plugin",
30 | "@storybook/addon-a11y": "^6.2.9",
31 | "@storybook/addon-actions": "^6.2.9",
32 | "@storybook/addon-backgrounds": "^6.2.9",
33 | "@storybook/addon-knobs": "^6.2.9",
34 | "@storybook/addon-viewport": "^6.2.9",
35 | "@storybook/addons": "^6.2.9",
36 | "@storybook/cli": "^6.2.9",
37 | "@storybook/components": "^6.2.9",
38 | "@storybook/react": "^6.2.9",
39 | "@storybook/theming": "^6.2.9",
40 | "babel-loader": "8.1.0",
41 | "core-js": "3.6.5",
42 | "dedent": "0.7.0",
43 | "fast-glob": "3.2.5",
44 | "get-port": "5.1.1",
45 | "github-url-to-object": "4.0.4",
46 | "source-map-loader": "1.1.0",
47 | "story2sketch": "1.7.0",
48 | "storybook-addon-jsx": "^7.3.0",
49 | "storybook-addon-react-docgen": "^1.2.44",
50 | "storybook-addon-sketch": "^0.2.0",
51 | "storybook-dark-mode": "^1.0.0",
52 | "tslib": "2.0.1",
53 | "webpack": "4.44.1",
54 | "webpack-filter-warnings-plugin": "1.2.1"
55 | },
56 | "peerDependencies": {
57 | "react": ">= 16",
58 | "react-dom": ">= 16"
59 | },
60 | "devDependencies": {
61 | "@types/dedent": "0.7.0",
62 | "react": "16.13.1",
63 | "react-dom": "16.13.1"
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/plugins/size/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/size",
3 | "version": "4.15.4",
4 | "description": "The size command for @design-systems-cli",
5 | "main": "dist/index.js",
6 | "author": "Adam Dierkens ",
7 | "license": "MIT",
8 | "scripts": {
9 | "build": "tsc --build"
10 | },
11 | "files": [
12 | "dist"
13 | ],
14 | "publishConfig": {
15 | "access": "public"
16 | },
17 | "repository": {
18 | "type": "git",
19 | "url": "https://github.com/intuit/design-systems-cli.git"
20 | },
21 | "dependencies": {
22 | "@design-systems/cli-utils": "link:../../packages/cli-utils",
23 | "@design-systems/plugin": "link:../../packages/plugin",
24 | "@royriojas/get-exports-from-file": "https://github.com/hipstersmoothie/get-exports-from-file#all",
25 | "change-case": "4.1.1",
26 | "chokidar": "3.4.2",
27 | "colorette": "1.2.2",
28 | "commently": "6.18.3",
29 | "cross-spawn": "7.0.3",
30 | "css-loader": "3.5.3",
31 | "diff2html": "3.3.0",
32 | "file-size": "1.0.0",
33 | "fs-extra": "9.0.1",
34 | "get-monorepo-packages": "1.2.0",
35 | "gitlog": "4.0.0",
36 | "lodash.chunk": "4.2.0",
37 | "markdown-table": "2.0.0",
38 | "mini-css-extract-plugin": "0.11.0",
39 | "opn": "5.5.0",
40 | "optimize-css-assets-webpack-plugin": "5.0.4",
41 | "signale": "1.4.0",
42 | "table": "6.0.7",
43 | "terser-webpack-plugin": "4.1.0",
44 | "tslib": "2.0.1",
45 | "webpack": "4.44.1",
46 | "webpack-bundle-analyzer": "3.8.0",
47 | "webpack-inject-plugin": "1.5.5",
48 | "webpack-sources": "1.4.3"
49 | },
50 | "devDependencies": {
51 | "@types/fs-extra": "9.0.1",
52 | "@types/hogan.js": "3.0.0",
53 | "@types/lodash.chunk": "4.2.6",
54 | "@types/markdown-table": "2.0.0",
55 | "@types/mini-css-extract-plugin": "0.9.1",
56 | "@types/opn": "5.1.0",
57 | "@types/optimize-css-assets-webpack-plugin": "5.0.1",
58 | "@types/table": "6.0.0",
59 | "@types/terser-webpack-plugin": "4.1.0",
60 | "@types/webpack-bundle-analyzer": "3.8.0",
61 | "@types/webpack-sources": "1.4.2"
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/packages/create/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/create",
3 | "version": "4.15.4",
4 | "description": "Initialize a @design-systems/cli monorepo",
5 | "main": "dist/index.js",
6 | "bin": "dist/bundle.js",
7 | "author": "Andrew Lisowski ",
8 | "license": "MIT",
9 | "publishConfig": {
10 | "access": "public"
11 | },
12 | "scripts": {
13 | "build": "yarn build:typescript && yarn bundle",
14 | "build:typescript": "tsc --build",
15 | "bundle": "webpack && chmod +x ./dist/bundle.js",
16 | "start": "yarn build:typescript --watch",
17 | "templates:pick": "node ./scripts/cherry-pick-master",
18 | "templates:update": "node ./scripts/update-templates"
19 | },
20 | "files": [
21 | "dist",
22 | "templates"
23 | ],
24 | "repository": {
25 | "type": "git",
26 | "url": "https://github.com/intuit/design-systems-cli.git"
27 | },
28 | "peerDependencies": {
29 | "@design-systems/cli-utils": ">= 2.x",
30 | "@design-systems/plugin": ">= 2.x",
31 | "change-case": ">=3.x",
32 | "cli-spinners": ">=2.x",
33 | "colorette": ">=1.x",
34 | "command-line-application": ">=0.x",
35 | "copy-template-dir": ">=1.x",
36 | "dedent": ">=0.x",
37 | "degit": "https://github.com/hipstersmoothie/degit.git#private-release",
38 | "fs-extra": ">=8.x",
39 | "inquirer": ">=6.x",
40 | "progress-estimator": ">=0.x",
41 | "terminal-link": ">=1.x",
42 | "title-case": ">=3.x"
43 | },
44 | "devDependencies": {
45 | "@design-systems/cli-utils": "link:../cli-utils",
46 | "@types/dedent": "0.7.0",
47 | "@types/fs-extra": "9.0.1",
48 | "@types/inquirer": "7.3.1",
49 | "change-case": "4.1.1",
50 | "cli-spinners": "2.5.0",
51 | "colorette": "1.2.2",
52 | "command-line-application": "0.10.1",
53 | "copy-template-dir": "1.4.0",
54 | "dedent": "0.7.0",
55 | "degit": "https://github.com/hipstersmoothie/degit.git#private-release",
56 | "fs-extra": "9.0.1",
57 | "inquirer": "7.3.3",
58 | "progress-estimator": "0.3.0",
59 | "terminal-link": "2.1.1",
60 | "title-case": "3.0.3",
61 | "ts-loader": "8.0.17",
62 | "tslib": "2.0.1",
63 | "webpack": "4.44.1",
64 | "webpack-cli": "3.3.12"
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/plugins/build/src/configs/postcss.config.ts:
--------------------------------------------------------------------------------
1 | import url from 'postcss-url';
2 | import nested from 'postcss-nested';
3 | import autoprefixer from 'autoprefixer';
4 | import hexRGBA from 'postcss-hexrgba';
5 | import modules from 'postcss-modules';
6 | import fs from 'fs-extra';
7 | import crypto from 'crypto';
8 | import path from 'path';
9 | import pkgUp from 'pkg-up';
10 |
11 | interface PostCSSContext {
12 | env?: string;
13 | outDir: string;
14 | moduleHash?: string;
15 | }
16 |
17 | module.exports = function (ctx: PostCSSContext = { outDir: 'dist' }) {
18 | return {
19 | plugins: [
20 | nested,
21 | modules({
22 | localsConvention: 'camelCase',
23 | generateScopedName(name: string, filename: string, css: string) {
24 | const base = path.basename(filename, '.css');
25 | const pkgJson = pkgUp.sync({ cwd: path.dirname(filename) });
26 |
27 | if (ctx.env !== 'module') {
28 | return name;
29 | }
30 |
31 | const hash = crypto
32 | .createHash('md5')
33 | .update(base)
34 | .update(name)
35 | .update(css);
36 |
37 | if (ctx.moduleHash) {
38 | hash.update(ctx.moduleHash);
39 | }
40 |
41 | if (pkgJson) {
42 | try {
43 | const pkgJsonContent = fs.readFileSync(pkgJson, 'utf-8');
44 | hash.update(pkgJsonContent);
45 | } catch (e) {}
46 | }
47 |
48 | const hashString = hash.digest('hex');
49 | return `${base}-${name}-${hashString.substr(hashString.length - 7)}`;
50 | },
51 | async getJSON(
52 | _: string,
53 | json: Record,
54 | outputFileName: string
55 | ) {
56 | if (outputFileName) {
57 | const cjs = `${outputFileName.replace('dist', 'dist/cjs')}.js`;
58 | const esm = `${outputFileName.replace('dist', 'dist/esm')}.js`;
59 |
60 | return Promise.all([
61 | fs.outputFile(cjs, `module.exports = ${JSON.stringify(json)};`),
62 | fs.outputFile(esm, `export default ${JSON.stringify(json)};`),
63 | ]);
64 | }
65 | },
66 | }),
67 | hexRGBA,
68 | autoprefixer,
69 | url({ url: 'inline' }),
70 | ],
71 | };
72 | };
73 |
--------------------------------------------------------------------------------
/scripts/create-plugin.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const copy = require('copy-template-dir');
4 | const path = require('path');
5 | const log = require('signale');
6 | const fs = require('fs');
7 | const { paramCase, pascalCase } = require('change-case');
8 | const { titleCase } = require('title-case');
9 | const { app } = require('command-line-application');
10 | const inquirer = require('inquirer');
11 |
12 | const { version } = JSON.parse(
13 | fs.readFileSync(path.join(__dirname, '../lerna.json'), 'utf8')
14 | );
15 | const inDir = path.join(__dirname, './template-plugin');
16 |
17 | function updateCliTsConfig(name) {
18 | const configPath = path.join(__dirname, '../packages/cli/tsconfig.json');
19 | const config = JSON.parse(fs.readFileSync(configPath), 'utf8');
20 |
21 | config.references.push({ path: `../../plugins/${name}` });
22 |
23 | fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
24 | }
25 |
26 | async function create(options) {
27 | let { name } = options;
28 |
29 | if (!name) {
30 | ({ name } = await inquirer.prompt([
31 | {
32 | type: 'input',
33 | name: 'name',
34 | message: `What's the plugin name?`
35 | }
36 | ]));
37 | }
38 |
39 | const kebab = paramCase(name);
40 | const outDir = path.join(__dirname, '../plugins', kebab);
41 |
42 | fs.mkdirSync(outDir);
43 |
44 | const vars = {
45 | version,
46 | title: titleCase(name),
47 | kebab,
48 | pascal: pascalCase(name)
49 | };
50 |
51 | copy(inDir, outDir, vars, (err, createdFiles) => {
52 | if (err) {
53 | throw err;
54 | }
55 |
56 | createdFiles.forEach(filePath =>
57 | log.info(`Created ${path.relative(outDir, filePath)}`)
58 | );
59 | log.success(`Created @design-systems/${kebab} plugin!`);
60 | });
61 |
62 | updateCliTsConfig(kebab);
63 | }
64 |
65 | const args = app(
66 | {
67 | name: 'create-plugin',
68 | description: 'Add a new plugin to the @design-sytems/cli project',
69 | examples: ['create-plugin ProgressBar', 'create-plugin --name ProgressBar'],
70 | options: [
71 | {
72 | name: 'name',
73 | description: 'The name of the new plugin',
74 | type: String,
75 | defaultOption: true
76 | }
77 | ]
78 | },
79 | { argv: process.argv }
80 | );
81 |
82 | if (args) {
83 | create(args).catch(e => {
84 | console.error(e);
85 | });
86 | }
87 |
--------------------------------------------------------------------------------
/packages/hooks/src/useStickyState.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-cond-assign, no-continue */
2 |
3 | import { RefObject, useEffect, useState } from "react";
4 |
5 | import { debounce } from "@design-systems/utils";
6 |
7 | /** Get the nearest scroll container */
8 | function getScrollParent(element: HTMLElement) {
9 | let style = getComputedStyle(element);
10 |
11 | const excludeStaticParent = style.position === "absolute";
12 | const overflowRegex = /(auto|scroll|hidden)/;
13 |
14 | if (style.position === "fixed") {
15 | return document.body;
16 | }
17 |
18 | let parent: HTMLElement | null = element;
19 |
20 | while ((parent = parent.parentElement)) {
21 | style = getComputedStyle(parent);
22 |
23 | if (excludeStaticParent && style.position === "static") {
24 | continue;
25 | }
26 |
27 | if (
28 | overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
29 | ) {
30 | return parent;
31 | }
32 | }
33 |
34 | return document.body;
35 | }
36 |
37 | /**
38 | * Determine if a position:sticky element is sticking.
39 | *
40 | * @param element - The element to detect the sticky state of
41 | *
42 | * @example
43 | * const ref = useRef(null);
44 | * const isSticking = useStickyState(ref);
45 | */
46 | export const useStickyState = (
47 | element: RefObject
48 | ) => {
49 | const [isSticky, setIsSticky] = useState(false);
50 |
51 | useEffect(() => {
52 | const { current: stickyTarget } = element;
53 |
54 | if (!stickyTarget || !window) {
55 | return;
56 | }
57 |
58 | const parentElement = getScrollParent(stickyTarget);
59 |
60 | if (!parentElement) {
61 | return;
62 | }
63 |
64 | const calculateIsSticky = debounce(() => {
65 | const pTop = parentElement.scrollTop;
66 | const tTop = stickyTarget.getBoundingClientRect().top;
67 | const difference = Math.round(Math.abs(pTop - tTop));
68 | const triggerDistance = window
69 | .getComputedStyle(stickyTarget)
70 | .getPropertyValue("top");
71 |
72 | setIsSticky(difference !== Math.abs(parseInt(triggerDistance, 10)));
73 | }, 25);
74 |
75 | calculateIsSticky();
76 |
77 | parentElement.addEventListener("scroll", calculateIsSticky);
78 |
79 | return () => parentElement.removeEventListener("scroll", calculateIsSticky);
80 | }, [element]);
81 |
82 | return isSticky;
83 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/monorepo",
3 | "private": true,
4 | "license": "MIT",
5 | "author": {
6 | "email": "lisowski54@gmail.com",
7 | "name": "Andrew Lisowski"
8 | },
9 | "scripts": {
10 | "start": "tsc --build tsconfig.dev.json --watch",
11 | "clean": "yarn clean:build && yarn clean:modules",
12 | "clean:modules": "lerna clean --yes && rimraf node_modules",
13 | "clean:build": "rimraf packages/*/dist && rimraf packages/*/tsconfig.tsbuildinfo && rimraf plugins/*/tsconfig.tsbuildinfo",
14 | "build": "lerna run build --stream",
15 | "lint": "./packages/cli/bin/ds.js lint",
16 | "test": "./packages/cli/bin/ds.js test",
17 | "create:plugin": "./scripts/create-plugin.js",
18 | "create:package": "./packages/cli/bin/ds.js create package",
19 | "format" : "prettier --write ."
20 | },
21 | "workspaces": [
22 | "packages/*",
23 | "plugins/*"
24 | ],
25 | "prettier": {
26 | "singleQuote": true
27 | },
28 | "repository": {
29 | "type": "git",
30 | "url": "https://github.com/intuit/design-systems-cli.git"
31 | },
32 | "publishConfig": {
33 | "registry": "https://registry.npmjs.org/",
34 | "access": "public"
35 | },
36 | "devDependencies": {
37 | "@auto-it/all-contributors": "10.36.5",
38 | "@auto-it/first-time-contributor": "10.36.5",
39 | "@auto-it/released": "10.36.5",
40 | "auto": "10.36.5",
41 | "change-case": "4.1.1",
42 | "copy-template-dir": "1.4.0",
43 | "lerna": "4.0.0",
44 | "prettier": "2.1.2",
45 | "rimraf": "3.0.2",
46 | "signale": "1.4.0",
47 | "typescript": "4.2.2"
48 | },
49 | "auto": {
50 | "plugins": [
51 | "npm",
52 | "released",
53 | "first-time-contributor",
54 | [
55 | "all-contributors",
56 | {
57 | "types": {
58 | "plugin": "**/plugin/**/*",
59 | "code": [
60 | "**/src/**/*",
61 | "**/package.json",
62 | "**/tsconfig.json"
63 | ]
64 | }
65 | }
66 | ]
67 | ],
68 | "labels": [
69 | {
70 | "name": "dependency-update",
71 | "changelogTitle": "🔩 Dependency Updates",
72 | "releaseType": "none"
73 | },
74 | {
75 | "name": "blog-post",
76 | "changelogTitle": "📚 Blog Post",
77 | "releaseType": "none"
78 | }
79 | ]
80 | },
81 | "engines": {
82 | "node": ">=10.18.1"
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/packages/babel-plugin-replace-styles/README.md:
--------------------------------------------------------------------------------
1 | # @design-systems/babel-plugin-replace-styles
2 |
3 | This babel plugin lets you overwrite CSS imports that are happening inside your design system.
4 |
5 | ### Why would you want to do that?
6 |
7 | Here's a simple example that showcases a potential use-case:
8 |
9 | You have a `Button` component, built using the Design Systems CLI. It has a `main.css` output that gets generated when you build,
10 | and you have a single `PostCSS` build that generates it. Now, another team wants you to auto-prefix your CSS to support older browsers.
11 | Without this plugin, you would need to just add the prefixes and now everyone has to download those, just to support the extra use case.
12 |
13 | _OR_
14 |
15 | We could use the DS-CLI `build` plugin's multi-build CSS feature, and generate two CSS files: `main.css` and `prefixed.css`.
16 | The only issue is, if we turn on automatic CSS imports, everyone will get `main` and not `prefixed`.
17 |
18 | Enter this plugin. Now the team who needs prefixed CSS can install this and configure it to replace `main` with `prefixed` if it exists.
19 | Everyone only gets the CSS they need imported, and we can still have a nice auto-import by default.
20 |
21 | _Note: This also works well with [postcss-themed](https://github.com/intuit/postcss-themed); you can use this plugin to swap between different css files that contain different themes!_
22 |
23 | ## Usage
24 |
25 | babel.config.json:
26 |
27 | ```json
28 | {
29 | "plugins": [
30 | [
31 | "@design-systems/babel-plugin-replace-styles",
32 | { "scope": "your-ds", "replace": "main", "use": "prefixed" }
33 | ]
34 | ]
35 | }
36 | ```
37 |
38 | ## Example
39 |
40 | Input:
41 |
42 | ```js
43 | // In node_modules/my-ds/component/dist/esm/index.js
44 | import '../main.css';
45 | ```
46 |
47 | Output:
48 |
49 | ```js
50 | import '../prefixed.css';
51 | ```
52 |
53 | Notes for setup:
54 |
55 | `babel-loader` will _not_ parse `node_modules` by default. You'll need to use [babel.config.json](https://babeljs.io/docs/en/configuration#babelconfigjs) (a `.babelrc` will not work), and you'll need to configure webpack to parse your node_modules. I've provided an example below:
56 |
57 | ```js
58 | module: {
59 | rules: [
60 | {
61 | include: [
62 | path.join(__dirname, 'node_modules/@your-ds/'),
63 | path.join(__dirname, 'src'),
64 | ],
65 | test: /\.(js|jsx|mjs|tsx|ts)$/,
66 | loader: 'babel-loader',
67 | },
68 | ];
69 | }
70 | ```
71 |
--------------------------------------------------------------------------------
/plugins/build/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@design-systems/build",
3 | "version": "4.15.4",
4 | "description": "The build command for @design-systems-cli",
5 | "main": "dist/index.js",
6 | "author": "Adam Dierkens ",
7 | "license": "MIT",
8 | "scripts": {
9 | "build": "tsc --build"
10 | },
11 | "files": [
12 | "dist",
13 | "postcss.config.js",
14 | "babel.config.js"
15 | ],
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/intuit/design-systems-cli.git"
19 | },
20 | "publishConfig": {
21 | "access": "public"
22 | },
23 | "dependencies": {
24 | "@babel/code-frame": "^7.12.13",
25 | "@babel/core": "^7.13.8",
26 | "@babel/plugin-proposal-class-properties": "^7.13.0",
27 | "@babel/plugin-syntax-dynamic-import": "^7.8.3",
28 | "@babel/plugin-transform-runtime": "^7.13.9",
29 | "@babel/preset-env": "^7.13.9",
30 | "@babel/preset-react": "^7.12.13",
31 | "@babel/preset-typescript": "^7.13.0",
32 | "@babel/runtime": "^7.13.9",
33 | "@design-systems/cli-utils": "link:../../packages/cli-utils",
34 | "@design-systems/plugin": "link:../../packages/plugin",
35 | "autoprefixer": "9.8.6",
36 | "babel-plugin-macros": "3.0.1",
37 | "babel-plugin-styled-components": "1.12.0",
38 | "babel-preset-jest": "26.3.0",
39 | "change-case": "4.1.1",
40 | "chokidar": "3.4.2",
41 | "clean-css": "4.2.3",
42 | "colorette": "1.2.2",
43 | "dedent": "0.7.0",
44 | "fast-glob": "3.2.5",
45 | "fs-extra": "9.0.1",
46 | "icss-utils": "4.1.1",
47 | "minimatch": "3.0.4",
48 | "pkg-up": "3.1.0",
49 | "postcss": "7.0.32",
50 | "postcss-hexrgba": "2.0.1",
51 | "postcss-icss-selectors": "2.0.3",
52 | "postcss-load-config": "2.1.0",
53 | "postcss-modules": "3.2.2",
54 | "postcss-nested": "4.2.3",
55 | "postcss-url": "8.0.0",
56 | "pretty-bytes": "5.6.0",
57 | "pretty-ms": "7.0.0",
58 | "tapable": "1.1.3",
59 | "tslib": "2.0.1",
60 | "type-fest": "0.16.0",
61 | "typescript": "4.2.2"
62 | },
63 | "devDependencies": {
64 | "@types/autoprefixer": "9.7.2",
65 | "@types/babel__code-frame": "7.0.2",
66 | "@types/babel__core": "7.1.9",
67 | "@types/clean-css": "4.2.2",
68 | "@types/dedent": "0.7.0",
69 | "@types/fs-extra": "9.0.1",
70 | "@types/icss-utils": "4.1.0",
71 | "@types/minimatch": "3.0.3",
72 | "@types/postcss-nested": "4.1.0",
73 | "@types/postcss-url": "8.0.1",
74 | "@types/pretty-bytes": "5.2.0",
75 | "@types/pretty-ms": "5.0.1"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/packages/create/src/template.ts:
--------------------------------------------------------------------------------
1 | import colorette from 'colorette';
2 | import terminalLink from 'terminal-link';
3 |
4 | import installedTemplates from './templates.json';
5 |
6 | export const creationChoices = ['component', 'system', 'package'] as const;
7 | export type CreationChoice = typeof creationChoices[number];
8 |
9 | export interface Template {
10 | /** The name of the template */
11 | name: string;
12 | /** URL to the github repository that contains the template */
13 | url: string;
14 | /** A short description of what the template does */
15 | description: string;
16 | /** The commit sha of the version to clone */
17 | sha: string;
18 | }
19 |
20 | export const templates: Record = installedTemplates;
21 |
22 | /** Get the matching template for the creation type and name */
23 | export function getTemplate(
24 | type: CreationChoice,
25 | name: string,
26 | userTemplates: Template[] = []
27 | ) {
28 | const allTemplates = [...userTemplates, ...templates[type]];
29 | const template = allTemplates.find(t => t.name === name);
30 |
31 | if (template) {
32 | return `${template.url}#${template.sha}`;
33 | }
34 |
35 | return name;
36 | }
37 |
38 | const colorOrder = [
39 | 'green',
40 | 'cyan',
41 | 'magenta',
42 | 'gray',
43 | 'yellow',
44 | 'greenBright',
45 | 'redBright',
46 | 'yellowBright',
47 | 'blueBright',
48 | 'magentaBright',
49 | 'cyanBright'
50 | ] as const;
51 |
52 | /** List all the available templates for a creation type */
53 | export function listTemplates(
54 | type: CreationChoice,
55 | defaultTemplate = 'ts',
56 | userTemplates: Template[] = []
57 | ) {
58 | const allTemplates = [...userTemplates, ...templates[type]];
59 | let output = `Available templates for "${type}":\n\n`;
60 |
61 | [
62 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
63 | allTemplates.find(t => t.name === defaultTemplate)!,
64 | ...allTemplates.filter(t => t.name !== defaultTemplate)
65 | ].forEach((template, index) => {
66 | const color = colorette[colorOrder[index % colorOrder.length]];
67 |
68 | output += terminalLink.isSupported
69 | ? ` ${color(terminalLink(template.name, template.url))}`
70 | : ` ${color(template.name)}`;
71 |
72 | output += ` - ${template.description}`;
73 |
74 | if (template.name === defaultTemplate) {
75 | output += ' [DEFAULT]';
76 | }
77 |
78 | if (!terminalLink.isSupported) {
79 | output += ` (${template.url})`;
80 | }
81 |
82 | output += '\n';
83 | });
84 |
85 | return output;
86 | }
87 |
--------------------------------------------------------------------------------
/packages/docs/src/usage.md:
--------------------------------------------------------------------------------
1 | # Using `@design-systems/cli`
2 |
3 | Out of the box, `@design-systems/cli` comes with a lot of different scripts.
4 | When to use what script can be a little confusing.
5 |
6 | Most of the scripts are ran infrequently locally or are used by other scripts, so you really only need to know about a few.
7 | The following will detail the default workflow you and your teammates should use while developing with the CLI.
8 |
9 | ## Creating new packages
10 |
11 | To create a new component in your repo run `yarn run create` from the root.
12 | This will create a new templated component in the `components` folder.
13 | To create a new package in your repo, maybe for a set of shared utils, run `yarn create:package` from the root.
14 | This will create a new templated package in the `packages` folder.
15 |
16 | ## Developing
17 |
18 | The command you will most often use while developing is the `dev` command.
19 | This command can be used at the root of the project or from the component level (example: `components/Card`).
20 |
21 | When `dev` is run from the root it will build all of your components and serve a storybook with all of their stories.
22 | This will reflect what your published storybook will look like.
23 | Once you start adding more components you might notice that builds are taking longer.
24 | Usually you don't need to see all the stories at once, this might even be distracting.
25 |
26 | Instead of developing with a storybook for all of your components you can run `dev` from the component level.
27 | This will do a few things differently:
28 |
29 | - Build the component and any component or package withing the repo it depends on
30 |
31 | _Example_: `@my-design-system/card` => `@my-design-system/icon` => `@my-design-system/styles` = `card` + `icon` + `styles` will all be built)
32 |
33 | - Start a storybook for _just_ that component's stories
34 |
35 | This allows you to develop just a subset of your storybook, decreasing build times and focusing your development.
36 |
37 | ## Testing
38 |
39 | To test your project the commands you will run the most are:
40 |
41 | - `lint`
42 | - `test`
43 |
44 | These commands can be run from the root or package level.
45 | From the root all files will be tested.
46 | From the package only the contents of that package will tested.
47 |
48 | ## Cleaning up
49 |
50 | Sometimes you need to reset your local repo.
51 | To do this use the `clean` command.
52 | It will delete every generated file from your project:
53 |
54 | This includes:
55 |
56 | - `node_modules`
57 | - `dist`
58 | - `out`
59 | - `coverage`
60 | - `tsbuildinfo.json`
61 |
--------------------------------------------------------------------------------
/packages/hooks/src/useOverflowing.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { debounce } from "@design-systems/utils";
3 |
4 | type Side = "top" | "left" | "bottom" | "right";
5 | type OverflowState = Record;
6 |
7 | /**
8 | * This hook allows you to determine when one of your elements has overflowing.
9 | *
10 | * @param ref - The dom element to detect overflow on
11 | *
12 | * @example
13 | * const Example = () => {
14 | * const ref = useRef(null);
15 | * const { bottom } = useOverflowing(ref);
16 | *
17 | * return (
18 | * (
27 | ref: React.RefObject
28 | ): OverflowState => {
29 | const [overflowing, setOverflowing] = React.useState({
30 | top: false,
31 | bottom: false,
32 | left: false,
33 | right: false,
34 | });
35 |
36 | React.useEffect(() => {
37 | const { current } = ref;
38 |
39 | if (!current) {
40 | return;
41 | }
42 |
43 | const updateOverflowing = debounce(() => {
44 | if (!current) {
45 | return;
46 | }
47 |
48 | const {
49 | scrollHeight,
50 | scrollWidth,
51 | clientHeight,
52 | clientWidth,
53 | scrollTop,
54 | scrollLeft,
55 | } = current;
56 | const scrollX = scrollWidth - clientWidth;
57 | const scrollY = scrollHeight - clientHeight;
58 |
59 | const state: OverflowState = {
60 | top: scrollTop !== 0,
61 | bottom: scrollHeight > clientHeight && scrollY !== scrollTop,
62 | left: scrollLeft !== 0,
63 | right: scrollWidth > clientWidth && scrollX !== scrollLeft,
64 | };
65 |
66 | if (
67 | state.bottom !== overflowing.bottom ||
68 | state.top !== overflowing.top ||
69 | state.left !== overflowing.left ||
70 | state.right !== overflowing.right
71 | ) {
72 | setOverflowing(state);
73 | }
74 | });
75 |
76 | if (!window) {
77 | return;
78 | }
79 |
80 | updateOverflowing();
81 |
82 | window.addEventListener("resize", updateOverflowing);
83 | current.addEventListener("scroll", updateOverflowing);
84 |
85 | return () => {
86 | window.removeEventListener("resize", updateOverflowing);
87 | current.removeEventListener("scroll", updateOverflowing);
88 | };
89 | }, [ref, overflowing]);
90 |
91 | return overflowing;
92 | };
--------------------------------------------------------------------------------
/plugins/bundle/src/index.ts:
--------------------------------------------------------------------------------
1 | import { createLogger, getMonorepoRoot, getRepoRoot } from '@design-systems/cli-utils';
2 | import { Plugin } from '@design-systems/plugin';
3 | import fs from 'fs';
4 | import path from 'path';
5 | import webpack from 'webpack';
6 | import baseWebpackConfig, { ConfigOptions } from './webpack.base.config';
7 |
8 | export interface BundleArgs {
9 | /**
10 | * Run the build in debug mode, skipping minification
11 | */
12 | debug?: boolean;
13 | }
14 |
15 | /**
16 | * Promisify the webpack API
17 | */
18 | function pack(config: webpack.Configuration): Promise {
19 | return new Promise((resolve, reject) => {
20 | webpack(config, (err, stats) => {
21 | if (err) {
22 | return reject(err);
23 | }
24 |
25 | return resolve(stats);
26 | });
27 | });
28 | }
29 |
30 | /**
31 | * Resolve the webpack config to use when building
32 | */
33 | async function getConfig(
34 | options: ConfigOptions
35 | ): Promise {
36 | const root = getMonorepoRoot() || getRepoRoot();
37 | const customConfigPath = path.join(root, 'webpack.config.js');
38 | let config = baseWebpackConfig;
39 | if (fs.existsSync(customConfigPath)) {
40 | // eslint-disable-next-line
41 | const overrideConfig = require(customConfigPath);
42 | config = overrideConfig.default || overrideConfig;
43 | }
44 |
45 | if (typeof config === 'function') {
46 | return config(options);
47 | }
48 |
49 | return config;
50 | }
51 |
52 | /**
53 | * A plugin to _bundle_ a component
54 | */
55 | export default class BundlePlugin implements Plugin {
56 | private logger = createLogger({ scope: 'bundle' });
57 |
58 | async bundle(args: BundleArgs, entry: string): Promise {
59 | const stats = await pack(
60 | await getConfig({
61 | ...args,
62 | entry
63 | })
64 | );
65 | const buildInfo = stats.toJson();
66 |
67 | if (stats.hasErrors()) {
68 | this.logger.error(buildInfo.errors.join(''));
69 | process.exit(1);
70 | }
71 |
72 | this.logger.log(stats.toString({ colors: true }));
73 | }
74 |
75 | async bundleCurrent(args: BundleArgs) {
76 | await this.bundle(args, './src');
77 | }
78 |
79 | async run(args: BundleArgs) {
80 | // Generate the webpack config
81 |
82 | if (fs.existsSync('lerna.json')) {
83 | this.logger.error('Run this from a component folder instead');
84 | process.exit(1);
85 | } else {
86 | await this.bundleCurrent(args);
87 | }
88 |
89 | this.logger.await('Created bundle');
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/plugins/size/src/RelativeCommentsPlugin.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-nested-callbacks */
2 |
3 | import webpack from 'webpack';
4 | import { RawSource } from 'webpack-sources';
5 | import { monorepoName } from '@design-systems/cli-utils';
6 | import { paramCase } from 'change-case';
7 | import { RelativeCommentsPluginOptions } from './interfaces';
8 |
9 | /** Normalizes comments for better diffs */
10 | export default class RelativeCommentsPlugin {
11 | private options: RelativeCommentsPluginOptions;
12 |
13 | constructor(options: RelativeCommentsPluginOptions) {
14 | this.options = options;
15 | }
16 |
17 | apply(compiler: webpack.Compiler) {
18 | compiler.hooks.compilation.tap('RelativeCommentsPlugin', compilation => {
19 | compilation.hooks.optimizeChunkAssets.tap(
20 | 'RelativeCommentsPlugin',
21 | chunks => {
22 | chunks.forEach(chunk => {
23 | const transformList: string[] = chunk.files.filter(
24 | file => /\.js$/.test(file) && !/^css/.test(file)
25 | );
26 |
27 | if (!transformList.length) {
28 | return;
29 | }
30 |
31 | transformList.forEach(file => {
32 | /** Normalize the path in a comment */
33 | const replacePath = (match: string, p1: string) => {
34 | let newPath = p1;
35 |
36 | if (p1.includes('node_modules')) {
37 | newPath = p1
38 | .split('node_modules/')[1]
39 | .replace(this.options.importName, '.');
40 | } else if (p1.startsWith('../') && p1.includes('dist/')) {
41 | newPath = p1.replace(
42 | /\.\.\/([a-zA-Z0-9_-]+)\//,
43 | (whole: string, packageName: string) =>
44 | `@${monorepoName()}/${paramCase(packageName)}/`.trim()
45 | );
46 | }
47 |
48 | return match.replace(p1, newPath);
49 | };
50 |
51 | const modifiedSource = compilation.assets[file]
52 | .source()
53 | .replace(/\/\/ CONCATENATED MODULE: (\S+)/g, replacePath)
54 | .replace(/\/\/ EXTERNAL MODULE: (\S+)/g, replacePath)
55 | .split('\n')
56 | .filter((p: string) => p.trim() !== '')
57 | .join('\n');
58 |
59 | // eslint-disable-next-line no-param-reassign
60 | compilation.assets[file] = new RawSource(modifiedSource);
61 | });
62 | });
63 | }
64 | );
65 | });
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
{
19 | * bottom
20 | * ? 'The bottom is scrolling'
21 | * : 'now it isn\'t!'}
22 | *
23 | * );
24 | * };
25 | */
26 | export const useOverflowing =