From f1e87f0c0ec6d6c5c9e01fcb1b8133b096a35345 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Tue, 25 Apr 2023 16:06:23 -0300 Subject: [PATCH] feat!: change prefix ato to atom --- .gitignore | 2 +- apps/docs/.storybook/preview.ts | 2 +- packages/core/src/components.d.ts | 138 +++++++++--------- .../core/src/components/button/button.spec.ts | 44 +++--- .../src/components/button/button.stories.tsx | 10 +- .../core/src/components/button/button.tsx | 8 +- .../core/src/components/grid/col/col.spec.ts | 32 ++-- packages/core/src/components/grid/col/col.tsx | 4 +- .../core/src/components/grid/grid.spec.ts | 40 ++--- .../core/src/components/grid/grid.stories.tsx | 72 ++++----- packages/core/src/components/grid/grid.tsx | 4 +- packages/core/src/components/grid/index.ts | 6 +- .../core/src/components/grid/row/row.spec.ts | 12 +- packages/core/src/components/grid/row/row.tsx | 4 +- .../core/src/components/input/input.spec.ts | 44 +++--- .../src/components/input/input.stories.tsx | 8 +- packages/core/src/components/input/input.tsx | 16 +- .../core/src/components/select/select.spec.ts | 22 +-- .../src/components/select/select.stories.tsx | 10 +- .../core/src/components/select/select.tsx | 24 +-- packages/core/src/index.ts | 8 +- packages/react/README.md | 4 +- 22 files changed, 257 insertions(+), 257 deletions(-) diff --git a/.gitignore b/.gitignore index 1a22ac1e8..06425bc2a 100644 --- a/.gitignore +++ b/.gitignore @@ -5,7 +5,7 @@ # compiled output packages/react/src/components packages/vue/src/components -packages/core/src/components.d.ts +components.d.ts packages/core/react packages/core/vue packages/core/core.css diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts index eaf547d73..cb250324f 100644 --- a/apps/docs/.storybook/preview.ts +++ b/apps/docs/.storybook/preview.ts @@ -43,7 +43,7 @@ const preview = { viewport: { viewports: customViewports, }, - actions: { argTypesRegex: '^ato.*' }, + actions: { argTypesRegex: '^atom.*' }, docs: { page: DocumentationTemplate, }, diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index bc7c6bbca..7e0c4e03b 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Mode, TextFieldTypes } from "@ionic/core"; export { Mode, TextFieldTypes } from "@ionic/core"; export namespace Components { - interface AtoButton { + interface AtomButton { "color": 'primary' | 'secondary'; "disabled"?: boolean; "expand"?: 'block' | 'full'; @@ -18,7 +18,7 @@ export namespace Components { "size": 'small' | 'default' | 'large'; "type": 'submit' | 'reset' | 'button'; } - interface AtoCol { + interface AtomCol { "offset"?: string; "offsetLg"?: string; "offsetMd"?: string; @@ -30,10 +30,10 @@ export namespace Components { "sizeMd"?: string; "sizeSm"?: string; } - interface AtoGrid { + interface AtomGrid { "fixed"?: boolean; } - interface AtoInput { + interface AtomInput { "accept"?: string; "autofocus": boolean; "clearInput": boolean; @@ -62,9 +62,9 @@ export namespace Components { "type": TextFieldTypes; "value": string; } - interface AtoRow { + interface AtomRow { } - interface AtoSelect { + interface AtomSelect { "cancelText"?: string; "color"?: 'primary' | 'secondary'; "disabled"?: boolean; @@ -85,77 +85,77 @@ export namespace Components { "size"?: 'small' | 'large'; } } -export interface AtoButtonCustomEvent extends CustomEvent { +export interface AtomButtonCustomEvent extends CustomEvent { detail: T; - target: HTMLAtoButtonElement; + target: HTMLAtomButtonElement; } -export interface AtoInputCustomEvent extends CustomEvent { +export interface AtomInputCustomEvent extends CustomEvent { detail: T; - target: HTMLAtoInputElement; + target: HTMLAtomInputElement; } -export interface AtoSelectCustomEvent extends CustomEvent { +export interface AtomSelectCustomEvent extends CustomEvent { detail: T; - target: HTMLAtoSelectElement; + target: HTMLAtomSelectElement; } declare global { - interface HTMLAtoButtonElement extends Components.AtoButton, HTMLStencilElement { + interface HTMLAtomButtonElement extends Components.AtomButton, HTMLStencilElement { } - var HTMLAtoButtonElement: { - prototype: HTMLAtoButtonElement; - new (): HTMLAtoButtonElement; + var HTMLAtomButtonElement: { + prototype: HTMLAtomButtonElement; + new (): HTMLAtomButtonElement; }; - interface HTMLAtoColElement extends Components.AtoCol, HTMLStencilElement { + interface HTMLAtomColElement extends Components.AtomCol, HTMLStencilElement { } - var HTMLAtoColElement: { - prototype: HTMLAtoColElement; - new (): HTMLAtoColElement; + var HTMLAtomColElement: { + prototype: HTMLAtomColElement; + new (): HTMLAtomColElement; }; - interface HTMLAtoGridElement extends Components.AtoGrid, HTMLStencilElement { + interface HTMLAtomGridElement extends Components.AtomGrid, HTMLStencilElement { } - var HTMLAtoGridElement: { - prototype: HTMLAtoGridElement; - new (): HTMLAtoGridElement; + var HTMLAtomGridElement: { + prototype: HTMLAtomGridElement; + new (): HTMLAtomGridElement; }; - interface HTMLAtoInputElement extends Components.AtoInput, HTMLStencilElement { + interface HTMLAtomInputElement extends Components.AtomInput, HTMLStencilElement { } - var HTMLAtoInputElement: { - prototype: HTMLAtoInputElement; - new (): HTMLAtoInputElement; + var HTMLAtomInputElement: { + prototype: HTMLAtomInputElement; + new (): HTMLAtomInputElement; }; - interface HTMLAtoRowElement extends Components.AtoRow, HTMLStencilElement { + interface HTMLAtomRowElement extends Components.AtomRow, HTMLStencilElement { } - var HTMLAtoRowElement: { - prototype: HTMLAtoRowElement; - new (): HTMLAtoRowElement; + var HTMLAtomRowElement: { + prototype: HTMLAtomRowElement; + new (): HTMLAtomRowElement; }; - interface HTMLAtoSelectElement extends Components.AtoSelect, HTMLStencilElement { + interface HTMLAtomSelectElement extends Components.AtomSelect, HTMLStencilElement { } - var HTMLAtoSelectElement: { - prototype: HTMLAtoSelectElement; - new (): HTMLAtoSelectElement; + var HTMLAtomSelectElement: { + prototype: HTMLAtomSelectElement; + new (): HTMLAtomSelectElement; }; interface HTMLElementTagNameMap { - "ato-button": HTMLAtoButtonElement; - "ato-col": HTMLAtoColElement; - "ato-grid": HTMLAtoGridElement; - "ato-input": HTMLAtoInputElement; - "ato-row": HTMLAtoRowElement; - "ato-select": HTMLAtoSelectElement; + "atom-button": HTMLAtomButtonElement; + "atom-col": HTMLAtomColElement; + "atom-grid": HTMLAtomGridElement; + "atom-input": HTMLAtomInputElement; + "atom-row": HTMLAtomRowElement; + "atom-select": HTMLAtomSelectElement; } } declare namespace LocalJSX { - interface AtoButton { + interface AtomButton { "color"?: 'primary' | 'secondary'; "disabled"?: boolean; "expand"?: 'block' | 'full'; "fill"?: 'clear' | 'outline' | 'solid'; "mode"?: Mode; - "onAtoClick"?: (event: AtoButtonCustomEvent) => void; + "onAtomClick"?: (event: AtomButtonCustomEvent) => void; "shape"?: 'round'; "size"?: 'small' | 'default' | 'large'; "type"?: 'submit' | 'reset' | 'button'; } - interface AtoCol { + interface AtomCol { "offset"?: string; "offsetLg"?: string; "offsetMd"?: string; @@ -167,10 +167,10 @@ declare namespace LocalJSX { "sizeMd"?: string; "sizeSm"?: string; } - interface AtoGrid { + interface AtomGrid { "fixed"?: boolean; } - interface AtoInput { + interface AtomInput { "accept"?: string; "autofocus"?: boolean; "clearInput"?: boolean; @@ -193,18 +193,18 @@ declare namespace LocalJSX { "mode"?: Mode; "multiple"?: boolean; "name"?: string; - "onAtoBlur"?: (event: AtoInputCustomEvent) => void; - "onAtoChange"?: (event: AtoInputCustomEvent) => void; - "onAtoFocus"?: (event: AtoInputCustomEvent) => void; + "onAtomBlur"?: (event: AtomInputCustomEvent) => void; + "onAtomChange"?: (event: AtomInputCustomEvent) => void; + "onAtomFocus"?: (event: AtomInputCustomEvent) => void; "pattern"?: string; "placeholder"?: string; "required"?: boolean; "type"?: TextFieldTypes; "value"?: string; } - interface AtoRow { + interface AtomRow { } - interface AtoSelect { + interface AtomSelect { "cancelText"?: string; "color"?: 'primary' | 'secondary'; "disabled"?: boolean; @@ -215,11 +215,11 @@ declare namespace LocalJSX { "multiple"?: boolean; "name"?: string; "okText"?: string; - "onAtoBlur"?: (event: AtoSelectCustomEvent) => void; - "onAtoCancel"?: (event: AtoSelectCustomEvent) => void; - "onAtoChange"?: (event: AtoSelectCustomEvent) => void; - "onAtoDimiss"?: (event: AtoSelectCustomEvent) => void; - "onAtoFocus"?: (event: AtoSelectCustomEvent) => void; + "onAtomBlur"?: (event: AtomSelectCustomEvent) => void; + "onAtomCancel"?: (event: AtomSelectCustomEvent) => void; + "onAtomChange"?: (event: AtomSelectCustomEvent) => void; + "onAtomDimiss"?: (event: AtomSelectCustomEvent) => void; + "onAtomFocus"?: (event: AtomSelectCustomEvent) => void; "options"?: Array<{ value: string selected?: boolean @@ -230,24 +230,24 @@ declare namespace LocalJSX { "size"?: 'small' | 'large'; } interface IntrinsicElements { - "ato-button": AtoButton; - "ato-col": AtoCol; - "ato-grid": AtoGrid; - "ato-input": AtoInput; - "ato-row": AtoRow; - "ato-select": AtoSelect; + "atom-button": AtomButton; + "atom-col": AtomCol; + "atom-grid": AtomGrid; + "atom-input": AtomInput; + "atom-row": AtomRow; + "atom-select": AtomSelect; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { - "ato-button": LocalJSX.AtoButton & JSXBase.HTMLAttributes; - "ato-col": LocalJSX.AtoCol & JSXBase.HTMLAttributes; - "ato-grid": LocalJSX.AtoGrid & JSXBase.HTMLAttributes; - "ato-input": LocalJSX.AtoInput & JSXBase.HTMLAttributes; - "ato-row": LocalJSX.AtoRow & JSXBase.HTMLAttributes; - "ato-select": LocalJSX.AtoSelect & JSXBase.HTMLAttributes; + "atom-button": LocalJSX.AtomButton & JSXBase.HTMLAttributes; + "atom-col": LocalJSX.AtomCol & JSXBase.HTMLAttributes; + "atom-grid": LocalJSX.AtomGrid & JSXBase.HTMLAttributes; + "atom-input": LocalJSX.AtomInput & JSXBase.HTMLAttributes; + "atom-row": LocalJSX.AtomRow & JSXBase.HTMLAttributes; + "atom-select": LocalJSX.AtomSelect & JSXBase.HTMLAttributes; } } } diff --git a/packages/core/src/components/button/button.spec.ts b/packages/core/src/components/button/button.spec.ts index 62f790134..f37debf07 100644 --- a/packages/core/src/components/button/button.spec.ts +++ b/packages/core/src/components/button/button.spec.ts @@ -1,11 +1,11 @@ import { newSpecPage } from '@stencil/core/testing' -import { AtoButton } from './button' +import { AtomButton } from './button' -describe('AtoButton', () => { +describe('AtomButton', () => { it('should render an ion-button element', async () => { const page = await newSpecPage({ - components: [AtoButton], - html: '', + components: [AtomButton], + html: '', }) expect(page.root.shadowRoot.querySelector('ion-button')).toBeTruthy() @@ -13,8 +13,8 @@ describe('AtoButton', () => { it('should set color prop correctly', async () => { const page = await newSpecPage({ - components: [AtoButton], - html: '', + components: [AtomButton], + html: '', }) expect(page.rootInstance.color).toBe('primary') @@ -22,8 +22,8 @@ describe('AtoButton', () => { it('should set fill prop correctly', async () => { const page = await newSpecPage({ - components: [AtoButton], - html: '', + components: [AtomButton], + html: '', }) expect(page.rootInstance.fill).toBe('outline') @@ -31,8 +31,8 @@ describe('AtoButton', () => { it('should set size prop correctly', async () => { const page = await newSpecPage({ - components: [AtoButton], - html: '', + components: [AtomButton], + html: '', }) expect(page.rootInstance.size).toBe('small') @@ -40,8 +40,8 @@ describe('AtoButton', () => { it('should set disabled prop correctly', async () => { const page = await newSpecPage({ - components: [AtoButton], - html: '', + components: [AtomButton], + html: '', }) expect(page.rootInstance.disabled).toBe(true) @@ -49,8 +49,8 @@ describe('AtoButton', () => { it('should set type prop correctly', async () => { const page = await newSpecPage({ - components: [AtoButton], - html: '', + components: [AtomButton], + html: '', }) expect(page.rootInstance.type).toBe('submit') @@ -59,28 +59,28 @@ describe('AtoButton', () => { const labelText = 'Click me' const page = await newSpecPage({ - components: [AtoButton], - html: `${labelText}`, + components: [AtomButton], + html: `${labelText}`, }) await page.waitForChanges() expect(page.root).toEqualHtml(` - + ${labelText} - + `) }) it('emits atoClick event on button click', async () => { const page = await newSpecPage({ - components: [AtoButton], - html: 'Click', + components: [AtomButton], + html: 'Click', }) await page.waitForChanges() @@ -88,10 +88,10 @@ describe('AtoButton', () => { const buttonEl = page.root.shadowRoot.querySelector('ion-button') const spy = jest.fn() - page.root.addEventListener('atoClick', spy) + page.root.addEventListener('atomClick', spy) buttonEl.click() - page.root.dispatchEvent(new CustomEvent('atoClick')) + page.root.dispatchEvent(new CustomEvent('atomClick')) expect(spy).toHaveBeenCalled() }) diff --git a/packages/core/src/components/button/button.stories.tsx b/packages/core/src/components/button/button.stories.tsx index 2575b534b..12a2ac609 100644 --- a/packages/core/src/components/button/button.stories.tsx +++ b/packages/core/src/components/button/button.stories.tsx @@ -1,9 +1,9 @@ import { withActions } from '@storybook/addon-actions/decorator' import { Meta, StoryObj } from '@storybook/html' -import { AtoButton } from './button' +import { AtomButton } from './button' -type argsButton = AtoButton & { +type argsButton = AtomButton & { label: string } @@ -11,7 +11,7 @@ export default { title: 'Components/Button', parameters: { actions: { - handles: ['atoClick'], + handles: ['atomClick'], }, }, decorators: [withActions], @@ -70,7 +70,7 @@ type Story = StoryObj const createButton = (args: argsButton) => { return ` - { mode="${args.mode}" > ${args.label} - + ` } diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 4442423a7..a01fb52b3 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -2,11 +2,11 @@ import { Mode } from '@ionic/core' import { Component, Event, EventEmitter, h, Prop } from '@stencil/core' @Component({ - tag: 'ato-button', + tag: 'atom-button', styleUrl: 'button.scss', shadow: true, }) -export class AtoButton { +export class AtomButton { @Prop() color: 'primary' | 'secondary' = 'primary' @Prop() fill: 'clear' | 'outline' | 'solid' = 'solid' @Prop() size: 'small' | 'default' | 'large' = 'default' @@ -16,10 +16,10 @@ export class AtoButton { @Prop() type: 'submit' | 'reset' | 'button' = 'button' @Prop() mode: Mode = 'md' - @Event() atoClick: EventEmitter + @Event() atomClick: EventEmitter private handleClick = () => { - this.atoClick.emit() + this.atomClick.emit() } render() { diff --git a/packages/core/src/components/grid/col/col.spec.ts b/packages/core/src/components/grid/col/col.spec.ts index f59813e59..b99dcb1a7 100644 --- a/packages/core/src/components/grid/col/col.spec.ts +++ b/packages/core/src/components/grid/col/col.spec.ts @@ -1,11 +1,11 @@ import { newSpecPage } from '@stencil/core/testing' -import { AtoCol } from './col' +import { AtomCol } from './col' -describe('AtoCol', () => { +describe('AtomCol', () => { it('should set size prop correctly', async () => { const page = await newSpecPage({ - components: [AtoCol], - html: `1`, + components: [AtomCol], + html: `1`, }) await page.waitForChanges() @@ -17,8 +17,8 @@ describe('AtoCol', () => { it('should set offset prop correctly', async () => { const page = await newSpecPage({ - components: [AtoCol], - html: `1`, + components: [AtomCol], + html: `1`, }) await page.waitForChanges() @@ -30,8 +30,8 @@ describe('AtoCol', () => { it('should set size and offset prop correctly', async () => { const page = await newSpecPage({ - components: [AtoCol], - html: `1`, + components: [AtomCol], + html: `1`, }) await page.waitForChanges() @@ -43,8 +43,8 @@ describe('AtoCol', () => { it('should set size-sm prop correctly', async () => { const page = await newSpecPage({ - components: [AtoCol], - html: `1`, + components: [AtomCol], + html: `1`, }) await page.waitForChanges() @@ -56,8 +56,8 @@ describe('AtoCol', () => { it('should set offset-sm prop correctly', async () => { const page = await newSpecPage({ - components: [AtoCol], - html: `1`, + components: [AtomCol], + html: `1`, }) await page.waitForChanges() @@ -69,8 +69,8 @@ describe('AtoCol', () => { it('should set pull prop correctly', async () => { const page = await newSpecPage({ - components: [AtoCol], - html: `1`, + components: [AtomCol], + html: `1`, }) await page.waitForChanges() @@ -82,8 +82,8 @@ describe('AtoCol', () => { it('should set push prop correctly', async () => { const page = await newSpecPage({ - components: [AtoCol], - html: `1`, + components: [AtomCol], + html: `1`, }) await page.waitForChanges() diff --git a/packages/core/src/components/grid/col/col.tsx b/packages/core/src/components/grid/col/col.tsx index 74ff5c215..ef062f6e6 100644 --- a/packages/core/src/components/grid/col/col.tsx +++ b/packages/core/src/components/grid/col/col.tsx @@ -1,10 +1,10 @@ import { Component, Element, h, Host, Prop } from '@stencil/core' @Component({ - tag: 'ato-col', + tag: 'atom-col', shadow: false, }) -export class AtoCol { +export class AtomCol { @Prop() size?: 'auto' | string @Prop() sizeSm?: string @Prop() sizeMd?: string diff --git a/packages/core/src/components/grid/grid.spec.ts b/packages/core/src/components/grid/grid.spec.ts index ca73504bf..d98981ffb 100644 --- a/packages/core/src/components/grid/grid.spec.ts +++ b/packages/core/src/components/grid/grid.spec.ts @@ -1,11 +1,11 @@ import { newSpecPage } from '@stencil/core/testing' -import { AtoGrid } from './grid' +import { AtomGrid } from './grid' describe('AtoGrid', () => { it('should render an ion-grid element', async () => { const page = await newSpecPage({ - components: [AtoGrid], - html: '', + components: [AtomGrid], + html: '', }) expect(page.root.querySelector('ion-grid')).toBeTruthy() @@ -13,33 +13,33 @@ describe('AtoGrid', () => { it('should set fixed prop correctly', async () => { const page = await newSpecPage({ - components: [AtoGrid], + components: [AtomGrid], html: ` - - - 1 - 2 - 3 - - + + + 1 + 2 + 3 + + `, }) await page.waitForChanges() expect(page.root).toEqualHtml(` - + - - 1 - 2 - 3 - - + + 1 + 2 + 3 + + - + - + `) }) }) diff --git a/packages/core/src/components/grid/grid.stories.tsx b/packages/core/src/components/grid/grid.stories.tsx index cd9439795..31428c1d0 100644 --- a/packages/core/src/components/grid/grid.stories.tsx +++ b/packages/core/src/components/grid/grid.stories.tsx @@ -1,7 +1,7 @@ import { withActions } from '@storybook/addon-actions/decorator' import { Meta, StoryObj } from '@storybook/html' -import { AtoGrid } from './grid' +import { AtomGrid } from './grid' export default { title: 'Components/Grid', @@ -37,45 +37,45 @@ export default { 'Columns can be pushed to the right by a certain number of columns', }, }, -} as Meta +} as Meta -type Story = StoryObj +type Story = StoryObj export const Default: Story = { render: () => ` - - - 1 - 2 - 3 - - - - - 1 - 2 - 3 - 4 - 5 - 6 - - - - - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - - + + + 1 + 2 + 3 + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + +