diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 2c7e92c43..000000000 --- a/.babelrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": [ - [ - "@babel/plugin-transform-runtime", - { - "helpers": false, - "regenerator": true, - "corejs": false - } - ], - [ - "@babel/plugin-transform-regenerator", - { - "async": false - } - ] - ] -} diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/.github/workflows/update-versions.yml b/.github/workflows/update-versions.yml index 938a1f311..732c74728 100644 --- a/.github/workflows/update-versions.yml +++ b/.github/workflows/update-versions.yml @@ -24,7 +24,7 @@ jobs: with: node-version: 16.17.0 - run: npm install -g yarn - - name: Update preview app + - name: Update versions env: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} run: | diff --git a/.gitignore b/.gitignore index 0e1b8a22e..1cdcb46e6 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,7 @@ cypress/screenshots cypress/videos server_killer.rb yarn-error.log -preview \ No newline at end of file +/dist +/preview +/core +/reset \ No newline at end of file diff --git a/.npmignore b/.npmignore index e4fc17a17..e2a8c5cd1 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,3 @@ -.babelrc .bundle .DS_Store .editorconfig @@ -6,10 +5,10 @@ .pretterrc.json .prettierignore lib -modules-config.js node_modules preview -release-canditate.sh release.sh scripts -webpack.config.js +dist +.swcrc +.svgrc diff --git a/.storybook/main.ts b/.storybook/main.ts index 06e73c92d..b34fd63b6 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,16 +1,10 @@ -const path = require("path"); +import type { StorybookConfig } from "@storybook/react-vite"; -/** @type { import('@storybook/react-webpack5').StorybookConfig } */ -const config = { +const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], - staticDirs: ["../public"], framework: { - name: "@storybook/react-webpack5", - options: { - builder: { - useSWC: true, - }, - }, + name: "@storybook/react-vite", + options: {}, }, core: { disableTelemetry: true, @@ -19,39 +13,6 @@ const config = { "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", - "@storybook/addon-styling-webpack", - { - name: "@storybook/addon-styling-webpack", - - options: { - rules: [ - { - test: /\.css$/, - sideEffects: true, - use: [ - require.resolve("style-loader"), - { - loader: require.resolve("css-loader"), - options: { - importLoaders: 1, - }, - }, - { - loader: require.resolve("postcss-loader"), - options: { - postcssOptions: { - config: path.resolve( - __dirname, - "postcss.storybook.config.js" - ), - }, - }, - }, - ], - }, - ], - }, - }, ], docs: { autodocs: "tag", diff --git a/.svgrc b/.svgrc new file mode 100644 index 000000000..68e8e6abc --- /dev/null +++ b/.svgrc @@ -0,0 +1,14 @@ +{ + "dest": "dist/core", + "mode": { + "symbol": { + "inline": true, + "sprite": "../sprites" + } + }, + "shape": { + "id": { + "generator": "sprite-%s" + } + } +} \ No newline at end of file diff --git a/.swcrc b/.swcrc new file mode 100644 index 000000000..66dc676f7 --- /dev/null +++ b/.swcrc @@ -0,0 +1,13 @@ +{ + "jsc": { + "target": "es2018", + "parser": { + "syntax": "typescript", + "tsx": true, + "decorators": false, + "dynamicImport": false + } + }, + "exclude": [".stories.tsx"], + "minify": true +} diff --git a/Procfile b/Procfile deleted file mode 100644 index 80e60b05f..000000000 --- a/Procfile +++ /dev/null @@ -1,2 +0,0 @@ -webpack-ui: node scripts/build -w -webpack-dev-server: ./scripts/webpack-preview.sh diff --git a/README.md b/README.md index 878090325..1cb714fc5 100644 --- a/README.md +++ b/README.md @@ -127,16 +127,10 @@ Putting SVG files inside a`src/MODULE_NAME/icons` folder will add them to a per- Usage with the `Icon` React component: -```jsx +```tsx ``` -Usage with `Icon` VW component: - -```rb -<%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1rem", additional_css: "align-middle transform rotate-180 mr-4")) %> -``` - Usage without a component: ```html @@ -148,7 +142,7 @@ Usage without a component: Usage without a component, in React, with hover states. Note the [group](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover) class: -```jsx +```tsx { - if (err) { - console.error(err.stack || err); - - if (err.details) { - console.error(err.details); - } - - return; - } - - console.log( - stats.toString({ - preset: "minimal", - chunks: false, - colors: true, - }) - ); - - setupModules({ verbose: !!options.verbose }); -}; - -const compiler = webpack(config); - -if (options.watch) { - compiler.watch({}, compile); -} else { - compiler.run(compile); -} diff --git a/scripts/pre-release.sh b/scripts/pre-release.sh index 2a92efd98..db2280349 100755 --- a/scripts/pre-release.sh +++ b/scripts/pre-release.sh @@ -45,7 +45,7 @@ echo "> yarn (npm)" yarn --frozen-lockfile echo "> Build library" -NODE_ENV=production node scripts/build.js +NODE_ENV=production yarn build echo "> Publish the npm package to the registry" yarn publish --no-git-tag-version --new-version $VERSION diff --git a/scripts/release.sh b/scripts/release.sh index 05f87b06d..febe01d63 100755 --- a/scripts/release.sh +++ b/scripts/release.sh @@ -10,7 +10,7 @@ echo "Install packages, making sure they are up to date" yarn --frozen-lockfile echo "Build library" -NODE_ENV=production node scripts/build.js +NODE_ENV=production yarn build echo "Publish the npm package to the registry" yarn publish --no-git-tag-version --new-version $VERSION diff --git a/scripts/setup-modules.js b/scripts/setup-modules.js deleted file mode 100755 index fd0121138..000000000 --- a/scripts/setup-modules.js +++ /dev/null @@ -1,125 +0,0 @@ -const path = require("path"); -const fs = require("fs"); - -const modules = require("../modules-config"); - -const extPredicate = (extRegex) => (path) => path.match(extRegex); -const dataPredicate = extPredicate(/(.json)$/); - -let VERBOSE_LOG = false; -const log = (...args) => (VERBOSE_LOG ? console.log(...args) : null); -const printWrite = (...args) => - VERBOSE_LOG ? process.stdout.write(...args) : null; -const printDone = () => log("\x1b[32m%s\x1b[0m", "Done"); // green -const colorizeMod = (name) => `\x1b[33m${name}\x1b[0m`; // yellow -const colorizeComponentName = (name) => `\x1b[35m${name}\x1b[0m`; //magenta - -const copyFromTo = (from, to) => (filename) => - fs.copyFileSync(path.join(from, filename), path.join(to, filename)); - -const findFiles = (dir, predicate) => fs.readdirSync(dir).filter(predicate); - -const srcPathResolve = (moduleDir, component = "") => - path.join("src", moduleDir, component); - -const npmPathResolve = (moduleDir, component = "") => - path.join(moduleDir, component); - -const print = - (msg, exec) => - (...args) => { - printWrite(msg(...args)); - - if (exec(...args)) { - return; - } - - printDone(); - }; - -const copyFonts = print( - (mod) => `> Copying fonts for ${colorizeMod(mod.name)} ... `, - (mod) => { - const fonts = srcPathResolve(mod.directory, "fonts"); - const npmPath = npmPathResolve(mod.directory, "fonts"); - - if (!fs.existsSync(fonts)) { - log("\x1b[32m%s\x1b[0m", "No fonts directory found, skipping"); // green - return true; - } - - if (fs.existsSync(npmPath)) { - fs.rmdirSync(npmPath, { recursive: true }); - } - - fs.mkdirSync(npmPath); - - fs.readdirSync(fonts).forEach((filename) => { - copyFromTo(fonts, npmPath)(filename); - }); - } -); - -const copyImages = print( - (mod) => `> Copying images for ${colorizeMod(mod.name)} ... `, - (mod) => { - const images = srcPathResolve(mod.directory, "images"); - const npmPath = npmPathResolve(mod.directory, "images"); - - if (!fs.existsSync(images)) { - log("\x1b[32m%s\x1b[0m", "No images directory found, skipping"); // green - return true; - } - - if (fs.existsSync(npmPath)) { - fs.rmdirSync(npmPath, { recursive: true }); - } - - fs.mkdirSync(npmPath); - - fs.readdirSync(images).forEach((filename) => { - copyFromTo(images, npmPath)(filename); - }); - } -); - -const copyComponentData = print( - (mod, componentName) => - `> Copying component data for ${colorizeComponentName( - componentName - )} in module ${colorizeMod(mod.name)} ... `, - (mod, componentName) => { - const npmPath = npmPathResolve(mod.directory, componentName); - const srcPath = srcPathResolve(mod.directory, componentName); - - findFiles(srcPath, dataPredicate).forEach((filename) => { - copyFromTo(srcPath, npmPath)(filename); - }); - } -); - -const createGitignoreFiles = (mod) => { - printWrite(`> Creating .gitignore file for ${colorizeMod(mod.name)} ... `); - - fs.writeFileSync(npmPathResolve(mod.directory, ".gitignore"), "*"); - - printDone(); -}; - -const sync = ({ verbose } = { verbose: false }) => { - VERBOSE_LOG = verbose; - - log(""); - - modules.forEach((mod) => { - copyFonts(mod); - copyImages(mod); - createGitignoreFiles(mod); - - mod.components.forEach((componentName) => { - copyComponentData(mod, componentName); - }); - }); -}; - -module.exports = sync; diff --git a/scripts/update-pre-release-versions.sh b/scripts/update-pre-release-versions.sh index 062a8a69e..5667beed3 100755 --- a/scripts/update-pre-release-versions.sh +++ b/scripts/update-pre-release-versions.sh @@ -16,17 +16,9 @@ fi VERSION=$ABLY_UI_VERSION-dev.$PACKAGE_SUFFIX TAG=v$ABLY_UI_VERSION-dev.$PACKAGE_SUFFIX -echo "> Update preview app version" -cd preview - -echo "> Update @ably/ui npm package in preview app" -yarn upgrade @ably/ui@$VERSION - -echo "> Commit version publish and preview app update to $TAG" -cd .. +echo "> Commit version and publish update to $TAG" git add package.json yarn.lock -git add preview/package.json preview/yarn.lock -git commit -m "Publish $TAG and update preview app" +git commit -m "Publish $TAG" echo "> Tag commit with $TAG" git tag --annotate $TAG --message "$TAG" --force diff --git a/scripts/update-versions.sh b/scripts/update-versions.sh index aa11ab798..52dfb44a1 100755 --- a/scripts/update-versions.sh +++ b/scripts/update-versions.sh @@ -9,14 +9,6 @@ VERSION=$1 echo "Update package version" yarn version --new-version $VERSION --no-git-tag-version -echo "Update preview app version" -cd preview - -echo "Upgrade ably-ui npm package in preview app" -yarn upgrade @ably/ui@$VERSION - -echo "Commit preview app update to $VERSION" -cd .. -git add preview/package.json preview/yarn.lock +echo "Commit app update to $VERSION" git add package.json yarn.lock -git commit -m "Update package version & preview app to @ably/ui $VERSION" +git commit -m "Update package version to @ably/ui $VERSION" diff --git a/scripts/webpack-preview.sh b/scripts/webpack-preview.sh deleted file mode 100755 index 0aad517c5..000000000 --- a/scripts/webpack-preview.sh +++ /dev/null @@ -1,14 +0,0 @@ -#!/bin/bash - -# trap TERM and change to QUIT -trap 'echo Stopping webpack-dev-server process $PID; kill -SIGINT $PID' TERM - -set -eou - -# Run the webpack-dev-server in the preview app -cd ./preview/ -./bin/webpack-dev-server & - -# capture PID and wait -PID=$! -wait diff --git a/src/core/Accordion/component.tsx b/src/core/Accordion.tsx similarity index 98% rename from src/core/Accordion/component.tsx rename to src/core/Accordion.tsx index d564d7d44..034fd6f05 100644 --- a/src/core/Accordion/component.tsx +++ b/src/core/Accordion.tsx @@ -1,5 +1,5 @@ import React, { useState, ReactNode, JSX } from "react"; -import Icon from "../Icon/component.tsx"; +import Icon from "./Icon"; type AccordionData = { name: string; diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx index afaf7e8a9..7822d13f3 100644 --- a/src/core/Accordion/Accordion.stories.tsx +++ b/src/core/Accordion/Accordion.stories.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Accordion, { AccordionProps } from "./component.tsx"; +import Accordion, { AccordionProps } from "../Accordion"; export default { title: "Components/Accordion", diff --git a/src/core/Accordion/component.js b/src/core/Accordion/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/Code/component.tsx b/src/core/Code.tsx similarity index 84% rename from src/core/Code/component.tsx rename to src/core/Code.tsx index f479f778b..dbf840bab 100644 --- a/src/core/Code/component.tsx +++ b/src/core/Code.tsx @@ -1,11 +1,11 @@ import React from "react"; -import "../utils/syntax-highlighter.css"; +import "./utils/syntax-highlighter.css"; import { highlightSnippet, registerDefaultLanguages, -} from "../utils/syntax-highlighter"; -import languagesRegistry from "../utils/syntax-highlighter-registry"; +} from "./utils/syntax-highlighter"; +import languagesRegistry from "./utils/syntax-highlighter-registry"; registerDefaultLanguages(languagesRegistry); diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx index 484828a6c..cc910027f 100644 --- a/src/core/Code/Code.stories.tsx +++ b/src/core/Code/Code.stories.tsx @@ -1,4 +1,4 @@ -import Code from "./component.tsx"; +import Code from "../Code"; export default { title: "Components/Code", diff --git a/src/core/ConnectStateWrapper/component.tsx b/src/core/ConnectStateWrapper.tsx similarity index 95% rename from src/core/ConnectStateWrapper/component.tsx rename to src/core/ConnectStateWrapper.tsx index 3a4bc0572..ac7742fe2 100644 --- a/src/core/ConnectStateWrapper/component.tsx +++ b/src/core/ConnectStateWrapper.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; -import { connectState, getRemoteDataStore } from "../remote-data-store"; +import { connectState, getRemoteDataStore } from "./remote-data-store"; /* Connect a react component to a global store. diff --git a/src/core/ConnectStateWrapper/component.js b/src/core/ConnectStateWrapper/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/ContactFooter/component.tsx b/src/core/ContactFooter.tsx similarity index 94% rename from src/core/ContactFooter/component.tsx rename to src/core/ContactFooter.tsx index 438a7da28..a059aaf31 100644 --- a/src/core/ContactFooter/component.tsx +++ b/src/core/ContactFooter.tsx @@ -1,9 +1,9 @@ import React, { useEffect } from "react"; -import Icon from "../Icon/component.tsx"; -import _absUrl from "../url-base.js"; -import toggleChatWidget from "../hubspot-chat-toggle"; -import "./component.css"; +import Icon from "./Icon"; +import _absUrl from "./url-base.js"; +import toggleChatWidget from "./hubspot-chat-toggle"; +import "./ContactFooter/component.css"; type ContactFooterProps = { urlBase: string; diff --git a/src/core/ContactFooter/ContactFooter.stories.tsx b/src/core/ContactFooter/ContactFooter.stories.tsx index ee83a6089..eb7a2f6ff 100644 --- a/src/core/ContactFooter/ContactFooter.stories.tsx +++ b/src/core/ContactFooter/ContactFooter.stories.tsx @@ -1,4 +1,4 @@ -import ContactFooter from "./component.tsx"; +import ContactFooter from "../ContactFooter"; export default { title: "Components/Contact Footer", diff --git a/src/core/CookieMessage/component.tsx b/src/core/CookieMessage.tsx similarity index 94% rename from src/core/CookieMessage/component.tsx rename to src/core/CookieMessage.tsx index a61af340a..53602c7fd 100644 --- a/src/core/CookieMessage/component.tsx +++ b/src/core/CookieMessage.tsx @@ -1,8 +1,8 @@ import React, { useRef, useEffect, useState } from "react"; import Cookie from "js-cookie"; -import "./component.css"; -import _absUrl from "../url-base"; +import "./CookieMessage/component.css"; +import _absUrl from "./url-base"; const COOKIE_EXPIRY = 365; diff --git a/src/core/CookieMessage/CookieMessage.stories.tsx b/src/core/CookieMessage/CookieMessage.stories.tsx index d43e57291..fd64859a2 100644 --- a/src/core/CookieMessage/CookieMessage.stories.tsx +++ b/src/core/CookieMessage/CookieMessage.stories.tsx @@ -1,4 +1,4 @@ -import CookieMessage from "./component.tsx"; +import CookieMessage from "../CookieMessage"; export default { title: "Components/Cookie Message", diff --git a/src/core/CookieMessage/component.js b/src/core/CookieMessage/component.js deleted file mode 100644 index 18dae071a..000000000 --- a/src/core/CookieMessage/component.js +++ /dev/null @@ -1 +0,0 @@ -import "./component.css"; diff --git a/src/core/CustomerLogos/component.tsx b/src/core/CustomerLogos.tsx similarity index 100% rename from src/core/CustomerLogos/component.tsx rename to src/core/CustomerLogos.tsx diff --git a/src/core/CustomerLogos/CustomerLogos.stories.tsx b/src/core/CustomerLogos/CustomerLogos.stories.tsx index 3f5b49931..bf6c13046 100644 --- a/src/core/CustomerLogos/CustomerLogos.stories.tsx +++ b/src/core/CustomerLogos/CustomerLogos.stories.tsx @@ -1,4 +1,4 @@ -import CustomerLogos from "./component.tsx"; +import CustomerLogos from "../CustomerLogos"; import hubspot from "../images/cust-logo-hubspot-mono-pos.svg"; import webflow from "../images/cust-logo-webflow-col-pos.svg"; diff --git a/src/core/CustomerLogos/component.js b/src/core/CustomerLogos/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/DropdownMenu/component.tsx b/src/core/DropdownMenu.tsx similarity index 98% rename from src/core/DropdownMenu/component.tsx rename to src/core/DropdownMenu.tsx index 69d4429d7..9224b9ce1 100644 --- a/src/core/DropdownMenu/component.tsx +++ b/src/core/DropdownMenu.tsx @@ -7,7 +7,7 @@ import React, { ReactNode, Dispatch, } from "react"; -import Icon from "../Icon/component.tsx"; +import Icon from "./Icon"; const DropdownMenuContext = createContext<{ isOpen: boolean; diff --git a/src/core/DropdownMenu/DropdownMenu.stories.tsx b/src/core/DropdownMenu/DropdownMenu.stories.tsx index 255301399..1c9169723 100644 --- a/src/core/DropdownMenu/DropdownMenu.stories.tsx +++ b/src/core/DropdownMenu/DropdownMenu.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; -import Icon from "../Icon/component.tsx"; -import DropdownMenu from "./component.tsx"; +import Icon from "../Icon"; +import DropdownMenu from "../DropdownMenu"; export default { title: "Components/Dropdown Menu", diff --git a/src/core/DropdownMenu/component.js b/src/core/DropdownMenu/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/FeaturedLink/component.tsx b/src/core/FeaturedLink.tsx similarity index 98% rename from src/core/FeaturedLink/component.tsx rename to src/core/FeaturedLink.tsx index 39d02259d..590e27b95 100644 --- a/src/core/FeaturedLink/component.tsx +++ b/src/core/FeaturedLink.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, ReactNode } from "react"; -import Icon from "../Icon/component.tsx"; +import Icon from "./Icon"; type FeaturedLinkProps = { url: string; diff --git a/src/core/FeaturedLink/FeaturedLink.stories.tsx b/src/core/FeaturedLink/FeaturedLink.stories.tsx index 1b6ff6c72..a0e24261d 100644 --- a/src/core/FeaturedLink/FeaturedLink.stories.tsx +++ b/src/core/FeaturedLink/FeaturedLink.stories.tsx @@ -1,4 +1,4 @@ -import FeaturedLink from "./component.tsx"; +import FeaturedLink from "../FeaturedLink"; export default { title: "Components/Featured Link", diff --git a/src/core/FeaturedLink/component.js b/src/core/FeaturedLink/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/Flash/component.tsx b/src/core/Flash.tsx similarity index 96% rename from src/core/Flash/component.tsx rename to src/core/Flash.tsx index e1429a2f3..d565c1c44 100644 --- a/src/core/Flash/component.tsx +++ b/src/core/Flash.tsx @@ -2,10 +2,10 @@ import React, { useEffect, useState, useRef } from "react"; import DOMPurify from "dompurify"; import { nanoid } from "nanoid/non-secure"; -import { getRemoteDataStore } from "../remote-data-store.js"; -import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx"; -import Icon from "../Icon/component.tsx"; -import "./component.css"; +import { getRemoteDataStore } from "./remote-data-store.js"; +import ConnectStateWrapper from "./ConnectStateWrapper"; +import Icon from "./Icon"; +import "./Flash/component.css"; type FlashProps = { id: string; diff --git a/src/core/Flash/Flash.stories.tsx b/src/core/Flash/Flash.stories.tsx index e571a0e25..c48130db7 100644 --- a/src/core/Flash/Flash.stories.tsx +++ b/src/core/Flash/Flash.stories.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Flash, { reducerFlashes } from "./component.tsx"; +import Flash, { reducerFlashes } from "../Flash"; import { attachStoreToWindow, diff --git a/src/core/Flash/component.js b/src/core/Flash/component.js deleted file mode 100644 index 18dae071a..000000000 --- a/src/core/Flash/component.js +++ /dev/null @@ -1 +0,0 @@ -import "./component.css"; diff --git a/src/core/Footer/component.tsx b/src/core/Footer.tsx similarity index 99% rename from src/core/Footer/component.tsx rename to src/core/Footer.tsx index 4ba85af2b..5fe44d91f 100644 --- a/src/core/Footer/component.tsx +++ b/src/core/Footer.tsx @@ -1,8 +1,8 @@ import React from "react"; -import Icon from "../Icon/component.tsx"; -import _absUrl from "../url-base.js"; -import "./component.css"; +import Icon from "./Icon"; +import _absUrl from "./url-base.js"; +import "./Footer/component.css"; type FooterProps = { paths: { diff --git a/src/core/Footer/Footer.stories.tsx b/src/core/Footer/Footer.stories.tsx index c1e091a37..e6a7178e7 100644 --- a/src/core/Footer/Footer.stories.tsx +++ b/src/core/Footer/Footer.stories.tsx @@ -1,4 +1,4 @@ -import Footer from "./component.tsx"; +import Footer from "../Footer"; import ablyStack from "../images/ably-stack.svg"; import highestPerformer from "../images/high-performer-2023.svg"; diff --git a/src/core/Footer/component.js b/src/core/Footer/component.js deleted file mode 100644 index 18dae071a..000000000 --- a/src/core/Footer/component.js +++ /dev/null @@ -1 +0,0 @@ -import "./component.css"; diff --git a/src/core/Icon/component.tsx b/src/core/Icon.tsx similarity index 100% rename from src/core/Icon/component.tsx rename to src/core/Icon.tsx diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx index a39f100d6..a4f28592e 100644 --- a/src/core/Icon/Icon.stories.tsx +++ b/src/core/Icon/Icon.stories.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Icon from "./component.tsx"; +import Icon from "../Icon"; export default { title: "Components/Icon", diff --git a/src/core/Icon/component.js b/src/core/Icon/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/Loader/component.tsx b/src/core/Loader.tsx similarity index 100% rename from src/core/Loader/component.tsx rename to src/core/Loader.tsx diff --git a/src/core/Loader/Loader.stories.tsx b/src/core/Loader/Loader.stories.tsx index 0c78656d4..f34190d9f 100644 --- a/src/core/Loader/Loader.stories.tsx +++ b/src/core/Loader/Loader.stories.tsx @@ -1,4 +1,4 @@ -import Loader from "./component.tsx"; +import Loader from "../Loader"; export default { title: "Components/Loader", diff --git a/src/core/Loader/component.js b/src/core/Loader/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/Logo/component.tsx b/src/core/Logo.tsx similarity index 100% rename from src/core/Logo/component.tsx rename to src/core/Logo.tsx diff --git a/src/core/Logo/Logo.stories.tsx b/src/core/Logo/Logo.stories.tsx index 7d73a5b4a..b50998d7e 100644 --- a/src/core/Logo/Logo.stories.tsx +++ b/src/core/Logo/Logo.stories.tsx @@ -1,4 +1,4 @@ -import Logo from "./component.tsx"; +import Logo from "../Logo"; import logoUrl from "../images/ably-logo.png"; export default { diff --git a/src/core/Logo/component.js b/src/core/Logo/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/Meganav/component.tsx b/src/core/Meganav.tsx similarity index 83% rename from src/core/Meganav/component.tsx rename to src/core/Meganav.tsx index 2bcedaf33..3f2983270 100644 --- a/src/core/Meganav/component.tsx +++ b/src/core/Meganav.tsx @@ -1,24 +1,22 @@ import React, { ReactNode, useEffect, useState } from "react"; -import { connectState } from "../remote-data-store.js"; -import { selectSessionData } from "../remote-session-data.js"; - -import Logo from "../Logo/component.tsx"; -import "./component.css"; - -import MeganavScripts from "./component.js"; -import MeganavItemsDesktop from "../MeganavItemsDesktop/component.tsx"; -import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.tsx"; -import MeganavItemsMobile from "../MeganavItemsMobile/component.tsx"; -import Notice from "../Notice/component.tsx"; -import MeganavData from "./component.json"; -import _absUrl from "../url-base.js"; - -import MeganavContentProducts from "../MeganavContentProducts/component.tsx"; -import MeganavContentUseCases from "../MeganavContentUseCases/component.tsx"; -import MeganavContentCompany from "../MeganavContentCompany/component.tsx"; -import MeganavContentDevelopers from "../MeganavContentDevelopers/component.tsx"; -import MeganavSearch from "../MeganavSearch/component.tsx"; +import { connectState } from "./remote-data-store.js"; +import { selectSessionData } from "./remote-session-data.js"; + +import Logo from "./Logo"; +import "./Meganav/component.css"; +import MeganavData from "./Meganav/component.json"; +import MeganavScripts from "./Meganav/component.js"; +import MeganavItemsDesktop from "./MeganavItemsDesktop"; +import MeganavItemsSignedIn from "./MeganavItemsSignedIn"; +import MeganavItemsMobile from "./MeganavItemsMobile"; +import Notice from "./Notice"; +import _absUrl from "./url-base.js"; +import MeganavContentProducts from "./MeganavContentProducts"; +import MeganavContentUseCases from "./MeganavContentUseCases"; +import MeganavContentCompany from "./MeganavContentCompany"; +import MeganavContentDevelopers from "./MeganavContentDevelopers"; +import MeganavSearch from "./MeganavSearch"; export type MeganavTheme = { backgroundColor?: string; diff --git a/src/core/Meganav/Meganav.stories.tsx b/src/core/Meganav/Meganav.stories.tsx index 55517b9d5..045835c0b 100644 --- a/src/core/Meganav/Meganav.stories.tsx +++ b/src/core/Meganav/Meganav.stories.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import { rest } from "msw"; -import Meganav from "./component.tsx"; +import Meganav from "../Meganav"; import loadIcons from "../icons.js"; import logo from "../images/ably-logo.png"; import ablyStack from "../images/ably-stack.svg"; diff --git a/src/core/MeganavBlogPostsList/component.tsx b/src/core/MeganavBlogPostsList.tsx similarity index 90% rename from src/core/MeganavBlogPostsList/component.tsx rename to src/core/MeganavBlogPostsList.tsx index d6eddddd2..192a00569 100644 --- a/src/core/MeganavBlogPostsList/component.tsx +++ b/src/core/MeganavBlogPostsList.tsx @@ -1,7 +1,7 @@ import React from "react"; -import FeaturedLink from "../FeaturedLink/component.tsx"; -import { AbsUrl } from "../Meganav/component.tsx"; +import FeaturedLink from "./FeaturedLink"; +import { AbsUrl } from "./Meganav"; type MeganavBlogPostsListProps = { recentBlogPosts: { diff --git a/src/core/MeganavContentCompany/component.tsx b/src/core/MeganavContentCompany.tsx similarity index 95% rename from src/core/MeganavContentCompany/component.tsx rename to src/core/MeganavContentCompany.tsx index afd78f2c5..dc4a13499 100644 --- a/src/core/MeganavContentCompany/component.tsx +++ b/src/core/MeganavContentCompany.tsx @@ -1,10 +1,10 @@ import React from "react"; -import MeganavBlogPostsList from "../MeganavBlogPostsList/component.tsx"; -import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx"; -import { selectRecentBlogPosts } from "../remote-blogs-posts.js"; -import Icon from "../Icon/component.tsx"; -import { AbsUrl } from "../Meganav/component.tsx"; +import MeganavBlogPostsList from "./MeganavBlogPostsList"; +import ConnectStateWrapper from "./ConnectStateWrapper"; +import { selectRecentBlogPosts } from "./remote-blogs-posts.js"; +import Icon from "./Icon"; +import { AbsUrl } from "./Meganav"; type MeganavContentCompanyProps = { absUrl: AbsUrl; diff --git a/src/core/MeganavContentCompany/component.js b/src/core/MeganavContentCompany/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/MeganavContentDevelopers/component.tsx b/src/core/MeganavContentDevelopers.tsx similarity index 98% rename from src/core/MeganavContentDevelopers/component.tsx rename to src/core/MeganavContentDevelopers.tsx index ef7296a19..b87758ecc 100644 --- a/src/core/MeganavContentDevelopers/component.tsx +++ b/src/core/MeganavContentDevelopers.tsx @@ -1,7 +1,7 @@ import React from "react"; -import Icon from "../Icon/component.tsx"; -import { AbsUrl } from "../Meganav/component.tsx"; +import Icon from "./Icon"; +import { AbsUrl } from "./Meganav"; const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
diff --git a/src/core/MeganavContentDevelopers/component.js b/src/core/MeganavContentDevelopers/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/MeganavContentProducts/component.tsx b/src/core/MeganavContentProducts.tsx similarity index 98% rename from src/core/MeganavContentProducts/component.tsx rename to src/core/MeganavContentProducts.tsx index 37d526466..fab5fd59b 100644 --- a/src/core/MeganavContentProducts/component.tsx +++ b/src/core/MeganavContentProducts.tsx @@ -1,7 +1,7 @@ import React from "react"; -import FeaturedLink from "../FeaturedLink/component.tsx"; -import { AbsUrl } from "../Meganav/component.tsx"; +import FeaturedLink from "./FeaturedLink"; +import { AbsUrl } from "./Meganav"; type MeganavContentProductsProps = { paths: { diff --git a/src/core/MeganavContentProducts/component.js b/src/core/MeganavContentProducts/component.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/core/MeganavContentUseCases/component.tsx b/src/core/MeganavContentUseCases.tsx similarity index 98% rename from src/core/MeganavContentUseCases/component.tsx rename to src/core/MeganavContentUseCases.tsx index 36a5c4b1b..3f45f9a41 100644 --- a/src/core/MeganavContentUseCases/component.tsx +++ b/src/core/MeganavContentUseCases.tsx @@ -1,7 +1,7 @@ import React from "react"; -import Icon from "../Icon/component.tsx"; -import { AbsUrl } from "../Meganav/component.tsx"; +import Icon from "./Icon"; +import { AbsUrl } from "./Meganav"; const MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (
diff --git a/src/core/MeganavContentUseCases/component.js b/src/core/MeganavContentUseCases/component.js deleted file mode 100644 index f67d33806..000000000 --- a/src/core/MeganavContentUseCases/component.js +++ /dev/null @@ -1 +0,0 @@ -// TODO: Webpack expects a .js file for any component diff --git a/src/core/MeganavControl/component.tsx b/src/core/MeganavControl.tsx similarity index 89% rename from src/core/MeganavControl/component.tsx rename to src/core/MeganavControl.tsx index ba08cb319..edd4154d9 100644 --- a/src/core/MeganavControl/component.tsx +++ b/src/core/MeganavControl.tsx @@ -1,7 +1,7 @@ import React, { ReactNode } from "react"; -import Icon from "../Icon/component.tsx"; -import { MeganavTheme } from "../Meganav/component.tsx"; +import Icon from "./Icon"; +import { MeganavTheme } from "./Meganav"; type MeganavControlProps = { ariaControls: string; diff --git a/src/core/MeganavControlMobileDropdown/component.tsx b/src/core/MeganavControlMobileDropdown.tsx similarity index 89% rename from src/core/MeganavControlMobileDropdown/component.tsx rename to src/core/MeganavControlMobileDropdown.tsx index 8939eb40d..205316c0d 100644 --- a/src/core/MeganavControlMobileDropdown/component.tsx +++ b/src/core/MeganavControlMobileDropdown.tsx @@ -1,7 +1,7 @@ import React from "react"; -import Icon from "../Icon/component.tsx"; -import { MeganavTheme } from "../Meganav/component.tsx"; +import Icon from "./Icon"; +import { MeganavTheme } from "./Meganav"; const MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (