@bitrise/bitkit 9.5.2 → 9.5.4-alpha-chakra.1

package/CONTRIBUTING.md

@@ -1,79 +0,0 @@
-## Commit Messages
-
-This project is following **continuous deployment** using Bitrise CI 🙌.
-
-Bitkit uses a strict commit message structure that follows the [Conventional Commits](https://www.conventionalcommits.org) spec. This is used to automate publishing the package to NPM and generating the [CHANGELOG](../CHANGELOG.md) with [Semantic Release](https://github.com/semantic-release/semantic-release).
-
-Any changes to the consumable resources of the library should trigger a release, which can be done with the following commit types.
-
-| Commit | Release type |
-|---|---|
-| Commit with breaking change | Major Breaking release |
-| Commit with type `feat` | Minor release  |
-| Commit with type `fix` | Patch release |
-| Commit with type `style` | Patch release |
-| Commit with type `perf` | Patch release |
-
-Some examples...
-
-```
-fix(Button): Removed `pointer-events` rule that prevented it from being clickable.
-feat(DatePicker): Added `range` prop to allow start and end dates to be selected.
-style(Avatar): Updated colors of the avatar backgrounds.
-chore(ESlint): Added rule 'blahblah'.
-```
-
-Here, the `chore()` type would not trigger a new release.
-
-## Design Review
-
-Some changes that get submitted to Bitkit may include design changes, which should be approved by someone on the design team.
-
-It is down to the developer to assess whether they think they require a design review, when they think this is needed, they should tag the Github handle of one of the designers on the Pull Request that has the changes.
-
-The Pull Request should have enough information to indicate to the designer what has been changed, and what they should look at, if not a cheeky slack chat is always a good idea.
-
-We use Netlify for branch deployments on Pull Requests. One of the Github statuses on the Pull Request will be "deploy/netlify - Deploy preview ready!". Here you can preview the changes made on that Pull Request.
-
-![Status Checks](./site/assets/images/status-checks.png)
-
-## Component Guidance
-
-Finding the balance of flexibility, scalability and usefulness is hard with Pattern Libraries. Components should remain useful in multiple contexts while also being ready to extend and scale as the design or usecases evolve.
-
-**Style Guide Driven Development** - The Style Guide helps to document the contents of the Pattern Library for users and also acts as an isolated development environment. It should be possible to see all variations of a component to validate it's implementation and how it reacts to any changes made at a later date.
-
-**The Open/Closed Principle** - Components should be _"Open for extension but Closed for modification"_. To help the pattern library scale, maintain and for components to remain reusable in as many contexts as possible, components should be built with API like CSS (using BEM) and should not reference a selector or override styles from another CSS module.
-
-For example, "The Button inside the DatePicker should be bigger".
-
-Instead of this...
-
-```css
-/* Button.css */
-.Button { padding: 12px 16px; }
-
-/* DatePicker.css */
-.DatePicker .Button { padding: 16px 24px; }
-```
-
-... or this...
-
-```jsx
-<Button className="DatePickerButton">...</Button>
-```
-
-```css
-.DatePickerButton {
-  padding: 16px 24px;
-}
-```
-
-A better way would be
-
-```css
-/* Button.css */
-.Button { }
-.Button--size-small { padding: 12px 16px; }
-.Button--size-large { padding: 16px 24px; }
-```

package/FAQ.md

@@ -1,19 +0,0 @@
-## FAQ
-
-
-#### "Why can't I pass in my own CSS classes to components?"
-
-There are two types of components inside Bitkit, 'styled' components and 'utility' components. The utility components **do** support custom CSS classes. The styled components all provide styling from the design system. The components and their variations should remain available for everyone to use and should be predictable to changes that are made inside this library. For this reason, they do not allow custom CSS classes.
-
-By allowing custom styling and classes to be added to these components, it would create random overriding variations that are not documented and react in unpredictable ways between releases. This is also why referencing the CSS selectors of Bitkit components is discouraged.
-
-Even if this wasn't the case, some components might also have a slightly more complicated template structure and would require an API that allows CSS classes to be added to every node in the outputted template.
-
-Some possible reasons for needing to do this -
-
-• **Adding some layout styling to position the component** - A better way to achieve this would be to follow _["The Single Responsibility Principle"](https://cssguidelin.es/#the-single-responsibility-principle)_, and use wrapping layout components (like Flex).
-
-• **Adding some visual styling to adjust the appearance of the component** - A better way to achieve this is either verify this is a needed style and contribute it as a variation extension to the current component API or adjust the design and use a variation that already exists.
-
-• **It's a one off use case that is needed** - It's best to try and avoid these on offs where possible by adjusting the designs or environment that has caused the situation. If not there are the utility components like `Base`, `Flex`, `Grid` and `Text` that are general use components that all provide a lot of styling that might get you what you need and that also **do** support passing custom CSS classes.
-

package/bitrise.yml

@@ -1,66 +0,0 @@
----
-format_version: '8'
-default_step_lib_source: 'https://github.com/bitrise-io/bitrise-steplib.git'
-project_type: other
-trigger_map:
-- push_branch: master
-  workflow: Master
-- push_branch: 'alpha*'
-  workflow: AlphaBranch
-- pull_request_source_branch: '*'
-  workflow: PullRequests
-  pull_request_target_branch: master
-workflows:
-  AlphaBranch:
-    before_run:
-    - Primary
-    steps:
-    - yarn@0.1:
-        inputs:
-        - command: semantic-release
-        title: Publish from alpha branch (... if needed)
-  Master:
-    before_run:
-    - Primary
-    steps:
-    - yarn@0.0.8:
-        inputs:
-        - command: semantic-release
-        title: Publish (... if needed)
-  Primary:
-    steps:
-    - activate-ssh-key@4.1:
-        run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
-    - git-clone@6.1: {}
-    - nvm@1.3: {}
-    - yarn@0.1:
-        title: Install Dependencies
-    - yarn@0.1:
-        title: Run Linting
-        inputs:
-        - command: lint
-    - yarn@0.1:
-        title: Run typechecking
-        inputs:
-        - command: tsc -p src --noEmit
-    - yarn@0.1:
-        inputs:
-        - command: test
-        title: Run Tests
-  PullRequests:
-    before_run:
-    - Primary
-    steps:
-    - script@1.1.5:
-        inputs:
-        - content: >
-            #!/bin/bash
-
-            set -ex
-
-
-            # Check for malformed commit messages
-
-            git log --pretty=format:'%s' origin/master...$BITRISE_GIT_COMMIT |
-            yarn commitlint
-        title: Lint Commits

package/commitlint.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-  // https://commitlint.js.org/#/reference-rules
-  rules: {
-    'header-max-length': [0],
-    'scope-case': [2, 'always', ['lower-case', 'camel-case', 'pascal-case']],
-    'subject-case': [0],
-    'subject-full-stop': [0],
-  },
-};

package/jest.setup.js

@@ -1,36 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const Enzyme = require('enzyme');
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
-const { JSDOM } = require('jsdom');
-
-const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
-  url: 'http://localhost/',
-});
-const { window } = jsdom;
-
-Object.defineProperty(window, 'matchMedia', {
-  value: () => ({
-    matches: false,
-    addListener: () => {},
-    removeListener: () => {},
-  }),
-});
-
-global.window = window;
-global.document = window.document;
-global.navigator = {
-  userAgent: 'node.js',
-};
-
-global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
-global.cancelAnimationFrame = (id) => clearTimeout(id);
-// eslint-disable-next-line @typescript-eslint/no-implied-eval
-global.window.requestAnimationFrame = (cb) => setTimeout(cb, 0);
-global.window.cancelAnimationFrame = (id) => clearTimeout(id);
-
-Object.defineProperties(global, {
-  ...Object.getOwnPropertyDescriptors(window),
-  ...Object.getOwnPropertyDescriptors(global),
-});
-
-Enzyme.configure({ adapter: new Adapter() });

package/netlify.toml

@@ -1,42 +0,0 @@
-[Settings]
-[build]
-  [[headers]]
-    for = "*"
-    [headers.values]
-      Cache-Control = "no-cache, no-store, must-revalidate"
-  [[headers]]
-    for = "*.js"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[headers]]
-    for = "*.css"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[headers]]
-    for = "*.eot"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[headers]]
-    for = "*.png"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[headers]]
-    for = "*.svg"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[headers]]
-    for = "*.ttf"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[headers]]
-    for = "*.woff"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[headers]]
-    for = "*.woff2"
-    [headers.values]
-      Cache-Control = "public, max-age=604800"
-  [[redirects]]
-    from = "/*"
-    to = "/index.html"
-    status = 200

package/postcss.config.js

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const autoprefixer = require('autoprefixer');
-const postcssPresetEnv = require('postcss-preset-env');
-
-module.exports = {
-  plugins: [
-    autoprefixer(),
-    postcssPresetEnv({
-      stage: 3,
-      features: {
-        'custom-properties': false,
-        'nesting-rules': true,
-      },
-    }),
-  ],
-};

package/release.config.js

@@ -1,32 +0,0 @@
-module.exports = {
-  branches: ['master', { name: 'alpha', prerelease: true }, { name: 'alpha-*', prerelease: true }],
-  plugins: [
-    [
-      '@semantic-release/commit-analyzer',
-      {
-        releaseRules: [
-          { breaking: true, release: 'major' },
-          { type: 'feat', release: 'minor' },
-          { type: 'fix', release: 'patch' },
-          { type: 'perf', release: 'patch' },
-          { type: 'style', release: 'patch' },
-          { type: 'chore', release: 'patch' },
-        ],
-      },
-    ],
-    '@semantic-release/release-notes-generator',
-    '@semantic-release/npm',
-    '@semantic-release/github',
-  ],
-  verifyConditions: ['@semantic-release/changelog', '@semantic-release/npm', '@semantic-release/git'],
-  prepare: [
-    '@semantic-release/changelog',
-    '@semantic-release/npm',
-    {
-      path: '@semantic-release/git',
-      assets: ['CHANGELOG.md'],
-      // eslint-disable-next-line no-template-curly-in-string
-      message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
-    },
-  ],
-};

package/renovate.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "local>bitrise-io/renovate-config"
-  ]
-}

package/scripts/build-docs-watch.ts

@@ -1,7 +0,0 @@
-import path from 'path';
-import watch from 'node-watch';
-import buildDocs from './build-docs';
-
-watch(path.resolve(__dirname, '../src'), { recursive: true }, () => {
-  buildDocs();
-});

package/scripts/build-docs.ts

@@ -1,59 +0,0 @@
-/* eslint-disable no-console */
-
-import path from 'path';
-import fs from 'fs';
-import { parse, DocumentationObject } from 'react-docgen';
-import ts from 'typescript';
-
-const documentation: { [key: string]: DocumentationObject } = {};
-const exportedComponents: { [key: string]: string } = {};
-const indexFile = path.resolve(__dirname, '../src/index.ts');
-const indexFileContent = fs.readFileSync(indexFile, 'utf8');
-const indexSourceFile = ts.createSourceFile('index.ts', indexFileContent, ts.ScriptTarget.ES2015, true);
-
-const exclude = ['Portal'];
-
-const getExportedComponents = (node: ts.Node) => {
-  if (node.kind === ts.SyntaxKind.ExportDeclaration) {
-    const decl = node as ts.ExportDeclaration;
-
-    if (decl.exportClause) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      const defaultExport = decl.exportClause.elements.find(
-        ({ propertyName }: { propertyName: any }) => !!propertyName && propertyName.getText() === 'default',
-      );
-
-      if (decl.moduleSpecifier && defaultExport) {
-        exportedComponents[defaultExport.name.getText()] = (decl.moduleSpecifier as unknown as { text: string }).text;
-      }
-    }
-  }
-
-  ts.forEachChild(node, (n) => getExportedComponents(n));
-};
-
-const buildDocs = () => {
-  getExportedComponents(indexSourceFile);
-
-  Object.entries(exportedComponents)
-    .filter(([exportName]) => !exclude.includes(exportName))
-    .forEach(([exportName, exportPath]) => {
-      try {
-        const filePath = path.resolve(__dirname, '../src', `${exportPath}.tsx`);
-        const fileContent = fs.readFileSync(filePath, 'utf8');
-        const parsedDocs = parse(fileContent);
-
-        documentation[exportName] = parsedDocs;
-      } catch (e) {
-        console.error(`${exportName}: ${exportPath}`);
-        console.error(e);
-      }
-    });
-
-  fs.writeFileSync(path.resolve(__dirname, '../documentation.json'), JSON.stringify(documentation, null, 2));
-};
-
-buildDocs();
-
-export default buildDocs;

package/site/components/CodeBlock/CodeBlock.css

@@ -1,87 +0,0 @@
-pre[class*='language-'] {
-  width: 100%;
-  color: var(--color-gray--1);
-  overflow: auto;
-}
-
-pre[class*='language-'],
-code[class*='language-'] {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: var(--fontSizes-2);
-  text-align: left;
-  line-height: var(--lineHeights-2);
-  white-space: pre;
-  word-spacing: normal;
-  hyphens: none;
-  word-break: normal;
-  word-wrap: normal;
-  tab-size: 2;
-}
-
-/* stylelint-disable selector-class-pattern, font-weight-notation */
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: var(--color-gray--5);
-}
-
-.token.tag {
-  color: var(--color-red--1);
-}
-
-.token.punctuation {
-  color: var(--color-gray--3);
-}
-
-.token.function,
-.token.attr-name,
-.token.selector {
-  color: var(--color-aqua--3);
-}
-
-.token.string {
-  color: var(--color-green--3);
-}
-
-.token.attr-value,
-.token.boolean,
-.token.keyword,
-.token.number,
-.token.property {
-  color: var(--color-grape--2);
-}
-
-.token.function {
-  color: var(--color-yellow--3);
-}
-
-/*
-.token.regex,
-.token.important,
-.token.variable,
-.token.atrule,
-.token.char,
-.token.builtin,
-.token.inserted,,
-.token.property,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted,
-*/
-
-.token.important,
-.token.bold {
-  font-weight: 700;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-/* stylelint-enable */

package/site/components/CodeBlock/CodeBlock.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import * as Prism from 'prismjs';
-import { Base, FlexProps } from '@bitrise/bitkit';
-import Window from '../Window/Window';
-import 'prismjs/components/prism-jsx';
-import './CodeBlock.css';
-
-const { useEffect, useState } = React;
-
-interface Props extends FlexProps {
-  children: string;
-  language?: 'css' | 'jsx';
-  title: string;
-}
-
-const CodeBlock: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, language = 'jsx', title, ...rest } = props;
-  const [__html, setCode] = useState<string>('');
-
-  useEffect(() => {
-    setCode(Prism.highlight(children || '', Prism.languages[language], language));
-  }, [children]);
-
-  return (
-    <Window {...rest} backgroundColor="grape-5" margin="x12" textColor="grape-1" title={title}>
-      <Base paddingHorizontal="x4" paddingVertical="x3">
-        <pre className={`language-${language}`}>
-          <code dangerouslySetInnerHTML={{ __html }} />
-        </pre>
-      </Base>
-    </Window>
-  );
-};
-
-export default CodeBlock;

package/site/components/Documentation/ComponentDocumentationPage.tsx

@@ -1,150 +0,0 @@
-import * as React from 'react';
-import { match, Link as RouterLink, Redirect } from 'react-router-dom';
-import { DocumentationObject, PropDescriptor } from 'react-docgen';
-import { Base, Flex, FlexProps, Link, Notification, Text } from '@bitrise/bitkit';
-import PropsTable from '../PropsTable/PropsTable';
-
-interface Props extends FlexProps {
-  match: match<{
-    sectionName: string;
-  }>;
-  map: {
-    [key: string]: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      Showcase?: React.ComponentType<any>;
-      components: DocumentationObject[];
-      information?: string;
-    };
-  };
-}
-
-const filterProps = ([name, value]: [string, PropDescriptor]) =>
-  value.description !== '@Ignore' && name !== 'className' && name !== 'ref' && name !== 'style';
-
-const ComponentDocumentation = (props: Props): JSX.Element => {
-  const {
-    match: { params },
-    map,
-  } = props;
-  const { sectionName } = params;
-  const key = Object.keys(map).find((k) => !!k.match(new RegExp(sectionName, 'i')));
-
-  if (!key || !map[key]) {
-    return <Redirect to="/components/404" />;
-  }
-
-  const { Showcase, components, information } = map[key];
-  const componentsFilteredProps = components.reduce((properties, component) => {
-    if (!component) {
-      return {
-        ...properties,
-      };
-    }
-    return {
-      ...properties,
-      [component.displayName]: Object.entries(component.props || {}).filter(filterProps),
-    };
-  }, {});
-
-  return (
-    <Flex>
-      <Text margin="x6" size="8" weight="bold">
-        {key}
-      </Text>
-
-      {information && (
-        <Notification icon="Info" type="inform">
-          {information}
-        </Notification>
-      )}
-
-      <Base margin="x16">
-        <Text margin="x2" size="4" weight="bold">
-          Components summary
-        </Text>
-
-        {components.map((c) => {
-          if (!c) {
-            return;
-          }
-          const { description, displayName } = c;
-          return (
-            <Base key={displayName} margin="x4">
-              <Link Component={RouterLink} color="grape-3" to={`#${displayName}`}>
-                {displayName}
-              </Link>
-              {description && <Text size="2">{description}</Text>}
-              {!!componentsFilteredProps[displayName].length && (
-                <Text margin="x1" size="2">
-                  Props:{' '}
-                  {componentsFilteredProps[displayName].map(([propName], index, { length }) => (
-                    <Link Component={RouterLink} color="gray-5" key={propName} to={`#${displayName}-${propName}`}>
-                      {propName + (index + 1 === length ? '' : ' / ')}
-                    </Link>
-                  ))}
-                </Text>
-              )}
-            </Base>
-          );
-        })}
-      </Base>
-
-      {Showcase && (
-        <Base margin="x16">
-          <Text margin="x2" size="4" weight="bold">
-            Showcase
-          </Text>
-          <Showcase />
-        </Base>
-      )}
-
-      <Base margin="x16">
-        <Text margin="x2" size="4" weight="bold">
-          Components API
-        </Text>
-
-        {components.map((c) => {
-          if (!c) {
-            return;
-          }
-          const { composes, description, displayName } = c;
-          return (
-            <Base id={displayName} key={displayName} margin="x8">
-              <Flex direction="horizontal">
-                <Flex grow initial="none">
-                  <Text>{`<${displayName}>`}</Text>
-                  {description && <Text size="2">{description}</Text>}
-                </Flex>
-
-                {composes && composes.length && (
-                  <Flex>
-                    <Text>
-                      Extends:{' '}
-                      {composes
-                        .map((compose) => compose.replace('Props', ''))
-                        .map((compose) => (
-                          <Link key={compose} to={`/documentation/components/${compose}`}>{`<${compose}>`}</Link>
-                        ))}
-                    </Text>
-                  </Flex>
-                )}
-              </Flex>
-
-              <PropsTable
-                composes={composes}
-                displayName={displayName}
-                margin="x4"
-                props={componentsFilteredProps[displayName].reduce(
-                  (props, [name, value]) => ({ ...props, [name]: value }),
-                  {},
-                )}
-              />
-            </Base>
-          );
-        })}
-      </Base>
-    </Flex>
-  );
-};
-
-export default ComponentDocumentation;