@charcoal-ui/react 4.0.0-beta.7 → 4.0.0-rc.0

package/dist/core/ComponentAbstraction.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-export type LinkProps = {
-    /**
-     * リンクのURL
-     */
-    to: string;
-} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
-export declare const DefaultLink: React.ForwardRefExoticComponent<{
-    /**
-     * リンクのURL
-     */
-    to: string;
-} & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
-export interface Components {
-    Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>;
-}
-interface Props {
-    children: React.ReactNode;
-    components: Partial<Components>;
-}
-export default function ComponentAbstraction({ children, components }: Props): JSX.Element;
-export declare function useComponentAbstraction(): Components;
-export {};
-//# sourceMappingURL=ComponentAbstraction.d.ts.map

package/dist/core/ComponentAbstraction.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentAbstraction.d.ts","sourceRoot":"","sources":["../../src/core/ComponentAbstraction.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;CACX,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAA;AAErD,eAAO,MAAM,WAAW;IANtB;;OAEG;QACC,MAAM;gOAWX,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAC3E;AAQD,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,eAQ3E;AAED,wBAAgB,uBAAuB,eAEtC"}

package/dist/styled.d.ts

@@ -1,95 +0,0 @@
-export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
-    bg: Record<string, unknown> & {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface7: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface8: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface9: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface10: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text5: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly icon6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly brand: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly warning: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly success: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly updatedItem: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-    } & {
-        readonly surface5: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-    };
-    font: {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface7: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface8: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface9: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface10: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text5: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly icon6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly brand: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly warning: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly success: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly updatedItem: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-    };
-}> & {
-    readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bold" | "monospace" | "preserveHalfLeading">;
-} & {
-    readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440]>;
-    readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440]>;
-} & {
-    readonly height: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
-        column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
-        auto: import("@charcoal-ui/styled/dist/internals").Internal;
-        full: import("@charcoal-ui/styled/dist/internals").Internal;
-    }>;
-    readonly width: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
-        column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
-        auto: import("@charcoal-ui/styled/dist/internals").Internal;
-        full: import("@charcoal-ui/styled/dist/internals").Internal;
-    }>;
-} & import("@charcoal-ui/styled/dist/internals").Internal & {
-    readonly hover: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "press" | "disabled">;
-    readonly press: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "disabled">;
-    readonly disabled: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-} & Readonly<{
-    border: {
-        readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bottom" | "left" | "right" | "top">;
-    };
-}> & Readonly<{
-    borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled/dist/internals").Internal;
-}> & Readonly<{
-    outline: {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
-        readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
-    };
-}>) => import("@charcoal-ui/styled/dist/util").ArrayOrSingle<import("@charcoal-ui/styled/dist/internals").Internal | (false | null | undefined)>) => import("@charcoal-ui/styled").ThemeProp<import("styled-components").DefaultTheme>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/styled.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAAsB,CAAA"}

package/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Button /> componentAs props are passed to the data-as attribute 1`] = `
-<a
-  className="charcoal-button"
-  data-as="componentAs"
-  data-full-width={true}
-  href="/"
-  target="_blank"
-/>
-`;

package/src/components/Button/index.test.tsx

@@ -1,32 +0,0 @@
-import 'jest-styled-components'
-
-import renderer from 'react-test-renderer'
-import Button from '.'
-
-function Link({
-  as,
-  children,
-  ...props
-}: { as: string; children: React.ReactNode } & React.ComponentProps<'a'>) {
-  return (
-    <a {...props} data-as={as}>
-      {children}
-    </a>
-  )
-}
-
-describe('<Button />', () => {
-  test('componentAs props are passed to the data-as attribute', () => {
-    expect(
-      renderer.create(
-        <Button
-          href="/"
-          target="_blank"
-          fullWidth
-          as={Link}
-          componentAs="componentAs"
-        />
-      )
-    ).toMatchSnapshot()
-  })
-})

package/src/components/DropdownSelector/Divider.tsx

@@ -1,16 +0,0 @@
-import styled from 'styled-components'
-
-/**
- * 水平方向の直線
- */
-export const Divider = styled.div.attrs({ role: 'separator' })`
-  display: flex;
-
-  &:before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: #00000014;
-  }
-`

package/src/components/DropdownSelector/DropdownMenuItem.tsx

@@ -1,43 +0,0 @@
-import styled from 'styled-components'
-import MenuItem, { MenuItemProps } from './MenuItem'
-import { MenuListContext } from './MenuList/MenuListContext'
-import { useContext } from 'react'
-import Icon from '../Icon'
-
-export type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>
-
-/**
- * DropdownSelectorの選択肢として使うMenuItem
- */
-export default function DropdownMenuItem(props: DropdownMenuItemProps) {
-  const { value: ctxValue } = useContext(MenuListContext)
-  const isSelected = props.value === ctxValue
-  const { children, ...rest } = props
-
-  return (
-    <MenuItem {...rest}>
-      {isSelected && <Text2ColorIcon name="16/Check" />}
-      <StyledSpan isSelected={isSelected}>{props.children}</StyledSpan>
-    </MenuItem>
-  )
-}
-
-/**
- * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる
- */
-const StyledSpan = styled.span<{ isSelected?: boolean }>`
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--charcoal-text2);
-  padding: 9px 0;
-
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;
-`
-
-const Text2ColorIcon = styled(Icon)`
-  color: var(--charcoal-text2);
-  padding-right: 4px;
-`

package/src/components/Modal/__stories__/InternalScrollStory.tsx

@@ -1,75 +0,0 @@
-import { Story } from '../../../_lib/compat'
-import Modal, { BottomSheet, ModalProps } from '..'
-import { OverlayProvider } from '@react-aria/overlays'
-import { useOverlayTriggerState } from 'react-stately'
-import Button from '../../Button'
-import { ModalBody, ModalButtons, ModalHeader } from '../ModalPlumbing'
-import styled, { css } from 'styled-components'
-import { maxWidth } from '@charcoal-ui/utils'
-
-export const InternalScrollStory: Story<ModalProps> = (args: ModalProps) => {
-  const state = useOverlayTriggerState({})
-  return (
-    <OverlayProvider>
-      <Button onClick={() => state.open()}>Open Modal</Button>
-
-      <Modal {...args} isOpen={state.isOpen} onClose={() => state.close()}>
-        <ModalHeader />
-        <ModalBody>
-          <ModalBodyOverflowDiv $offset={56} $bottomSheet={args.bottomSheet}>
-            <div
-              style={{
-                height: 1000,
-                background: `linear-gradient(#e66465, #9198e5)`,
-              }}
-            ></div>
-          </ModalBodyOverflowDiv>
-          <TopBorderButtons>
-            <Button fullWidth onClick={() => state.close()}>
-              Close
-            </Button>
-          </TopBorderButtons>
-        </ModalBody>
-      </Modal>
-    </OverlayProvider>
-  )
-}
-
-// underlay padding-top: 40px (desktop)
-// underlay padding-bottom: 40px (desktop)
-// modal header: 64px (desktop)
-// modal header: 48px (mobile-bottom-sheet)
-// modal padding-bottom: 40px
-// button and space: 56px
-const MAX_HEIGHT_OFFSET = 64 + 40 + 40 + 40
-const MAX_HEIGHT_OFFSET_MOBILE = MAX_HEIGHT_OFFSET - 40 * 2 - 16
-const ModalBodyOverflowDiv = styled.div<{
-  $offset: number
-  $bottomSheet?: BottomSheet
-}>`
-  overflow: auto;
-  max-height: calc(
-    100vh - ${MAX_HEIGHT_OFFSET}px - ${({ $offset }) => $offset}px
-  );
-  ${({ $bottomSheet, $offset }) =>
-    ($bottomSheet === true || $bottomSheet === 'full') &&
-    css`
-      @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-        max-height: calc(100vh - ${MAX_HEIGHT_OFFSET_MOBILE}px - ${$offset}px);
-      }
-    `}
-`
-
-const TopBorderButtons = styled(ModalButtons)`
-  position: relative;
-  &::before {
-    content: '';
-    pointer-events: none;
-    border-top: 1px solid ${({ theme }) => theme.border.default.color};
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-`

package/src/components/a11y.test.tsx

@@ -1,99 +0,0 @@
-import path from 'path'
-import * as glob from 'glob'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { render } from '@testing-library/react'
-import { ThemeProvider } from 'styled-components'
-import { Story } from '../_lib/compat'
-import ComponentAbstraction, { DefaultLink } from '../core/ComponentAbstraction'
-import { light, dark } from '@charcoal-ui/theme'
-
-expect.extend(toHaveNoViolations)
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-interface StoryWithMetadata<ArgsType = any> {
-  filename: string
-  name: string
-  story: Story<ArgsType>
-  args: ArgsType
-}
-
-const stories: StoryWithMetadata[] = glob
-  .sync(path.resolve(__dirname, '**/*.story.tsx'))
-  .flatMap((filePath) => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const exports = require(`./${path.relative(
-      __dirname,
-      filePath
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    )}`) as Record<string, any>
-
-    return Object.entries(exports)
-      .filter(
-        ([exportName, exportValue]) =>
-          exportName !== 'default' && typeof exportValue === 'function'
-      )
-      .map(([exportName, exportValue]) => ({
-        filename: path.relative(__dirname, filePath),
-        name: exportName,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        story: exportValue as Story<any>,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-        args: { ...exports.default.args, ...exportValue.args },
-      }))
-  })
-
-const themes = Object.entries({
-  light,
-  dark,
-})
-
-const links = Object.entries({
-  DefaultLink,
-})
-
-const div = document.body.appendChild(document.createElement('div'))
-
-beforeEach(() => {
-  global.IntersectionObserver = jest.fn().mockImplementation(() => ({
-    observe() {
-      return null
-    },
-    disconnect() {
-      return null
-    },
-  }))
-
-  global.matchMedia = jest.fn().mockImplementation(() => ({
-    matches: true,
-    media: '(max-width: 600px)',
-    addEventListener() {
-      // Do Nothing
-    },
-    removeEventListener() {
-      // Do Nothing
-    },
-  }))
-})
-
-describe.each(themes)('using %s theme', (_name, theme) => {
-  describe.each(links)('using %s component', (_name, link) => {
-    describe.each(stories)(
-      'storiesOf($filename).add($name)',
-      ({ story: Story, args }) => {
-        it('has no accessibility violations', async () => {
-          expect(() => {
-            render(
-              <ThemeProvider theme={theme}>
-                <ComponentAbstraction components={{ Link: link }}>
-                  <Story {...args} />
-                </ComponentAbstraction>
-              </ThemeProvider>
-            )
-          }).not.toThrow()
-
-          expect(await axe(div)).toHaveNoViolations()
-        })
-      }
-    )
-  })
-})

package/src/core/ComponentAbstraction.tsx

@@ -1,48 +0,0 @@
-import { useContext } from 'react'
-import * as React from 'react'
-
-export type LinkProps = {
-  /**
-   * リンクのURL
-   */
-  to: string
-} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>
-
-export const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  function DefaultLink({ to, children, ...rest }, ref) {
-    return (
-      <a href={to} ref={ref} {...rest}>
-        {children}
-      </a>
-    )
-  }
-)
-
-export interface Components {
-  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>
-}
-
-const DefaultValue: Components = {
-  Link: DefaultLink,
-}
-
-const ComponentAbstractionContext = React.createContext(DefaultValue)
-
-interface Props {
-  children: React.ReactNode
-  components: Partial<Components>
-}
-
-export default function ComponentAbstraction({ children, components }: Props) {
-  return (
-    <ComponentAbstractionContext.Provider
-      value={{ ...DefaultValue, ...components }}
-    >
-      {children}
-    </ComponentAbstractionContext.Provider>
-  )
-}
-
-export function useComponentAbstraction() {
-  return useContext(ComponentAbstractionContext)
-}

package/src/styled.ts

@@ -1,3 +0,0 @@
-import styled from 'styled-components'
-import { createTheme } from '@charcoal-ui/styled'
-export const theme = createTheme(styled)